@webiny/admin-ui 6.4.12-beta.5 → 6.5.0-beta.0

package/CodeEditor/CodeEditorPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    }\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;AACJ;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}
+{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    },\n    scrollBeyondLastLine: false,\n    wordWrap: \"on\"\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;IACA,sBAAsB;IACtB,UAAU;AACd;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}

package/ColorPicker/ColorPicker.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { ColorPickerPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type ColorPickerProps = ColorPickerPrimitiveProps & FormComponentProps;
-declare const ColorPicker: (({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+declare const DecoratableIconPicker: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+declare const ColorPicker: typeof DecoratableIconPicker & {
+    original: typeof DecoratableIconPicker;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+    original: typeof DecoratableIconPicker & {
+        original: typeof DecoratableIconPicker;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: ColorPickerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableIconPicker & {
+        original: typeof DecoratableIconPicker;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/ColorPicker/primitives/ColorPickerPrimitive.d.ts

@@ -43,21 +43,22 @@ interface ColorPickerPrimitiveProps extends Omit<React.HTMLAttributes<HTMLDivEle
      */
     invalid?: InputPrimitiveProps["invalid"];
 }
-declare const ColorPickerPrimitive: (({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+declare const DecoratableColorPickerPrimitive: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+declare const ColorPickerPrimitive: typeof DecoratableColorPickerPrimitive & {
+    original: typeof DecoratableColorPickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableColorPickerPrimitive & {
+        original: typeof DecoratableColorPickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ align, disabled, invalid, size, variant, value, onOpenChange, onChange, onChangeComplete, ...props }: ColorPickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableColorPickerPrimitive & {
+        original: typeof DecoratableColorPickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/Command/Command.d.ts

@@ -1,13 +1,15 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
+import { Empty, Group, Input, Item, List, Loading, Separator } from "./components/index.js";
 type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
-declare const Command: (({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => React.JSX.Element) & {
-    Empty: (props: import("./components/Empty.js").EmptyProps) => React.JSX.Element;
-    Group: ({ className, ...props }: import("./components/Group.js").GroupProps) => React.JSX.Element;
-    Input: ({ inputElement, size, inputRef, ...props }: import("./components/Input.js").InputProps) => React.JSX.Element;
-    Item: ({ className, children, selected, ...props }: import("./components/Item.js").ItemProps) => React.JSX.Element;
-    List: ({ className, ...props }: import("./components/List.js").ListProps) => React.JSX.Element;
-    Loading: (props: import("./components/Loading.js").LoadingProps) => React.JSX.Element;
-    Separator: (props: import("./components/Separator.js").SeparatorProps) => React.JSX.Element;
+declare const CommandBase: ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => React.JSX.Element;
+declare const Command: typeof CommandBase & {
+    Empty: typeof Empty;
+    Group: typeof Group;
+    Input: typeof Input;
+    Item: typeof Item;
+    List: typeof List;
+    Loading: typeof Loading;
+    Separator: typeof Separator;
 };
 export { Command, type CommandProps };

package/DataList/DataListModal.d.ts

@@ -2,16 +2,19 @@ import React from "react";
 interface DataListModalContentProps {
     children: React.ReactNode;
 }
+declare const DataListModalContent: ({ children }: DataListModalContentProps) => React.JSX.Element;
 interface DataListModalTriggerProps {
     "data-testid"?: string;
     icon?: React.ReactElement;
 }
+declare const DataListModalTrigger: ({ icon, ...props }: DataListModalTriggerProps) => React.JSX.Element;
 interface DataListModalProps {
     trigger: React.ReactElement;
     content: React.ReactElement;
 }
-declare const DataListModal: ((props: DataListModalProps) => React.JSX.Element | null) & {
-    Trigger: ({ icon, ...props }: DataListModalTriggerProps) => React.JSX.Element;
-    Content: ({ children }: DataListModalContentProps) => React.JSX.Element;
+declare const BaseDataListModal: (props: DataListModalProps) => React.JSX.Element | null;
+declare const DataListModal: typeof BaseDataListModal & {
+    Trigger: typeof DataListModalTrigger;
+    Content: typeof DataListModalContent;
 };
 export { DataListModal, type DataListModalProps, type DataListModalContentProps, type DataListModalTriggerProps };

package/DataTable/DataTable.d.ts

@@ -1,15 +1,5 @@
 import React from "react";
-import type { ColumnSort, ColumnVisibilityState, OnChangeFn, Row, RowData, SortingState } from "@tanstack/react-table";
-declare const features: {
-    columnResizingFeature: import("@tanstack/table-core").TableFeature;
-    columnSizingFeature: import("@tanstack/table-core").TableFeature;
-    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
-    rowSelectionFeature: import("@tanstack/table-core").TableFeature;
-    rowSortingFeature: import("@tanstack/table-core").TableFeature;
-    sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
-    coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
-};
-type Features = typeof features;
+import type { ColumnSort, OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
 interface DataTableColumn<T> {
     header?: string | number | React.JSX.Element;
     cell?: (row: T) => string | number | React.JSX.Element | null;
@@ -28,13 +18,13 @@ type DataTableDefaultData = {
     id: string;
     $selectable?: boolean;
 };
-type DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;
+type DataTableRow<T> = Row<DataTableDefaultData & T>;
 type DataTableSorting = SortingState;
 type DataTableColumnSort = ColumnSort;
 type OnDataTableSortingChange = OnChangeFn<DataTableSorting>;
-type DataTableColumnVisibility = ColumnVisibilityState;
+type DataTableColumnVisibility = VisibilityState;
 type OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;
-interface DataTableProps<TEntry extends RowData> {
+interface DataTableProps<TEntry> {
     /**
      * Show or hide borders.
      */
@@ -62,7 +52,7 @@ interface DataTableProps<TEntry extends RowData> {
     /**
      * Callback that is called to determine if the row is selectable.
      */
-    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;
+    isRowSelectable?: (row: Row<TEntry>) => boolean;
     /**
      * Render the skeleton state while data are loading.
      */
@@ -96,23 +86,24 @@ interface DataTableProps<TEntry extends RowData> {
      */
     stickyHeader?: boolean;
 }
-declare const DataTable: (<T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element) & {
-    original: <T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element;
+declare const DecoratableDataTable: <T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element;
+declare const DataTable: typeof DecoratableDataTable & {
+    original: typeof DecoratableDataTable;
     originalName: string;
     displayName: string;
 } & {
-    original: (<T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element) & {
-        original: <T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element;
+    original: typeof DecoratableDataTable & {
+        original: typeof DecoratableDataTable;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(<T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element) & {
-        original: <T extends Record<string, any> & DataTableDefaultData>({ bordered, canSelectAllRows, columnVisibility, columns: initialColumns, data: initialData, initialSorting, isRowSelectable, loading, onColumnVisibilityChange, onSelectRow, onSortingChange, onToggleRow, selectedRows, sorting, stickyHeader }: DataTableProps<T>) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableDataTable & {
+        original: typeof DecoratableDataTable;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { DataTable, type Features, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };
+export { DataTable, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };

package/DataTable/DataTable.js

@@ -1,19 +1,10 @@
 import react, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createCoreRowModel, createSortedRowModel, flexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
+import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { CheckboxPrimitive } from "../Checkbox/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { Table } from "../Table/index.js";
 import { ColumnSorter, ColumnsVisibility } from "./components/index.js";
 import { cn, makeDecoratable } from "../utils.js";
-const features = tableFeatures({
-    columnResizingFeature: columnResizingFeature,
-    columnSizingFeature: columnSizingFeature,
-    columnVisibilityFeature: columnVisibilityFeature,
-    rowSelectionFeature: rowSelectionFeature,
-    rowSortingFeature: rowSortingFeature,
-    sortedRowModel: createSortedRowModel(),
-    coreRowModel: createCoreRowModel()
-});
 const defineColumns = (columns, options)=>{
     const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;
     return useMemo(()=>{
@@ -29,7 +20,7 @@ const defineColumns = (columns, options)=>{
                 header: ()=>header,
                 cell: (props)=>{
                     if (cell && "function" == typeof cell) return cell(props.row.original);
-                    else return props.getValue() ? String(props.getValue()) : null;
+                    return props.getValue() ? String(props.getValue()) : null;
                 },
                 enableSorting,
                 meta: {
@@ -150,7 +141,7 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
             ...Object.keys(newSelection).filter((x)=>!(x in rowSelection))
         ];
         if (1 === toggledRows.length && "function" == typeof onToggleRow) return void onToggleRow(data[parseInt(toggledRows[0])]);
-        else if ("function" == typeof onSelectRow) {
+        if ("function" == typeof onSelectRow) {
             const selection = Object.keys(newSelection).map((key)=>data[parseInt(key)]);
             onSelectRow(selection);
         }
@@ -167,8 +158,7 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         onToggleRow,
         loading
     });
-    const table = useTable({
-        features: features,
+    const table = useReactTable({
         columnResizeMode: "onChange",
         columns,
         data,
@@ -177,6 +167,8 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         enableRowSelection: isRowSelectable,
         enableSorting: !!onSortingChange,
         enableSortingRemoval: false,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
         manualSorting: true,
         onColumnVisibilityChange,
         onRowSelectionChange,

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    ColumnVisibilityState,\n    OnChangeFn,\n    Row,\n    RowData,\n    RowSelectionState,\n    SortingState\n} from \"@tanstack/react-table\";\nimport {\n    columnResizingFeature,\n    columnSizingFeature,\n    columnVisibilityFeature,\n    createCoreRowModel,\n    createSortedRowModel,\n    flexRender,\n    rowSelectionFeature,\n    rowSortingFeature,\n    tableFeatures,\n    useTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\nconst features = tableFeatures({\n    columnResizingFeature,\n    columnSizingFeature,\n    columnVisibilityFeature,\n    rowSelectionFeature,\n    rowSortingFeature,\n    sortedRowModel: createSortedRowModel(),\n    coreRowModel: createCoreRowModel()\n});\n\ntype Features = typeof features;\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | React.JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | React.JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Should truncate?\n     */\n    truncate?: boolean;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = ColumnVisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry extends RowData> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry extends RowData> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T extends RowData>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<Features, T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<Features, T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                truncate = true,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className,\n                    truncate\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T extends RowData> {\n    cell: Cell<Features, T, unknown>;\n    getColumnWidth: (column: Column<Features, T>) => number;\n}\n\nconst TableCell = <T extends RowData>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T extends RowData> {\n    selected: boolean;\n    cells: Cell<Features, T, unknown>[];\n    getColumnWidth: (column: Column<Features, T>) => number;\n}\n\nconst TableRow = <T extends RowData>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useTable<typeof features, T>({\n        features,\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<Features, T>): number => {\n            // Non-resizable columns (e.g. row-selection, actions) keep their fixed size.\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            /**\n             * Resizable columns share the space left after the fixed columns, proportionally to\n             * their own size. This makes the table always fill the full container width — even when\n             * columns are hidden — so trailing content (e.g. the columns-visibility cog) stays\n             * flush right instead of drifting left as columns are removed.\n             */\n            const visibleColumns = table.getVisibleLeafColumns();\n            const fixedTotal = visibleColumns\n                .filter(col => !col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n            const resizableTotal = visibleColumns\n                .filter(col => col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n\n            if (resizableTotal === 0) {\n                return column.getSize();\n            }\n\n            const available = Math.max(tableWidth - fixedTotal, 0);\n\n            return Math.ceil((column.getSize() * available) / resizableTotal);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div\n                                                    className={cn({\n                                                        \"w-full overflow-hidden whitespace-nowrap\": true,\n                                                        truncate: !isLastCell\n                                                    })}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type Features,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"names":["features","tableFeatures","columnResizingFeature","columnSizingFeature","columnVisibilityFeature","rowSelectionFeature","rowSortingFeature","createSortedRowModel","createCoreRowModel","defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","useMemo","columnsList","Object","key","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","truncate","id","size","props","String","columnsDefs","firstColumn","isSelectable","CheckboxPrimitive","e","React","value","cn","Skeleton","typedMemo","memo","TableCell","getColumnWidth","width","Table","flexRender","MemoTableCell","TableRow","selected","cells","MemoTableRow","emptyArray","Array","DecoratableDataTable","bordered","columnVisibility","initialColumns","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","useRef","tableWidth","setTableWidth","useState","data","useEffect","updateElementWidth","window","rowSelection","acc","item","recordIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","x","parseInt","selection","tableSorting","table","useTable","useCallback","visibleColumns","fixedTotal","col","total","resizableTotal","available","Math","tableRows","headerGroup","index","isLastCell","ColumnSorter","ColumnsVisibility","row","DataTable","makeDecoratable"],"mappings":"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"}
+{"version":3,"file":"DataTable/DataTable.js","sources":["../../src/DataTable/DataTable.tsx"],"sourcesContent":["import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n    Cell,\n    Column,\n    ColumnDef,\n    ColumnSort,\n    OnChangeFn,\n    Row,\n    RowSelectionState,\n    SortingState,\n    VisibilityState\n} from \"@tanstack/react-table\";\nimport {\n    flexRender,\n    getCoreRowModel,\n    getSortedRowModel,\n    useReactTable\n} from \"@tanstack/react-table\";\nimport { CheckboxPrimitive } from \"~/Checkbox/index.js\";\nimport { Skeleton } from \"~/Skeleton/index.js\";\nimport { Table } from \"~/Table/index.js\";\nimport { ColumnSorter, ColumnsVisibility } from \"./components/index.js\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\n\ninterface DataTableColumn<T> {\n    /*\n     * Column header component.\n     */\n    header?: string | number | React.JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | React.JSX.Element | null;\n    /*\n     * Column size.\n     */\n    size?: number;\n    /*\n     * Should truncate?\n     */\n    truncate?: boolean;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n    /*\n     * Enable column resizing.\n     */\n    enableResizing?: boolean;\n    /*\n     * Enable column visibility toggling.\n     */\n    enableHiding?: boolean;\n    /*\n     * Accessor key for the column data path.\n     */\n    accessorKey?: string;\n}\n\ntype DataTableColumns<T> = {\n    [P in keyof T]?: DataTableColumn<T>;\n};\n\ntype DataTableDefaultData = {\n    id: string;\n    /*\n     * Define if a specific row can be selected.\n     */\n    $selectable?: boolean;\n};\n\ntype DataTableRow<T> = Row<DataTableDefaultData & T>;\n\ntype DataTableSorting = SortingState;\n\ntype DataTableColumnSort = ColumnSort;\n\ntype OnDataTableSortingChange = OnChangeFn<DataTableSorting>;\n\ntype DataTableColumnVisibility = VisibilityState;\n\ntype OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;\n\ninterface DataTableProps<TEntry> {\n    /**\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /**\n     * Controls whether \"select all\" action is allowed.\n     */\n    canSelectAllRows?: boolean;\n    /**\n     * Columns definition.\n     */\n    columns: DataTableColumns<TEntry>;\n    /**\n     * The column visibility state.\n     */\n    columnVisibility?: DataTableColumnVisibility;\n    /**\n     * Callback that receives current column visibility state.\n     */\n    onColumnVisibilityChange?: OnDataTableColumnVisibilityChange;\n    /**\n     * Data to display into DataTable body.\n     */\n    data: TEntry[];\n    /**\n     * Callback that is called to determine if the row is selectable.\n     */\n    isRowSelectable?: (row: Row<TEntry>) => boolean;\n    /**\n     * Render the skeleton state while data are loading.\n     */\n    loading?: boolean;\n    /**\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: TEntry[]) => void;\n    /**\n     * Callback that receives the toggled row.\n     */\n    onToggleRow?: (row: TEntry) => void;\n    /**\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnDataTableSortingChange;\n    /**\n     * Selected rows.\n     */\n    selectedRows?: TEntry[];\n    /**\n     * Sorting state.\n     */\n    sorting?: DataTableSorting;\n    /**\n     * Initial sorting state.\n     */\n    initialSorting?: DataTableSorting;\n    /**\n     * Enable sticky header.\n     */\n    stickyHeader?: boolean;\n}\n\ninterface DefineColumnsOptions<TEntry> {\n    canSelectAllRows: boolean;\n    onSelectRow?: DataTableProps<TEntry>[\"onSelectRow\"];\n    onToggleRow: DataTableProps<TEntry>[\"onToggleRow\"];\n    loading: DataTableProps<TEntry>[\"loading\"];\n}\n\nconst defineColumns = <T,>(\n    columns: DataTableProps<T>[\"columns\"],\n    options: DefineColumnsOptions<T>\n): ColumnDef<T>[] => {\n    const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;\n\n    return useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const {\n                accessorKey,\n                cell,\n                className,\n                enableHiding = true,\n                enableResizing = true,\n                enableSorting = false,\n                header,\n                truncate = true,\n                id,\n                size = 100\n            } = column;\n\n            return {\n                id,\n                accessorKey: accessorKey || id,\n                header: () => header,\n                cell: props => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(props.row.original);\n                    } else {\n                        // Automatically convert any cell value to a string for rendering,\n                        // ensuring the table displays values correctly. This aligns with React's\n                        // rendering, which expects JSX, strings or null.\n                        // https://github.com/TanStack/table/issues/1042\n                        return props.getValue() ? String(props.getValue()) : null;\n                    }\n                },\n                enableSorting,\n                meta: {\n                    className,\n                    truncate\n                },\n                enableResizing,\n                size,\n                enableHiding\n            };\n        });\n\n        let columnsDefs = defaults;\n        const firstColumn = defaults[0];\n        const isSelectable = onToggleRow || onSelectRow;\n\n        if (isSelectable && firstColumn) {\n            columnsDefs = [\n                {\n                    ...firstColumn,\n                    accessorKey: firstColumn.id as string,\n                    header: props => {\n                        if (!props) {\n                            return null;\n                        }\n\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    indeterminate={props.table.getIsSomeRowsSelected()}\n                                    checked={props.table.getIsAllRowsSelected()}\n                                    onChange={props.table.toggleAllPageRowsSelected}\n                                    aria-label=\"Select all\"\n                                    disabled={!canSelectAllRows}\n                                    onClick={e => e.stopPropagation()}\n                                />\n                                {firstColumn.header\n                                    ? React.createElement(firstColumn.header, props)\n                                    : null}\n                            </div>\n                        );\n                    },\n                    cell: props => {\n                        if (!props) {\n                            return null;\n                        }\n                        return (\n                            <div className={\"flex items-center gap-xl\"}>\n                                <CheckboxPrimitive\n                                    checked={props.row.getIsSelected()}\n                                    onChange={value => props.row.toggleSelected(!!value)}\n                                    disabled={!props.row.getCanSelect()}\n                                    aria-label=\"Select row\"\n                                    className={cn(!props.row.getCanSelect() ? \"invisible\" : \"\")}\n                                />\n                                {firstColumn.cell\n                                    ? React.createElement(firstColumn.cell, props)\n                                    : null}\n                            </div>\n                        );\n                    }\n                },\n                ...defaults.slice(1)\n            ];\n        }\n\n        return columnsDefs.map(column => {\n            if (loading) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton type={\"text\"} size={\"md\"} />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, onToggleRow, loading]);\n};\n\nconst typedMemo: <T>(component: T) => T = memo;\n\ninterface TableCellProps<T> {\n    cell: Cell<T, unknown>;\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableCell = <T,>({ cell, getColumnWidth }: TableCellProps<T>) => {\n    const width = getColumnWidth(cell.column);\n\n    return (\n        <Table.Cell {...cell.column.columnDef.meta} style={{ width, maxWidth: width }}>\n            {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </Table.Cell>\n    );\n};\n\nconst MemoTableCell = typedMemo(TableCell);\n\ninterface TableRowProps<T> {\n    selected: boolean;\n    cells: Cell<T, unknown>[];\n    getColumnWidth: (column: Column<T>) => number;\n}\n\nconst TableRow = <T,>({ selected, cells, getColumnWidth }: TableRowProps<T>) => {\n    return (\n        <Table.Row selected={selected}>\n            {cells.map(cell => (\n                <MemoTableCell<T> key={cell.id} cell={cell} getColumnWidth={getColumnWidth} />\n            ))}\n        </Table.Row>\n    );\n};\n\nconst MemoTableRow = typedMemo(TableRow);\n\n/**\n * Empty array must be defined outside the React component so it does not force rerendering of the DataTable\n */\nconst emptyArray = Array(10).fill({});\n\nconst DecoratableDataTable = <T extends Record<string, any> & DataTableDefaultData>({\n    bordered,\n    canSelectAllRows = true,\n    columnVisibility,\n    columns: initialColumns,\n    data: initialData,\n    initialSorting,\n    isRowSelectable,\n    loading,\n    onColumnVisibilityChange,\n    onSelectRow,\n    onSortingChange,\n    onToggleRow,\n    selectedRows = [],\n    sorting,\n    stickyHeader\n}: DataTableProps<T>) => {\n    const tableRef = useRef<HTMLDivElement>(null);\n    const [tableWidth, setTableWidth] = useState(1);\n\n    const data = loading ? emptyArray : initialData;\n\n    useEffect(() => {\n        const updateElementWidth = () => {\n            if (tableRef.current) {\n                const width = tableRef.current.clientWidth;\n                setTableWidth(width);\n            }\n        };\n\n        updateElementWidth();\n\n        window.addEventListener(\"resize\", updateElementWidth);\n\n        return () => {\n            window.removeEventListener(\"resize\", updateElementWidth);\n        };\n    }, [tableRef.current]);\n\n    const rowSelection = useMemo(() => {\n        return selectedRows.reduce<RowSelectionState>((acc, item) => {\n            const recordIndex = data.findIndex(rec => rec.id === item.id);\n            return { ...acc, [recordIndex]: true };\n        }, {});\n    }, [selectedRows, data]);\n\n    const onRowSelectionChange: OnChangeFn<RowSelectionState> = updater => {\n        const newSelection = typeof updater === \"function\" ? updater(rowSelection) : updater;\n\n        /**\n         * `@tanstack/react-table` isn't telling us what row was selected or deselected. It simply gives us\n         * the new selection state (an object with row indexes that are currently selected).\n         *\n         * To figure out what row was toggled, we need to calculate the difference between the old selection\n         * and the new selection. What we're doing here is:\n         * - find all items that were present in the previous selection, but are no longer present in the new selection\n         * - find all items that are present in the new selection, but were not present in the previous selection\n         */\n        const toggledRows = [\n            ...Object.keys(rowSelection).filter(x => !(x in newSelection)),\n            ...Object.keys(newSelection).filter(x => !(x in rowSelection))\n        ];\n\n        // If the difference is only 1 item, and `onToggleRow` is available, execute that.\n        if (toggledRows.length === 1 && typeof onToggleRow === \"function\") {\n            onToggleRow(data[parseInt(toggledRows[0])]);\n            return;\n        } else if (typeof onSelectRow === \"function\") {\n            const selection = Object.keys(newSelection).map(key => data[parseInt(key)]);\n            onSelectRow(selection);\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || !sorting.length) {\n            return initialSorting;\n        }\n        return sorting;\n    }, [sorting]);\n\n    const columns = defineColumns(initialColumns, {\n        canSelectAllRows,\n        onSelectRow,\n        onToggleRow,\n        loading\n    });\n\n    const table = useReactTable<T>({\n        columnResizeMode: \"onChange\",\n        columns,\n        data,\n        enableColumnResizing: true,\n        enableHiding: !!onColumnVisibilityChange,\n        enableRowSelection: isRowSelectable,\n        enableSorting: !!onSortingChange,\n        enableSortingRemoval: false,\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        manualSorting: true,\n        onColumnVisibilityChange,\n        onRowSelectionChange,\n        onSortingChange,\n        state: {\n            columnVisibility,\n            rowSelection,\n            sorting: tableSorting\n        }\n    });\n\n    const getColumnWidth = useCallback(\n        (column: Column<T>): number => {\n            // Non-resizable columns (e.g. row-selection, actions) keep their fixed size.\n            if (!column.getCanResize()) {\n                return column.getSize();\n            }\n\n            /**\n             * Resizable columns share the space left after the fixed columns, proportionally to\n             * their own size. This makes the table always fill the full container width — even when\n             * columns are hidden — so trailing content (e.g. the columns-visibility cog) stays\n             * flush right instead of drifting left as columns are removed.\n             */\n            const visibleColumns = table.getVisibleLeafColumns();\n            const fixedTotal = visibleColumns\n                .filter(col => !col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n            const resizableTotal = visibleColumns\n                .filter(col => col.getCanResize())\n                .reduce((total, col) => total + col.getSize(), 0);\n\n            if (resizableTotal === 0) {\n                return column.getSize();\n            }\n\n            const available = Math.max(tableWidth - fixedTotal, 0);\n\n            return Math.ceil((column.getSize() * available) / resizableTotal);\n        },\n        [table, tableWidth]\n    );\n\n    /**\n     * Had to memoize the rows to avoid browser freeze.\n     */\n    const tableRows = useMemo(() => {\n        return table.getRowModel().rows;\n    }, [table, data, columns]);\n\n    return (\n        <div ref={tableRef}>\n            <Table bordered={bordered} sticky={stickyHeader}>\n                <Table.Header sticky={stickyHeader}>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <Table.Row key={headerGroup.id}>\n                            {headerGroup.headers.map((header, index) => {\n                                const isLastCell = index === headerGroup.headers.length - 1;\n                                const width = getColumnWidth(header.column);\n\n                                return (\n                                    <Table.Head\n                                        key={header.id}\n                                        {...header.column.columnDef.meta}\n                                        colSpan={header.colSpan}\n                                        style={{ width, maxWidth: width }}\n                                    >\n                                        {header.isPlaceholder ? null : (\n                                            <ColumnSorter\n                                                onClick={header.column.getToggleSortingHandler()}\n                                                sortable={header.column.getCanSort()}\n                                            >\n                                                <div\n                                                    className={cn({\n                                                        \"w-full overflow-hidden whitespace-nowrap\": true,\n                                                        truncate: !isLastCell\n                                                    })}\n                                                >\n                                                    {flexRender(\n                                                        header.column.columnDef.header,\n                                                        header.getContext()\n                                                    )}\n                                                </div>\n                                                <Table.Direction\n                                                    direction={header.column.getIsSorted() || null}\n                                                />\n                                                {isLastCell && (\n                                                    <div className={\"h-md\"}>\n                                                        <ColumnsVisibility\n                                                            columns={table.getAllColumns()}\n                                                        />\n                                                    </div>\n                                                )}\n                                            </ColumnSorter>\n                                        )}\n                                        {header.column.getCanResize() && (\n                                            <Table.Resizer\n                                                onMouseDown={header.getResizeHandler()}\n                                                onTouchStart={header.getResizeHandler()}\n                                                isResizing={header.column.getIsResizing()}\n                                            />\n                                        )}\n                                    </Table.Head>\n                                );\n                            })}\n                        </Table.Row>\n                    ))}\n                </Table.Header>\n                <Table.Body>\n                    {tableRows.map(row => {\n                        const id = row.original.id || row.id;\n                        return (\n                            <MemoTableRow<T>\n                                key={id}\n                                cells={row.getVisibleCells()}\n                                selected={row.getIsSelected()}\n                                getColumnWidth={getColumnWidth}\n                            />\n                        );\n                    })}\n                </Table.Body>\n            </Table>\n        </div>\n    );\n};\n\nconst DataTable = makeDecoratable(\"DataTable\", DecoratableDataTable);\n\nexport {\n    DataTable,\n    type DataTableProps,\n    type DataTableColumn,\n    type DataTableColumns,\n    type DataTableDefaultData,\n    type DataTableRow,\n    type DataTableSorting,\n    type DataTableColumnSort,\n    type OnDataTableSortingChange,\n    type DataTableColumnVisibility,\n    type OnDataTableColumnVisibilityChange\n};\n"],"names":["defineColumns","columns","options","canSelectAllRows","onSelectRow","onToggleRow","loading","useMemo","columnsList","Object","key","defaults","column","accessorKey","cell","className","enableHiding","enableResizing","enableSorting","header","truncate","id","size","props","String","columnsDefs","firstColumn","isSelectable","CheckboxPrimitive","e","React","value","cn","Skeleton","typedMemo","memo","TableCell","getColumnWidth","width","Table","flexRender","MemoTableCell","TableRow","selected","cells","MemoTableRow","emptyArray","Array","DecoratableDataTable","bordered","columnVisibility","initialColumns","initialData","initialSorting","isRowSelectable","onColumnVisibilityChange","onSortingChange","selectedRows","sorting","stickyHeader","tableRef","useRef","tableWidth","setTableWidth","useState","data","useEffect","updateElementWidth","window","rowSelection","acc","item","recordIndex","rec","onRowSelectionChange","updater","newSelection","toggledRows","x","parseInt","selection","tableSorting","table","useReactTable","getCoreRowModel","getSortedRowModel","useCallback","visibleColumns","fixedTotal","col","total","resizableTotal","available","Math","tableRows","headerGroup","index","isLastCell","ColumnSorter","ColumnsVisibility","row","DataTable","makeDecoratable"],"mappings":"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"}

package/DataTable/components/ColumnsVisibility.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-import type { Column, RowData } from "@tanstack/react-table";
-import type { Features } from "../DataTable.js";
-interface ColumnsVisibilityProps<T extends RowData> {
-    columns: Column<Features, T>[];
+import type { Column } from "@tanstack/react-table";
+interface ColumnsVisibilityProps<T> {
+    columns: Column<T>[];
 }
-export declare const ColumnsVisibility: <T extends RowData>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
+export declare const ColumnsVisibility: <T>(props: ColumnsVisibilityProps<T>) => React.JSX.Element | null;
 export {};

package/DataTable/components/ColumnsVisibility.js

@@ -7,17 +7,14 @@ const ColumnsVisibility = (props)=>{
     const getHeaderName = useCallback((column)=>{
         const { header } = column.columnDef;
         if ("string" == typeof header) return header;
-        if ("function" == typeof header) {
-            const flatHeader = column.table.getFlatHeaders().find((h)=>h.column.id === column.id);
-            if (flatHeader) return header(flatHeader.getContext());
-        }
+        if ("function" == typeof header) return header();
         return column.id;
     }, []);
     const options = useMemo(()=>props.columns.filter((column)=>column.getCanHide()).map((column)=>({
                 id: column.id,
                 header: getHeaderName(column),
-                onChange: (value)=>column.toggleVisibility(value),
-                getValue: ()=>column.getIsVisible()
+                onChange: column.toggleVisibility,
+                getValue: column.getIsVisible
             })), [
         props.columns
     ]);

package/DataTable/components/ColumnsVisibility.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable/components/ColumnsVisibility.js","sources":["../../../src/DataTable/components/ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column, RowData } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\nimport type { Features } from \"../DataTable.js\";\n\ninterface ColumnsVisibilityProps<T extends RowData> {\n    columns: Column<Features, T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T extends RowData>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<Features, T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            const flatHeader = column.table.getFlatHeaders().find(h => h.column.id === column.id);\n\n            if (flatHeader) {\n                return header(flatHeader.getContext());\n            }\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    /**\n                     * `@tanstack/react-table` v9 puts these on the column prototype, so they\n                     * read their column off `this`. They must stay attached to the column.\n                     */\n                    onChange: value => column.toggleVisibility(value),\n                    getValue: () => column.getIsVisible()\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        preventClose\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["ColumnsVisibility","props","getHeaderName","useCallback","column","header","flatHeader","h","options","useMemo","value","DropdownMenu","IconButton","SettingsIcon","option","Checkbox"],"mappings":";;;;;AAmBO,MAAMA,oBAAoB,CAAoBC;IAMjD,MAAMC,gBAAgBC,YAAY,CAACC;QAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGD,OAAO,SAAS;QAEnC,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;QAGX,IAAI,AAAkB,cAAlB,OAAOA,QAAuB;YAC9B,MAAMC,aAAaF,OAAO,KAAK,CAAC,cAAc,GAAG,IAAI,CAACG,CAAAA,IAAKA,EAAE,MAAM,CAAC,EAAE,KAAKH,OAAO,EAAE;YAEpF,IAAIE,YACA,OAAOD,OAAOC,WAAW,UAAU;QAE3C;QAEA,OAAOF,OAAO,EAAE;IACpB,GAAG,EAAE;IAEL,MAAMI,UAAoBC,QAAQ,IACvBR,MAAM,OAAO,CACf,MAAM,CAACG,CAAAA,SAAUA,OAAO,UAAU,IAClC,GAAG,CAACA,CAAAA,SACM;gBACH,IAAIA,OAAO,EAAE;gBACb,QAAQF,cAAcE;gBAKtB,UAAUM,CAAAA,QAASN,OAAO,gBAAgB,CAACM;gBAC3C,UAAU,IAAMN,OAAO,YAAY;YACvC,KAET;QAACH,MAAM,OAAO;KAAC;IAElB,IAAIO,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACG,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,SAAS;YAAS,MAAM;;qBAErE,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBH,QAAQ,GAAG,CAACM,CAAAA,SACF,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKG,OAAO,EAAE;YACd;YACA,oBACI,oBAACC,UAAQA;gBACL,OAAOD,OAAO,MAAM;gBACpB,UAAUA,OAAO,QAAQ;gBACzB,SAASA,OAAO,QAAQ;;;AAQxD"}
+{"version":3,"file":"DataTable/components/ColumnsVisibility.js","sources":["../../../src/DataTable/components/ColumnsVisibility.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@webiny/icons/settings.svg\";\nimport type { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button/index.js\";\nimport { Checkbox } from \"~/Checkbox/index.js\";\nimport { DropdownMenu } from \"~/DropdownMenu/index.js\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: string;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <DropdownMenu\n            trigger={<IconButton icon={<SettingsIcon />} variant={\"ghost\"} size={\"xs\"} />}\n        >\n            <DropdownMenu.Label text={\"Display columns\"} />\n            {options.map(option => {\n                return (\n                    <DropdownMenu.Item\n                        key={option.id}\n                        preventClose\n                        text={\n                            <Checkbox\n                                label={option.header}\n                                onChange={option.onChange}\n                                checked={option.getValue()}\n                            />\n                        }\n                    />\n                );\n            })}\n        </DropdownMenu>\n    );\n};\n"],"names":["ColumnsVisibility","props","getHeaderName","useCallback","column","header","options","useMemo","DropdownMenu","IconButton","SettingsIcon","option","Checkbox"],"mappings":";;;;;AAkBO,MAAMA,oBAAoB,CAAKC;IAMlC,MAAMC,gBAAgBC,YAAY,CAACC;QAC/B,MAAM,EAAEC,MAAM,EAAE,GAAGD,OAAO,SAAS;QAEnC,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;QAGX,IAAI,AAAkB,cAAlB,OAAOA,QAEP,OAAOA;QAGX,OAAOD,OAAO,EAAE;IACpB,GAAG,EAAE;IAEL,MAAME,UAAoBC,QAAQ,IACvBN,MAAM,OAAO,CACf,MAAM,CAACG,CAAAA,SAAUA,OAAO,UAAU,IAClC,GAAG,CAACA,CAAAA,SACM;gBACH,IAAIA,OAAO,EAAE;gBACb,QAAQF,cAAcE;gBACtB,UAAUA,OAAO,gBAAgB;gBACjC,UAAUA,OAAO,YAAY;YACjC,KAET;QAACH,MAAM,OAAO;KAAC;IAElB,IAAIK,AAAmB,MAAnBA,QAAQ,MAAM,EACd,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,cAAYA;QACT,uBAAS,oBAACC,YAAUA;YAAC,oBAAM,oBAACC,gBAAYA;YAAK,SAAS;YAAS,MAAM;;qBAErE,oBAACF,aAAa,KAAK;QAAC,MAAM;QACzBF,QAAQ,GAAG,CAACK,CAAAA,SACF,WAAP,GACI,oBAACH,aAAa,IAAI;YACd,KAAKG,OAAO,EAAE;YACd;YACA,oBACI,oBAACC,UAAQA;gBACL,OAAOD,OAAO,MAAM;gBACpB,UAAUA,OAAO,QAAQ;gBACzB,SAASA,OAAO,QAAQ;;;AAQxD"}

package/DatePicker/DatePicker.d.ts

@@ -1,22 +1,26 @@
 import React from "react";
 import type { DatePickerPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
-type DatePickerProps = DatePickerPrimitiveProps & FormComponentProps;
-declare const DatePicker: (({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+interface DatePickerOwnProps {
+    showTimezone?: boolean;
+}
+type DatePickerProps = DatePickerPrimitiveProps & FormComponentProps & DatePickerOwnProps;
+declare const DecoratableDatePicker: ({ label, description, note, hint, required, disabled, validation, showTimezone, ...props }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: typeof DecoratableDatePicker & {
+    original: typeof DecoratableDatePicker;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+    original: typeof DecoratableDatePicker & {
+        original: typeof DecoratableDatePicker;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: DatePickerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableDatePicker & {
+        original: typeof DecoratableDatePicker;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/DatePicker/DatePicker.js

@@ -2,7 +2,15 @@ import react, { useMemo } from "react";
 import { makeDecoratable } from "../utils.js";
 import { DatePickerPrimitive } from "./primitives/index.js";
 import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
-const DecoratableDatePicker = ({ label, description, note, hint, required, disabled, validation, ...props })=>{
+import { Text } from "../Text/index.js";
+const TimezoneLabel = ()=>{
+    const timezone = useMemo(()=>Intl.DateTimeFormat().resolvedOptions().timeZone, []);
+    return /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        className: "text-neutral-strong mt-xxs"
+    }, "Timezone: ", timezone);
+};
+const DecoratableDatePicker = ({ label, description, note, hint, required, disabled, validation, showTimezone = false, ...props })=>{
     const { isValid: validationIsValid, message: validationMessage } = validation || {};
     const invalid = useMemo(()=>false === validationIsValid, [
         validationIsValid
@@ -22,7 +30,7 @@ const DecoratableDatePicker = ({ label, description, note, hint, required, disab
         ...props,
         disabled: disabled,
         invalid: invalid
-    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+    }), showTimezone && /*#__PURE__*/ react.createElement(TimezoneLabel, null), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
         text: validationMessage,
         invalid: invalid,
         disabled: disabled

package/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker/DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"./primitives/index.js\";\nimport { DatePickerPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype DatePickerProps = DatePickerPrimitiveProps & FormComponentProps;\n\nconst DecoratableDatePicker = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: DatePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <DatePickerPrimitive\n                {...(props as DatePickerPrimitiveProps)}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DatePicker = makeDecoratable(\"DatePicker\", DecoratableDatePicker);\n\nexport { DatePicker, type DatePickerProps };\n"],"names":["DecoratableDatePicker","label","description","note","hint","required","disabled","validation","props","validationIsValid","validationMessage","invalid","useMemo","FormComponentLabel","FormComponentDescription","DatePickerPrimitive","FormComponentErrorMessage","FormComponentNote","DatePicker","makeDecoratable"],"mappings":";;;;AAcA,MAAMA,wBAAwB,CAAC,EAC3BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACV,GAAGC,OACW;IACd,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGH,cAAc,CAAC;IAClF,MAAMI,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACI,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASK;sBAEb,oBAACG,0BAAwBA;QAAC,MAAMZ;QAAa,UAAUI;sBACvD,oBAACS,qBAAmBA;QACf,GAAIP,KAAK;QACV,UAAUF;QACV,SAASK;sBAEb,oBAACK,2BAAyBA;QACtB,MAAMN;QACN,SAASC;QACT,UAAUL;sBAEd,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AAEA,MAAMY,aAAaC,gBAAgB,cAAcnB"}
+{"version":3,"file":"DatePicker/DatePicker.js","sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"./primitives/index.js\";\nimport { DatePickerPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\nimport { Text } from \"~/Text/index.js\";\n\ninterface DatePickerOwnProps {\n    showTimezone?: boolean;\n}\n\ntype DatePickerProps = DatePickerPrimitiveProps & FormComponentProps & DatePickerOwnProps;\n\nconst TimezoneLabel = () => {\n    const timezone = useMemo(() => Intl.DateTimeFormat().resolvedOptions().timeZone, []);\n    return (\n        <Text size={\"sm\"} className={\"text-neutral-strong mt-xxs\"}>\n            Timezone: {timezone}\n        </Text>\n    );\n};\n\nconst DecoratableDatePicker = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    showTimezone = false,\n    ...props\n}: DatePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <DatePickerPrimitive\n                {...(props as DatePickerPrimitiveProps)}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            {showTimezone && <TimezoneLabel />}\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DatePicker = makeDecoratable(\"DatePicker\", DecoratableDatePicker);\n\nexport { DatePicker, type DatePickerProps };\n"],"names":["TimezoneLabel","timezone","useMemo","Intl","Text","DecoratableDatePicker","label","description","note","hint","required","disabled","validation","showTimezone","props","validationIsValid","validationMessage","invalid","FormComponentLabel","FormComponentDescription","DatePickerPrimitive","FormComponentErrorMessage","FormComponentNote","DatePicker","makeDecoratable"],"mappings":";;;;;AAmBA,MAAMA,gBAAgB;IAClB,MAAMC,WAAWC,QAAQ,IAAMC,KAAK,cAAc,GAAG,eAAe,GAAG,QAAQ,EAAE,EAAE;IACnF,OAAO,WAAP,GACI,oBAACC,MAAIA;QAAC,MAAM;QAAM,WAAW;OAA8B,cAC5CH;AAGvB;AAEA,MAAMI,wBAAwB,CAAC,EAC3BC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,eAAe,KAAK,EACpB,GAAGC,OACW;IACd,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGJ,cAAc,CAAC;IAClF,MAAMK,UAAUf,QAAQ,IAAMa,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,OAAO,WAAP,GACI,oBAAC;QAAI,WAAU;qBACX,oBAACG,oBAAkBA;QACf,MAAMZ;QACN,MAAMG;QACN,UAAUC;QACV,UAAUC;QACV,SAASM;sBAEb,oBAACE,0BAAwBA;QAAC,MAAMZ;QAAa,UAAUI;sBACvD,oBAACS,qBAAmBA;QACf,GAAIN,KAAK;QACV,UAAUH;QACV,SAASM;QAEZJ,gBAAgB,WAAhBA,GAAgB,oBAACb,eAAaA,OAAAA,WAAAA,GAC/B,oBAACqB,2BAAyBA;QACtB,MAAML;QACN,SAASC;QACT,UAAUN;sBAEd,oBAACW,mBAAiBA;QAAC,MAAMd;QAAM,UAAUG;;AAGrD;AAEA,MAAMY,aAAaC,gBAAgB,cAAcnB"}

package/DatePicker/primitives/DatePickerPrimitive.d.ts

@@ -1,20 +1,21 @@
 import React from "react";
 import type { DatePickerPrimitiveProps } from "../utils/types.js";
-declare const DatePickerPrimitive: ((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
-    original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+declare const DecoratableDatePickerPrimitive: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+declare const DatePickerPrimitive: typeof DecoratableDatePickerPrimitive & {
+    original: typeof DecoratableDatePickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: ((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
-        original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+    original: typeof DecoratableDatePickerPrimitive & {
+        original: typeof DecoratableDatePickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
-        original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableDatePickerPrimitive & {
+        original: typeof DecoratableDatePickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/DatePicker/primitives/DateTimePicker.d.ts

@@ -3,5 +3,5 @@ import type { DateTimeLocalPickerProps, DateTimeTzPickerProps } from "../utils/t
 type DateTimePickerInternalProps = (DateTimeLocalPickerProps | DateTimeTzPickerProps) & {
     withTimezone: boolean;
 };
-declare const DateTimePicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat }: DateTimePickerInternalProps) => React.JSX.Element;
+declare const DateTimePicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, withTimezone, displayFormat, minDate, maxDate }: DateTimePickerInternalProps) => React.JSX.Element;
 export { DateTimePicker };