draft-components 3.6.0 → 4.0.0

package/dist/components/date-range-picker-popover/date-range-picker-popover-footer.d.ts

@@ -1,4 +1,4 @@
-import { MouseEventHandler, ReactNode } from 'react';
+import { type MouseEventHandler, type ReactNode } from 'react';
 export type DateRangePickerPopoverFooterProps = {
     children?: ReactNode;
     cancelButtonLabel: ReactNode;

package/dist/components/date-range-picker-popover/date-range-picker-popover-footer.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
 import { Button } from '../button/index.js';
 export function DateRangePickerPopoverFooter({ children, cancelButtonLabel, confirmButtonLabel, onClickCancelButton, onClickConfirmButton, }) {
-    return (_jsxs("div", { className: "dc-date-range-picker-popover__footer", children: [Boolean(children) && (_jsx("div", { className: "dc-date-range-picker-popover__footer-content", children: children })), _jsx(Button, { className: "dc-date-range-picker-popover__footer-cancel", buttonStyle: "tinted", onClick: onClickCancelButton, children: cancelButtonLabel }), _jsx(Button, { className: "dc-date-range-picker-popover__footer-confirm", tint: "blue", onClick: onClickConfirmButton, children: confirmButtonLabel })] }));
+    return (_jsxs("div", { className: "dc-date-range-picker-popover__footer", children: [Boolean(children) && (_jsx("div", { className: "dc-date-range-picker-popover__footer-content", children: children })), _jsx(Button, { className: "dc-date-range-picker-popover__footer-cancel", onClick: onClickCancelButton, children: cancelButtonLabel }), _jsx(Button, { className: "dc-date-range-picker-popover__footer-confirm", tint: "blue", onClick: onClickConfirmButton, children: confirmButtonLabel })] }));
 }
+//# sourceMappingURL=date-range-picker-popover-footer.js.map

package/dist/components/date-range-picker-popover/date-range-picker-popover-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-popover-footer.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/date-range-picker-popover-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAU5C,MAAM,UAAU,4BAA4B,CAAC,EAC3C,QAAQ,EACR,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,GACc;IAClC,OAAO,CACL,eAAK,SAAS,EAAC,sCAAsC,aAClD,OAAO,CAAC,QAAQ,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,8CAA8C,YAC1D,QAAQ,GACL,CACP,EACD,KAAC,MAAM,IACL,SAAS,EAAC,6CAA6C,EACvD,OAAO,EAAE,mBAAmB,YAE3B,iBAAiB,GACX,EACT,KAAC,MAAM,IACL,SAAS,EAAC,8CAA8C,EACxD,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,oBAAoB,YAE5B,kBAAkB,GACZ,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/date-range-picker-popover/date-range-picker-popover-presets.d.ts

@@ -1,4 +1,4 @@
-import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types.js';
+import { type DateRangePickerPopoverOption, type DateRangePickerPopoverSelection } from './types.js';
 export type DateRangePickerPopoverPresetsProps = {
     isCompactView: boolean;
     customPresetLabel: string;

package/dist/components/date-range-picker-popover/date-range-picker-popover-presets.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from './types.js';
 import { useId } from 'react';
 import { findSelectedOption } from './helpers.js';
 import { Select } from '../select/index.js';
@@ -28,3 +29,4 @@ export function DateRangePickerPopoverPresets({ isCompactView, customPresetLabel
             return (_jsx("li", { children: _jsx(SelectionControl, { label: option.label, labelFor: id, children: _jsx(Radio, { icon: "check", id: id, name: name, value: preset, checked: preset === selectedPreset, onChange: handleChange }) }) }, option.preset));
         }) }));
 }
+//# sourceMappingURL=date-range-picker-popover-presets.js.map

