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

package/_internal/5a6b1aa5.js

@@ -0,0 +1,139 @@
+import classNames from 'classnames';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { forwardRef } from './bd8b3ec8.js';
+import { useTheme } from './d8ee966d.js';
+import { useDisableStateProps } from './ef982c3d.js';
+import { jsx } from 'react/jsx-runtime';
+import { Autocomplete } from './24b48881.js';
+import { Chip } from './b125b718.js';
+import { mdiClose } from './ad7c38b0.js';
+import { Icon } from './595d0e66.js';
+import { Size } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'AutocompleteMultiple';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  closeOnClickAway: true,
+  closeOnEscape: true,
+  selectedChipRender(choice, index, onClear, isDisabled) {
+    const onClick = event => onClear && onClear(event, choice);
+    return /*#__PURE__*/jsx(Chip, {
+      after: onClear && /*#__PURE__*/jsx(Icon, {
+        icon: mdiClose,
+        size: Size.xxs
+      }),
+      isDisabled: isDisabled,
+      size: Size.s,
+      onAfterClick: onClick,
+      onClick: onClick,
+      children: choice
+    }, index);
+  },
+  values: []
+};
+
+/**
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const AutocompleteMultiple = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    anchorToInput,
+    children,
+    // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    chipsAlignment,
+    className,
+    closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS.closeOnEscape,
+    fitToAnchorWidth,
+    hasError,
+    helper,
+    icon,
+    inputRef,
+    clearButtonProps,
+    isRequired,
+    isOpen,
+    isValid,
+    label,
+    name,
+    offset,
+    onBlur,
+    onChange,
+    onClear,
+    onClose,
+    onFocus,
+    onInfiniteScroll,
+    onKeyDown,
+    placeholder,
+    placement,
+    selectedChipRender = DEFAULT_PROPS.selectedChipRender,
+    shouldFocusOnClose,
+    theme = defaultTheme,
+    type,
+    value,
+    values = DEFAULT_PROPS.values,
+    ...forwardedProps
+  } = otherProps;
+  return /*#__PURE__*/jsx(Autocomplete, {
+    ref: ref,
+    ...forwardedProps,
+    anchorToInput: anchorToInput,
+    className: classNames(className, CLASSNAME),
+    name: name,
+    value: value,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur,
+    shouldFocusOnClose: shouldFocusOnClose,
+    onFocus: onFocus,
+    hasError: hasError,
+    helper: helper,
+    icon: icon,
+    inputRef: inputRef,
+    chips: values && values.map((chip, index) => selectedChipRender?.(chip, index, onClear)),
+    ...disabledStateProps,
+    isRequired: isRequired,
+    clearButtonProps: clearButtonProps,
+    isValid: isValid,
+    label: label,
+    placeholder: placeholder,
+    theme: theme,
+    type: type,
+    isOpen: isOpen,
+    closeOnClick: false,
+    closeOnClickAway: closeOnClickAway,
+    closeOnEscape: closeOnEscape,
+    onClose: onClose,
+    offset: offset,
+    placement: placement,
+    fitToAnchorWidth: fitToAnchorWidth,
+    onInfiniteScroll: onInfiniteScroll,
+    children: children
+  });
+});
+AutocompleteMultiple.displayName = COMPONENT_NAME;
+AutocompleteMultiple.className = CLASSNAME;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS;
+
+export { AutocompleteMultiple };
+//# sourceMappingURL=5a6b1aa5.js.map

