@ballistix.digital/react-components 4.0.0 → 4.2.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
+import React, { FC, ReactNode, RefObject, MouseEvent as MouseEvent$1, ReactElement, ChangeEventHandler, FocusEventHandler, MouseEventHandler, KeyboardEventHandler, HTMLInputTypeAttribute, Dispatch, SetStateAction, ElementType, ChangeEvent } from 'react';
 import { DeepPartialType } from 'types/DeepPartialType';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Placement } from '@floating-ui/react';
@@ -207,18 +207,24 @@ type TInputGroupFormProps = {
     htmlType: 'area';
     onChange: ChangeEventHandler<HTMLTextAreaElement>;
     onBlur: FocusEventHandler<HTMLTextAreaElement>;
+    onClick?: MouseEventHandler<HTMLTextAreaElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     onClear?: never;
     trailing?: string | ReactNode;
 } | {
     htmlType: 'text' | 'date';
     onChange: ChangeEventHandler<HTMLInputElement>;
     onBlur: FocusEventHandler<HTMLInputElement>;
+    onClick?: MouseEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onClear?: () => void;
     trailing?: never;
 } | {
     htmlType: Exclude<HTMLInputTypeAttribute, 'text' | 'date'>;
     onChange: ChangeEventHandler<HTMLInputElement>;
     onBlur: FocusEventHandler<HTMLInputElement>;
+    onClick?: MouseEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     onClear?: never;
     trailing?: string | ReactNode;
 });
