@lumx/react 3.20.1-alpha.32 → 3.20.1-alpha.33

package/_internal/packages/lumx-react/src/components/date-picker/DatePickerControlled-4af66187.js

@@ -0,0 +1,223 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { getMonthCalendar } from '../../utils/date/getMonthCalendar-f0443cdb.js';
+import { isSameDay } from '../../utils/date/isSameDay-487527e8.js';
+import { getCurrentLocale } from '../../utils/locale/getCurrentLocale-14390eeb.js';
+import { parseLocale } from '../../utils/locale/parseLocale-7eca7fcd.js';
+import { usePreviousValue } from '../../hooks/usePreviousValue-6f3bb7d6.js';
+import { getYearDisplayName } from '../../utils/date/getYearDisplayName-ed03c692.js';
+import { onEnterPressed } from '@lumx/core/js/utils';
+import { addMonthResetDay } from '../../utils/date/addMonthResetDay-e429bd82.js';
+import { formatDayNumber } from '../../utils/date/formatDayNumber-db88500d.js';
+import { VISUALLY_HIDDEN } from '../../constants-6af61e2f.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { CLASSNAME } from './constants-f8c49b24.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { IconButton } from '../button/IconButton-a740ce59.js';
+import { mdiChevronRight } from '../../../../lumx-icons/dist/esm/chevron-right-aeba575c.js';
+import { mdiChevronLeft } from '../../../../lumx-icons/dist/esm/chevron-left-e9c3b1e0.js';
+import { FlexBox } from '../flex-box/FlexBox-57fe8191.js';
+import { Toolbar } from '../toolbar/Toolbar-b30ac67a.js';
+import { Emphasis } from '@lumx/core/js/constants';
+import { TextField } from '../text-field/TextField-843f8e28.js';
+import { Text } from '../text/Text-d8efb3ca.js';
+import { Button } from '../button/Button-86d16087.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'DatePickerControlled';
+
+/**
+ * DatePickerControlled component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const DatePickerControlled = forwardRef((props, ref) => {
+  const {
+    locale = getCurrentLocale(),
+    maxDate,
+    minDate,
+    nextButtonProps,
+    onChange,
+    onNextMonthChange,
+    onPrevMonthChange,
+    previousButtonProps,
+    selectedMonth,
+    todayOrSelectedDateRef,
+    value,
+    onMonthChange,
+    style
+  } = props;
+  const {
+    weeks,
+    weekDays
+  } = React__default.useMemo(() => {
+    const localeObj = parseLocale(locale);
+    return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
+  }, [locale, minDate, maxDate, selectedMonth]);
+  const selectedYear = selectedMonth.getFullYear();
+  const formattedYear = selectedMonth.toLocaleDateString(locale, {
+    year: 'numeric'
+  }).slice(0, 4);
+  const [currentYear, setCurrentYear] = React__default.useState(String(selectedYear));
+
+  // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.
+  const updateMonthOffset = React__default.useCallback(newYearValue => {
+    const yearNumber = Number(newYearValue);
+    if (yearNumber < 0 && yearNumber >= 9999) {
+      return;
+    }
+    const previousYearNumber = selectedMonth.getFullYear();
+    const offset = (yearNumber - previousYearNumber) * 12;
+    onMonthChange?.(addMonthResetDay(selectedMonth, offset));
+  }, [selectedMonth, onMonthChange]);
+  const onYearChange = React__default.useCallback((newYearValue, _, event) => {
+    setCurrentYear(newYearValue);
+
+    // Detect if change is coming from the spin up/down arrows
+    const inputType = event?.nativeEvent?.inputType;
+    if (
+    // Chrome/Safari
+    !inputType ||
+    // Firefox
+    inputType === 'insertReplacementText') {
+      updateMonthOffset(newYearValue);
+    }
+  }, [updateMonthOffset]);
+  const updateYear = React__default.useCallback(() => {
+    updateMonthOffset(currentYear);
+  }, [updateMonthOffset, currentYear]);
+  const updateYearOnEnterPressed = React__default.useMemo(() => onEnterPressed(updateYear), [updateYear]);
+  const monthYear = selectedMonth.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long'
+  });
+
+  // Update current year when selected year changes
+  React__default.useEffect(() => {
+    setCurrentYear(String(selectedYear));
+  }, [selectedYear]);
+  const prevSelectedMonth = usePreviousValue(selectedMonth);
+  const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);
+
+  // Only set the aria-live after the month has changed otherwise it can get announced on mount when used in the popover dialog
+  const [labelAriaLive, setLabelAriaLive] = React__default.useState();
+  React__default.useEffect(() => {
+    if (monthHasChanged) setLabelAriaLive('polite');
+  }, [monthHasChanged]);
+  const yearLabel = getYearDisplayName(locale);
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: `${CLASSNAME}`,
+    style: style,
+    children: [/*#__PURE__*/jsx(Toolbar, {
+      className: `${CLASSNAME}__toolbar`,
+      after: /*#__PURE__*/jsx(IconButton, {
+        ...nextButtonProps,
+        emphasis: Emphasis.low,
+        icon: mdiChevronRight,
+        onClick: onNextMonthChange
+      }),
+      before: /*#__PURE__*/jsx(IconButton, {
+        ...previousButtonProps,
+        emphasis: Emphasis.low,
+        icon: mdiChevronLeft,
+        onClick: onPrevMonthChange
+      }),
+      label: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("span", {
+          "aria-live": labelAriaLive,
+          className: onMonthChange ? VISUALLY_HIDDEN : '',
+          dir: "auto",
+          children: monthYear
+        }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
+          className: `${CLASSNAME}__month`,
+          orientation: "horizontal",
+          hAlign: "center",
+          gap: "regular",
+          vAlign: "center",
+          dir: "auto",
+          children: RegExp(`(.*)(${formattedYear})(.*)`).exec(monthYear)?.slice(1).filter(part => part !== '').map(part => part === formattedYear ? /*#__PURE__*/jsx(TextField, {
+            value: currentYear,
+            "aria-label": yearLabel,
+            onChange: onYearChange,
+            type: "number",
+            max: 9999,
+            min: 0,
+            onBlur: updateYear,
+            onKeyPress: updateYearOnEnterPressed,
+            className: `${CLASSNAME}__year`
+          }, "year") : /*#__PURE__*/jsx(Text, {
+            as: "p",
+            children: part
+          }, part))
+        })]
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: `${CLASSNAME}__calendar`,
+      children: [/*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`,
+        children: weekDays.map(({
+          letter,
+          number,
+          long
+        }) => /*#__PURE__*/jsxs("div", {
+          className: `${CLASSNAME}__day-wrapper`,
+          children: [/*#__PURE__*/jsx("span", {
+            className: `${CLASSNAME}__week-day`,
+            "aria-hidden": true,
+            children: letter.toLocaleUpperCase()
+          }), /*#__PURE__*/jsx("span", {
+            className: "visually-hidden",
+            children: long
+          })]
+        }, number))
+      }), /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`,
+        children: weeks.flatMap((week, weekIndex) => {
+          return weekDays.map((weekDay, dayIndex) => {
+            const {
+              date,
+              isOutOfRange
+            } = week[weekDay.number] || {};
+            const key = `${weekIndex}-${dayIndex}`;
+            const isToday = !isOutOfRange && date && isSameDay(date, new Date());
+            const isSelected = date && value && isSameDay(value, date);
+            return /*#__PURE__*/jsx("div", {
+              className: `${CLASSNAME}__day-wrapper`,
+              children: date && /*#__PURE__*/jsxs(Button, {
+                ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
+                className: classNames(`${CLASSNAME}__month-day`, {
+                  [`${CLASSNAME}__month-day--is-today`]: isToday
+                }),
+                disabled: isOutOfRange,
+                isSelected: isSelected,
+                emphasis: "low",
+                onClick: () => onChange(date),
+                children: [/*#__PURE__*/jsx("span", {
+                  "aria-hidden": true,
+                  children: formatDayNumber(locale, date)
+                }), /*#__PURE__*/jsx("span", {
+                  className: VISUALLY_HIDDEN,
+                  children: date.toLocaleDateString(locale, {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric'
+                  })
+                })]
+              })
+            }, key);
+          });
+        })
+      })]
+    })]
+  });
+});
+DatePickerControlled.displayName = COMPONENT_NAME;
+DatePickerControlled.className = CLASSNAME;
+
+export { DatePickerControlled };
+//# sourceMappingURL=DatePickerControlled-4af66187.js.map

package/_internal/packages/lumx-react/src/components/date-picker/DatePickerControlled-4af66187.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerControlled-4af66187.js","sources":["../../../../../../../src/components/date-picker/DatePickerControlled.tsx"],"sourcesContent":["import React, { KeyboardEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n    Button,\n    DatePickerProps,\n    Emphasis,\n    FlexBox,\n    IconButton,\n    Text,\n    TextField,\n    TextFieldProps,\n    Toolbar,\n} from '@lumx/react';\nimport { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';\nimport { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';\nimport { isSameDay } from '@lumx/react/utils/date/isSameDay';\nimport { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';\nimport { parseLocale } from '@lumx/react/utils/locale/parseLocale';\nimport { Locale } from '@lumx/react/utils/locale/types';\nimport { usePreviousValue } from '@lumx/react/hooks/usePreviousValue';\nimport { getYearDisplayName } from '@lumx/react/utils/date/getYearDisplayName';\nimport { onEnterPressed } from '@lumx/core/js/utils';\nimport { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';\nimport { formatDayNumber } from '@lumx/react/utils/date/formatDayNumber';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { CLASSNAME } from './constants';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerControlledProps extends DatePickerProps {\n    /** Selected month to display. */\n    selectedMonth: Date;\n    /** On previous month change callback. */\n    onPrevMonthChange(): void;\n    /** On next month change callback. */\n    onNextMonthChange(): void;\n    /** On month/year change callback. */\n    onMonthChange?: (newMonth: Date) => void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DatePickerControlled';\n\n/**\n * DatePickerControlled component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePickerControlled = forwardRef<DatePickerControlledProps, HTMLDivElement>((props, ref) => {\n    const {\n        locale = getCurrentLocale(),\n        maxDate,\n        minDate,\n        nextButtonProps,\n        onChange,\n        onNextMonthChange,\n        onPrevMonthChange,\n        previousButtonProps,\n        selectedMonth,\n        todayOrSelectedDateRef,\n        value,\n        onMonthChange,\n        style,\n    } = props;\n    const { weeks, weekDays } = React.useMemo(() => {\n        const localeObj = parseLocale(locale) as Locale;\n        return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);\n    }, [locale, minDate, maxDate, selectedMonth]);\n\n    const selectedYear = selectedMonth.getFullYear();\n    const formattedYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric' }).slice(0, 4);\n    const [currentYear, setCurrentYear] = React.useState(String(selectedYear));\n\n    // Updates month offset when validating year. Adds or removes 12 months per year when updating year value.\n    const updateMonthOffset = React.useCallback(\n        (newYearValue: string) => {\n            const yearNumber = Number(newYearValue);\n            if (yearNumber < 0 && yearNumber >= 9999) {\n                return;\n            }\n\n            const previousYearNumber = selectedMonth.getFullYear();\n            const offset = (yearNumber - previousYearNumber) * 12;\n            onMonthChange?.(addMonthResetDay(selectedMonth, offset));\n        },\n        [selectedMonth, onMonthChange],\n    );\n\n    const onYearChange = React.useCallback<TextFieldProps['onChange']>(\n        (newYearValue, _, event) => {\n            setCurrentYear(newYearValue);\n\n            // Detect if change is coming from the spin up/down arrows\n            const inputType = (event?.nativeEvent as any)?.inputType;\n            if (\n                // Chrome/Safari\n                !inputType ||\n                // Firefox\n                inputType === 'insertReplacementText'\n            ) {\n                updateMonthOffset(newYearValue);\n            }\n        },\n        [updateMonthOffset],\n    );\n\n    const updateYear = React.useCallback(() => {\n        updateMonthOffset(currentYear);\n    }, [updateMonthOffset, currentYear]);\n\n    const updateYearOnEnterPressed: KeyboardEventHandler = React.useMemo(\n        () => onEnterPressed(updateYear),\n        [updateYear],\n    );\n\n    const monthYear = selectedMonth.toLocaleDateString(locale, { year: 'numeric', month: 'long' });\n\n    // Update current year when selected year changes\n    React.useEffect(() => {\n        setCurrentYear(String(selectedYear));\n    }, [selectedYear]);\n\n    const prevSelectedMonth = usePreviousValue(selectedMonth);\n    const monthHasChanged = prevSelectedMonth && !isSameDay(selectedMonth, prevSelectedMonth);\n\n    // Only set the aria-live after the month has changed otherwise it can get announced on mount when used in the popover dialog\n    const [labelAriaLive, setLabelAriaLive] = React.useState<'polite'>();\n    React.useEffect(() => {\n        if (monthHasChanged) setLabelAriaLive('polite');\n    }, [monthHasChanged]);\n\n    const yearLabel = getYearDisplayName(locale);\n\n    return (\n        <div ref={ref} className={`${CLASSNAME}`} style={style}>\n            <Toolbar\n                className={`${CLASSNAME}__toolbar`}\n                after={\n                    <IconButton\n                        {...nextButtonProps}\n                        emphasis={Emphasis.low}\n                        icon={mdiChevronRight}\n                        onClick={onNextMonthChange}\n                    />\n                }\n                before={\n                    <IconButton\n                        {...previousButtonProps}\n                        emphasis={Emphasis.low}\n                        icon={mdiChevronLeft}\n                        onClick={onPrevMonthChange}\n                    />\n                }\n                label={\n                    <>\n                        <span aria-live={labelAriaLive} className={onMonthChange ? VISUALLY_HIDDEN : ''} dir=\"auto\">\n                            {monthYear}\n                        </span>\n                        {onMonthChange && (\n                            <FlexBox\n                                className={`${CLASSNAME}__month`}\n                                orientation=\"horizontal\"\n                                hAlign=\"center\"\n                                gap=\"regular\"\n                                vAlign=\"center\"\n                                dir=\"auto\"\n                            >\n                                {RegExp(`(.*)(${formattedYear})(.*)`)\n                                    .exec(monthYear)\n                                    ?.slice(1)\n                                    .filter((part) => part !== '')\n                                    .map((part) =>\n                                        part === formattedYear ? (\n                                            <TextField\n                                                value={currentYear}\n                                                aria-label={yearLabel}\n                                                onChange={onYearChange}\n                                                type=\"number\"\n                                                max={9999}\n                                                min={0}\n                                                onBlur={updateYear}\n                                                onKeyPress={updateYearOnEnterPressed}\n                                                key=\"year\"\n                                                className={`${CLASSNAME}__year`}\n                                            />\n                                        ) : (\n                                            <Text as=\"p\" key={part}>\n                                                {part}\n                                            </Text>\n                                        ),\n                                    )}\n                            </FlexBox>\n                        )}\n                    </>\n                }\n            />\n            <div className={`${CLASSNAME}__calendar`}>\n                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>\n                    {weekDays.map(({ letter, number, long }) => (\n                        <div key={number} className={`${CLASSNAME}__day-wrapper`}>\n                            <span className={`${CLASSNAME}__week-day`} aria-hidden>\n                                {letter.toLocaleUpperCase()}\n                            </span>\n                            <span className=\"visually-hidden\">{long}</span>\n                        </div>\n                    ))}\n                </div>\n\n                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>\n                    {weeks.flatMap((week, weekIndex) => {\n                        return weekDays.map((weekDay, dayIndex) => {\n                            const { date, isOutOfRange } = week[weekDay.number] || {};\n                            const key = `${weekIndex}-${dayIndex}`;\n                            const isToday = !isOutOfRange && date && isSameDay(date, new Date());\n                            const isSelected = date && value && isSameDay(value, date);\n\n                            return (\n                                <div key={key} className={`${CLASSNAME}__day-wrapper`}>\n                                    {date && (\n                                        <Button\n                                            ref={isSelected || (!value && isToday) ? todayOrSelectedDateRef : null}\n                                            className={classNames(`${CLASSNAME}__month-day`, {\n                                                [`${CLASSNAME}__month-day--is-today`]: isToday,\n                                            })}\n                                            disabled={isOutOfRange}\n                                            isSelected={isSelected}\n                                            emphasis=\"low\"\n                                            onClick={() => onChange(date)}\n                                        >\n                                            <span aria-hidden>{formatDayNumber(locale, date)}</span>\n                                            <span className={VISUALLY_HIDDEN}>\n                                                {date.toLocaleDateString(locale, {\n                                                    day: 'numeric',\n                                                    month: 'long',\n                                                    year: 'numeric',\n                                                })}\n                                            </span>\n                                        </Button>\n                                    )}\n                                </div>\n                            );\n                        });\n                    })}\n                </div>\n            </div>\n        </div>\n    );\n});\nDatePickerControlled.displayName = COMPONENT_NAME;\nDatePickerControlled.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","DatePickerControlled","forwardRef","props","ref","locale","getCurrentLocale","maxDate","minDate","nextButtonProps","onChange","onNextMonthChange","onPrevMonthChange","previousButtonProps","selectedMonth","todayOrSelectedDateRef","value","onMonthChange","style","weeks","weekDays","React","useMemo","localeObj","parseLocale","getMonthCalendar","selectedYear","getFullYear","formattedYear","toLocaleDateString","year","slice","currentYear","setCurrentYear","useState","String","updateMonthOffset","useCallback","newYearValue","yearNumber","Number","previousYearNumber","offset","addMonthResetDay","onYearChange","_","event","inputType","nativeEvent","updateYear","updateYearOnEnterPressed","onEnterPressed","monthYear","month","useEffect","prevSelectedMonth","usePreviousValue","monthHasChanged","isSameDay","labelAriaLive","setLabelAriaLive","yearLabel","getYearDisplayName","_jsxs","className","CLASSNAME","children","_jsx","Toolbar","after","IconButton","emphasis","Emphasis","low","icon","mdiChevronRight","onClick","before","mdiChevronLeft","label","_Fragment","VISUALLY_HIDDEN","dir","FlexBox","orientation","hAlign","gap","vAlign","RegExp","exec","filter","part","map","TextField","type","max","min","onBlur","onKeyPress","Text","as","letter","number","long","toLocaleUpperCase","flatMap","week","weekIndex","weekDay","dayIndex","date","isOutOfRange","key","isToday","Date","isSelected","Button","classNames","disabled","formatDayNumber","day","displayName"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/date-picker/DatePickerField-3c9c1ba5.js

@@ -0,0 +1,107 @@
+import React__default, { useRef, useCallback } from 'react';
+import { getCurrentLocale } from '../../utils/locale/getCurrentLocale-14390eeb.js';
+import { useBooleanState } from '../../hooks/useBooleanState-3e2f0517.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useDisableStateProps } from '../../utils/disabled/useDisableStateProps-2391c02d.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { PopoverDialog } from '../popover-dialog/PopoverDialog-ffd6c5a1.js';
+import { Placement } from '../popover/constants-9d063548.js';
+import { DatePicker } from './DatePicker-f7f5c82d.js';
+import { TextField } from '../text-field/TextField-843f8e28.js';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'DatePickerField';
+
+/**
+ * DatePickerField component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const DatePickerField = forwardRef((props, ref) => {
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    defaultMonth,
+    locale = getCurrentLocale(),
+    maxDate,
+    minDate,
+    name,
+    nextButtonProps,
+    onChange,
+    previousButtonProps,
+    value,
+    ...forwardedProps
+  } = otherProps;
+  const anchorRef = useRef(null);
+  const [isOpen, close,, toggleOpen] = useBooleanState(false);
+  const handleKeyboardNav = useCallback(evt => {
+    if (evt.key === 'Enter' || evt.key === ' ') {
+      toggleOpen();
+    }
+  }, [toggleOpen]);
+  const onTextFieldChange = useCallback((textFieldValue, textFieldName, event) => {
+    if (!textFieldValue) {
+      onChange(undefined, textFieldName, event);
+    }
+  }, [onChange]);
+  const onDatePickerChange = useCallback(newDate => {
+    onChange(newDate, name);
+    close();
+  }, [name, onChange, close]);
+
+  // Format date for text field
+  const textFieldValue = value?.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }) || '';
+  const todayOrSelectedDateRef = React__default.useRef(null);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TextField, {
+      ref: ref,
+      ...forwardedProps,
+      name: name,
+      forceFocusStyle: isOpen,
+      textFieldRef: anchorRef,
+      value: textFieldValue,
+      onClick: toggleOpen,
+      onChange: onTextFieldChange,
+      onKeyPress: handleKeyboardNav,
+      ...disabledStateProps,
+      readOnly: true,
+      "aria-haspopup": "dialog"
+    }), isOpen ? /*#__PURE__*/jsx(PopoverDialog
+    // Can't use `aria-labelledby` targeting the text field label element (not correctly read on some screen readers)
+    , {
+      "aria-label": forwardedProps.label,
+      anchorRef: anchorRef,
+      placement: Placement.BOTTOM_START,
+      isOpen: isOpen,
+      onClose: close
+      // On open, focus the selected day or today
+      ,
+      focusElement: todayOrSelectedDateRef,
+      children: /*#__PURE__*/jsx(DatePicker, {
+        locale: locale,
+        maxDate: maxDate,
+        minDate: minDate,
+        value: value,
+        todayOrSelectedDateRef: todayOrSelectedDateRef,
+        onChange: onDatePickerChange,
+        defaultMonth: defaultMonth,
+        nextButtonProps: nextButtonProps,
+        previousButtonProps: previousButtonProps
+      })
+    }) : null]
+  });
+});
+DatePickerField.displayName = COMPONENT_NAME;
+
+export { DatePickerField };
+//# sourceMappingURL=DatePickerField-3c9c1ba5.js.map

package/_internal/packages/lumx-react/src/components/date-picker/DatePickerField-3c9c1ba5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerField-3c9c1ba5.js","sources":["../../../../../../../src/components/date-picker/DatePickerField.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useRef } from 'react';\n\nimport { DatePicker, IconButtonProps, Placement, PopoverDialog, TextField, TextFieldProps } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';\nimport { useBooleanState } from '@lumx/react/hooks/useBooleanState';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerFieldProps extends Omit<TextFieldProps, 'value' | 'onChange'>, GenericProps {\n    /** Default month. */\n    defaultMonth?: Date;\n    /** Locale (language or region) to use. */\n    locale?: string;\n    /** Date after which dates can't be selected. */\n    maxDate?: Date;\n    /** Date before which dates can't be selected. */\n    minDate?: Date;\n    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */\n    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */\n    previousButtonProps: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /** Currently selected date. */\n    value: Date | undefined;\n    /** On change callback. */\n    onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DatePickerField';\n\n/**\n * DatePickerField component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePickerField = forwardRef<DatePickerFieldProps, HTMLDivElement>((props, ref) => {\n    const { disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        defaultMonth,\n        locale = getCurrentLocale(),\n        maxDate,\n        minDate,\n        name,\n        nextButtonProps,\n        onChange,\n        previousButtonProps,\n        value,\n        ...forwardedProps\n    } = otherProps;\n    const anchorRef = useRef(null);\n\n    const [isOpen, close, , toggleOpen] = useBooleanState(false);\n\n    const handleKeyboardNav = useCallback(\n        (evt: React.KeyboardEvent) => {\n            if (evt.key === 'Enter' || evt.key === ' ') {\n                toggleOpen();\n            }\n        },\n        [toggleOpen],\n    );\n    const onTextFieldChange = useCallback(\n        (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {\n            if (!textFieldValue) {\n                onChange(undefined, textFieldName, event);\n            }\n        },\n        [onChange],\n    );\n    const onDatePickerChange = useCallback(\n        (newDate?: Date) => {\n            onChange(newDate, name);\n            close();\n        },\n        [name, onChange, close],\n    );\n\n    // Format date for text field\n    const textFieldValue = value?.toLocaleDateString(locale, { year: 'numeric', month: 'long', day: 'numeric' }) || '';\n\n    const todayOrSelectedDateRef = React.useRef(null);\n\n    return (\n        <>\n            <TextField\n                ref={ref}\n                {...forwardedProps}\n                name={name}\n                forceFocusStyle={isOpen}\n                textFieldRef={anchorRef}\n                value={textFieldValue}\n                onClick={toggleOpen}\n                onChange={onTextFieldChange}\n                onKeyPress={handleKeyboardNav}\n                {...disabledStateProps}\n                readOnly\n                aria-haspopup=\"dialog\"\n            />\n            {isOpen ? (\n                <PopoverDialog\n                    // Can't use `aria-labelledby` targeting the text field label element (not correctly read on some screen readers)\n                    aria-label={forwardedProps.label}\n                    anchorRef={anchorRef}\n                    placement={Placement.BOTTOM_START}\n                    isOpen={isOpen}\n                    onClose={close}\n                    // On open, focus the selected day or today\n                    focusElement={todayOrSelectedDateRef}\n                >\n                    <DatePicker\n                        locale={locale}\n                        maxDate={maxDate}\n                        minDate={minDate}\n                        value={value}\n                        todayOrSelectedDateRef={todayOrSelectedDateRef}\n                        onChange={onDatePickerChange}\n                        defaultMonth={defaultMonth}\n                        nextButtonProps={nextButtonProps}\n                        previousButtonProps={previousButtonProps}\n                    />\n                </PopoverDialog>\n            ) : null}\n        </>\n    );\n});\nDatePickerField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","DatePickerField","forwardRef","props","ref","disabledStateProps","otherProps","useDisableStateProps","defaultMonth","locale","getCurrentLocale","maxDate","minDate","name","nextButtonProps","onChange","previousButtonProps","value","forwardedProps","anchorRef","useRef","isOpen","close","toggleOpen","useBooleanState","handleKeyboardNav","useCallback","evt","key","onTextFieldChange","textFieldValue","textFieldName","event","undefined","onDatePickerChange","newDate","toLocaleDateString","year","month","day","todayOrSelectedDateRef","React","_jsxs","_Fragment","children","_jsx","TextField","forceFocusStyle","textFieldRef","onClick","onKeyPress","readOnly","PopoverDialog","label","placement","Placement","BOTTOM_START","onClose","focusElement","DatePicker","displayName"],"mappings":"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"}

package/_internal/packages/lumx-react/src/components/date-picker/constants-f8c49b24.js

@@ -0,0 +1,14 @@
+import { getRootClassName } from '@lumx/core/js/utils/className';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'DatePicker';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export { CLASSNAME, COMPONENT_NAME };
+//# sourceMappingURL=constants-f8c49b24.js.map

package/_internal/packages/lumx-react/src/components/date-picker/constants-f8c49b24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants-f8c49b24.js","sources":["../../../../../../../src/components/date-picker/constants.ts"],"sourcesContent":["import { getRootClassName } from '@lumx/core/js/utils/className';\n\n/**\n * Component display name.\n */\nexport const COMPONENT_NAME = 'DatePicker';\n\n/**\n * Component default class name and class prefix.\n */\nexport const CLASSNAME = getRootClassName(COMPONENT_NAME);\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName"],"mappings":";;AAEA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,aAAY;;AAE1C;AACA;AACA;MACaC,SAAS,GAAGC,gBAAgB,CAACF,cAAc;;;;"}

package/_internal/{components/dialog-d0e090b1.js → packages/lumx-react/src/components/dialog/Dialog-c1d85c51.js}

@@ -1,54 +1,24 @@
-import React__default, { useState, useEffect, useRef, useMemo, Children } from 'react';
+import React__default, { useRef, useState, useMemo, Children } from 'react';
 import classNames from 'classnames';
-import { D as DOCUMENT } from '../constants-d0e3f49e.js';
-import { u as useCallbackOnEscape } from '../useCallbackOnEscape-ea4d9eb4.js';
-import { u as useFocusTrap } from '../useFocusTrap-c3c6378b.js';
-import { i as isComponent } from '../isComponent-78df9309.js';
-import { p as partitionMulti } from '../partitionMulti-4daccdd5.js';
+import { DOCUMENT } from '../../constants-6af61e2f.js';
+import { useCallbackOnEscape } from '../../hooks/useCallbackOnEscape-80f4407b.js';
+import { useFocusTrap } from '../../hooks/useFocusTrap-3a8a959d.js';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver-dfa00cf7.js';
+import { isComponent } from '../../utils/type/isComponent-ebe24fd7.js';
+import { partitionMulti } from '../../utils/partitionMulti-cb19eca6.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { C as ClickAwayProvider } from '../ClickAwayProvider-7093ba23.js';
-import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
-import { u as useDisableBodyScroll } from '../useDisableBodyScroll-36bd7352.js';
-import { u as useTransitionVisibility } from '../useTransitionVisibility-321fdbfa.js';
-import { T as ThemeProvider } from '../ThemeContext-3181f000.js';
+import { mergeRefs } from '../../utils/react/mergeRefs-27df0cb6.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
+import { useDisableBodyScroll } from '../../hooks/useDisableBodyScroll-5d576cdc.js';
+import { useTransitionVisibility } from '../../hooks/useTransitionVisibility-2beba0ac.js';
+import { ThemeProvider } from '../../utils/theme/ThemeContext-d8ee966d.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { P as Portal } from '../Portal-3f86608e.js';
-import { H as HeadingLevelProvider } from '../HeadingLevelProvider-ebdcb0c7.js';
-import { Progress, ProgressVariant } from './progress-44bb0301.js';
+import { Portal } from '../../utils/Portal/Portal-9e38cfd0.js';
+import { HeadingLevelProvider } from '../heading/HeadingLevelProvider-7bd8f886.js';
+import { ClickAwayProvider } from '../../utils/ClickAwayProvider/ClickAwayProvider-ec55d284.js';
+import { Progress, ProgressVariant } from '../progress/Progress-73bac34d.js';
 import { Size, DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 
-/**
- * Convenient hook to create interaction observers.
- *
- * @param elements Elements to observe.
- * @param options  IntersectionObserver options.
- * @return Map of intersections.
- */
-function useIntersectionObserver(elements, options) {
-  const [intersections, setIntersections] = useState(() => new Map());
-  useEffect(() => {
-    if (elements.length < 1 || !elements.some(Boolean)) {
-      return undefined;
-    }
-    const observer = new IntersectionObserver(entries => {
-      for (const entry of entries) {
-        intersections.set(entry.target, entry);
-      }
-      setIntersections(new Map(intersections));
-    }, options);
-    for (const element of elements) {
-      if (element) {
-        observer.observe(element);
-      }
-    }
-    return () => observer.disconnect();
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [...elements]);
-  return intersections;
-}
-
 const isHeader = isComponent('header');
 const isFooter = isComponent('footer');
 
@@ -236,4 +206,4 @@ Dialog.className = CLASSNAME;
 Dialog.defaultProps = DEFAULT_PROPS;
 
 export { Dialog };
-//# sourceMappingURL=dialog-d0e090b1.js.map
+//# sourceMappingURL=Dialog-c1d85c51.js.map

package/_internal/packages/lumx-react/src/components/dialog/Dialog-c1d85c51.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog-c1d85c51.js","sources":["../../../../../../../src/components/dialog/Dialog.tsx"],"sourcesContent":["import React, { Children, ReactElement, ReactNode, Ref, RefObject, useMemo, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { HeadingLevelProvider, Progress, ProgressVariant, Size } from '@lumx/react';\n\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useIntersectionObserver } from '@lumx/react/hooks/useIntersectionObserver';\n\nimport { GenericProps, isComponent } from '@lumx/react/utils/type';\nimport { partitionMulti } from '@lumx/react/utils/partitionMulti';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DialogProps extends GenericProps {\n    /** Footer content. */\n    footer?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceFooterDivider?: boolean;\n    /** Header content. */\n    header?: ReactNode;\n    /** Whether the divider between the dialog content and the footer is always displayed (instead of showing it on scroll). */\n    forceHeaderDivider?: boolean;\n    /** Whether the indefinite progress indicator over the dialog content is displayed or not. */\n    isLoading?: boolean;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the parent element that triggered modal opening (will get back focus on close). */\n    parentElement?: RefObject<HTMLElement>;\n    /** Reference to the dialog content element. */\n    contentRef?: Ref<HTMLDivElement>;\n    /** Reference to the of the element that should get the focus when the dialogs opens. By default, the first child will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Whether to keep the dialog open on escape press. */\n    preventCloseOnEscape?: boolean;\n    /** Whether to keep the dialog open on clickaway. */\n    preventCloseOnClick?: boolean;\n    /** Size variant. */\n    size?: DialogSizes;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** Z-axis position. */\n    dialogProps?: GenericProps;\n    /** On close callback. */\n    onClose?(): void;\n    /** Callback called when the open animation starts and the close animation finishes. */\n    onVisibilityChange?(isVisible: boolean): void;\n    /** whether to disable the scroll on the body or not */\n    disableBodyScroll?: boolean;\n    /** Children */\n    children?: React.ReactNode;\n}\n\nexport type DialogSizes = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\nconst isHeader = isComponent('header');\nconst isFooter = isComponent('footer');\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Dialog';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DialogProps> = {\n    size: Size.big,\n    disableBodyScroll: true,\n};\n\n/**\n * Dialog component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    const {\n        children,\n        className,\n        header,\n        focusElement,\n        forceFooterDivider,\n        forceHeaderDivider,\n        footer,\n        isLoading,\n        isOpen,\n        onClose,\n        parentElement,\n        contentRef,\n        preventAutoClose,\n        size = DEFAULT_PROPS.size,\n        zIndex,\n        dialogProps,\n        onVisibilityChange,\n        disableBodyScroll = DEFAULT_PROPS.disableBodyScroll,\n        preventCloseOnClick,\n        preventCloseOnEscape,\n        ...forwardedProps\n    } = props;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = React.useRef(isOpen);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n        if (isOpen !== previousOpen.current) {\n            previousOpen.current = isOpen;\n\n            // Focus the parent element on close.\n            if (!isOpen && parentElement && parentElement.current) {\n                parentElement.current.focus();\n            }\n        }\n    }, [isOpen, parentElement]);\n\n    const shouldPreventCloseOnEscape = preventAutoClose || preventCloseOnEscape;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose, isOpen && !shouldPreventCloseOnEscape);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    /**\n     * Since the `contentRef` comes from the parent and is optional,\n     * we need to create a stable contentRef that will always be available.\n     */\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const localContentRef = useRef<HTMLDivElement>(null);\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(isOpen && wrapperRef.current, focusElement?.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(disableBodyScroll && isOpen && localContentRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelTop, setSentinelTop] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [sentinelBottom, setSentinelBottom] = useState<Element | null>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const intersections = useIntersectionObserver([sentinelTop, sentinelBottom], {\n        threshold: [0, 1],\n    });\n\n    const hasTopIntersection = sentinelTop && !(intersections.get(sentinelTop)?.isIntersecting ?? true);\n    const hasBottomIntersection = sentinelBottom && !(intersections.get(sentinelBottom)?.isIntersecting ?? true);\n\n    // Separate header, footer and dialog content from children.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [[headerChild], [footerChild], content] = useMemo(\n        () => partitionMulti(Children.toArray(children), [isHeader, isFooter]),\n        [children],\n    );\n    const headerChildProps = (headerChild as ReactElement)?.props;\n    const headerChildContent = headerChildProps?.children;\n    const footerChildProps = (footerChild as ReactElement)?.props;\n    const footerChildContent = footerChildProps?.children;\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useTransitionVisibility(rootRef, Boolean(isOpen), DIALOG_TRANSITION_DURATION, onVisibilityChange);\n\n    const shouldPreventCloseOnClickAway = preventAutoClose || preventCloseOnClick;\n\n    return isOpen || isVisible ? (\n        <Portal>\n            <div\n                ref={mergeRefs(rootRef, ref)}\n                {...forwardedProps}\n                className={classNames(\n                    className,\n                    handleBasicClasses({\n                        isHidden: !isOpen,\n                        isLoading,\n                        isShown: isOpen || isVisible,\n                        prefix: CLASSNAME,\n                        size,\n                    }),\n                )}\n                style={{ zIndex }}\n            >\n                <div className={`${CLASSNAME}__overlay`} />\n\n                <HeadingLevelProvider level={2}>\n                    <ThemeProvider value={undefined}>\n                        <div className={`${CLASSNAME}__container`} role=\"dialog\" aria-modal=\"true\" {...dialogProps}>\n                            <ClickAwayProvider\n                                callback={!shouldPreventCloseOnClickAway && onClose}\n                                childrenRefs={clickAwayRefs}\n                                parentRef={rootRef}\n                            >\n                                <section className={`${CLASSNAME}__wrapper`} ref={wrapperRef}>\n                                    {(header || headerChildContent) && (\n                                        <header\n                                            {...headerChildProps}\n                                            className={classNames(\n                                                `${CLASSNAME}__header`,\n                                                (forceHeaderDivider || hasTopIntersection) &&\n                                                    `${CLASSNAME}__header--has-divider`,\n                                                headerChildProps?.className,\n                                            )}\n                                        >\n                                            {header}\n                                            {headerChildContent}\n                                        </header>\n                                    )}\n\n                                    <div\n                                        ref={mergeRefs(contentRef, localContentRef)}\n                                        className={`${CLASSNAME}__content`}\n                                    >\n                                        <div\n                                            className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}\n                                            ref={setSentinelTop}\n                                        />\n\n                                        {content}\n\n                                        <div\n                                            className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--bottom`}\n                                            ref={setSentinelBottom}\n                                        />\n                                    </div>\n\n                                    {(footer || footerChildContent) && (\n                                        <footer\n                                            {...footerChildProps}\n                                            className={classNames(\n                                                `${CLASSNAME}__footer`,\n                                                (forceFooterDivider || hasBottomIntersection) &&\n                                                    `${CLASSNAME}__footer--has-divider`,\n                                                footerChildProps?.className,\n                                            )}\n                                        >\n                                            {footer}\n                                            {footerChildContent}\n                                        </footer>\n                                    )}\n\n                                    {isLoading && (\n                                        <div className={`${CLASSNAME}__progress-overlay`}>\n                                            <Progress variant={ProgressVariant.circular} />\n                                        </div>\n                                    )}\n                                </section>\n                            </ClickAwayProvider>\n                        </div>\n                    </ThemeProvider>\n                </HeadingLevelProvider>\n            </div>\n        </Portal>\n    ) : null;\n});\nDialog.displayName = COMPONENT_NAME;\nDialog.className = CLASSNAME;\nDialog.defaultProps = DEFAULT_PROPS;\n"],"names":["isHeader","isComponent","isFooter","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","big","disableBodyScroll","Dialog","forwardRef","props","ref","DOCUMENT","children","className","header","focusElement","forceFooterDivider","forceHeaderDivider","footer","isLoading","isOpen","onClose","parentElement","contentRef","preventAutoClose","zIndex","dialogProps","onVisibilityChange","preventCloseOnClick","preventCloseOnEscape","forwardedProps","previousOpen","React","useRef","useEffect","current","focus","shouldPreventCloseOnEscape","useCallbackOnEscape","wrapperRef","localContentRef","useFocusTrap","useDisableBodyScroll","sentinelTop","setSentinelTop","useState","sentinelBottom","setSentinelBottom","intersections","useIntersectionObserver","threshold","hasTopIntersection","get","isIntersecting","hasBottomIntersection","headerChild","footerChild","content","useMemo","partitionMulti","Children","toArray","headerChildProps","headerChildContent","footerChildProps","footerChildContent","clickAwayRefs","rootRef","isVisible","useTransitionVisibility","Boolean","DIALOG_TRANSITION_DURATION","shouldPreventCloseOnClickAway","_jsx","Portal","_jsxs","mergeRefs","classNames","handleBasicClasses","isHidden","isShown","prefix","style","HeadingLevelProvider","level","ThemeProvider","value","undefined","role","ClickAwayProvider","callback","childrenRefs","parentRef","Progress","variant","ProgressVariant","circular","displayName","defaultProps"],"mappings":"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"}