package/_internal/5a6b1aa5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5a6b1aa5.js","sources":["../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n    /** Selected values. */\n    values: any[];\n    /** Alignment of the chips in the autocomplete. */\n    chipsAlignment?: HorizontalAlignment;\n    /** Selected value render function. Default: Renders the value inside of a Chip. */\n    selectedChipRender(\n        choice: any,\n        index: number,\n        onClear?: (event: React.MouseEvent, choice: any) => void,\n        isDisabled?: boolean,\n    ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\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<AutocompleteMultipleProps> = {\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    selectedChipRender(choice, index, onClear, isDisabled) {\n        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n        return (\n            <Chip\n                key={index}\n                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n                isDisabled={isDisabled}\n                size={Size.s}\n                onAfterClick={onClick}\n                onClick={onClick}\n            >\n                {choice}\n            </Chip>\n        );\n    },\n    values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const { disabledStateProps, otherProps } = useDisableStateProps(props);\n    const {\n        anchorToInput,\n        children,\n        // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        chipsAlignment,\n        className,\n        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n        closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isRequired,\n        isOpen,\n        isValid,\n        label,\n        name,\n        offset,\n        onBlur,\n        onChange,\n        onClear,\n        onClose,\n        onFocus,\n        onInfiniteScroll,\n        onKeyDown,\n        placeholder,\n        placement,\n        selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n        shouldFocusOnClose,\n        theme = defaultTheme,\n        type,\n        value,\n        values = DEFAULT_PROPS.values,\n        ...forwardedProps\n    } = otherProps;\n\n    return (\n        <Autocomplete\n            ref={ref}\n            {...forwardedProps}\n            anchorToInput={anchorToInput}\n            className={classNames(className, CLASSNAME)}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onKeyDown={onKeyDown}\n            onBlur={onBlur}\n            shouldFocusOnClose={shouldFocusOnClose}\n            onFocus={onFocus}\n            hasError={hasError}\n            helper={helper}\n            icon={icon}\n            inputRef={inputRef}\n            chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n            {...disabledStateProps}\n            isRequired={isRequired}\n            clearButtonProps={clearButtonProps}\n            isValid={isValid}\n            label={label}\n            placeholder={placeholder}\n            theme={theme}\n            type={type}\n            isOpen={isOpen}\n            closeOnClick={false}\n            closeOnClickAway={closeOnClickAway}\n            closeOnEscape={closeOnEscape}\n            onClose={onClose}\n            offset={offset}\n            placement={placement}\n            fitToAnchorWidth={fitToAnchorWidth}\n            onInfiniteScroll={onInfiniteScroll}\n        >\n            {children}\n        </Autocomplete>\n    );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","closeOnClickAway","closeOnEscape","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","_jsx","Chip","after","Icon","icon","mdiClose","size","Size","xxs","s","onAfterClick","children","values","AutocompleteMultiple","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","anchorToInput","chipsAlignment","className","fitToAnchorWidth","hasError","helper","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","onKeyDown","placeholder","placement","shouldFocusOnClose","theme","type","value","forwardedProps","Autocomplete","classNames","chips","map","chip","closeOnClick","displayName","defaultProps"],"mappings":";;;;;;;;;;;;AA8BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,sBAAsB,CAAA;;AAE7C;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAiD,GAAG;AACtDC,EAAAA,gBAAgB,EAAE,IAAI;AACtBC,EAAAA,aAAa,EAAE,IAAI;EACnBC,kBAAkBA,CAACC,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,EAAE;IACnD,MAAMC,OAAO,GAAIC,KAAuB,IAAKH,OAAO,IAAIA,OAAO,CAACG,KAAK,EAAEL,MAAM,CAAC,CAAA;IAC9E,oBACIM,GAAA,CAACC,IAAI,EAAA;AAEDC,MAAAA,KAAK,EAAEN,OAAO,iBAAII,GAAA,CAACG,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEC,QAAS;QAACC,IAAI,EAAEC,IAAI,CAACC,GAAAA;AAAI,OAAE,CAAE;AAC3DX,MAAAA,UAAU,EAAEA,UAAW;MACvBS,IAAI,EAAEC,IAAI,CAACE,CAAE;AACbC,MAAAA,YAAY,EAAEZ,OAAQ;AACtBA,MAAAA,OAAO,EAAEA,OAAQ;AAAAa,MAAAA,QAAA,EAEhBjB,MAAAA;AAAM,KAAA,EAPFC,KAQH,CAAC,CAAA;GAEd;AACDiB,EAAAA,MAAM,EAAE,EAAA;AACZ,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGC,UAAU,CAA4C,CAACC,KAAK,EAAEC,GAAG,KAAK;AACtG,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACN,KAAK,CAAC,CAAA;EACtE,MAAM;IACFO,aAAa;IACbX,QAAQ;AACR;AACA;IACAY,cAAc;IACdC,SAAS;IACTjC,gBAAgB,GAAGD,aAAa,CAACC,gBAAgB;IACjDC,aAAa,GAAGF,aAAa,CAACE,aAAa;IAC3CiC,gBAAgB;IAChBC,QAAQ;IACRC,MAAM;IACNvB,IAAI;IACJwB,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRzC,OAAO;IACP0C,OAAO;IACPC,OAAO;IACPC,gBAAgB;IAChBC,SAAS;IACTC,WAAW;IACXC,SAAS;IACTlD,kBAAkB,GAAGH,aAAa,CAACG,kBAAkB;IACrDmD,kBAAkB;AAClBC,IAAAA,KAAK,GAAG5B,YAAY;IACpB6B,IAAI;IACJC,KAAK;IACLnC,MAAM,GAAGtB,aAAa,CAACsB,MAAM;IAC7B,GAAGoC,cAAAA;AACP,GAAC,GAAG5B,UAAU,CAAA;EAEd,oBACIpB,GAAA,CAACiD,YAAY,EAAA;AACTjC,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLgC,cAAc;AAClB1B,IAAAA,aAAa,EAAEA,aAAc;AAC7BE,IAAAA,SAAS,EAAE0B,UAAU,CAAC1B,SAAS,EAAEpC,SAAS,CAAE;AAC5C8C,IAAAA,IAAI,EAAEA,IAAK;AACXa,IAAAA,KAAK,EAAEA,KAAM;AACbV,IAAAA,QAAQ,EAAEA,QAAS;AACnBI,IAAAA,SAAS,EAAEA,SAAU;AACrBL,IAAAA,MAAM,EAAEA,MAAO;AACfQ,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCL,IAAAA,OAAO,EAAEA,OAAQ;AACjBb,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,MAAM,EAAEA,MAAO;AACfvB,IAAAA,IAAI,EAAEA,IAAK;AACXwB,IAAAA,QAAQ,EAAEA,QAAS;IACnBuB,KAAK,EAAEvC,MAAM,IAAIA,MAAM,CAACwC,GAAG,CAAC,CAACC,IAAS,EAAE1D,KAAa,KAAKF,kBAAkB,GAAG4D,IAAI,EAAE1D,KAAK,EAAEC,OAAO,CAAC,CAAE;AAAA,IAAA,GAClGuB,kBAAkB;AACtBW,IAAAA,UAAU,EAAEA,UAAW;AACvBD,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbS,IAAAA,WAAW,EAAEA,WAAY;AACzBG,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,IAAI,EAAEA,IAAK;AACXf,IAAAA,MAAM,EAAEA,MAAO;AACfuB,IAAAA,YAAY,EAAE,KAAM;AACpB/D,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,IAAAA,aAAa,EAAEA,aAAc;AAC7B8C,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,MAAM,EAAEA,MAAO;AACfQ,IAAAA,SAAS,EAAEA,SAAU;AACrBlB,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCe,IAAAA,gBAAgB,EAAEA,gBAAiB;AAAA7B,IAAAA,QAAA,EAElCA,QAAAA;AAAQ,GACC,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFE,oBAAoB,CAAC0C,WAAW,GAAGpE,cAAc,CAAA;AACjD0B,oBAAoB,CAACW,SAAS,GAAGpC,SAAS,CAAA;AAC1CyB,oBAAoB,CAAC2C,YAAY,GAAGlE,aAAa;;;;"}

package/_internal/5c3e15ea.js

@@ -0,0 +1,107 @@
+import React__default, { useRef, useCallback } from 'react';
+import { getCurrentLocale } from './14390eeb.js';
+import { useBooleanState } from './3e2f0517.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { useDisableStateProps } from './ef982c3d.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { PopoverDialog } from './507d9459.js';
+import { Placement } from './9d063548.js';
+import { DatePicker } from './a9d0f94d.js';
+import { TextField } from './41a8b20f.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=5c3e15ea.js.map

package/_internal/5c3e15ea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5c3e15ea.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/5c4e10a0.js

@@ -0,0 +1,156 @@
+import { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { DOCUMENT } from './6af61e2f.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useFocusTrap } from './0350c865.js';
+import { useDisableBodyScroll } from './39534d28.js';
+import { mergeRefs } from './27df0cb6.js';
+import { useCallbackOnEscape } from './91f36a80.js';
+import { useTransitionVisibility } from './f6bc7948.js';
+import { ThemeProvider } from './d8ee966d.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Portal } from './38ac8c66.js';
+import { IconButton } from './5a0207d9.js';
+import { mdiClose } from './ad7c38b0.js';
+import { HeadingLevelProvider } from './fd3e2f21.js';
+import { ClickAwayProvider } from './739f2f15.js';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Lightbox';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Lightbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Lightbox = forwardRef((props, ref) => {
+  const {
+    'aria-labelledby': propAriaLabelledBy,
+    ariaLabelledBy = propAriaLabelledBy,
+    'aria-label': propAriaLabel,
+    ariaLabel = propAriaLabel,
+    children,
+    className,
+    closeButtonProps,
+    isOpen,
+    onClose,
+    parentElement,
+    focusElement,
+    preventAutoClose,
+    theme,
+    zIndex,
+    ...forwardedProps
+  } = props;
+  if (!DOCUMENT) {
+    // Can't render in SSR.
+    return null;
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const childrenRef = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const wrapperRef = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const closeButtonRef = useRef(null);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useDisableBodyScroll(isOpen && wrapperRef.current);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);
+
+  // Handle focus trap.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useFocusTrap(
+  // Focus trap zone
+  isOpen && wrapperRef.current,
+  // Focus element (fallback on close button and then on the dialog)
+  focusElement?.current || closeButtonRef.current || wrapperRef.current);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const previousOpen = useRef(isOpen);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    if (isOpen !== previousOpen.current) {
+      previousOpen.current = isOpen;
+
+      // Focus the parent element on close.
+      if (!isOpen && parentElement && parentElement.current) {
+        parentElement.current.focus();
+      }
+    }
+  }, [isOpen, parentElement]);
+
+  // Close lightbox on escape key pressed.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallbackOnEscape(onClose);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const clickAwayRefs = useRef([wrapperRef]);
+  if (!isOpen && !isVisible) return null;
+  return /*#__PURE__*/jsx(Portal, {
+    children: /*#__PURE__*/jsxs("div", {
+      ref: mergeRefs(ref, wrapperRef),
+      ...forwardedProps,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-modal": "true",
+      role: "dialog",
+      tabIndex: -1,
+      className: classNames(className, handleBasicClasses({
+        prefix: CLASSNAME,
+        isHidden: !isOpen,
+        isShown: isOpen || isVisible,
+        theme
+      })),
+      style: {
+        zIndex
+      },
+      children: [closeButtonProps && /*#__PURE__*/jsx("div", {
+        className: `${CLASSNAME}__close`,
+        children: /*#__PURE__*/jsx(IconButton, {
+          ...closeButtonProps,
+          ref: closeButtonRef,
+          emphasis: "low",
+          hasBackground: true,
+          icon: mdiClose,
+          theme: "dark",
+          type: "button",
+          onClick: onClose
+        })
+      }), /*#__PURE__*/jsx(HeadingLevelProvider, {
+        level: 2,
+        children: /*#__PURE__*/jsx(ThemeProvider, {
+          value: undefined,
+          children: /*#__PURE__*/jsx(ClickAwayProvider, {
+            callback: !preventAutoClose && onClose,
+            childrenRefs: clickAwayRefs,
+            children: /*#__PURE__*/jsx("div", {
+              ref: childrenRef,
+              className: `${CLASSNAME}__wrapper`,
+              role: "presentation",
+              children: children
+            })
+          })
+        })
+      })]
+    })
+  });
+});
+Lightbox.displayName = COMPONENT_NAME;
+Lightbox.className = CLASSNAME;
+
+export { Lightbox };
+//# sourceMappingURL=5c4e10a0.js.map

