draft-components 0.61.0 → 0.61.1

package/components/date-preset-picker-popover/date-preset-picker-popover.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const popover_1 = require("../popover");
 const date_preset_picker_1 = require("./date-preset-picker");
 exports.DatePresetPickerPopover = (0, react_1.forwardRef)(function DatePresetPickerPopover({ locale, timeZone, defaultIsOpen = false, hideSelectedRange = false, position = 'bottom', alignment = 'start', cancelButtonLabel, confirmButtonLabel, customDatePresetLabel, disableActionButtons, showLoadingIndicator, options, value, onChangeValue, children: render, }, ref) {
+    var _a;
     const [isShown, setIsShown] = (0, react_1.useState)(defaultIsOpen);
     const confirmButtonRef = (0, react_1.useRef)(null);
     const [selectionState, setSelectionState] = (0, react_1.useState)(valueToSelectionState);
@@ -100,7 +101,7 @@ exports.DatePresetPickerPopover = (0, react_1.forwardRef)(function DatePresetPic
             openPopover();
         }
     }
-    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, Object.assign({ ref: ref, className: "dc-date-preset-picker-popover", isShown: isShown, position: position, alignment: alignment, content: (0, jsx_runtime_1.jsx)(date_preset_picker_1.DatePresetPicker, { confirmButtonRef: confirmButtonRef, locale: locale, formattedDateRange: hideSelectedRange ? null : formattedDateRange, formattedTimeZone: formattedTimeZone, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, customDatePresetLabel: customDatePresetLabel, disableActionButtons: disableActionButtons, showLoadingIndicator: showLoadingIndicator, options: options, datePreset: selectionState.option?.datePreset || '', dateRange: selectionState.dateRange, onChangeDatePreset: handleChangeDatePreset, onChangeDateRange: handleChangeDateRange, onCancel: closePopover, onConfirm: handleConfirm }, void 0), focusElementRefAfterOpen: confirmButtonRef, onClose: closePopover }, { children: render({
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, Object.assign({ ref: ref, className: "dc-date-preset-picker-popover", isShown: isShown, position: position, alignment: alignment, content: (0, jsx_runtime_1.jsx)(date_preset_picker_1.DatePresetPicker, { confirmButtonRef: confirmButtonRef, locale: locale, formattedDateRange: hideSelectedRange ? null : formattedDateRange, formattedTimeZone: formattedTimeZone, cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, customDatePresetLabel: customDatePresetLabel, disableActionButtons: disableActionButtons, showLoadingIndicator: showLoadingIndicator, options: options, datePreset: ((_a = selectionState.option) === null || _a === void 0 ? void 0 : _a.datePreset) || '', dateRange: selectionState.dateRange, onChangeDatePreset: handleChangeDatePreset, onChangeDateRange: handleChangeDateRange, onCancel: closePopover, onConfirm: handleConfirm }, void 0), focusElementRefAfterOpen: confirmButtonRef, onClose: closePopover }, { children: render({
             isShown,
             openPopover,
             closePopover,

package/components/date-range-picker/date-range-picker.js

@@ -87,12 +87,12 @@ function DateRangePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, pr
         renderedWeeks.push((0, jsx_runtime_1.jsx)(calendar_row_1.CalendarRow, { children: renderedDays }, `week-${w}`));
     }
     (0, react_1.useEffect)(() => {
-        if (value?.start) {
+        if (value === null || value === void 0 ? void 0 : value.start) {
             setFocusDate((focusDate) => focusDate.toISOString() !== value.start
                 ? plain_date_1.PlainDate.fromISODate(value.start)
                 : focusDate);
         }
-    }, [value?.start]);
+    }, [value === null || value === void 0 ? void 0 : value.start]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-date-picker" }, { children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: (focusDate) => {
                     setFocusDate(focusDate);
                     if (start) {

package/components/datetime-input/date-components.js

@@ -2,11 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateComponents = void 0;
 class DateComponents {
-    year;
-    month;
-    day;
-    hour;
-    minute;
     constructor(values) {
         if (values) {
             for (const [key, value] of Object.entries(values)) {
@@ -14,13 +9,6 @@ class DateComponents {
             }
         }
     }
-    static options = {
-        year: { min: 1, max: 9999, digits: 4 },
-        month: { min: 1, max: 12, digits: 2 },
-        day: { min: 1, max: 31, digits: 2 },
-        hour: { min: 0, max: 23, digits: 2 },
-        minute: { min: 0, max: 59, digits: 2 },
-    };
     static makeFormDatetimeISO(dateString) {
         const dateTimeRegex = /^\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}$/;
         const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
@@ -106,3 +94,10 @@ class DateComponents {
     }
 }
 exports.DateComponents = DateComponents;
+DateComponents.options = {
+    year: { min: 1, max: 9999, digits: 4 },
+    month: { min: 1, max: 12, digits: 2 },
+    day: { min: 1, max: 31, digits: 2 },
+    hour: { min: 0, max: 23, digits: 2 },
+    minute: { min: 0, max: 59, digits: 2 },
+};

package/components/datetime-input/datetime-input.js

@@ -137,7 +137,7 @@ exports.DatetimeInput = (0, react_1.forwardRef)(function DatetimeInput({ size =
             if (index) {
                 children.push((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-datetime-input__separator" }, { children: separator }), `separator-${index}`));
             }
-            children.push((0, jsx_runtime_1.jsx)(date_component_input_1.DateComponentInput, { id: ids?.[dateComponent], label: ariaLabels?.[dateComponent] || dateComponent, placeholder: placeholders?.[dateComponent], disabled: disabled, readOnly: readOnly, name: dateComponent, value: dateComponents.getDisplayedValue(dateComponent), onChange: handleChange }, dateComponent));
+            children.push((0, jsx_runtime_1.jsx)(date_component_input_1.DateComponentInput, { id: ids === null || ids === void 0 ? void 0 : ids[dateComponent], label: (ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels[dateComponent]) || dateComponent, placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders[dateComponent], disabled: disabled, readOnly: readOnly, name: dateComponent, value: dateComponents.getDisplayedValue(dateComponent), onChange: handleChange }, dateComponent));
         });
         return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-datetime-input__group" }, { children: children }), void 0);
     }

package/components/dialog/dialog.js

@@ -36,7 +36,8 @@ function Dialog({ style, className, isOpen, onClose = util_1.noop, shouldShowClo
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-testid": "dialog-container", className: "dc-dialog-container", onClick: (event) => {
-                if (!dialogRef.current?.contains(event.target)) {
+                var _a;
+                if (!((_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
                     onClose();
                 }
             } }, { children: [(0, jsx_runtime_1.jsx)("div", { tabIndex: 0 }, void 0), (0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({}, props, { ref: dialogRef, style: { ...style, width: widthInPx }, className: (0, react_helpers_1.classNames)(className, 'dc-dialog'), borderRadius: "lg", padding: "none", elevation: "lg", role: "dialog", "aria-modal": true }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-dialog__header" }, { children: [(heading || description) && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dc-dialog__header-content" }, { children: [heading && (0, jsx_runtime_1.jsx)(formatted_content_1.Headline, Object.assign({ as: "h2" }, { children: heading }), void 0), description && ((0, jsx_runtime_1.jsx)(formatted_content_1.Subheadline, Object.assign({ as: "div", className: "dc-dialog__description" }, { children: description }), void 0))] }), void 0)), shouldShowCloseButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { "data-testid": "dialog-close-button", className: "dc-dialog__close-btn", appearance: "minimal", size: "sm", noPadding: true, leadingIcon: closeIcon, onClick: onClose }, void 0))] }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-dialog__content" }, { children: children }), void 0), actions && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-dialog__actions" }, { children: actions }), void 0)] }), void 0), (0, jsx_runtime_1.jsx)("div", { tabIndex: 0 }, void 0)] }), void 0) }, void 0));

