@alphakits/ui 2.3.0 → 2.4.0

package/dist/select/components/select-search/index.js

@@ -1,25 +1,25 @@
 import { jsxs as k, jsx as s } from "react/jsx-runtime";
-import a, { useEffect as v, useState as L, useRef as P, useCallback as p, useMemo as b } from "react";
-import j from "@alphakits/icons/dist/SearchS";
-import { useClickOutside as E } from "../../../hooks/useClickOutside/index.js";
+import v from "@alphakits/icons/dist/SearchS";
+import a, { useEffect as P, useState as C, useRef as b, useCallback as p, useMemo as j } from "react";
 import "../../../toast-notifier/component.js";
+import { useClickOutside as E } from "../../../hooks/useClickOutside/index.js";
 import { safeStringify as I } from "../../../utils/safe-stringify.js";
 import { Input as z } from "../../../input/component.js";
 import { BaseSelect as A } from "../base-select/component.js";
 import { OptionsList as B } from "../options-list/component.js";
 import F from "./index.module.css.js";
 const M = a.forwardRef(
-  ({ inputProps: e, ...o }, n) => {
+  ({ inputProps: t, ...o }, n) => {
     const i = a.useRef(null), c = a.useRef(null);
-    return v(() => {
+    return P(() => {
       i.current?.focus();
     }, []), /* @__PURE__ */ k("div", { ref: n, children: [
       /* @__PURE__ */ s("div", { style: { padding: "5px 20px" }, children: /* @__PURE__ */ s(
         z,
         {
           size: "s",
-          leftAddons: /* @__PURE__ */ s(j, {}),
-          ...e,
+          leftAddons: /* @__PURE__ */ s(v, {}),
+          ...t,
           fieldClassName: F.innerInput,
           block: !0,
           ref: i
@@ -29,37 +29,39 @@ const M = a.forwardRef(
     ] });
   }
 ), V = ({
-  options: e,
+  options: t,
   searchType: o = "text",
   onChange: n,
   selected: i = "",
   ...c
 }) => {
-  const [O, f] = L(e), [m, d] = L(""), h = P(null), S = p(
+  const [L, f] = C(t), [m, d] = C(""), h = b(null), S = p(
     (x, { value: l }) => {
       d(l);
       try {
-        if (!l) return f(e);
-        const C = String(l).toLowerCase(), g = e.reduce(
+        if (!l) return f(t);
+        const y = String(l).toLowerCase(), g = t.reduce(
           (u, r) => u.concat(r.options ? r.options : [r]),
           []
-        ).filter(({ key: u, value: r, content: w }) => I({ key: u, value: r, content: w }).toLowerCase().includes(C));
+        ).filter(
+          ({ key: u, value: r, content: w }) => I({ key: u, value: r, content: w }).toLowerCase().includes(y)
+        );
         return f(g);
       } catch {
         return [];
       }
     },
-    [e]
-  ), t = p(() => {
-    d(""), f(e);
-  }, [e]), R = p(
+    [t]
+  ), e = p(() => {
+    d(""), f(t);
+  }, [t]), O = p(
     (x) => {
-      n?.(x), t();
+      n?.(x), e();
     },
-    [n, t]
+    [n, e]
   );
-  E(h, t);
-  const y = b(
+  E(h, e);
+  const R = j(
     () => ({
       ref: h,
       inputProps: {
@@ -67,22 +69,22 @@ const M = a.forwardRef(
         value: m,
         type: o,
         clear: !0,
-        onClear: t
+        onClear: e
       }
     }),
-    [S, m, o, t]
+    [S, m, o, e]
   );
   return /* @__PURE__ */ s(
     A,
     {
       ...c,
       selected: i,
-      onChange: R,
+      onChange: O,
       showEmptyOptionsList: !0,
       OptionsList: M,
-      filteredOptions: O,
-      options: e,
-      optionsListProps: y
+      filteredOptions: L,
+      options: t,
+      optionsListProps: R
     }
   );
 };

package/dist/select/components/virtual-options-list/component.d.ts

@@ -1,6 +1,5 @@
-import { default as React } from 'react';
 import { OptionsListProps } from '../../typings';
 export type VirtualOptionsList = OptionsListProps & {
     overscan?: number;
 };
-export declare const VirtualOptionsList: ({ size, flatOptions, highlightedIndex, className, Option, open, options, overscan, Optgroup, dataTestId, emptyPlaceholder, visibleOptions, }: VirtualOptionsList) => React.JSX.Element;
+export declare const VirtualOptionsList: ({ size, flatOptions, highlightedIndex, className, Option, open, options, overscan, Optgroup, dataTestId, emptyPlaceholder, visibleOptions, }: VirtualOptionsList) => import("react/jsx-runtime").JSX.Element;

package/dist/select/components/virtual-options-list/component.js

@@ -1,88 +1,95 @@
 import { jsxs as v, jsx as f } from "react/jsx-runtime";
-import { useRef as b, useState as O, useEffect as a, useMemo as $ } from "react";
-import { useVirtual as E } from "react-virtual";
-import y from "classnames";
-import { usePrevious as G } from "../../../hooks/usePrevious/index.js";
+import I from "classnames";
+import { useRef as b, useState as g, useEffect as m, useMemo as E } from "react";
+import { useVirtual as G } from "react-virtual";
 import "../../../toast-notifier/component.js";
-import { lastIndexOf as H, useVisibleOptions as M, isGroup as I } from "../../utils.js";
-import { Optgroup as P } from "../optgroup/component.js";
-import l from "./index.module.css.js";
-const R = ({
-  size: N = "s",
-  flatOptions: n = [],
+import { usePrevious as H } from "../../../hooks/usePrevious/index.js";
+import { lastIndexOf as M, useVisibleOptions as P, isGroup as T } from "../../utils.js";
+import { Optgroup as Y } from "../optgroup/component.js";
+import o from "./index.module.css.js";
+const U = ({
+  size: y = "s",
+  flatOptions: t = [],
   highlightedIndex: s = -1,
-  className: T,
+  className: N,
   Option: V,
-  open: m,
-  options: o = [],
+  open: a,
+  options: i = [],
   overscan: z = 10,
-  Optgroup: D = P,
+  Optgroup: D = Y,
   dataTestId: S,
-  emptyPlaceholder: p,
-  visibleOptions: g = 5
+  emptyPlaceholder: x,
+  visibleOptions: j = 5
 }) => {
-  const x = b(null), c = b(null), [j, K] = O(0), u = G(s) || -1, r = E({
-    size: n.length,
+  const p = b(null), c = b(null), [K, L] = g(0), u = H(s) || -1, r = G({
+    size: t.length,
     parentRef: c,
     overscan: z
   });
-  a(() => {
-    m && r.scrollToIndex(s, { align: "end" });
-  }, [m]), a(() => {
+  m(() => {
+    a && r.scrollToIndex(s, { align: "end" });
+  }, [a, r.scrollToIndex, s]), m(() => {
     s !== -1 && (r.virtualItems.some((e) => e.index === s) || r.scrollToIndex(s, { align: "end" }));
-  }, [s]), a(() => {
-    const e = (d) => !d.disabled, i = n.findIndex(e), t = H(n, e);
-    u <= i && s === n.length - 1 && r.scrollToIndex(t), u >= t && s === 0 && r.scrollToIndex(0);
-  }, [u, s]), a(() => {
-    K(
+  }, [s, r.scrollToIndex, r.virtualItems.some]), m(() => {
+    const e = (d) => !d.disabled, l = t.findIndex(e), n = M(t, e);
+    u <= l && s === t.length - 1 && r.scrollToIndex(n), u >= n && s === 0 && r.scrollToIndex(0);
+  }, [
+    u,
+    s,
+    r.scrollToIndex,
+    t.length,
+    t.findIndex,
+    t
+  ]), m(() => {
+    L(
       /**
        * react-virtual может несколько раз отрендерить список с одним элементом,
        * поэтому нужно еще раз пересчитать высоту, когда список ВИДИМЫХ пунктов будет отрендерен полностью
        * Также, высоту нужно пересчитывать при изменении ОБЩЕГО кол-ва пунктов меню
        */
-      r.virtualItems.length > 1 ? n.length : 1
+      r.virtualItems.length > 1 ? t.length : 1
     );
-  }, [r.virtualItems.length, n.length]), M({
-    visibleOptions: g,
-    invalidate: j,
-    listRef: x,
+  }, [r.virtualItems.length, t.length]), P({
+    visibleOptions: j,
+    invalidate: K,
+    listRef: p,
     styleTargetRef: c,
-    open: m
+    open: a
   });
-  const L = $(() => {
+  const $ = E(() => {
     let e = 0;
-    return o.reduce((i, t, d) => (I(t) ? (i[e] = d, e += t.options.length) : e += 1, i), {});
-  }, [o]);
+    return i.reduce((l, n, d) => (T(n) ? (l[e] = d, e += n.options.length) : e += 1, l), {});
+  }, [i]);
   return /* @__PURE__ */ v(
     "div",
     {
-      className: y(l.virtualOptionsList, l[N], T),
+      className: I(o.virtualOptionsList, o[y], N),
       ref: c,
       "data-test-id": S,
       children: [
         /* @__PURE__ */ f(
           "div",
           {
-            className: l.inner,
+            className: o.inner,
             style: {
               height: `${r.totalSize}px`
             },
-            ref: x,
+            ref: p,
             children: r.virtualItems.map((e) => {
-              const i = n[e.index], t = o[L[e.index]];
+              const l = t[e.index], n = i[$[e.index]];
               return /* @__PURE__ */ v(
                 "div",
                 {
                   ref: e.measureRef,
-                  className: y(l.virtualRow, {
-                    [l.highlighted]: s === e.index
+                  className: I(o.virtualRow, {
+                    [o.highlighted]: s === e.index
                   }),
                   style: {
                     transform: `translateY(${e.start}px)`
                   },
                   children: [
-                    t && /* @__PURE__ */ f(D, { label: t.label }),
-                    !I(i) && V({ option: i, index: e.index })
+                    n && /* @__PURE__ */ f(D, { label: n.label }),
+                    !T(l) && V({ option: l, index: e.index })
                   ]
                 },
                 e.index
@@ -90,11 +97,11 @@ const R = ({
             })
           }
         ),
-        p && o.length === 0 && /* @__PURE__ */ f("div", { className: l.emptyPlaceholder, children: p })
+        x && i.length === 0 && /* @__PURE__ */ f("div", { className: o.emptyPlaceholder, children: x })
       ]
     }
   );
 };
 export {
-  R as VirtualOptionsList
+  U as VirtualOptionsList
 };

package/dist/select/index.js

@@ -6,8 +6,8 @@ import { Optgroup as m } from "./components/optgroup/component.js";
 import { Option as l } from "./components/option/component.js";
 import { OptionsList as c } from "./components/options-list/component.js";
 import { VirtualOptionsList as L } from "./components/virtual-options-list/component.js";
-import { useSelectWithLoading as d } from "./presets/use-select-with-loading/hook.js";
-import { useLazyLoading as h } from "./presets/use-lazy-loading/index.js";
+import { useLazyLoading as d } from "./presets/use-lazy-loading/index.js";
+import { useSelectWithLoading as h } from "./presets/use-select-with-loading/hook.js";
 import { convertToOptions as b, isGroup as j, isOptionShape as v, joinOptions as w, lastIndexOf as y, processOptions as z, useVisibleOptions as A } from "./utils.js";
 export {
   p as Arrow,
@@ -24,7 +24,7 @@ export {
   w as joinOptions,
   y as lastIndexOf,
   z as processOptions,
-  h as useLazyLoading,
-  d as useSelectWithLoading,
+  d as useLazyLoading,
+  h as useSelectWithLoading,
   A as useVisibleOptions
 };

package/dist/select/presets/index.d.ts

@@ -1,2 +1,2 @@
-export * from './use-select-with-loading/hook';
 export * from './use-lazy-loading';
+export * from './use-select-with-loading/hook';

package/dist/select/presets/index.js

@@ -1,6 +1,6 @@
-import { useSelectWithLoading as r } from "./use-select-with-loading/hook.js";
-import { useLazyLoading as a } from "./use-lazy-loading/index.js";
+import { useLazyLoading as r } from "./use-lazy-loading/index.js";
+import { useSelectWithLoading as a } from "./use-select-with-loading/hook.js";
 export {
-  a as useLazyLoading,
-  r as useSelectWithLoading
+  r as useLazyLoading,
+  a as useSelectWithLoading
 };

package/dist/select/presets/use-lazy-loading/index.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { OptionProps, OptionShape } from '../../typings';
 type OptionsFetcherResponse = {
     items: Array<{
@@ -24,12 +23,12 @@ type UseLazyLoadingProps = {
 };
 export declare function useLazyLoading({ limit, initialPage, optionsFetcher, }: UseLazyLoadingProps): {
     optionsProps: {
-        Option: (props: OptionProps) => React.JSX.Element;
+        Option: (props: OptionProps) => import("react/jsx-runtime").JSX.Element;
         options: OptionShape[];
         optionsListProps: {
-            ref: React.RefObject<HTMLDivElement | null>;
+            ref: import('react').RefObject<HTMLDivElement | null>;
             inputProps: {
-                onChange: (event: React.ChangeEvent<HTMLInputElement, Element>, payload: {
+                onChange: (event: import('react').ChangeEvent<HTMLInputElement, Element>, payload: {
                     value: string;
                 }) => void;
                 value: string;

package/dist/select/presets/use-lazy-loading/index.js

@@ -1,9 +1,9 @@
 import { jsx as x } from "react/jsx-runtime";
-import { useReducer as b, useRef as u, useCallback as p, useEffect as m, useMemo as A } from "react";
+import { useReducer as b, useRef as u, useCallback as p, useEffect as I, useMemo as A } from "react";
 import { Option as F } from "../../components/option/component.js";
 import { convertToOptions as H } from "../../utils.js";
 import "intersection-observer";
-const U = 300, c = {
+const U = 300, a = {
   fetchOptionsStart() {
     return { type: "FETCH_OPTIONS_START" };
   },
@@ -25,12 +25,12 @@ const U = 300, c = {
 };
 function G({
   limit: n = 10,
-  initialPage: E = 0,
-  optionsFetcher: _
+  initialPage: m = 0,
+  optionsFetcher: S
 }) {
   const d = [], O = {
     opened: !1,
-    page: E,
+    page: m,
     options: d,
     loading: !1,
     allOptionsLoaded: !1,
@@ -75,37 +75,36 @@ function G({
       default:
         return e;
     }
-  }, [
-    {
-      opened: y,
-      page: f,
-      options: g,
-      loading: o,
-      allOptionsLoaded: R,
-      searchText: T
-    },
-    r
-  ] = b(C, O), a = u(void 0), s = p(() => {
-    r(c.fetchOptionsStart()), new Promise((e, t) => {
-      a.current?.(), a.current = t, _({ page: f, limit: n, searchText: T }).then((i) => {
+  }, [{ opened: E, page: _, options: f, loading: o, allOptionsLoaded: y, searchText: g }, r] = b(
+    C,
+    O
+  ), c = u(void 0), s = p(() => {
+    r(a.fetchOptionsStart()), new Promise((e, t) => {
+      c.current?.(), c.current = t, S({ page: _, limit: n, searchText: g }).then((i) => {
         e(i);
       });
     }).then((e) => {
-      const t = H(e.items), { meta: { totalPages: i, currentPage: S } } = e;
-      r(c.fetchOptionsSuccess({ options: t, hasMore: S < i })), a.current = void 0;
+      const t = H(e.items), {
+        meta: { totalPages: i, currentPage: h }
+      } = e;
+      r(
+        a.fetchOptionsSuccess({
+          options: t,
+          hasMore: h < i
+        })
+      ), c.current = void 0;
     }).catch(
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       (e) => {
-        console.log(e);
       }
     );
-  }, [f, n, T, _]), l = u(null);
-  m(() => {
+  }, [_, n, g, S]), l = u(null);
+  I(() => {
     let e;
-    if (y && !o && !R) {
+    if (E && !o && !y) {
       e = new IntersectionObserver(
-        ([S]) => {
-          S.isIntersecting && (e && e.disconnect(), s());
+        ([h]) => {
+          h.isIntersecting && (e && e.disconnect(), s());
         },
         {
           root: l.current
@@ -117,30 +116,33 @@ function G({
     return () => {
       e && e.disconnect();
     };
-  }, [f, y, R, E, o, s]);
+  }, [E, y, o, s]);
   const N = p(
     (e) => {
-      e.open ? g.length === d.length && s() : (a.current?.(), r(c.fetchOptionsBreak())), r(c.setIsOpened(e.open ?? !1));
+      e.open ? f.length === d.length && s() : (c.current?.(), r(a.fetchOptionsBreak())), r(a.setIsOpened(e.open ?? !1));
     },
-    [d.length, g.length, s]
-  ), I = u(void 0), h = u(void 0);
-  m(() => {
-    I.current = s;
+    [d.length, f.length, s]
+  ), R = u(void 0), T = u(void 0);
+  I(() => {
+    R.current = s;
   }, [s]);
   const P = p(
     (e, t) => {
-      r(c.setQueryString(t.value)), a.current?.(), l.current?.scrollTo({ top: 0 }), h.current && clearTimeout(h.current), h.current = setTimeout(() => {
-        I.current?.();
+      r(a.setQueryString(t.value)), c.current?.(), l.current?.scrollTo({ top: 0 }), T.current && clearTimeout(T.current), T.current = setTimeout(() => {
+        R.current?.();
       }, U);
     },
     []
-  ), v = A(() => Array(o ? n : 0).fill(0).map((e, t) => ({
-    key: t,
-    disabled: !0,
-    content: "",
-    loading: !0
-  })), [o, n]), L = p(() => {
-    r(c.reset());
+  ), v = A(
+    () => Array(o ? n : 0).fill(0).map((e, t) => ({
+      key: t,
+      disabled: !0,
+      content: "",
+      loading: !0
+    })),
+    [o, n]
+  ), L = p(() => {
+    r(a.reset());
   }, []);
   return {
     optionsProps: {
@@ -148,12 +150,12 @@ function G({
         (e) => /* @__PURE__ */ x(F, { ...e, highlighted: o ? !1 : e.highlighted }),
         [o]
       ),
-      options: [...g, ...v],
+      options: [...f, ...v],
       optionsListProps: {
         ref: l,
         inputProps: {
           onChange: P,
-          value: T
+          value: g
         }
       },
       onOpen: N

package/dist/select/presets/use-select-with-loading/hook.d.ts

@@ -1,11 +1,10 @@
-import { default as React } from 'react';
 import { BaseSelectProps, OptionProps, OptionShape } from '../../typings';
 type useSelectWithLoadingProps = {
     loading?: boolean;
     visibleOptions?: BaseSelectProps['visibleOptions'];
 };
 export declare function useSelectWithLoading({ loading, visibleOptions, }: useSelectWithLoadingProps): {
-    Option: (props: OptionProps) => React.JSX.Element;
+    Option: (props: OptionProps) => import("react/jsx-runtime").JSX.Element;
     options: OptionShape[];
 } | null;
 export {};

package/dist/select/presets/use-select-with-loading/hook.js

@@ -8,7 +8,14 @@ function k({
   visibleOptions: r = 6
 }) {
   const i = s(
-    (e) => /* @__PURE__ */ o(f, { ...e, Checkmark: void 0, highlighted: t ? !1 : e.highlighted }),
+    (e) => /* @__PURE__ */ o(
+      f,
+      {
+        ...e,
+        Checkmark: void 0,
+        highlighted: t ? !1 : e.highlighted
+      }
+    ),
     [t]
   ), l = Array(r).fill(0).map((e, n) => ({
     key: n,

package/dist/select/utils.js

@@ -1,55 +1,55 @@
-import { useEffect as p, isValidElement as f, cloneElement as y } from "react";
-const a = (t) => Object.prototype.hasOwnProperty.call(t, "options"), g = (t) => !!t && Object.prototype.hasOwnProperty.call(t, "key"), O = ({
-  selected: t,
+import { useEffect as f, isValidElement as p, cloneElement as a } from "react";
+const y = (e) => Object.hasOwn(e, "options"), d = (e) => typeof e == "object" && e !== null && Object.hasOwn(e, "key"), O = ({
+  selected: e,
   selectedMultiple: s
 }) => {
-  const e = s || (t ? [t] : []);
-  return e.length ? e.reduce((r, o, c) => (f(o.content) ? r.push(y(o.content, { key: o.key })) : r.push(o.content), c < e.length - 1 && r.push(", "), r), []) : null;
+  const t = s || (e ? [e] : []);
+  return t.length ? t.reduce((r, c, o) => (p(c.content) ? r.push(a(c.content, { key: c.key })) : r.push(c.content), o < t.length - 1 && r.push(", "), r), []) : null;
 };
-function k(t, s = []) {
-  const e = [], r = Array.isArray(s) ? s : [s], o = r.filter(g), c = new Set(
+function k(e, s = []) {
+  const t = [], r = Array.isArray(s) ? s : [s], c = r.filter(d), o = new Set(
     r.filter(
       (n) => typeof n == "string" || typeof n == "number"
     )
-  ), h = (n) => c.has(n.key), l = (n) => {
-    e.push(n), h(n) && o.push(n);
+  ), h = (n) => o.has(n.key), l = (n) => {
+    t.push(n), h(n) && c.push(n);
   };
-  return t.forEach((n) => {
-    a(n) ? n.options.forEach(l) : l(n);
-  }), { flatOptions: e, selectedOptions: o };
+  return e.forEach((n) => {
+    y(n) ? n.options.forEach(l) : l(n);
+  }), { flatOptions: t, selectedOptions: c };
 }
 function E({
-  visibleOptions: t,
+  visibleOptions: e,
   listRef: s,
-  styleTargetRef: e = s,
+  styleTargetRef: t = s,
   open: r,
-  invalidate: o
+  invalidate: c
 }) {
-  p(() => {
-    const c = s.current, h = e.current;
-    if (r && c && h) {
+  f(() => {
+    const o = s.current, h = t.current;
+    if (r && o && h) {
       const l = [].slice.call(
-        c.children,
+        o.children,
         0,
-        t + 1
+        e + 1
       );
-      let n = l.slice(0, t).reduce((i, u) => i + u.clientHeight, 0);
-      t < c.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), h.style.height = `${n}px`;
+      let n = l.slice(0, e).reduce((i, u) => i + u.clientHeight, 0);
+      e < o.children.length && (n += Math.round(l[l.length - 1].clientHeight / 2)), h.style.height = `${n}px`;
     }
-  }, [s, r, e, t, o]);
+  }, [s, r, t, e]);
 }
-const j = (t, s) => {
-  for (let e = t.length - 1; e >= 0; e--)
-    if (s(t[e])) return e;
+const j = (e, s) => {
+  for (let t = e.length - 1; t >= 0; t--)
+    if (s(e[t])) return t;
   return -1;
-}, m = (t, s) => t.map((e) => ({
-  key: e.id,
-  content: s && e[s] || e.title || e.name
+}, w = (e, s) => e.map((t) => ({
+  key: t.id,
+  content: s && t[s] || t.title || t.name
 }));
 export {
-  m as convertToOptions,
-  a as isGroup,
-  g as isOptionShape,
+  w as convertToOptions,
+  y as isGroup,
+  d as isOptionShape,
   O as joinOptions,
   j as lastIndexOf,
   k as processOptions,