@commonsku/styles 1.17.26 → 1.17.27

package/dist/index.d.ts

@@ -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

@@ -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" } }))))); }))); })));
     }, [
@@ -7582,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;
@@ -7609,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);
             }
         };
@@ -7636,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 = {