package/components/inline-message/inline-message.js

@@ -17,6 +17,7 @@ const inlineMessageIcons = {
     default: info_circle_fill_1.infoCircleFill,
 };
 function InlineMessage({ appearance = 'default', shouldShowIcon = false, className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(formatted_content_1.Footnote, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-inline-message', `dc-inline-message_${appearance}`) }, { children: [shouldShowIcon ? ((0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { className: "dc-inline-message__icon", "data-testid": "inline-message-icon", icon: inlineMessageIcons[appearance] ?? inlineMessageIcons.default, width: 16, height: 16 }, void 0)) : null, children] }), void 0));
+    var _a;
+    return ((0, jsx_runtime_1.jsxs)(formatted_content_1.Footnote, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-inline-message', `dc-inline-message_${appearance}`) }, { children: [shouldShowIcon ? ((0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { className: "dc-inline-message__icon", "data-testid": "inline-message-icon", icon: (_a = inlineMessageIcons[appearance]) !== null && _a !== void 0 ? _a : inlineMessageIcons.default, width: 16, height: 16 }, void 0)) : null, children] }), void 0));
 }
 exports.InlineMessage = InlineMessage;

package/components/number-input/number-input.js

@@ -80,7 +80,8 @@ exports.NumberInput = (0, react_1.forwardRef)(function NumberInput({ style, clas
         }) }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ appearance: "secondary", size: size, noPadding: true, disabled: disabled, onClick: () => !readOnly && decrement(step) }, { children: decrementButtonLabel }), void 0), (0, jsx_runtime_1.jsx)(text_input_1.TextInput, Object.assign({}, props, { ref: ref, className: "dc-number-input__text-input", size: size, disabled: disabled, readOnly: readOnly, fullWidth: fullWidth, type: "text", value: value, onKeyDown: handleKeyDown, onChangeValue: handleChangeValue }), void 0), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ appearance: "secondary", size: size, noPadding: true, disabled: disabled, onClick: () => !readOnly && increment(step) }, { children: incrementButtonLabel }), void 0)] }), void 0));
 });
 function getFractionDigits(n) {
-    const fraction = String(n).split(/[.,]/)[1] ?? '';
+    var _a;
+    const fraction = (_a = String(n).split(/[.,]/)[1]) !== null && _a !== void 0 ? _a : '';
     return fraction.length;
 }
 function formatFloat(n, fractionDigits) {

package/components/table/table-sort-button.js

@@ -40,7 +40,8 @@ const displayedOrders = {
     desc: 'descending',
 };
 function TableSortButton({ column, order, onSort, renderLabel = renderDefaultLabel, className, ...props }) {
-    const nextOrder = orderSequence[order] ?? 'asc';
+    var _a;
+    const nextOrder = (_a = orderSequence[order]) !== null && _a !== void 0 ? _a : 'asc';
     return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({}, props, { className: (0, react_helpers_1.classNames)(className, 'dc-table-sort-btn'), appearance: "minimal", noPadding: true, size: "xs", leadingIcon: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { icon: orderIcons[order], size: 14 }, void 0), onClick: () => {
             (0, guards_1.isFunction)(onSort) && onSort(nextOrder);
         } }, { children: renderLabel(column, nextOrder) }), void 0));

