@pismo/marola 1.0.0-beta.23 → 1.0.0-beta.25

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

@@ -4,11 +4,13 @@ export interface TabProps {
     /** The value to be showing in the tab */
     children: ReactNode;
     /** The value that corresponds to the panel to show.
-     * e.g. value="1" when this tab is clicked it will show the panel which also has value="1! */
+     * e.g. value="1" when this tab is clicked it will show the panel which also has value="1" */
     value: string | number;
     /** Disable clicking the tab */
     disabled?: boolean;
-    /** data test id */
-    dataTestId?: string;
+    /** CSS classes to be applied on the container element */
+    className?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
 }
 export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/Tab.js

@@ -1,9 +1,9 @@
 import { jsx as N } from "react/jsx-runtime";
-import * as f from "react";
+import * as b from "react";
 import { forwardRef as H, useContext as U, useMemo as j } from "react";
 import { c as k } from "../../clsx-DB4S2d7J.js";
-import { u as B, T as D, s as y } from "../../Tabs.module-jkH1Qjn7.js";
-import { g as L, a as W, u as O, f as $, b as d, _ as q, c as z, P as e, d as A, e as G } from "../../useSlotProps-C_I1kEHr.js";
+import { u as B, T as D, s as y } from "../../Tabs.module-BGGTkDc5.js";
+import { g as L, a as W, u as O, f as $, b as f, _ as q, c as z, P as e, d as A, e as G } from "../../useSlotProps-C_I1kEHr.js";
 import { u as J, c as K } from "../../combineHooksSlotProps-C-zYvfnF.js";
 import { u as Q } from "../../useId-BW-oWmul.js";
 import { u as X } from "../../useButton-DcihopJG.js";
