ics-ui-kit 0.1.0-alpha.16 → 0.1.0-alpha.17

package/dist/SearchSelectTag-9aMVvXqp.js

@@ -0,0 +1,95 @@
+import { useState as b, useCallback as h, useEffect as k, useMemo as S } from "react";
+import { jsxs as g, jsx as i, Fragment as D } from "react/jsx-runtime";
+import { d as I, a as T, c as w, b as y } from "./Tag-DRaLIx47.js";
+import { u as C } from "./useBreakpoints-WE4xDTqs.js";
+import { c as F } from "./index-CR-odn5-.js";
+function K({ value: e, defaultValue: c, onChange: s }) {
+  const [o, l] = b(c), t = e !== void 0, u = t ? e : o, f = h(
+    (a) => {
+      const d = typeof a == "function" ? a(u) : a;
+      t || l(d), s == null || s(d);
+    },
+    [u, t, s]
+  );
+  return [u, f];
+}
+function L({
+  items: e,
+  onEnter: c,
+  onDelete: s,
+  cycleNavigation: o = !1
+}) {
+  const [l, t] = b(null);
+  k(() => {
+    l !== null && e.length > 0 ? l >= e.length && t(e.length - 1) : e.length === 0 ? t(null) : l === null && e.length > 0 && t(0);
+  }, [e, l]);
+  const u = h(
+    (n) => {
+      if (e.length)
+        switch (n.key) {
+          case "ArrowLeft":
+            n.preventDefault(), t((r) => r === null ? 0 : r > 0 ? r - 1 : o ? e.length - 1 : r);
+            break;
+          case "ArrowRight":
+            n.preventDefault(), t((r) => r === null ? 0 : r < e.length - 1 ? r + 1 : o ? 0 : r);
+            break;
+          case "Home":
+            n.preventDefault(), t(0);
+            break;
+          case "End":
+            n.preventDefault(), t(e.length - 1);
+            break;
+          case "Enter":
+            l !== null && e[l] && c && (n.preventDefault(), c(e[l], l));
+            break;
+          case "Delete":
+            if (l !== null && e[l] && s) {
+              n.preventDefault();
+              const r = l;
+              s(e[l], l), r >= e.length - 1 && t(Math.max(0, e.length - 2));
+            }
+            break;
+        }
+    },
+    [e, l, c, s, o]
+  ), f = h(() => {
+    e.length && t(0);
+  }, [e]), a = h(() => {
+    t(null);
+  }, []), d = h((n) => l === n, [l]), p = h(
+    (n) => n >= 0 && n < e.length ? (t(n), !0) : !1,
+    [e.length]
+  );
+  return {
+    focusedIndex: l,
+    handleKeyDown: u,
+    handleFocus: f,
+    handleBlur: a,
+    isFocused: d,
+    focusItemAtIndex: p
+  };
+}
+const x = F({
+  base: "rounded-sm",
+  variants: {
+    selected: {
+      true: "group-focus-within/search-select-trigger:shadow-focus"
+    }
+  }
+}), M = (e) => {
+  const { children: c, onLabelClick: s, onClose: o, readonly: l = !1, isFocused: t = !1 } = e, u = !!o, f = C(), a = S(() => f ? "lg" : "md", [f]), d = x({ selected: t });
+  return /* @__PURE__ */ g(I, { size: a, className: d, children: [
+    /* @__PURE__ */ i(T, { position: u && !l ? "left" : void 0, size: a, onClick: s, asChild: !0, children: /* @__PURE__ */ i("span", { children: c }) }),
+    !l && /* @__PURE__ */ g(D, { children: [
+      /* @__PURE__ */ i(w, {}),
+      /* @__PURE__ */ i(y, { size: a, onClick: o, tag: "span" })
+    ] })
+  ] });
+};
+M.displayName = "SearchSelectTag";
+export {
+  M as S,
+  L as a,
+  K as u
+};
+//# sourceMappingURL=SearchSelectTag-9aMVvXqp.js.map

