@ballistix.digital/react-components 3.3.0 → 3.3.2

package/dist/index.d.ts

@@ -446,6 +446,16 @@ type TTableListProps<TData> = {
             isStriped?: boolean;
             hasStickyHeader?: boolean;
             hasVerticalSeparators?: boolean;
+            columnPinning?: {
+                left?: {
+                    name: string;
+                    size: number;
+                }[];
+                right?: {
+                    name: string;
+                    size: number;
+                }[];
+            };
         };
     };
     isLoading?: boolean;
@@ -478,6 +488,7 @@ declare const base$e: {
         content: string;
         styleWrapper: string;
         tableWrapper: string;
+        tableWrapperWithLeftSide: string;
         table: {
             container: string;
             head: {
@@ -500,6 +511,11 @@ declare const base$e: {
             body: {
                 container: string;
                 row: string;
+                column: {
+                    pinned: {
+                        cell: string;
+                    };
+                };
                 cell: string;
                 checkbox: string;
                 indicator: string;
@@ -965,7 +981,29 @@ declare const base$6: {
 };
 type TSelectMenuFormStyles = DeepPartialType<typeof base$6>;
 
-type TDateMenuFormProps = {
+type TDateMenuFormProps = Omit<TDateRangeMenuFormProps, 'value' | 'isRanged' | 'onChange'> & {
+    value?: string;
+    isRanged?: false;
+    onChange?: (value: string) => void;
+};
+declare const DateMenuForm: FC<TDateMenuFormProps>;
+
+declare const base$5: {
+    container: string;
+    head: string;
+    body: string;
+    foot: string;
+    label: string;
+    hint: string;
+    leading: string;
+    input: string;
+    trailing: string;
+    description: string;
+    error: string;
+};
+type TDateRangeMenuFormStyles = DeepPartialType<typeof base$5>;
+
+type TDateRangeMenuFormProps = {
     name: string;
     type?: 'normal' | 'inset' | 'overlapping' | 'pill' | 'floored';
     size?: 'compact' | 'expanded';
@@ -985,9 +1023,8 @@ type TDateMenuFormProps = {
         isRequired: boolean;
     }) => string | ReactNode;
     value: {
-        label: string;
-        value: string;
-        disabled?: boolean;
+        startDate: string;
+        endDate: string;
     };
     error?: string;
     isRequired?: boolean;
@@ -1001,24 +1038,9 @@ type TDateMenuFormProps = {
     }) => void;
     onClear?: (name: string) => void;
     onBlur?: any;
-    styles?: TDateMenuFormStyles;
-};
-declare const DateMenuForm: FC<TDateMenuFormProps>;
-
-declare const base$5: {
-    container: string;
-    head: string;
-    body: string;
-    foot: string;
-    label: string;
-    hint: string;
-    leading: string;
-    input: string;
-    trailing: string;
-    description: string;
-    error: string;
+    styles?: TDateRangeMenuFormStyles;
 };
-type TDateMenuFormStyles = DeepPartialType<typeof base$5>;
+declare const DateRangeMenu: FC<TDateRangeMenuFormProps>;
 
 type TCheckboxInputGroupFormProps = {
     name: string;
@@ -1297,4 +1319,4 @@ type TReturn<TData> = {
 };
 declare const useExcel: <TData extends object>() => TReturn<TData>;
 
-export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, type TAddressInputGroupFormProps, type TAddressInputGroupFormStyles, type TAddressInputGroupFormValue, type TButtonElementProps, type TCheckboxInputFormProps, type TCheckboxInputFormStyles, type TCheckboxInputGroupFormProps, type TCheckboxInputGroupFormStyles, type TDateMenuFormProps, type TDateMenuFormStyles, type TExcelCell, type TExcelRow, type TExcelSheet, type TFileInputGroupFormProps, type TFileInputGroupFormStyles, type TInputGroupFormProps, type TInputGroupStyles, type TModalOverlayProps, type TOpeningsHourInputGroupFormProps, type TOpeningsHourInputGroupFormStyles, type TSelectMenuFormProps, type TSelectMenuFormStyles, type TSwitchFormProps, type TSwitchStylesForm, type TTableListProps as TTableList2Props, type TTableListProps$1 as TTableListProps, type TTableListStyles$1 as TTableListStyles, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, TooltipElement, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, useExcel };
+export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DateRangeMenu as DateRangeMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, type TAddressInputGroupFormProps, type TAddressInputGroupFormStyles, type TAddressInputGroupFormValue, type TButtonElementProps, type TCheckboxInputFormProps, type TCheckboxInputFormStyles, type TCheckboxInputGroupFormProps, type TCheckboxInputGroupFormStyles, type TDateMenuFormProps, type TDateRangeMenuFormStyles as TDateMenuFormStyles, type TDateRangeMenuFormProps, type TDateRangeMenuFormStyles, type TExcelCell, type TExcelRow, type TExcelSheet, type TFileInputGroupFormProps, type TFileInputGroupFormStyles, type TInputGroupFormProps, type TInputGroupStyles, type TModalOverlayProps, type TOpeningsHourInputGroupFormProps, type TOpeningsHourInputGroupFormStyles, type TSelectMenuFormProps, type TSelectMenuFormStyles, type TSwitchFormProps, type TSwitchStylesForm, type TTableListProps as TTableList2Props, type TTableListProps$1 as TTableListProps, type TTableListStyles$1 as TTableListStyles, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, TooltipElement, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, useExcel };

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ArrowPathIcon, ChevronDownIcon, EllipsisVerticalIcon, ExclamationCircleIcon, ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon, ChevronUpIcon, ChevronUpDownIcon, HomeIcon, ArrowLongLeftIcon, ArrowLongRightIcon } from '@heroicons/react/20/solid';
-import { isArray, map, set, get, noop as noop$2, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, times, intersection, trim, lastIndexOf } from 'lodash';
+import { isArray, map, set, get, noop as noop$2, indexOf, toSafeInteger, pick, isEmpty, some, compact as compact$1, forEach, assign, includes, findIndex, last, first, find, concat, times, intersection, trim, lastIndexOf } from 'lodash';
 import get$1 from 'lodash/get';
 import React, { useState, useMemo, useRef, Children, Fragment as Fragment$1, useEffect, useCallback, useLayoutEffect, createContext, memo, useReducer, forwardRef, useContext, cloneElement, useImperativeHandle, createElement, PureComponent, Component } from 'react';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -5820,11 +5820,11 @@ var isValidState = function (state) {
 };
 
 var TableList2 = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var id = props.id, config = props.table, head = props.head, foot = props.foot, leftSide = props.leftSide, isLoading = props.isLoading, onRowClick = props.onRowClick, onChange = props.onChange, stylesOverrides = props.styles, dragConfig = props.dragConfig;
-    var _l = useState({}), columnVisibility = _l[0], setColumnVisibility = _l[1];
-    var _m = useState([]), columnOrder = _m[0], setColumnOrder = _m[1];
-    var _o = useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _o[0], setSorting = _o[1];
+    var _x = useState({}), columnVisibility = _x[0], setColumnVisibility = _x[1];
+    var _y = useState([]), columnOrder = _y[0], setColumnOrder = _y[1];
+    var _z = useState((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.defaultSorting) !== null && _b !== void 0 ? _b : []), sorting = _z[0], setSorting = _z[1];
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$g.base);
         var keys = calculateNestedKeys(styles$g.base);
@@ -5894,6 +5894,7 @@ var TableList2 = function (props) {
                 }
             ], config.columns, true) : config.columns,
         data: config.data,
