@rio-cloud/rio-uikit 2.5.0-beta.1 → 2.5.0

package/components/states/StateButton.js

@@ -1,14 +1,50 @@
-import { jsx as n } from "react/jsx-runtime";
-import r from "../../utils/classNames.js";
-const p = (o) => {
-  const { text: t, bsStyle: m = "primary", className: s, onClick: a = () => {
-  }, href: e } = o;
-  if (e)
-    return /* @__PURE__ */ n("a", { className: r("margin-top-15", s), href: e, onClick: a, children: t });
-  const c = r("btn", "margin-top-10", `btn-${m}`, s);
-  return /* @__PURE__ */ n("button", { className: c, type: "button", onClick: a, children: t });
+import { jsx as i } from "react/jsx-runtime";
+import { getAutoTrackingAttributes as b } from "../../utils/analytics/autoTracking.js";
+import c from "../../utils/classNames.js";
+const N = (m) => {
+  const {
+    text: o,
+    bsStyle: u = "primary",
+    className: s,
+    onClick: a = () => {
+    },
+    href: t,
+    autoTrackingKey: l,
+    trackingAttributes: r,
+    ...n
+  } = m, e = b({
+    autoTrackingKey: l,
+    props: { ...r, ...n },
+    source: t ? "link" : "button"
+  });
+  if (t)
+    return /* @__PURE__ */ i(
+      "a",
+      {
+        className: c("margin-top-15", s),
+        href: t,
+        onClick: a,
+        ...e,
+        ...r,
+        ...n,
+        children: o
+      }
+    );
+  const p = c("btn", "margin-top-10", `btn-${u}`, s);
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      className: p,
+      type: "button",
+      onClick: a,
+      ...e,
+      ...r,
+      ...n,
+      children: o
+    }
+  );
 };
 export {
-  p as default
+  N as default
 };
 //# sourceMappingURL=StateButton.js.map

