@lumx/react 2.2.19 → 2.2.20-alpha-type.1

package/esm/_internal/AutocompleteMultiple.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteMultiple.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, RefObject, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, IconButtonProps, Offset, Placement, TextField, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps {\n    /**\n     * Whether the suggestions list should display anchored to the input or to the wrapper.\n     * @see {@link DropdownProps#anchorToInput}\n     */\n    anchorToInput?: boolean;\n    /**\n     * Props to pass to the clear button (minus those already set by the TextField props).\n     * If not specified, the button won't be displayed.\n     * @see {@link TextFieldProps#clearButtonProps}\n     */\n    clearButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /**\n     * Reference to the <input> or <textarea> element.\n     * @see {@link TextFieldProps#inputRef}\n     */\n    inputRef?: RefObject<HTMLInputElement>;\n    /**\n     * The offset that will be applied to the Dropdown position.\n     * @see {@link DropdownProps#offset}\n     */\n    offset?: Offset;\n    /**\n     * The preferred Dropdown location against the anchor element.\n     * @see {@link DropdownProps#placement}\n     */\n    placement?: Placement;\n    /**\n     * Whether the dropdown should fit to the anchor width or not.\n     * @see {@link DropdownProps#fitToAnchorWidth}\n     */\n    fitToAnchorWidth?: boolean;\n    /**\n     * The error related to the component.\n     * @see {@link TextFieldProps#error}\n     */\n    error?: string | ReactNode;\n    /**\n     * Whether the text field is displayed with error style or not.\n     * @see {@link TextFieldProps#hasError}\n     */\n    hasError?: boolean;\n    /**\n     * Whether the text box should be focused upon closing the suggestions or not.\n     */\n    shouldFocusOnClose?: boolean;\n    /**\n     * The helper message of the text field.\n     * @see {@link TextFieldProps#helper}\n     */\n    helper?: string;\n    /**\n     * The icon of the text field (SVG path).\n     * @see {@link TextFieldProps#icon}\n     */\n    icon?: string;\n    /**\n     * Whether the component is disabled or not.\n     * @see {@link TextFieldProps#isDisabled}\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the component is required or not.\n     * @see {@link TextFieldProps#isRequired}\n     */\n    isRequired?: boolean;\n    /**\n     * Whether the text field is displayed with valid style or not.\n     * @see {@link TextFieldProps#isValid}\n     */\n    isValid?: boolean;\n    /**\n     * The label of the text field displayed in a label tag.\n     * @see {@link TextFieldProps#label}\n     */\n    label?: string;\n    /**\n     * The placeholder message of the text field.\n     * @see {@link TextFieldProps#placeholder}\n     */\n    placeholder?: string;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** List of suggestions to display during autocomplete. */\n    children: React.ReactNode;\n    /**\n     * The list of chips to be displayed before the text field input.\n     */\n    chips?: React.ReactNode;\n    /**\n     * The value of the text field.\n     * @see {@link TextFieldProps#value}\n     */\n    value: string;\n    /**\n     * Whether the suggestions from the autocomplete should be displayed or not.\n     * @see {@link DropdownProps#isOpen}\n     */\n    isOpen: boolean;\n    /**\n     * The native input name property.\n     * @see {@link TextFieldProps#name}\n     */\n    name?: string;\n    /**\n     * Whether a click in the Autocomplete dropdown would close it or not.\n     * @see {@link DropdownProps#closeOnClick}\n     */\n    closeOnClick?: boolean;\n    /**\n     * Whether a click anywhere out of the Autocomplete would close it or not.\n     * @see {@link DropdownProps#closeOnClickAway}\n     */\n    closeOnClickAway?: boolean;\n    /**\n     * Whether an escape key press would close the Autocomplete or not.\n     * @see {@link DropdownProps#closeOnEscape}\n     */\n    closeOnEscape?: boolean;\n    /**\n     * The function called on blur.\n     * @see {@link TextFieldProps#onBlur}\n     */\n    onBlur?(event: React.FocusEvent): void;\n    /**\n     * On change callback.\n     * @see {@link TextFieldProps#onChange}\n     */\n    onChange(value: string, name?: string, event?: SyntheticEvent): void;\n    /**\n     * The function called on close.\n     * @see {@link DropdownProps#onClose}\n     */\n    onClose?(): void;\n    /**\n     * The function called on focus.\n     * @see {@link TextFieldProps#onFocus}\n     */\n    onFocus?(event: React.FocusEvent): void;\n    /**\n     * The function called when the bottom of the dropdown is reached.\n     * @see {@link DropdownProps#onInfiniteScroll}\n     */\n    onInfiniteScroll?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\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<AutocompleteProps> = {\n    anchorToInput: false,\n    closeOnClick: false,\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        anchorToInput,\n        children,\n        chips,\n        className,\n        closeOnClick,\n        closeOnClickAway,\n        closeOnEscape,\n        disabled,\n        error,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isDisabled = disabled,\n        isRequired,\n        isOpen,\n        isValid,\n        label,\n        name,\n        offset,\n        onBlur,\n        onChange,\n        onClose,\n        onFocus,\n        onInfiniteScroll,\n        placeholder,\n        placement,\n        shouldFocusOnClose,\n        theme,\n        value,\n        ...forwardedProps\n    } = props;\n    const inputAnchorRef = useRef<HTMLElement>(null);\n    const textFieldRef = useRef(null);\n    useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                }),\n            )}\n        >\n            <TextField\n                chips={chips}\n                error={error}\n                hasError={hasError}\n                helper={helper}\n                icon={icon}\n                inputRef={mergeRefs(inputAnchorRef, inputRef) as any}\n                clearButtonProps={clearButtonProps}\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n                isValid={isValid}\n                label={label}\n                name={name}\n                onBlur={onBlur}\n                onChange={onChange}\n                onFocus={onFocus}\n                placeholder={placeholder}\n                textFieldRef={textFieldRef}\n                theme={theme}\n                value={value}\n            />\n            <Dropdown\n                anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n                closeOnClick={closeOnClick}\n                closeOnClickAway={closeOnClickAway}\n                closeOnEscape={closeOnEscape}\n                fitToAnchorWidth={fitToAnchorWidth}\n                isOpen={isOpen}\n                offset={offset}\n                onClose={onClose}\n                onInfiniteScroll={onInfiniteScroll}\n                placement={placement}\n                shouldFocusOnOpen={false}\n                theme={theme}\n            >\n                {children}\n            </Dropdown>\n        </div>\n    );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { mdiClose } from '@lumx/icons';\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\n\nimport { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactNode } from 'react';\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: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {\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,\n        closeOnEscape,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isDisabled,\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,\n        shouldFocusOnClose,\n        theme,\n        type,\n        value,\n        values,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Autocomplete\n            ref={ref}\n            {...forwardedProps}\n            anchorToInput={anchorToInput}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                }),\n            )}\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            isDisabled={isDisabled}\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","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","children","chips","className","disabled","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isDisabled","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","classNames","handleBasicClasses","prefix","mergeRefs","displayName","defaultProps","selectedChipRender","choice","index","onClear","onClick","event","mdiClose","Size","xxs","s","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
+{"version":3,"file":"AutocompleteMultiple.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, IconButtonProps, Offset, Placement, TextField, TextFieldProps, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/mergeRefs';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps {\n    /**\n     * Whether the suggestions list should display anchored to the input or to the wrapper.\n     * @see {@link DropdownProps#anchorToInput}\n     */\n    anchorToInput?: boolean;\n    /**\n     * Props to pass to the clear button (minus those already set by the TextField props).\n     * If not specified, the button won't be displayed.\n     * @see {@link TextFieldProps#clearButtonProps}\n     */\n    clearButtonProps?: Pick<IconButtonProps, 'label'> &\n        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n    /**\n     * Reference to the <input> or <textarea> element.\n     * @see {@link TextFieldProps#inputRef}\n     */\n    inputRef?: TextFieldProps['inputRef'];\n    /**\n     * The offset that will be applied to the Dropdown position.\n     * @see {@link DropdownProps#offset}\n     */\n    offset?: Offset;\n    /**\n     * The preferred Dropdown location against the anchor element.\n     * @see {@link DropdownProps#placement}\n     */\n    placement?: Placement;\n    /**\n     * Whether the dropdown should fit to the anchor width or not.\n     * @see {@link DropdownProps#fitToAnchorWidth}\n     */\n    fitToAnchorWidth?: boolean;\n    /**\n     * The error related to the component.\n     * @see {@link TextFieldProps#error}\n     */\n    error?: string | ReactNode;\n    /**\n     * Whether the text field is displayed with error style or not.\n     * @see {@link TextFieldProps#hasError}\n     */\n    hasError?: boolean;\n    /**\n     * Whether the text box should be focused upon closing the suggestions or not.\n     */\n    shouldFocusOnClose?: boolean;\n    /**\n     * The helper message of the text field.\n     * @see {@link TextFieldProps#helper}\n     */\n    helper?: string;\n    /**\n     * The icon of the text field (SVG path).\n     * @see {@link TextFieldProps#icon}\n     */\n    icon?: string;\n    /**\n     * Whether the component is disabled or not.\n     * @see {@link TextFieldProps#isDisabled}\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the component is required or not.\n     * @see {@link TextFieldProps#isRequired}\n     */\n    isRequired?: boolean;\n    /**\n     * Whether the text field is displayed with valid style or not.\n     * @see {@link TextFieldProps#isValid}\n     */\n    isValid?: boolean;\n    /**\n     * The label of the text field displayed in a label tag.\n     * @see {@link TextFieldProps#label}\n     */\n    label?: string;\n    /**\n     * The placeholder message of the text field.\n     * @see {@link TextFieldProps#placeholder}\n     */\n    placeholder?: string;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** List of suggestions to display during autocomplete. */\n    children: React.ReactNode;\n    /**\n     * The list of chips to be displayed before the text field input.\n     */\n    chips?: React.ReactNode;\n    /**\n     * The value of the text field.\n     * @see {@link TextFieldProps#value}\n     */\n    value: string;\n    /**\n     * Whether the suggestions from the autocomplete should be displayed or not.\n     * @see {@link DropdownProps#isOpen}\n     */\n    isOpen: boolean;\n    /**\n     * The native input name property.\n     * @see {@link TextFieldProps#name}\n     */\n    name?: string;\n    /**\n     * Whether a click in the Autocomplete dropdown would close it or not.\n     * @see {@link DropdownProps#closeOnClick}\n     */\n    closeOnClick?: boolean;\n    /**\n     * Whether a click anywhere out of the Autocomplete would close it or not.\n     * @see {@link DropdownProps#closeOnClickAway}\n     */\n    closeOnClickAway?: boolean;\n    /**\n     * Whether an escape key press would close the Autocomplete or not.\n     * @see {@link DropdownProps#closeOnEscape}\n     */\n    closeOnEscape?: boolean;\n    /**\n     * The function called on blur.\n     * @see {@link TextFieldProps#onBlur}\n     */\n    onBlur?(event: React.FocusEvent): void;\n    /**\n     * On change callback.\n     * @see {@link TextFieldProps#onChange}\n     */\n    onChange(value: string, name?: string, event?: SyntheticEvent): void;\n    /**\n     * The function called on close.\n     * @see {@link DropdownProps#onClose}\n     */\n    onClose?(): void;\n    /**\n     * The function called on focus.\n     * @see {@link TextFieldProps#onFocus}\n     */\n    onFocus?(event: React.FocusEvent): void;\n    /**\n     * The function called when the bottom of the dropdown is reached.\n     * @see {@link DropdownProps#onInfiniteScroll}\n     */\n    onInfiniteScroll?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Autocomplete';\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<AutocompleteProps> = {\n    anchorToInput: false,\n    closeOnClick: false,\n    closeOnClickAway: true,\n    closeOnEscape: true,\n    shouldFocusOnClose: false,\n};\n\n/**\n * Autocomplete component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Autocomplete: Comp<AutocompleteProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        anchorToInput,\n        children,\n        chips,\n        className,\n        closeOnClick,\n        closeOnClickAway,\n        closeOnEscape,\n        disabled,\n        error,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isDisabled = disabled,\n        isRequired,\n        isOpen,\n        isValid,\n        label,\n        name,\n        offset,\n        onBlur,\n        onChange,\n        onClose,\n        onFocus,\n        onInfiniteScroll,\n        placeholder,\n        placement,\n        shouldFocusOnClose,\n        theme,\n        value,\n        ...forwardedProps\n    } = props;\n    const inputAnchorRef = useRef<HTMLElement>(null);\n    const textFieldRef = useRef(null);\n    useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                }),\n            )}\n        >\n            <TextField\n                chips={chips}\n                error={error}\n                hasError={hasError}\n                helper={helper}\n                icon={icon}\n                inputRef={mergeRefs(inputAnchorRef as React.RefObject<HTMLInputElement>, inputRef)}\n                clearButtonProps={clearButtonProps}\n                isDisabled={isDisabled}\n                isRequired={isRequired}\n                isValid={isValid}\n                label={label}\n                name={name}\n                onBlur={onBlur}\n                onChange={onChange}\n                onFocus={onFocus}\n                placeholder={placeholder}\n                textFieldRef={textFieldRef}\n                theme={theme}\n                value={value}\n            />\n            <Dropdown\n                anchorRef={anchorToInput ? inputAnchorRef : textFieldRef}\n                closeOnClick={closeOnClick}\n                closeOnClickAway={closeOnClickAway}\n                closeOnEscape={closeOnEscape}\n                fitToAnchorWidth={fitToAnchorWidth}\n                isOpen={isOpen}\n                offset={offset}\n                onClose={onClose}\n                onInfiniteScroll={onInfiniteScroll}\n                placement={placement}\n                shouldFocusOnOpen={false}\n                theme={theme}\n            >\n                {children}\n            </Dropdown>\n        </div>\n    );\n});\nAutocomplete.displayName = COMPONENT_NAME;\nAutocomplete.className = CLASSNAME;\nAutocomplete.defaultProps = DEFAULT_PROPS;\n","import { mdiClose } from '@lumx/icons';\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\n\nimport { Comp, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactNode } from 'react';\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: Comp<AutocompleteMultipleProps, HTMLDivElement> = forwardRef((props, ref) => {\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,\n        closeOnEscape,\n        fitToAnchorWidth,\n        hasError,\n        helper,\n        icon,\n        inputRef,\n        clearButtonProps,\n        isDisabled,\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,\n        shouldFocusOnClose,\n        theme,\n        type,\n        value,\n        values,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Autocomplete\n            ref={ref}\n            {...forwardedProps}\n            anchorToInput={anchorToInput}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                }),\n            )}\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            isDisabled={isDisabled}\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","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","children","chips","className","disabled","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isDisabled","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","classNames","handleBasicClasses","prefix","mergeRefs","displayName","defaultProps","selectedChipRender","choice","index","onClear","onClick","event","mdiClose","Size","xxs","s","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}

package/esm/_internal/ButtonRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonRoot.js","sources":["../../../src/components/button/ButtonRoot.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;\n\n/**\n * Button size definition.\n */\nexport type ButtonSize = Extract<Size, 's' | 'm'>;\n\nexport interface BaseButtonProps extends GenericProps {\n    /** ARIA button label. */\n    ['aria-label']?: string;\n    /** Color variant. */\n    color?: Color;\n    /** Emphasis variant. */\n    emphasis?: Emphasis;\n    /** Whether or not the button has a background color in low emphasis. */\n    hasBackground?: boolean;\n    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */\n    href?: string;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Native button name property. */\n    name?: string;\n    /** Size variant. */\n    size?: ButtonSize;\n    /** Native anchor target property. */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Native button type. */\n    type?: HTMLButtonProps['type'];\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\nexport interface ButtonRootProps extends BaseButtonProps {\n    variant: 'button' | 'icon';\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ButtonRoot';\n\nexport const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;\nexport const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;\n\n/**\n * Render a button wrapper with the ButtonRoot inside.\n *\n * @param  props Component props.\n * @return React element.\n */\nconst renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {\n    const { color, emphasis, variant, fullWidth } = props;\n\n    const adaptedColor =\n        emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);\n\n    const wrapperClassName = classNames(\n        handleBasicClasses({\n            color: adaptedColor,\n            prefix: BUTTON_WRAPPER_CLASSNAME,\n            variant,\n            fullWidth,\n        }),\n    );\n    const buttonProps = { ...props, hasBackground: false };\n\n    return (\n        <div className={wrapperClassName}>\n            {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n            <ButtonRoot {...buttonProps} />\n        </div>\n    );\n};\n\n/**\n * ButtonRoot component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {\n    const {\n        'aria-label': ariaLabel,\n        children,\n        className,\n        color,\n        disabled,\n        emphasis,\n        hasBackground,\n        href,\n        isDisabled = disabled,\n        isSelected,\n        isActive,\n        isFocused,\n        isHovered,\n        linkAs,\n        name,\n        size,\n        target,\n        theme,\n        variant,\n        type = 'button',\n        fullWidth,\n        ...forwardedProps\n    } = props;\n\n    const adaptedColor =\n        color ||\n        (emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light) ||\n        (emphasis === Emphasis.high && ColorPalette.primary) ||\n        ColorPalette.dark;\n\n    if (hasBackground) {\n        return renderButtonWrapper({ ...props, ref, variant, color: adaptedColor });\n    }\n\n    const buttonClassName = classNames(\n        className,\n        handleBasicClasses({\n            color: adaptedColor,\n            emphasis,\n            isSelected,\n            isDisabled,\n            isActive,\n            isFocused,\n            isHovered,\n            prefix: BUTTON_CLASSNAME,\n            size,\n            theme: emphasis === Emphasis.high && theme,\n            variant,\n            fullWidth,\n        }),\n    );\n\n    /**\n     * If the linkAs prop is used, we use the linkAs component instead of a <button>.\n     * If there is an href attribute, we display an <a> instead of a <button>.\n     *\n     * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.\n     */\n    if ((linkAs || !isEmpty(props.href)) && !isDisabled) {\n        return renderLink(\n            {\n                linkAs,\n                ...forwardedProps,\n                'aria-label': ariaLabel,\n                href,\n                target,\n                className: buttonClassName,\n                ref: ref as RefObject<HTMLAnchorElement>,\n            },\n            children,\n        );\n    }\n    return (\n        <button\n            {...forwardedProps}\n            disabled={isDisabled}\n            aria-disabled={isDisabled}\n            aria-label={ariaLabel}\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={buttonClassName}\n            name={name}\n            type={\n                // eslint-disable-next-line react/button-has-type\n                type\n            }\n        >\n            {children}\n        </button>\n    );\n});\nButtonRoot.displayName = COMPONENT_NAME;\nButtonRoot.defaultProps = {};\n"],"names":["COMPONENT_NAME","BUTTON_WRAPPER_CLASSNAME","CSS_PREFIX","BUTTON_CLASSNAME","renderButtonWrapper","props","color","emphasis","variant","fullWidth","adaptedColor","Emphasis","low","ColorPalette","light","dark","wrapperClassName","classNames","handleBasicClasses","prefix","buttonProps","hasBackground","ButtonRoot","forwardRef","ref","ariaLabel","children","className","disabled","href","isDisabled","isSelected","isActive","isFocused","isHovered","linkAs","name","size","target","theme","type","forwardedProps","high","Theme","primary","buttonClassName","isEmpty","renderLink","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"ButtonRoot.js","sources":["../../../src/components/button/ButtonRoot.tsx"],"sourcesContent":["import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, RefObject } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;\n\n/**\n * Button size definition.\n */\nexport type ButtonSize = Extract<Size, 's' | 'm'>;\n\nexport interface BaseButtonProps\n    extends GenericProps,\n        Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'> {\n    /** Color variant. */\n    color?: Color;\n    /** Emphasis variant. */\n    emphasis?: Emphasis;\n    /** Whether or not the button has a background color in low emphasis. */\n    hasBackground?: boolean;\n    /** Native anchor href property. It determines whether the Button will be a <button> or an <a>. */\n    href?: string;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Whether the component is selected or not. */\n    isSelected?: boolean;\n    /** Native button name property. */\n    name?: string;\n    /** Size variant. */\n    size?: ButtonSize;\n    /** Native anchor target property. */\n    target?: '_self' | '_blank' | '_parent' | '_top';\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Native button type. */\n    type?: HTMLButtonProps['type'];\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\nexport interface ButtonRootProps extends BaseButtonProps {\n    variant: 'button' | 'icon';\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ButtonRoot';\n\nexport const BUTTON_WRAPPER_CLASSNAME = `${CSS_PREFIX}-button-wrapper`;\nexport const BUTTON_CLASSNAME = `${CSS_PREFIX}-button`;\n\n/**\n * Render a button wrapper with the ButtonRoot inside.\n *\n * @param  props Component props.\n * @return React element.\n */\nconst renderButtonWrapper: React.FC<ButtonRootProps> = (props) => {\n    const { color, emphasis, variant, fullWidth } = props;\n\n    const adaptedColor =\n        emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);\n\n    const wrapperClassName = classNames(\n        handleBasicClasses({\n            color: adaptedColor,\n            prefix: BUTTON_WRAPPER_CLASSNAME,\n            variant,\n            fullWidth,\n        }),\n    );\n    const buttonProps = { ...props, hasBackground: false };\n\n    return (\n        <div className={wrapperClassName}>\n            {/* eslint-disable-next-line @typescript-eslint/no-use-before-define */}\n            <ButtonRoot {...buttonProps} />\n        </div>\n    );\n};\n\n/**\n * ButtonRoot component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ButtonRoot: Comp<ButtonRootProps, HTMLButtonElement | HTMLAnchorElement> = forwardRef((props, ref) => {\n    const {\n        'aria-label': ariaLabel,\n        children,\n        className,\n        color,\n        disabled,\n        emphasis,\n        hasBackground,\n        href,\n        isDisabled = disabled,\n        isSelected,\n        isActive,\n        isFocused,\n        isHovered,\n        linkAs,\n        name,\n        size,\n        target,\n        theme,\n        variant,\n        type = 'button',\n        fullWidth,\n        ...forwardedProps\n    } = props;\n\n    const adaptedColor =\n        color ||\n        (emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light) ||\n        (emphasis === Emphasis.high && ColorPalette.primary) ||\n        ColorPalette.dark;\n\n    if (hasBackground) {\n        return renderButtonWrapper({ ...props, ref, variant, color: adaptedColor });\n    }\n\n    const buttonClassName = classNames(\n        className,\n        handleBasicClasses({\n            color: adaptedColor,\n            emphasis,\n            isSelected,\n            isDisabled,\n            isActive,\n            isFocused,\n            isHovered,\n            prefix: BUTTON_CLASSNAME,\n            size,\n            theme: emphasis === Emphasis.high && theme,\n            variant,\n            fullWidth,\n        }),\n    );\n\n    /**\n     * If the linkAs prop is used, we use the linkAs component instead of a <button>.\n     * If there is an href attribute, we display an <a> instead of a <button>.\n     *\n     * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.\n     */\n    if ((linkAs || !isEmpty(props.href)) && !isDisabled) {\n        return renderLink(\n            {\n                linkAs,\n                ...forwardedProps,\n                'aria-label': ariaLabel,\n                href,\n                target,\n                className: buttonClassName,\n                ref: ref as RefObject<HTMLAnchorElement>,\n            },\n            children,\n        );\n    }\n    return (\n        <button\n            {...forwardedProps}\n            disabled={isDisabled}\n            aria-disabled={isDisabled}\n            aria-label={ariaLabel}\n            ref={ref as RefObject<HTMLButtonElement>}\n            className={buttonClassName}\n            name={name}\n            type={\n                // eslint-disable-next-line react/button-has-type\n                type\n            }\n        >\n            {children}\n        </button>\n    );\n});\nButtonRoot.displayName = COMPONENT_NAME;\nButtonRoot.defaultProps = {};\n"],"names":["COMPONENT_NAME","BUTTON_WRAPPER_CLASSNAME","CSS_PREFIX","BUTTON_CLASSNAME","renderButtonWrapper","props","color","emphasis","variant","fullWidth","adaptedColor","Emphasis","low","ColorPalette","light","dark","wrapperClassName","classNames","handleBasicClasses","prefix","buttonProps","hasBackground","ButtonRoot","forwardRef","ref","ariaLabel","children","className","disabled","href","isDisabled","isSelected","isActive","isFocused","isHovered","linkAs","name","size","target","theme","type","forwardedProps","high","Theme","primary","buttonClassName","isEmpty","renderLink","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/Checkbox2.js

@@ -86,7 +86,8 @@ var Checkbox = forwardRef(function (props, ref) {
     name: name,
     value: value,
     checked: isChecked,
-    onChange: handleChange
+    onChange: handleChange,
+    "aria-describedby": helper ? "".concat(inputId, "-helper") : undefined
   }, inputProps)), React.createElement("div", {
     className: "".concat(CLASSNAME, "__input-placeholder")
   }, React.createElement("div", {
@@ -102,6 +103,7 @@ var Checkbox = forwardRef(function (props, ref) {
     className: "".concat(CLASSNAME, "__label"),
     theme: theme
   }, label), helper && React.createElement(InputHelper, {
+    id: "".concat(inputId, "-helper"),
     className: "".concat(CLASSNAME, "__helper"),
     theme: theme
   }, helper)));

package/esm/_internal/Checkbox2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox2.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { mdiCheck } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps {\n    /** Helper text. */\n    helper?: string;\n    /** Native input id property. */\n    id?: string;\n    /** Native input ref. */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /** Whether it is checked or not. */\n    isChecked?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Label text. */\n    label?: ReactNode;\n    /** Native input name property. */\n    name?: string;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Native input value property. */\n    value?: string;\n    /** On change callback. */\n    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n    /** optional props for input */\n    inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Checkbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        checked,\n        className,\n        disabled,\n        helper,\n        id,\n        inputRef,\n        isChecked = checked,\n        isDisabled = disabled,\n        label,\n        name,\n        onChange,\n        theme,\n        value,\n        inputProps = {},\n        ...forwardedProps\n    } = props;\n    const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            onChange(!isChecked, value, name, event);\n        }\n    };\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    isChecked,\n                    isDisabled,\n                    isUnchecked: !isChecked,\n                    prefix: CLASSNAME,\n                    theme,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__input-wrapper`}>\n                <input\n                    ref={inputRef}\n                    type=\"checkbox\"\n                    id={inputId}\n                    className={`${CLASSNAME}__input-native`}\n                    tabIndex={isDisabled ? -1 : 0}\n                    name={name}\n                    value={value}\n                    checked={isChecked}\n                    onChange={handleChange}\n                    {...inputProps}\n                />\n\n                <div className={`${CLASSNAME}__input-placeholder`}>\n                    <div className={`${CLASSNAME}__input-background`} />\n\n                    <div className={`${CLASSNAME}__input-indicator`}>\n                        <Icon icon={mdiCheck} />\n                    </div>\n                </div>\n            </div>\n\n            <div className={`${CLASSNAME}__content`}>\n                {label && (\n                    <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n                        {label}\n                    </InputLabel>\n                )}\n                {helper && (\n                    <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n                        {helper}\n                    </InputHelper>\n                )}\n            </div>\n        </div>\n    );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Checkbox","forwardRef","props","ref","checked","className","disabled","helper","id","inputRef","isChecked","isDisabled","label","name","onChange","value","inputProps","forwardedProps","inputId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","mdiCheck","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Checkbox2.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { mdiCheck } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps {\n    /** Helper text. */\n    helper?: string;\n    /** Native input id property. */\n    id?: string;\n    /** Native input ref. */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /** Whether it is checked or not. */\n    isChecked?: boolean;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Label text. */\n    label?: ReactNode;\n    /** Native input name property. */\n    name?: string;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Native input value property. */\n    value?: string;\n    /** On change callback. */\n    onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n    /** optional props for input */\n    inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\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<CheckboxProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Checkbox component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        checked,\n        className,\n        disabled,\n        helper,\n        id,\n        inputRef,\n        isChecked = checked,\n        isDisabled = disabled,\n        label,\n        name,\n        onChange,\n        theme,\n        value,\n        inputProps = {},\n        ...forwardedProps\n    } = props;\n    const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (onChange) {\n            onChange(!isChecked, value, name, event);\n        }\n    };\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    isChecked,\n                    isDisabled,\n                    isUnchecked: !isChecked,\n                    prefix: CLASSNAME,\n                    theme,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__input-wrapper`}>\n                <input\n                    ref={inputRef}\n                    type=\"checkbox\"\n                    id={inputId}\n                    className={`${CLASSNAME}__input-native`}\n                    tabIndex={isDisabled ? -1 : 0}\n                    name={name}\n                    value={value}\n                    checked={isChecked}\n                    onChange={handleChange}\n                    aria-describedby={helper ? `${inputId}-helper` : undefined}\n                    {...inputProps}\n                />\n\n                <div className={`${CLASSNAME}__input-placeholder`}>\n                    <div className={`${CLASSNAME}__input-background`} />\n\n                    <div className={`${CLASSNAME}__input-indicator`}>\n                        <Icon icon={mdiCheck} />\n                    </div>\n                </div>\n            </div>\n\n            <div className={`${CLASSNAME}__content`}>\n                {label && (\n                    <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n                        {label}\n                    </InputLabel>\n                )}\n                {helper && (\n                    <InputHelper id={`${inputId}-helper`} className={`${CLASSNAME}__helper`} theme={theme}>\n                        {helper}\n                    </InputHelper>\n                )}\n            </div>\n        </div>\n    );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Checkbox","forwardRef","props","ref","checked","className","disabled","helper","id","inputRef","isChecked","isDisabled","label","name","onChange","value","inputProps","forwardedProps","inputId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","undefined","mdiCheck","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/ClickAwayProvider.js

@@ -3,30 +3,108 @@ import React, { useEffect, createContext, useContext } from 'react';
 import { f as onEscapePressed } from './getRootClassName.js';
 import isEmpty from 'lodash/isEmpty';
 import { D as DOCUMENT } from './constants.js';
+import last from 'lodash/last';
 import pull from 'lodash/pull';
 
+/** CSS selector listing all tabbable elements. */
+var TABBABLE_ELEMENTS_SELECTOR = "a[href], button, textarea, input:not([type=\"hidden\"]):not([hidden]), [tabindex]";
+/** CSS selector matching element that are disabled (should not receive focus). */
+
+var DISABLED_SELECTOR = "[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])";
+
+var isNotDisabled = function isNotDisabled(element) {
+  return !element.matches(DISABLED_SELECTOR);
+};
 /**
- * Triggers a callback when the escape key is pressed.
+ * Get first and last elements focusable in an element.
+ *
+ * @param parentElement The element in which to search focusable elements.
+ * @return first and last focusable elements
+ */
+
+
+function getFirstAndLastFocusable(parentElement) {
+  var focusableElements = Array.from(parentElement.querySelectorAll(TABBABLE_ELEMENTS_SELECTOR)); // First non disabled element.
+
+  var first = focusableElements.find(isNotDisabled); // Last non disabled element.
+
+  var last = focusableElements.reverse().find(isNotDisabled);
+
+  if (last && first) {
+    return {
+      first: first,
+      last: last
+    };
+  }
+
+  return {};
+}
+
+/**
+ * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
+ * listener are disabled).
+ * When a listener gets unregistered, the previously registered listener gets enabled again.
+ */
+function makeListenerTowerContext() {
+  var LISTENERS = [];
+  return {
+    register: function register(listener) {
+      var _last;
+
+      // Disable previous listener.
+      (_last = last(LISTENERS)) === null || _last === void 0 ? void 0 : _last.disable(); // Keep track of current listener.
+
+      LISTENERS.push(listener); // Enable current listener.
+
+      listener.enable();
+    },
+    unregister: function unregister(listener) {
+      var _last2;
+
+      // Disable current listener.
+      listener.disable(); // Remove current listener.
+
+      pull(LISTENERS, listener); // Enable previous listener.
+
+      (_last2 = last(LISTENERS)) === null || _last2 === void 0 ? void 0 : _last2.enable();
+    }
+  };
+}
+
+var LISTENERS = makeListenerTowerContext();
+/**
+ * Register a global listener on 'Escape' key pressed.
+ *
+ * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
+ * one gets activated again.
  *
  * @param callback      Callback
  * @param closeOnEscape Disables the hook when false
- * @param rootElement   Element on which to listen the escape key
  */
 
 function useCallbackOnEscape(callback) {
   var closeOnEscape = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var rootElement = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
   useEffect(function () {
-    if (closeOnEscape && callback && rootElement) {
-      var onKeyDown = onEscapePressed(callback);
-      rootElement.addEventListener('keydown', onKeyDown);
-      return function () {
-        return rootElement.removeEventListener('keydown', onKeyDown);
-      };
+    var rootElement = DOCUMENT === null || DOCUMENT === void 0 ? void 0 : DOCUMENT.body;
+
+    if (!closeOnEscape || !callback || !rootElement) {
+      return undefined;
     }
 
-    return undefined;
-  }, [callback, closeOnEscape, rootElement]);
+    var onKeyDown = onEscapePressed(callback);
+    var listener = {
+      enable: function enable() {
+        return rootElement.addEventListener('keydown', onKeyDown);
+      },
+      disable: function disable() {
+        return rootElement.removeEventListener('keydown', onKeyDown);
+      }
+    };
+    LISTENERS.register(listener);
+    return function () {
+      return LISTENERS.unregister(listener);
+    };
+  }, [callback, closeOnEscape]);
 }
 
 var EVENT_TYPES = ['mousedown', 'touchstart'];
@@ -112,5 +190,5 @@ var ClickAwayProvider = function ClickAwayProvider(_ref) {
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
-export { ClickAwayProvider as C, useCallbackOnEscape as u };
+export { ClickAwayProvider as C, getFirstAndLastFocusable as g, makeListenerTowerContext as m, useCallbackOnEscape as u };
 //# sourceMappingURL=ClickAwayProvider.js.map

package/esm/_internal/ClickAwayProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClickAwayProvider.js","sources":["../../../src/hooks/useCallbackOnEscape.ts","../../../src/hooks/useClickAway.tsx","../../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["import { DOCUMENT } from '@lumx/react/constants';\nimport { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect } from 'react';\n\n/**\n * Triggers a callback when the escape key is pressed.\n *\n * @param callback      Callback\n * @param closeOnEscape Disables the hook when false\n * @param rootElement   Element on which to listen the escape key\n */\nexport function useCallbackOnEscape(\n    callback: Callback | undefined,\n    closeOnEscape = true,\n    rootElement = DOCUMENT?.body,\n) {\n    useEffect(() => {\n        if (closeOnEscape && callback && rootElement) {\n            const onKeyDown = onEscapePressed(callback);\n            rootElement.addEventListener('keydown', onKeyDown);\n            return () => rootElement.removeEventListener('keydown', onKeyDown);\n        }\n        return undefined;\n    }, [callback, closeOnEscape, rootElement]);\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.current?.contains(target));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements from which we want to detect the click away.\n     */\n    refs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, refs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            if (isClickAway(evt.target as HTMLElement, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, refs]);\n}\n","import React, { createContext, useContext, useEffect } from 'react';\nimport pull from 'lodash/pull';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\nconst ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree we trying to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayParameters> = ({ children, callback, refs }) => {\n    const ancestorChildrenRefs = useContext(ClickAwayAncestorContext);\n\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        const { current: currentAncestorChildrenRefs } = ancestorChildrenRefs || {};\n        if (!currentAncestorChildrenRefs || !currentRefs) {\n            return undefined;\n        }\n        // Push current refs to parent.\n        currentAncestorChildrenRefs.push(...currentRefs);\n        return () => {\n            // Pull current refs from parent.\n            pull(currentAncestorChildrenRefs, ...currentRefs);\n        };\n    }, [ancestorChildrenRefs, refs]);\n\n    useClickAway({ callback, refs });\n    return <ClickAwayAncestorContext.Provider value={refs}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n"],"names":["useCallbackOnEscape","callback","closeOnEscape","rootElement","DOCUMENT","body","useEffect","onKeyDown","onEscapePressed","addEventListener","removeEventListener","undefined","EVENT_TYPES","isClickAway","target","refs","some","e","current","contains","useClickAway","currentRefs","isEmpty","listener","evt","forEach","evtType","document","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","ancestorChildrenRefs","useContext","currentAncestorChildrenRefs","push","pull","displayName"],"mappings":";;;;;;;AAIA;;;;;;;;AAOO,SAASA,mBAAT,CACHC,QADG,EAIL;AAAA,MAFEC,aAEF,uEAFkB,IAElB;AAAA,MADEC,WACF,uEADgBC,QAChB,aADgBA,QAChB,uBADgBA,QAAQ,CAAEC,IAC1B;AACEC,EAAAA,SAAS,CAAC,YAAM;AACZ,QAAIJ,aAAa,IAAID,QAAjB,IAA6BE,WAAjC,EAA8C;AAC1C,UAAMI,SAAS,GAAGC,eAAe,CAACP,QAAD,CAAjC;AACAE,MAAAA,WAAW,CAACM,gBAAZ,CAA6B,SAA7B,EAAwCF,SAAxC;AACA,aAAO;AAAA,eAAMJ,WAAW,CAACO,mBAAZ,CAAgC,SAAhC,EAA2CH,SAA3C,CAAN;AAAA,OAAP;AACH;;AACD,WAAOI,SAAP;AACH,GAPQ,EAON,CAACV,QAAD,EAAWC,aAAX,EAA0BC,WAA1B,CAPM,CAAT;AAQH;;AClBD,IAAMS,WAAW,GAAG,CAAC,WAAD,EAAc,YAAd,CAApB;;AAEA,SAASC,WAAT,CAAqBC,MAArB,EAA0CC,IAA1C,EAAwF;AACpF;AACA,SAAO,CAACA,IAAI,CAACC,IAAL,CAAU,UAACC,CAAD;AAAA;;AAAA,WAAOA,CAAP,aAAOA,CAAP,qCAAOA,CAAC,CAAEC,OAAV,+CAAO,WAAYC,QAAZ,CAAqBL,MAArB,CAAP;AAAA,GAAV,CAAR;AACH;;AAaD;;;;;AAKO,SAASM,YAAT,OAAqE;AAAA,MAA7CnB,QAA6C,QAA7CA,QAA6C;AAAA,MAAnCc,IAAmC,QAAnCA,IAAmC;AACxET,EAAAA,SAAS,CAAC,YAAM;AAAA,QACKe,WADL,GACqBN,IADrB,CACJG,OADI;;AAEZ,QAAI,CAACjB,QAAD,IAAa,CAACoB,WAAd,IAA6BC,OAAO,CAACD,WAAD,CAAxC,EAAuD;AACnD,aAAOV,SAAP;AACH;;AACD,QAAMY,QAAuB,GAAG,SAA1BA,QAA0B,CAACC,GAAD,EAAS;AACrC,UAAIX,WAAW,CAACW,GAAG,CAACV,MAAL,EAA4BO,WAA5B,CAAf,EAAyD;AACrDpB,QAAAA,QAAQ,CAACuB,GAAD,CAAR;AACH;AACJ,KAJD;;AAMAZ,IAAAA,WAAW,CAACa,OAAZ,CAAoB,UAACC,OAAD;AAAA,aAAaC,QAAQ,CAAClB,gBAAT,CAA0BiB,OAA1B,EAAmCH,QAAnC,CAAb;AAAA,KAApB;AACA,WAAO,YAAM;AACTX,MAAAA,WAAW,CAACa,OAAZ,CAAoB,UAACC,OAAD;AAAA,eAAaC,QAAQ,CAACjB,mBAAT,CAA6BgB,OAA7B,EAAsCH,QAAtC,CAAb;AAAA,OAApB;AACH,KAFD;AAGH,GAfQ,EAeN,CAACtB,QAAD,EAAWc,IAAX,CAfM,CAAT;AAgBH;;AC1CD,IAAMa,wBAAwB,GAAGC,aAAa,CAAqC,IAArC,CAA9C;AAEA;;;;;;;IAMaC,iBAAgD,GAAG,SAAnDA,iBAAmD,OAAkC;AAAA,MAA/BC,QAA+B,QAA/BA,QAA+B;AAAA,MAArB9B,QAAqB,QAArBA,QAAqB;AAAA,MAAXc,IAAW,QAAXA,IAAW;AAC9F,MAAMiB,oBAAoB,GAAGC,UAAU,CAACL,wBAAD,CAAvC;AAEAtB,EAAAA,SAAS,CAAC,YAAM;AAAA,QACKe,WADL,GACqBN,IADrB,CACJG,OADI;;AAAA,gBAEqCc,oBAAoB,IAAI,EAF7D;AAAA,QAEKE,2BAFL,SAEJhB,OAFI;;AAGZ,QAAI,CAACgB,2BAAD,IAAgC,CAACb,WAArC,EAAkD;AAC9C,aAAOV,SAAP;AACH,KALW;;;AAOZuB,IAAAA,2BAA2B,CAACC,IAA5B,OAAAD,2BAA2B,qBAASb,WAAT,EAA3B;AACA,WAAO,YAAM;AACT;AACAe,MAAAA,IAAI,MAAJ,UAAKF,2BAAL,4BAAqCb,WAArC;AACH,KAHD;AAIH,GAZQ,EAYN,CAACW,oBAAD,EAAuBjB,IAAvB,CAZM,CAAT;AAcAK,EAAAA,YAAY,CAAC;AAAEnB,IAAAA,QAAQ,EAARA,QAAF;AAAYc,IAAAA,IAAI,EAAJA;AAAZ,GAAD,CAAZ;AACA,SAAO,oBAAC,wBAAD,CAA0B,QAA1B;AAAmC,IAAA,KAAK,EAAEA;AAA1C,KAAiDgB,QAAjD,CAAP;AACH;AACDD,iBAAiB,CAACO,WAAlB,GAAgC,mBAAhC;;;;"}
+{"version":3,"file":"ClickAwayProvider.js","sources":["../../../src/utils/focus/getFirstAndLastFocusable.ts","../../../src/utils/makeListenerTowerContext.ts","../../../src/hooks/useCallbackOnEscape.ts","../../../src/hooks/useClickAway.tsx","../../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["/** CSS selector listing all tabbable elements. */\nconst TABBABLE_ELEMENTS_SELECTOR = `a[href], button, textarea, input:not([type=\"hidden\"]):not([hidden]), [tabindex]`;\n\n/** CSS selector matching element that are disabled (should not receive focus). */\nconst DISABLED_SELECTOR = `[hidden], [tabindex=\"-1\"], [disabled]:not([disabled=\"false\"]), [aria-disabled]:not([aria-disabled=\"false\"])`;\n\nconst isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);\n\n/**\n * Get first and last elements focusable in an element.\n *\n * @param parentElement The element in which to search focusable elements.\n * @return first and last focusable elements\n */\nexport function getFirstAndLastFocusable(parentElement: HTMLElement) {\n    const focusableElements = Array.from(parentElement.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR));\n\n    // First non disabled element.\n    const first = focusableElements.find(isNotDisabled);\n    // Last non disabled element.\n    const last = focusableElements.reverse().find(isNotDisabled);\n\n    if (last && first) {\n        return { first, last };\n    }\n    return {};\n}\n","import last from 'lodash/last';\nimport pull from 'lodash/pull';\n\nexport type Listener = { enable(): void; disable(): void };\n\n/**\n * Keep track of listeners, only the last registered listener gets activated at any point (previously registered\n * listener are disabled).\n * When a listener gets unregistered, the previously registered listener gets enabled again.\n */\nexport function makeListenerTowerContext() {\n    const LISTENERS: Listener[] = [];\n\n    return {\n        register(listener: Listener) {\n            // Disable previous listener.\n            last(LISTENERS)?.disable();\n            // Keep track of current listener.\n            LISTENERS.push(listener);\n            // Enable current listener.\n            listener.enable();\n        },\n        unregister(listener: Listener) {\n            // Disable current listener.\n            listener.disable();\n            // Remove current listener.\n            pull(LISTENERS, listener);\n            // Enable previous listener.\n            last(LISTENERS)?.enable();\n        },\n    };\n}\n","import { DOCUMENT } from '@lumx/react/constants';\nimport { Callback, onEscapePressed } from '@lumx/react/utils';\nimport { useEffect } from 'react';\nimport { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';\n\nconst LISTENERS = makeListenerTowerContext();\n\n/**\n * Register a global listener on 'Escape' key pressed.\n *\n * If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous\n * one gets activated again.\n *\n * @param callback      Callback\n * @param closeOnEscape Disables the hook when false\n */\nexport function useCallbackOnEscape(callback: Callback | undefined, closeOnEscape = true) {\n    useEffect(() => {\n        const rootElement = DOCUMENT?.body;\n        if (!closeOnEscape || !callback || !rootElement) {\n            return undefined;\n        }\n        const onKeyDown = onEscapePressed(callback);\n\n        const listener: Listener = {\n            enable: () => rootElement.addEventListener('keydown', onKeyDown),\n            disable: () => rootElement.removeEventListener('keydown', onKeyDown),\n        };\n\n        LISTENERS.register(listener);\n        return () => LISTENERS.unregister(listener);\n    }, [callback, closeOnEscape]);\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(target: HTMLElement, refs: Array<RefObject<HTMLElement>>): boolean {\n    // The target element is not contained in any of the listed element references.\n    return !refs.some((e) => e?.current?.contains(target));\n}\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements from which we want to detect the click away.\n     */\n    refs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, refs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            if (isClickAway(evt.target as HTMLElement, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\n    }, [callback, refs]);\n}\n","import React, { createContext, useContext, useEffect } from 'react';\nimport pull from 'lodash/pull';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\nconst ClickAwayAncestorContext = createContext<ClickAwayParameters['refs'] | null>(null);\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree we trying to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayParameters> = ({ children, callback, refs }) => {\n    const ancestorChildrenRefs = useContext(ClickAwayAncestorContext);\n\n    useEffect(() => {\n        const { current: currentRefs } = refs;\n        const { current: currentAncestorChildrenRefs } = ancestorChildrenRefs || {};\n        if (!currentAncestorChildrenRefs || !currentRefs) {\n            return undefined;\n        }\n        // Push current refs to parent.\n        currentAncestorChildrenRefs.push(...currentRefs);\n        return () => {\n            // Pull current refs from parent.\n            pull(currentAncestorChildrenRefs, ...currentRefs);\n        };\n    }, [ancestorChildrenRefs, refs]);\n\n    useClickAway({ callback, refs });\n    return <ClickAwayAncestorContext.Provider value={refs}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n"],"names":["TABBABLE_ELEMENTS_SELECTOR","DISABLED_SELECTOR","isNotDisabled","element","matches","getFirstAndLastFocusable","parentElement","focusableElements","Array","from","querySelectorAll","first","find","last","reverse","makeListenerTowerContext","LISTENERS","register","listener","disable","push","enable","unregister","pull","useCallbackOnEscape","callback","closeOnEscape","useEffect","rootElement","DOCUMENT","body","undefined","onKeyDown","onEscapePressed","addEventListener","removeEventListener","EVENT_TYPES","isClickAway","target","refs","some","e","current","contains","useClickAway","currentRefs","isEmpty","evt","forEach","evtType","document","ClickAwayAncestorContext","createContext","ClickAwayProvider","children","ancestorChildrenRefs","useContext","currentAncestorChildrenRefs","displayName"],"mappings":"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"}

package/esm/_internal/DatePickerField.js

@@ -263,13 +263,17 @@ var DatePickerField = forwardRef(function (props, ref) {
       value = props.value,
       forwardedProps = _objectWithoutProperties(props, ["defaultMonth", "disabled", "isDisabled", "locale", "maxDate", "minDate", "name", "nextButtonProps", "onChange", "previousButtonProps", "value"]);
 
-  var wrapperRef = useRef(null);
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      wrapperElement = _useState2[0],
+      setWrapperElement = _useState2[1];
+
   var anchorRef = useRef(null);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
   var toggleSimpleMenu = function toggleSimpleMenu() {
     setIsOpen(!isOpen);
@@ -287,8 +291,12 @@ var DatePickerField = forwardRef(function (props, ref) {
   }; // Handle focus trap.
 
 
-  var todayOrSelectedDateRef = useRef(null);
-  useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      todayOrSelectedDate = _useState6[0],
+      setTodayOrSelectedDate = _useState6[1];
+
+  useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
 
   var onTextFieldChange = function onTextFieldChange(textFieldValue, textFieldName, event) {
     if (!textFieldValue) {
@@ -320,19 +328,18 @@ var DatePickerField = forwardRef(function (props, ref) {
     onClose: onClose,
     closeOnClickAway: true,
     closeOnEscape: true
-  }, React.createElement("div", {
-    ref: wrapperRef
   }, React.createElement(DatePicker, {
+    ref: setWrapperElement,
     locale: locale,
     maxDate: maxDate,
     minDate: minDate,
     value: value,
     onChange: onDatePickerChange,
-    todayOrSelectedDateRef: todayOrSelectedDateRef,
+    todayOrSelectedDateRef: setTodayOrSelectedDate,
     defaultMonth: defaultMonth,
     nextButtonProps: nextButtonProps,
     previousButtonProps: previousButtonProps
-  }))) : null);
+  })) : null);
 });
 DatePickerField.displayName = COMPONENT_NAME$2;
 

package/esm/_internal/DatePickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/date-picker/constants.ts","../../../../lumx-core/src/js/date-picker.ts","../../../src/components/date-picker/DatePickerControlled.tsx","../../../src/components/date-picker/DatePicker.tsx","../../../src/components/date-picker/DatePickerField.tsx"],"sourcesContent":["import { getRootClassName } from '@lumx/react/utils';\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","import range from 'lodash/range';\nimport mMoment, { Moment } from 'moment';\nimport { extendMoment } from 'moment-range';\n\nconst moment = extendMoment(mMoment as any);\n\nconst DAYS_PER_WEEK = 7;\n\ninterface AnnotatedDate {\n    date: Moment;\n    isDisplayed: boolean;\n    isClickable: boolean;\n    isToday: boolean;\n}\n\n/**\n * Get the list of days in a week based on locale.\n *\n * @param  locale The locale using to generate the order of days in a week.\n * @return The list of days in a week based on locale.\n */\nexport function getWeekDays(locale: string): Moment[] {\n    return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));\n}\n\n/**\n * Get month calendar based on locale and start date.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getMonthCalendar(locale: string, selectedMonth?: Moment): Moment[] {\n    const firstDayOfMonth = moment(selectedMonth).startOf('month');\n    const endDayOfMonth = moment(selectedMonth).endOf('month');\n    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday\n    const firstDay = firstDayOfMonth.locale(locale).startOf('week');\n    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());\n\n    return Array.from(monthRange.by('day'));\n}\n\n/**\n * Get month calendar based on locale and start date.\n * Each day is annotated to know if they are displayed and/or clickable.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  minDate       The first selectable date.\n * @param  maxDate       The last selectable date.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getAnnotatedMonthCalendar(\n    locale: string,\n    minDate?: Date,\n    maxDate?: Date,\n    selectedMonth?: Moment,\n): AnnotatedDate[] {\n    const month = moment(selectedMonth).locale(locale).month();\n\n    const clickableRange = moment.range(minDate as Date, maxDate as Date);\n\n    return getMonthCalendar(locale, selectedMonth).map((date) => {\n        return {\n            date,\n            isClickable: clickableRange.contains(date),\n            isDisplayed: date.month() === month,\n            isToday: date.isSame(moment(), 'day'),\n        };\n    });\n}\n","import React, { forwardRef } from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';\nimport { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';\nimport { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';\nimport { Comp } from '@lumx/react/utils';\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}\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: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        locale,\n        maxDate,\n        minDate,\n        nextButtonProps,\n        onChange,\n        onNextMonthChange,\n        onPrevMonthChange,\n        previousButtonProps,\n        selectedMonth,\n        todayOrSelectedDateRef,\n        value,\n    } = props;\n    const days = React.useMemo(() => {\n        return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));\n    }, [locale, minDate, maxDate, selectedMonth]);\n\n    const weekDays = React.useMemo(() => {\n        return getWeekDays(locale);\n    }, [locale]);\n\n    return (\n        <div ref={ref} className={`${CLASSNAME}`}>\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                    <span className={`${CLASSNAME}__month`}>\n                        {moment(selectedMonth).locale(locale).format('MMMM YYYY')}\n                    </span>\n                }\n            />\n            <div className={`${CLASSNAME}__calendar`}>\n                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>\n                    {weekDays.map((weekDay) => (\n                        <div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                            <span className={`${CLASSNAME}__week-day`}>\n                                {weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n\n                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>\n                    {days.map((annotatedDate) => {\n                        if (annotatedDate.isDisplayed) {\n                            return (\n                                <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                                    <button\n                                        ref={\n                                            (value && annotatedDate.date.isSame(value, 'day')) ||\n                                            (!value && annotatedDate.isToday)\n                                                ? todayOrSelectedDateRef\n                                                : null\n                                        }\n                                        className={classNames(`${CLASSNAME}__month-day`, {\n                                            [`${CLASSNAME}__month-day--is-selected`]:\n                                                value && annotatedDate.date.isSame(value, 'day'),\n                                            [`${CLASSNAME}__month-day--is-today`]:\n                                                annotatedDate.isClickable && annotatedDate.isToday,\n                                        })}\n                                        disabled={!annotatedDate.isClickable}\n                                        type=\"button\"\n                                        onClick={() => onChange(moment(annotatedDate.date).toDate())}\n                                    >\n                                        <span>{annotatedDate.date.format('DD')}</span>\n                                    </button>\n                                </div>\n                            );\n                        }\n                        return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;\n                    })}\n                </div>\n            </div>\n        </div>\n    );\n});\nDatePickerControlled.displayName = COMPONENT_NAME;\nDatePickerControlled.className = CLASSNAME;\n","import moment from 'moment';\nimport React, { forwardRef, useState } from 'react';\nimport { Comp } from '@lumx/react/utils';\nimport { CLASSNAME, COMPONENT_NAME } from './constants';\nimport { DatePickerControlled } from './DatePickerControlled';\nimport { DatePickerProps } from './types';\n\n/**\n * DatePicker component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;\n    let castedValue;\n    if (value) {\n        castedValue = moment(value);\n    } else if (defaultMonth) {\n        castedValue = moment(defaultMonth);\n    }\n    if (castedValue && !castedValue.isValid()) {\n        // eslint-disable-next-line no-console\n        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);\n    }\n    const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();\n\n    const [monthOffset, setMonthOffset] = useState(0);\n\n    const setPrevMonth = () => setMonthOffset(monthOffset - 1);\n    const setNextMonth = () => setMonthOffset(monthOffset + 1);\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate);\n        setMonthOffset(0);\n    };\n\n    const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();\n\n    return (\n        <DatePickerControlled\n            ref={ref}\n            {...forwardedProps}\n            defaultMonth={defaultMonth}\n            locale={locale}\n            value={value}\n            onPrevMonthChange={setPrevMonth}\n            onNextMonthChange={setNextMonth}\n            selectedMonth={selectedMonth}\n            onChange={onDatePickerChange}\n        />\n    );\n});\nDatePicker.displayName = COMPONENT_NAME;\nDatePicker.className = CLASSNAME;\n","import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\n\nimport moment from 'moment';\n\nimport React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';\n\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { Comp, GenericProps } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerFieldProps extends GenericProps {\n    /** Default month. */\n    defaultMonth?: Date;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\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    /** Native input name property. */\n    name?: string;\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: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        defaultMonth,\n        disabled,\n        isDisabled = disabled,\n        locale,\n        maxDate,\n        minDate,\n        name,\n        nextButtonProps,\n        onChange,\n        previousButtonProps,\n        value,\n        ...forwardedProps\n    } = props;\n    const wrapperRef = useRef(null);\n    const anchorRef = useRef(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const toggleSimpleMenu = () => {\n        setIsOpen(!isOpen);\n    };\n\n    const onClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    useFocus(anchorRef.current, isOpen);\n    const handleKeyboardNav = (evt: React.KeyboardEvent) => {\n        if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {\n            toggleSimpleMenu();\n        }\n    };\n\n    // Handle focus trap.\n    const todayOrSelectedDateRef = useRef<HTMLButtonElement>(null);\n    useFocusTrap(todayOrSelectedDateRef.current && wrapperRef.current, todayOrSelectedDateRef.current);\n\n    const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {\n        if (!textFieldValue) {\n            onChange(undefined, textFieldName, event);\n        }\n    };\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate, name);\n        onClose();\n    };\n\n    return (\n        <>\n            <TextField\n                ref={ref}\n                {...forwardedProps}\n                name={name}\n                forceFocusStyle={isOpen}\n                textFieldRef={anchorRef}\n                value={value ? moment(value).locale(locale).format('LL') : ''}\n                onClick={toggleSimpleMenu}\n                onChange={onTextFieldChange}\n                onKeyPress={handleKeyboardNav}\n                isDisabled={isDisabled}\n                readOnly\n            />\n            {isOpen ? (\n                <Popover\n                    anchorRef={anchorRef}\n                    placement={Placement.BOTTOM_START}\n                    isOpen={isOpen}\n                    onClose={onClose}\n                    closeOnClickAway\n                    closeOnEscape\n                >\n                    <div ref={wrapperRef}>\n                        <DatePicker\n                            locale={locale}\n                            maxDate={maxDate}\n                            minDate={minDate}\n                            value={value}\n                            onChange={onDatePickerChange}\n                            todayOrSelectedDateRef={todayOrSelectedDateRef}\n                            defaultMonth={defaultMonth}\n                            nextButtonProps={nextButtonProps}\n                            previousButtonProps={previousButtonProps}\n                        />\n                    </div>\n                </Popover>\n            ) : null}\n        </>\n    );\n});\nDatePickerField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","moment","extendMoment","mMoment","DAYS_PER_WEEK","getWeekDays","locale","range","map","_","i","weekday","getMonthCalendar","selectedMonth","firstDayOfMonth","startOf","endDayOfMonth","endOf","firstDay","monthRange","toDate","Array","from","by","getAnnotatedMonthCalendar","minDate","maxDate","month","clickableRange","date","isClickable","contains","isDisplayed","isToday","isSame","DatePickerControlled","forwardRef","props","ref","nextButtonProps","onChange","onNextMonthChange","onPrevMonthChange","previousButtonProps","todayOrSelectedDateRef","value","days","React","useMemo","weekDays","Emphasis","low","mdiChevronRight","mdiChevronLeft","format","weekDay","unix","slice","toLocaleUpperCase","annotatedDate","classNames","displayName","className","DatePicker","defaultMonth","forwardedProps","castedValue","isValid","console","warn","selectedDay","useState","monthOffset","setMonthOffset","setPrevMonth","setNextMonth","onDatePickerChange","newDate","add","DatePickerField","disabled","isDisabled","name","wrapperRef","useRef","anchorRef","isOpen","setIsOpen","toggleSimpleMenu","onClose","useCallback","useFocus","current","handleKeyboardNav","evt","key","useFocusTrap","onTextFieldChange","textFieldValue","textFieldName","event","undefined","Placement","BOTTOM_START"],"mappings":"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"}
+{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/date-picker/constants.ts","../../../../lumx-core/src/js/date-picker.ts","../../../src/components/date-picker/DatePickerControlled.tsx","../../../src/components/date-picker/DatePicker.tsx","../../../src/components/date-picker/DatePickerField.tsx"],"sourcesContent":["import { getRootClassName } from '@lumx/react/utils';\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","import range from 'lodash/range';\nimport mMoment, { Moment } from 'moment';\nimport { extendMoment } from 'moment-range';\n\nconst moment = extendMoment(mMoment as any);\n\nconst DAYS_PER_WEEK = 7;\n\ninterface AnnotatedDate {\n    date: Moment;\n    isDisplayed: boolean;\n    isClickable: boolean;\n    isToday: boolean;\n}\n\n/**\n * Get the list of days in a week based on locale.\n *\n * @param  locale The locale using to generate the order of days in a week.\n * @return The list of days in a week based on locale.\n */\nexport function getWeekDays(locale: string): Moment[] {\n    return range(DAYS_PER_WEEK).map((_, i) => moment().locale(locale).weekday(i));\n}\n\n/**\n * Get month calendar based on locale and start date.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getMonthCalendar(locale: string, selectedMonth?: Moment): Moment[] {\n    const firstDayOfMonth = moment(selectedMonth).startOf('month');\n    const endDayOfMonth = moment(selectedMonth).endOf('month');\n    // The first day of the week depends on the locale used. In FR the first day is a monday but in EN the first day is sunday\n    const firstDay = firstDayOfMonth.locale(locale).startOf('week');\n    const monthRange = moment.range(firstDay.toDate(), endDayOfMonth.toDate());\n\n    return Array.from(monthRange.by('day'));\n}\n\n/**\n * Get month calendar based on locale and start date.\n * Each day is annotated to know if they are displayed and/or clickable.\n *\n * @param  locale        The locale using to generate the order of days in a week.\n * @param  minDate       The first selectable date.\n * @param  maxDate       The last selectable date.\n * @param  selectedMonth The selected month.\n * @return The list of days in a week based on locale.\n */\nexport function getAnnotatedMonthCalendar(\n    locale: string,\n    minDate?: Date,\n    maxDate?: Date,\n    selectedMonth?: Moment,\n): AnnotatedDate[] {\n    const month = moment(selectedMonth).locale(locale).month();\n\n    const clickableRange = moment.range(minDate as Date, maxDate as Date);\n\n    return getMonthCalendar(locale, selectedMonth).map((date) => {\n        return {\n            date,\n            isClickable: clickableRange.contains(date),\n            isDisplayed: date.month() === month,\n            isToday: date.isSame(moment(), 'day'),\n        };\n    });\n}\n","import React, { forwardRef } from 'react';\nimport moment from 'moment';\nimport classNames from 'classnames';\nimport { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';\nimport { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';\nimport { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';\nimport { Comp } from '@lumx/react/utils';\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}\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: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        locale,\n        maxDate,\n        minDate,\n        nextButtonProps,\n        onChange,\n        onNextMonthChange,\n        onPrevMonthChange,\n        previousButtonProps,\n        selectedMonth,\n        todayOrSelectedDateRef,\n        value,\n    } = props;\n    const days = React.useMemo(() => {\n        return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));\n    }, [locale, minDate, maxDate, selectedMonth]);\n\n    const weekDays = React.useMemo(() => {\n        return getWeekDays(locale);\n    }, [locale]);\n\n    return (\n        <div ref={ref} className={`${CLASSNAME}`}>\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                    <span className={`${CLASSNAME}__month`}>\n                        {moment(selectedMonth).locale(locale).format('MMMM YYYY')}\n                    </span>\n                }\n            />\n            <div className={`${CLASSNAME}__calendar`}>\n                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>\n                    {weekDays.map((weekDay) => (\n                        <div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                            <span className={`${CLASSNAME}__week-day`}>\n                                {weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}\n                            </span>\n                        </div>\n                    ))}\n                </div>\n\n                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>\n                    {days.map((annotatedDate) => {\n                        if (annotatedDate.isDisplayed) {\n                            return (\n                                <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>\n                                    <button\n                                        ref={\n                                            (value && annotatedDate.date.isSame(value, 'day')) ||\n                                            (!value && annotatedDate.isToday)\n                                                ? todayOrSelectedDateRef\n                                                : null\n                                        }\n                                        className={classNames(`${CLASSNAME}__month-day`, {\n                                            [`${CLASSNAME}__month-day--is-selected`]:\n                                                value && annotatedDate.date.isSame(value, 'day'),\n                                            [`${CLASSNAME}__month-day--is-today`]:\n                                                annotatedDate.isClickable && annotatedDate.isToday,\n                                        })}\n                                        disabled={!annotatedDate.isClickable}\n                                        type=\"button\"\n                                        onClick={() => onChange(moment(annotatedDate.date).toDate())}\n                                    >\n                                        <span>{annotatedDate.date.format('DD')}</span>\n                                    </button>\n                                </div>\n                            );\n                        }\n                        return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;\n                    })}\n                </div>\n            </div>\n        </div>\n    );\n});\nDatePickerControlled.displayName = COMPONENT_NAME;\nDatePickerControlled.className = CLASSNAME;\n","import moment from 'moment';\nimport React, { forwardRef, useState } from 'react';\nimport { Comp } from '@lumx/react/utils';\nimport { CLASSNAME, COMPONENT_NAME } from './constants';\nimport { DatePickerControlled } from './DatePickerControlled';\nimport { DatePickerProps } from './types';\n\n/**\n * DatePicker component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DatePicker: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;\n    let castedValue;\n    if (value) {\n        castedValue = moment(value);\n    } else if (defaultMonth) {\n        castedValue = moment(defaultMonth);\n    }\n    if (castedValue && !castedValue.isValid()) {\n        // eslint-disable-next-line no-console\n        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);\n    }\n    const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();\n\n    const [monthOffset, setMonthOffset] = useState(0);\n\n    const setPrevMonth = () => setMonthOffset(monthOffset - 1);\n    const setNextMonth = () => setMonthOffset(monthOffset + 1);\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate);\n        setMonthOffset(0);\n    };\n\n    const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();\n\n    return (\n        <DatePickerControlled\n            ref={ref}\n            {...forwardedProps}\n            defaultMonth={defaultMonth}\n            locale={locale}\n            value={value}\n            onPrevMonthChange={setPrevMonth}\n            onNextMonthChange={setNextMonth}\n            selectedMonth={selectedMonth}\n            onChange={onDatePickerChange}\n        />\n    );\n});\nDatePicker.displayName = COMPONENT_NAME;\nDatePicker.className = CLASSNAME;\n","import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\n\nimport moment from 'moment';\n\nimport React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';\n\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { Comp, GenericProps } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DatePickerFieldProps extends GenericProps {\n    /** Default month. */\n    defaultMonth?: Date;\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\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    /** Native input name property. */\n    name?: string;\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: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        defaultMonth,\n        disabled,\n        isDisabled = disabled,\n        locale,\n        maxDate,\n        minDate,\n        name,\n        nextButtonProps,\n        onChange,\n        previousButtonProps,\n        value,\n        ...forwardedProps\n    } = props;\n    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);\n    const anchorRef = useRef(null);\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const toggleSimpleMenu = () => {\n        setIsOpen(!isOpen);\n    };\n\n    const onClose = useCallback(() => {\n        setIsOpen(false);\n    }, []);\n\n    useFocus(anchorRef.current, isOpen);\n    const handleKeyboardNav = (evt: React.KeyboardEvent) => {\n        if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {\n            toggleSimpleMenu();\n        }\n    };\n\n    // Handle focus trap.\n    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);\n    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);\n\n    const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {\n        if (!textFieldValue) {\n            onChange(undefined, textFieldName, event);\n        }\n    };\n\n    const onDatePickerChange = (newDate?: Date) => {\n        onChange(newDate, name);\n        onClose();\n    };\n\n    return (\n        <>\n            <TextField\n                ref={ref}\n                {...forwardedProps}\n                name={name}\n                forceFocusStyle={isOpen}\n                textFieldRef={anchorRef}\n                value={value ? moment(value).locale(locale).format('LL') : ''}\n                onClick={toggleSimpleMenu}\n                onChange={onTextFieldChange}\n                onKeyPress={handleKeyboardNav}\n                isDisabled={isDisabled}\n                readOnly\n            />\n            {isOpen ? (\n                <Popover\n                    anchorRef={anchorRef}\n                    placement={Placement.BOTTOM_START}\n                    isOpen={isOpen}\n                    onClose={onClose}\n                    closeOnClickAway\n                    closeOnEscape\n                >\n                    <DatePicker\n                        ref={setWrapperElement}\n                        locale={locale}\n                        maxDate={maxDate}\n                        minDate={minDate}\n                        value={value}\n                        onChange={onDatePickerChange}\n                        todayOrSelectedDateRef={setTodayOrSelectedDate}\n                        defaultMonth={defaultMonth}\n                        nextButtonProps={nextButtonProps}\n                        previousButtonProps={previousButtonProps}\n                    />\n                </Popover>\n            ) : null}\n        </>\n    );\n});\nDatePickerField.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","moment","extendMoment","mMoment","DAYS_PER_WEEK","getWeekDays","locale","range","map","_","i","weekday","getMonthCalendar","selectedMonth","firstDayOfMonth","startOf","endDayOfMonth","endOf","firstDay","monthRange","toDate","Array","from","by","getAnnotatedMonthCalendar","minDate","maxDate","month","clickableRange","date","isClickable","contains","isDisplayed","isToday","isSame","DatePickerControlled","forwardRef","props","ref","nextButtonProps","onChange","onNextMonthChange","onPrevMonthChange","previousButtonProps","todayOrSelectedDateRef","value","days","React","useMemo","weekDays","Emphasis","low","mdiChevronRight","mdiChevronLeft","format","weekDay","unix","slice","toLocaleUpperCase","annotatedDate","classNames","displayName","className","DatePicker","defaultMonth","forwardedProps","castedValue","isValid","console","warn","selectedDay","useState","monthOffset","setMonthOffset","setPrevMonth","setNextMonth","onDatePickerChange","newDate","add","DatePickerField","disabled","isDisabled","name","wrapperElement","setWrapperElement","anchorRef","useRef","isOpen","setIsOpen","toggleSimpleMenu","onClose","useCallback","useFocus","current","handleKeyboardNav","evt","key","todayOrSelectedDate","setTodayOrSelectedDate","useFocusTrap","onTextFieldChange","textFieldValue","textFieldName","event","undefined","Placement","BOTTOM_START"],"mappings":"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"}