@commonsku/styles 1.17.25 → 1.17.27

package/dist/index.d.ts

@@ -945,7 +945,7 @@ declare const Overlay: styled_components.StyledComponent<"div", any, {
 }, never>;
 declare const PopupHeader: styled_components.StyledComponent<"div", any, SharedStyleTypes & SizerTypes, never>;
 type PopupProps = React__default.PropsWithChildren<{
-    header?: React__default.Component;
+    header?: React__default.ReactNode;
     noHeader?: boolean;
     title?: string | React__default.Component;
     controls?: Array<React__default.ReactNode>;
@@ -963,7 +963,7 @@ type PopupProps = React__default.PropsWithChildren<{
     PopupWindowComponent?: React__default.ComponentType<React__default.ComponentPropsWithRef<any>>;
 } & SharedStyleTypes> & React__default.HTMLAttributes<HTMLDivElement>;
 declare const Popup: React__default.ForwardRefExoticComponent<{
-    header?: React__default.Component<{}, {}, any> | undefined;
+    header?: React__default.ReactNode;
     noHeader?: boolean | undefined;
     title?: string | React__default.Component<{}, {}, any> | undefined;
     controls?: React__default.ReactNode[] | undefined;
@@ -2517,7 +2517,7 @@ declare const DateRangePicker: React__default.ForwardRefExoticComponent<Omit<Dat
     presets?: DateRangePreset[] | undefined;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
-interface DateRangeInputProps extends Omit<InputProps, 'onChange'> {
+interface DateRangeInputProps extends Omit<InputProps, "onChange"> {
     isClearable: boolean;
     selected: DateRange;
     dateFormat: string;

package/dist/index.mjs

@@ -7285,7 +7285,7 @@ function InputStepper(props) {
 var templateObject_1$c, templateObject_2$1, templateObject_3, templateObject_4;
 
 var VirtualTable = function (props) {
-    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? '' : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter, onSortChange = props.onSortChange;
+    var columns = props.columns, data = props.data, itemSize = props.itemSize, _a = props.height, height = _a === void 0 ? 500 : _a, _b = props.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = props.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = props.defaultSort, onClickRow = props.onClickRow, onScroll = props.onScroll, onUpdateData = props.onUpdateData, _d = props.useTableProps, useTableProps = _d === void 0 ? {} : _d, _e = props.tableHeaderProps, tableHeaderProps = _e === void 0 ? {} : _e, _f = props.tableFooterProps, tableFooterProps = _f === void 0 ? {} : _f, _g = props.hideFooter, hideFooter = _g === void 0 ? true : _g, _h = props.hideHeader, hideHeader = _h === void 0 ? false : _h, _j = props.className, className = _j === void 0 ? "" : _j, NoRowsFound = props.NoRowsFound, renderRowSubComponent = props.renderRowSubComponent; props.onResize; var rowGroupStyles = props.rowGroupStyles, rowStyles = props.rowStyles, _k = props.gutterSize, gutterSize = _k === void 0 ? 0 : _k, _l = props.customTableFooterProps, customTableFooterProps = _l === void 0 ? {} : _l, TableFooter = props.TableFooter, onSortChange = props.onSortChange;
     var defaultColumn = useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
@@ -7398,7 +7398,7 @@ var VirtualTable = function (props) {
         var sortIconDirection = function (column) { return column.isSorted
             ? sortDirection(column)
             : "updown"; };
-        return (React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ""), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: "none" } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { className: "th", onClick: function () { return handleSort(column); } }),
+        return (React.createElement("div", __assign({}, tableHeaderProps, { className: "thead ".concat(tableHeaderProps.className || ""), style: __assign(__assign({}, (tableHeaderProps.style || {})), (hideHeader ? { display: "none" } : {})) }), headerGroups.map(function (headerGroup) { return (React.createElement("div", __assign({}, getHeaderGroupProps(headerGroup, false), { ref: headerRef, style: { width: tableWidth } }), headerGroup.headers.map(function (column) { return (React.createElement("div", __assign({}, getHeaderProps(column, false), { onClick: function () { return handleSort(column); } }),
             column.render("Header"),
             React.createElement("span", null, column.canSort && (React.createElement(FilledChevronIcon, { direction: sortIconDirection(column), size: "medium", style: { verticalAlign: "middle" } }))))); }))); })));
     }, [
@@ -7413,6 +7413,12 @@ var VirtualTable = function (props) {
     useEffect(function () {
         onSortChange && onSortChange({ sortBy: sortBy });
     }, [sortBy]);
+    var scrollToTop = useCallback(function () {
+        listRef.current && listRef.current.scrollTo(0);
+    }, []);
+    useEffect(function () {
+        scrollToTop();
+    }, [data, scrollToTop]);
     return (React.createElement("div", __assign({}, getTableProps(), { className: "table ".concat(className || '') }),
         renderTableHeader(),
         React.createElement("div", __assign({ className: "tbody" }, getTableBodyProps()), rows.length === 0 && NoRowsFound ? React.createElement(NoRowsFound, null) :
@@ -7576,21 +7582,21 @@ var DateRangePicker = forwardRef(function (_a, ref) {
 });
 
 var dropdownStyles = {
-    position: 'absolute',
-    marginTop: '1rem',
-    padding: '1rem',
-    background: '#fff',
-    border: '2px solid',
-    borderRadius: '5px',
-    borderColor: 'var(--color-primary1-60)',
+    position: "absolute",
+    marginTop: "1rem",
+    padding: "1rem",
+    background: "#fff",
+    border: "2px solid",
+    borderRadius: "5px",
+    borderColor: "var(--color-primary1-60)",
     zIndex: 1,
 };
 var inputStyles = {
-    fontStyle: 'normal',
-    cursor: 'pointer',
-    position: 'absolute',
-    top: '8px',
-    right: '4px',
+    fontStyle: "normal",
+    cursor: "pointer",
+    position: "absolute",
+    top: "8px",
+    right: "4px",
 };
 var formatDateRange = function (_a, dateFormat) {
     var startDate = _a.startDate, endDate = _a.endDate;
@@ -7603,23 +7609,32 @@ var formatDateRange = function (_a, dateFormat) {
     else if (endDate != null) {
         return "Until ".concat(format(endDate, dateFormat));
     }
-    return '';
+    return "";
+};
+var getDateInputText = function (dateRange, dateFormat, presets) {
+    if (presets != null) {
+        var preset = presets.find(function (preset) { return preset.name === dateRange.category; });
+        if (preset) {
+            return preset.label;
+        }
+    }
+    return formatDateRange(dateRange, dateFormat);
 };
 var DateRangeInput = function (_a) {
     var value = _a.value, error = _a.error, noMargin = _a.noMargin, onClick = _a.onClick, isClearable = _a.isClearable; _a.selected; _a.dateFormat; var onInputSelect = _a.onInputSelect, props = __rest(_a, ["value", "error", "noMargin", "onClick", "isClearable", "selected", "dateFormat", "onInputSelect"]);
-    return (React.createElement("div", { style: { position: 'relative' } },
+    return (React.createElement("div", { style: { position: "relative" } },
         React.createElement(Input, __assign({ readOnly: true, onFocus: onInputSelect, value: value, onClick: onClick, noMargin: noMargin, error: error, type: "text", autoComplete: "off" }, props)),
-        React.createElement("span", { style: inputStyles, onClick: onClick }, !isClearable &&
-            React.createElement(CalendarIcon, { style: { width: '1.9rem', verticalAlign: 'middle' } }))));
+        React.createElement("span", { style: inputStyles, onClick: onClick }, !isClearable && (React.createElement(CalendarIcon, { style: { width: "1.9rem", verticalAlign: "middle" } })))));
 };
 var DateRangeDropdown = function (props) {
-    var onChange = props.onChange, presets = props.presets, dateText = props.dateText, range = props.range, error = props.error, _a = props.isClearable, isClearable = _a === void 0 ? false : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? 'yyyy-MM-dd' : _b, placeholder = props.placeholder, placeholderText = props.placeholderText, _c = props.style, style = _c === void 0 ? dropdownStyles : _c;
+    var onChange = props.onChange, presets = props.presets, dateText = props.dateText, range = props.range, error = props.error, _a = props.isClearable, isClearable = _a === void 0 ? false : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "yyyy-MM-dd" : _b, placeholder = props.placeholder, placeholderText = props.placeholderText, _c = props.style, style = _c === void 0 ? dropdownStyles : _c;
     var _d = useState(false), open = _d[0], setOpen = _d[1];
-    var _e = useState(), defaultDateText = _e[0], setDefaultDateText = _e[1];
+    var _e = useState(getDateInputText(range, dateFormat, presets)), defaultDateText = _e[0], setDefaultDateText = _e[1];
     var datepickerRef = useRef(null);
     useEffect(function () {
         var handleExternalClick = function (e) {
-            if (datepickerRef.current != null && !datepickerRef.current.contains(e.target)) {
+            if (datepickerRef.current != null &&
+                !datepickerRef.current.contains(e.target)) {
                 setOpen(false);
             }
         };
@@ -7630,22 +7645,11 @@ var DateRangeDropdown = function (props) {
         if (onChange != null) {
             onChange(range, event);
         }
-        var preset = presets != null &&
-            presets.find(function (preset) { return preset.name === range.category; });
-        if (preset && preset != null) {
-            setDefaultDateText(preset.label);
-        }
-        else if (range.category === 'custom') {
-            setDefaultDateText(formatDateRange(range, dateFormat));
-        }
-        else {
-            setDefaultDateText('');
-        }
+        setDefaultDateText(getDateInputText(range, dateFormat, presets));
     }, [dateFormat, onChange, presets]);
     return (React.createElement(React.Fragment, null,
         React.createElement(DateRangeInput, { noMargin: true, value: dateText != null ? dateText : defaultDateText, onInputSelect: function () { return setOpen(true); }, error: error, isClearable: isClearable, selected: range, dateFormat: dateFormat, placeholder: placeholder || placeholderText || "Select a date range..." }),
-        open &&
-            React.createElement(DateRangePicker, __assign({}, props, { ref: datepickerRef, style: style, onChange: handleChange }))));
+        open && (React.createElement(DateRangePicker, __assign({}, props, { ref: datepickerRef, style: style, onChange: handleChange })))));
 };
 
 var psuedoSelectors = {