skillgrid 0.0.85 → 0.0.87

package/dist/components/Tabs/Tabs.js

@@ -1,164 +1,165 @@
-import { jsx as n, jsxs as V } from "react/jsx-runtime";
-import F, { useState as U, createContext as j, useContext as k } from "react";
-import { ScrollWrapper as G } from "./ScrollWrapper.js";
-import { clsx as d } from "clsx";
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+import F, { useState as U, createContext as V, useContext as M } from "react";
+import { ScrollWrapper as R } from "./ScrollWrapper.js";
+import { clsx as p } from "clsx";
 import f from "../../styles/typography.module.css.js";
 import a from "./Tabs.module.css.js";
-import { useIsMobile as M } from "../../hooks/useIsMobile.js";
-import { Badge as O } from "../Badge/Badge.js";
-const W = "md", R = !1, Y = 8, Z = "top-right-inside", P = j(null), h = () => {
-  const t = k(P);
+import { useIsMobile as j } from "../../hooks/useIsMobile.js";
+import { Badge as k } from "../Badge/Badge.js";
+const G = "md", W = !1, Y = !1, Z = 8, z = "top-right-inside", P = V(null), h = () => {
+  const t = M(P);
   if (!t) throw new Error("useTabs должен использоваться внутри TabsProvider");
   return t;
-}, z = ({
+}, H = ({
   children: t,
-  defaultActiveTab: l,
+  defaultActiveTab: i,
   activeTab: e,
-  onChange: b
+  onChange: c
 }) => {
-  const [c, s] = U(l), r = e !== void 0, o = r ? e : c, i = (p) => {
-    r || s(p), b && b(p);
+  const [b, s] = U(i), r = e !== void 0, d = r ? e : b, n = (o) => {
+    r || s(o), c && c(o);
   };
-  return /* @__PURE__ */ n(P.Provider, { value: { activeTab: o, setTab: i }, children: t });
-}, H = ({
+  return /* @__PURE__ */ l(P.Provider, { value: { activeTab: d, setTab: n }, children: t });
+}, K = ({
   mode: t,
-  item: l,
+  item: i,
   isActive: e,
-  showBadge: b,
-  badgeProps: c,
+  showBadge: c,
+  badgeProps: b,
   size: s,
   isDisabled: r,
-  onSelectTab: o
+  onSelectTab: d
 }) => {
   const {
-    value: i,
-    label: p,
-    ariaLabel: g,
+    value: n,
+    label: o,
+    ariaLabel: C,
     prefix: u,
-    prefixWrapperProps: v = {},
-    postfix: x,
-    postfixWrapperProps: y = {}
-  } = l, { className: A, ...C } = v, { className: N, ..._ } = y, m = {
+    prefixWrapperProps: _ = {},
+    postfix: T,
+    postfixWrapperProps: g = {}
+  } = i, { className: v, ...y } = _, { className: A, ...L } = g, m = {
     primary: f["typography-label-3-medium"],
     secondary: f["typography-label-3-regular"],
     prefix: f["typography-label-3-medium"],
     postfix: f["typography-label-3-medium"]
-  }, B = {
-    size: Y,
-    position: Z,
-    ...c
-  }, E = d(a.tab, a[t], a[s], {
+  }, N = {
+    size: Z,
+    position: z,
+    ...b
+  }, S = p(a.tab, a[t], a[s], {
     [a.selected]: e,
     [a.disabled]: r
-  }), L = d(
+  }), E = p(
     a.tabPrefix,
-    A,
+    v,
     a[t],
     m.prefix,
     {
       [a.selected]: e,
       [a.disabled]: r
     }
-  ), S = d(
+  ), B = p(
     a.tabPostfix,
-    N,
+    A,
     a[t],
     m.postfix,
     {
       [a.selected]: e,
       [a.disabled]: r
     }
-  ), I = d(a.tabLabel, a[t], m[t]), $ = g ?? (typeof p == "string" ? p : void 0), w = (D) => {
-    e || r || (o(i), D.currentTarget.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }));
-  }, T = /* @__PURE__ */ V(
+  ), D = p(a.tabLabel, a[t], m[t]), I = C ?? (typeof o == "string" ? o : void 0), O = ($) => {
+    e || r || (d(n), $.currentTarget.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" }));
+  }, x = /* @__PURE__ */ w(
     "button",
     {
-      className: E,
+      className: S,
       role: "tab",
-      "aria-label": $,
+      "aria-label": I,
       "aria-selected": e,
       "aria-disabled": r,
-      "aria-controls": `tab-panel-${i}`,
-      "data-testid": `tab-item-${i}`,
-      onClick: w,
+      "aria-controls": `tab-panel-${n}`,
+      "data-testid": `tab-item-${n}`,
+      onClick: O,
       children: [
-        u && /* @__PURE__ */ n(
+        u && /* @__PURE__ */ l(
           "span",
           {
-            className: L,
-            ...C,
-            "data-testid": `tab-prefix-${i}`,
+            className: E,
+            ...y,
+            "data-testid": `tab-prefix-${n}`,
             children: u
           }
         ),
-        /* @__PURE__ */ n("span", { className: I, "data-testid": `tab-label-${i}`, children: p }),
-        x && /* @__PURE__ */ n(
+        /* @__PURE__ */ l("span", { className: D, "data-testid": `tab-label-${n}`, children: o }),
+        T && /* @__PURE__ */ l(
           "span",
           {
-            className: S,
-            ..._,
-            "data-testid": `tab-postfix-${i}`,
-            children: x
+            className: B,
+            ...L,
+            "data-testid": `tab-postfix-${n}`,
+            children: T
           }
         )
       ]
     }
   );
-  return b ? /* @__PURE__ */ n(O, { ...B, "data-testid": `tab-badge-${i}`, children: T }) : T;
+  return c ? /* @__PURE__ */ l(k, { ...N, "data-testid": `tab-badge-${n}`, children: x }) : x;
 }, q = ({
   mode: t,
-  items: l,
-  size: e = W,
-  isAllItemsDisabled: b = R
+  items: i,
+  size: e = G,
+  isAllItemsDisabled: c = W,
+  scrollControlsOnDesktop: b = Y
 }) => {
-  const { activeTab: c, setTab: s } = h(), r = M();
-  return /* @__PURE__ */ n(G, { size: e, withControls: r, children: /* @__PURE__ */ n(
+  const { activeTab: s, setTab: r } = h(), n = j() || b;
+  return /* @__PURE__ */ l(R, { size: e, withControls: n, children: /* @__PURE__ */ l(
     "div",
     {
       role: "tablist",
       "data-testid": "tabs-bar",
       "aria-orientation": "horizontal",
-      className: d(a.tabBar, a[t]),
-      children: l.map((o) => /* @__PURE__ */ n(
-        H,
+      className: p(a.tabBar, a[t]),
+      children: i.map((o) => /* @__PURE__ */ l(
+        K,
         {
           size: e,
           item: o,
           mode: t,
           showBadge: o.showBadge,
           badgeProps: o.badgeProps,
-          isActive: c === o.value,
-          isDisabled: b || o.isDisabled,
-          onSelectTab: s
+          isActive: s === o.value,
+          isDisabled: c || o.isDisabled,
+          onSelectTab: r
         },
         o.value
       ))
     }
   ) });
-}, J = ({ tabValue: t, children: l, ...e }) => /* @__PURE__ */ n(
+}, J = ({ tabValue: t, children: i, ...e }) => /* @__PURE__ */ l(
   "div",
   {
     role: "tabpanel",
     "data-testid": `tab-panel-${t}`,
     "aria-labelledby": `tab-item-${t}`,
     ...e,
-    children: l
+    children: i
   }
-), K = ({ children: t, ...l }) => {
-  const { activeTab: e } = h(), b = Array.isArray(t) ? t : [t], c = (s, r) => F.isValidElement(s) && typeof s.props == "object" && s.props !== null && r in s.props;
-  return /* @__PURE__ */ n("div", { "data-testid": "tab-content", ...l, children: b.map((s) => c(s, "tabValue") && String(s.props.tabValue) === e ? s : null) });
-}, nt = {
-  Provider: z,
-  Content: K,
+), Q = ({ children: t, ...i }) => {
+  const { activeTab: e } = h(), c = Array.isArray(t) ? t : [t], b = (s, r) => F.isValidElement(s) && typeof s.props == "object" && s.props !== null && r in s.props;
+  return /* @__PURE__ */ l("div", { "data-testid": "tab-content", ...i, children: c.map((s) => b(s, "tabValue") && String(s.props.tabValue) === e ? s : null) });
+}, lt = {
+  Provider: H,
+  Content: Q,
   Panel: J,
   Bar: q
 };
 export {
   q as Bar,
   J as TabPanel,
-  nt as Tabs,
-  K as TabsContent,
-  z as TabsProvider,
+  lt as Tabs,
+  Q as TabsContent,
+  H as TabsProvider,
   q as default,
   h as useTabs
 };

package/dist/components/Tabs/Tabs.type.d.ts

@@ -127,6 +127,13 @@ export interface TabsBarProps {
      * @default false
      */
     isAllItemsDisabled?: boolean;
+    /**
+     * scrollControlsOnDesktop — показывать кнопки прокрутки на десктопе при переполнении табов.
+     * На мобильной ширине стрелки включены по умолчанию.
+     *
+     * @default false
+     */
+    scrollControlsOnDesktop?: boolean;
 }
 /**
  * TabsItemProps - пропсы для одной вкладки (TabElement)