draft-components 0.75.3 → 1.0.0-beta

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

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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-preset-picker-popover"), exports);

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

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { ISODateRange } from '../../lib/plain-date-range';
-export interface DateRangePickerProps {
-    locale?: string;
-    nextYearButtonLabel?: string;
-    nextMonthButtonLabel?: string;
-    prevYearButtonLabel?: string;
-    prevMonthButtonLabel?: string;
-    footer?: ReactNode;
-    value: ISODateRange | null;
-    onChangeValue(isoDateRange: ISODateRange): void;
-}
-export declare function DateRangePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, value, onChangeValue, }: DateRangePickerProps): JSX.Element;

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

@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateRangePicker = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const calendar_1 = require("../calendar/calendar");
-const calendar_row_1 = require("../calendar/calendar-row");
-const calendar_day_1 = require("../calendar/calendar-day");
-const plain_date_1 = require("../../lib/plain-date");
-const plain_date_range_1 = require("../../lib/plain-date-range");
-function DateRangePicker({ locale, nextYearButtonLabel, nextMonthButtonLabel, prevYearButtonLabel, prevMonthButtonLabel, footer, value, onChangeValue, }) {
-    const selectedRange = value ? plain_date_range_1.PlainDateRange.fromISODateRange(value) : null;
-    const [start, setStart] = (0, react_1.useState)(null);
-    const [end, setEnd] = (0, react_1.useState)(null);
-    const newRange = start && end ? new plain_date_range_1.PlainDateRange(start, end) : null;
-    const currentDate = plain_date_1.PlainDate.now();
-    const [focusDate, setFocusDate] = (0, react_1.useState)(selectedRange ? selectedRange.start : currentDate.startOfMonth);
-    const firstDate = focusDate.startOfMonth;
-    const lastDate = focusDate.endOfMonth;
-    const firstWeekday = firstDate.weekday;
-    const lastWeekday = lastDate.weekday;
-    const weeksCount = Math.ceil((firstWeekday + focusDate.lastDay) / plain_date_1.PlainDate.DAYS_IN_WEEK);
-    const handleDayPick = (day) => {
-        setFocusDate(day);
-        if (start) {
-            onChangeValue(new plain_date_range_1.PlainDateRange(start, day).toISODateRange());
-            setStart(null);
-            setEnd(null);
-        }
-        else {
-            onChangeValue(new plain_date_range_1.PlainDateRange(day, day).toISODateRange());
-            setStart(day);
-        }
-    };
-    const handleDayHover = (day) => {
-        if (start) {
-            setEnd(day);
-        }
-    };
-    let date = firstDate;
-    const renderedWeeks = [];
-    for (let w = 0; w < weeksCount; w += 1) {
-        const renderedDays = [];
-        let d;
-        if (w === 0) {
-            d = firstWeekday;
-        }
-        else if (w === weeksCount - 1) {
-            d = plain_date_1.PlainDate.LAST_WEEKDAY - lastWeekday;
-        }
-        else {
-            d = 0;
-        }
-        for (; d < plain_date_1.PlainDate.DAYS_IN_WEEK; d += 1) {
-            let isSelected = false;
-            if (start) {
-                isSelected = date.equals(start);
-            }
-            else if (selectedRange) {
-                isSelected =
-                    date.equals(selectedRange.start) || date.equals(selectedRange.end);
-            }
-            let isInRange = false;
-            let isRangeStart = false;
-            let isRangeEnd = false;
-            let isInRangePreview = false;
-            let isRangePreviewStart = false;
-            let isRangePreviewEnd = false;
-            if (newRange) {
-                isInRangePreview = newRange.contains(date);
-                isRangePreviewStart = date.equals(newRange.start);
-                isRangePreviewEnd = date.equals(newRange.end);
-            }
-            else if (start) {
-                isInRangePreview = date.equals(start);
-                isRangePreviewStart = isInRangePreview;
-                isRangePreviewEnd = isInRangePreview;
-            }
-            else if (selectedRange) {
-                isInRange = selectedRange.contains(date);
-                isRangeStart = date.equals(selectedRange.start);
-                isRangeEnd = date.equals(selectedRange.end);
-            }
-            renderedDays.push((0, jsx_runtime_1.jsx)(calendar_day_1.CalendarDay, { date: date, isCurrent: date.equals(currentDate), isFocusable: date.equals(focusDate), isSelected: isSelected, isInRange: isInRange, isRangeStart: isRangeStart, isRangeEnd: isRangeEnd, isInRangePreview: isInRangePreview, isRangePreviewStart: isRangePreviewStart, isRangePreviewEnd: isRangePreviewEnd, onPick: handleDayPick, onHover: handleDayHover }, `day-${date.toISOString()}`));
-            date = date.addDays(1);
-        }
-        renderedWeeks.push((0, jsx_runtime_1.jsx)(calendar_row_1.CalendarRow, { children: renderedDays }, `week-${w}`));
-    }
-    (0, react_1.useEffect)(() => {
-        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 === null || value === void 0 ? void 0 : value.start]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "dc-date-picker", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { locale: locale, nextYearButtonLabel: nextYearButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, prevYearButtonLabel: prevYearButtonLabel, prevMonthButtonLabel: prevMonthButtonLabel, focusDate: focusDate, onChangeFocusDate: (focusDate) => {
-                    setFocusDate(focusDate);
-                    if (start) {
-                        setEnd(focusDate);
-                    }
-                }, children: renderedWeeks }), footer && (0, jsx_runtime_1.jsx)("div", { className: "dc-date-picker__footer", children: footer })] }));
-}
-exports.DateRangePicker = DateRangePicker;

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

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

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

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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-range-picker"), exports);