package/dist/components/date-range-picker-popover/date-range-picker-popover-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-popover-presets.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/date-range-picker-popover-presets.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA2E,MAAM,YAAY,CAAC;AACrG,OAAO,EAAoB,KAAK,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAUjE,MAAM,UAAU,6BAA6B,CAAC,EAC5C,aAAa,EACb,iBAAiB,EACjB,OAAO,EACP,KAAK,EACL,aAAa,GACsB;IACnC,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IACnB,MAAM,IAAI,GAAG,GAAG,EAAE,cAAc,CAAC;IACjC,MAAM,cAAc,GAAG,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAEnE,SAAS,YAAY,CACnB,KAAwD;QAExD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACjC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC;QACjE,IAAI,MAAM,EAAE,CAAC;YACX,aAAa,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC,MAAM;gBACrB,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,CACL,cAAK,SAAS,EAAC,uCAAuC,YACpD,MAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,YAAY,aAEtB,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,IAAI,YAAG,iBAAiB,GAAU,EAC5D,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA4B,KAAK,EAAE,MAAM,CAAC,MAAM,YAC7C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,MAAM,CAEjB,CACV,CAAC,IACK,GACL,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,aAAI,SAAS,EAAC,uCAAuC,YAClD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACtB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;YAC7B,MAAM,EAAE,GAAG,GAAG,IAAI,IAAI,MAAM,EAAE,CAAC;YAC/B,OAAO,CACL,uBACE,KAAC,gBAAgB,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,YACjD,KAAC,KAAK,IACJ,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,KAAK,cAAc,EAClC,QAAQ,EAAE,YAAY,GACtB,GACe,IAVZ,MAAM,CAAC,MAAM,CAWjB,CACN,CAAC;QACJ,CAAC,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

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

