draft-components 0.61.0 → 0.63.0

package/components/calendar/calendar-day.d.ts

@@ -5,6 +5,7 @@ export interface CalendarDayProps {
     isCurrent?: boolean;
     isFocusable?: boolean;
     isSelected?: boolean;
+    isDisabled?: boolean;
     isInRange?: boolean;
     isRangeStart?: boolean;
     isRangeEnd?: boolean;
@@ -15,4 +16,4 @@ export interface CalendarDayProps {
     onPick(day: PlainDate): void;
     onHover?(day: PlainDate): void;
 }
-export declare function CalendarDay({ className, isCurrent, isFocusable, isSelected, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }: CalendarDayProps): JSX.Element;
+export declare function CalendarDay({ className, isCurrent, isFocusable, isSelected, isDisabled, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }: CalendarDayProps): JSX.Element;

package/components/calendar/calendar-day.js

@@ -4,7 +4,7 @@ exports.CalendarDay = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
-function CalendarDay({ className, isCurrent, isFocusable, isSelected, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }) {
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_helpers_1.classNames)(className, 'dc-calendar-day', isCurrent && 'dc-calendar-day_current', isSelected && 'dc-calendar-day_selected', isInRange && 'dc-calendar-day_in-range', isRangeStart && 'dc-calendar-day_range-start', isRangeEnd && 'dc-calendar-day_range-end', isInRangePreview && 'dc-calendar-day_in-range-preview', isRangePreviewStart && 'dc-calendar-day_range-preview-start', isRangePreviewEnd && 'dc-calendar-day_range-preview-end'), role: "gridcell" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "dc-calendar-day__btn", tabIndex: isFocusable ? 0 : -1, "aria-selected": isSelected, onClick: () => onPick(date), onMouseEnter: () => (0, guards_1.isFunction)(onHover) && onHover(date) }, { children: date.day }), void 0) }), void 0));
+function CalendarDay({ className, isCurrent, isFocusable, isSelected, isDisabled, isInRange, isRangeStart, isRangeEnd, isInRangePreview, isRangePreviewStart, isRangePreviewEnd, date, onPick, onHover, }) {
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_helpers_1.classNames)(className, 'dc-calendar-day', isCurrent && 'dc-calendar-day_current', isSelected && 'dc-calendar-day_selected', isDisabled && 'dc-calendar-day_disabled', isInRange && 'dc-calendar-day_in-range', isRangeStart && 'dc-calendar-day_range-start', isRangeEnd && 'dc-calendar-day_range-end', isInRangePreview && 'dc-calendar-day_in-range-preview', isRangePreviewStart && 'dc-calendar-day_range-preview-start', isRangePreviewEnd && 'dc-calendar-day_range-preview-end'), role: "gridcell" }, { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ className: "dc-calendar-day__btn", tabIndex: isFocusable ? 0 : -1, "aria-selected": isSelected, disabled: isDisabled, onClick: () => onPick(date), onMouseEnter: () => (0, guards_1.isFunction)(onHover) && onHover(date) }, { children: date.day }), void 0) }), void 0));
 }
 exports.CalendarDay = CalendarDay;

package/components/calendar/calendar.d.ts

@@ -7,8 +7,10 @@ export interface CalendarProps {
     nextMonthButtonLabel?: string;
     prevYearButtonLabel?: string;
     prevMonthButtonLabel?: string;
-    children: ReactNode[];
+    minDate?: PlainDate | null;
+    maxDate?: PlainDate | null;
     focusDate: PlainDate;
+    children: ReactNode[];
     onChangeFocusDate(focusDate: PlainDate): void;
 }
-export declare function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, children, focusDate, onChangeFocusDate, }: CalendarProps): JSX.Element;
+export declare function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, minDate, maxDate, focusDate, children, onChangeFocusDate, }: CalendarProps): JSX.Element;

package/components/calendar/calendar.js

@@ -17,7 +17,7 @@ const daysOfWeek = [
     new Date('2021-01-09'),
     new Date('2021-01-10'), // Sunday
 ];