package/components/datetime-input/date-component-input.d.ts

@@ -1,14 +0,0 @@
-import { ChangeEventHandler, CSSProperties } from 'react';
-export interface DatePartInputProps {
-    id?: string;
-    style?: CSSProperties;
-    className?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    label?: string;
-    placeholder?: string;
-    name: string;
-    value: string;
-    onChange: ChangeEventHandler<HTMLInputElement>;
-}
-export declare function DateComponentInput({ id, style, className, disabled, readOnly, label, placeholder, name, value, onChange, }: DatePartInputProps): JSX.Element;

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateComponentInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_helpers_1 = require("../../lib/react-helpers");
-function DateComponentInput({ id, style, className, disabled, readOnly, label, placeholder, name, value, onChange, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, react_helpers_1.classNames)(className, 'dc-date-component-input'), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: value || placeholder }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", "aria-label": label, placeholder: placeholder, autoComplete: "off", disabled: disabled, readOnly: readOnly, value: value, name: name, onChange: onChange })] }));
-}
-exports.DateComponentInput = DateComponentInput;

package/components/datetime-input/date-components.d.ts

@@ -1,28 +0,0 @@
-export declare type DateComponent = 'year' | 'month' | 'day' | 'hour' | 'minute';
-export declare type DateComponentOptions = {
-    min: number;
-    max: number;
-    digits: number;
-};
-export declare type DateComponentsValues = {
-    [component in DateComponent]?: string | number | null;
-};
-export declare class DateComponents {
-    year?: number;
-    month?: number;
-    day?: number;
-    hour?: number;
-    minute?: number;
-    constructor(values?: DateComponentsValues);
-    static options: Record<DateComponent, DateComponentOptions>;
-    static makeFormDatetimeISO(dateString?: string | null): DateComponents;
-    static toDateComponentValue(value: string | number | null | undefined): number | undefined;
-    getDisplayedValue(component: DateComponent): string;
-    updatingValue(value: string | number | null | undefined, component: DateComponent): DateComponents;
-    isValidDatetime(): boolean;
-    isValidDate(): boolean;
-    isValidTime(): boolean;
-    toDatetimeISO(): string;
-    toDateISO(): string;
-    toTimeISO(): string;
-}

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

