@alphakits/ui 2.3.1 → 2.4.1

package/dist/notification/component.js

@@ -1,13 +1,13 @@
 import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as F, useRef as u, useState as G, useCallback as r, useEffect as R } from "react";
-import L from "react-merge-refs";
-import { useSwipeable as M, LEFT as U, RIGHT as V, UP as $ } from "react-swipeable";
-import q from "classnames";
+import F from "classnames";
+import { forwardRef as G, useRef as u, useState as L, useCallback as r, useEffect as R } from "react";
+import M from "react-merge-refs";
+import { useSwipeable as U, LEFT as V, RIGHT as $, UP as q } from "react-swipeable";
 import { Portal as z } from "../portal/component.js";
 import { ToastPlate as B } from "../toast-plate/component.js";
-import { useClickOutside as J } from "./utils/index.js";
 import i from "./index.module.css.js";
-const K = `.${i.notificationComponent}`, v = F(
+import { useClickOutside as J } from "./utils/index.js";
+const K = `.${i.notificationComponent}`, v = G(
   ({
     className: g,
     children: h,
@@ -23,7 +23,7 @@ const K = `.${i.notificationComponent}`, v = F(
     style: P,
     ...k
   }, x) => {
-    const d = u(null), T = u(0), w = u(0), [A, C] = G(!1), s = r(() => {
+    const d = u(null), T = u(0), w = u(0), [A, C] = L(!1), s = r(() => {
       T.current = window.setTimeout(() => {
         c && c();
       }, p);
@@ -50,15 +50,17 @@ const K = `.${i.notificationComponent}`, v = F(
       [f, s, o]
     ), I = r(
       (t) => {
-        const y = !!t.target.closest(K);
+        const y = !!t.target.closest(
+          K
+        );
         m && e && !y && m(t);
       },
       [m, e]
     );
     J(d, I);
-    const j = M({
+    const j = U({
       onSwiped: ({ dir: t }) => {
-        n && [U, V, $].includes(t) && (C(!0), w.current = window.setTimeout(() => {
+        n && [V, $, q].includes(t) && (C(!0), w.current = window.setTimeout(() => {
           C(!1), n();
         }, 100));
       },
@@ -68,7 +70,7 @@ const K = `.${i.notificationComponent}`, v = F(
     return /* @__PURE__ */ l(z, { children: /* @__PURE__ */ l("div", { ...j, children: /* @__PURE__ */ l(
       B,
       {
-        className: q(
+        className: F(
           i.notificationComponent,
           {
             [i.isVisible]: e,
@@ -83,7 +85,7 @@ const K = `.${i.notificationComponent}`, v = F(
         },
         onMouseEnter: E,
         onMouseLeave: H,
-        ref: L([x, d]),
+        ref: M([x, d]),
         role: e ? "alert" : void 0,
         hasCloser: S,
         onClose: n,

package/dist/page-container/component.js

@@ -1,11 +1,6 @@
 import { jsxs as o, jsx as s } from "react/jsx-runtime";
 import e from "./index.module.css.js";
-const n = ({
-  children: r,
-  color: i,
-  image: a,
-  imageDescription: t
-}) => /* @__PURE__ */ o("div", { style: { backgroundColor: i }, className: e.pageContainer, children: [
+const n = ({ children: r, color: i, image: a, imageDescription: t }) => /* @__PURE__ */ o("div", { style: { backgroundColor: i }, className: e.pageContainer, children: [
   a && /* @__PURE__ */ o("section", { children: [
     /* @__PURE__ */ s("img", { className: e.image, src: a, alt: t }),
     /* @__PURE__ */ s("div", { className: e.bg })

package/dist/page-loading/component.d.ts

@@ -1,2 +1 @@
-import { default as React } from 'react';
-export declare const PageLoading: () => React.JSX.Element;
+export declare const PageLoading: () => import("react/jsx-runtime").JSX.Element;

package/dist/page-with-controls/component.js

@@ -1,14 +1,11 @@
 import { jsxs as h, jsx as r } from "react/jsx-runtime";
 import { Button as n } from "../button/component.js";
-import { FlexColumns as i } from "../flex-columns/component.js";
+import { FlexColumns as l } from "../flex-columns/component.js";
 import { Grid as o } from "../grid/component.js";
 import { Typography as s } from "../typography/component.js";
-const f = ({
-  children: l,
-  buttons: t
-}) => /* @__PURE__ */ h(o.Row, { children: [
-  /* @__PURE__ */ r(o.Col, { width: 7, children: /* @__PURE__ */ r(i, { columns: 1, gr: 32, children: l }) }),
-  /* @__PURE__ */ r(o.Col, { width: 4, offset: 1, children: /* @__PURE__ */ r(i, { columns: 1, gr: 16, children: t.map(({ text: m, ...e }) => /* @__PURE__ */ r(n, { view: "ghost", ...e, children: /* @__PURE__ */ r(s.Title, { tag: "div", view: "xxsmall", color: "primary", weight: "regular", children: m }) })) }) })
+const f = ({ children: m, buttons: t }) => /* @__PURE__ */ h(o.Row, { children: [
+  /* @__PURE__ */ r(o.Col, { width: 7, children: /* @__PURE__ */ r(l, { columns: 1, gr: 32, children: m }) }),
+  /* @__PURE__ */ r(o.Col, { width: 4, offset: 1, children: /* @__PURE__ */ r(l, { columns: 1, gr: 16, children: t.map(({ text: i, ...e }) => /* @__PURE__ */ r(n, { view: "ghost", ...e, children: /* @__PURE__ */ r(s.Title, { tag: "div", view: "xxsmall", color: "primary", weight: "regular", children: i }) }, i)) }) })
 ] });
 export {
   f as PageWithControls

package/dist/picker-button/common/labeled-button/index.js

@@ -1,18 +1,24 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import s from "classnames";
+import l from "classnames";
+import { forwardRef as s } from "react";
 import { Typography as t } from "../../../typography/component.js";
 import n from "./index.module.css.js";
-const u = l(({
-  label: e,
-  value: o,
-  id: i,
-  className: m,
-  onClick: p
-}, a) => /* @__PURE__ */ c("button", { className: s(n.wrapper, m), ref: a, id: i, type: "button", onClick: p, children: [
-  /* @__PURE__ */ r(t.Text, { view: "caps", weight: "medium", color: "tertiary", children: e }),
-  /* @__PURE__ */ r(t.Text, { view: "title", weight: "medium", color: "primary", children: o })
-] }));
+const u = s(
+  ({ label: e, value: o, id: i, className: m, onClick: p }, a) => /* @__PURE__ */ c(
+    "button",
+    {
+      className: l(n.wrapper, m),
+      ref: a,
+      id: i,
+      type: "button",
+      onClick: p,
+      children: [
+        /* @__PURE__ */ r(t.Text, { view: "caps", weight: "medium", color: "tertiary", children: e }),
+        /* @__PURE__ */ r(t.Text, { view: "title", weight: "medium", color: "primary", children: o })
+      ]
+    }
+  )
+);
 export {
   u as LabeledButton
 };

package/dist/picker-button/component.js

@@ -1,6 +1,6 @@
 import { jsx as u } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import a from "classnames";
+import d from "classnames";
+import { forwardRef as a } from "react";
 import "../select/component.js";
 import { BaseSelect as g } from "../select/components/base-select/component.js";
 import "../form-control/component.js";
@@ -10,9 +10,9 @@ import { OptionsList as S } from "../select/components/options-list/component.js
 import "react-virtual";
 import "../toast-notifier/component.js";
 import "intersection-observer";
-import { Field as b } from "./field/Component.js";
+import { Field as b } from "./field/component.js";
 import x from "./index.module.css.js";
-const D = d(
+const D = a(
   ({
     OptionsList: t,
     Optgroup: r,
@@ -45,7 +45,7 @@ const D = d(
       },
       Optgroup: r || F,
       OptionsList: t || S,
-      className: a(x.container, s),
+      className: d(x.container, s),
       selected: [],
       closeOnSelect: !0
     }

package/dist/picker-button/field/{Component.d.ts → component.d.ts}

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 import { ButtonProps } from '../../button';
 import { SelectFieldProps as BaseFieldProps } from '../../select';
 import { PickerButtonSize } from '..';
@@ -7,5 +6,5 @@ type FieldProps = Omit<BaseFieldProps, 'size' | 'hint' | 'success' | 'error' | '
     icon?: any;
     fieldComponent?: 'button' | 'iconButton';
 };
-export declare const Field: ({ buttonSize, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, fieldComponent, ...restProps }: FieldProps) => React.JSX.Element;
+export declare const Field: ({ buttonSize, view, label, open, multiple, rightAddons, Arrow, innerProps, className, selected, selectedMultiple, valueRenderer, fieldComponent, ...restProps }: FieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/picker-button/field/index.d.ts

@@ -1 +1 @@
-export * from './Component';
+export * from './component';

package/dist/picker-button/field/index.js

@@ -1,4 +1,4 @@
-import { Field as r } from "./Component.js";
+import { Field as r } from "./component.js";
 export {
   r as Field
 };

package/dist/picker-button/index.d.ts

@@ -1,2 +1,2 @@
-export * from './component';
 export * from './common';
+export * from './component';

package/dist/picker-button/index.js

@@ -1,6 +1,6 @@
-import { PickerButton as e } from "./component.js";
-import { LabeledButton as f } from "./common/labeled-button/index.js";
+import { LabeledButton as e } from "./common/labeled-button/index.js";
+import { PickerButton as f } from "./component.js";
 export {
-  f as LabeledButton,
-  e as PickerButton
+  e as LabeledButton,
+  f as PickerButton
 };

package/dist/popover/component.d.ts

@@ -1,5 +1,5 @@
-import { default as React, CSSProperties, MutableRefObject } from 'react';
 import { Placement } from '@floating-ui/react-dom';
+import { default as React, CSSProperties, MutableRefObject } from 'react';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export type Position = Placement;
 export type PopoverProps = {
@@ -13,7 +13,7 @@ export type PopoverProps = {
     popperClassName?: string;
     arrowClassName?: string;
     getPortalContainer?: () => HTMLElement;
-    transition?: CSSTransitionProps;
+    transition?: Omit<CSSTransitionProps<HTMLDivElement>, 'children' | 'nodeRef'>;
     transitionDuration?: CSSProperties['transitionDuration'];
     withTransition?: boolean;
     dataTestId?: string;

package/dist/popover/component.js

@@ -1,11 +1,11 @@
-import { jsx as r, jsxs as $ } from "react/jsx-runtime";
-import { useRef as N, useLayoutEffect as j, useEffect as R, useMemo as D, useCallback as P } from "react";
-import { useFloating as U, autoUpdate as z, offset as V, flip as q, shift as B, arrow as G } from "@floating-ui/react-dom";
+import { jsx as r, jsxs as D } from "react/jsx-runtime";
+import { offset as L, flip as P, shift as U, arrow as z, useFloating as V, autoUpdate as q } from "@floating-ui/react-dom";
+import c from "classnames";
+import { useRef as g, useMemo as N, useEffect as B, useCallback as G } from "react";
 import { CSSTransition as H } from "react-transition-group";
-import m from "classnames";
 import { Portal as J } from "../portal/component.js";
-import { stackingOrder as K } from "../stack/context.js";
-import { Stack as Q } from "../stack/component.js";
+import { Stack as K } from "../stack/component.js";
+import { stackingOrder as Q } from "../stack/context.js";
 import e from "./index.module.css.js";
 const W = {
   timeout: 150
@@ -14,99 +14,97 @@ const W = {
   enterActive: e.enterActive,
   exit: e.exit,
   exitActive: e.exitActive
-}, Y = {
+}, Y = H, Z = {
   top: "bottom",
   right: "left",
   bottom: "top",
   left: "right"
-}, lt = ({
-  children: f,
-  getPortalContainer: A,
-  transition: u = W,
-  anchorElement: d,
-  offset: a = [0, 0],
-  withArrow: s = !1,
-  withTransition: b = !0,
-  position: y = "left",
-  preventFlip: E,
-  popperClassName: O,
-  arrowClassName: T,
-  className: h,
-  open: p,
+}, ct = ({
+  children: R,
+  getPortalContainer: b,
+  transition: m = W,
+  anchorElement: A,
+  offset: n = [0, 0],
+  withArrow: o = !1,
+  withTransition: T = !0,
+  position: h = "left",
+  preventFlip: f,
+  popperClassName: y,
+  arrowClassName: E,
+  className: O,
+  open: i,
   dataTestId: C,
   update: l,
-  transitionDuration: F = `${u.timeout}ms`,
-  zIndex: w = K.POPOVER
+  transitionDuration: F = `${m.timeout}ms`,
+  zIndex: I = Q.POPOVER
 }) => {
-  const x = N(null), S = N(null), {
-    refs: i,
-    floatingStyles: I,
-    middlewareData: c,
-    placement: v,
-    update: o
-  } = U({
-    placement: y,
-    whileElementsMounted: z,
-    middleware: [
-      V(
-        {
-          crossAxis: a[0],
-          mainAxis: a[1]
-        },
-        [a]
-      ),
-      ...E ? [] : [q()],
-      B({ padding: 4 }),
-      ...s ? [G({ element: x })] : []
-    ]
+  const d = g(null), u = g(null), M = N(
+    () => [
+      L({
+        crossAxis: n[0],
+        mainAxis: n[1]
+      }),
+      ...f ? [] : [P()],
+      U({ padding: 4 }),
+      ...o ? [z({ element: d })] : []
+    ],
+    [n[0], n[1], f, o]
+  ), {
+    refs: { setFloating: p },
+    floatingStyles: _,
+    middlewareData: a,
+    placement: x,
+    update: S
+  } = V({
+    placement: h,
+    open: i,
+    elements: { reference: A },
+    whileElementsMounted: i ? q : void 0,
+    middleware: M
   });
-  j(() => {
-    i.setReference(d);
-  }, [d, i]), R(() => {
-    l && o && (l.current = o);
-  }, [o, l]), R(() => {
-    o();
-  }, [o, f]);
-  const M = D(() => {
-    if (!s || !c.arrow)
+  B(() => {
+    l && (l.current = S);
+  }, [S, l]);
+  const k = N(() => {
+    if (!o || !a.arrow)
       return {};
-    const { x: t, y: n } = c.arrow, k = v.split("-")[0], L = Y[k] ?? "bottom";
+    const { x: t, y: s } = a.arrow, j = x.split("-")[0], w = Z[j] ?? "bottom";
     return {
       position: "absolute",
       left: t != null ? `${t}px` : void 0,
-      top: n != null ? `${n}px` : void 0,
+      top: s != null ? `${s}px` : void 0,
       right: "",
       bottom: "",
-      [L]: "-4px"
+      [w]: "-4px"
     };
-  }, [s, c.arrow, v]), _ = P(
+  }, [o, a.arrow, x]), $ = G(
     (t) => {
-      S.current = t, i.setFloating(t);
+      u.current = t, p(t);
     },
-    [i]
-  ), g = (t, n) => /* @__PURE__ */ r(
+    [p]
+  ), v = (t, s) => /* @__PURE__ */ r(
     "div",
     {
-      ref: _,
+      ref: $,
       style: {
         zIndex: t,
-        ...I
+        ..._
       },
-      className: m(e.component, h),
-      children: /* @__PURE__ */ $(
+      className: c(e.component, O),
+      children: /* @__PURE__ */ D(
         "div",
         {
           "data-test-id": C,
-          className: m(e.inner, O),
-          style: n,
+          className: c(e.inner, y),
+          style: s,
           children: [
-            f,
-            s && /* @__PURE__ */ r(
+            R,
+            o && /* @__PURE__ */ r(
               "div",
               {
-                ref: x,
-                style: M,
-                className: m(e.arrow, T)
+                ref: d,
+                style: k,
+                className: c(e.arrow, E)
               }
             )
           ]
@@ -114,18 +112,18 @@ const W = {
       )
     }
   );
-  return /* @__PURE__ */ r(Q, { value: w, children: (t) => /* @__PURE__ */ r(J, { getPortalContainer: A, children: b ? /* @__PURE__ */ r(
-    H,
+  return /* @__PURE__ */ r(K, { value: I, children: (t) => /* @__PURE__ */ r(J, { getPortalContainer: b, children: T ? /* @__PURE__ */ r(
+    Y,
     {
       unmountOnExit: !0,
       classNames: X,
-      ...u,
-      in: p,
-      nodeRef: S,
-      children: g(t, { transitionDuration: F })
+      ...m,
+      in: i,
+      nodeRef: u,
+      children: v(t, { transitionDuration: F })
     }
-  ) : p && g(t) }) });
+  ) : i && v(t) }) });
 };
 export {
-  lt as Popover
+  ct as Popover
 };

package/dist/radio/component.js

@@ -1,10 +1,10 @@
 import { jsxs as i, jsx as s } from "react/jsx-runtime";
-import { forwardRef as x, useRef as y } from "react";
-import j from "react-merge-refs";
-import w from "classnames";
+import x from "classnames";
+import { forwardRef as y, useRef as j } from "react";
+import w from "react-merge-refs";
 import { useFocus as C } from "../hooks/useFocus/index.js";
 import e from "./index.module.css.js";
-const E = x(
+const E = y(
   ({
     onChange: r,
     className: d,
@@ -20,7 +20,7 @@ const E = x(
     block: N,
     ...b
   }, R) => {
-    const t = y(null), [k] = C(t, "keyboard"), g = (m) => {
+    const t = j(null), [k] = C(t, "keyboard"), g = (m) => {
       r && r(m, { checked: m.target.checked, name: a });
     };
     return (
@@ -28,13 +28,13 @@ const E = x(
       /* @__PURE__ */ i(
         "label",
         {
-          className: w(e.container, e[h], e[u], d, {
+          className: x(e.container, e[h], e[u], d, {
             [e.disabled]: c,
             [e.checked]: o,
             [e.focused]: k,
             [e.block]: N
           }),
-          ref: j([t, R]),
+          ref: w([t, R]),
           children: [
             /* @__PURE__ */ s(
               "input",

package/dist/radio-groups/component.d.ts

@@ -1,4 +1,3 @@
-import { default as React } from 'react';
 type Child = {
     id: number;
     title: string;
@@ -15,5 +14,5 @@ export interface RadioGroupsProps {
     collapsable?: boolean;
     onChange: (value: number) => void;
 }
-export declare const RadioGroups: ({ parents, childs, selected, collapsable, onChange, }: RadioGroupsProps) => React.JSX.Element;
+export declare const RadioGroups: ({ parents, childs, selected, collapsable, onChange, }: RadioGroupsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/radio-groups/component.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import g, { useState as x } from "react";
-import v from "@alphakits/icons/dist/ChevronDownS";
-import y from "classnames";
+import g from "@alphakits/icons/dist/ChevronDownS";
+import x from "classnames";
+import v, { useState as y } from "react";
 import { Collapse as b } from "../collapse/component.js";
 import { Divider as w } from "../divider/component.js";
 import { FlexColumns as _ } from "../flex-columns/component.js";
@@ -28,11 +28,11 @@ const P = ({
       e.locationId === o.id && (r.parent = o, r.childs.push(e));
     }), r.parent.id && n.push(r);
   });
-  const [l, u] = x(n), C = (o) => {
+  const [l, u] = y(n), C = (o) => {
     const r = l.map((i, a) => (a === o && (i.collapsed ? i.collapsed = !1 : i.collapsed = !0), i)), e = l.concat(r);
     u(e.filter((i, a) => e.indexOf(i) === a));
   };
-  return /* @__PURE__ */ t("div", { children: l.map((o, r) => /* @__PURE__ */ c(g.Fragment, { children: [
+  return /* @__PURE__ */ t("div", { children: l.map((o, r) => /* @__PURE__ */ c(v.Fragment, { children: [
     /* @__PURE__ */ c("div", { className: s.list_head, children: [
       /* @__PURE__ */ t(S.Text, { view: "title", color: "primary", weight: "medium", children: o.parent.title }),
       f && /* @__PURE__ */ t(
@@ -40,8 +40,10 @@ const P = ({
         {
           onClick: () => C(r),
           size: "s",
-          className: y(s.collapse_btn, { [s.collapse_btn_collapsed]: o.collapsed }),
-          icon: v
+          className: x(s.collapse_btn, {
+            [s.collapse_btn_collapsed]: o.collapsed
+          }),
+          icon: g
         }
       )
     ] }),

package/dist/select/component.d.ts

@@ -1,12 +1,11 @@
-import { default as React } from 'react';
 import { FormControlProps } from '../form-control';
 import { BaseSelectProps } from './typings';
 export type SelectProps = Omit<BaseSelectProps, 'fieldProps'> & {
     fieldProps?: FormControlProps & Record<string, unknown>;
     showSearch?: boolean;
 };
-export declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
-    fieldProps?: (React.HTMLAttributes<HTMLDivElement> & {
+export declare const Select: import('react').ForwardRefExoticComponent<Omit<BaseSelectProps, "fieldProps"> & {
+    fieldProps?: (import('react').HTMLAttributes<HTMLDivElement> & {
         block?: boolean | undefined;
         size?: "s" | "xs" | "m" | "l" | "xl" | undefined;
         disabled?: boolean | undefined;
@@ -15,16 +14,16 @@ export declare const Select: React.ForwardRefExoticComponent<Omit<BaseSelectProp
         error?: string | boolean | undefined;
         hint?: string | undefined;
         required?: boolean | undefined;
-        label?: React.ReactNode;
-        leftAddons?: React.ReactNode;
-        rightAddons?: React.ReactNode;
-        bottomAddons?: React.ReactNode;
+        label?: import('react').ReactNode;
+        leftAddons?: import('react').ReactNode;
+        rightAddons?: import('react').ReactNode;
+        bottomAddons?: import('react').ReactNode;
         className?: string | undefined;
         fieldClassName?: string | undefined;
         labelClassName?: string | undefined;
         addonsClassName?: string | undefined;
         dataTestId?: string | undefined;
-        children?: React.ReactNode;
+        children?: import('react').ReactNode;
     } & Record<string, unknown>) | undefined;
     showSearch?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/select/component.js

@@ -8,15 +8,7 @@ import { Option as l } from "./components/option/component.js";
 import { OptionsList as c } from "./components/options-list/component.js";
 import { SelectSearch as w } from "./components/select-search/index.js";
 const R = S(
-  ({
-    Arrow: r,
-    Field: t,
-    OptionsList: i,
-    Optgroup: p,
-    Option: m,
-    showSearch: s,
-    ...o
-  }, u) => o.options?.length > 8 || s ? /* @__PURE__ */ e(
+  ({ Arrow: r, Field: t, OptionsList: i, Optgroup: p, Option: m, showSearch: s, ...o }, u) => o.options?.length > 8 || s ? /* @__PURE__ */ e(
     w,
     {
       Option: m || l,

package/dist/select/components/arrow/component.d.ts

@@ -1,3 +1,2 @@
-import { default as React } from 'react';
 import { ArrowProps } from '../../typings';
-export declare const Arrow: ({ open, className }: ArrowProps) => React.JSX.Element;
+export declare const Arrow: ({ open, className }: ArrowProps) => import("react/jsx-runtime").JSX.Element;