-function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, children, focusDate, onChangeFocusDate, }) {
+function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, minDate, maxDate, focusDate, children, onChangeFocusDate, }) {
     const isFocused = (0, react_1.useRef)(false);
     const gridRef = (0, react_1.useRef)(null);
     const headerId = (0, react_1.useRef)('');
@@ -71,7 +71,11 @@ function Calendar({ className, locale, nextYearButtonLabel, nextMonthButtonLabel
                     }
                     if (newFocusDate) {
                         event.preventDefault();
-                        onChangeFocusDate(newFocusDate);
+                        const isNewFocusDateDisabled = (minDate != null && newFocusDate.isBefore(minDate)) ||
+                            (maxDate != null && newFocusDate.isAfter(maxDate));
+                        if (!isNewFocusDateDisabled) {
+                            onChangeFocusDate(newFocusDate);
+                        }
                     }
                 } }, { children: children }), void 0)] }), void 0));
 }

package/components/date-picker/date-picker.d.ts

@@ -7,7 +7,9 @@ export interface DatePickerProps {
     prevYearButtonLabel?: string;
     prevMonthButtonLabel?: string;
     footer?: ReactNode;
+    min?: ISODate;
+    max?: ISODate;
     value: ISODate | null;
     onChangeValue(isoDate: ISODate): void;
 }
-export declare function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, value, onChangeValue, }: DatePickerProps): JSX.Element;
+export declare function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, min, max, value, onChangeValue, }: DatePickerProps): JSX.Element;

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

@@ -7,9 +7,11 @@ const plain_date_1 = require("../../lib/plain-date");
 const calendar_1 = require("../calendar/calendar");
 const calendar_row_1 = require("../calendar/calendar-row");
 const calendar_day_1 = require("../calendar/calendar-day");
-function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, value, onChangeValue, }) {
+function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, min, max, value, onChangeValue, }) {
     const selectedDate = value ? plain_date_1.PlainDate.fromISODate(value) : null;
     const currentDate = plain_date_1.PlainDate.now();
+    const minDate = min ? plain_date_1.PlainDate.fromISODate(min) : null;
+    const maxDate = max ? plain_date_1.PlainDate.fromISODate(max) : null;
     const [focusDate, setFocusDate] = (0, react_1.useState)(selectedDate ? selectedDate : currentDate.startOfMonth);
     const firstDate = focusDate.startOfMonth;
     const lastDate = focusDate.endOfMonth;
@@ -35,7 +37,8 @@ function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYea
             d = 0;
         }
         for (; d < plain_date_1.PlainDate.DAYS_IN_WEEK; d += 1) {
-            renderedDays.push((0, jsx_runtime_1.jsx)(calendar_day_1.CalendarDay, { date: date, isCurrent: date.equals(currentDate), isFocusable: date.equals(focusDate), isSelected: selectedDate ? date.equals(selectedDate) : false, onPick: handleDayPick }, `day-${date.toISOString()}`));
+            renderedDays.push((0, jsx_runtime_1.jsx)(calendar_day_1.CalendarDay, { date: date, isCurrent: date.equals(currentDate), isFocusable: date.equals(focusDate), isSelected: selectedDate ? date.equals(selectedDate) : false, isDisabled: (minDate != null && date.isBefore(minDate)) ||
+                    (maxDate != null && date.isAfter(maxDate)), onPick: handleDayPick }, `day-${date.toISOString()}`));
             date = date.addDays(1);
         }
         renderedWeeks.push((0, jsx_runtime_1.jsx)(calendar_row_1.CalendarRow, { children: renderedDays }, `week-${w}`));
@@ -47,6 +50,6 @@ function DatePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYea
                 : focusDate);
         }
     }, [value]);
-    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: setFocusDate }, { children: renderedWeeks }), void 0), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-date-range-picker__footer" }, { children: footer }), void 0)] }), void 0));
+    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, minDate: minDate, maxDate: maxDate, focusDate: focusDate, onChangeFocusDate: setFocusDate }, { children: renderedWeeks }), void 0), footer && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-date-range-picker__footer" }, { children: footer }), void 0)] }), void 0));
 }
 exports.DatePicker = DatePicker;