package/_internal/5c4e10a0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5c4e10a0.js","sources":["../../src/components/lightbox/Lightbox.tsx"],"sourcesContent":["import { RefObject, useRef, useEffect, AriaAttributes } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\nimport { HeadingLevelProvider, IconButton, IconButtonProps } from '@lumx/react';\nimport { DIALOG_TRANSITION_DURATION, DOCUMENT } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\n\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';\nimport { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { useTransitionVisibility } from '@lumx/react/hooks/useTransitionVisibility';\nimport { ThemeProvider } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Portal } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface LightboxProps extends GenericProps, HasTheme, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n    /** Props to pass to the close button (minus those already set by the Lightbox props). */\n    closeButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;\n    /** Whether the component is open or not. */\n    isOpen?: boolean;\n    /** Reference to the element that triggered modal opening to set focus on. */\n    parentElement: RefObject<any>;\n    /** Reference to the element that should get the focus when the lightbox opens. By default, the close button or the lightbox itself will take focus. */\n    focusElement?: RefObject<HTMLElement>;\n    /** Whether to keep the dialog open on clickaway or escape press. */\n    preventAutoClose?: boolean;\n    /** Z-axis position. */\n    zIndex?: number;\n    /** On close callback. */\n    onClose?(): void;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Lightbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Lightbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Lightbox = forwardRef<LightboxProps, HTMLDivElement>((props, ref) => {\n    const {\n        'aria-labelledby': propAriaLabelledBy,\n        ariaLabelledBy = propAriaLabelledBy,\n        'aria-label': propAriaLabel,\n        ariaLabel = propAriaLabel,\n        children,\n        className,\n        closeButtonProps,\n        isOpen,\n        onClose,\n        parentElement,\n        focusElement,\n        preventAutoClose,\n        theme,\n        zIndex,\n        ...forwardedProps\n    } = props;\n    if (!DOCUMENT) {\n        // Can't render in SSR.\n        return null;\n    }\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const childrenRef = useRef<any>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useDisableBodyScroll(isOpen && wrapperRef.current);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const isVisible = useTransitionVisibility(wrapperRef, !!isOpen, DIALOG_TRANSITION_DURATION);\n\n    // Handle focus trap.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useFocusTrap(\n        // Focus trap zone\n        isOpen && wrapperRef.current,\n        // Focus element (fallback on close button and then on the dialog)\n        focusElement?.current || closeButtonRef.current || wrapperRef.current,\n    );\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const previousOpen = useRef(isOpen);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    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    // Close lightbox on escape key pressed.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useCallbackOnEscape(onClose);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const clickAwayRefs = useRef([wrapperRef]);\n\n    if (!isOpen && !isVisible) return null;\n\n    return (\n        <Portal>\n            <div\n                ref={mergeRefs(ref, wrapperRef)}\n                {...forwardedProps}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-modal=\"true\"\n                role=\"dialog\"\n                tabIndex={-1}\n                className={classNames(\n                    className,\n                    handleBasicClasses({\n                        prefix: CLASSNAME,\n                        isHidden: !isOpen,\n                        isShown: isOpen || isVisible,\n                        theme,\n                    }),\n                )}\n                style={{ zIndex }}\n            >\n                {closeButtonProps && (\n                    <div className={`${CLASSNAME}__close`}>\n                        <IconButton\n                            {...closeButtonProps}\n                            ref={closeButtonRef}\n                            emphasis=\"low\"\n                            hasBackground\n                            icon={mdiClose}\n                            theme=\"dark\"\n                            type=\"button\"\n                            onClick={onClose}\n                        />\n                    </div>\n                )}\n                <HeadingLevelProvider level={2}>\n                    <ThemeProvider value={undefined}>\n                        <ClickAwayProvider callback={!preventAutoClose && onClose} childrenRefs={clickAwayRefs}>\n                            <div ref={childrenRef} className={`${CLASSNAME}__wrapper`} role=\"presentation\">\n                                {children}\n                            </div>\n                        </ClickAwayProvider>\n                    </ThemeProvider>\n                </HeadingLevelProvider>\n            </div>\n        </Portal>\n    );\n});\nLightbox.displayName = COMPONENT_NAME;\nLightbox.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","Lightbox","forwardRef","props","ref","propAriaLabelledBy","ariaLabelledBy","propAriaLabel","ariaLabel","children","className","closeButtonProps","isOpen","onClose","parentElement","focusElement","preventAutoClose","theme","zIndex","forwardedProps","DOCUMENT","childrenRef","useRef","wrapperRef","closeButtonRef","useDisableBodyScroll","current","isVisible","useTransitionVisibility","DIALOG_TRANSITION_DURATION","useFocusTrap","previousOpen","useEffect","focus","useCallbackOnEscape","clickAwayRefs","_jsx","Portal","_jsxs","mergeRefs","role","tabIndex","classNames","handleBasicClasses","prefix","isHidden","isShown","style","IconButton","emphasis","hasBackground","icon","mdiClose","type","onClick","HeadingLevelProvider","level","ThemeProvider","value","undefined","ClickAwayProvider","callback","childrenRefs","displayName"],"mappings":"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"}