package/_internal/{components/divider-0e93aa3d.js → packages/lumx-react/src/components/divider/Divider-450f85bf.js}

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
 
@@ -48,4 +48,4 @@ Divider.className = CLASSNAME;
 Divider.defaultProps = DEFAULT_PROPS;
 
 export { Divider };
-//# sourceMappingURL=divider-0e93aa3d.js.map
+//# sourceMappingURL=Divider-450f85bf.js.map

package/_internal/packages/lumx-react/src/components/divider/Divider-450f85bf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider-450f85bf.js","sources":["../../../../../../../src/components/divider/Divider.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DividerProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Divider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<DividerProps> = {};\n\n/**\n * Divider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Divider = forwardRef<DividerProps, HTMLHRElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, theme = defaultTheme, ...forwardedProps } = props;\n\n    return (\n        <hr\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        />\n    );\n});\nDivider.displayName = COMPONENT_NAME;\nDivider.className = CLASSNAME;\nDivider.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Divider","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":";;;;;;;AAaA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAoC,GAAG,EAAE,CAAA;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC3E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGL,YAAY;IAAE,GAAGM,cAAAA;AAAe,GAAC,GAAGR,KAAK,CAAA;AAEpE,EAAA,oBACIS,GAAA,CAAA,IAAA,EAAA;AACIR,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLO,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEjB,SAAS;AAAEY,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GACtF,CAAC,CAAA;AAEV,CAAC,EAAC;AACFT,OAAO,CAACe,WAAW,GAAGnB,cAAc,CAAA;AACpCI,OAAO,CAACQ,SAAS,GAAGX,SAAS,CAAA;AAC7BG,OAAO,CAACgB,YAAY,GAAGjB,aAAa;;;;"}

package/_internal/{components/drag-handle-eec23fc2.js → packages/lumx-react/src/components/drag-handle/DragHandle-ce52ef0b.js}

@@ -1,13 +1,12 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../ThemeContext-3181f000.js';
-import { f as forwardRef } from '../forwardRef-8bce732e.js';
+import { useTheme } from '../../utils/theme/ThemeContext-d8ee966d.js';
+import { forwardRef } from '../../utils/react/forwardRef-bd8b3ec8.js';
 import { jsx } from 'react/jsx-runtime';
-import { I as Icon } from '../index-d3e86bd8.js';
+import { mdiDragVertical } from '../../../../lumx-icons/dist/esm/drag-vertical-c72d4f8b.js';
+import { Icon } from '../icon/Icon-21a83e8c.js';
 import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
 
-const mdiDragVertical = 'M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';
-
 /**
  * Component display name.
  */