package/components/date-picker-popover/date-picker-popover.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { ISODate } from '../../lib/plain-date';
+export declare type DatePickerPopoverProps = {
+    defaultIsOpen?: boolean;
+    locale?: string;
+    footer?: ReactNode;
+    min?: ISODate;
+    max?: ISODate;
+    value: ISODate | null;
+    onChangeValue(value: ISODate): void;
+    children(props: {
+        isOpen: boolean;
+        openPopover(): void;
+        closePopover(): void;
+        togglePopover(): void;
+    }): JSX.Element;
+};
+export declare function DatePickerPopover({ defaultIsOpen, locale, footer, min, max, value, onChangeValue, children, }: DatePickerPopoverProps): JSX.Element;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerPopover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const popover_1 = require("../popover");
+const date_picker_1 = require("../date-picker");
+function DatePickerPopover({ defaultIsOpen = false, locale, footer, min, max, value, onChangeValue, children, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(defaultIsOpen);
+    function openPopover() {
+        setIsOpen(true);
+    }
+    function closePopover() {
+        setIsOpen(false);
+    }
+    function togglePopover() {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    }
+    function handleChangeValue(value) {
+        onChangeValue(value);
+        closePopover();
+    }
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover, Object.assign({ isShown: isOpen, onClose: closePopover, content: (0, jsx_runtime_1.jsx)(date_picker_1.DatePicker, { locale: locale, footer: footer, min: min, max: max, value: value, onChangeValue: handleChangeValue }, void 0) }, { children: children({
+            isOpen,
+            openPopover,
+            closePopover,
+            togglePopover,
+        }) }), void 0));
+}
+exports.DatePickerPopover = DatePickerPopover;

package/components/date-picker-popover/index.d.ts

@@ -0,0 +1 @@
+export * from './date-picker-popover';

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

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./date-picker-popover"), exports);

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/index.d.ts

@@ -7,6 +7,7 @@ export * from './button';
 export * from './buttons-group';
 export * from './checkbox';
 export * from './date-picker';
+export * from './date-picker-popover';
 export * from './date-preset-picker-popover';
 export * from './date-range-picker';
 export * from './datetime-input';

package/components/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./button"), exports);
 __exportStar(require("./buttons-group"), exports);
 __exportStar(require("./checkbox"), exports);
 __exportStar(require("./date-picker"), exports);
+__exportStar(require("./date-picker-popover"), exports);
 __exportStar(require("./date-preset-picker-popover"), exports);
 __exportStar(require("./date-range-picker"), exports);
 __exportStar(require("./datetime-input"), exports);

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/slider/slider.d.ts

@@ -1,11 +1,12 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface SliderProps extends ComponentPropsWithoutRef<'input'> {
+    thumb?: 'round' | 'rect';
+    numberOfTickMarks?: number;
+    step?: number;
     min?: number;
     max?: number;
-    step?: number;
-    thumbStyle?: 'round' | 'rect';
-    tickMarksCount?: number;
     value: number;
+    renderTickMarkLabel?(at: number): ReactNode;
     onChangeValue(value: number): void;
 }
-export declare function Slider({ style, className, disabled, readOnly, min, max, step, thumbStyle, tickMarksCount, value, onChangeValue, ...props }: SliderProps): JSX.Element;
+export declare function Slider({ style, className, disabled, readOnly, thumb, numberOfTickMarks, step, min, max, value, renderTickMarkLabel, onChangeValue, ...props }: SliderProps): JSX.Element;

package/components/slider/slider.js

@@ -3,14 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const guards_1 = require("../../lib/guards");
 const react_helpers_1 = require("../../lib/react-helpers");