+        enableColumnPinning: true,
         state: {
             sorting: sorting,
             columnVisibility: columnVisibility,
@@ -5904,6 +5905,10 @@ var TableList2 = function (props) {
                 ? __assign$1({ 'drag-handle': true }, initialVisibilityState) : initialVisibilityState,
             columnOrder: isDraggable
                 ? __spreadArray(['drag-handle'], ((_e = (_d = config.options) === null || _d === void 0 ? void 0 : _d.defaultOrder) !== null && _e !== void 0 ? _e : []), true) : (_f = config.options) === null || _f === void 0 ? void 0 : _f.defaultOrder,
+            columnPinning: {
+                left: (_j = map((_h = (_g = config.options) === null || _g === void 0 ? void 0 : _g.columnPinning) === null || _h === void 0 ? void 0 : _h.left, 'name')) !== null && _j !== void 0 ? _j : [],
+                right: (_m = map((_l = (_k = config.options) === null || _k === void 0 ? void 0 : _k.columnPinning) === null || _l === void 0 ? void 0 : _l.right, 'name')) !== null && _m !== void 0 ? _m : [],
+            },
         },
         manualPagination: true,
         manualSorting: true,
@@ -5954,7 +5959,7 @@ var TableList2 = function (props) {
             }
             setColumnVisibility(visibility_1);
         }