@@ -1,26 +1,29 @@
-import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types.js';
-import { JSX, ReactNode } from 'react';
-import { PopoverAlignment, PopoverPlacement } from '../popover/index.js';
-import { DateRangePickerProps } from '../date-picker/index.js';
-export type DateRangePickerPopoverPlacement = PopoverPlacement;
-export type DateRangePickerPopoverAlignment = PopoverAlignment;
-export type DateRangePickerPopoverRenderFooter = (context: {
+import { type DateRangePickerPopoverOption, type DateRangePickerPopoverSelection } from './types.js';
+import { type JSX, type ReactNode, type RefCallback } from 'react';
+import { type PopoverPlacement } from '../popover/index.js';
+import { type DateRangePickerProps } from '../date-picker/index.js';
+export type DateRangePickerPopoverFooter = (props: {
     selection: DateRangePickerPopoverSelection | null;
 }) => ReactNode;
-export type DateRangePickerPopoverProps = {
+export type DateRangePickerPopoverChildren = (props: {
+    ref: RefCallback<HTMLElement>;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}) => JSX.Element;
+export type DateRangePickerPopoverProps = Pick<DateRangePickerProps, 'min' | 'max' | 'locale' | 'weekStartsOn' | 'prevMonthButtonLabel' | 'nextMonthButtonLabel' | 'monthSelectLabel' | 'yearInputLabel'> & {
     className?: string;
     defaultIsOpen?: boolean;
+    placement?: PopoverPlacement;
     compactViewBreakpoint?: string;
     customPreset?: string;
     customPresetLabel?: string;
-    placement?: DateRangePickerPopoverPlacement;
-    alignment?: DateRangePickerPopoverAlignment;
     cancelButtonLabel?: ReactNode;
     confirmButtonLabel?: ReactNode;
-    footer?: ReactNode | DateRangePickerPopoverRenderFooter;
     options?: DateRangePickerPopoverOption[];
-    children: JSX.Element;
     value: DateRangePickerPopoverSelection | null;
+    footer?: ReactNode | DateRangePickerPopoverFooter;
+    children: DateRangePickerPopoverChildren;
     onChangeValue: (value: DateRangePickerPopoverSelection) => void;
-} & Pick<DateRangePickerProps, 'min' | 'max' | 'locale' | 'weekStartsOn' | 'prevMonthButtonLabel' | 'nextMonthButtonLabel' | 'monthSelectLabel' | 'yearInputLabel'>;
-export declare function DateRangePickerPopover({ defaultIsOpen, compactViewBreakpoint, customPreset, customPresetLabel, placement, alignment, cancelButtonLabel, confirmButtonLabel, footer, className, options, children, value, onChangeValue, min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }: DateRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;
+};
+export declare function DateRangePickerPopover({ className, defaultIsOpen, placement, compactViewBreakpoint, customPreset, customPresetLabel, cancelButtonLabel, confirmButtonLabel, options, value, footer, children, onChangeValue, min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }: DateRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,32 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from '../date-picker/date-range.js';
+import {} from './types.js';
 import { classNames } from '../../lib/react-helpers.js';
-import { assertIfNullable } from '../../lib/helpers.js';
 import { findSelectedOption } from './helpers.js';
-import { useRef, useState } from 'react';
 import { useIsCompactView } from './use-is-compact-view.js';
+import { useMemo, useState } from 'react';
 import { Popover } from '../popover/index.js';
 import { DateRangePicker } from '../date-picker/index.js';
 import { DateRangePickerPopoverFooter } from './date-range-picker-popover-footer.js';
 import { DateRangePickerPopoverPresets } from './date-range-picker-popover-presets.js';
-export function DateRangePickerPopover({ defaultIsOpen = false, compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', placement = 'bottom', alignment = 'start', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', footer = null, className, options = [], children, value, onChangeValue, 
+export function DateRangePickerPopover({ className, defaultIsOpen = false, placement = 'bottom-start', compactViewBreakpoint = '(max-width: 599px)', customPreset = 'custom', customPresetLabel = 'Custom date preset', cancelButtonLabel = 'Cancel', confirmButtonLabel = 'Confirm', options = [], value, footer, children, onChangeValue, 
 // DateRangePickerProps
 min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, monthSelectLabel, yearInputLabel, }) {
     const [selection, setSelection] = useState(value);
-    const popoverRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(defaultIsOpen);
+    const popoverApi = useMemo(() => ({
+        open: () => {
+            setIsOpen(false);
+        },
+        close: () => {
+            setIsOpen(false);
+        },
+        toggle: () => {
+            setIsOpen((isOpen) => !isOpen);
+        },
+    }), [setIsOpen]);
     const isCompactView = useIsCompactView(compactViewBreakpoint);
-    function getPopover() {
-        const popover = popoverRef.current;
-        assertIfNullable(popover, 'Popover ref was not set');
-        return popover;
-    }
     function handleClickCancelButton() {
-        getPopover().close();
+        popoverApi.close();
     }
     function handleClickConfirmButton() {
         if (selection) {
             onChangeValue(selection);
         }
-        getPopover().close();
+        popoverApi.close();
     }
     function handleChangeDateRange(range) {
         const selection = { range, preset: customPreset };
@@ -44,7 +51,6 @@ min, max, locale, weekStartsOn, prevMonthButtonLabel, nextMonthButtonLabel, mont
     return (_jsxs(Popover, { className: classNames(className, {
             'dc-date-range-picker-popover': true,
             'dc-date-range-picker-popover_compact': isCompactView,
-        }), ref: popoverRef, placement: placement, alignment: alignment, anchor: children, defaultIsOpen: defaultIsOpen, onOpen: () => setSelection(value), children: [options.length > 0 && (_jsx(DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), _jsx(DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), _jsx(DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function'
-                    ? footer({ selection })
-                    : footer })] }));
+        }), "data-testid": "date-range-picker-popover", placement: placement, isOpen: isOpen, onClose: popoverApi.close, onUnmount: () => setSelection(value), renderAnchor: ({ ref }) => children({ ref, ...popoverApi }), children: [options.length > 0 && (_jsx(DateRangePickerPopoverPresets, { isCompactView: isCompactView, customPresetLabel: customPresetLabel, options: options, value: selection, onChangeValue: setSelection })), _jsx(DateRangePicker, { className: "dc-date-range-picker-popover__calendar", min: min, max: max, locale: locale, weekStartsOn: weekStartsOn, prevMonthButtonLabel: prevMonthButtonLabel, nextMonthButtonLabel: nextMonthButtonLabel, monthSelectLabel: monthSelectLabel, yearInputLabel: yearInputLabel, value: selection && selection.range, onChangeValue: handleChangeDateRange }), _jsx(DateRangePickerPopoverFooter, { cancelButtonLabel: cancelButtonLabel, confirmButtonLabel: confirmButtonLabel, onClickCancelButton: handleClickCancelButton, onClickConfirmButton: handleClickConfirmButton, children: typeof footer === 'function' ? footer({ selection }) : footer })] }));
 }
+//# sourceMappingURL=date-range-picker-popover.js.map

package/dist/components/date-range-picker-popover/date-range-picker-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker-popover.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/date-range-picker-popover.tsx"],"names":[],"mappings":"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"}

package/dist/components/date-range-picker-popover/helpers.d.ts

@@ -1,2 +1,2 @@
-import { DateRangePickerPopoverOption, DateRangePickerPopoverSelection } from './types.js';
+import { type DateRangePickerPopoverOption, type DateRangePickerPopoverSelection } from './types.js';
 export declare function findSelectedOption(selection: DateRangePickerPopoverSelection | null, options: DateRangePickerPopoverOption[]): DateRangePickerPopoverOption | null;

package/dist/components/date-range-picker-popover/helpers.js

@@ -1,3 +1,4 @@
+import {} from './types.js';
 export function findSelectedOption(selection, options) {
     if (!selection) {
         return null;
@@ -9,3 +10,4 @@ export function findSelectedOption(selection, options) {
     });
     return selectedOption || null;
 }
+//# sourceMappingURL=helpers.js.map

package/dist/components/date-range-picker-popover/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2E,MAAM,YAAY,CAAC;AAErG,MAAM,UAAU,kBAAkB,CAChC,SAAiD,EACjD,OAAuC;IAEvC,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;QAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,OAAO,CACL,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,CAAC,KAAK;eAClC,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,KAAK,CAAC,GAAG,CACrC,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,cAAc,IAAI,IAAI,CAAC;AAChC,CAAC"}

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

@@ -1,2 +1,3 @@
 export * from './types.js';
 export * from './date-range-picker-popover.js';
+//# sourceMappingURL=index.js.map

package/dist/components/date-range-picker-popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gCAAgC,CAAC"}

package/dist/components/date-range-picker-popover/types.d.ts

@@ -1,4 +1,4 @@
-import { DateISORange } from '../date-picker/date-range.js';
+import { type DateISORange } from '../date-picker/date-range.js';
 export type DateRangePickerPopoverSelection = {
     preset: string;
     range: DateISORange;

package/dist/components/date-range-picker-popover/types.js

@@ -1 +1,2 @@
-export {};
+import {} from '../date-picker/date-range.js';
+//# sourceMappingURL=types.js.map

package/dist/components/date-range-picker-popover/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/types.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,MAAM,8BAA8B,CAAC"}

package/dist/components/date-range-picker-popover/use-is-compact-view.js

@@ -6,7 +6,12 @@ export function useIsCompactView(breakpoint) {
         }
         return null;
     }, [breakpoint]);
-    const [isCompactView, setIsCompactView] = useState(() => compactViewMediaQuery?.matches || false);
+    const [isCompactView, setIsCompactView] = useState(() => {
+        if (compactViewMediaQuery) {
+            return compactViewMediaQuery.matches;
+        }
+        return false;
+    });
     useEffect(() => {
         if (compactViewMediaQuery) {
             const handleChange = () => {
@@ -20,3 +25,4 @@ export function useIsCompactView(breakpoint) {
     }, [compactViewMediaQuery]);
     return isCompactView;
 }
+//# sourceMappingURL=use-is-compact-view.js.map

package/dist/components/date-range-picker-popover/use-is-compact-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-is-compact-view.js","sourceRoot":"","sources":["../../../src/components/date-range-picker-popover/use-is-compact-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAAC,UAAkB;IACjD,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,OAAO,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtD,IAAI,qBAAqB,EAAE,CAAC;YAC1B,OAAO,qBAAqB,CAAC,OAAO,CAAC;QACvC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,qBAAqB,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAG,GAAG,EAAE;gBACxB,gBAAgB,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAClD,CAAC,CAAC;YAEF,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAC/D,OAAO,GAAG,EAAE;gBACV,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YACpE,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC;IAE5B,OAAO,aAAa,CAAC;AACvB,CAAC"}

package/dist/components/dialog/dialog-body.d.ts

@@ -1,5 +1,10 @@
-import { ComponentPropsWithoutRef } from 'react';
-type DialogBodyHTMLProps = ComponentPropsWithoutRef<'div'>;
-export type DialogBodyProps = DialogBodyHTMLProps;
-export declare function DialogBody({ className, children, }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+type DialogBodyHTMLProps = ComponentProps<'div'>;
+type DialogBodyBaseProps = {
+    hasTopDelimiter?: boolean;
+    hasBottomDelimiter?: boolean;
+    shouldShowScrollShadow?: boolean;
+};
+export type DialogBodyProps = DialogBodyBaseProps & Omit<DialogBodyHTMLProps, keyof DialogBodyBaseProps>;
+export declare function DialogBody({ className, hasTopDelimiter: hasBorderTop, hasBottomDelimiter: hasBorderBottom, shouldShowScrollShadow, ...props }: DialogBodyProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dialog/dialog-body.js

@@ -1,7 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export function DialogBody({ className, children, }) {
+import { useDialogContext } from './dialog-context.js';
+export function DialogBody({ className, hasTopDelimiter: hasBorderTop, hasBottomDelimiter: hasBorderBottom, shouldShowScrollShadow, ...props }) {
     const ref = useRef(null);
-    return (_jsx("div", { ref: ref, className: classNames('dc-dialog-body', className), children: children }));
+    const { setIsBodyHasScroll: setShouldShowScrollShadow } = useDialogContext();
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) {
+            return;
+        }
+        if (shouldShowScrollShadow) {
+            const ro = new ResizeObserver(() => {
+                setShouldShowScrollShadow(el.scrollHeight !== el.offsetHeight);
+            });
+            ro.observe(el);
+            return () => {
+                setShouldShowScrollShadow(false);
+                ro.disconnect();
+            };
+        }
+    }, [shouldShowScrollShadow, setShouldShowScrollShadow]);
+    return (_jsx("div", { ref: ref, className: classNames(className, {
+            'dc-dialog__body': true,
+            'dc-dialog__body_has_top-delimiter': hasBorderTop,
+            'dc-dialog__body_has_bottom-delimiter': hasBorderBottom,
+        }), ...props }));
 }
+//# sourceMappingURL=dialog-body.js.map

package/dist/components/dialog/dialog-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-body.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAcvD,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,eAAe,EAAE,YAAY,EAC7B,kBAAkB,EAAE,eAAe,EACnC,sBAAsB,EACtB,GAAG,KAAK,EACQ;IAChB,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAChD,MAAM,EAAE,kBAAkB,EAAE,yBAAyB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE,EAAE,CAAC;YACR,OAAO;QACT,CAAC;QAED,IAAI,sBAAsB,EAAE,CAAC;YAC3B,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBACjC,yBAAyB,CAAC,EAAE,CAAC,YAAY,KAAK,EAAE,CAAC,YAAY,CAAC,CAAC;YACjE,CAAC,CAAC,CAAC;YACH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAEf,OAAO,GAAG,EAAE;gBACV,yBAAyB,CAAC,KAAK,CAAC,CAAC;gBACjC,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,CAAC,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAExD,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,iBAAiB,EAAE,IAAI;YACvB,mCAAmC,EAAE,YAAY;YACjD,sCAAsC,EAAE,eAAe;SACxD,CAAC,KACE,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/dialog/dialog-context.d.ts

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type DialogContextValue = {
     titleId: string;
-    descriptionId: string;
     isOpen: boolean;
     onClose: () => void;
+    isBodyHasScroll: boolean;
+    setIsBodyHasScroll: (value: boolean) => void;
 };
 export declare function useDialogContext(): DialogContextValue;
-export declare function DialogContextProvider(props: {
+export declare function DialogContextProvider({ children, titleId, isOpen, onClose, }: {
     children: ReactNode;
     titleId: string;
-    descriptionId: string;
     isOpen: boolean;
     onClose: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/dialog/dialog-context.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
+import { createContext, useContext, useState } from 'react';
 const DialogContext = createContext(null);
 export function useDialogContext() {
     const context = useContext(DialogContext);
@@ -8,11 +8,14 @@ export function useDialogContext() {
     }
     return context;
 }
-export function DialogContextProvider(props) {
+export function DialogContextProvider({ children, titleId, isOpen, onClose, }) {
+    const [isBodyHasScroll, setIsBodyHasScroll] = useState(false);
     return (_jsx(DialogContext.Provider, { value: {
-            titleId: props.titleId,
-            descriptionId: props.descriptionId,
-            isOpen: props.isOpen,
-            onClose: props.onClose,
-        }, children: props.children }));
+            titleId,
+            isOpen,
+            onClose,
+            isBodyHasScroll,
+            setIsBodyHasScroll,
+        }, children: children }));
 }
+//# sourceMappingURL=dialog-context.js.map

package/dist/components/dialog/dialog-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-context.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU5E,MAAM,aAAa,GAAG,aAAa,CAA4B,IAAI,CAAC,CAAC;AAErE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IACzE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,EACpC,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,GAMR;IACC,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,OAAO;YACP,MAAM;YACN,OAAO;YACP,eAAe;YACf,kBAAkB;SACnB,YAEA,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC"}

package/dist/components/dialog/dialog-footer.d.ts

@@ -1,7 +1,5 @@
-import { ComponentPropsWithoutRef } from 'react';
-type DialogFooterHTMLProps = ComponentPropsWithoutRef<'div'>;
-export type DialogFooterProps = {
-    hasDivider?: boolean;
-} & DialogFooterHTMLProps;
-export declare function DialogFooter({ className, hasDivider, children, }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
+import { type ComponentProps } from 'react';
+type DialogFooterHTMLProps = ComponentProps<'div'>;
+export type DialogFooterProps = DialogFooterHTMLProps;
+export declare function DialogFooter({ className, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dialog/dialog-footer.js

@@ -1,8 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
-export function DialogFooter({ className, hasDivider, children, }) {
+import { useDialogContext } from './dialog-context.js';
+import {} from 'react';
+export function DialogFooter({ className, ...props }) {
+    const { isBodyHasScroll } = useDialogContext();
     return (_jsx("div", { className: classNames(className, {
-            'dc-dialog-footer': true,
-            'dc-dialog-footer_has_divider': hasDivider,
-        }), children: children }));
+            'dc-dialog__footer': true,
+            'dc-dialog__footer_has_scroll-shadow': isBodyHasScroll,
+        }), ...props }));
 }
+//# sourceMappingURL=dialog-footer.js.map

package/dist/components/dialog/dialog-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-footer.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAuB,MAAM,OAAO,CAAC;AAM5C,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,eAAe,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC/C,OAAO,CACL,cACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,mBAAmB,EAAE,IAAI;YACzB,qCAAqC,EAAE,eAAe;SACvD,CAAC,KACE,KAAK,GACT,CACH,CAAC;AACJ,CAAC"}

package/dist/components/dialog/dialog-header.d.ts

@@ -1,10 +1,10 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-type DialogHeaderHTMLProps = ComponentPropsWithoutRef<'div'>;
-type DialogHeaderBaseProps = Omit<DialogHeaderHTMLProps, 'title'>;
-export type DialogHeaderProps = {
-    hasDivider?: boolean;
+import { type ComponentProps, type ReactNode } from 'react';
+type DialogHeaderHTMLProps = ComponentProps<'div'>;
+type DialogHeaderBaseProps = {
     title?: ReactNode;
-    subtitle?: ReactNode;
-} & DialogHeaderBaseProps;
-export declare function DialogHeader({ className, hasDivider, title, subtitle, children, }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    hasDivider?: boolean;
+    contentAlign?: 'left' | 'right' | 'center';
+};
+export type DialogHeaderProps = DialogHeaderBaseProps & Omit<DialogHeaderHTMLProps, keyof DialogHeaderBaseProps>;
+export declare function DialogHeader({ className, title, children, contentAlign: align, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dialog/dialog-header.js

@@ -1,18 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from '../../lib/react-helpers.js';
 import { useDialogContext } from './dialog-context.js';
+import {} from 'react';
 import { IconButton } from '../button/index.js';
 import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
-export function DialogHeader({ className, hasDivider, title, subtitle, children, }) {
-    const { titleId, descriptionId, onClose } = useDialogContext();
+export function DialogHeader({ className, title, children, contentAlign: align = 'left', ...props }) {
+    const { titleId, isBodyHasScroll, onClose } = useDialogContext();
     return (_jsxs("div", { className: classNames(className, {
-            'dc-dialog-header': true,
-            'dc-dialog-header_has_divider': hasDivider,
-        }), children: [title
-                ? _jsx("h3", { id: titleId, className: "dc-dialog-header__title", children: title })
-                : null, _jsx(IconButton, { buttonStyle: "plain", className: "dc-dialog-header__close-button", onClick: () => onClose(), children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) }), subtitle
-                ? _jsx("div", { id: descriptionId, className: "dc-dialog-header__subtitle", children: subtitle })
-                : null, children
-                ? _jsx("div", { className: "dc-dialog-header__body", children: children })
+            'dc-dialog__section': true,
+            'dc-dialog__header': true,
+            'dc-dialog__header_has_scroll-shadow': isBodyHasScroll,
+            [`dc-dialog__header_content-align_${align}`]: align,
+        }), ...props, children: [title
+                ? _jsx("h2", { id: titleId, className: "dc-dialog__title", children: title })
+                : null, _jsx(IconButton, { className: "dc-dialog__close-button", buttonStyle: "plain", onClick: onClose, children: _jsx(XMarkIcon, { width: 18, height: 18, strokeWidth: 2 }) }), children
+                ? _jsx("div", { className: "dc-dialog__header-body", children: children })
                 : null] }));
 }
+//# sourceMappingURL=dialog-header.js.map

package/dist/components/dialog/dialog-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-header.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog-header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAcpE,MAAM,UAAU,YAAY,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,KAAK,GAAG,MAAM,EAC5B,GAAG,KAAK,EACU;IAClB,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEjE,OAAO,CACL,eACE,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE;YAC/B,oBAAoB,EAAE,IAAI;YAC1B,mBAAmB,EAAE,IAAI;YACzB,qCAAqC,EAAE,eAAe;YACtD,CAAC,mCAAmC,KAAK,EAAE,CAAC,EAAE,KAAK;SACpD,CAAC,KACE,KAAK,aAER,KAAK;gBACJ,CAAC,CAAC,aAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAM;gBAC5D,CAAC,CAAC,IAAI,EACR,KAAC,UAAU,IACT,SAAS,EAAC,yBAAyB,EACnC,WAAW,EAAC,OAAO,EACnB,OAAO,EAAE,OAAO,YAEhB,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,GAAI,GACzC,EACZ,QAAQ;gBACP,CAAC,CAAC,cAAK,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAO;gBAC1D,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC"}