package/components/states/StateButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"StateButton.js","sources":["../../../src/components/states/StateButton.tsx"],"sourcesContent":["import type React from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { BUTTON_STYLE } from '../../Button';\n\nexport type StateButtonProps = {\n    /**\n     * The button text.\n     *\n     * This can also be a node with an icon to be shown on the button.\n     */\n    text: string | React.ReactNode;\n\n    /**\n     * Callback fired after the component starts to collapse.\n     *\n     * @default () => {}\n     */\n    onClick?: VoidFunction;\n\n    /**\n     * Instead of a callback for the button you can specify a \"href\".\n     *\n     * This way it will render a link button instead.\n     */\n    href?: string;\n\n    /**\n     * The style of the button.\n     *\n     * @default 'primary'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Additional classes assigned to the button.\n     */\n    className?: string;\n};\n\nconst StateButton = (props: StateButtonProps) => {\n    const { text, bsStyle = 'primary', className, onClick = () => {}, href } = props;\n\n    // In case a href is given, render a link instead\n    if (href) {\n        return (\n            <a className={classNames('margin-top-15', className)} href={href} onClick={onClick}>\n                {text}\n            </a>\n        );\n    }\n\n    const buttonClassNames = classNames('btn', 'margin-top-10', `btn-${bsStyle}`, className);\n\n    return (\n        <button className={buttonClassNames} type='button' onClick={onClick}>\n            {text}\n        </button>\n    );\n};\n\nexport default StateButton;\n"],"names":["StateButton","props","text","bsStyle","className","onClick","href","jsx","classNames","buttonClassNames"],"mappings":";;AAwCA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM,EAAE,MAAAC,GAAM,SAAAC,IAAU,WAAW,WAAAC,GAAW,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,MAAAC,MAASL;AAG3E,MAAIK;AACA,WACI,gBAAAC,EAAC,OAAE,WAAWC,EAAW,iBAAiBJ,CAAS,GAAG,MAAAE,GAAY,SAAAD,GAC7D,UAAAH,EAAA,CACL;AAIR,QAAMO,IAAmBD,EAAW,OAAO,iBAAiB,OAAOL,CAAO,IAAIC,CAAS;AAEvF,2BACK,UAAA,EAAO,WAAWK,GAAkB,MAAK,UAAS,SAAAJ,GAC9C,UAAAH,GACL;AAER;"}
+{"version":3,"file":"StateButton.js","sources":["../../../src/components/states/StateButton.tsx"],"sourcesContent":["import type React from 'react';\n\nimport { getAutoTrackingAttributes, type AutoTrackingAttributes } from '../../utils/analytics/autoTracking';\nimport classNames from '../../utils/classNames';\nimport type { BUTTON_STYLE } from '../../Button';\n\nexport type StateButtonProps = AutoTrackingAttributes & {\n    /**\n     * The button text.\n     *\n     * This can also be a node with an icon to be shown on the button.\n     */\n    text: string | React.ReactNode;\n\n    /**\n     * Callback fired after the component starts to collapse.\n     *\n     * @default () => {}\n     */\n    onClick?: VoidFunction;\n\n    /**\n     * Instead of a callback for the button you can specify a \"href\".\n     *\n     * This way it will render a link button instead.\n     */\n    href?: string;\n\n    /**\n     * The style of the button.\n     *\n     * @default 'primary'\n     */\n    bsStyle?: BUTTON_STYLE;\n\n    /**\n     * Additional classes assigned to the button.\n     */\n    className?: string;\n\n    /**\n     * Optional key used to generate automatic GA tracking attributes when no explicit\n     * tracking attributes are provided.\n     */\n    autoTrackingKey?: string;\n\n    /**\n     * Optional tracking attributes (e.g. from `getTrackingAttributes`) added to the button or link element.\n     */\n    trackingAttributes?: AutoTrackingAttributes;\n};\n\nconst StateButton = (props: StateButtonProps) => {\n    const {\n        text,\n        bsStyle = 'primary',\n        className,\n        onClick = () => {},\n        href,\n        autoTrackingKey,\n        trackingAttributes,\n        ...remainingProps\n    } = props;\n\n    const autoTrackingAttributes = getAutoTrackingAttributes({\n        autoTrackingKey,\n        props: { ...trackingAttributes, ...remainingProps },\n        source: href ? 'link' : 'button',\n    });\n\n    // In case a href is given, render a link instead\n    if (href) {\n        return (\n            <a\n                className={classNames('margin-top-15', className)}\n                href={href}\n                onClick={onClick}\n                {...autoTrackingAttributes}\n                {...trackingAttributes}\n                {...remainingProps}\n            >\n                {text}\n            </a>\n        );\n    }\n\n    const buttonClassNames = classNames('btn', 'margin-top-10', `btn-${bsStyle}`, className);\n\n    return (\n        <button\n            className={buttonClassNames}\n            type='button'\n            onClick={onClick}\n            {...autoTrackingAttributes}\n            {...trackingAttributes}\n            {...remainingProps}\n        >\n            {text}\n        </button>\n    );\n};\n\nexport default StateButton;\n"],"names":["StateButton","props","text","bsStyle","className","onClick","href","autoTrackingKey","trackingAttributes","remainingProps","autoTrackingAttributes","getAutoTrackingAttributes","jsx","classNames","buttonClassNames"],"mappings":";;;AAoDA,MAAMA,IAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,MAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR,GAEES,IAAyBC,EAA0B;AAAA,IACrD,iBAAAJ;AAAA,IACA,OAAO,EAAE,GAAGC,GAAoB,GAAGC,EAAA;AAAA,IACnC,QAAQH,IAAO,SAAS;AAAA,EAAA,CAC3B;AAGD,MAAIA;AACA,WACI,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAW,iBAAiBT,CAAS;AAAA,QAChD,MAAAE;AAAA,QACA,SAAAD;AAAA,QACC,GAAGK;AAAA,QACH,GAAGF;AAAA,QACH,GAAGC;AAAA,QAEH,UAAAP;AAAA,MAAA;AAAA,IAAA;AAKb,QAAMY,IAAmBD,EAAW,OAAO,iBAAiB,OAAOV,CAAO,IAAIC,CAAS;AAEvF,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWE;AAAA,MACX,MAAK;AAAA,MACL,SAAAT;AAAA,MACC,GAAGK;AAAA,MACH,GAAGF;AAAA,MACH,GAAGC;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/components/statsWidget/StatsWidgetNumber.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, MouseEventHandler } from 'react';
+export type StatsWidgetNumberLabelPosition = 'top' | 'bottom';
 export type StatsWidgetNumberProps = {
     /**
      * The value to be shown.
@@ -11,9 +12,23 @@ export type StatsWidgetNumberProps = {
      */
     total?: string | number | ReactNode;
     /**
-     * The label shown below the number.
+     * The label shown next to the number.
      */
     label?: string | ReactNode;
+    /**
+     * Position of the label relative to the number.
+     *
+     * @default 'bottom'
+     */
+    labelPosition?: StatsWidgetNumberLabelPosition;
+    /**
+     * Additional class names to be added to the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional class names to be added to the value element.
+     */
+    valueClassName?: string;
     /**
      * Defines whether the number is clickable i.e. in combination with a filter.
      *

package/components/statsWidget/StatsWidgetNumber.js

@@ -1,17 +1,34 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import n from "../../utils/classNames.js";
-const b = (l) => {
-  const { value: r = 0, total: e, label: a, className: i, clickable: c = !1, onClick: m = () => {
-  }, ...d } = l, o = n("StatsWidgetNumber", c && "cursor-pointer", i);
-  return /* @__PURE__ */ t("div", { ...d, onClick: m, className: o, children: [
-    /* @__PURE__ */ t("div", { className: "StatsWidgetNumber-counter", children: [
-      /* @__PURE__ */ s("div", { className: "StatsWidgetNumber-value", children: r }),
-      (e || e === 0) && /* @__PURE__ */ s("div", { className: "StatsWidgetNumber-total", children: e })
-    ] }),
-    a && /* @__PURE__ */ s("div", { className: "StatsWidgetNumber-label", children: a })
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import s from "../../utils/classNames.js";
+const W = (r) => {
+  const {
+    value: m = 0,
+    total: e,
+    label: l,
+    labelPosition: t = "bottom",
+    labelClassName: c,
+    valueClassName: n,
+    className: d,
+    clickable: b = !1,
+    onClick: N = () => {
+    },
+    ...u
+  } = r, p = s(
+    "StatsWidgetNumber",
+    t === "top" && "label-position-top",
+    b && "cursor-pointer",
+    d
+  ), o = l && /* @__PURE__ */ a("div", { className: s("StatsWidgetNumber-label", c), children: l }), v = /* @__PURE__ */ i("div", { className: "StatsWidgetNumber-counter", children: [
+    /* @__PURE__ */ a("div", { className: s("StatsWidgetNumber-value", n), children: m }),
+    (e || e === 0) && /* @__PURE__ */ a("div", { className: "StatsWidgetNumber-total", children: e })
+  ] });
+  return /* @__PURE__ */ i("div", { ...u, onClick: N, className: p, children: [
+    t === "top" && o,
+    v,
+    t === "bottom" && o
   ] });
 };
 export {
-  b as default
+  W as default
 };
 //# sourceMappingURL=StatsWidgetNumber.js.map

package/components/statsWidget/StatsWidgetNumber.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatsWidgetNumber.js","sources":["../../../src/components/statsWidget/StatsWidgetNumber.tsx"],"sourcesContent":["import type { ReactNode, MouseEventHandler } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type StatsWidgetNumberProps = {\n    /**\n     * The value to be shown.\n     *\n     * @default 0\n     */\n    value: string | number | ReactNode;\n\n    /**\n     * The total value to be shown i.e. in combination with an active filter.\n     */\n    total?: string | number | ReactNode;\n\n    /**\n     * The label shown below the number.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Defines whether the number is clickable i.e. in combination with a filter.\n     *\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Callback for when the user clicks the number widget.\n     */\n    onClick?: MouseEventHandler;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetNumber = (props: StatsWidgetNumberProps) => {\n    const { value = 0, total, label, className, clickable = false, onClick = () => {}, ...remainingProps } = props;\n\n    const wrapperClasses = classNames('StatsWidgetNumber', clickable && 'cursor-pointer', className);\n\n    return (\n        <div {...remainingProps} onClick={onClick} className={wrapperClasses}>\n            <div className='StatsWidgetNumber-counter'>\n                <div className='StatsWidgetNumber-value'>{value}</div>\n                {(total || total === 0) && <div className='StatsWidgetNumber-total'>{total}</div>}\n            </div>\n            {label && <div className='StatsWidgetNumber-label'>{label}</div>}\n        </div>\n    );\n};\n\nexport default StatsWidgetNumber;\n"],"names":["StatsWidgetNumber","props","value","total","label","className","clickable","onClick","remainingProps","wrapperClasses","classNames","jsxs","jsx"],"mappings":";;AAwCA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM,EAAE,OAAAC,IAAQ,GAAG,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,IAAY,IAAO,SAAAC,IAAU,MAAM;AAAA,EAAC,GAAG,GAAGC,EAAA,IAAmBP,GAEnGQ,IAAiBC,EAAW,qBAAqBJ,KAAa,kBAAkBD,CAAS;AAE/F,2BACK,OAAA,EAAK,GAAGG,GAAgB,SAAAD,GAAkB,WAAWE,GAClD,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,6BACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAV,GAAM;AAAA,OAC9CC,KAASA,MAAU,wBAAO,OAAA,EAAI,WAAU,2BAA2B,UAAAA,EAAA,CAAM;AAAA,IAAA,GAC/E;AAAA,IACCC,KAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAU,2BAA2B,UAAAR,EAAA,CAAM;AAAA,EAAA,GAC9D;AAER;"}
+{"version":3,"file":"StatsWidgetNumber.js","sources":["../../../src/components/statsWidget/StatsWidgetNumber.tsx"],"sourcesContent":["import type { ReactNode, MouseEventHandler } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type StatsWidgetNumberLabelPosition = 'top' | 'bottom';\n\nexport type StatsWidgetNumberProps = {\n    /**\n     * The value to be shown.\n     *\n     * @default 0\n     */\n    value: string | number | ReactNode;\n\n    /**\n     * The total value to be shown i.e. in combination with an active filter.\n     */\n    total?: string | number | ReactNode;\n\n    /**\n     * The label shown next to the number.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Position of the label relative to the number.\n     *\n     * @default 'bottom'\n     */\n    labelPosition?: StatsWidgetNumberLabelPosition;\n\n    /**\n     * Additional class names to be added to the label element.\n     */\n    labelClassName?: string;\n\n    /**\n     * Additional class names to be added to the value element.\n     */\n    valueClassName?: string;\n\n    /**\n     * Defines whether the number is clickable i.e. in combination with a filter.\n     *\n     * @default false\n     */\n    clickable?: boolean;\n\n    /**\n     * Callback for when the user clicks the number widget.\n     */\n    onClick?: MouseEventHandler;\n\n    /**\n     * Additional class names to be added to the element.\n     */\n    className?: string;\n};\n\nconst StatsWidgetNumber = (props: StatsWidgetNumberProps) => {\n    const {\n        value = 0,\n        total,\n        label,\n        labelPosition = 'bottom',\n        labelClassName,\n        valueClassName,\n        className,\n        clickable = false,\n        onClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const wrapperClasses = classNames(\n        'StatsWidgetNumber',\n        labelPosition === 'top' && 'label-position-top',\n        clickable && 'cursor-pointer',\n        className\n    );\n\n    const labelElement = label && <div className={classNames('StatsWidgetNumber-label', labelClassName)}>{label}</div>;\n\n    const counterElement = (\n        <div className='StatsWidgetNumber-counter'>\n            <div className={classNames('StatsWidgetNumber-value', valueClassName)}>{value}</div>\n            {(total || total === 0) && <div className='StatsWidgetNumber-total'>{total}</div>}\n        </div>\n    );\n\n    return (\n        <div {...remainingProps} onClick={onClick} className={wrapperClasses}>\n            {labelPosition === 'top' && labelElement}\n            {counterElement}\n            {labelPosition === 'bottom' && labelElement}\n        </div>\n    );\n};\n\nexport default StatsWidgetNumber;\n"],"names":["StatsWidgetNumber","props","value","total","label","labelPosition","labelClassName","valueClassName","className","clickable","onClick","remainingProps","wrapperClasses","classNames","labelElement","jsx","counterElement","jsxs"],"mappings":";;AA2DA,MAAMA,IAAoB,CAACC,MAAkC;AACzD,QAAM;AAAA,IACF,OAAAC,IAAQ;AAAA,IACR,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,GAAGC;AAAA,EAAA,IACHV,GAEEW,IAAiBC;AAAA,IACnB;AAAA,IACAR,MAAkB,SAAS;AAAA,IAC3BI,KAAa;AAAA,IACbD;AAAA,EAAA,GAGEM,IAAeV,KAAS,gBAAAW,EAAC,OAAA,EAAI,WAAWF,EAAW,2BAA2BP,CAAc,GAAI,UAAAF,EAAA,CAAM,GAEtGY,IACF,gBAAAC,EAAC,OAAA,EAAI,WAAU,6BACX,UAAA;AAAA,IAAA,gBAAAF,EAAC,SAAI,WAAWF,EAAW,2BAA2BN,CAAc,GAAI,UAAAL,GAAM;AAAA,KAC5EC,KAASA,MAAU,wBAAO,OAAA,EAAI,WAAU,2BAA2B,UAAAA,EAAA,CAAM;AAAA,EAAA,GAC/E;AAGJ,2BACK,OAAA,EAAK,GAAGQ,GAAgB,SAAAD,GAAkB,WAAWE,GACjD,UAAA;AAAA,IAAAP,MAAkB,SAASS;AAAA,IAC3BE;AAAA,IACAX,MAAkB,YAAYS;AAAA,EAAA,GACnC;AAER;"}

package/components/tabbedPanel/TabbedPanel.d.ts

@@ -0,0 +1,99 @@
+import { default as React } from 'react';
+export type TabbedPanelTab = {
+    /**
+     * Unique key of the tab.
+     */
+    key: string;
+    /**
+     * Title rendered inside the panel header navigation.
+     */
+    title: React.ReactNode;
+    /**
+     * Whether the tab can be selected.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to be set on the tab list item.
+     */
+    className?: string;
+    /**
+     * Additional classes to be set on this tab's content wrapper.
+     */
+    contentClassName?: string;
+    /**
+     * Content rendered inside the panel body when the tab is active.
+     */
+    content: React.ReactNode;
+};
+export type TabbedPanelProps = {
+    /**
+     * The selected tab key for controlled usage.
+     */
+    activeKey?: string;
+    /**
+     * The initially selected tab key for uncontrolled usage.
+     */
+    defaultActiveKey?: string;
+    /**
+     * Available tabs and their panel body content.
+     */
+    tabs: TabbedPanelTab[];
+    /**
+     * Panel style variant. TabbedPanel supports the default bordered panel and the blank panel only.
+     *
+     * @default 'default'
+     */
+    bsStyle?: 'blank' | 'default';
+    /**
+     * Body transition used when switching tabs.
+     *
+     * @default 'height-fade'
+     */
+    bodyTransition?: 'none' | 'fade' | 'height-fade';
+    /**
+     * Animation duration in seconds.
+     *
+     * @default 0.16
+     */
+    duration?: number;
+    /**
+     * Optional content rendered on the right side of the panel header.
+     */
+    headerRight?: React.ReactNode | ((activeTab: TabbedPanelTab) => React.ReactNode);
+    /**
+     * Callback called when a tab is selected.
+     */
+    onSelectTab?: (tabKey: string) => void;
+    /**
+     * Additional classes to be set on the wrapper element.
+     */
+    className?: string;
+    /**
+     * Additional classes to be set on the panel header.
+     */
+    headerClassName?: string;
+    /**
+     * Additional classes to be set on the tab navigation.
+     */
+    navClassName?: string;
+    /**
+     * Additional classes to be set on each tab link.
+     */
+    tabLinkClassName?: string;
+    /**
+     * Additional classes to be set on the panel body.
+     */
+    bodyClassName?: string;
+    /**
+     * Additional classes to be set on the active tab content wrapper.
+     */
+    activeContentClassName?: string;
+    /**
+     * Additional classes to be set on the header-right wrapper.
+     */
+    headerRightClassName?: string;
+};
+declare const TabbedPanel: (props: TabbedPanelProps) => import("react/jsx-runtime").JSX.Element;
+export default TabbedPanel;

package/components/tabbedPanel/TabbedPanel.js

@@ -0,0 +1,119 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { useId as Z, useState as k } from "react";
+import { useReducedMotion as _, motion as u, AnimatePresence as C } from "motion/react";
+import { noop as ee } from "es-toolkit/function";
+import r from "../../utils/classNames.js";
+import { mergeClassNameOverrides as c } from "../../utils/mergeClassNameOverrides.js";
+import ae from "../../hooks/useResizeObserver.js";
+const A = (t) => t.find((s) => !s.disabled) ?? t[0], re = (t) => {
+  const {
+    activeKey: s,
+    defaultActiveKey: T,
+    tabs: l,
+    bsStyle: $ = "default",
+    bodyTransition: x = "height-fade",
+    duration: m = 0.16,
+    headerRight: y,
+    onSelectTab: B = ee,
+    className: R,
+    headerClassName: K,
+    navClassName: w,
+    tabLinkClassName: I,
+    bodyClassName: S,
+    activeContentClassName: D,
+    headerRightClassName: j,
+    ...P
+  } = t, o = Z(), z = _(), [E, , { blockSize: H }] = ae(), [L, N] = k(!1), [M, O] = k(T ?? A(l)?.key), F = s ?? M, n = l.find((e) => e.key === F) ?? A(l), p = z ? "none" : x, b = (e) => {
+    e.disabled || e.key === n?.key || (s === void 0 && O(e.key), B(e.key));
+  }, q = (e, i) => {
+    i.preventDefault(), b(e);
+  }, G = (e, i) => {
+    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), b(e));
+  }, J = c(`tabbed-panel panel panel-${$} margin-bottom-20`, R), Q = c(
+    "panel-heading display-flex align-items-center justify-content-between gap-15 padding-0 margin-bottom-0",
+    K
+  ), h = r("panel-body", S), U = c("nav nav-pills align-items-end margin-0 shadow-none", w), V = c("padding-right-10", j), W = r(D, n?.contentClassName);
+  let d = null;
+  typeof y == "function" ? d = n ? y(n) : null : d = y;
+  const f = () => /* @__PURE__ */ a(
+    "div",
+    {
+      className: W,
+      role: "tabpanel",
+      id: `${o}-${n?.key}-panel`,
+      "aria-labelledby": `${o}-${n?.key}-tab`,
+      children: n?.content
+    }
+  ), X = () => p === "none" ? /* @__PURE__ */ a("div", { className: h, children: f() }) : p === "height-fade" ? /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(
+    u.div,
+    {
+      initial: !1,
+      animate: { height: H ?? "auto" },
+      className: r(L && "overflow-hidden"),
+      transition: { duration: m },
+      onAnimationStart: () => N(!0),
+      onAnimationComplete: () => N(!1),
+      children: /* @__PURE__ */ a("div", { ref: E, children: /* @__PURE__ */ a(C, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ a(
+        u.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: m },
+          children: f()
+        },
+        n?.key
+      ) }) })
+    }
+  ) }) : p === "fade" ? /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(C, { initial: !1, mode: "wait", children: /* @__PURE__ */ a(
+    u.div,
+    {
+      transition: { duration: m },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      children: f()
+    },
+    n?.key
+  ) }) }) : null;
+  return /* @__PURE__ */ g("div", { ...P, className: J, children: [
+    /* @__PURE__ */ g("div", { className: Q, children: [
+      /* @__PURE__ */ a("ul", { className: U, role: "tablist", children: l.map((e) => {
+        const i = e.key === n?.key, Y = `${o}-${e.key}-tab`;
+        return /* @__PURE__ */ a(
+          "li",
+          {
+            className: r(
+              i && "active text-medium",
+              e.disabled && "disabled",
+              e.className
+            ),
+            role: "presentation",
+            children: /* @__PURE__ */ a(
+              "span",
+              {
+                id: Y,
+                role: "tab",
+                "aria-selected": i,
+                "aria-controls": `${o}-${e.key}-panel`,
+                "aria-disabled": e.disabled,
+                tabIndex: e.disabled ? -1 : 0,
+                className: I,
+                onClick: (v) => q(e, v),
+                onKeyDown: (v) => G(e, v),
+                children: e.title
+              }
+            )
+          },
+          e.key
+        );
+      }) }),
+      d && /* @__PURE__ */ a("div", { className: V, children: d })
+    ] }),
+    X()
+  ] });
+};
+export {
+  re as default
+};
+//# sourceMappingURL=TabbedPanel.js.map