@@ -50,4 +49,4 @@ DragHandle.displayName = COMPONENT_NAME;
 DragHandle.className = CLASSNAME;
 
 export { DragHandle };
-//# sourceMappingURL=drag-handle-eec23fc2.js.map
+//# sourceMappingURL=DragHandle-ce52ef0b.js.map

package/_internal/packages/lumx-react/src/components/drag-handle/DragHandle-ce52ef0b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle-ce52ef0b.js","sources":["../../../../../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps, HasTheme {}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle = forwardRef<DragHandleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const { className, theme = defaultTheme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon\n                icon={mdiDragVertical}\n                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n                size={Size.xs}\n            />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","defaultTheme","useTheme","className","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","children","Icon","icon","mdiDragVertical","color","Theme","dark","ColorPalette","light","size","Size","xs","displayName"],"mappings":";;;;;;;;;AAcA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAU,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;AAClF,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,SAAS;AAAEC,IAAAA,KAAK,GAAGH,YAAY;IAAE,GAAGI,cAAAA;AAAe,GAAC,GAAGN,KAAK,CAAA;AAEpE,EAAA,oBACIO,GAAA,CAAA,KAAA,EAAA;AACIN,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLK,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CAACJ,SAAS,EAAEK,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEd,SAAS;AAAES,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAM,QAAA,eAEnFJ,GAAA,CAACK,IAAI,EAAA;AACDC,MAAAA,IAAI,EAAEC,eAAgB;AACtBC,MAAAA,KAAK,EAAEV,KAAK,KAAKW,KAAK,CAACC,IAAI,GAAGC,YAAY,CAACC,KAAK,GAAGD,YAAY,CAACD,IAAK;MACrEG,IAAI,EAAEC,IAAI,CAACC,EAAAA;KACd,CAAA;AAAC,GACD,CAAC,CAAA;AAEd,CAAC,EAAC;AACFxB,UAAU,CAACyB,WAAW,GAAG5B,cAAc,CAAA;AACvCG,UAAU,CAACM,SAAS,GAAGR,SAAS;;;;"}