package/components/tabs/tabs-state.js

@@ -32,8 +32,9 @@ function TabsStateProvider({ children, selectedTabKey, onSelectTab, }) {
             setFocusedTabKey(tabKey);
         }
         function focusTab(tabKey) {
+            var _a;
             setFocusedTabKey(tabKey);
-            document.getElementById(getTabId(tabKey))?.focus();
+            (_a = document.getElementById(getTabId(tabKey))) === null || _a === void 0 ? void 0 : _a.focus();
         }
         return {
             tabsOrder,

package/components/toaster/toaster.js

@@ -15,7 +15,7 @@ function Toaster({ className, position = 'top-center', toastGap = 16, ...props }
         if (!listElement) {
             return;
         }
-        const toastAppearsOnBottom = position?.startsWith('bottom');
+        const toastAppearsOnBottom = position === null || position === void 0 ? void 0 : position.startsWith('bottom');
         const items = listElement.children;
         let offset = 0;
         for (let i = 0; i < items.length; i += 1) {

package/hooks/use-capture-focus.js

@@ -10,8 +10,8 @@ function useCaptureFocus({ modalRef, isEnabled = true, shouldFocusFirstDescendan
             const releaseFocus = captureFocus(modal, {
                 shouldFocusFirstDescendant,
                 shouldRestoreFocusAfterRelease,
-                focusElementAfterCapture: focusElementRefAfterCapture?.current || null,
-                focusElementAfterRelease: focusElementRefAfterRelease?.current || null,
+                focusElementAfterCapture: (focusElementRefAfterCapture === null || focusElementRefAfterCapture === void 0 ? void 0 : focusElementRefAfterCapture.current) || null,
+                focusElementAfterRelease: (focusElementRefAfterRelease === null || focusElementRefAfterRelease === void 0 ? void 0 : focusElementRefAfterRelease.current) || null,
             });
             return () => {
                 releaseFocus();
@@ -93,11 +93,13 @@ function getFocusElements(parent) {
     return Array.from(parent.querySelectorAll(FOCUS_ELEMENTS_SELECTOR));
 }
 function getFirstFocusableElement(parent) {
-    return getFocusElements(parent)[0] ?? parent;
+    var _a;
+    return (_a = getFocusElements(parent)[0]) !== null && _a !== void 0 ? _a : parent;
 }
 function getLastFocusableElement(parent) {
+    var _a;
     const focusableElements = getFocusElements(parent);
-    return focusableElements[focusableElements.length - 1] ?? parent;
+    return (_a = focusableElements[focusableElements.length - 1]) !== null && _a !== void 0 ? _a : parent;
 }
 function attemptFocus(element) {
     if (element instanceof HTMLElement) {

package/hooks/use-close-on-click-outside.js

@@ -5,8 +5,9 @@ const react_1 = require("react");
 const guards_1 = require("../lib/guards");
 function useCloseOnClickOutside(onClose, ref, params) {
     (0, react_1.useEffect)(() => {
-        const isEnabled = params?.isEnabled ?? true;
-        const ignoreElements = (params?.ignoreElements ?? []).filter(guards_1.isHTMLElement);
+        var _a, _b;
+        const isEnabled = (_a = params === null || params === void 0 ? void 0 : params.isEnabled) !== null && _a !== void 0 ? _a : true;
+        const ignoreElements = ((_b = params === null || params === void 0 ? void 0 : params.ignoreElements) !== null && _b !== void 0 ? _b : []).filter(guards_1.isHTMLElement);
         const container = ref.current;
         if (!isEnabled || !(0, guards_1.isFunction)(onClose) || !(0, guards_1.isHTMLElement)(container)) {
             return;

package/hooks/use-close-on-esc-press.js

@@ -21,7 +21,8 @@ function useCloseOnEscPress(onClose, isEnabled = true) {
             return;
         }
         function onEscPress(event) {
-            const close = callbackStack.last?.current;
+            var _a;
+            const close = (_a = callbackStack.last) === null || _a === void 0 ? void 0 : _a.current;
             if (event.code === keyboard_helpers_1.KeyCode.escape && close) {
                 close();
             }

package/lib/plain-date-range.js

@@ -3,14 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlainDateRange = void 0;
 const plain_date_1 = require("./plain-date");
 class PlainDateRange {
-    start;
-    end;
-    static create() {
-        return new PlainDateRange(plain_date_1.PlainDate.now(), plain_date_1.PlainDate.now());
-    }
-    static fromISODateRange(isoDateRange) {
-        return new PlainDateRange(plain_date_1.PlainDate.fromISODate(isoDateRange.start), plain_date_1.PlainDate.fromISODate(isoDateRange.end));
-    }
     constructor(start, end) {
         if (start.isAfter(end)) {
             this.start = end;
@@ -21,6 +13,12 @@ class PlainDateRange {
             this.end = end;
         }
     }
+    static create() {
+        return new PlainDateRange(plain_date_1.PlainDate.now(), plain_date_1.PlainDate.now());
+    }
+    static fromISODateRange(isoDateRange) {
+        return new PlainDateRange(plain_date_1.PlainDate.fromISODate(isoDateRange.start), plain_date_1.PlainDate.fromISODate(isoDateRange.end));
+    }
     contains(date) {
         return this.start.isBeforeOrEqual(date) && this.end.isAfterOrEqual(date);
     }

package/lib/plain-date.js

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlainDate = void 0;
 class PlainDate {
-    _date;
-    static FIRST_WEEKDAY = 0;
-    static LAST_WEEKDAY = 6;
-    static DAYS_IN_WEEK = 7;
-    static MONTHS_IN_YEAR = 12;
+    constructor(year, monthIndex, day) {
+        this._date = new Date(year, monthIndex, day);
+    }
     static now() {
         const date = new Date();
         return new PlainDate(date.getFullYear(), date.getMonth(), date.getDate());
@@ -15,9 +13,6 @@ class PlainDate {
         const date = new Date(isoDate);
         return new PlainDate(date.getFullYear(), date.getMonth(), date.getDate());
     }
-    constructor(year, monthIndex, day) {
-        this._date = new Date(year, monthIndex, day);
-    }
     get year() {
         return this._date.getFullYear();
     }
@@ -102,3 +97,7 @@ class PlainDate {
     }
 }
 exports.PlainDate = PlainDate;
+PlainDate.FIRST_WEEKDAY = 0;
+PlainDate.LAST_WEEKDAY = 6;
+PlainDate.DAYS_IN_WEEK = 7;
+PlainDate.MONTHS_IN_YEAR = 12;

package/lib/stack.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = void 0;
 class Stack {
-    _items;
     constructor(items = []) {
         this._items = items;
     }

package/lib/util.js

@@ -35,6 +35,6 @@ function randomString(size) {
 }
 exports.randomString = randomString;
 function uniqueId(prefix) {
-    return (prefix ?? '') + randomString(5);
+    return (prefix !== null && prefix !== void 0 ? prefix : '') + randomString(5);
 }
 exports.uniqueId = uniqueId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "0.61.0",
+  "version": "0.61.1",
   "description": "The set of React.js components for rapid prototyping.",
   "main": "components/index.js",
   "files": [