package/components/tabbedPanel/TabbedPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabbedPanel.js","sources":["../../../src/components/tabbedPanel/TabbedPanel.tsx"],"sourcesContent":["import type React from 'react';\nimport { useId, useState } from 'react';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\nimport { mergeClassNameOverrides } from '../../utils/mergeClassNameOverrides';\nimport useResizeObserver from '../../hooks/useResizeObserver';\n\nexport type TabbedPanelTab = {\n    /**\n     * Unique key of the tab.\n     */\n    key: string;\n\n    /**\n     * Title rendered inside the panel header navigation.\n     */\n    title: React.ReactNode;\n\n    /**\n     * Whether the tab can be selected.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the tab list item.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on this tab's content wrapper.\n     */\n    contentClassName?: string;\n\n    /**\n     * Content rendered inside the panel body when the tab is active.\n     */\n    content: React.ReactNode;\n};\n\nexport type TabbedPanelProps = {\n    /**\n     * The selected tab key for controlled usage.\n     */\n    activeKey?: string;\n\n    /**\n     * The initially selected tab key for uncontrolled usage.\n     */\n    defaultActiveKey?: string;\n\n    /**\n     * Available tabs and their panel body content.\n     */\n    tabs: TabbedPanelTab[];\n\n    /**\n     * Panel style variant. TabbedPanel supports the default bordered panel and the blank panel only.\n     *\n     * @default 'default'\n     */\n    bsStyle?: 'blank' | 'default';\n\n    /**\n     * Body transition used when switching tabs.\n     *\n     * @default 'height-fade'\n     */\n    bodyTransition?: 'none' | 'fade' | 'height-fade';\n\n    /**\n     * Animation duration in seconds.\n     *\n     * @default 0.16\n     */\n    duration?: number;\n\n    /**\n     * Optional content rendered on the right side of the panel header.\n     */\n    headerRight?: React.ReactNode | ((activeTab: TabbedPanelTab) => React.ReactNode);\n\n    /**\n     * Callback called when a tab is selected.\n     */\n    onSelectTab?: (tabKey: string) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the panel header.\n     */\n    headerClassName?: string;\n\n    /**\n     * Additional classes to be set on the tab navigation.\n     */\n    navClassName?: string;\n\n    /**\n     * Additional classes to be set on each tab link.\n     */\n    tabLinkClassName?: string;\n\n    /**\n     * Additional classes to be set on the panel body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the active tab content wrapper.\n     */\n    activeContentClassName?: string;\n\n    /**\n     * Additional classes to be set on the header-right wrapper.\n     */\n    headerRightClassName?: string;\n};\n\nconst getFirstEnabledTab = (tabs: TabbedPanelTab[]) => tabs.find(tab => !tab.disabled) ?? tabs[0];\n\nconst TabbedPanel = (props: TabbedPanelProps) => {\n    const {\n        activeKey,\n        defaultActiveKey,\n        tabs,\n        bsStyle = 'default',\n        bodyTransition = 'height-fade',\n        duration = 0.16,\n        headerRight,\n        onSelectTab = noop,\n        className,\n        headerClassName,\n        navClassName,\n        tabLinkClassName,\n        bodyClassName,\n        activeContentClassName,\n        headerRightClassName,\n        ...remainingProps\n    } = props;\n\n    const componentId = useId();\n    const shouldReduceMotion = useReducedMotion();\n\n    const [activeBodyRef, , { blockSize: activeBodyHeight }] = useResizeObserver<HTMLDivElement>();\n\n    const [isBodyAnimating, setIsBodyAnimating] = useState(false);\n    const [internalActiveKey, setInternalActiveKey] = useState(defaultActiveKey ?? getFirstEnabledTab(tabs)?.key);\n\n    const selectedKey = activeKey ?? internalActiveKey;\n    const activeTab = tabs.find(tab => tab.key === selectedKey) ?? getFirstEnabledTab(tabs);\n    const effectiveBodyTransition = shouldReduceMotion ? 'none' : bodyTransition;\n\n    const selectTab = (tab: TabbedPanelTab) => {\n        if (tab.disabled || tab.key === activeTab?.key) {\n            return;\n        }\n\n        if (activeKey === undefined) {\n            setInternalActiveKey(tab.key);\n        }\n\n        onSelectTab(tab.key);\n    };\n\n    const handleSelectTab = (tab: TabbedPanelTab, event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n        selectTab(tab);\n    };\n\n    const handleTabKeyDown = (tab: TabbedPanelTab, event: React.KeyboardEvent<HTMLElement>) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            selectTab(tab);\n        }\n    };\n\n    const panelClassNames = mergeClassNameOverrides(`tabbed-panel panel panel-${bsStyle} margin-bottom-20`, className);\n\n    const headerClassNames = mergeClassNameOverrides(\n        'panel-heading display-flex align-items-center justify-content-between gap-15 padding-0 margin-bottom-0',\n        headerClassName\n    );\n\n    const panelBodyClassNames = classNames('panel-body', bodyClassName);\n\n    const navClassNames = mergeClassNameOverrides('nav nav-pills align-items-end margin-0 shadow-none', navClassName);\n    const headerRightClassNames = mergeClassNameOverrides('padding-right-10', headerRightClassName);\n\n    const activeContentClassNames = classNames(activeContentClassName, activeTab?.contentClassName);\n\n    let renderedHeaderRight: React.ReactNode = null;\n\n    if (typeof headerRight === 'function') {\n        renderedHeaderRight = activeTab ? headerRight(activeTab) : null;\n    } else {\n        renderedHeaderRight = headerRight;\n    }\n\n    const renderBodyContent = () => (\n        <div\n            className={activeContentClassNames}\n            role='tabpanel'\n            id={`${componentId}-${activeTab?.key}-panel`}\n            aria-labelledby={`${componentId}-${activeTab?.key}-tab`}\n        >\n            {activeTab?.content}\n        </div>\n    );\n\n    const renderBody = () => {\n        if (effectiveBodyTransition === 'none') {\n            return <div className={panelBodyClassNames}>{renderBodyContent()}</div>;\n        }\n\n        if (effectiveBodyTransition === 'height-fade') {\n            return (\n                <div className={panelBodyClassNames}>\n                    <motion.div\n                        initial={false}\n                        animate={{ height: activeBodyHeight ?? 'auto' }}\n                        className={classNames(isBodyAnimating && 'overflow-hidden')}\n                        transition={{ duration }}\n                        onAnimationStart={() => setIsBodyAnimating(true)}\n                        onAnimationComplete={() => setIsBodyAnimating(false)}\n                    >\n                        <div ref={activeBodyRef}>\n                            <AnimatePresence initial={false} mode='popLayout'>\n                                <motion.div\n                                    key={activeTab?.key}\n                                    initial={{ opacity: 0 }}\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0 }}\n                                    transition={{ duration }}\n                                >\n                                    {renderBodyContent()}\n                                </motion.div>\n                            </AnimatePresence>\n                        </div>\n                    </motion.div>\n                </div>\n            );\n        }\n\n        if (effectiveBodyTransition === 'fade') {\n            return (\n                <div className={panelBodyClassNames}>\n                    <AnimatePresence initial={false} mode='wait'>\n                        <motion.div\n                            key={activeTab?.key}\n                            transition={{ duration }}\n                            initial={{ opacity: 0 }}\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0 }}\n                        >\n                            {renderBodyContent()}\n                        </motion.div>\n                    </AnimatePresence>\n                </div>\n            );\n        }\n\n        return null;\n    };\n\n    return (\n        <div {...remainingProps} className={panelClassNames}>\n            <div className={headerClassNames}>\n                <ul className={navClassNames} role='tablist'>\n                    {tabs.map(tab => {\n                        const isActive = tab.key === activeTab?.key;\n                        const tabId = `${componentId}-${tab.key}-tab`;\n\n                        return (\n                            <li\n                                key={tab.key}\n                                className={classNames(\n                                    isActive && 'active text-medium',\n                                    tab.disabled && 'disabled',\n                                    tab.className\n                                )}\n                                role='presentation'\n                            >\n                                <span\n                                    id={tabId}\n                                    role='tab'\n                                    aria-selected={isActive}\n                                    aria-controls={`${componentId}-${tab.key}-panel`}\n                                    aria-disabled={tab.disabled}\n                                    tabIndex={tab.disabled ? -1 : 0}\n                                    className={tabLinkClassName}\n                                    onClick={event => handleSelectTab(tab, event)}\n                                    onKeyDown={event => handleTabKeyDown(tab, event)}\n                                >\n                                    {tab.title}\n                                </span>\n                            </li>\n                        );\n                    })}\n                </ul>\n                {renderedHeaderRight && <div className={headerRightClassNames}>{renderedHeaderRight}</div>}\n            </div>\n            {renderBody()}\n        </div>\n    );\n};\n\nexport default TabbedPanel;\n"],"names":["getFirstEnabledTab","tabs","tab","TabbedPanel","props","activeKey","defaultActiveKey","bsStyle","bodyTransition","duration","headerRight","onSelectTab","noop","className","headerClassName","navClassName","tabLinkClassName","bodyClassName","activeContentClassName","headerRightClassName","remainingProps","componentId","useId","shouldReduceMotion","useReducedMotion","activeBodyRef","activeBodyHeight","useResizeObserver","isBodyAnimating","setIsBodyAnimating","useState","internalActiveKey","setInternalActiveKey","selectedKey","activeTab","effectiveBodyTransition","selectTab","handleSelectTab","event","handleTabKeyDown","panelClassNames","mergeClassNameOverrides","headerClassNames","panelBodyClassNames","classNames","navClassNames","headerRightClassNames","activeContentClassNames","renderedHeaderRight","renderBodyContent","jsx","renderBody","motion","AnimatePresence","jsxs","isActive","tabId"],"mappings":"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"}