@@ -492,6 +498,10 @@ declare const base$e: {
         tableWrapperWithLeftSide: string;
         table: {
             container: string;
+            pinnedColumns: {
+                left: string;
+                right: string;
+            };
             head: {
                 container: string;
                 row: string;
@@ -503,6 +513,7 @@ declare const base$e: {
                 };
                 cell: {
                     container: string;
+                    wrapper: string;
                     text: string;
                     sortIndicator: {
                         container: string;
@@ -517,12 +528,14 @@ declare const base$e: {
             body: {
                 container: string;
                 row: string;
+                striped: string;
                 column: {
                     pinned: {
                         cell: string;
                     };
                 };
                 cell: string;
+                sticky: string;
                 checkbox: string;
                 indicator: string;
             };
@@ -1043,7 +1056,8 @@ type TDateRangeMenuFormProps = {
         endDate: string;
     }) => void;
     onClear?: (name: string) => void;
-    onBlur?: any;
+    onBlur?: () => void;
+    onClick?: MouseEventHandler<HTMLDivElement>;
     styles?: TDateRangeMenuFormStyles;
 };
 declare const DateRangeMenu: FC<TDateRangeMenuFormProps>;

package/dist/index.esm.js

@@ -782,7 +782,7 @@ var styles$q = {
 var InputGroupForm = function (props) {
     var _a;
     var _b;
-    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    var name = props.name, _c = props.htmlType, htmlType = _c === void 0 ? 'text' : _c, label = props.label, description = props.description, placeholder = props.placeholder, leading = props.leading, trailing = props.trailing, required = props.required, value = props.value, mask = props.mask, min = props.min, max = props.max, maxLength = props.maxLength, rows = props.rows, error = props.error, _d = props.type, type = _d === void 0 ? 'normal' : _d, isDisabled = props.isDisabled, _e = props.isRequired, isRequired = _e === void 0 ? false : _e, _f = props.isTouched, isTouched = _f === void 0 ? false : _f, _g = props.isSolo, isSolo = _g === void 0 ? false : _g, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var ref = useMask({
         mask: mask === null || mask === void 0 ? void 0 : mask.mask,
@@ -802,7 +802,7 @@ var InputGroupForm = function (props) {
     var inputDataCy = "form-input-".concat(name);
     var errorDataCy = "form-input-error-".concat(name);
     return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.body, children: [leading && jsx("div", { className: styles.leading, children: leading }), !htmlType ||
-                        (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur }), htmlType === 'text' && isClearable && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur })), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
+                        (htmlType !== 'area' && (jsxs("div", { className: "flex items-center", children: [jsx("input", { type: mask !== undefined ? 'text' : htmlType, ref: mask && ref, name: name, id: name, "data-cy": inputDataCy, className: toClassName(styles.input, htmlType === 'color' && '!h-10'), placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, min: min, max: max, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown }), htmlType === 'text' && isClearable && (jsx("div", { className: "right-5 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) })), htmlType === 'date' && isClearable && (jsx("div", { className: "right-10 px-2 absolute cursor-pointer hover:opacity-60", onClick: onClear, children: jsx(IconElement, { accessor: "times", className: "text-gray-500" }) }))] }))), htmlType === 'area' && (jsx("textarea", { rows: rows, name: name, id: name, "data-cy": inputDataCy, className: styles.input, placeholder: placeholder, defaultValue: isSolo ? value : undefined, value: isSolo ? undefined : value, maxLength: maxLength, disabled: isDisabled, onChange: onChange, onBlur: onBlur, onClick: onClick, onKeyDown: onKeyDown })), type === 'floored' && (jsx("div", { className: "absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-primary-600", "aria-hidden": "true" })), trailing && isValid && (jsx("div", { className: styles.trailing, children: trailing })), isTouched && !isValid && (jsx("div", { className: styles.trailing, children: invalidIcon }))] }), jsxs("div", { className: styles.foot, children: [description && !(error && isTouched) && (jsx("p", { className: styles.description, children: description })), error && isTouched && (jsx("p", { className: styles.error, "data-cy": errorDataCy, children: error }))] })] }));
 };
 
 var base$l = {
@@ -6001,11 +6001,13 @@ var TableList2 = function (props) {
             zIndex: isDragging ? 1 : 0,
             position: 'relative',
         };
-        return (jsx("tr", { ref: setNodeRef, style: style, onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_b = config.options) === null || _b === void 0 ? void 0 : _b.isStriped) && index % 2 === 0 && 'bg-gray-50'), children: map(row.getVisibleCells(), function (cell) {
+        return (jsx("tr", { ref: setNodeRef, style: style, onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_b = config.options) === null || _b === void 0 ? void 0 : _b.isStriped) &&
+                index % 2 === 0 &&
+                styles.body.table.body.striped), children: map(row.getVisibleCells(), function (cell) {
                 var _a, _b, _c;
                 return (jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
                         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));
+                        styles.body.table.body.sticky), style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
             }) }, row.id));
     };
     var sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
@@ -6028,8 +6030,6 @@ var TableList2 = function (props) {
         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;
@@ -6038,9 +6038,9 @@ var TableList2 = function (props) {
             maxWidth: width,
             minWidth: width,
             boxShadow: isLastLeftPinnedColumn
-                ? '-4px 0 4px -4px gray inset'
+                ? styles.body.table.pinnedColumns.left
                 : isFirstRightPinnedColumn
-                    ? '4px 0 4px -4px gray inset'
+                    ? styles.body.table.pinnedColumns.right
                     : undefined,
             left: isPinned === 'left'
                 ? "".concat(getPinnedColumnsWidth('left', column.id), "px")
@@ -6063,11 +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', header.column.getIsPinned() &&
+                                                        return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
                                                                 styles.body.table.head.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' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className: "grid gap-x-1 items-center", style: {
+                                                                    : 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className: styles.body.table.head.cell.wrapper, 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()
@@ -6076,22 +6076,22 @@ var TableList2 = function (props) {
                                                                             : styles.body.table.head.cell
                                                                                 .sortIndicator.isNotSorted), children: jsx(SortIconElement, { className: toClassName(styles.body.table.head.cell.sortIndicator
                                                                                 .icon.container), "aria-hidden": "true" }) }))] }) }, header.id));
-                                                    }) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className: "border", children: isDraggable ? (jsx(SortableContext, { items: map(config.data, function (entity) {
+                                                    }) }, headerGroup.id)); }) }), !isLoading && (jsx("tbody", { className: styles.body.table.body.container, children: isDraggable ? (jsx(SortableContext, { items: map(config.data, function (entity) {
                                                         return get(entity, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey);
                                                     }), strategy: verticalListSortingStrategy, children: map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) { return (jsx(DraggableRow, { row: row, index: index }, get(row.original, dragConfig === null || dragConfig === void 0 ? void 0 : dragConfig.rowIdentifierKey))); }) })) : (map(table === null || table === void 0 ? void 0 : table.getRowModel().rows, function (row, index) {
                                                     var _a;
                                                     return (jsx("tr", { onClick: function () { return onRowClick && onRowClick(row); }, className: toClassName(styles.body.table.body.row, ((_a = config.options) === null || _a === void 0 ? void 0 : _a.isStriped) &&
                                                             index % 2 === 0 &&
-                                                            'bg-gray-50'), children: map(row.getVisibleCells(), function (cell) {
+                                                            styles.body.table.body.striped), children: map(row.getVisibleCells(), function (cell) {
                                                             var _a, _b, _c;
                                                             return (jsx("td", { className: toClassName(styles.body.table.body.cell, ((_a = config === null || config === void 0 ? void 0 : config.options) === null || _a === void 0 ? void 0 : _a.hasStickyHeader) &&
                                                                     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', cell.column.getIsPinned() &&
+                                                                    styles.body.table.body.sticky, 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: ((_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) })] }));
+                                                })) }))] }), 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: styles$g.empty, children: "There is no data to show..." })) })), isLoading && (jsx("div", { className: styles$g.loading.container, children: times(8, function (index) { return (jsxs("div", { className: styles$g.loading.row.container, children: [jsx("div", { className: styles$g.loading.row.first }), jsx("div", { className: styles$g.loading.row.last })] }, 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);
 };
 
@@ -6107,6 +6107,10 @@ var base$c = {
         tableWrapperWithLeftSide: '!min-w-max w-full',
         table: {
             container: 'min-w-full border-separate border-spacing-0',
+            pinnedColumns: {
+                left: '-4px 0 4px -4px gray inset',
+                right: '4px 0 4px -4px gray inset',
+            },
             head: {
                 container: '',
                 row: '',
@@ -6117,7 +6121,8 @@ var base$c = {
                     },
                 },
                 cell: {
-                    container: ' py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group',
+                    container: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group border-b',
+                    wrapper: 'grid gap-x-1 items-center',
                     text: 'whitespace-normal break-words',
                     sortIndicator: {
                         container: 'ml-2 inline-flex items-center rounded',
@@ -6130,14 +6135,16 @@ var base$c = {
                 },
             },
             body: {
-                container: 'divide-y divide-gray-200 border-t',
+                container: 'border',
                 row: '',
+                striped: 'bg-gray-50',
                 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',
+                sticky: 'border-b border-gray-200',
                 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',
             },
@@ -6148,6 +6155,15 @@ var base$c = {
 };
 var styles$g = {
     base: base$c,
+    loading: {
+        container: 'flex flex-col gap-y-2 w-full pt-5',
+        row: {
+            container: 'flex gap-2',
+            first: 'w-20 h-12 rounded-md bg-gray-100 animate-pulse',
+            last: 'w-full h-12 rounded-md bg-gray-100 animate-pulse',
+        },
+    },
+    empty: 'w-full flex justify-center my-2',
 };
 
 var createColumnHelper = function () {
@@ -6988,7 +7004,7 @@ 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" }));
-    } : _h, required = props.required, defaultValue = props.value, error = props.error, _j = props.type, type = _j === void 0 ? 'normal' : _j, _k = props.isRequired, isRequired = _k === void 0 ? false : _k, _l = props.isTouched, isTouched = _l === void 0 ? false : _l, isDisabled = props.isDisabled, _m = props.isSolo, isSolo = _m === void 0 ? false : _m, _o = props.isRanged, isRanged = _o === void 0 ? false : _o, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, stylesOverrides = props.styles;
+    } : _h, required = props.required, defaultValue = props.value, error = props.error, _j = props.type, type = _j === void 0 ? 'normal' : _j, _k = props.isRequired, isRequired = _k === void 0 ? false : _k, _l = props.isTouched, isTouched = _l === void 0 ? false : _l, isDisabled = props.isDisabled, _m = props.isSolo, isSolo = _m === void 0 ? false : _m, _o = props.isRanged, isRanged = _o === void 0 ? false : _o, onChange = props.onChange, onClear = props.onClear, onBlur = props.onBlur, onClick = props.onClick, stylesOverrides = props.styles;
     var isValid = error === undefined;
     var _p = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {
         startDate: null,
@@ -7055,7 +7071,7 @@ var DateRangeMenu = function (props) {
         }
         return function () { return removeEventListener('keydown', callback); };
     }, [handleValueChange, isRanged, separator]);
-    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, "data-cy": inputDataCy, ref: $datepickerInputRef, children: [jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
+    return (jsxs("div", { className: styles.container, children: [jsxs("div", { className: styles.head, children: [label && (jsx("label", { htmlFor: name, className: styles.label, children: label })), !required && !isRequired && typeof label === 'string' && (jsx("span", { className: styles.hint, children: "Optional" })), required && required({ isRequired: isRequired })] }), jsxs("div", { className: styles.container, "data-cy": inputDataCy, ref: $datepickerInputRef, onClick: onClick, children: [jsx(Datepicker, { inputName: name, inputId: name, i18n: i18n, useRange: size === 'expanded', placeholder: placeholder, asSingle: !isRanged, separator: separator, startFrom: startFrom, displayFormat: displayFormat, disabled: isDisabled, popoverDirection: direction, minDate: minDate, maxDate: maxDate, toggleIcon: icon, 
                         //
                         value: state, 
                         //