-    }, [(_g = config === null || config === void 0 ? void 0 : config.options) === null || _g === void 0 ? void 0 : _g.defaultVisibility, id, table]);
+    }, [(_o = config === null || config === void 0 ? void 0 : config.options) === null || _o === void 0 ? void 0 : _o.defaultVisibility, id, table]);
     useEffect(function () {
         var _a, _b, _c, _d;
         var savedOrder = (_a = getTableState(id)) === null || _a === void 0 ? void 0 : _a.columnOrder;
@@ -5969,7 +5974,7 @@ var TableList2 = function (props) {
             var mappedColumns = map(config.columns, function (column) { var _a; return ((_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : get(column, 'accessorKey')); });
             setColumnOrder(isDraggable ? __spreadArray(['drag-handle'], mappedColumns, true) : mappedColumns);
         }
-    }, [config.columns, (_h = config === null || config === void 0 ? void 0 : config.options) === null || _h === void 0 ? void 0 : _h.defaultOrder, id, isDraggable]);
+    }, [config.columns, (_p = config === null || config === void 0 ? void 0 : config.options) === null || _p === void 0 ? void 0 : _p.defaultOrder, id, isDraggable]);
     // Write state to local storage when it changes
     useEffect(function () {
         if (state) {
@@ -6004,7 +6009,52 @@ var TableList2 = function (props) {
             }) }, row.id));
     };
     var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