-function Slider({ style, className, disabled, readOnly, min = 0, max = 100, step = 1, thumbStyle = 'round', tickMarksCount, value, onChangeValue, ...props }) {
-    const handleChange = (0, react_1.useCallback)((event) => {
-        onChangeValue(Number(event.target.value));
-    }, [onChangeValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)(className, 'dc-slider', {
-            'dc-slider_readOnly': readOnly,
-            'dc-slider_disabled': disabled,
-        }) }, { children: [tickMarksCount && tickMarksCount > 2 ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-slider__tick_marks" }, { children: Array.from({ length: tickMarksCount }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", {}, index))) }), void 0)) : ((0, jsx_runtime_1.jsx)("div", { style: { width: `${((value - min) / (max - min)) * 100}%` }, className: "dc-slider__fill-track" }, void 0)), (0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { className: (0, react_helpers_1.classNames)('dc-slider__input', thumbStyle && `dc-slider__input_thumb_style_${thumbStyle}`), type: "range", min: min, max: max, step: step, disabled: disabled || readOnly, value: value, onChange: handleChange }), void 0)] }), void 0));
+const util_1 = require("../../lib/util");
+function Slider({ style, className, disabled, readOnly, thumb = 'round', numberOfTickMarks = 0, step = 1, min = 0, max = 100, value = 0, renderTickMarkLabel, onChangeValue, ...props }) {
+    var _a;
+    const id = (0, react_1.useRef)(props.id);
+    if (!id.current) {
+        id.current = (0, util_1.uniqueId)('slider_');
+    }
+    const handleChange = (0, react_1.useCallback)((event) => onChangeValue(Number(event.target.value)), [onChangeValue]);
+    const valuePercent = `${((value - min) / (max - min)) * 100}%`;
+    const background = `linear-gradient(
+    to right,
+    var(--dc-slider-fill-track-bg) 0%,
+    var(--dc-slider-fill-track-bg) ${valuePercent},
+    var(--dc-slider-track-bg) ${valuePercent},
+    var(--dc-slider-track-bg) ${valuePercent}
+  )`;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: (0, react_helpers_1.classNames)('dc-slider', thumb && `dc-slider_thumb_${thumb}`, disabled && 'dc-slider_disabled', className) }, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({}, props, { id: (_a = id.current) !== null && _a !== void 0 ? _a : (0, util_1.uniqueId)('slider_'), style: { background }, className: "dc-slider__input", type: "range", min: min, max: max, step: step, value: value, disabled: disabled, readOnly: readOnly, onChange: handleChange }), void 0), (0, jsx_runtime_1.jsx)(SliderTickMarks, { numberOfTickMarks: numberOfTickMarks, renderTickMarkLabel: renderTickMarkLabel }, void 0)] }), void 0));
 }
 exports.Slider = Slider;
+function SliderTickMarks(props) {
+    const { numberOfTickMarks, renderTickMarkLabel } = props;
+    const withLabel = (0, guards_1.isFunction)(renderTickMarkLabel);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-slider__tick-marks" }, { children: Array.from({ length: numberOfTickMarks }).map((_, index) => {
+            const label = withLabel && renderTickMarkLabel(index);
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "dc-slider-tick-mark" }, { children: label && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "dc-slider-tick-mark__label" }, { children: label }), void 0)) }), index));
+        }) }), void 0));
+}

package/components/table/table-cell.d.ts

@@ -1,3 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
-export declare type TableCellProps = ComponentPropsWithoutRef<'td'>;
-export declare function TableCell({ className, align, children, ...props }: TableCellProps): JSX.Element;
+export declare type TableCellProps = ComponentPropsWithoutRef<'td'> & {
+    isLoading: boolean;
+};
+export declare function TableCell({ className, isLoading, align, children, ...props }: TableCellProps): JSX.Element;

package/components/table/table-cell.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_helpers_1 = require("../../lib/react-helpers");
-function TableCell({ className, align = 'left', children, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("td", Object.assign({}, props, { align: align, className: (0, react_helpers_1.classNames)(className, 'dc-table-cell') }, { children: children }), void 0));
+function TableCell({ className, isLoading = false, align = 'left', children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("td", Object.assign({}, props, { align: align, className: (0, react_helpers_1.classNames)('dc-table-cell', isLoading && 'dc-table-cell_loading', className) }, { children: children }), void 0));
 }
 exports.TableCell = TableCell;

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) {