@frontify/fondue 11.0.0 → 11.1.0

package/dist/components/Table/TableCell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.es.js","sources":["../../../src/components/Table/TableCell.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useTableCell, useTableSelectionCheckbox } from '@react-aria/table';\nimport { mergeProps } from '@react-aria/utils';\nimport { TableState } from '@react-stately/table';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\n\nexport enum TableCellType {\n    Default = 'Default',\n    Checkbox = 'Checkbox',\n}\n\nexport type TableCellProps = {\n    cell: any;\n    state: TableState<any>;\n    type?: TableCellType;\n};\n\nexport const TableCell: FC<TableCellProps> = ({ cell, state, type = TableCellType.Default }) => {\n    const ref = useRef<HTMLTableCellElement | null>(null);\n    const { gridCellProps } = useTableCell({ node: cell }, state, ref);\n    const { checkboxProps } = useTableSelectionCheckbox({ key: cell.parentKey }, state);\n    const inputRef = useRef(null);\n    const {\n        inputProps: { checked },\n    } = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    if (type === TableCellType.Checkbox) {\n        const { key } = cell;\n\n        return (\n            <td\n                {...gridCellProps}\n                ref={ref}\n                className={merge([\n                    'tw-pl-8 tw-py-4 tw-pr-4 tw-border-l-4',\n                    checked ? 'tw-border-violet-60' : 'tw-border-transparent',\n                ])}\n                data-test-id=\"table-select-cell\"\n            >\n                <Checkbox\n                    value={key}\n                    ariaLabel={cell['aria-label'] || key}\n                    state={checked ? CheckboxState.Checked : CheckboxState.Unchecked}\n                />\n            </td>\n        );\n    }\n\n    return (\n        <td\n            {...mergeProps(gridCellProps, focusProps)}\n            ref={ref}\n            className={merge([\n                'tw-p-4 tw-font-normal tw-text-xs focus:tw-outline-none',\n                checked ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n        >\n            {cell.rendered}\n        </td>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYY,IAAA,sBAAA,MACE,GAAA,UAAA,WACC,EAAA,WAAA,YAFH,IAAA,KAAA,CAAA,CAAA;AAWL,MAAM,IAAgC,CAAC,EAAE,SAAM,UAAO,UAAO,gBAA4B;AACtF,QAAA,IAAM,EAAoC,IAAI,GAC9C,EAAE,qBAAkB,EAAa,EAAE,MAAM,EAAK,GAAG,GAAO,CAAG,GAC3D,EAAE,qBAAkB,EAA0B,EAAE,KAAK,EAAK,aAAa,CAAK,GAC5E,IAAW,EAAO,IAAI,GACtB;AAAA,IACF,YAAY,EAAE;AAAA,MACd,EAAY,GAAe,EAAe,CAAa,GAAG,CAAQ,GAChE,EAAE,mBAAgB,kBAAe,EAAa;AAEpD,MAAI,MAAS,YAAwB;AACjC,UAAM,EAAE,WAAQ;AAEhB,WACK,kBAAA,cAAA,MAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,EAAM;AAAA,QACb;AAAA,QACA,IAAU,wBAAwB;AAAA,MAAA,CACrC;AAAA,MACD,gBAAa;AAAA,IAAA,GAEZ,kBAAA,cAAA,GAAA;AAAA,MACG,OAAO;AAAA,MACP,WAAW,EAAK,iBAAiB;AAAA,MACjC,OAAO,IAAU,EAAc,UAAU,EAAc;AAAA,IAC3D,CAAA,CACJ;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG,EAAW,GAAe,CAAU;AAAA,IACxC;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAU,yCAAyC;AAAA,MACnD,KAAkB;AAAA,IAAA,CACrB;AAAA,EAAA,GAEA,EAAK,QACV;AAER;"}
+{"version":3,"file":"TableCell.es.js","sources":["../../../src/components/Table/TableCell.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox as CheckboxComponent, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\nimport React, { Key, useRef } from 'react';\nimport { SelectionMode } from '..';\n\nexport enum TableCellType {\n    Default = 'Default',\n    Checkbox = 'Checkbox',\n}\n\nexport type TableCellProps = {\n    cell: any;\n    selectionMode: string;\n    type?: TableCellType;\n    isChecked?: boolean;\n    selectedRows: Key[];\n    setSelectedRows?: (ids?: Key[]) => void;\n};\n\nexport const TableCell = ({\n    cell,\n    selectionMode,\n    type = TableCellType.Default,\n    isChecked = false,\n    selectedRows,\n    setSelectedRows,\n}: TableCellProps) => {\n    const ref = useRef<HTMLTableCellElement | null>(null);\n\n    if (type === TableCellType.Checkbox) {\n        const { key } = cell;\n        const handleChange = () => {\n            if (!setSelectedRows) {\n                return;\n            }\n\n            if (isChecked) {\n                const filteredRows = selectedRows.filter((row) => row !== cell.parentKey);\n                setSelectedRows(filteredRows);\n                return;\n            }\n\n            const rowsToSelect =\n                selectionMode === SelectionMode.SingleSelect ? [cell.parentKey] : [...selectedRows, cell.parentKey];\n            setSelectedRows(rowsToSelect);\n        };\n\n        return (\n            <td\n                role=\"cell\"\n                ref={ref}\n                className={merge([\n                    'tw-pl-8 tw-py-4 tw-pr-4 tw-relative after:tw-absolute after:tw-left-0 after:tw-top-[-1px] after:tw-bottom-[-1px] after:tw-w-1',\n                    isChecked ? 'after:tw-bg-box-selected-strong' : 'after:tw-bg-transparent',\n                ])}\n                data-test-id=\"table-select-cell\"\n            >\n                <CheckboxComponent\n                    value={key}\n                    ariaLabel={cell['aria-label'] || key}\n                    state={isChecked ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={handleChange}\n                />\n            </td>\n        );\n    }\n\n    return (\n        <td\n            role=\"cell\"\n            ref={ref}\n            className={merge([\n                'tw-p-4 tw-font-normal tw-text-xs focus:tw-outline-none',\n                isChecked ? 'tw-text-black-100 dark:tw-text-white' : 'tw-text-black-80 dark:tw-text-black-20',\n            ])}\n        >\n            {cell.rendered}\n        </td>\n    );\n};\n"],"names":["CheckboxComponent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMY,IAAA,sBAAA,MACE,GAAA,UAAA,WACC,EAAA,WAAA,YAFH,IAAA,KAAA,CAAA,CAAA;AAcL,MAAM,KAAY,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,UAAO;AAAA,EACP,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,MACkB;AACZ,QAAA,IAAM,EAAoC,IAAI;AAEpD,MAAI,MAAS,YAAwB;AACjC,UAAM,EAAE,WAAQ,GACV,IAAe,MAAM;AACvB,UAAI,CAAC;AACD;AAGJ,UAAI,GAAW;AACX,cAAM,IAAe,EAAa,OAAO,CAAC,MAAQ,MAAQ,EAAK,SAAS;AACxE,UAAgB,CAAY;AAC5B;AAAA,MACJ;AAEA,YAAM,IACF,MAAkB,EAAc,eAAe,CAAC,EAAK,SAAS,IAAI,CAAC,GAAG,GAAc,EAAK,SAAS;AACtG,QAAgB,CAAY;AAAA,IAAA;AAGhC,WACK,kBAAA,cAAA,MAAA;AAAA,MACG,MAAK;AAAA,MACL;AAAA,MACA,WAAW,EAAM;AAAA,QACb;AAAA,QACA,IAAY,oCAAoC;AAAA,MAAA,CACnD;AAAA,MACD,gBAAa;AAAA,IAAA,GAEZ,kBAAA,cAAAA,GAAA;AAAA,MACG,OAAO;AAAA,MACP,WAAW,EAAK,iBAAiB;AAAA,MACjC,OAAO,IAAY,EAAc,UAAU,EAAc;AAAA,MACzD,UAAU;AAAA,IACd,CAAA,CACJ;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACG,MAAK;AAAA,IACL;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAY,yCAAyC;AAAA,IAAA,CACxD;AAAA,EAAA,GAEA,EAAK,QACV;AAER;"}

package/dist/components/Table/TableColumnHeader.d.ts

@@ -1,12 +1,17 @@
-import { TableState } from '@react-stately/table';
-import { FC } from 'react';
+import { Key } from 'react';
+import { SortDirection } from '..';
 export declare enum TableColumnHeaderType {
     Default = "Default",
     SelectAll = "SelectAll"
 }
 export declare type TableColumnHeaderProps = {
     column: any;
-    state: TableState<any>;
     type?: TableColumnHeaderType;
+    rowIds: Key[];
+    sortDirection?: SortDirection;
+    selectionMode: string;
+    isColumnSorted?: boolean;
+    handleSortChange: (column: Key, direction: SortDirection) => void;
+    setSelectedRows?: (ids?: Key[]) => void;
 };
-export declare const TableColumnHeader: FC<TableColumnHeaderProps>;
+export declare const TableColumnHeader: ({ column, type, rowIds, sortDirection, selectionMode, isColumnSorted, handleSortChange, setSelectedRows, }: TableColumnHeaderProps) => JSX.Element;

package/dist/components/Table/TableColumnHeader.es.js

@@ -1,14 +1,8 @@
-import { CheckboxState as l, Checkbox as z } from "../Checkbox/Checkbox.es.js";
-import { IconSize as N } from "../../foundation/Icon/IconSize.es.js";
-import { useCheckbox as M } from "@react-aria/checkbox";
-import { useFocusRing as R } from "@react-aria/focus";
-import { useTableColumnHeader as T, useTableSelectAllCheckbox as F } from "@react-aria/table";
-import { mergeProps as H } from "@react-aria/utils";
-import { VisuallyHidden as U } from "@react-aria/visually-hidden";
-import { useToggleState as K } from "@react-stately/toggle";
-import { FOCUS_STYLE_INSET as L } from "../../utilities/focusStyle.es.js";
-import { merge as f } from "../../utilities/merge.es.js";
-import t, { useState as V, useRef as b, useEffect as _, useCallback as B, cloneElement as O } from "react";
+import { CheckboxState as s, Checkbox as C } from "../Checkbox/Checkbox.es.js";
+import { IconSize as D } from "../../foundation/Icon/IconSize.es.js";
+import { FOCUS_VISIBLE_STYLE as N } from "../../utilities/focusStyle.es.js";
+import { merge as y } from "../../utilities/merge.es.js";
+import t, { useState as w, useRef as z, useEffect as L, cloneElement as U } from "react";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -81,7 +75,7 @@ import "../../foundation/Icon/Generated/IconArrowAlignVerticalCentre16.es.js";
 import "../../foundation/Icon/Generated/IconArrowAlignVerticalCentre20.es.js";
 import "../../foundation/Icon/Generated/IconArrowAlignVerticalCentre24.es.js";
 import "../../foundation/Icon/Generated/IconArrowAlignVerticalCentre32.es.js";
-import g from "../../foundation/Icon/Generated/IconArrowBidirectional.es.js";
+import f from "../../foundation/Icon/Generated/IconArrowBidirectional.es.js";
 import "../../foundation/Icon/Generated/IconArrowBidirectional12.es.js";
 import "../../foundation/Icon/Generated/IconArrowBidirectional16.es.js";
 import "../../foundation/Icon/Generated/IconArrowBidirectional20.es.js";
@@ -99,7 +93,7 @@ import "../../foundation/Icon/Generated/IconArrowCircleUp16.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleUp20.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleUp24.es.js";
 import "../../foundation/Icon/Generated/IconArrowCircleUp32.es.js";
-import Y from "../../foundation/Icon/Generated/IconArrowDown.es.js";
+import B from "../../foundation/Icon/Generated/IconArrowDown.es.js";
 import "../../foundation/Icon/Generated/IconArrowDown12.es.js";
 import "../../foundation/Icon/Generated/IconArrowDown16.es.js";
 import "../../foundation/Icon/Generated/IconArrowDown20.es.js";
@@ -189,7 +183,7 @@ import "../../foundation/Icon/Generated/IconArrowSync16.es.js";
 import "../../foundation/Icon/Generated/IconArrowSync20.es.js";
 import "../../foundation/Icon/Generated/IconArrowSync24.es.js";
 import "../../foundation/Icon/Generated/IconArrowSync32.es.js";
-import j from "../../foundation/Icon/Generated/IconArrowUp.es.js";
+import _ from "../../foundation/Icon/Generated/IconArrowUp.es.js";
 import "../../foundation/Icon/Generated/IconArrowUp12.es.js";
 import "../../foundation/Icon/Generated/IconArrowUp16.es.js";
 import "../../foundation/Icon/Generated/IconArrowUp20.es.js";
@@ -1634,55 +1628,121 @@ import "../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../foundation/Icon/IconsMap.es.js";
-var q = /* @__PURE__ */ ((r) => (r.Default = "Default", r.SelectAll = "SelectAll", r))(q || {});
-const uy = ({
+import "framer-motion";
+import "@react-aria/accordion";
+import "@react-aria/focus";
+import "@react-aria/utils";
+import "@react-stately/collections";
+import "@react-stately/tree";
+import "../FieldsetHeader/FieldsetHeader.es.js";
+import "../ActionMenu/Aria/AriaList.es.js";
+import "../MenuItem/MenuItem.es.js";
+import "../Button/Button.es.js";
+import "@react-aria/link";
+import "react-popper";
+import "react-dom";
+import "@react-aria/menu";
+import "@react-aria/button";
+import "@react-aria/overlays";
+import "@react-stately/menu";
+import "tinycolor2";
+import "../Badge/helpers.es.js";
+import "@react-aria/breadcrumbs";
+import "../ButtonGroup/ButtonGroup.es.js";
+import "@react-aria/checkbox";
+import "@react-stately/checkbox";
+import "@react-aria/interactions";
+import "@react-aria/radio";
+import "@react-aria/visually-hidden";
+import "@react-stately/radio";
+import "../ColorPicker/ColorPicker.es2.js";
+import "@react-aria/listbox";
+import "@react-aria/select";
+import "@react-stately/select";
+import "react-colorful";
+import "@react-aria/aria-modal-polyfill";
+import "@react-stately/overlays";
+import "../Flyout/Overlay.es.js";
+import "date-fns";
+import "react-datepicker";
+import "../DatePicker/DatePicker.es2.js";
+import "../DatePicker/DatePickerTrigger.es.js";
+import "../FormControl/FormControl.es.js";
+import "../../foundation/Pattern/PatternSound.es.js";
+import "../../foundation/Pattern/PatternImagery.es.js";
+import "../../foundation/Pattern/PatternTypography.es.js";
+import "../../foundation/Pattern/PatternDigitalAssets.es.js";
+import "../LinkChooser/LinkChooser.es.js";
+import "../Modal/Modal.es.js";
+import "react-dnd";
+import "../../utilities/dnd/DndWrapper.es.js";
+import "react-dnd-html5-backend";
+import "@udecode/plate";
+import "../RichTextEditor/plugins/checkboxListPlugin/createCheckboxListPlugin.es.js";
+import "../RichTextEditor/plugins/checkboxListPlugin/ui/CheckboxListToolbarButton.es.js";
+import "../../styles.es.js";
+import "../../node_modules/@udecode/plate-core/dist/index.es.es.js";
+import "slate";
+import "../RichTextEditor/context/DesignTokensContext.es.js";
+import "slate-react";
+import "../RichTextEditor/plugins/linkChooserPlugin/createLinkChooserPlugin.es.js";
+import { SortDirection as o, SelectionMode as F } from "./Table.es.js";
+import "react-textarea-autosize";
+import "../Tree/utils/mocks.es.js";
+var M = /* @__PURE__ */ ((r) => (r.Default = "Default", r.SelectAll = "SelectAll", r))(M || {});
+const iy = ({
   column: r,
-  state: o,
-  type: x = "Default"
+  type: u = "Default",
+  rowIds: d,
+  sortDirection: i,
+  selectionMode: b,
+  isColumnSorted: m = !1,
+  handleSortChange: h,
+  setSelectedRows: p
 }) => {
-  var a, u;
   const {
-    key: i,
+    key: e,
     rendered: k,
-    props: { allowsSorting: S }
-  } = r, [h, n] = V(/* @__PURE__ */ t.createElement(g, null)), m = b(null), { columnHeaderProps: c } = T({ node: r }, o, m), p = ((a = o.sortDescriptor) == null ? void 0 : a.column) === i, s = (u = o.sortDescriptor) == null ? void 0 : u.direction, { isFocusVisible: E, focusProps: C } = R();
-  if (_(() => {
-    n(p ? s === "descending" ? /* @__PURE__ */ t.createElement(Y, null) : /* @__PURE__ */ t.createElement(j, null) : /* @__PURE__ */ t.createElement(g, null));
-  }, [p, s]), x === "SelectAll") {
-    const { checkboxProps: w } = F(o), {
-      selectionManager: { selectedKeys: A, selectionMode: d }
-    } = o, D = b(null), v = K(w), { inputProps: I } = M(w, v, D), P = { ...c, onClick: () => o.selectionManager.toggleSelectAll() }, e = A.size, y = B(() => e === o.collection.size ? l.Checked : e > 0 ? l.Mixed : l.Unchecked, [e]);
+    props: { allowsSorting: x }
+  } = r, [g, l] = w(/* @__PURE__ */ t.createElement(f, null)), [n, E] = w(!1), a = z(null), S = i === o.Ascending ? o.Descending : o.Ascending;
+  if (L(() => {
+    l(m ? i === o.Descending ? /* @__PURE__ */ t.createElement(B, null) : /* @__PURE__ */ t.createElement(_, null) : /* @__PURE__ */ t.createElement(f, null));
+  }, [m, i]), u === "SelectAll") {
+    const c = {
+      "aria-label": "Select all",
+      scope: "col"
+    }, v = n ? s.Checked : s.Unchecked, A = () => {
+      !p || (p(n ? [] : d), E((I) => !I));
+    };
     return /* @__PURE__ */ t.createElement("th", {
-      ...P,
-      ref: m,
-      className: f([
-        "tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none",
-        d === "multiple" && "tw-cursor-pointer"
-      ]),
+      ...c,
+      ref: a,
+      className: "tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none",
       "data-test-id": "table-select-cell"
-    }, d === "single" ? /* @__PURE__ */ t.createElement(U, null, I["aria-label"]) : /* @__PURE__ */ t.createElement(z, {
-      value: i,
-      ariaLabel: i,
-      state: y()
+    }, b === F.SingleSelect ? /* @__PURE__ */ t.createElement("span", {
+      className: "tw-sr-only"
+    }, c["aria-label"]) : /* @__PURE__ */ t.createElement(C, {
+      value: e,
+      ariaLabel: e,
+      state: v,
+      onChange: A
     }));
   }
   return /* @__PURE__ */ t.createElement("th", {
-    ...H(c, C),
-    ref: m,
-    className: f([
-      "tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-px-4 tw-py-3 tw-outline-none tw-cursor-pointer tw-group",
-      E && L
-    ]),
-    "data-test-id": "table-column"
-  }, /* @__PURE__ */ t.createElement("div", {
-    className: "tw-flex tw-gap-x-1 tw-items-center"
-  }, k, S && /* @__PURE__ */ t.createElement("span", {
+    ref: a,
+    className: "tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-px-4 tw-py-3 tw-outline-none tw-cursor-pointer tw-group focus-visible:bg-violet-90",
+    "data-test-id": "table-column",
+    scope: "col",
+    onClick: () => h(r.key, S)
+  }, /* @__PURE__ */ t.createElement("button", {
+    className: y(["tw-flex tw-gap-x-1 tw-items-center", N])
+  }, k, x && /* @__PURE__ */ t.createElement("span", {
     "aria-hidden": "true",
-    className: p ? "tw-text-violet-50" : "tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white"
-  }, O(h, { size: N.Size12 }))));
+    className: m ? "tw-text-violet-50" : "tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white"
+  }, U(g, { size: D.Size12 }))));
 };
 export {
-  uy as TableColumnHeader,
-  q as TableColumnHeaderType
+  iy as TableColumnHeader,
+  M as TableColumnHeaderType
 };
 //# sourceMappingURL=TableColumnHeader.es.js.map

package/dist/components/Table/TableColumnHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnHeader.es.js","sources":["../../../src/components/Table/TableColumnHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useTableColumnHeader, useTableSelectAllCheckbox } from '@react-aria/table';\nimport { mergeProps } from '@react-aria/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { TableState } from '@react-stately/table';\nimport { useToggleState } from '@react-stately/toggle';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, cloneElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@foundation/Icon';\n\nexport enum TableColumnHeaderType {\n    Default = 'Default',\n    SelectAll = 'SelectAll',\n}\n\nexport type TableColumnHeaderProps = {\n    column: any;\n    state: TableState<any>;\n    type?: TableColumnHeaderType;\n};\n\nexport const TableColumnHeader: FC<TableColumnHeaderProps> = ({\n    column,\n    state,\n    type = TableColumnHeaderType.Default,\n}) => {\n    const {\n        key,\n        rendered,\n        props: { allowsSorting },\n    } = column;\n    const [icon, setIcon] = useState(<IconArrowBidirectional />);\n    const ref = useRef<HTMLTableCellElement | null>(null);\n    const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref);\n    const isSortedColumn = state.sortDescriptor?.column === key;\n    const sortDirection = state.sortDescriptor?.direction;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    useEffect(() => {\n        if (isSortedColumn) {\n            setIcon(sortDirection === 'descending' ? <IconArrowDown /> : <IconArrowUp />);\n        } else {\n            setIcon(<IconArrowBidirectional />);\n        }\n    }, [isSortedColumn, sortDirection]);\n\n    if (type === TableColumnHeaderType.SelectAll) {\n        const { checkboxProps } = useTableSelectAllCheckbox(state);\n        const {\n            selectionManager: { selectedKeys, selectionMode },\n        } = state;\n        const inputRef = useRef(null);\n        const toggleState = useToggleState(checkboxProps);\n        const { inputProps } = useCheckbox(checkboxProps, toggleState, inputRef);\n        const headerProps = { ...columnHeaderProps, onClick: () => state.selectionManager.toggleSelectAll() };\n        const selectedKeyCount = selectedKeys.size;\n\n        const getCheckboxState = useCallback(() => {\n            if (selectedKeyCount === state.collection.size) {\n                return CheckboxState.Checked;\n            }\n            if (selectedKeyCount > 0) {\n                return CheckboxState.Mixed;\n            }\n            return CheckboxState.Unchecked;\n        }, [selectedKeyCount]);\n\n        return (\n            <th\n                {...headerProps}\n                ref={ref}\n                className={merge([\n                    'tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none',\n                    selectionMode === 'multiple' && 'tw-cursor-pointer',\n                ])}\n                data-test-id=\"table-select-cell\"\n            >\n                {selectionMode === 'single' ? (\n                    <VisuallyHidden>{inputProps['aria-label']}</VisuallyHidden>\n                ) : (\n                    <Checkbox value={key} ariaLabel={key} state={getCheckboxState()} />\n                )}\n            </th>\n        );\n    }\n\n    return (\n        <th\n            {...mergeProps(columnHeaderProps, focusProps)}\n            ref={ref}\n            className={merge([\n                'tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-px-4 tw-py-3 tw-outline-none tw-cursor-pointer tw-group',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n            data-test-id=\"table-column\"\n        >\n            <div className=\"tw-flex tw-gap-x-1 tw-items-center\">\n                {rendered}\n                {allowsSorting && (\n                    <span\n                        aria-hidden=\"true\"\n                        className={\n                            isSortedColumn\n                                ? 'tw-text-violet-50'\n                                : 'tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white'\n                        }\n                    >\n                        {cloneElement(icon, { size: IconSize.Size12 })}\n                    </span>\n                )}\n            </div>\n        </th>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeY,IAAA,sBAAA,MACE,GAAA,UAAA,WACE,EAAA,YAAA,aAFJ,IAAA,KAAA,CAAA,CAAA;AAWL,MAAM,KAAgD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA,UAAO;AAAA,MACL;;AACI,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO,EAAE;AAAA,MACT,GACE,CAAC,GAAM,KAAW,EAAS,kBAAA,cAAC,OAAuB,CAAE,GACrD,IAAM,EAAoC,IAAI,GAC9C,EAAE,yBAAsB,EAAqB,EAAE,MAAM,EAAO,GAAG,GAAO,CAAG,GACzE,IAAiB,QAAM,mBAAN,kBAAsB,YAAW,GAClD,IAAgB,OAAM,mBAAN,kBAAsB,WACtC,EAAE,mBAAgB,kBAAe,EAAa;AAUpD,MARA,EAAU,MAAM;AACZ,IACI,EADJ,AAAI,IACQ,MAAkB,eAAe,kBAAA,cAAC,OAAc,IAAK,kBAAA,cAAC,OAAY,IAElE,kBAAA,cAAC,OAAuB,CAF4C;AAAA,EAGhF,GACD,CAAC,GAAgB,CAAa,CAAC,GAE9B,MAAS,aAAiC;AACpC,UAAA,EAAE,qBAAkB,EAA0B,CAAK,GACnD;AAAA,MACF,kBAAkB,EAAE,iBAAc;AAAA,QAClC,GACE,IAAW,EAAO,IAAI,GACtB,IAAc,EAAe,CAAa,GAC1C,EAAE,kBAAe,EAAY,GAAe,GAAa,CAAQ,GACjE,IAAc,EAAE,GAAG,GAAmB,SAAS,MAAM,EAAM,iBAAiB,gBAAA,KAC5E,IAAmB,EAAa,MAEhC,IAAmB,EAAY,MAC7B,MAAqB,EAAM,WAAW,OAC/B,EAAc,UAErB,IAAmB,IACZ,EAAc,QAElB,EAAc,WACtB,CAAC,CAAgB,CAAC;AAErB,WACK,kBAAA,cAAA,MAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,EAAM;AAAA,QACb;AAAA,QACA,MAAkB,cAAc;AAAA,MAAA,CACnC;AAAA,MACD,gBAAa;AAAA,IAAA,GAEZ,MAAkB,WACf,kBAAA,cAAC,SAAgB,EAAW,aAAc,IAEzC,kBAAA,cAAA,GAAA;AAAA,MAAS,OAAO;AAAA,MAAK,WAAW;AAAA,MAAK,OAAO,EAAiB;AAAA,IAAG,CAAA,CAEzE;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG,EAAW,GAAmB,CAAU;AAAA,IAC5C;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAkB;AAAA,IAAA,CACrB;AAAA,IACD,gBAAa;AAAA,EAAA,GAEZ,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EACV,GAAA,GACA,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,eAAY;AAAA,IACZ,WACI,IACM,sBACA;AAAA,EAAA,GAGT,EAAa,GAAM,EAAE,MAAM,EAAS,OAAQ,CAAA,CACjD,CAER,CACJ;AAER;"}
+{"version":3,"file":"TableColumnHeader.es.js","sources":["../../../src/components/Table/TableColumnHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Key, cloneElement, useEffect, useRef, useState } from 'react';\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@foundation/Icon';\nimport { SelectionMode, SortDirection } from '..';\n\nexport enum TableColumnHeaderType {\n    Default = 'Default',\n    SelectAll = 'SelectAll',\n}\n\nexport type TableColumnHeaderProps = {\n    column: any;\n    type?: TableColumnHeaderType;\n    rowIds: Key[];\n    sortDirection?: SortDirection;\n    selectionMode: string;\n    isColumnSorted?: boolean;\n    handleSortChange: (column: Key, direction: SortDirection) => void;\n    setSelectedRows?: (ids?: Key[]) => void;\n};\n\nexport const TableColumnHeader = ({\n    column,\n    type = TableColumnHeaderType.Default,\n    rowIds,\n    sortDirection,\n    selectionMode,\n    isColumnSorted = false,\n    handleSortChange,\n    setSelectedRows,\n}: TableColumnHeaderProps) => {\n    const {\n        key,\n        rendered,\n        props: { allowsSorting },\n    } = column;\n    const [icon, setIcon] = useState(<IconArrowBidirectional />);\n    const [isChecked, setIsChecked] = useState(false);\n    const ref = useRef<HTMLTableCellElement | null>(null);\n    const inverseSortDirection =\n        sortDirection === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;\n\n    useEffect(() => {\n        if (isColumnSorted) {\n            setIcon(sortDirection === SortDirection.Descending ? <IconArrowDown /> : <IconArrowUp />);\n        } else {\n            setIcon(<IconArrowBidirectional />);\n        }\n    }, [isColumnSorted, sortDirection]);\n\n    if (type === TableColumnHeaderType.SelectAll) {\n        const ariaProps = {\n            'aria-label': 'Select all',\n            scope: 'col',\n        };\n\n        const checkboxState = isChecked ? CheckboxState.Checked : CheckboxState.Unchecked;\n\n        const handleChange = () => {\n            if (!setSelectedRows) {\n                return;\n            }\n\n            if (isChecked) {\n                setSelectedRows([]);\n            } else {\n                setSelectedRows(rowIds);\n            }\n\n            setIsChecked((checked) => !checked);\n        };\n\n        return (\n            <th\n                {...ariaProps}\n                ref={ref}\n                className=\"tw-pl-8 tw-py-3 tw-pr-4 tw-w-16 tw-border-l-4 tw-border-transparent tw-group tw-outline-none\"\n                data-test-id=\"table-select-cell\"\n            >\n                {selectionMode === SelectionMode.SingleSelect ? (\n                    <span className=\"tw-sr-only\">{ariaProps['aria-label']}</span>\n                ) : (\n                    <Checkbox value={key} ariaLabel={key} state={checkboxState} onChange={handleChange} />\n                )}\n            </th>\n        );\n    }\n\n    return (\n        <th\n            ref={ref}\n            className=\"tw-text-xs tw-font-medium tw-text-black-100 dark:tw-text-white tw-px-4 tw-py-3 tw-outline-none tw-cursor-pointer tw-group focus-visible:bg-violet-90\"\n            data-test-id=\"table-column\"\n            scope=\"col\"\n            onClick={() => handleSortChange(column.key, inverseSortDirection)}\n        >\n            <button className={merge(['tw-flex tw-gap-x-1 tw-items-center', FOCUS_VISIBLE_STYLE])}>\n                {rendered}\n                {allowsSorting && (\n                    <span\n                        aria-hidden=\"true\"\n                        className={\n                            isColumnSorted\n                                ? 'tw-text-violet-50'\n                                : 'tw-text-black-40 dark:tw-text-black-60 group-hover:tw-text-black-100 dark:group-hover:tw-text-white'\n                        }\n                    >\n                        {cloneElement(icon, { size: IconSize.Size12 })}\n                    </span>\n                )}\n            </button>\n        </th>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASY,IAAA,sBAAA,MACE,GAAA,UAAA,WACE,EAAA,YAAA,aAFJ,IAAA,KAAA,CAAA,CAAA;AAgBL,MAAM,KAAoB,CAAC;AAAA,EAC9B;AAAA,EACA,UAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,MAC0B;AACpB,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO,EAAE;AAAA,MACT,GACE,CAAC,GAAM,KAAW,EAAS,kBAAA,cAAC,OAAuB,CAAE,GACrD,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAM,EAAoC,IAAI,GAC9C,IACF,MAAkB,EAAc,YAAY,EAAc,aAAa,EAAc;AAUzF,MARA,EAAU,MAAM;AACZ,IACY,EADZ,AAAI,IACQ,MAAkB,EAAc,aAAa,kBAAA,cAAC,OAAc,IAAK,kBAAA,cAAC,OAAY,IAE9E,kBAAA,cAAC,OAAuB,CAFwD;AAAA,EAG5F,GACD,CAAC,GAAgB,CAAa,CAAC,GAE9B,MAAS,aAAiC;AAC1C,UAAM,IAAY;AAAA,MACd,cAAc;AAAA,MACd,OAAO;AAAA,IAAA,GAGL,IAAgB,IAAY,EAAc,UAAU,EAAc,WAElE,IAAe,MAAM;AACvB,MAAI,CAAC,KAIL,CACI,EADJ,AAAI,IACgB,CAAE,IAEF,CAFE,GAKT,EAAA,CAAC,MAAY,CAAC,CAAO;AAAA,IAAA;AAGtC,WACK,kBAAA,cAAA,MAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,WAAU;AAAA,MACV,gBAAa;AAAA,IAAA,GAEZ,MAAkB,EAAc,eAC5B,kBAAA,cAAA,QAAA;AAAA,MAAK,WAAU;AAAA,IAAA,GAAc,EAAU,aAAc,IAErD,kBAAA,cAAA,GAAA;AAAA,MAAS,OAAO;AAAA,MAAK,WAAW;AAAA,MAAK,OAAO;AAAA,MAAe,UAAU;AAAA,IAAc,CAAA,CAE5F;AAAA,EAER;AAEA,SACK,kBAAA,cAAA,MAAA;AAAA,IACG;AAAA,IACA,WAAU;AAAA,IACV,gBAAa;AAAA,IACb,OAAM;AAAA,IACN,SAAS,MAAM,EAAiB,EAAO,KAAK,CAAoB;AAAA,EAAA,GAE/D,kBAAA,cAAA,UAAA;AAAA,IAAO,WAAW,EAAM,CAAC,sCAAsC,CAAmB,CAAC;AAAA,EAC/E,GAAA,GACA,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,eAAY;AAAA,IACZ,WACI,IACM,sBACA;AAAA,EAAA,GAGT,EAAa,GAAM,EAAE,MAAM,EAAS,OAAQ,CAAA,CACjD,CAER,CACJ;AAER;"}

package/dist/components/Table/TableHeaderRow.d.ts

@@ -1,7 +1,6 @@
-import { TableState } from '@react-stately/table';
-import { FC } from 'react';
-export declare type TableHeaderRowProps = {
-    item: any;
-    state: TableState<any>;
+import { ReactNode } from 'react';
+declare type TableHeaderRowProps = {
+    children: ReactNode;
 };
-export declare const TableHeaderRow: FC<TableHeaderRowProps>;
+export declare const TableHeaderRow: ({ children }: TableHeaderRowProps) => JSX.Element;
+export {};

package/dist/components/Table/TableHeaderRow.es.js

@@ -1,14 +1,13 @@
-import { useTableHeaderRow as s } from "@react-aria/table";
-import n, { useRef as c } from "react";
-const p = ({ item: r, state: o, children: t }) => {
-  const e = c(null), { rowProps: a } = s({ node: r }, o, e);
-  return /* @__PURE__ */ n.createElement("tr", {
-    ...a,
+import r, { useRef as o } from "react";
+const a = ({ children: t }) => {
+  const e = o(null);
+  return /* @__PURE__ */ r.createElement("tr", {
+    role: "row",
     ref: e,
-    className: "tw-py-4 tw-px-8"
+    className: "tw-py-4 tw-px-8 tw-sticky tw-top-0 tw-bg-base tw-z-10"
   }, t);
 };
 export {
-  p as TableHeaderRow
+  a as TableHeaderRow
 };
 //# sourceMappingURL=TableHeaderRow.es.js.map

package/dist/components/Table/TableHeaderRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderRow.es.js","sources":["../../../src/components/Table/TableHeaderRow.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useTableHeaderRow } from '@react-aria/table';\nimport { TableState } from '@react-stately/table';\nimport React, { FC, useRef } from 'react';\n\nexport type TableHeaderRowProps = {\n    item: any;\n    state: TableState<any>;\n};\n\nexport const TableHeaderRow: FC<TableHeaderRowProps> = ({ item, state, children }) => {\n    const ref = useRef<HTMLTableRowElement | null>(null);\n    const { rowProps } = useTableHeaderRow({ node: item }, state, ref);\n\n    return (\n        <tr {...rowProps} ref={ref} className=\"tw-py-4 tw-px-8\">\n            {children}\n        </tr>\n    );\n};\n"],"names":[],"mappings":";;AAUO,MAAM,IAA0C,CAAC,EAAE,SAAM,UAAO,kBAAe;AAC5E,QAAA,IAAM,EAAmC,IAAI,GAC7C,EAAE,gBAAa,EAAkB,EAAE,MAAM,EAAK,GAAG,GAAO,CAAG;AAEjE,SACK,kBAAA,cAAA,MAAA;AAAA,IAAI,GAAG;AAAA,IAAU;AAAA,IAAU,WAAU;AAAA,EAAA,GACjC,CACL;AAER;"}
+{"version":3,"file":"TableHeaderRow.es.js","sources":["../../../src/components/Table/TableHeaderRow.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\n\ntype TableHeaderRowProps = {\n    children: ReactNode;\n};\n\nexport const TableHeaderRow = ({ children }: TableHeaderRowProps) => {\n    const ref = useRef<HTMLTableRowElement | null>(null);\n\n    return (\n        <tr role=\"row\" ref={ref} className=\"tw-py-4 tw-px-8 tw-sticky tw-top-0 tw-bg-base tw-z-10\">\n            {children}\n        </tr>\n    );\n};\n"],"names":[],"mappings":";AAMa,MAAA,IAAiB,CAAC,EAAE,kBAAoC;AAC3D,QAAA,IAAM,EAAmC,IAAI;AAEnD,SACK,kBAAA,cAAA,MAAA;AAAA,IAAG,MAAK;AAAA,IAAM;AAAA,IAAU,WAAU;AAAA,EAAA,GAC9B,CACL;AAER;"}

package/dist/components/Table/TableRow.d.ts

@@ -1,7 +1,6 @@
-import { TableState } from '@react-stately/table';
-import { FC } from 'react';
+import { ReactNode } from 'react';
 export declare type TableRowProps = {
-    item: any;
-    state: TableState<any>;
+    isSelected?: boolean;
+    children: ReactNode;
 };
-export declare const TableRow: FC<TableRowProps>;
+export declare const TableRow: ({ isSelected, children }: TableRowProps) => JSX.Element;

package/dist/components/Table/TableRow.es.js

@@ -1,22 +1,17 @@
-import { useFocusRing as c } from "@react-aria/focus";
-import { useTableRow as b } from "@react-aria/table";
-import { mergeProps as l } from "@react-aria/utils";
-import { FOCUS_STYLE_INSET as i } from "../../utilities/focusStyle.es.js";
-import { merge as p } from "../../utilities/merge.es.js";
-import w, { useRef as f } from "react";
-const T = ({ item: o, state: e, children: t }) => {
-  const r = f(null), { rowProps: s } = b({ node: o }, e, r), { isFocusVisible: a, focusProps: m } = c();
-  return /* @__PURE__ */ w.createElement("tr", {
-    ...l(s, m),
-    ref: r,
-    className: p([
-      "tw-relative tw-border-t tw-border-black-10 hover:tw-bg-black-0 dark:tw-border-black-95 dark:hover:tw-bg-black-95",
-      a && i
-    ]),
+import o, { useRef as l } from "react";
+const c = ({ isSelected: e = !1, children: r }) => {
+  const t = l(null), a = {
+    "aria-selected": e,
+    role: "row"
+  };
+  return /* @__PURE__ */ o.createElement("tr", {
+    ...a,
+    ref: t,
+    className: "tw-relative tw-border-t tw-border-black-10 hover:tw-bg-black-0 dark:tw-border-black-95 dark:hover:tw-bg-black-95",
     "data-test-id": "table-row"
-  }, t);
+  }, r);
 };
 export {
-  T as TableRow
+  c as TableRow
 };
 //# sourceMappingURL=TableRow.es.js.map

package/dist/components/Table/TableRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.es.js","sources":["../../../src/components/Table/TableRow.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useFocusRing } from '@react-aria/focus';\nimport { useTableRow } from '@react-aria/table';\nimport { mergeProps } from '@react-aria/utils';\nimport { TableState } from '@react-stately/table';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, useRef } from 'react';\n\nexport type TableRowProps = {\n    item: any;\n    state: TableState<any>;\n};\n\nexport const TableRow: FC<TableRowProps> = ({ item, state, children }) => {\n    const ref = useRef<HTMLTableRowElement | null>(null);\n    const { rowProps } = useTableRow({ node: item }, state, ref);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <tr\n            {...mergeProps(rowProps, focusProps)}\n            ref={ref}\n            className={merge([\n                'tw-relative tw-border-t tw-border-black-10 hover:tw-bg-black-0 dark:tw-border-black-95 dark:hover:tw-bg-black-95',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n            data-test-id=\"table-row\"\n        >\n            {children}\n        </tr>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,IAA8B,CAAC,EAAE,SAAM,UAAO,kBAAe;AAChE,QAAA,IAAM,EAAmC,IAAI,GAC7C,EAAE,gBAAa,EAAY,EAAE,MAAM,EAAK,GAAG,GAAO,CAAG,GACrD,EAAE,mBAAgB,kBAAe,EAAa;AAEpD,SACK,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG,EAAW,GAAU,CAAU;AAAA,IACnC;AAAA,IACA,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAkB;AAAA,IAAA,CACrB;AAAA,IACD,gBAAa;AAAA,EAAA,GAEZ,CACL;AAER;"}
+{"version":3,"file":"TableRow.es.js","sources":["../../../src/components/Table/TableRow.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\n\nexport type TableRowProps = {\n    isSelected?: boolean;\n    children: ReactNode;\n};\n\nexport const TableRow = ({ isSelected = false, children }: TableRowProps) => {\n    const ref = useRef<HTMLTableRowElement | null>(null);\n\n    const ariaProps = {\n        'aria-selected': isSelected,\n        role: 'row',\n    };\n\n    return (\n        <tr\n            {...ariaProps}\n            ref={ref}\n            className=\"tw-relative tw-border-t tw-border-black-10 hover:tw-bg-black-0 dark:tw-border-black-95 dark:hover:tw-bg-black-95\"\n            data-test-id=\"table-row\"\n        >\n            {children}\n        </tr>\n    );\n};\n"],"names":[],"mappings":";AAOO,MAAM,IAAW,CAAC,EAAE,gBAAa,IAAO,kBAA8B;AACnE,QAAA,IAAM,EAAmC,IAAI,GAE7C,IAAY;AAAA,IACd,iBAAiB;AAAA,IACjB,MAAM;AAAA,EAAA;AAGV,SACK,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG;AAAA,IACJ;AAAA,IACA,WAAU;AAAA,IACV,gBAAa;AAAA,EAAA,GAEZ,CACL;AAER;"}

package/dist/components/Tree/utils/mocks.es.js

@@ -1686,9 +1686,7 @@ import "slate";
 import "../../RichTextEditor/context/DesignTokensContext.es.js";
 import "slate-react";
 import "../../RichTextEditor/plugins/linkChooserPlugin/createLinkChooserPlugin.es.js";
-import "@react-aria/table";
 import "@react-stately/table";
-import "@react-stately/toggle";
 import "react-textarea-autosize";
 r.Small, r.Small, r.Small, r.Small, r.Small;
 const a = [

package/dist/components/Tree/utils/mocks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mocks.es.js","sources":["../../../../src/components/Tree/utils/mocks.tsx"],"sourcesContent":["import { MenuItemContentSize } from '@components/MenuItem';\nimport { IconDocument, IconFaceExtraHappy, IconFolder, IconPlus, IconSize } from '@foundation/Icon';\nimport React from 'react';\nimport { TreeFlatListItem, TreeNodeItem } from '@components/Tree';\nimport { DraggableItem } from '@utilities/dnd';\nimport { Badge } from '../../..';\nimport { Button, ButtonSize } from '@components/Button';\n\nexport const mockActionMenuBlocks = [\n    {\n        id: 'dropdownBlock',\n        ariaLabel: 'Dropdown block',\n        menuItems: [\n            {\n                id: 'dropdown',\n                size: MenuItemContentSize.Small,\n                title: 'Dropdown',\n                onClick: () => console.log('dropdown'),\n            },\n        ],\n    },\n    {\n        id: 'actionsBlock',\n        ariaLabel: 'Item Actions',\n        menuItems: [\n            {\n                id: 'rename',\n                size: MenuItemContentSize.Small,\n                title: 'Rename',\n                onClick: () => console.log('rename'),\n            },\n            {\n                id: 'duplicate',\n                size: MenuItemContentSize.Small,\n                title: 'Duplicate',\n                onClick: () => console.log('duplicate'),\n            },\n            {\n                id: 'unpublish',\n                size: MenuItemContentSize.Small,\n                title: 'Unpublish',\n                onClick: () => console.log('unpublish'),\n            },\n        ],\n    },\n    {\n        id: 'deleteBlock',\n        ariaLabel: 'Delete Block',\n        menuItems: [\n            {\n                id: 'delete',\n                size: MenuItemContentSize.Small,\n                title: 'Delete',\n                onClick: () => console.log('delete'),\n            },\n        ],\n    },\n];\n\nconst uncategorizedPagesNodes = [\n    {\n        id: '1-1-1',\n        parentId: '1-1',\n        sort: 1,\n        name: 'Home',\n        label: 'Page',\n        value: 'https://weare.frontify.com/page/1',\n        icon: <IconDocument size={IconSize.Size16} />,\n    },\n    {\n        id: '1-1-2',\n        parentId: '1-1',\n        name: 'Members',\n        label: 'Page',\n        value: 'https://weare.frontify.com/page/2',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n    },\n    {\n        id: '1-1-3',\n        parentId: '1-1',\n        name: 'About us',\n        label: 'Page',\n        value: 'https://weare.frontify.com/page/3',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n        editable: true,\n    },\n];\n\nconst testCategoryNodes = [\n    {\n        id: '1-2-1',\n        parentId: '1-2',\n        name: 'Home Category',\n        label: 'Home Page',\n        value: 'https://weare.frontify.com/page/4',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n        badge: <Badge icon={<IconFaceExtraHappy size={IconSize.Size16} />}></Badge>,\n        editable: true,\n    },\n    {\n        id: '1-2-2',\n        parentId: '1-2',\n        name: 'Members Category',\n        label: 'Members Page',\n        value: 'https://weare.frontify.com/page/5',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n    },\n    {\n        id: '1-2-3',\n        parentId: '1-2',\n        name: 'About us Category',\n        label: 'About Us Page',\n        value: 'https://weare.frontify.com/page/6',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n        badge: <Badge>Hello, I am a badge</Badge>,\n    },\n];\n\ntype mockNodeType = () => DraggableItem<TreeFlatListItem>[];\n\nexport const mockNodesFlat: mockNodeType = () => [\n    {\n        id: '1',\n        name: 'Design System Testing',\n        label: 'Document',\n        value: 'https://weare.frontify.com/document/1',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [<Button key={'Design System Testing'} size={ButtonSize.Small} icon={<IconPlus></IconPlus>} />],\n        parentId: null,\n        sort: 1,\n        editable: true,\n    },\n    {\n        id: '1-1',\n        name: 'Uncategorizes Pages',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [\n            <Button\n                key={'Design System Testing Uncategorizes Pages'}\n                size={ButtonSize.Small}\n                icon={<IconPlus></IconPlus>}\n            />,\n        ],\n        parentId: '1',\n        sort: 1,\n    },\n    ...uncategorizedPagesNodes,\n    {\n        id: '1-2',\n        parentId: '1',\n        name: 'Test Category',\n        label: 'Document',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [\n            <Button\n                key={'Design System Testing Uncategorizes Pages Test'}\n                size={ButtonSize.Small}\n                icon={<IconPlus></IconPlus>}\n            />,\n        ],\n        value: 'https://weare.frontify.com/document/923#/test',\n        sort: null,\n        badge: <IconFaceExtraHappy size={IconSize.Size16} />,\n    },\n    ...testCategoryNodes,\n    {\n        id: '1-3',\n        name: 'Category Without Subitems',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [\n            <Button\n                key={'Design System Testing Uncategorizes Pages Test Subitems'}\n                size={ButtonSize.Small}\n                icon={<IconPlus></IconPlus>}\n            />,\n        ],\n        parentId: '1',\n        value: 'https://weare.frontify.com/document/923#/test',\n        sort: null,\n    },\n];\n\nexport const mockNodesTree: DraggableItem<TreeNodeItem>[] = [\n    {\n        id: '1',\n        name: 'Design System Testing',\n        label: 'Document',\n        value: 'https://weare.frontify.com/document/1',\n        icon: <IconFolder size={IconSize.Size16} />,\n        parentId: null,\n        sort: 1,\n        nodes: [\n            {\n                id: '1-1',\n                name: 'Uncategorizes Pages',\n                icon: <IconFolder size={IconSize.Size16} />,\n                parentId: '1',\n                sort: 1,\n                nodes: [...uncategorizedPagesNodes],\n            },\n            {\n                id: '1-2',\n                parentId: '1',\n                name: 'Test Category',\n                label: 'Document',\n                icon: <IconFolder size={IconSize.Size16} />,\n                value: 'https://weare.frontify.com/document/923#/test',\n                sort: null,\n                nodes: [...testCategoryNodes],\n            },\n        ],\n    },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQoC,AAOd,EAAoB,OAYpB,EAAoB,OAMpB,EAAoB,OAMpB,EAAoB,OAYpB,EAAoB;AAQ1C,MAAM,IAA0B;AAAA,EAC5B;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,EAC/C;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,EACV;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AACJ,GAEM,IAAoB;AAAA,EACtB;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,OAAQ,kBAAA,cAAA,GAAA;AAAA,MAAM,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAmB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CAAI;AAAA,IACnE,UAAU;AAAA,EACd;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,EACV;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,OAAQ,kBAAA,cAAA,GAAA,MAAM,qBAAmB;AAAA,EACrC;AACJ;AAkE4D,AAM7C,GAAiB,EAAS,QAOlB,GAAiB,EAAS,QAG1B,CAAC,GAAG,CAAuB,GAO3B,GAAiB,EAAS,QAG1B,CAAC,GAAG,CAAiB;"}
+{"version":3,"file":"mocks.es.js","sources":["../../../../src/components/Tree/utils/mocks.tsx"],"sourcesContent":["import { MenuItemContentSize } from '@components/MenuItem';\nimport { IconDocument, IconFaceExtraHappy, IconFolder, IconPlus, IconSize } from '@foundation/Icon';\nimport React from 'react';\nimport { TreeFlatListItem, TreeNodeItem } from '@components/Tree';\nimport { DraggableItem } from '@utilities/dnd';\nimport { Badge } from '../../..';\nimport { Button, ButtonSize } from '@components/Button';\n\nexport const mockActionMenuBlocks = [\n    {\n        id: 'dropdownBlock',\n        ariaLabel: 'Dropdown block',\n        menuItems: [\n            {\n                id: 'dropdown',\n                size: MenuItemContentSize.Small,\n                title: 'Dropdown',\n                onClick: () => console.log('dropdown'),\n            },\n        ],\n    },\n    {\n        id: 'actionsBlock',\n        ariaLabel: 'Item Actions',\n        menuItems: [\n            {\n                id: 'rename',\n                size: MenuItemContentSize.Small,\n                title: 'Rename',\n                onClick: () => console.log('rename'),\n            },\n            {\n                id: 'duplicate',\n                size: MenuItemContentSize.Small,\n                title: 'Duplicate',\n                onClick: () => console.log('duplicate'),\n            },\n            {\n                id: 'unpublish',\n                size: MenuItemContentSize.Small,\n                title: 'Unpublish',\n                onClick: () => console.log('unpublish'),\n            },\n        ],\n    },\n    {\n        id: 'deleteBlock',\n        ariaLabel: 'Delete Block',\n        menuItems: [\n            {\n                id: 'delete',\n                size: MenuItemContentSize.Small,\n                title: 'Delete',\n                onClick: () => console.log('delete'),\n            },\n        ],\n    },\n];\n\nconst uncategorizedPagesNodes = [\n    {\n        id: '1-1-1',\n        parentId: '1-1',\n        sort: 1,\n        name: 'Home',\n        label: 'Page',\n        value: 'https://weare.frontify.com/page/1',\n        icon: <IconDocument size={IconSize.Size16} />,\n    },\n    {\n        id: '1-1-2',\n        parentId: '1-1',\n        name: 'Members',\n        label: 'Page',\n        value: 'https://weare.frontify.com/page/2',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n    },\n    {\n        id: '1-1-3',\n        parentId: '1-1',\n        name: 'About us',\n        label: 'Page',\n        value: 'https://weare.frontify.com/page/3',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n        editable: true,\n    },\n];\n\nconst testCategoryNodes = [\n    {\n        id: '1-2-1',\n        parentId: '1-2',\n        name: 'Home Category',\n        label: 'Home Page',\n        value: 'https://weare.frontify.com/page/4',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n        badge: <Badge icon={<IconFaceExtraHappy size={IconSize.Size16} />}></Badge>,\n        editable: true,\n    },\n    {\n        id: '1-2-2',\n        parentId: '1-2',\n        name: 'Members Category',\n        label: 'Members Page',\n        value: 'https://weare.frontify.com/page/5',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n    },\n    {\n        id: '1-2-3',\n        parentId: '1-2',\n        name: 'About us Category',\n        label: 'About Us Page',\n        value: 'https://weare.frontify.com/page/6',\n        icon: <IconDocument size={IconSize.Size16} />,\n        sort: null,\n        badge: <Badge>Hello, I am a badge</Badge>,\n    },\n];\n\ntype mockNodeType = () => DraggableItem<TreeFlatListItem>[];\n\nexport const mockNodesFlat: mockNodeType = () => [\n    {\n        id: '1',\n        name: 'Design System Testing',\n        label: 'Document',\n        value: 'https://weare.frontify.com/document/1',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [<Button key={'Design System Testing'} size={ButtonSize.Small} icon={<IconPlus></IconPlus>} />],\n        parentId: null,\n        sort: 1,\n        editable: true,\n    },\n    {\n        id: '1-1',\n        name: 'Uncategorizes Pages',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [\n            <Button\n                key={'Design System Testing Uncategorizes Pages'}\n                size={ButtonSize.Small}\n                icon={<IconPlus></IconPlus>}\n            />,\n        ],\n        parentId: '1',\n        sort: 1,\n    },\n    ...uncategorizedPagesNodes,\n    {\n        id: '1-2',\n        parentId: '1',\n        name: 'Test Category',\n        label: 'Document',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [\n            <Button\n                key={'Design System Testing Uncategorizes Pages Test'}\n                size={ButtonSize.Small}\n                icon={<IconPlus></IconPlus>}\n            />,\n        ],\n        value: 'https://weare.frontify.com/document/923#/test',\n        sort: null,\n        badge: <IconFaceExtraHappy size={IconSize.Size16} />,\n    },\n    ...testCategoryNodes,\n    {\n        id: '1-3',\n        name: 'Category Without Subitems',\n        icon: <IconFolder size={IconSize.Size16} />,\n        actions: [\n            <Button\n                key={'Design System Testing Uncategorizes Pages Test Subitems'}\n                size={ButtonSize.Small}\n                icon={<IconPlus></IconPlus>}\n            />,\n        ],\n        parentId: '1',\n        value: 'https://weare.frontify.com/document/923#/test',\n        sort: null,\n    },\n];\n\nexport const mockNodesTree: DraggableItem<TreeNodeItem>[] = [\n    {\n        id: '1',\n        name: 'Design System Testing',\n        label: 'Document',\n        value: 'https://weare.frontify.com/document/1',\n        icon: <IconFolder size={IconSize.Size16} />,\n        parentId: null,\n        sort: 1,\n        nodes: [\n            {\n                id: '1-1',\n                name: 'Uncategorizes Pages',\n                icon: <IconFolder size={IconSize.Size16} />,\n                parentId: '1',\n                sort: 1,\n                nodes: [...uncategorizedPagesNodes],\n            },\n            {\n                id: '1-2',\n                parentId: '1',\n                name: 'Test Category',\n                label: 'Document',\n                icon: <IconFolder size={IconSize.Size16} />,\n                value: 'https://weare.frontify.com/document/923#/test',\n                sort: null,\n                nodes: [...testCategoryNodes],\n            },\n        ],\n    },\n];\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQoC,AAOd,EAAoB,OAYpB,EAAoB,OAMpB,EAAoB,OAMpB,EAAoB,OAYpB,EAAoB;AAQ1C,MAAM,IAA0B;AAAA,EAC5B;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,EAC/C;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,EACV;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,UAAU;AAAA,EACd;AACJ,GAEM,IAAoB;AAAA,EACtB;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,OAAQ,kBAAA,cAAA,GAAA;AAAA,MAAM,MAAO,kBAAA,cAAA,GAAA;AAAA,QAAmB,MAAM,EAAS;AAAA,MAAA,CAAQ;AAAA,IAAA,CAAI;AAAA,IACnE,UAAU;AAAA,EACd;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,EACV;AAAA,EACA;AAAA,IACI,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAa,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,IAC3C,MAAM;AAAA,IACN,OAAQ,kBAAA,cAAA,GAAA,MAAM,qBAAmB;AAAA,EACrC;AACJ;AAkE4D,AAM7C,GAAiB,EAAS,QAOlB,GAAiB,EAAS,QAG1B,CAAC,GAAG,CAAuB,GAO3B,GAAiB,EAAS,QAG1B,CAAC,GAAG,CAAiB;"}