@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateComponents = void 0;
-class DateComponents {
-    constructor(values) {
-        if (values) {
-            for (const [key, value] of Object.entries(values)) {
-                this[key] = DateComponents.toDateComponentValue(value);
-            }
-        }
-    }
-    static makeFormDatetimeISO(dateString) {
-        const dateTimeRegex = /^\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}$/;
-        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-        const timeRegex = /^\d{2}:\d{2}$/;
-        let year = '';
-        let month = '';
-        let day = '';
-        let hour = '';
-        let minute = '';
-        if (dateString) {
-            if (dateString.match(dateTimeRegex)) {
-                const [dateISO, timeISO] = dateString.split(/[ T]/);
-                [year, month, day] = dateISO.split('-');
-                [hour, minute] = timeISO.split(':');
-            }
-            else if (dateString.match(dateRegex)) {
-                [year, month, day] = dateString.split('-');
-            }
-            else if (dateString.match(timeRegex)) {
-                [hour, minute] = dateString.split(':');
-            }
-        }
-        return new DateComponents({ year, month, day, hour, minute });
-    }
-    static toDateComponentValue(value) {
-        if (value == null || value === '') {
-            return undefined;
-        }
-        const numericValue = Number(value);
-        return Number.isNaN(numericValue) ? undefined : numericValue >> 0;
-    }
-    getDisplayedValue(component) {
-        const value = this[component];
-        const options = DateComponents.options[component];
-        return value != null ? String(value).padStart(options.digits, '0') : '';
-    }
-    updatingValue(value, component) {
-        return new DateComponents({ ...this, [component]: value });
-    }
-    isValidDatetime() {
-        return this.isValidDate() && this.isValidTime();
-    }
-    isValidDate() {
-        if (this.year == null || this.month == null || this.day == null) {
-            return false;
-        }
-        const isYearValid = this.year >= DateComponents.options.year.min &&
-            this.year <= DateComponents.options.year.max;
-        const isMonthValid = this.month >= DateComponents.options.month.min &&
-            this.month <= DateComponents.options.month.max;
-        const isDayValid = this.day >= DateComponents.options.day.min &&
-            this.day <= new Date(this.year, this.month, 0).getUTCDate();
-        return isYearValid && isMonthValid && isDayValid;
-    }
-    isValidTime() {
-        if (this.hour == null || this.minute == null) {
-            return false;
-        }
-        const isHourValid = this.hour >= DateComponents.options.hour.min &&
-            this.hour <= DateComponents.options.hour.max;
-        const isMinuteValid = this.minute >= DateComponents.options.minute.min &&
-            this.minute <= DateComponents.options.minute.max;
-        return isHourValid && isMinuteValid;
-    }
-    toDatetimeISO() {
-        const dateISO = this.toDateISO();
-        const timeISO = this.toTimeISO();
-        return dateISO && timeISO ? dateISO + 'T' + timeISO : '';
-    }
-    toDateISO() {
-        return this.isValidDate()
-            ? this.getDisplayedValue('year') +
-                '-' +
-                this.getDisplayedValue('month') +
-                '-' +
-                this.getDisplayedValue('day')
-            : '';
-    }
-    toTimeISO() {
-        return this.isValidTime()
-            ? this.getDisplayedValue('hour') + ':' + this.getDisplayedValue('minute')
-            : '';
-    }
-}
-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.d.ts

