gg

2026-05-10 22:59:27 +03:00
parent 6dadc5f613
commit 5c8619b282
161 changed files with 6708 additions and 3435 deletions
@@ -1,45 +1,56 @@
-'use client';
+"use client";

-import type { CollectionItem } from '@chakra-ui/react';
-import { Select as ChakraSelect, Portal } from '@chakra-ui/react';
-import { CloseButton } from '../buttons/close-button';
-import * as React from 'react';
+import type { CollectionItem } from "@chakra-ui/react";
+import { Select as ChakraSelect, Portal } from "@chakra-ui/react";
+import { CloseButton } from "../buttons/close-button";
+import * as React from "react";

 interface SelectTriggerProps extends ChakraSelect.ControlProps {
  clearable?: boolean;
 }

-export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  function SelectTrigger(props, ref) {
-    const { children, clearable, ...rest } = props;
-    return (
-      <ChakraSelect.Control {...rest}>
-        <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
-        <ChakraSelect.IndicatorGroup>
-          {clearable && <SelectClearTrigger />}
-          <ChakraSelect.Indicator />
-        </ChakraSelect.IndicatorGroup>
-      </ChakraSelect.Control>
-    );
-  },
-);
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SelectTriggerProps
+>(function SelectTrigger(props, ref) {
+  const { children, clearable, ...rest } = props;
+  return (
+    <ChakraSelect.Control {...rest}>
+      <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
+      <ChakraSelect.IndicatorGroup>
+        {clearable && <SelectClearTrigger />}
+        <ChakraSelect.Indicator />
+      </ChakraSelect.IndicatorGroup>
+    </ChakraSelect.Control>
+  );
+});

-const SelectClearTrigger = React.forwardRef<HTMLButtonElement, ChakraSelect.ClearTriggerProps>(
-  function SelectClearTrigger(props, ref) {
-    return (
-      <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
-        <CloseButton size='xs' variant='plain' focusVisibleRing='inside' focusRingWidth='2px' pointerEvents='auto' />
-      </ChakraSelect.ClearTrigger>
-    );
-  },
-);
+const SelectClearTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraSelect.ClearTriggerProps
+>(function SelectClearTrigger(props, ref) {
+  return (
+    <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
+      <CloseButton
+        size="xs"
+        variant="plain"
+        focusVisibleRing="inside"
+        focusRingWidth="2px"
+        pointerEvents="auto"
+      />
+    </ChakraSelect.ClearTrigger>
+  );
+});

 interface SelectContentProps extends ChakraSelect.ContentProps {
  portalled?: boolean;
  portalRef?: React.RefObject<HTMLElement | null>;
 }

-export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(function SelectContent(props, ref) {
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  SelectContentProps
+>(function SelectContent(props, ref) {
  const { portalled = true, portalRef, ...rest } = props;
  return (
    <Portal disabled={!portalled} container={portalRef}>
@@ -50,7 +61,10 @@ export const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps
  );
 });

-export const SelectItem = React.forwardRef<HTMLDivElement, ChakraSelect.ItemProps>(function SelectItem(props, ref) {
+export const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  ChakraSelect.ItemProps
+>(function SelectItem(props, ref) {
  const { item, children, ...rest } = props;
  return (
    <ChakraSelect.Item key={item.value} item={item} {...rest} ref={ref}>
@@ -60,32 +74,44 @@ export const SelectItem = React.forwardRef<HTMLDivElement, ChakraSelect.ItemProp
  );
 });

-interface SelectValueTextProps extends Omit<ChakraSelect.ValueTextProps, 'children'> {
+interface SelectValueTextProps extends Omit<
+  ChakraSelect.ValueTextProps,
+  "children"
+> {
  children?(items: CollectionItem[]): React.ReactNode;
 }

-export const SelectValueText = React.forwardRef<HTMLSpanElement, SelectValueTextProps>(
-  function SelectValueText(props, ref) {
-    const { children, ...rest } = props;
-    return (
-      <ChakraSelect.ValueText {...rest} ref={ref}>
-        <ChakraSelect.Context>
-          {(select) => {
-            const items = select.selectedItems;
-            if (items.length === 0) return props.placeholder;
-            if (children) return children(items);
-            if (items.length === 1) return select.collection.stringifyItem(items[0]);
-            return `${items.length} selected`;
-          }}
-        </ChakraSelect.Context>
-      </ChakraSelect.ValueText>
-    );
-  },
-);
-
-export const SelectRoot = React.forwardRef<HTMLDivElement, ChakraSelect.RootProps>(function SelectRoot(props, ref) {
+export const SelectValueText = React.forwardRef<
+  HTMLSpanElement,
+  SelectValueTextProps
+>(function SelectValueText(props, ref) {
+  const { children, ...rest } = props;
  return (
-    <ChakraSelect.Root {...props} ref={ref} positioning={{ sameWidth: true, ...props.positioning }}>
+    <ChakraSelect.ValueText {...rest} ref={ref}>
+      <ChakraSelect.Context>
+        {(select) => {
+          const items = select.selectedItems;
+          if (items.length === 0) return props.placeholder;
+          if (children) return children(items);
+          if (items.length === 1)
+            return select.collection.stringifyItem(items[0]);
+          return `${items.length} selected`;
+        }}
+      </ChakraSelect.Context>
+    </ChakraSelect.ValueText>
+  );
+});
+
+export const SelectRoot = React.forwardRef<
+  HTMLDivElement,
+  ChakraSelect.RootProps
+>(function SelectRoot(props, ref) {
+  return (
+    <ChakraSelect.Root
+      {...props}
+      ref={ref}
+      positioning={{ sameWidth: true, ...props.positioning }}
+    >
      {props.asChild ? (
        props.children
      ) : (
@@ -102,17 +128,18 @@ interface SelectItemGroupProps extends ChakraSelect.ItemGroupProps {
  label: React.ReactNode;
 }

-export const SelectItemGroup = React.forwardRef<HTMLDivElement, SelectItemGroupProps>(
-  function SelectItemGroup(props, ref) {
-    const { children, label, ...rest } = props;
-    return (
-      <ChakraSelect.ItemGroup {...rest} ref={ref}>
-        <ChakraSelect.ItemGroupLabel>{label}</ChakraSelect.ItemGroupLabel>
-        {children}
-      </ChakraSelect.ItemGroup>
-    );
-  },
-);
+export const SelectItemGroup = React.forwardRef<
+  HTMLDivElement,
+  SelectItemGroupProps
+>(function SelectItemGroup(props, ref) {
+  const { children, label, ...rest } = props;
+  return (
+    <ChakraSelect.ItemGroup {...rest} ref={ref}>
+      <ChakraSelect.ItemGroupLabel>{label}</ChakraSelect.ItemGroupLabel>
+      {children}
+    </ChakraSelect.ItemGroup>
+  );
+});

 export const SelectLabel = ChakraSelect.Label;
 export const SelectItemText = ChakraSelect.ItemText;