-    var Content = (jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsx("div", { className: styles.head, children: head(state) }), jsx("div", { className: styles.body.content, children: jsx("div", { className: styles.body.wrapper, children: jsxs("div", { className: styles.body.styleWrapper, children: [leftSide && (jsx("div", { className: styles.leftSide, children: leftSide(state) })), jsxs("div", { className: styles.body.tableWrapper, children: [jsxs("table", { className: styles.body.table.container, children: [jsx("thead", { className: styles.body.table.head.container, children: map(table === null || table === void 0 ? void 0 : table.getHeaderGroups(), function (headerGroup) { return (jsx("tr", { className: styles.body.table.head.row, children: map(headerGroup.headers, function (header) {
+    var getPinnedColumnsWidth = useCallback(function (side, id) {
+        var _a, _b, _c, _d;
+        var pinnedColumns = map((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.columnPinning) === null || _b === void 0 ? void 0 : _b[side], 'size');
+        var pinnedColumnIndex = findIndex((_d = (_c = config.options) === null || _c === void 0 ? void 0 : _c.columnPinning) === null || _d === void 0 ? void 0 : _d[side], { name: id });
+        if (pinnedColumnIndex === -1)
+            return null;
+        var startIndex = side === 'left' ? 0 : pinnedColumnIndex + 1;
+        var endIndex = side === 'left'
+            ? pinnedColumnIndex
+            : pinnedColumns.length - pinnedColumnIndex + 1;
+        return pinnedColumns
+            .slice(startIndex, endIndex)
+            .reduce(function (acc, size) { return acc + size; }, 0);
+    }, [(_q = config.options) === null || _q === void 0 ? void 0 : _q.columnPinning]);
+    var getCommonPinningStyles = useCallback(function (column) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var isPinned = column.getIsPinned();
+        var isLastLeftPinnedColumn = column.id == ((_c = last((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.columnPinning) === null || _b === void 0 ? void 0 : _b.left)) === null || _c === void 0 ? void 0 : _c.name);
+        var isFirstRightPinnedColumn = column.id == ((_f = first((_e = (_d = config.options) === null || _d === void 0 ? void 0 : _d.columnPinning) === null || _e === void 0 ? void 0 : _e.right)) === null || _f === void 0 ? void 0 : _f.name);
+        if (isFirstRightPinnedColumn)
+            console.log(column.id);
+        var width = (_l = find(concat((_h = (_g = config.options) === null || _g === void 0 ? void 0 : _g.columnPinning) === null || _h === void 0 ? void 0 : _h.left, (_k = (_j = config.options) === null || _j === void 0 ? void 0 : _j.columnPinning) === null || _k === void 0 ? void 0 : _k.right), {
+            name: column.id,
+        })) === null || _l === void 0 ? void 0 : _l.size;
+        return {
+            width: width,
+            maxWidth: width,
+            minWidth: width,
+            boxShadow: isLastLeftPinnedColumn
+                ? '-4px 0 4px -4px gray inset'
+                : isFirstRightPinnedColumn
+                    ? '4px 0 4px -4px gray inset'
+                    : undefined,
+            left: isPinned === 'left'
+                ? "".concat(getPinnedColumnsWidth('left', column.id), "px")
+                : undefined,
+            right: isPinned === 'right'
+                ? "".concat(getPinnedColumnsWidth('right', column.id), "px")
+                : undefined,
+        };
+    }, [
+        (_s = (_r = config.options) === null || _r === void 0 ? void 0 : _r.columnPinning) === null || _s === void 0 ? void 0 : _s.left,
+        (_u = (_t = config.options) === null || _t === void 0 ? void 0 : _t.columnPinning) === null || _u === void 0 ? void 0 : _u.right,
+        getPinnedColumnsWidth,
+    ]);
+    var Content = (jsxs("div", { className: styles.container, "data-cy": "table-list-".concat(id), children: [head && jsx("div", { className: styles.head, children: head(state) }), jsx("div", { className: styles.body.content, children: jsx("div", { className: styles.body.wrapper, children: jsxs("div", { className: styles.body.styleWrapper, children: [leftSide && (jsx("div", { className: styles.leftSide, children: leftSide(state) })), jsxs("div", { className: toClassName(styles.body.tableWrapper, leftSide && styles.body.tableWrapperWithLeftSide), children: [jsxs("table", { className: styles.body.table.container, children: [jsx("thead", { className: styles.body.table.head.container, children: map(table === null || table === void 0 ? void 0 : table.getHeaderGroups(), function (headerGroup) { return (jsx("tr", { className: styles.body.table.head.row, children: map(headerGroup.headers, function (header) {
                                                         // Default sort icon to show a user that the column is sortable
                                                         var SortIconElement = ChevronUpDownIcon;
                                                         if (header.column.getIsSorted()) {
@@ -6013,12 +6063,11 @@ var TableList2 = function (props) {
                                                                     ? ChevronUpIcon
                                                                     : ChevronDownIcon;
                                                         }
-                                                        return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, 'border-b', header.column.getCanSort() && 'cursor-pointer'), onClick: header.column.getToggleSortingHandler(), style: {
-                                                                minWidth: !!header.column.columnDef.size &&
+                                                        return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, 'border-b', header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
+                                                                styles.body.table.body.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
                                                                     header.column.columnDef.size !== 150
                                                                     ? "".concat(header.column.columnDef.size, "px")
-                                                                    : 'auto',
-                                                            }, children: jsxs("div", { className: "grid gap-x-1 items-center", style: {
+                                                                    : 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className: "grid gap-x-1 items-center", style: {
                                                                     gridTemplateColumns: '1fr auto',
                                                                 }, children: [header.isPlaceholder ? null : (jsx("div", { className: styles.body.table.head.cell.text, children: flexRender(header.column.columnDef.header, header.getContext()) })), header.column.getCanSort() && (jsx("span", { className: toClassName(styles.body.table.head.cell.sortIndicator
                                                                             .container, header.column.getIsSorted()
@@ -6039,9 +6088,10 @@ var TableList2 = function (props) {
                                                                     index !==
                                                                         ((_c = (_b = table === null || table === void 0 ? void 0 : table.getState()) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.pageSize) -
                                                                             1 &&
-                                                                    'border-b border-gray-200'), style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                                    'border-b border-gray-200', cell.column.getIsPinned() &&
+                                                                    styles.body.table.body.column.pinned.cell), style: __assign$1({ width: cell.column.getSize() }, getCommonPinningStyles(cell.column)), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                                         }) }, row.id));
-                                                })) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_j = config === null || config === void 0 ? void 0 : config.options) === null || _j === void 0 ? void 0 : _j.emptyComponent) ? ((_k = config === null || config === void 0 ? void 0 : config.options) === null || _k === void 0 ? void 0 : _k.emptyComponent) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: times(8, function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] })] }) }) }), foot && jsx("div", { className: styles.foot, children: foot(state) })] }));
+                                                })) }))] }), isEmpty(table === null || table === void 0 ? void 0 : table.getRowModel().rows) && !isLoading && (jsx(Fragment, { children: ((_v = config === null || config === void 0 ? void 0 : config.options) === null || _v === void 0 ? void 0 : _v.emptyComponent) ? ((_w = config === null || config === void 0 ? void 0 : config.options) === null || _w === void 0 ? void 0 : _w.emptyComponent) : (jsx("div", { className: "w-full flex justify-center my-2", children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: "flex flex-col gap-y-2 w-full pt-5", children: times(8, function (index) { return (jsxs("div", { className: "flex gap-2", children: [jsx("div", { className: "w-20 h-12 rounded-md bg-gray-100 animate-pulse" }), jsx("div", { className: "w-full h-12 rounded-md bg-gray-100 animate-pulse" })] }, index)); }) }))] })] }) }) }), foot && jsx("div", { className: styles.foot, children: foot(state) })] }));
     return isDraggable ? (jsx(DndContext, { collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: onDragEnd, sensors: sensors, children: Content })) : (Content);
 };
 
@@ -6054,6 +6104,7 @@ var base$c = {
         content: '',
         styleWrapper: 'flex overflow-x-scroll overflow-y-visible',
         tableWrapper: 'inline-block min-w-full align-middle',
+        tableWrapperWithLeftSide: '!min-w-max w-full',
         table: {
             container: 'min-w-full border-separate border-spacing-0',
             head: {
@@ -6076,6 +6127,11 @@ var base$c = {
             body: {
                 container: 'divide-y divide-gray-200 border-t',
                 row: '',
+                column: {
+                    pinned: {
+                        cell: 'bg-white sticky z-10 overflow-hidden text-ellipsis',
+                    },
+                },
                 cell: 'whitespace-nowrap py-2.5 px-3 text-sm text-gray-500',
                 checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
                 indicator: 'absolute inset-y-0 left-0 w-0.5 bg-primary-600',
@@ -6835,6 +6891,95 @@ var TableExcelExportCustom = function (props) {
 };
 
 var DateMenuForm = function (props) {
+    var onChange = props.onChange, defaultValue = props.value;
+    var handleChange = useCallback(function (value) {
+        onChange && onChange(value.startDate);
+    }, [onChange]);
+    var value = useMemo(function () {
+        return defaultValue
+            ? { startDate: defaultValue, endDate: defaultValue }
+            : { startDate: '', endDate: '' };
+    }, [defaultValue]);
+    return (jsx(DateRangeMenu, __assign$1({}, props, { onChange: handleChange, isRanged: false, value: value })));
+};
+
+var base$5 = {
+    container: '',
+    head: 'flex justify-between',
+    body: 'relative rounded-md',
+    foot: '',
+    label: 'block font-medium text-gray-900',
+    hint: 'text-xs text-gray-500',
+    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
+    input: 'block w-full inline-flex',
+    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
+    description: 'text-gray-400 text-xs mt-1',
+    error: 'text-red-500 text-xs ml-5 mt-1',
+};
+var leading$3 = {
+    input: 'pl-10',
+};
+var trailing$3 = {};
+var normal$3 = {
+    label: 'leading-6 text-sm mb-2',
+    hint: 'leading-6',
+    leading: 'pl-3',
+    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
+    trailing: 'pr-3',
+    description: 'mt-2 text-sm',
+};
+var inset$3 = {
+    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
+    label: 'text-xs',
+    hint: 'text-xs',
+    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
+    description: 'hidden',
+};
+var overlapping$3 = {
+    container: 'relative',
+    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
+    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
+    hint: 'text-xs mr-4 bg-white px-1',
+    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    description: 'hidden',
+};
+var pill$3 = {
+    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
+    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
+    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
+    trailing: 'pr-2',
+    description: 'text-xs',
+};
+var floored$3 = {
+    body: 'relative mt-2',
+    label: 'block text-sm font-medium leading-6 text-gray-900',
+    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
+    description: 'text-xs mt-2',
+};
+var invalid$3 = {
+    container: '!ring-red-500',
+    input: 
+    // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
+    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
+    description: 'text-sm text-red-600',
+};
+var disabled$5 = {
+    input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
+};
+var styles$7 = {
+    base: base$5,
+    leading: leading$3,
+    trailing: trailing$3,
+    normal: normal$3,
+    inset: inset$3,
+    overlapping: overlapping$3,
+    pill: pill$3,
+    floored: floored$3,
+    invalid: invalid$3,
+    disabled: disabled$5,
+};
+
+var DateRangeMenu = function (props) {
     var _a;
     var _b = props.name, name = _b === void 0 ? 'date-menu-form' : _b, _c = props.size, size = _c === void 0 ? 'compact' : _c, label = props.label, _d = props.i18n, i18n = _d === void 0 ? 'en' : _d, description = props.description, placeholder = props.placeholder, separator = props.separator, startFrom = props.startFrom, _e = props.displayFormat, displayFormat = _e === void 0 ? 'DD.MM.YYYY' : _e, _f = props.direction, direction = _f === void 0 ? 'down' : _f, minDate = props.minDate, maxDate = props.maxDate, _g = props.startWeekOn, startWeekOn = _g === void 0 ? 'mon' : _g, _h = props.icon, icon = _h === void 0 ? function (isEmpty) {
         return isEmpty ? (jsx(IconElement, { accessor: "calendar" })) : (jsx(IconElement, { accessor: "xmark", className: "text-black" }));
@@ -6916,82 +7061,6 @@ var DateMenuForm = function (props) {
                                     : (_a = error === null || error === void 0 ? void 0 : error.startDate) !== null && _a !== void 0 ? _a : error === null || error === void 0 ? void 0 : error.endDate }))] }))] })] }));
 };
 
-var base$5 = {
-    container: '',
-    head: 'flex justify-between',
-    body: 'relative rounded-md',
-    foot: '',
-    label: 'block font-medium text-gray-900',
-    hint: 'text-xs text-gray-500',
-    leading: 'pointer-events-none absolute inset-y-0 left-0 flex items-center',
-    input: 'block w-full inline-flex',
-    trailing: 'pointer-events-none absolute inset-y-0 right-0 flex items-center',
-    description: 'text-gray-400 text-xs mt-1',
-    error: 'text-red-500 text-xs ml-5 mt-1',
-};
-var leading$3 = {
-    input: 'pl-10',
-};
-var trailing$3 = {};
-var normal$3 = {
-    label: 'leading-6 text-sm mb-2',
-    hint: 'leading-6',
-    leading: 'pl-3',
-    input: 'rounded-md border-gray-200 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm placeholder-gray-300',
-    trailing: 'pr-3',
-    description: 'mt-2 text-sm',
-};
-var inset$3 = {
-    container: 'rounded-md px-3 pt-2.5 pb-1.5 shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-primary-600',
-    label: 'text-xs',
-    hint: 'text-xs',
-    input: 'border-0 !ring-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm pl-0',
-    description: 'hidden',
-};
-var overlapping$3 = {
-    container: 'relative',
-    head: ' absolute flex justify-between items-center left-0 -top-2 right-0 mx-2 z-10 w-full',
-    label: 'inline-block bg-white px-1 text-xs font-medium text-gray-900 ',
-    hint: 'text-xs mr-4 bg-white px-1',
-    input: 'block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    description: 'hidden',
-};
-var pill$3 = {
-    head: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mb-1 pr-6',
-    foot: 'mx-px block px-4 text-sm font-medium leading-6 text-gray-900 mt-1 pr-6',
-    input: 'block w-full rounded-full border-0 px-4 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6',
-    trailing: 'pr-2',
-    description: 'text-xs',
-};
-var floored$3 = {
-    body: 'relative mt-2',
-    label: 'block text-sm font-medium leading-6 text-gray-900',
-    input: 'peer block w-full border-0 bg-gray-50 py-1.5 text-gray-900 focus:ring-0 sm:text-sm sm:leading-6 ring-0',
-    description: 'text-xs mt-2',
-};
-var invalid$3 = {
-    container: '!ring-red-500',
-    input: 
-    // 'block w-full border border-transparent text-red-900 ring-1 ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 sm:leading-6 pr-10',
-    'block w-full border border-transparent text-red-900 ring-1  ring-inset ring-red-300 placeholder:text-red-300 focus:ring-2 focus:ring-inset focus:ring-red-500 pr-10',
-    description: 'text-sm text-red-600',
-};
-var disabled$5 = {
-    input: 'block w-full rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200',
-};
-var styles$7 = {
-    base: base$5,
-    leading: leading$3,
-    trailing: trailing$3,
-    normal: normal$3,
-    inset: inset$3,
-    overlapping: overlapping$3,
-    pill: pill$3,
-    floored: floored$3,
-    invalid: invalid$3,
-    disabled: disabled$5,
-};
-
 var CheckboxInputGroupForm = function (props) {
     var name = props.name, form = props.form, options = props.options, values = props.values, isDisabled = props.isDisabled, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
@@ -15211,5 +15280,5 @@ var styles = {
     disabled: disabled,
 };
 
-export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, TooltipElement, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
+export { AddressInputGroupForm, BadgeElement$1 as AlertElement, AvatarElement, BadgeElement, BreadcrumbsNavigation, ButtonElement, ButtonGroupElement, CheckboxInputForm as CheckboxInput, ContainerLayout, DateMenuForm, DateRangeMenu as DateRangeMenuForm, DividerLayout, DropdownElement, FileInputGroupForm, IconElement, InputGroupForm, ListContainerLayout, MediaObjectLayout, ModalOverlay, NotificationOverlay, OpeningsHourInputGroupForm, PagePaginationNavigation, LayoutPanel as PanelLayout, PanelPaginationNavigation, SelectMenuForm, SlideOverOverlay, Switch as SwitchForm, TabNavigation, TableColumnOptionsCustom, TableExcelExportCustom as TableExportCustom, TableList, TableList2, TooltipElement, VerticalNavigation, CheckboxInputGroupForm as __DEPRECATED__CheckboxInputGroupForm, createColumnHelper, fromSelectMenuOptionToStringValue, useExcel };
 //# sourceMappingURL=index.esm.js.map