@@ -1,22 +0,0 @@
-import { ComponentPropsWithRef } from 'react';
-import { TextInputProps } from '../text-input';
-import { DateComponent, DateComponents } from './date-components';
-export interface DatetimeInputProps extends ComponentPropsWithRef<'div'> {
-    size?: TextInputProps['size'];
-    type?: 'date' | 'time' | 'datetime';
-    invalid?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    ids?: {
-        [component in DateComponent]?: string;
-    };
-    ariaLabels?: {
-        [component in DateComponent]?: string;
-    };
-    placeholders?: {
-        [component in DateComponent]?: string;
-    };
-    value: DateComponents;
-    onChangeValue(value: DateComponents): void;
-}
-export declare const DatetimeInput: import("react").ForwardRefExoticComponent<Pick<DatetimeInputProps, "slot" | "style" | "title" | "className" | "color" | "id" | "lang" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "size" | "hidden" | "disabled" | "translate" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "invalid" | "readOnly" | "onChangeValue" | "ids" | "ariaLabels" | "placeholders"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,173 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatetimeInput = 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");
-const keyboard_helpers_1 = require("../../lib/keyboard-helpers");
-const date_components_1 = require("./date-components");
-const date_component_input_1 = require("./date-component-input");
-const defaultAriaLabels = {
-    year: 'year',
-    month: 'month',
-    day: 'day',
-    hour: 'hour',
-    minute: 'minute',
-};
-const defaultPlaceholders = {
-    year: 'Year',
-    month: 'Month',
-    day: 'Day',
-    hour: '--',
-    minute: '--',
-};
-exports.DatetimeInput = (0, react_1.forwardRef)(function DatetimeInput({ size = 'md', type = 'datetime', invalid, disabled, readOnly, ids, ariaLabels = defaultAriaLabels, placeholders = defaultPlaceholders, value: dateComponents, onChangeValue: onChangeDateComponents, className, ...props }, ref) {
-    const containerRef = (0, react_1.useRef)(null);
-    const inputsRef = (0, react_1.useRef)([]);
-    const cancelBlur = (0, react_1.useRef)();
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (containerRef.current) {
-            inputsRef.current = Array.from(containerRef.current.getElementsByTagName('input'));
-        }
-    }, [type]);
-    function updateDateComponents(value, component) {
-        onChangeDateComponents(dateComponents.updatingValue(value, component));
-    }
-    function getInputSiblings(input) {
-        const inputs = inputsRef.current;
-        const index = inputs.findIndex((el) => el === input);
-        if (index < 0) {
-            return { next: input, prev: input };
-        }
-        const lastIndex = inputs.length - 1;
-        return {
-            prev: inputs[index > 0 ? index - 1 : 0],
-            next: inputs[index < lastIndex ? index + 1 : lastIndex],
-        };
-    }
-    function handleFocus(event) {
-        event.target.select();
-        if ((0, guards_1.isFunction)(cancelBlur.current)) {
-            cancelBlur.current();
-        }
-        else {
-            setFocused(true);
-        }
-    }
-    function handleBlur(event) {
-        const dateComponent = event.target.name;
-        const dateComponentOptions = date_components_1.DateComponents.options[dateComponent];
-        const dateComponentValue = dateComponents[dateComponent];
-        if (dateComponentValue != null) {
-            if (dateComponentValue < dateComponentOptions.min) {
-                updateDateComponents(dateComponentOptions.min, dateComponent);
-            }
-            else if (dateComponentValue > dateComponentOptions.max) {
-                updateDateComponents(dateComponentOptions.max, dateComponent);
-            }
-        }
-        cancelBlur.current = defer(() => {
-            setFocused(false);
-            cancelBlur.current = undefined;
-        });
-    }
-    function handleKeyDown(event) {
-        const code = event.code;
-        const input = event.target;
-        const dateComponent = input.name;
-        const dateComponentOptions = date_components_1.DateComponents.options[dateComponent];
-        const dateComponentValue = dateComponents[dateComponent];
-        if (code === keyboard_helpers_1.KeyCode.arrowLeft || code === keyboard_helpers_1.KeyCode.arrowRight) {
-            event.preventDefault();
-            const siblings = getInputSiblings(input);
-            const nextFocus = code === keyboard_helpers_1.KeyCode.arrowLeft ? siblings.prev : siblings.next;
-            nextFocus.focus();
-        }
-        else if (readOnly) {
-            return;
-        }
-        else if (code === keyboard_helpers_1.KeyCode.arrowUp ||
-            code === keyboard_helpers_1.KeyCode.arrowDown ||
-            code === keyboard_helpers_1.KeyCode.backspace ||
-            code === keyboard_helpers_1.KeyCode.delete) {
-            event.preventDefault();
-            if (code === keyboard_helpers_1.KeyCode.backspace || code === keyboard_helpers_1.KeyCode.delete) {
-                updateDateComponents('', dateComponent);
-            }
-            else {
-                let dateComponentNewValue;
-                if (dateComponentValue == null) {
-                    dateComponentNewValue = getDefaultValue(dateComponent);
-                }
-                else {
-                    const step = code === keyboard_helpers_1.KeyCode.arrowUp ? 1 : -1;
-                    dateComponentNewValue = dateComponentValue + step;
-                    if (dateComponentNewValue > dateComponentOptions.max) {
-                        dateComponentNewValue = dateComponentOptions.min;
-                    }
-                    else if (dateComponentNewValue < dateComponentOptions.min) {
-                        dateComponentNewValue = dateComponentOptions.max;
-                    }
-                }
-                updateDateComponents(dateComponentNewValue, dateComponent);
-                defer(() => input.select());
-            }
-        }
-    }
-    function handleChange(event) {
-        const target = event.target;
-        if (!target.value.match(/^\d+$/)) {
-            return;
-        }
-        const dateComponent = target.name;
-        const dateComponentOptions = date_components_1.DateComponents.options[dateComponent];
-        const dateComponentNewValue = Number(target.value);
-        updateDateComponents(dateComponentNewValue, dateComponent);
-        const dateComponentNextMinValue = dateComponentNewValue * 10;
-        if (dateComponentNextMinValue > dateComponentOptions.max) {
-            const siblings = getInputSiblings(target);
-            defer(() => siblings.next.focus());
-        }
-    }
-    function renderInputsGroup(components, separator) {
-        const children = [];
-        components.forEach((dateComponent, index) => {
-            if (index) {
-                children.push((0, jsx_runtime_1.jsx)("span", { className: "dc-datetime-input__separator", children: separator }, `separator-${index}`));
-            }
-            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", { className: "dc-datetime-input__group", children: children });
-    }
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_helpers_1.classNames)(className, 'dc-datetime-input'), ref: (0, react_helpers_1.mergeRefs)(ref, containerRef), role: "group", ...props, children: (0, jsx_runtime_1.jsxs)("div", { "data-testid": "inputs-container", className: (0, react_helpers_1.classNames)('dc-input', 'dc-datetime-input__body', {
-                'dc-input_focused': focused,
-                'dc-input_disabled': disabled,
-                'dc-input_invalid': invalid,
-                [`dc-input_size_${size}`]: size,
-            }), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, children: [(type === 'date' || type === 'datetime') &&
-                    renderInputsGroup(['day', 'month', 'year'], '/'), (type === 'time' || type === 'datetime') &&
-                    renderInputsGroup(['hour', 'minute'], ':')] }) }));
-});
-function defer(callback) {
-    const timeout = window.setTimeout(callback, 1);
-    return () => {
-        window.clearTimeout(timeout);
-    };
-}
-function getDefaultValue(component) {
-    const now = new Date();
-    switch (component) {
-        case 'year':
-            return now.getFullYear();
-        case 'month':
-            return now.getMonth() + 1;
-        case 'day':
-            return now.getDate();
-        case 'hour':
-            return now.getHours();
-        case 'minute':
-            return now.getMinutes();
-    }
-}

