@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.9

package/dist/components/New/ResizableContainer/ResizableContainer.js

@@ -1,56 +1,57 @@
 import { jsx as c } from "react/jsx-runtime";
-import { Resizable as A } from "../../../node_modules/re-resizable/lib/index.js";
-import { useState as M, useRef as B, useCallback as d, useMemo as D } from "react";
-import { ResizableContainerSide as w } from "../../../types/resizable-container.js";
-import { mergeClasses as L } from "../../../utils/merge-classes.js";
-import { ResizeHandle as T } from "./components/ResizeHandle.js";
-const j = 16, q = ({
-  children: x,
-  minWidth: n,
+import { Resizable as E } from "../../../node_modules/re-resizable/lib/index.js";
+import { useState as I, useRef as H, useCallback as d, useMemo as T } from "react";
+import { ResizableContainerSide as _ } from "../../../types/resizable-container.js";
+import { mergeClasses as y } from "../../../utils/merge-classes.js";
+import { ResizeHandle as B } from "./components/ResizeHandle.js";
+import { DIAL_KIT_CLASS as K } from "../../../constants/public-class-names.js";
+const j = 16, J = ({
+  children: M,
+  minWidth: r,
   maxWidth: s,
   width: h,
-  defaultWidth: I,
+  defaultWidth: w,
   onResizeStop: i,
   onResize: l,
-  side: a = w.Right,
+  side: a = _.Right,
   keyboardStep: u = j,
   ariaLabel: g = "Resize panel",
-  className: _,
+  className: x,
   resizeHandlerClassName: p,
   resizeHandler: z
 }) => {
-  const [m, C] = M(!1), [E, R] = M(I ?? n), r = h !== void 0, o = r ? h : E, f = B(null), b = d(() => {
+  const [m, C] = I(!1), [A, R] = I(w ?? r), n = h !== void 0, o = n ? h : A, f = H(null), S = d(() => {
     C(!0);
-  }, []), v = d(() => {
+  }, []), b = d(() => {
     C(!1);
-    const t = f.current?.resizable?.getBoundingClientRect(), e = t ? Math.round(t.width) : n;
-    r || R(e), i?.(e);
-  }, [i, r, n]), S = d(
+    const t = f.current?.resizable?.getBoundingClientRect(), e = t ? Math.round(t.width) : r;
+    n || R(e), i?.(e);
+  }, [i, n, r]), v = d(
     (t) => {
-      const e = Math.min(s, Math.max(n, t));
-      e !== o && (r || (R(e), f.current?.updateSize({ width: e, height: "100%" })), l?.(e), i?.(e));
+      const e = Math.min(s, Math.max(r, t));
+      e !== o && (n || (R(e), f.current?.updateSize({ width: e, height: "100%" })), l?.(e), i?.(e));
     },
-    [s, n, o, r, l, i]
-  ), H = D(() => {
-    const t = a === w.Left, e = /* @__PURE__ */ c(
-      T,
+    [s, r, o, n, l, i]
+  ), L = T(() => {
+    const t = a === _.Left, e = /* @__PURE__ */ c(
+      B,
       {
         side: a,
         isResizing: m,
         width: o,
-        minWidth: n,
+        minWidth: r,
         maxWidth: s,
         step: u,
         ariaLabel: g,
-        onWidthChange: S,
+        onWidthChange: v,
         customHandler: z,
         handlerClassName: p
       }
     );
     return {
-      size: r ? { width: o, height: "100%" } : void 0,
-      defaultSize: r ? void 0 : { width: o, height: "100%" },
-      minWidth: n,
+      size: n ? { width: o, height: "100%" } : void 0,
+      defaultSize: n ? void 0 : { width: o, height: "100%" },
+      minWidth: r,
       maxWidth: s,
       enable: {
         left: t,
@@ -68,39 +69,40 @@ const j = 16, q = ({
         left: t ? e : void 0,
         right: t ? void 0 : e
       },
-      onResizeStart: b,
-      onResize: (k, F, y) => {
-        l?.(Math.round(y.offsetWidth));
+      onResizeStart: S,
+      onResize: (k, F, D) => {
+        l?.(Math.round(D.offsetWidth));
       },
-      onResizeStop: v
+      onResizeStop: b
     };
   }, [
     a,
-    r,
-    o,
     n,
+    o,
+    r,
     s,
     u,
     g,
-    S,
+    v,
     z,
     p,
     m,
+    S,
     b,
-    v,
     l
   ]);
-  return /* @__PURE__ */ c(A, { ref: f, ...H, children: /* @__PURE__ */ c(
+  return /* @__PURE__ */ c(E, { ref: f, ...L, children: /* @__PURE__ */ c(
     "div",
     {
-      className: L(
+      className: y(
+        K.resizableContainer,
         "group flex size-full flex-col bg-layer-raised transition-all motion-reduce:transition-none",
-        _
+        x
       ),
-      children: x
+      children: M
     }
   ) });
 };
 export {
-  q as ResizableContainer
+  J as ResizableContainer
 };

package/dist/components/New/Search/Search.js

@@ -1,18 +1,19 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { IconX as _, IconSearch as h } from "@tabler/icons-react";
-import { useRef as R, useCallback as k } from "react";
-import { useMergeRefs as E } from "@floating-ui/react";
-import { GhostIconButton as M } from "../IconButton/IconButtonWrappers.js";
-import { Input as N } from "../Input/Input.js";
+import { useRef as A, useCallback as R } from "react";
+import { useMergeRefs as k } from "@floating-ui/react";
+import { GhostIconButton as D } from "../IconButton/IconButtonWrappers.js";
+import { Input as E } from "../Input/Input.js";
 import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as o } from "../../../constants/icon.js";
+import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
 import { ElementSize as r } from "../../../types/size.js";
-import { mergeClasses as A } from "../../../utils/merge-classes.js";
-const D = {
-  [r.Small]: o.SM,
-  [r.Standard]: o.MD,
-  [r.Large]: o.MD
-}, g = ({
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as M } from "../../../constants/public-class-names.js";
+const N = {
+  [r.Small]: e.SM,
+  [r.Standard]: e.MD,
+  [r.Large]: e.MD
+}, v = ({
   size: s = r.Standard,
   placeholder: c = "Search...",
   withoutBorder: f = !1,
@@ -22,43 +23,44 @@ const D = {
   onChange: t,
   wrapperClassName: p,
   inputRef: S,
-  ...u
+  ...I
 }) => {
-  const m = R(null), I = E([S, m]), d = !!i && !a, C = k(() => {
+  const m = A(null), u = k([S, m]), d = !!i && !a, C = R(() => {
     t?.(void 0), m.current?.focus();
   }, [t]);
-  return /* @__PURE__ */ e(
-    N,
+  return /* @__PURE__ */ o(
+    E,
     {
-      ...u,
+      ...I,
       size: s,
       value: i,
       disabled: a,
       onChange: t,
       placeholder: c,
-      inputRef: I,
-      wrapperClassName: A(
+      inputRef: u,
+      wrapperClassName: L(
+        M.search,
         f && "dial-kit-input-borderless",
         p
       ),
-      iconBefore: /* @__PURE__ */ e(
+      iconBefore: /* @__PURE__ */ o(
         h,
         {
-          size: D[s],
+          size: N[s],
           stroke: n,
           className: "text-secondary",
           "aria-hidden": "true"
         }
       ),
-      iconAfter: d ? /* @__PURE__ */ e(
-        M,
+      iconAfter: d ? /* @__PURE__ */ o(
+        D,
         {
           size: r.Small,
           "aria-label": l,
-          icon: /* @__PURE__ */ e(
+          icon: /* @__PURE__ */ o(
             _,
             {
-              size: o.SM,
+              size: e.SM,
               stroke: n,
               "aria-hidden": "true"
             }
@@ -70,5 +72,5 @@ const D = {
   );
 };
 export {
-  g as Search
+  v as Search
 };

package/dist/components/New/SegmentedControl/SegmentedControl.js

@@ -1,24 +1,25 @@
-import { jsx as x, jsxs as C } from "react/jsx-runtime";
-import { useRef as I, useCallback as k } from "react";
+import { jsx as v, jsxs as x } from "react/jsx-runtime";
+import { useRef as k, useCallback as A } from "react";
 import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as w } from "../../../utils/accessible-name.js";
-import { NAVIGATION_KEYS as h, segmentDisabledSelectedClassName as A, segmentDisabledUnselectedClassName as D, segmentSelectedInteractiveClassName as S, segmentUnselectedInteractiveClassName as y, segmentSelectedClassName as U, segmentUnselectedClassName as K, segmentClassName as R, containerClassName as j } from "./constants.js";
+import { resolveAccessibleName as S } from "../../../utils/accessible-name.js";
+import { NAVIGATION_KEYS as w, segmentDisabledSelectedClassName as D, segmentDisabledUnselectedClassName as h, segmentSelectedInteractiveClassName as y, segmentUnselectedInteractiveClassName as K, segmentSelectedClassName as U, segmentUnselectedClassName as L, segmentClassName as R, containerClassName as _ } from "./constants.js";
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
 const M = ({
   items: l,
   value: r,
   onChange: c,
   disabled: o,
-  className: f,
-  segmentClassName: g,
-  "aria-label": N
+  className: g,
+  segmentClassName: p,
+  "aria-label": C
 }) => {
-  const m = I({}), d = l.find((e) => e.value === r), p = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, v = k(
+  const b = k({}), d = l.find((e) => e.value === r), I = d && !d.disabled ? d.value : l.find((e) => !e.disabled)?.value, N = A(
     (e) => {
-      if (o || !h.includes(e.key)) return;
-      const a = l.filter((b) => !b.disabled);
+      if (o || !w.includes(e.key)) return;
+      const a = l.filter((m) => !m.disabled);
       if (a.length === 0) return;
       const s = Math.max(
-        a.findIndex((b) => b.value === r),
+        a.findIndex((m) => m.value === r),
         0
       ), t = a.length - 1;
       let n = s;
@@ -40,41 +41,46 @@ const M = ({
       }
       e.preventDefault();
       const i = a[n];
-      m.current[i.value]?.focus(), i.value !== r && c(i.value);
+      b.current[i.value]?.focus(), i.value !== r && c(i.value);
     },
     [o, l, r, c]
   );
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ v(
     "div",
     {
       role: "radiogroup",
-      "aria-label": N,
+      "aria-label": C,
       "aria-disabled": o || void 0,
-      onKeyDown: v,
-      className: u(j, f),
+      onKeyDown: N,
+      className: u(
+        f.segmentedControl,
+        _,
+        g
+      ),
       children: l.map((e) => {
         const a = e.value === r, s = o || e.disabled;
-        return /* @__PURE__ */ C(
+        return /* @__PURE__ */ x(
           "button",
           {
             ref: (t) => {
-              m.current[e.value] = t;
+              b.current[e.value] = t;
             },
             type: "button",
             role: "radio",
             "aria-checked": a,
-            "aria-label": w(
+            "aria-label": S(
               e["aria-label"],
               typeof e.label == "string" ? e.label : void 0
             ),
-            tabIndex: e.value === p ? 0 : -1,
+            tabIndex: e.value === I ? 0 : -1,
             disabled: s,
             onClick: () => c(e.value),
             className: u(
+              f.segmentedControlItem,
               R,
-              a ? U : K,
-              s ? a ? A : D : a ? S : y,
-              g
+              a ? U : L,
+              s ? a ? D : h : a ? y : K,
+              p
             ),
             children: [
               e.icon,