package/_internal/5da9ff06.js

@@ -0,0 +1,47 @@
+import { useRef, useMemo } from 'react';
+import { EDGE_FROM_ACTIVE_INDEX, PAGINATION_ITEMS_MAX } from './e50f2a75.js';
+
+/**
+ * Calculate the currently visible pagination "bullet" range.
+ */
+function usePaginationVisibleRange(activeIndex, slideCount) {
+  const previousVisibleRangeRef = useRef();
+  return useMemo(() => {
+    const lastSlide = slideCount - 1;
+    const {
+      current: previousVisibleRange
+    } = previousVisibleRangeRef;
+    let newVisibleRange;
+    if (activeIndex === previousVisibleRange?.max && activeIndex < lastSlide) {
+      newVisibleRange = {
+        min: previousVisibleRange.min + 1,
+        max: previousVisibleRange.max + 1
+      };
+    } else if (activeIndex === previousVisibleRange?.min && activeIndex > 0) {
+      newVisibleRange = {
+        min: previousVisibleRange.min - 1,
+        max: previousVisibleRange.max - 1
+      };
+    } else {
+      const deltaItems = PAGINATION_ITEMS_MAX - 1;
+      let min = activeIndex - EDGE_FROM_ACTIVE_INDEX;
+      let max = activeIndex + EDGE_FROM_ACTIVE_INDEX;
+      if (activeIndex > lastSlide - EDGE_FROM_ACTIVE_INDEX) {
+        min = lastSlide - deltaItems;
+        max = lastSlide;
+      } else if (activeIndex < deltaItems) {
+        min = 0;
+        max = deltaItems;
+      }
+      newVisibleRange = {
+        min,
+        max
+      };
+    }
+    previousVisibleRangeRef.current = newVisibleRange;
+    return newVisibleRange;
+  }, [activeIndex, slideCount]);
+}
+
+export { usePaginationVisibleRange };
+//# sourceMappingURL=5da9ff06.js.map