package/components/table/Table.types.d.ts

@@ -142,6 +142,10 @@ export type TableColumnDefinition<RowType extends TableRowData> = {
     /**
      * Enables resize handles for this column in `TABLE` view.
      *
+     * Resize handles can look like vertical separators in the table header. Use `resizeable` when a design
+     * shows header-only vertical handles between columns, especially when body rows do not show vertical
+     * grid lines.
+     *
      * When `onColumnResize` is provided, resized widths are controlled from the outside.
      * When it is omitted, the table keeps resized widths internally.
      *
@@ -261,7 +265,11 @@ export type TableProps<RowType extends TableRowData> = Omit<HTMLAttributes<HTMLD
      */
     rounded?: boolean;
     /**
-     * Show vertical and header row grid lines.
+     * Show table grid separators through the header and body.
+     *
+     * Do not use `gridLines` only to reproduce header-only vertical divider or handle lines.
+     * If a design shows vertical separators only in the header while body rows do not show vertical
+     * grid lines, use `TableHeaderColumn` `resizeable` and optionally `onColumnResize` instead.
      *
      * @default false
      */

package/components/table/TableColumn.js

@@ -1,14 +1,15 @@
 import { jsx as b, jsxs as j } from "react/jsx-runtime";
 import c from "../../utils/classNames.js";
-import { getVerticalAlignClassName as I, getHorizontalAlignClassName as L } from "./shared/getAlignClassName.js";
-import T from "./shared/getCellContentOverflowClassName.js";
-import { resolveAriaSpan as H, resolveAriaColIndex as D } from "./shared/resolveTableAria.js";
-import { useOptionalTableInteractionContext as P } from "./context/TableInteractionContext.js";
-import { useOptionalTableLayoutContext as $ } from "./context/TableLayoutContext.js";
-import { useOptionalTableRenderConfigContext as q } from "./context/TableRenderConfigContext.js";
-import { useOptionalTableSection as E, useTableRowContext as G } from "./context/TableStructureContext.js";
-import { useOptionalTableRenderContext as J } from "./context/TableRenderContext.js";
-const ne = (F) => {
+import { getNodeTextContent as H } from "../../utils/getNodeTextContent.js";
+import { getVerticalAlignClassName as T, getHorizontalAlignClassName as I } from "./shared/getAlignClassName.js";
+import L from "./shared/getCellContentOverflowClassName.js";
+import { resolveAriaSpan as P, resolveAriaColIndex as D } from "./shared/resolveTableAria.js";
+import { useOptionalTableInteractionContext as $ } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as q } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as E } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as G, useTableRowContext as J } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as Q } from "./context/TableRenderContext.js";
+const ae = (F) => {
   const {
     children: f,
     className: g,
@@ -20,7 +21,7 @@ const ne = (F) => {
     value: p,
     verticalAlign: W,
     ...x
-  } = F, n = q(), o = J(), d = P(), i = $(), v = E(), a = G(), s = v === "body", r = v === "footer";
+  } = F, n = E(), o = Q(), d = $(), i = q(), v = G(), a = J(), s = v === "body", r = v === "footer";
   if (!o || !n || !d || !i || o.columns.length === 0 || !s && !r || s && !a)
     return null;
   const N = t !== void 0 ? o.columnIndexByKey.get(t) : void 0, u = a?.nextColumnIndex(N, h) ?? N ?? -1;
@@ -47,7 +48,7 @@ const ne = (F) => {
     },
     a.rowIndex,
     u
-  ), z = i.stickyLeftColumnCount ?? 0, A = i.stickyRightColumnCount ?? 0, R = z > 0 && l <= z, O = A > 0 && l > o.columns.length - A, K = e?.mobileLabel ?? (typeof e?.label == "string" ? e.label : ""), C = (V) => {
+  ), z = i.stickyLeftColumnCount ?? 0, A = i.stickyRightColumnCount ?? 0, R = z > 0 && l <= z, O = A > 0 && l > o.columns.length - A, K = e?.mobileLabel ?? H(e?.label) ?? "", C = (V) => {
     V.stopPropagation();
   };
   return r && (o.renderDraft.hasFooterCells = !0), n.isTableView ? /* @__PURE__ */ b(
@@ -61,8 +62,8 @@ const ne = (F) => {
         s && O && "table-cell-sticky-right-column",
         r && i.stickyFooter && R && "table-footer-cell-sticky-left-column",
         r && i.stickyFooter && O && "table-footer-cell-sticky-right-column",
-        L(w),
-        I(k),
+        I(w),
+        T(k),
         e?.hideOnMobile && "table-hide-mobile",
         S,
         g
@@ -70,11 +71,11 @@ const ne = (F) => {
       "data-column": e?.columnKey ?? t ?? l,
       role: "cell",
       "aria-colindex": D(l, d.showSelectionColumn),
-      "aria-colspan": H(h),
+      "aria-colspan": P(h),
       onClick: m ? C : void 0,
       onKeyDown: m ? C : void 0,
       style: { gridColumn: `${B} / span ${h}`, gridRow: "1 / span 1" },
-      children: /* @__PURE__ */ b("div", { className: c("table-cell-content", T(y)), children: p ?? f ?? "" })
+      children: /* @__PURE__ */ b("div", { className: c("table-cell-content", L(y)), children: p ?? f ?? "" })
     }
   ) : /* @__PURE__ */ j(
     "div",
@@ -83,8 +84,8 @@ const ne = (F) => {
       className: c(
         "table-cell",
         n.cardClasses.cellClassName,
-        L(w),
-        I(k),
+        I(w),
+        T(k),
         e?.hideOnMobile && "table-hide-mobile",
         S,
         g
@@ -102,7 +103,7 @@ const ne = (F) => {
             className: c(
               "table-cell-content",
               n.cardClasses.contentClassName,
-              T(y)
+              L(y)
             ),
             children: p ?? f ?? ""
           }
@@ -112,6 +113,6 @@ const ne = (F) => {
   );
 };
 export {
-  ne as default
+  ae as default
 };
 //# sourceMappingURL=TableColumn.js.map

package/components/table/TableColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumn.js","sources":["../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from './shared/getAlignClassName';\nimport getCellContentOverflowClassName from './shared/getCellContentOverflowClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from './shared/resolveTableAria';\nimport type { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableColumnProps = TableHtmlAttributes & {\n    /**\n     * `TableColumn` may be rendered directly inside `TableFooter`.\n     *\n     * In `TableBody`, columns must be rendered inside a row component such as\n     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of\n     * `TableBody` are ignored.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional explicit column key.\n     *\n     * In `TableBody`, this should usually match the `columnKey` of the corresponding\n     * `TableHeaderColumn` for the same data column. If omitted, the cell is matched by its position inside\n     * the current row.\n     *\n     * Position-based matching is mainly useful for simple rows that mirror the header\n     * order exactly. For spanned cells, reordered columns, or more complex row layouts,\n     * prefer an explicit `columnKey`.\n     */\n    columnKey?: string;\n\n    /**\n     * Optional explicit value.\n     */\n    value?: ReactNode;\n\n    /**\n     * Additional classes for this cell only.\n     */\n    className?: string;\n\n    /**\n     * Horizontal alignment override for this cell.\n     */\n    horizontalAlign?: TableHorizontalAlign;\n\n    /**\n     * Vertical alignment override for this cell.\n     */\n    verticalAlign?: TableVerticalAlign;\n\n    /**\n     * Overflow behavior for the cell content wrapper.\n     *\n     * @default 'hidden'\n     */\n    overflow?: TableCellOverflow;\n\n    /**\n     * Number of columns this cell should span.\n     *\n     * Currently used by header and footer-style declarative table sections.\n     */\n    colSpan?: number;\n\n    /**\n     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.\n     *\n     * Useful for interactive cell content such as dropdowns, inputs, or buttons.\n     *\n     * @default false\n     */\n    preventRowClick?: boolean;\n};\n\nconst TableColumn = (props: TableColumnProps) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        horizontalAlign,\n        overflow = 'hidden',\n        preventRowClick = false,\n        value,\n        verticalAlign,\n        ...remainingProps\n    } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const rowContext = useTableRowContext();\n\n    const isBodySection = section === 'body';\n    const isFooterSection = section === 'footer';\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0 ||\n        (!isBodySection && !isFooterSection)\n    ) {\n        return null;\n    }\n\n    if (isBodySection && !rowContext) {\n        return null;\n    }\n\n    const explicitColumnIndex = columnKey !== undefined ? renderContext.columnIndexByKey.get(columnKey) : undefined;\n    const columnIndex = rowContext?.nextColumnIndex(explicitColumnIndex, colSpan) ?? explicitColumnIndex ?? -1;\n\n    if (columnIndex < 0) {\n        return null;\n    }\n\n    const renderColumn = renderContext.columns[columnIndex];\n    const baseColumnStart = columnIndex + 1;\n    const resolvedColumnStart = baseColumnStart + (interactionContext.showSelectionColumn ? 1 : 0);\n    const resolvedHorizontalAlign = horizontalAlign ?? renderColumn?.horizontalAlign;\n    const resolvedVerticalAlign = verticalAlign ?? renderColumn?.verticalAlign;\n\n    const resolvedCellClassName =\n        isBodySection &&\n        rowContext?.rowData &&\n        renderConfigContext.cellClassName?.(\n            rowContext.rowData,\n            renderContext.columnDefinitionsByKey.get(renderColumn?.columnKey ?? columnKey ?? '') ?? {\n                key: renderColumn?.columnKey ?? columnKey ?? String(baseColumnStart),\n                label: renderColumn?.label ?? '',\n                icon: renderColumn?.icon,\n                filter: renderColumn?.filter,\n                hideLabel: renderColumn?.hideLabel,\n                width: renderColumn?.width,\n                minResizeWidth: renderColumn?.minResizeWidth,\n                maxResizeWidth: renderColumn?.maxResizeWidth,\n                draggable: renderColumn?.draggable,\n                resizeable: renderColumn?.resizeable,\n                horizontalAlign: renderColumn?.horizontalAlign,\n                className: undefined,\n                headerClassName: renderColumn?.headerClassName,\n                hideOnMobile: renderColumn?.hideOnMobile,\n                sortable: renderColumn?.sortable,\n            },\n            rowContext.rowIndex,\n            columnIndex\n        );\n\n    const stickyLeftColumns = layoutContext.stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = layoutContext.stickyRightColumnCount ?? 0;\n    const isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\n    const isStickyRightColumn =\n        stickyRightColumns > 0 && baseColumnStart > renderContext.columns.length - stickyRightColumns;\n\n    const mobileLabel =\n        renderColumn?.mobileLabel ?? (typeof renderColumn?.label === 'string' ? renderColumn.label : '');\n\n    const handleCellInteraction = (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    };\n\n    if (isFooterSection) {\n        renderContext.renderDraft.hasFooterCells = true;\n    }\n\n    if (renderConfigContext.isTableView) {\n        return (\n            <div\n                {...remainingProps}\n                className={classNames(\n                    'table-cell',\n                    isFooterSection && 'table-footer-cell',\n                    isBodySection && isStickyLeftColumn && 'table-cell-sticky-left-column',\n                    isBodySection && isStickyRightColumn && 'table-cell-sticky-right-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyRightColumn &&\n                        'table-footer-cell-sticky-right-column',\n                    getHorizontalAlignClassName(resolvedHorizontalAlign),\n                    getVerticalAlignClassName(resolvedVerticalAlign),\n                    renderColumn?.hideOnMobile && 'table-hide-mobile',\n                    resolvedCellClassName,\n                    className\n                )}\n                data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n                role='cell'\n                aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n                aria-colspan={resolveAriaSpan(colSpan)}\n                onClick={preventRowClick ? handleCellInteraction : undefined}\n                onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n                style={{ gridColumn: `${resolvedColumnStart} / span ${colSpan}`, gridRow: '1 / span 1' }}\n            >\n                <div className={classNames('table-cell-content', getCellContentOverflowClassName(overflow))}>\n                    {value ?? children ?? ''}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-cell',\n                renderConfigContext.cardClasses.cellClassName,\n                getHorizontalAlignClassName(resolvedHorizontalAlign),\n                getVerticalAlignClassName(resolvedVerticalAlign),\n                renderColumn?.hideOnMobile && 'table-hide-mobile',\n                resolvedCellClassName,\n                className\n            )}\n            data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n            role='cell'\n            aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n            onClick={preventRowClick ? handleCellInteraction : undefined}\n            onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n        >\n            {mobileLabel && (\n                <div className={classNames('table-cell-label', renderConfigContext.cardClasses.labelClassName)}>\n                    {mobileLabel}\n                </div>\n            )}\n            <div\n                className={classNames(\n                    'table-cell-content',\n                    renderConfigContext.cardClasses.contentClassName,\n                    getCellContentOverflowClassName(overflow)\n                )}\n            >\n                {value ?? children ?? ''}\n            </div>\n        </div>\n    );\n};\n\nexport default TableColumn;\n"],"names":["TableColumn","props","children","className","colSpan","columnKey","horizontalAlign","overflow","preventRowClick","value","verticalAlign","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","rowContext","useTableRowContext","isBodySection","isFooterSection","explicitColumnIndex","columnIndex","renderColumn","baseColumnStart","resolvedColumnStart","resolvedHorizontalAlign","resolvedVerticalAlign","resolvedCellClassName","stickyLeftColumns","stickyRightColumns","isStickyLeftColumn","isStickyRightColumn","mobileLabel","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":";;;;;;;;;;AAgFA,MAAMA,KAAc,CAACC,MAA4B;AAC7C,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHV,GAEEW,IAAsBC,EAAA,GACtBC,IAAgBC,EAAA,GAChBC,IAAqBC,EAAA,GACrBC,IAAgBC,EAAA,GAChBC,IAAUC,EAAA,GACVC,IAAaC,EAAA,GAEbC,IAAgBJ,MAAY,QAC5BK,IAAkBL,MAAY;AAapC,MAVI,CAACN,KACD,CAACF,KACD,CAACI,KACD,CAACE,KACDJ,EAAc,QAAQ,WAAW,KAChC,CAACU,KAAiB,CAACC,KAKpBD,KAAiB,CAACF;AAClB,WAAO;AAGX,QAAMI,IAAsBrB,MAAc,SAAYS,EAAc,iBAAiB,IAAIT,CAAS,IAAI,QAChGsB,IAAcL,GAAY,gBAAgBI,GAAqBtB,CAAO,KAAKsB,KAAuB;AAExG,MAAIC,IAAc;AACd,WAAO;AAGX,QAAMC,IAAed,EAAc,QAAQa,CAAW,GAChDE,IAAkBF,IAAc,GAChCG,IAAsBD,KAAmBb,EAAmB,sBAAsB,IAAI,IACtFe,IAA0BzB,KAAmBsB,GAAc,iBAC3DI,IAAwBtB,KAAiBkB,GAAc,eAEvDK,IACFT,KACAF,GAAY,WACZV,EAAoB;AAAA,IAChBU,EAAW;AAAA,IACXR,EAAc,uBAAuB,IAAIc,GAAc,aAAavB,KAAa,EAAE,KAAK;AAAA,MACpF,KAAKuB,GAAc,aAAavB,KAAa,OAAOwB,CAAe;AAAA,MACnE,OAAOD,GAAc,SAAS;AAAA,MAC9B,MAAMA,GAAc;AAAA,MACpB,QAAQA,GAAc;AAAA,MACtB,WAAWA,GAAc;AAAA,MACzB,OAAOA,GAAc;AAAA,MACrB,gBAAgBA,GAAc;AAAA,MAC9B,gBAAgBA,GAAc;AAAA,MAC9B,WAAWA,GAAc;AAAA,MACzB,YAAYA,GAAc;AAAA,MAC1B,iBAAiBA,GAAc;AAAA,MAC/B,WAAW;AAAA,MACX,iBAAiBA,GAAc;AAAA,MAC/B,cAAcA,GAAc;AAAA,MAC5B,UAAUA,GAAc;AAAA,IAAA;AAAA,IAE5BN,EAAW;AAAA,IACXK;AAAA,EAAA,GAGFO,IAAoBhB,EAAc,yBAAyB,GAC3DiB,IAAqBjB,EAAc,0BAA0B,GAC7DkB,IAAqBF,IAAoB,KAAKL,KAAmBK,GACjEG,IACFF,IAAqB,KAAKN,IAAkBf,EAAc,QAAQ,SAASqB,GAEzEG,IACFV,GAAc,gBAAgB,OAAOA,GAAc,SAAU,WAAWA,EAAa,QAAQ,KAE3FW,IAAwB,CAACC,MAAsE;AACjG,IAAAA,EAAM,gBAAA;AAAA,EACV;AAMA,SAJIf,MACAX,EAAc,YAAY,iBAAiB,KAG3CF,EAAoB,cAEhB,gBAAA6B;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG9B;AAAA,MACJ,WAAW+B;AAAA,QACP;AAAA,QACAjB,KAAmB;AAAA,QACnBD,KAAiBY,KAAsB;AAAA,QACvCZ,KAAiBa,KAAuB;AAAA,QACxCZ,KACIP,EAAc,gBACdkB,KACA;AAAA,QACJX,KACIP,EAAc,gBACdmB,KACA;AAAA,QACJM,EAA4BZ,CAAuB;AAAA,QACnDa,EAA0BZ,CAAqB;AAAA,QAC/CJ,GAAc,gBAAgB;AAAA,QAC9BK;AAAA,QACA9B;AAAA,MAAA;AAAA,MAEJ,eAAayB,GAAc,aAAavB,KAAawB;AAAA,MACrD,MAAK;AAAA,MACL,iBAAegB,EAAoBhB,GAAiBb,EAAmB,mBAAmB;AAAA,MAC1F,gBAAc8B,EAAgB1C,CAAO;AAAA,MACrC,SAASI,IAAkB+B,IAAwB;AAAA,MACnD,WAAW/B,IAAkB+B,IAAwB;AAAA,MACrD,OAAO,EAAE,YAAY,GAAGT,CAAmB,WAAW1B,CAAO,IAAI,SAAS,aAAA;AAAA,MAE1E,UAAA,gBAAAqC,EAAC,OAAA,EAAI,WAAWC,EAAW,sBAAsBK,EAAgCxC,CAAQ,CAAC,GACrF,UAAAE,KAASP,KAAY,GAAA,CAC1B;AAAA,IAAA;AAAA,EAAA,IAMR,gBAAA8C;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGrC;AAAA,MACJ,WAAW+B;AAAA,QACP;AAAA,QACA9B,EAAoB,YAAY;AAAA,QAChC+B,EAA4BZ,CAAuB;AAAA,QACnDa,EAA0BZ,CAAqB;AAAA,QAC/CJ,GAAc,gBAAgB;AAAA,QAC9BK;AAAA,QACA9B;AAAA,MAAA;AAAA,MAEJ,eAAayB,GAAc,aAAavB,KAAawB;AAAA,MACrD,MAAK;AAAA,MACL,iBAAegB,EAAoBhB,GAAiBb,EAAmB,mBAAmB;AAAA,MAC1F,SAASR,IAAkB+B,IAAwB;AAAA,MACnD,WAAW/B,IAAkB+B,IAAwB;AAAA,MAEpD,UAAA;AAAA,QAAAD,KACG,gBAAAG,EAAC,SAAI,WAAWC,EAAW,oBAAoB9B,EAAoB,YAAY,cAAc,GACxF,UAAA0B,EAAA,CACL;AAAA,QAEJ,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC;AAAA,cACP;AAAA,cACA9B,EAAoB,YAAY;AAAA,cAChCmC,EAAgCxC,CAAQ;AAAA,YAAA;AAAA,YAG3C,eAASL,KAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TableColumn.js","sources":["../../../src/components/table/TableColumn.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport { getNodeTextContent } from '../../utils/getNodeTextContent';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from './shared/getAlignClassName';\nimport getCellContentOverflowClassName from './shared/getCellContentOverflowClassName';\nimport { resolveAriaColIndex, resolveAriaSpan } from './shared/resolveTableAria';\nimport type { TableCellOverflow, TableHorizontalAlign, TableHtmlAttributes, TableVerticalAlign } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableColumnProps = TableHtmlAttributes & {\n    /**\n     * `TableColumn` may be rendered directly inside `TableFooter`.\n     *\n     * In `TableBody`, columns must be rendered inside a row component such as\n     * `TableRow` or `TableExpandedRow`. Direct `TableColumn` children of\n     * `TableBody` are ignored.\n     */\n    children?: ReactNode;\n\n    /**\n     * Optional explicit column key.\n     *\n     * In `TableBody`, this should usually match the `columnKey` of the corresponding\n     * `TableHeaderColumn` for the same data column. If omitted, the cell is matched by its position inside\n     * the current row.\n     *\n     * Position-based matching is mainly useful for simple rows that mirror the header\n     * order exactly. For spanned cells, reordered columns, or more complex row layouts,\n     * prefer an explicit `columnKey`.\n     */\n    columnKey?: string;\n\n    /**\n     * Optional explicit value.\n     */\n    value?: ReactNode;\n\n    /**\n     * Additional classes for this cell only.\n     */\n    className?: string;\n\n    /**\n     * Horizontal alignment override for this cell.\n     */\n    horizontalAlign?: TableHorizontalAlign;\n\n    /**\n     * Vertical alignment override for this cell.\n     */\n    verticalAlign?: TableVerticalAlign;\n\n    /**\n     * Overflow behavior for the cell content wrapper.\n     *\n     * @default 'hidden'\n     */\n    overflow?: TableCellOverflow;\n\n    /**\n     * Number of columns this cell should span.\n     *\n     * Currently used by header and footer-style declarative table sections.\n     */\n    colSpan?: number;\n\n    /**\n     * Prevents clicks and keyboard interactions inside this cell from triggering the parent row click handler.\n     *\n     * Useful for interactive cell content such as dropdowns, inputs, or buttons.\n     *\n     * @default false\n     */\n    preventRowClick?: boolean;\n};\n\nconst TableColumn = (props: TableColumnProps) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        horizontalAlign,\n        overflow = 'hidden',\n        preventRowClick = false,\n        value,\n        verticalAlign,\n        ...remainingProps\n    } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext();\n    const renderContext = useOptionalTableRenderContext();\n    const interactionContext = useOptionalTableInteractionContext();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const rowContext = useTableRowContext();\n\n    const isBodySection = section === 'body';\n    const isFooterSection = section === 'footer';\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        !layoutContext ||\n        renderContext.columns.length === 0 ||\n        (!isBodySection && !isFooterSection)\n    ) {\n        return null;\n    }\n\n    if (isBodySection && !rowContext) {\n        return null;\n    }\n\n    const explicitColumnIndex = columnKey !== undefined ? renderContext.columnIndexByKey.get(columnKey) : undefined;\n    const columnIndex = rowContext?.nextColumnIndex(explicitColumnIndex, colSpan) ?? explicitColumnIndex ?? -1;\n\n    if (columnIndex < 0) {\n        return null;\n    }\n\n    const renderColumn = renderContext.columns[columnIndex];\n    const baseColumnStart = columnIndex + 1;\n    const resolvedColumnStart = baseColumnStart + (interactionContext.showSelectionColumn ? 1 : 0);\n    const resolvedHorizontalAlign = horizontalAlign ?? renderColumn?.horizontalAlign;\n    const resolvedVerticalAlign = verticalAlign ?? renderColumn?.verticalAlign;\n\n    const resolvedCellClassName =\n        isBodySection &&\n        rowContext?.rowData &&\n        renderConfigContext.cellClassName?.(\n            rowContext.rowData,\n            renderContext.columnDefinitionsByKey.get(renderColumn?.columnKey ?? columnKey ?? '') ?? {\n                key: renderColumn?.columnKey ?? columnKey ?? String(baseColumnStart),\n                label: renderColumn?.label ?? '',\n                icon: renderColumn?.icon,\n                filter: renderColumn?.filter,\n                hideLabel: renderColumn?.hideLabel,\n                width: renderColumn?.width,\n                minResizeWidth: renderColumn?.minResizeWidth,\n                maxResizeWidth: renderColumn?.maxResizeWidth,\n                draggable: renderColumn?.draggable,\n                resizeable: renderColumn?.resizeable,\n                horizontalAlign: renderColumn?.horizontalAlign,\n                className: undefined,\n                headerClassName: renderColumn?.headerClassName,\n                hideOnMobile: renderColumn?.hideOnMobile,\n                sortable: renderColumn?.sortable,\n            },\n            rowContext.rowIndex,\n            columnIndex\n        );\n\n    const stickyLeftColumns = layoutContext.stickyLeftColumnCount ?? 0;\n    const stickyRightColumns = layoutContext.stickyRightColumnCount ?? 0;\n    const isStickyLeftColumn = stickyLeftColumns > 0 && baseColumnStart <= stickyLeftColumns;\n    const isStickyRightColumn =\n        stickyRightColumns > 0 && baseColumnStart > renderContext.columns.length - stickyRightColumns;\n\n    const mobileLabel = renderColumn?.mobileLabel ?? getNodeTextContent(renderColumn?.label) ?? '';\n\n    const handleCellInteraction = (event: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n    };\n\n    if (isFooterSection) {\n        renderContext.renderDraft.hasFooterCells = true;\n    }\n\n    if (renderConfigContext.isTableView) {\n        return (\n            <div\n                {...remainingProps}\n                className={classNames(\n                    'table-cell',\n                    isFooterSection && 'table-footer-cell',\n                    isBodySection && isStickyLeftColumn && 'table-cell-sticky-left-column',\n                    isBodySection && isStickyRightColumn && 'table-cell-sticky-right-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyLeftColumn &&\n                        'table-footer-cell-sticky-left-column',\n                    isFooterSection &&\n                        layoutContext.stickyFooter &&\n                        isStickyRightColumn &&\n                        'table-footer-cell-sticky-right-column',\n                    getHorizontalAlignClassName(resolvedHorizontalAlign),\n                    getVerticalAlignClassName(resolvedVerticalAlign),\n                    renderColumn?.hideOnMobile && 'table-hide-mobile',\n                    resolvedCellClassName,\n                    className\n                )}\n                data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n                role='cell'\n                aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n                aria-colspan={resolveAriaSpan(colSpan)}\n                onClick={preventRowClick ? handleCellInteraction : undefined}\n                onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n                style={{ gridColumn: `${resolvedColumnStart} / span ${colSpan}`, gridRow: '1 / span 1' }}\n            >\n                <div className={classNames('table-cell-content', getCellContentOverflowClassName(overflow))}>\n                    {value ?? children ?? ''}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-cell',\n                renderConfigContext.cardClasses.cellClassName,\n                getHorizontalAlignClassName(resolvedHorizontalAlign),\n                getVerticalAlignClassName(resolvedVerticalAlign),\n                renderColumn?.hideOnMobile && 'table-hide-mobile',\n                resolvedCellClassName,\n                className\n            )}\n            data-column={renderColumn?.columnKey ?? columnKey ?? baseColumnStart}\n            role='cell'\n            aria-colindex={resolveAriaColIndex(baseColumnStart, interactionContext.showSelectionColumn)}\n            onClick={preventRowClick ? handleCellInteraction : undefined}\n            onKeyDown={preventRowClick ? handleCellInteraction : undefined}\n        >\n            {mobileLabel && (\n                <div className={classNames('table-cell-label', renderConfigContext.cardClasses.labelClassName)}>\n                    {mobileLabel}\n                </div>\n            )}\n            <div\n                className={classNames(\n                    'table-cell-content',\n                    renderConfigContext.cardClasses.contentClassName,\n                    getCellContentOverflowClassName(overflow)\n                )}\n            >\n                {value ?? children ?? ''}\n            </div>\n        </div>\n    );\n};\n\nexport default TableColumn;\n"],"names":["TableColumn","props","children","className","colSpan","columnKey","horizontalAlign","overflow","preventRowClick","value","verticalAlign","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","rowContext","useTableRowContext","isBodySection","isFooterSection","explicitColumnIndex","columnIndex","renderColumn","baseColumnStart","resolvedColumnStart","resolvedHorizontalAlign","resolvedVerticalAlign","resolvedCellClassName","stickyLeftColumns","stickyRightColumns","isStickyLeftColumn","isStickyRightColumn","mobileLabel","getNodeTextContent","handleCellInteraction","event","jsx","classNames","getHorizontalAlignClassName","getVerticalAlignClassName","resolveAriaColIndex","resolveAriaSpan","getCellContentOverflowClassName","jsxs"],"mappings":"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"}