@@ -22,27 +22,27 @@ function te(o) {
     rootRef: s,
     disabled: n = !1,
     id: c
-  } = o, a = f.useRef(null), r = Q(c), {
-    value: b,
+  } = o, r = b.useRef(null), a = Q(c), {
+    value: i,
     selectionFollowsFocus: p,
     getTabPanelId: m
-  } = B(), P = f.useMemo(() => ({
+  } = B(), P = b.useMemo(() => ({
     disabled: n,
-    ref: a,
-    id: r
-  }), [n, a, r]), {
+    ref: r,
+    id: a
+  }), [n, r, a]), {
     id: l,
     index: R,
     totalItemCount: g
   } = Y(t ?? ee, P), {
     getRootProps: h,
     highlighted: T,
-    selected: i
+    selected: u
   } = J({
     item: l
   }), {
     getRootProps: C,
-    rootRef: u,
+    rootRef: d,
     active: v,
     focusVisible: I,
     setFocusVisible: V
@@ -50,15 +50,15 @@ function te(o) {
     disabled: n,
     focusableWhenDisabled: !p,
     type: "button"
-  }), _ = O(a, s, u), M = l !== void 0 ? m(l) : void 0;
+  }), _ = O(r, s, d), M = l !== void 0 ? m(l) : void 0;
   return {
     getRootProps: (x = {}) => {
       const S = $(x), w = K(h, C);
-      return d({}, x, w(S), {
+      return f({}, x, w(S), {
         role: "tab",
         "aria-controls": M,
-        "aria-selected": i,
-        id: r,
+        "aria-selected": u,
+        id: a,
         ref: _
       });
     },
@@ -69,7 +69,7 @@ function te(o) {
     rootRef: _,
     // the `selected` state isn't set on the server (it relies on effects to be calculated),
     // so we fall back to checking the `value` prop with the selectedValue from the TabsContext
-    selected: i || l === b,
+    selected: u || l === i,
     setFocusVisible: V,
     totalTabsCount: g
   };
@@ -82,39 +82,39 @@ const oe = ["action", "children", "disabled", "onChange", "onClick", "onFocus",
   return A({
     root: ["root", t && "selected", s && "disabled"]
   }, G(Z));
-}, F = /* @__PURE__ */ f.forwardRef(function(t, s) {
+}, F = /* @__PURE__ */ b.forwardRef(function(t, s) {
   var n;
   const {
     children: c,
-    disabled: a = !1,
-    slotProps: r = {},
-    slots: b = {},
+    disabled: r = !1,
+    slotProps: a = {},
+    slots: i = {},
     value: p
-  } = t, m = q(t, oe), P = f.useRef(), l = O(P, s), {
+  } = t, m = q(t, oe), P = b.useRef(), l = O(P, s), {
     active: R,
     highlighted: g,
     selected: h,
     getRootProps: T
-  } = te(d({}, t, {
+  } = te(f({}, t, {
     rootRef: l,
     value: p
-  })), i = d({}, t, {
+  })), u = f({}, t, {
     active: R,
-    disabled: a,
+    disabled: r,
     highlighted: g,
     selected: h
-  }), C = se(i), u = (n = b.root) != null ? n : "button", v = z({
-    elementType: u,
+  }), C = se(u), d = (n = i.root) != null ? n : "button", v = z({
+    elementType: d,
     getSlotProps: T,
-    externalSlotProps: r.root,
+    externalSlotProps: a.root,
     externalForwardedProps: m,
     additionalProps: {
       ref: s
     },
-    ownerState: i,
+    ownerState: u,
     className: C.root
   });
-  return /* @__PURE__ */ N(u, d({}, v, {
+  return /* @__PURE__ */ N(d, f({}, v, {
     children: c
   }));
 });
@@ -165,16 +165,17 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
   value: e.oneOfType([e.number, e.string])
 });
 const pe = H(
-  ({ children: o, value: t, disabled: s, dataTestId: n }, c) => {
-    const a = U(D), r = j(
+  ({ children: o, value: t, disabled: s, className: n, "data-testid": c }, r) => {
+    const a = U(D), i = j(
       () => k(
         y.tabs__tab,
         t === (a == null ? void 0 : a.value) && y["tabs__tab--selected"],
-        s && y["tabs__tab--disabled"]
+        s && y["tabs__tab--disabled"],
+        n
       ),
       [t, a, s]
     );
-    return /* @__PURE__ */ N(F, { className: r, disabled: s, value: t, "data-testid": n, ref: c, children: o });
+    return /* @__PURE__ */ N(F, { className: i, disabled: s, value: t, "data-testid": c, ref: r, children: o });
   }
 );
 export {

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

@@ -6,7 +6,9 @@ export interface TabPanelProps {
     /** The value that identifies which tab is selected.
      * e.g. value="1" when the tab button with the value="1" is selected this content will show */
     value: string | number;
-    /** Test id */
-    dataTestId?: string;
+    /** CSS classes to be applied on the container element */
+    className?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
 }
 export declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/TabPanel.js

@@ -1,79 +1,80 @@
 import { jsx as T } from "react/jsx-runtime";
 import * as P from "react";
 import { forwardRef as v } from "react";
-import { u as y, s as x } from "../../Tabs.module-jkH1Qjn7.js";
-import { g as C, a as N, u as _, b, _ as w, c as O, P as o, d as E, e as I } from "../../useSlotProps-C_I1kEHr.js";
-import { u as S } from "../../useId-BW-oWmul.js";
-import { u as U } from "../../useCompoundItem-B7Eo_qZk.js";
+import { c as y } from "../../clsx-DB4S2d7J.js";
+import { u as x, s as C } from "../../Tabs.module-BGGTkDc5.js";
+import { g as N, a as _, u as w, b, _ as O, c as E, P as o, d as I, e as S } from "../../useSlotProps-C_I1kEHr.js";
+import { u as U } from "../../useId-BW-oWmul.js";
+import { u as j } from "../../useCompoundItem-B7Eo_qZk.js";
 const h = "TabPanel";
-function j(t) {
-  return C(h, t);
-}
-N(h, ["root", "hidden"]);
 function M(t) {
-  return t.size;
+  return N(h, t);
 }
+_(h, ["root", "hidden"]);
 function V(t) {
+  return t.size;
+}
+function F(t) {
   const {
     value: e,
     id: s,
     rootRef: n
-  } = t, i = y();
-  if (i === null)
+  } = t, a = x();
+  if (a === null)
     throw new Error("No TabContext provided");
   const {
     value: f,
     getTabId: m
-  } = i, r = S(s), a = P.useRef(null), u = _(a, n), c = P.useMemo(() => ({
+  } = a, r = U(s), l = P.useRef(null), c = w(l, n), u = P.useMemo(() => ({
     id: r,
-    ref: a
+    ref: l
   }), [r]), {
-    id: l
-  } = U(e ?? M, c), d = l !== f, p = l !== void 0 ? m(l) : void 0;
+    id: d
+  } = j(e ?? V, u), i = d !== f, p = d !== void 0 ? m(d) : void 0;
   return {
-    hidden: d,
+    hidden: i,
     getRootProps: (g = {}) => b({
       "aria-labelledby": p ?? void 0,
-      hidden: d,
+      hidden: i,
       id: r ?? void 0
     }, g, {
-      ref: u
+      ref: c
     }),
-    rootRef: u
+    rootRef: c
   };
 }
-const F = ["children", "value", "slotProps", "slots"], $ = (t) => {
+const $ = ["children", "value", "slotProps", "slots"], k = (t) => {
   const {
     hidden: e
   } = t;
-  return E({
+  return I({
     root: ["root", e && "hidden"]
-  }, I(j));
+  }, S(M));
 }, R = /* @__PURE__ */ P.forwardRef(function(e, s) {
   var n;
   const {
-    children: i,
+    children: a,
     slotProps: f = {},
     slots: m = {}
-  } = e, r = w(e, F), {
-    hidden: a,
-    getRootProps: u
-  } = V(e), c = b({}, e, {
-    hidden: a
-  }), l = $(c), d = (n = m.root) != null ? n : "div", p = O({
-    elementType: d,
-    getSlotProps: u,
+  } = e, r = O(e, $), {
+    hidden: l,
+    getRootProps: c
+  } = F(e), u = b({}, e, {
+    hidden: l
+  }), d = k(u), i = (n = m.root) != null ? n : "div", p = E({
+    elementType: i,
+    getSlotProps: c,
     externalSlotProps: f.root,
     externalForwardedProps: r,
     additionalProps: {
       role: "tabpanel",
       ref: s
     },
-    ownerState: c,
-    className: l.root
+    ownerState: u,
+    className: d.root
   });
-  return /* @__PURE__ */ T(d, b({}, p, {
-    children: !a && i
+  return /* @__PURE__ */ T(i, b({}, p, {
+    children: !l && a
   }));
 });
 process.env.NODE_ENV !== "production" && (R.propTypes = {
@@ -111,9 +112,18 @@ process.env.NODE_ENV !== "production" && (R.propTypes = {
    */
   value: o.oneOfType([o.number, o.string])
 });
-const q = v(
-  ({ children: t, value: e, dataTestId: s }, n) => /* @__PURE__ */ T(R, { className: x["tabs__tab-panel"], value: e, "data-testid": s, ref: n, children: t })
+const H = v(
+  ({ children: t, value: e, className: s, "data-testid": n }, a) => /* @__PURE__ */ T(
+    R,
+    {
+      className: y(C["tabs__tab-panel"], s),
+      value: e,
+      "data-testid": n,
+      ref: a,
+      children: t
+    }
+  )
 );
 export {
-  q as TabPanel
+  H as TabPanel
 };

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

@@ -4,11 +4,13 @@ export interface TabsProps {
     /** Should contain `Tab` and `TabPanel` components to be rendered  */
     children?: ReactNode;
     /** Selected tab */
-    value?: number | string;
+    value?: string | number | null;
+    /** CSS classes to be applied on the container element */
+    className?: string;
+    /** Id to be applied as `data-testid` on the container element */
+    'data-testid'?: string;
     /** Callback triggered when the user has selected a tab */
-    onChange?: (tabValue: number | string | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
-    /** Test id */
-    dataTestId?: string;
+    onChange?: (tabValue: string | number | null, event?: React.SyntheticEvent<Element, Event> | null) => void;
 }
 export declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
 export * from './Tab';