package/_internal/5da9ff06.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"5da9ff06.js","sources":["../../src/components/slideshow/usePaginationVisibleRange.ts"],"sourcesContent":["import { useMemo, useRef } from 'react';\nimport { EDGE_FROM_ACTIVE_INDEX, PAGINATION_ITEMS_MAX } from '@lumx/react/components/slideshow/constants';\n\ntype Range = { min: number; max: number };\n\n/**\n * Calculate the currently visible pagination \"bullet\" range.\n */\nexport function usePaginationVisibleRange(activeIndex: number, slideCount: number): Range {\n    const previousVisibleRangeRef = useRef<Range>();\n    return useMemo(() => {\n        const lastSlide = slideCount - 1;\n        const { current: previousVisibleRange } = previousVisibleRangeRef;\n        let newVisibleRange: Range;\n        if (activeIndex === previousVisibleRange?.max && activeIndex < lastSlide) {\n            newVisibleRange = { min: previousVisibleRange.min + 1, max: previousVisibleRange.max + 1 };\n        } else if (activeIndex === previousVisibleRange?.min && activeIndex > 0) {\n            newVisibleRange = { min: previousVisibleRange.min - 1, max: previousVisibleRange.max - 1 };\n        } else {\n            const deltaItems = PAGINATION_ITEMS_MAX - 1;\n            let min = activeIndex - EDGE_FROM_ACTIVE_INDEX;\n            let max = activeIndex + EDGE_FROM_ACTIVE_INDEX;\n\n            if (activeIndex > lastSlide - EDGE_FROM_ACTIVE_INDEX) {\n                min = lastSlide - deltaItems;\n                max = lastSlide;\n            } else if (activeIndex < deltaItems) {\n                min = 0;\n                max = deltaItems;\n            }\n\n            newVisibleRange = { min, max };\n        }\n        previousVisibleRangeRef.current = newVisibleRange;\n        return newVisibleRange;\n    }, [activeIndex, slideCount]);\n}\n"],"names":["usePaginationVisibleRange","activeIndex","slideCount","previousVisibleRangeRef","useRef","useMemo","lastSlide","current","previousVisibleRange","newVisibleRange","max","min","deltaItems","PAGINATION_ITEMS_MAX","EDGE_FROM_ACTIVE_INDEX"],"mappings":";;;AAKA;AACA;AACA;AACO,SAASA,yBAAyBA,CAACC,WAAmB,EAAEC,UAAkB,EAAS;AACtF,EAAA,MAAMC,uBAAuB,GAAGC,MAAM,EAAS,CAAA;EAC/C,OAAOC,OAAO,CAAC,MAAM;AACjB,IAAA,MAAMC,SAAS,GAAGJ,UAAU,GAAG,CAAC,CAAA;IAChC,MAAM;AAAEK,MAAAA,OAAO,EAAEC,oBAAAA;AAAqB,KAAC,GAAGL,uBAAuB,CAAA;AACjE,IAAA,IAAIM,eAAsB,CAAA;IAC1B,IAAIR,WAAW,KAAKO,oBAAoB,EAAEE,GAAG,IAAIT,WAAW,GAAGK,SAAS,EAAE;AACtEG,MAAAA,eAAe,GAAG;AAAEE,QAAAA,GAAG,EAAEH,oBAAoB,CAACG,GAAG,GAAG,CAAC;AAAED,QAAAA,GAAG,EAAEF,oBAAoB,CAACE,GAAG,GAAG,CAAA;OAAG,CAAA;KAC7F,MAAM,IAAIT,WAAW,KAAKO,oBAAoB,EAAEG,GAAG,IAAIV,WAAW,GAAG,CAAC,EAAE;AACrEQ,MAAAA,eAAe,GAAG;AAAEE,QAAAA,GAAG,EAAEH,oBAAoB,CAACG,GAAG,GAAG,CAAC;AAAED,QAAAA,GAAG,EAAEF,oBAAoB,CAACE,GAAG,GAAG,CAAA;OAAG,CAAA;AAC9F,KAAC,MAAM;AACH,MAAA,MAAME,UAAU,GAAGC,oBAAoB,GAAG,CAAC,CAAA;AAC3C,MAAA,IAAIF,GAAG,GAAGV,WAAW,GAAGa,sBAAsB,CAAA;AAC9C,MAAA,IAAIJ,GAAG,GAAGT,WAAW,GAAGa,sBAAsB,CAAA;AAE9C,MAAA,IAAIb,WAAW,GAAGK,SAAS,GAAGQ,sBAAsB,EAAE;QAClDH,GAAG,GAAGL,SAAS,GAAGM,UAAU,CAAA;AAC5BF,QAAAA,GAAG,GAAGJ,SAAS,CAAA;AACnB,OAAC,MAAM,IAAIL,WAAW,GAAGW,UAAU,EAAE;AACjCD,QAAAA,GAAG,GAAG,CAAC,CAAA;AACPD,QAAAA,GAAG,GAAGE,UAAU,CAAA;AACpB,OAAA;AAEAH,MAAAA,eAAe,GAAG;QAAEE,GAAG;AAAED,QAAAA,GAAAA;OAAK,CAAA;AAClC,KAAA;IACAP,uBAAuB,CAACI,OAAO,GAAGE,eAAe,CAAA;AACjD,IAAA,OAAOA,eAAe,CAAA;AAC1B,GAAC,EAAE,CAACR,WAAW,EAAEC,UAAU,CAAC,CAAC,CAAA;AACjC;;;;"}

package/_internal/60139f6a.js

@@ -0,0 +1,9 @@
+import { isElement } from './617d453e.js';
+
+function getDocumentElement(element) {
+  // $FlowFixMe: assume body is always available
+  return ((isElement(element) ? element.ownerDocument : element.document) || window.document).documentElement;
+}
+
+export { getDocumentElement as default };
+//# sourceMappingURL=60139f6a.js.map

package/_internal/60139f6a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"60139f6a.js","sources":["../../../../node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js"],"sourcesContent":["import { isElement } from \"./instanceOf.js\";\nexport default function getDocumentElement(element) {\n  // $FlowFixMe: assume body is always available\n  return ((isElement(element) ? element.ownerDocument : element.document) || window.document).documentElement;\n}"],"names":[],"mappings":";;AACe,SAAS,kBAAkB,CAAC,OAAO,EAAE;AACpD;AACA,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,QAAQ,KAAK,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC;AAC9G;;;;","x_google_ignoreList":[0]}