package/dist/SearchSelectTag-9aMVvXqp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchSelectTag-9aMVvXqp.js","sources":["../src/hooks/useControllableState.ts","../src/hooks/useItemsKeyboardNavigation.ts","../src/components/search-select/components/SearchSelectTag.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\r\n\r\ntype UseControllableStateParams<T> = {\r\n\t/** Controlled значение */\r\n\tvalue?: T;\r\n\t/** Значение по умолчанию для uncontrolled режима */\r\n\tdefaultValue?: T;\r\n\t/** Callback при изменении значения */\r\n\tonChange?: (value: T) => void;\r\n};\r\n\r\n/**\r\n * Универсальный хук для управления controlled/uncontrolled состоянием.\r\n */\r\nexport function useControllableState<T>({ value, defaultValue, onChange }: UseControllableStateParams<T>) {\r\n\tconst [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\r\n\r\n\tconst isControlled = value !== undefined;\r\n\tconst actualValue = isControlled ? value : uncontrolledValue;\r\n\r\n\tconst setValue = useCallback(\r\n\t\t(nextValue: T | ((prevValue: T) => T)) => {\r\n\t\t\tconst resolvedValue =\r\n\t\t\t\ttypeof nextValue === \"function\" ? (nextValue as (prevValue: T) => T)(actualValue as T) : nextValue;\r\n\r\n\t\t\tif (!isControlled) {\r\n\t\t\t\tsetUncontrolledValue(resolvedValue);\r\n\t\t\t}\r\n\r\n\t\t\tonChange?.(resolvedValue);\r\n\t\t},\r\n\t\t[actualValue, isControlled, onChange]\r\n\t);\r\n\r\n\treturn [actualValue, setValue] as const;\r\n}\r\n","import { useCallback, useState, KeyboardEvent, useEffect } from \"react\";\r\n\r\n/**\r\n * Хук для навигации по элементам с помощью клавиатуры\r\n *\r\n * @example\r\n * ```tsx\r\n * function TagList({ tags, onTagSelect, onTagDelete }) {\r\n *   const containerRef = useRef(null);\r\n *\r\n *   const {\r\n *     focusedIndex,\r\n *     handleKeyDown,\r\n *     handleFocus,\r\n *     handleBlur,\r\n *     isFocused\r\n *   } = useItemsKeyboardNavigation({\r\n *     items: tags,\r\n *     onEnter: onTagSelect,\r\n *     onDelete: onTagDelete\r\n *   });\r\n *\r\n *   return (\r\n *     <div\r\n *       ref={containerRef}\r\n *       tabIndex={0}\r\n *       onKeyDown={handleKeyDown}\r\n *       onFocus={handleFocus}\r\n *       onBlur={handleBlur}\r\n *     >\r\n *       {tags.map((tag, index) => (\r\n *         <div key={tag.id} className={isFocused(index) ? \"focused\" : \"\"}>\r\n *           {tag.label}\r\n *         </div>\r\n *       ))}\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\nexport function useItemsKeyboardNavigation<T>({\r\n\titems,\r\n\tonEnter,\r\n\tonDelete,\r\n\tcycleNavigation = false\r\n}: {\r\n\t/** Массив элементов для навигации */\r\n\titems: T[];\r\n\t/** Функция, вызываемая при нажатии Enter на элементе */\r\n\tonEnter?: (item: T, index: number) => void;\r\n\t/** Функция, вызываемая при нажатии Delete/Backspace на элементе */\r\n\tonDelete?: (item: T, index: number) => void;\r\n\t/** Включает циклическую навигацию (с последнего элемента на первый и наоборот) */\r\n\tcycleNavigation?: boolean;\r\n}) {\r\n\t/** Индекс текущего элемента с фокусом */\r\n\tconst [focusedIndex, setFocusedIndex] = useState<number | null>(null);\r\n\r\n\t/**\r\n\t * Следим за изменениями в items и корректируем focusedIndex при необходимости\r\n\t */\r\n\tuseEffect(() => {\r\n\t\tif (focusedIndex !== null && items.length > 0) {\r\n\t\t\t// Если текущий индекс выходит за границы массива\r\n\t\t\tif (focusedIndex >= items.length) {\r\n\t\t\t\t// Устанавливаем индекс на последний элемент\r\n\t\t\t\tsetFocusedIndex(items.length - 1);\r\n\t\t\t}\r\n\t\t} else if (items.length === 0) {\r\n\t\t\t// Если элементов нет, сбрасываем фокус\r\n\t\t\tsetFocusedIndex(null);\r\n\t\t} else if (focusedIndex === null && items.length > 0) {\r\n\t\t\tsetFocusedIndex(0);\r\n\t\t}\r\n\t}, [items, focusedIndex]);\r\n\r\n\t/**\r\n\t * Обработчик нажатия клавиш для навигации по элементам\r\n\t */\r\n\tconst handleKeyDown = useCallback(\r\n\t\t(e: KeyboardEvent<HTMLElement>) => {\r\n\t\t\t// Проверяем, есть ли элементы для навигации\r\n\t\t\tif (!items.length) return;\r\n\r\n\t\t\tswitch (e.key) {\r\n\t\t\t\tcase \"ArrowLeft\":\r\n\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\tsetFocusedIndex((prev) => {\r\n\t\t\t\t\t\tif (prev === null) return 0;\r\n\t\t\t\t\t\tif (prev > 0) return prev - 1;\r\n\t\t\t\t\t\treturn cycleNavigation ? items.length - 1 : prev;\r\n\t\t\t\t\t});\r\n\t\t\t\t\tbreak;\r\n\r\n\t\t\t\tcase \"ArrowRight\":\r\n\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\tsetFocusedIndex((prev) => {\r\n\t\t\t\t\t\tif (prev === null) return 0;\r\n\t\t\t\t\t\tif (prev < items.length - 1) return prev + 1;\r\n\t\t\t\t\t\treturn cycleNavigation ? 0 : prev;\r\n\t\t\t\t\t});\r\n\t\t\t\t\tbreak;\r\n\r\n\t\t\t\tcase \"Home\":\r\n\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\tsetFocusedIndex(0);\r\n\t\t\t\t\tbreak;\r\n\r\n\t\t\t\tcase \"End\":\r\n\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\tsetFocusedIndex(items.length - 1);\r\n\t\t\t\t\tbreak;\r\n\r\n\t\t\t\tcase \"Enter\":\r\n\t\t\t\t\tif (focusedIndex !== null && items[focusedIndex] && onEnter) {\r\n\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\tonEnter(items[focusedIndex], focusedIndex);\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\r\n\t\t\t\tcase \"Delete\":\r\n\t\t\t\t\tif (focusedIndex !== null && items[focusedIndex] && onDelete) {\r\n\t\t\t\t\t\te.preventDefault();\r\n\r\n\t\t\t\t\t\t// Сохраняем текущий индекс перед удалением\r\n\t\t\t\t\t\tconst currentIndex = focusedIndex;\r\n\r\n\t\t\t\t\t\tonDelete(items[focusedIndex], focusedIndex);\r\n\r\n\t\t\t\t\t\t// Корректируем индекс после удаления\r\n\t\t\t\t\t\t// Это сработает корректно, если items обновится синхронно\r\n\t\t\t\t\t\t// В противном случае, корректировку нужно делать в эффекте\r\n\t\t\t\t\t\tif (currentIndex >= items.length - 1) {\r\n\t\t\t\t\t\t\tsetFocusedIndex(Math.max(0, items.length - 2));\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\r\n\t\t\t\tdefault:\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t},\r\n\t\t[items, focusedIndex, onEnter, onDelete, cycleNavigation]\r\n\t);\r\n\r\n\t/**\r\n\t * Обработчик получения фокуса контейнером\r\n\t */\r\n\tconst handleFocus = useCallback(() => {\r\n\t\tif (items.length) {\r\n\t\t\tsetFocusedIndex(0);\r\n\t\t}\r\n\t}, [items]);\r\n\r\n\t/**\r\n\t * Обработчик потери фокуса контейнером\r\n\t */\r\n\tconst handleBlur = useCallback(() => {\r\n\t\tsetFocusedIndex(null);\r\n\t}, []);\r\n\r\n\t/**\r\n\t * Проверяет, находится ли элемент с указанным индексом в фокусе\r\n\t */\r\n\tconst isFocused = useCallback((index: number) => focusedIndex === index, [focusedIndex]);\r\n\r\n\t/**\r\n\t * Безопасно устанавливает фокус на элемент по индексу\r\n\t * @param index Индекс элемента для фокусировки\r\n\t * @returns Возвращает true, если индекс был установлен успешно\r\n\t */\r\n\tconst focusItemAtIndex = useCallback(\r\n\t\t(index: number) => {\r\n\t\t\tif (index >= 0 && index < items.length) {\r\n\t\t\t\tsetFocusedIndex(index);\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t\treturn false;\r\n\t\t},\r\n\t\t[items.length]\r\n\t);\r\n\r\n\treturn {\r\n\t\tfocusedIndex,\r\n\t\thandleKeyDown,\r\n\t\thandleFocus,\r\n\t\thandleBlur,\r\n\t\tisFocused,\r\n\t\tfocusItemAtIndex\r\n\t};\r\n}\r\n","import { TagButton, TagClose, TagDivider, TagWrapper } from \"@/components/tag/Tag\";\r\nimport { useIsMobile } from \"@/hooks/useBreakpoints\";\r\nimport { PropsWithChildren, useMemo } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\n\r\nconst searchSelectTagStyles = tv({\r\n\tbase: \"rounded-sm\",\r\n\tvariants: {\r\n\t\tselected: {\r\n\t\t\ttrue: \"group-focus-within/search-select-trigger:shadow-focus\"\r\n\t\t}\r\n\t}\r\n});\r\ninterface SearchSelectTagProps {\r\n\tonLabelClick: (e: React.MouseEvent<HTMLElement>) => void;\r\n\tonClose: (e: React.MouseEvent<HTMLElement>) => void;\r\n\treadonly?: boolean;\r\n\tisFocused?: boolean;\r\n}\r\n\r\nexport const SearchSelectTag = (props: PropsWithChildren<SearchSelectTagProps>) => {\r\n\tconst { children, onLabelClick, onClose, readonly = false, isFocused: selected = false } = props;\r\n\tconst hasClose = Boolean(onClose);\r\n\tconst isMobile = useIsMobile();\r\n\tconst size = useMemo(() => (isMobile ? \"lg\" : \"md\"), [isMobile]);\r\n\tconst styles = searchSelectTagStyles({ selected });\r\n\r\n\treturn (\r\n\t\t<TagWrapper size={size} className={styles}>\r\n\t\t\t<TagButton position={hasClose && !readonly ? \"left\" : undefined} size={size} onClick={onLabelClick} asChild>\r\n\t\t\t\t<span>{children}</span>\r\n\t\t\t</TagButton>\r\n\r\n\t\t\t{!readonly && (\r\n\t\t\t\t<>\r\n\t\t\t\t\t<TagDivider />\r\n\t\t\t\t\t<TagClose size={size} onClick={onClose} tag=\"span\" />\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t</TagWrapper>\r\n\t);\r\n};\r\n\r\nSearchSelectTag.displayName = \"SearchSelectTag\";\r\n"],"names":["useControllableState","value","defaultValue","onChange","uncontrolledValue","setUncontrolledValue","useState","isControlled","actualValue","setValue","useCallback","nextValue","resolvedValue","useItemsKeyboardNavigation","items","onEnter","onDelete","cycleNavigation","focusedIndex","setFocusedIndex","useEffect","handleKeyDown","e","prev","currentIndex","handleFocus","handleBlur","isFocused","index","focusItemAtIndex","searchSelectTagStyles","tv","SearchSelectTag","props","children","onLabelClick","onClose","readonly","selected","hasClose","isMobile","useIsMobile","size","useMemo","styles","jsxs","TagWrapper","jsx","TagButton","Fragment","TagDivider","TagClose"],"mappings":"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"}

package/dist/components/search-select/index.d.ts

@@ -16,3 +16,5 @@ export { AsyncSearchSelect } from './async-search-select/AsyncSearchSelect';
 export { AsyncSearchSelectContent } from './async-search-select/components/AsyncSearchSelectContent';
 export type { AsyncSearchSelectProps, LoadOptionsParams, LoadOptionsResult } from './async-search-select/types';
 export { useAsyncDataLoader } from './async-search-select/hooks/useAsyncDataLoader';
+export { MultiSelect } from './multi-select/MultiSelect';
+export type { MultiSelectProps } from './multi-select/MultiSelect';