package/components/datetime-input/index.d.ts

@@ -1,2 +0,0 @@
-export * from './datetime-input';
-export * from './date-components';

package/components/datetime-input/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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("./datetime-input"), exports);
-__exportStar(require("./date-components"), exports);

package/components/dialog/dialog.d.ts

@@ -1,19 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
-export declare type DialogProps = {
-    /**
-     * A ref to an element that should receive focus after open.
-     */
-    focusAfterOpen?: RefObject<HTMLElement>;
-    /**
-     * A ref to an element that should receive focus after close.
-     */
-    focusAfterClose?: RefObject<HTMLElement>;
-    isOpen?: boolean;
-    showCloseButton?: boolean;
-    width?: 'sm' | 'md' | 'lg' | number;
-    heading?: ReactNode;
-    description?: ReactNode;
-    footerButtons?: ReactNode;
-    onClose?(): void;
-} & ComponentPropsWithoutRef<'div'>;
-export declare function Dialog({ style, className, isOpen, showCloseButton, focusAfterOpen, focusAfterClose, width, heading, description, footerButtons, children, onClose, ...props }: DialogProps): JSX.Element | null;

package/components/dialog/dialog.js

@@ -1,62 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = 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");
-const use_disable_body_scroll_1 = require("../../hooks/use-disable-body-scroll");
-const use_esc_key_down_1 = require("../../hooks/use-esc-key-down");
-const use_focus_trap_1 = require("../../hooks/use-focus-trap");
-const portal_1 = require("../portal");
-const box_1 = require("../box");
-const button_1 = require("../button");
-const formatted_content_1 = require("../formatted-content");
-const svg_icon_1 = require("../svg-icon");
-const x_1 = require("../../bootstrap-icons/x");
-const hooks_1 = require("../../hooks");
-const DIALOG_WIDTH = {
-    sm: 320,
-    md: 640,
-    lg: 960,
-};
-function Dialog({ style, className, isOpen = false, showCloseButton = true, focusAfterOpen, focusAfterClose, width = 'md', heading, description, footerButtons, children, onClose, ...props }) {
-    const dialogRef = (0, react_1.useRef)(null);
-    const { shouldRender, animationClassName } = (0, hooks_1.useCloseAnimation)({
-        isOpen,
-        closeDurationMs: 200,
-        className: 'dc-dialog-container_with-animation',
-        openClassName: 'dc-dialog-container_open',
-        closingClassName: 'dc-dialog-container_closing',
-    });
-    (0, use_disable_body_scroll_1.useDisableBodyScroll)(isOpen);
-    (0, use_esc_key_down_1.useEscKeyDown)(() => (0, guards_1.isFunction)(onClose) && onClose(), isOpen);
-    (0, use_focus_trap_1.useFocusTrap)(dialogRef, isOpen);
-    (0, react_1.useEffect)(() => {
-        if (!shouldRender) {
-            return;
-        }
-        const focusAfterOpenEl = focusAfterOpen === null || focusAfterOpen === void 0 ? void 0 : focusAfterOpen.current;
-        const focusAfterCloseEl = focusAfterClose === null || focusAfterClose === void 0 ? void 0 : focusAfterClose.current;
-        if (focusAfterOpenEl) {
-            focusAfterOpenEl.focus();
-        }
-        return () => {
-            if (focusAfterCloseEl) {
-                focusAfterCloseEl.focus();
-            }
-        };
-    }, [shouldRender, focusAfterOpen, focusAfterClose]);
-    if (!shouldRender) {
-        return null;
-    }
-    let widthPx;
-    if (typeof width === 'string') {
-        widthPx = DIALOG_WIDTH[width] || DIALOG_WIDTH.md;
-    }
-    else {
-        widthPx = width || DIALOG_WIDTH.md;
-    }
-    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { "data-testid": "dialog-container", className: (0, react_helpers_1.classNames)('dc-dialog-container', animationClassName), children: (0, jsx_runtime_1.jsxs)(box_1.Box, { ...props, ref: dialogRef, style: { ...style, width: widthPx }, className: (0, react_helpers_1.classNames)(className, 'dc-dialog'), "aria-modal": true, role: "dialog", padding: "none", elevation: "lg", borderRadius: "lg", children: [(0, jsx_runtime_1.jsxs)("div", { className: "dc-dialog__header", children: [Boolean(heading || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "dc-dialog__header-content", children: [heading && (0, jsx_runtime_1.jsx)(formatted_content_1.Headline, { as: "h2", children: heading }), description && ((0, jsx_runtime_1.jsx)(formatted_content_1.Subheadline, { as: "div", className: "dc-dialog__description", children: description }))] })), showCloseButton && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: "dc-dialog__close-btn", size: "sm", noPadding: true, appearance: "minimal", "data-testid": "dialog-close-button", leadingIcon: (0, jsx_runtime_1.jsx)(svg_icon_1.SvgIcon, { size: "2x", icon: x_1.x }), onClick: onClose }))] }), (0, jsx_runtime_1.jsx)("div", { className: "dc-dialog__content", children: children }), footerButtons && ((0, jsx_runtime_1.jsx)("div", { className: "dc-dialog__actions", children: footerButtons }))] }) }) }));
-}
-exports.Dialog = Dialog;

package/components/dialog/index.d.ts

@@ -1 +0,0 @@
-export * from './dialog';

package/components/dialog/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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("./dialog"), exports);