@lumx/react 3.20.1-alpha.15 → 3.20.1-alpha.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_internal/{Button-f19e18df.js → Button-1f227024.js} +30 -28
- package/_internal/{Button-f19e18df.js.map → Button-1f227024.js.map} +1 -1
- package/_internal/{ButtonRoot-ab633b1d.js → ButtonRoot-823f3e9c.js} +18 -16
- package/_internal/{ButtonRoot-ab633b1d.js.map → ButtonRoot-823f3e9c.js.map} +1 -1
- package/_internal/{Chip-4c572eec.js → Chip-a34f6905.js} +31 -34
- package/_internal/{Chip-4c572eec.js.map → Chip-a34f6905.js.map} +1 -1
- package/_internal/{ClickAwayProvider-bcce6ceb.js → ClickAwayProvider-7093ba23.js} +6 -4
- package/_internal/{ClickAwayProvider-bcce6ceb.js.map → ClickAwayProvider-7093ba23.js.map} +1 -1
- package/_internal/{DisabledStateContext-077b7bef.js → DisabledStateContext-ea04260d.js} +6 -6
- package/_internal/{DisabledStateContext-077b7bef.js.map → DisabledStateContext-ea04260d.js.map} +1 -1
- package/_internal/{HeadingLevelProvider-e4817816.js → HeadingLevelProvider-ebdcb0c7.js} +6 -4
- package/_internal/{HeadingLevelProvider-e4817816.js.map → HeadingLevelProvider-ebdcb0c7.js.map} +1 -1
- package/_internal/{IconButton-10585058.js → IconButton-f4df224c.js} +29 -24
- package/_internal/{IconButton-10585058.js.map → IconButton-f4df224c.js.map} +1 -1
- package/_internal/ImageCaption-8134a3aa.js +75 -0
- package/_internal/{ImageCaption-4279b2b6.js.map → ImageCaption-8134a3aa.js.map} +1 -1
- package/_internal/{List-d5f5d465.js → List-54237e0e.js} +52 -50
- package/_internal/{List-d5f5d465.js.map → List-54237e0e.js.map} +1 -1
- package/_internal/{PopoverDialog-21e5c9dd.js → PopoverDialog-e0967e5f.js} +166 -158
- package/_internal/{PopoverDialog-21e5c9dd.js.map → PopoverDialog-e0967e5f.js.map} +1 -1
- package/_internal/{Portal-c43d098b.js → Portal-3f86608e.js} +5 -2
- package/_internal/{Portal-c43d098b.js.map → Portal-3f86608e.js.map} +1 -1
- package/_internal/{RawClickable-c76bbc4c.js → RawClickable-2c2b6a89.js} +9 -7
- package/_internal/{RawClickable-c76bbc4c.js.map → RawClickable-2c2b6a89.js.map} +1 -1
- package/_internal/{Slides-01f513ce.js → Slides-b7a67f32.js} +99 -96
- package/_internal/{Slides-01f513ce.js.map → Slides-b7a67f32.js.map} +1 -1
- package/_internal/{Thumbnail-30d2a781.js → Thumbnail-b5dea0af.js} +46 -45
- package/_internal/{Thumbnail-30d2a781.js.map → Thumbnail-b5dea0af.js.map} +1 -1
- package/_internal/components/{alert-dialog-8f1c163c.js → alert-dialog-b284b191.js} +50 -35
- package/_internal/components/{alert-dialog-8f1c163c.js.map → alert-dialog-b284b191.js.map} +1 -1
- package/_internal/components/{autocomplete-bfbdeb3c.js → autocomplete-8d3f37ea.js} +64 -67
- package/_internal/components/{autocomplete-bfbdeb3c.js.map → autocomplete-8d3f37ea.js.map} +1 -1
- package/_internal/components/{avatar-6990e3e9.js → avatar-5fc70e00.js} +28 -32
- package/_internal/components/{avatar-6990e3e9.js.map → avatar-5fc70e00.js.map} +1 -1
- package/_internal/components/{badge-81543bc7.js → badge-8390e590.js} +18 -18
- package/_internal/components/{badge-81543bc7.js.map → badge-8390e590.js.map} +1 -1
- package/_internal/components/{button-927abe71.js → button-e3c7f2eb.js} +11 -13
- package/_internal/components/{button-927abe71.js.map → button-e3c7f2eb.js.map} +1 -1
- package/_internal/components/{checkbox-dc4caec8.js → checkbox-d1ca9748.js} +53 -44
- package/_internal/components/{checkbox-dc4caec8.js.map → checkbox-d1ca9748.js.map} +1 -1
- package/_internal/components/{chip-fb3d0c76.js → chip-e40c5521.js} +10 -12
- package/_internal/components/{chip-fb3d0c76.js.map → chip-e40c5521.js.map} +1 -1
- package/_internal/components/comment-block-a3cf7b9b.js +138 -0
- package/_internal/components/{comment-block-b84c4694.js.map → comment-block-a3cf7b9b.js.map} +1 -1
- package/_internal/components/date-picker-6c1b14e4.js +2 -0
- package/_internal/components/date-picker-6c1b14e4.js.map +1 -0
- package/_internal/components/{dialog-7dbcb485.js → dialog-ebdb9500.js} +70 -58
- package/_internal/components/{dialog-7dbcb485.js.map → dialog-ebdb9500.js.map} +1 -1
- package/_internal/components/{divider-12e9b6a0.js → divider-116af6b9.js} +7 -10
- package/_internal/components/{divider-12e9b6a0.js.map → divider-116af6b9.js.map} +1 -1
- package/_internal/components/{drag-handle-a38ff757.js → drag-handle-5215cd21.js} +14 -16
- package/_internal/components/{drag-handle-a38ff757.js.map → drag-handle-5215cd21.js.map} +1 -1
- package/_internal/components/{dropdown-38b0b6a0.js → dropdown-0baed51b.js} +15 -16
- package/_internal/components/{dropdown-38b0b6a0.js.map → dropdown-0baed51b.js.map} +1 -1
- package/_internal/components/{expansion-panel-c4b93653.js → expansion-panel-5533a680.js} +48 -39
- package/_internal/components/{expansion-panel-c4b93653.js.map → expansion-panel-5533a680.js.map} +1 -1
- package/_internal/components/{flag-c5e2f5f0.js → flag-8d4a7e72.js} +20 -16
- package/_internal/components/{flag-c5e2f5f0.js.map → flag-8d4a7e72.js.map} +1 -1
- package/_internal/components/{flex-box-c8701a85.js → flex-box-55144e5f.js} +9 -11
- package/_internal/components/{flex-box-c8701a85.js.map → flex-box-55144e5f.js.map} +1 -1
- package/_internal/components/{generic-block-0d6ad5a6.js → generic-block-ff0509ee.js} +35 -26
- package/_internal/components/{generic-block-0d6ad5a6.js.map → generic-block-ff0509ee.js.map} +1 -1
- package/_internal/components/{grid-3b194fe8.js → grid-6f1b5a41.js} +15 -20
- package/_internal/components/{grid-3b194fe8.js.map → grid-6f1b5a41.js.map} +1 -1
- package/_internal/components/{grid-column-985b9327.js → grid-column-f01df853.js} +8 -9
- package/_internal/components/{grid-column-985b9327.js.map → grid-column-f01df853.js.map} +1 -1
- package/_internal/components/{heading-5e954dfc.js → heading-89239843.js} +11 -12
- package/_internal/components/{heading-5e954dfc.js.map → heading-89239843.js.map} +1 -1
- package/_internal/components/{icon-2e7345ad.js → icon-b708cca4.js} +24 -25
- package/_internal/components/{icon-2e7345ad.js.map → icon-b708cca4.js.map} +1 -1
- package/_internal/components/{image-block-8d21dd7e.js → image-block-7938422d.js} +35 -34
- package/_internal/components/{image-block-8d21dd7e.js.map → image-block-7938422d.js.map} +1 -1
- package/_internal/components/{image-lightbox-4a5ab962.js → image-lightbox-58331704.js} +113 -100
- package/_internal/components/{image-lightbox-4a5ab962.js.map → image-lightbox-58331704.js.map} +1 -1
- package/_internal/components/{inline-list-4884f004.js → inline-list-e6f19a98.js} +24 -24
- package/_internal/components/{inline-list-4884f004.js.map → inline-list-e6f19a98.js.map} +1 -1
- package/_internal/components/{input-helper-e644e05e.js → input-helper-64153099.js} +9 -11
- package/_internal/components/{input-helper-e644e05e.js.map → input-helper-64153099.js.map} +1 -1
- package/_internal/components/{input-label-5e509a1b.js → input-label-2feb0bb0.js} +9 -11
- package/_internal/components/{input-label-5e509a1b.js.map → input-label-2feb0bb0.js.map} +1 -1
- package/_internal/components/{lightbox-bec1b95f.js → lightbox-570ad9e5.js} +55 -49
- package/_internal/components/{lightbox-bec1b95f.js.map → lightbox-570ad9e5.js.map} +1 -1
- package/_internal/components/{link-9637b9e4.js → link-91f76477.js} +25 -23
- package/_internal/components/{link-9637b9e4.js.map → link-91f76477.js.map} +1 -1
- package/_internal/components/link-preview-fdd8d738.js +117 -0
- package/_internal/components/{link-preview-7a4a6e4b.js.map → link-preview-fdd8d738.js.map} +1 -1
- package/_internal/components/{list-5c8f7122.js → list-b08d8423.js} +14 -20
- package/_internal/components/{list-5c8f7122.js.map → list-b08d8423.js.map} +1 -1
- package/_internal/components/{message-a67067d9.js → message-29cb9181.js} +24 -24
- package/_internal/components/{message-a67067d9.js.map → message-29cb9181.js.map} +1 -1
- package/_internal/components/{mosaic-92b66c80.js → mosaic-cdb9f563.js} +36 -33
- package/_internal/components/{mosaic-92b66c80.js.map → mosaic-cdb9f563.js.map} +1 -1
- package/_internal/components/navigation-8b7d9bd8.js +225 -0
- package/_internal/components/{navigation-4fd3917d.js.map → navigation-8b7d9bd8.js.map} +1 -1
- package/_internal/components/{notification-9063c963.js → notification-a45fda96.js} +45 -40
- package/_internal/components/{notification-9063c963.js.map → notification-a45fda96.js.map} +1 -1
- package/_internal/components/popover-65bfbc57.js +3 -0
- package/_internal/components/popover-65bfbc57.js.map +1 -0
- package/_internal/components/post-block-52e58dd5.js +109 -0
- package/_internal/components/{post-block-0cfc2206.js.map → post-block-52e58dd5.js.map} +1 -1
- package/_internal/components/{progress-eaf5b33d.js → progress-f39c3fa2.js} +44 -50
- package/_internal/components/{progress-eaf5b33d.js.map → progress-f39c3fa2.js.map} +1 -1
- package/_internal/components/{progress-tracker-4a65718d.js → progress-tracker-512d7a08.js} +59 -63
- package/_internal/components/{progress-tracker-4a65718d.js.map → progress-tracker-512d7a08.js.map} +1 -1
- package/_internal/components/{radio-button-3ef8a325.js → radio-button-559a4863.js} +54 -53
- package/_internal/components/{radio-button-3ef8a325.js.map → radio-button-559a4863.js.map} +1 -1
- package/_internal/components/select-48d4fa8c.js +454 -0
- package/_internal/components/{select-d46cfe35.js.map → select-48d4fa8c.js.map} +1 -1
- package/_internal/components/{side-navigation-75b22f19.js → side-navigation-f9bc5b4e.js} +62 -56
- package/_internal/components/{side-navigation-75b22f19.js.map → side-navigation-f9bc5b4e.js.map} +1 -1
- package/_internal/components/{skeleton-361ce335.js → skeleton-c66516ee.js} +23 -31
- package/_internal/components/{skeleton-361ce335.js.map → skeleton-c66516ee.js.map} +1 -1
- package/_internal/components/{slider-8094cb5c.js → slider-efbfbc45.js} +62 -56
- package/_internal/components/{slider-8094cb5c.js.map → slider-efbfbc45.js.map} +1 -1
- package/_internal/components/{slideshow-2e8cd372.js → slideshow-dd312470.js} +39 -38
- package/_internal/components/{slideshow-2e8cd372.js.map → slideshow-dd312470.js.map} +1 -1
- package/_internal/components/{switch-5516949b.js → switch-769a2a04.js} +49 -45
- package/_internal/components/{switch-5516949b.js.map → switch-769a2a04.js.map} +1 -1
- package/_internal/components/{table-fa198ee6.js → table-8617b1ba.js} +68 -73
- package/_internal/components/{table-fa198ee6.js.map → table-8617b1ba.js.map} +1 -1
- package/_internal/components/{tabs-bb9bc2a5.js → tabs-884c57b6.js} +41 -41
- package/_internal/components/{tabs-bb9bc2a5.js.map → tabs-884c57b6.js.map} +1 -1
- package/_internal/components/text-c7b1e079.js +2 -0
- package/_internal/components/text-c7b1e079.js.map +1 -0
- package/_internal/components/{text-field-82733568.js → text-field-478acd86.js} +116 -103
- package/_internal/components/{text-field-82733568.js.map → text-field-478acd86.js.map} +1 -1
- package/_internal/components/{thumbnail-e3acff82.js → thumbnail-310a4c4b.js} +2 -2
- package/_internal/components/{thumbnail-e3acff82.js.map → thumbnail-310a4c4b.js.map} +1 -1
- package/_internal/components/{toolbar-155562be.js → toolbar-a43533a2.js} +18 -17
- package/_internal/components/{toolbar-155562be.js.map → toolbar-a43533a2.js.map} +1 -1
- package/_internal/components/{tooltip-84ffb4f9.js → tooltip-2885ab2e.js} +44 -35
- package/_internal/components/{tooltip-84ffb4f9.js.map → tooltip-2885ab2e.js.map} +1 -1
- package/_internal/components/{uploader-896a1d89.js → uploader-1e7f5bbb.js} +35 -32
- package/_internal/components/{uploader-896a1d89.js.map → uploader-1e7f5bbb.js.map} +1 -1
- package/_internal/components/{user-block-8fd15895.js → user-block-68a51ed0.js} +43 -41
- package/_internal/components/{user-block-8fd15895.js.map → user-block-68a51ed0.js.map} +1 -1
- package/_internal/{context-21aeb1c7.js → context-9d1336a1.js} +6 -6
- package/_internal/{context-21aeb1c7.js.map → context-9d1336a1.js.map} +1 -1
- package/_internal/{forwardRef-49d2bb84.js → forwardRef-15f62847.js} +2 -12
- package/_internal/{forwardRef-49d2bb84.js.map → forwardRef-15f62847.js.map} +1 -1
- package/_internal/{index-f415b08e.js → index-9df37c0d.js} +45 -39
- package/_internal/{index-f415b08e.js.map → index-9df37c0d.js.map} +1 -1
- package/_internal/{index-b4d256e7.js → index-a9c5cd69.js} +10 -11
- package/_internal/{index-b4d256e7.js.map → index-a9c5cd69.js.map} +1 -1
- package/_internal/{useDisableStateProps-fffc365f.js → useDisableStateProps-69e16b7c.js} +2 -2
- package/_internal/{useDisableStateProps-fffc365f.js.map → useDisableStateProps-69e16b7c.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js → wrapChildrenIconWithSpaces-c1faaae4.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-f86106ce.js.map → wrapChildrenIconWithSpaces-c1faaae4.js.map} +1 -1
- package/index.js +61 -61
- package/package.json +3 -3
- package/utils/index.js +3 -3
- package/_internal/ImageCaption-4279b2b6.js +0 -65
- package/_internal/components/comment-block-b84c4694.js +0 -121
- package/_internal/components/date-picker-a425534c.js +0 -2
- package/_internal/components/date-picker-a425534c.js.map +0 -1
- package/_internal/components/link-preview-7a4a6e4b.js +0 -108
- package/_internal/components/navigation-4fd3917d.js +0 -210
- package/_internal/components/popover-3c4c54bd.js +0 -3
- package/_internal/components/popover-3c4c54bd.js.map +0 -1
- package/_internal/components/post-block-0cfc2206.js +0 -99
- package/_internal/components/select-d46cfe35.js +0 -404
- package/_internal/components/text-289c0526.js +0 -2
- package/_internal/components/text-289c0526.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autocomplete-bfbdeb3c.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\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 * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\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 /** 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 * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\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 * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\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 = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\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 {...disabledStateProps}\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 focusAnchorOnClose={focusAnchorOnClose}\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 { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","React","createElement","_extends","classNames","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","key","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"autocomplete-8d3f37ea.js","sources":["../../../src/components/autocomplete/Autocomplete.tsx","../../../src/components/autocomplete/AutocompleteMultiple.tsx"],"sourcesContent":["import { ReactNode, SyntheticEvent, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Dropdown, DropdownProps, IconButtonProps, Offset, Placement, TextField, TextFieldProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useFocus } from '@lumx/react/hooks/useFocus';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteProps extends GenericProps, HasTheme {\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 * Manage dropdown width:\n * - `maxWidth`: dropdown not bigger than anchor\n * - `minWidth` or `true`: dropdown not smaller than anchor\n * - `width`: dropdown equal to the anchor.\n * @see {@link DropdownProps#fitToAnchorWidth}\n */\n fitToAnchorWidth?: DropdownProps['fitToAnchorWidth'];\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 /** 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 * Whether the focus should go back on the anchor when dropdown closes and focus is within.\n * @see {@link DropdownProps#focusAnchorOnClose}\n */\n focusAnchorOnClose?: DropdownProps['focusAnchorOnClose'];\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 * Props forwarded to the underlying TextField component.\n * Only the props not managed by the Autocomplete can be set.\n * @see {@link TextFieldProps}\n */\n textFieldProps?: Partial<TextFieldProps>;\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 = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput = DEFAULT_PROPS.anchorToInput,\n children,\n chips,\n className,\n closeOnClick = DEFAULT_PROPS.closeOnClick,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n error,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClose,\n onFocus,\n onInfiniteScroll,\n placeholder,\n placement,\n shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,\n theme = defaultTheme,\n value,\n textFieldProps = {},\n focusAnchorOnClose,\n ...forwardedProps\n } = otherProps;\n const inputAnchorRef = useRef<HTMLElement>(null);\n const textFieldRef = useRef(null);\n useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n <TextField\n {...textFieldProps}\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 {...disabledStateProps}\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 focusAnchorOnClose={focusAnchorOnClose}\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 { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiClose } from '@lumx/icons';\n\nimport { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\n\n/**\n * Defines the props of the component.\n */\nexport interface AutocompleteMultipleProps extends AutocompleteProps {\n /** Selected values. */\n values: any[];\n /** Alignment of the chips in the autocomplete. */\n chipsAlignment?: HorizontalAlignment;\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender(\n choice: any,\n index: number,\n onClear?: (event: React.MouseEvent, choice: any) => void,\n isDisabled?: boolean,\n ): ReactNode | string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'AutocompleteMultiple';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {\n closeOnClickAway: true,\n closeOnEscape: true,\n selectedChipRender(choice, index, onClear, isDisabled) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n >\n {choice}\n </Chip>\n );\n },\n values: [],\n};\n\n/**\n * AutocompleteMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { disabledStateProps, otherProps } = useDisableStateProps(props);\n const {\n anchorToInput,\n children,\n // `chipsAlignment` needs to be here to remove it from `forwardedProps`.\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n chipsAlignment,\n className,\n closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,\n closeOnEscape = DEFAULT_PROPS.closeOnEscape,\n fitToAnchorWidth,\n hasError,\n helper,\n icon,\n inputRef,\n clearButtonProps,\n isRequired,\n isOpen,\n isValid,\n label,\n name,\n offset,\n onBlur,\n onChange,\n onClear,\n onClose,\n onFocus,\n onInfiniteScroll,\n onKeyDown,\n placeholder,\n placement,\n selectedChipRender = DEFAULT_PROPS.selectedChipRender,\n shouldFocusOnClose,\n theme = defaultTheme,\n type,\n value,\n values = DEFAULT_PROPS.values,\n ...forwardedProps\n } = otherProps;\n\n return (\n <Autocomplete\n ref={ref}\n {...forwardedProps}\n anchorToInput={anchorToInput}\n className={classNames(className, CLASSNAME)}\n name={name}\n value={value}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onBlur={onBlur}\n shouldFocusOnClose={shouldFocusOnClose}\n onFocus={onFocus}\n hasError={hasError}\n helper={helper}\n icon={icon}\n inputRef={inputRef}\n chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}\n {...disabledStateProps}\n isRequired={isRequired}\n clearButtonProps={clearButtonProps}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n theme={theme}\n type={type}\n isOpen={isOpen}\n closeOnClick={false}\n closeOnClickAway={closeOnClickAway}\n closeOnEscape={closeOnEscape}\n onClose={onClose}\n offset={offset}\n placement={placement}\n fitToAnchorWidth={fitToAnchorWidth}\n onInfiniteScroll={onInfiniteScroll}\n >\n {children}\n </Autocomplete>\n );\n});\nAutocompleteMultiple.displayName = COMPONENT_NAME;\nAutocompleteMultiple.className = CLASSNAME;\nAutocompleteMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","anchorToInput","closeOnClick","closeOnClickAway","closeOnEscape","shouldFocusOnClose","Autocomplete","forwardRef","props","ref","defaultTheme","useTheme","disabledStateProps","otherProps","useDisableStateProps","children","chips","className","error","fitToAnchorWidth","hasError","helper","icon","inputRef","clearButtonProps","isRequired","isOpen","isValid","label","name","offset","onBlur","onChange","onClose","onFocus","onInfiniteScroll","placeholder","placement","theme","value","textFieldProps","focusAnchorOnClose","forwardedProps","inputAnchorRef","useRef","textFieldRef","useFocus","current","_jsxs","classNames","_jsx","TextField","mergeRefs","Dropdown","anchorRef","shouldFocusOnOpen","displayName","defaultProps","selectedChipRender","choice","index","onClear","isDisabled","onClick","event","Chip","after","Icon","mdiClose","size","Size","xxs","s","onAfterClick","values","AutocompleteMultiple","chipsAlignment","onKeyDown","type","map","chip"],"mappings":";;;;;;;;;;;;;;;AAiLA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,eAAyC,GAAG;AAC9CC,EAAAA,aAAa,EAAE,KAAK;AACpBC,EAAAA,YAAY,EAAE,KAAK;AACnBC,EAAAA,gBAAgB,EAAE,IAAI;AACtBC,EAAAA,aAAa,EAAE,IAAI;AACnBC,EAAAA,kBAAkB,EAAE,KAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,YAAY,GAAGC,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;AACtF,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACN,KAAK,CAAC,CAAA;EACtE,MAAM;IACFP,aAAa,GAAGD,eAAa,CAACC,aAAa;IAC3Cc,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTf,YAAY,GAAGF,eAAa,CAACE,YAAY;IACzCC,gBAAgB,GAAGH,eAAa,CAACG,gBAAgB;IACjDC,aAAa,GAAGJ,eAAa,CAACI,aAAa;IAC3Cc,KAAK;IACLC,gBAAgB;IAChBC,QAAQ;IACRC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,OAAO;IACPC,gBAAgB;IAChBC,WAAW;IACXC,SAAS;IACThC,kBAAkB,GAAGL,eAAa,CAACK,kBAAkB;AACrDiC,IAAAA,KAAK,GAAG5B,YAAY;IACpB6B,KAAK;IACLC,cAAc,GAAG,EAAE;IACnBC,kBAAkB;IAClB,GAAGC,cAAAA;AACP,GAAC,GAAG7B,UAAU,CAAA;AACd,EAAA,MAAM8B,cAAc,GAAGC,MAAM,CAAc,IAAI,CAAC,CAAA;AAChD,EAAA,MAAMC,YAAY,GAAGD,MAAM,CAAC,IAAI,CAAC,CAAA;EACjCE,QAAQ,CAACH,cAAc,CAACI,OAAO,EAAE,CAACrB,MAAM,IAAIrB,kBAAkB,CAAC,CAAA;AAE/D,EAAA,oBACI2C,IAAA,CAAA,KAAA,EAAA;AAAKvC,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKiC,cAAc;AAAEzB,IAAAA,SAAS,EAAEgC,UAAU,CAAChC,SAAS,EAAEnB,WAAS,CAAE;IAAAiB,QAAA,EAAA,cAC3EmC,GAAA,CAACC,SAAS,EAAA;AAAA,MAAA,GACFX,cAAc;AAClBxB,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,QAAQ,EAAEA,QAAS;AACnBC,MAAAA,MAAM,EAAEA,MAAO;AACfC,MAAAA,IAAI,EAAEA,IAAK;AACXC,MAAAA,QAAQ,EAAE6B,SAAS,CAACT,cAAc,EAAuCpB,QAAQ,CAAE;AACnFC,MAAAA,gBAAgB,EAAEA,gBAAiB;AAAA,MAAA,GAC/BZ,kBAAkB;AACtBa,MAAAA,UAAU,EAAEA,UAAW;AACvBE,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,IAAI,EAAEA,IAAK;AACXE,MAAAA,MAAM,EAAEA,MAAO;AACfC,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,WAAW,EAAEA,WAAY;AACzBS,MAAAA,YAAY,EAAEA,YAAa;AAC3BP,MAAAA,KAAK,EAAEA,KAAM;AACbC,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAChB,CAAC,eACFW,GAAA,CAACG,QAAQ,EAAA;AACLC,MAAAA,SAAS,EAAErD,aAAa,GAAG0C,cAAc,GAAGE,YAAa;AACzD3C,MAAAA,YAAY,EAAEA,YAAa;AAC3BC,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,MAAAA,aAAa,EAAEA,aAAc;AAC7BqC,MAAAA,kBAAkB,EAAEA,kBAAmB;AACvCtB,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCO,MAAAA,MAAM,EAAEA,MAAO;AACfI,MAAAA,MAAM,EAAEA,MAAO;AACfG,MAAAA,OAAO,EAAEA,OAAQ;AACjBE,MAAAA,gBAAgB,EAAEA,gBAAiB;AACnCE,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,iBAAiB,EAAE,KAAM;AACzBjB,MAAAA,KAAK,EAAEA,KAAM;AAAAvB,MAAAA,QAAA,EAEZA,QAAAA;AAAQ,KACH,CAAC,CAAA;AAAA,GACV,CAAC,CAAA;AAEd,CAAC,EAAC;AACFT,YAAY,CAACkD,WAAW,GAAG3D,gBAAc,CAAA;AACzCS,YAAY,CAACW,SAAS,GAAGnB,WAAS,CAAA;AAClCQ,YAAY,CAACmD,YAAY,GAAGzD,eAAa;;ACvQzC;AACA;AACA;AACA,MAAMH,cAAc,GAAG,sBAAsB,CAAA;;AAE7C;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAiD,GAAG;AACtDG,EAAAA,gBAAgB,EAAE,IAAI;AACtBC,EAAAA,aAAa,EAAE,IAAI;EACnBsD,kBAAkBA,CAACC,MAAM,EAAEC,KAAK,EAAEC,OAAO,EAAEC,UAAU,EAAE;IACnD,MAAMC,OAAO,GAAIC,KAAuB,IAAKH,OAAO,IAAIA,OAAO,CAACG,KAAK,EAAEL,MAAM,CAAC,CAAA;IAC9E,oBACIT,GAAA,CAACe,IAAI,EAAA;AAEDC,MAAAA,KAAK,EAAEL,OAAO,iBAAIX,GAAA,CAACiB,IAAI,EAAA;AAAC7C,QAAAA,IAAI,EAAE8C,QAAS;QAACC,IAAI,EAAEC,IAAI,CAACC,GAAAA;AAAI,OAAE,CAAE;AAC3DT,MAAAA,UAAU,EAAEA,UAAW;MACvBO,IAAI,EAAEC,IAAI,CAACE,CAAE;AACbC,MAAAA,YAAY,EAAEV,OAAQ;AACtBA,MAAAA,OAAO,EAAEA,OAAQ;AAAAhD,MAAAA,QAAA,EAEhB4C,MAAAA;AAAM,KAAA,EAPFC,KAQH,CAAC,CAAA;GAEd;AACDc,EAAAA,MAAM,EAAE,EAAA;AACZ,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,oBAAoB,GAAGpE,UAAU,CAA4C,CAACC,KAAK,EAAEC,GAAG,KAAK;AACtG,EAAA,MAAMC,YAAY,GAAGC,QAAQ,EAAE,CAAA;EAC/B,MAAM;IAAEC,kBAAkB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,oBAAoB,CAACN,KAAK,CAAC,CAAA;EACtE,MAAM;IACFP,aAAa;IACbc,QAAQ;AACR;AACA;IACA6D,cAAc;IACd3D,SAAS;IACTd,gBAAgB,GAAGH,aAAa,CAACG,gBAAgB;IACjDC,aAAa,GAAGJ,aAAa,CAACI,aAAa;IAC3Ce,gBAAgB;IAChBC,QAAQ;IACRC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,gBAAgB;IAChBC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACR6B,OAAO;IACP5B,OAAO;IACPC,OAAO;IACPC,gBAAgB;IAChB0C,SAAS;IACTzC,WAAW;IACXC,SAAS;IACTqB,kBAAkB,GAAG1D,aAAa,CAAC0D,kBAAkB;IACrDrD,kBAAkB;AAClBiC,IAAAA,KAAK,GAAG5B,YAAY;IACpBoE,IAAI;IACJvC,KAAK;IACLmC,MAAM,GAAG1E,aAAa,CAAC0E,MAAM;IAC7B,GAAGhC,cAAAA;AACP,GAAC,GAAG7B,UAAU,CAAA;EAEd,oBACIqC,GAAA,CAAC5C,YAAY,EAAA;AACTG,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLiC,cAAc;AAClBzC,IAAAA,aAAa,EAAEA,aAAc;AAC7BgB,IAAAA,SAAS,EAAEgC,UAAU,CAAChC,SAAS,EAAEnB,SAAS,CAAE;AAC5C+B,IAAAA,IAAI,EAAEA,IAAK;AACXU,IAAAA,KAAK,EAAEA,KAAM;AACbP,IAAAA,QAAQ,EAAEA,QAAS;AACnB6C,IAAAA,SAAS,EAAEA,SAAU;AACrB9C,IAAAA,MAAM,EAAEA,MAAO;AACf1B,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvC6B,IAAAA,OAAO,EAAEA,OAAQ;AACjBd,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,QAAQ,EAAEA,QAAS;IACnBP,KAAK,EAAE0D,MAAM,IAAIA,MAAM,CAACK,GAAG,CAAC,CAACC,IAAS,EAAEpB,KAAa,KAAKF,kBAAkB,GAAGsB,IAAI,EAAEpB,KAAK,EAAEC,OAAO,CAAC,CAAE;AAAA,IAAA,GAClGjD,kBAAkB;AACtBa,IAAAA,UAAU,EAAEA,UAAW;AACvBD,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,KAAK,EAAEA,KAAM;AACbQ,IAAAA,WAAW,EAAEA,WAAY;AACzBE,IAAAA,KAAK,EAAEA,KAAM;AACbwC,IAAAA,IAAI,EAAEA,IAAK;AACXpD,IAAAA,MAAM,EAAEA,MAAO;AACfxB,IAAAA,YAAY,EAAE,KAAM;AACpBC,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCC,IAAAA,aAAa,EAAEA,aAAc;AAC7B6B,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,MAAM,EAAEA,MAAO;AACfO,IAAAA,SAAS,EAAEA,SAAU;AACrBlB,IAAAA,gBAAgB,EAAEA,gBAAiB;AACnCgB,IAAAA,gBAAgB,EAAEA,gBAAiB;AAAApB,IAAAA,QAAA,EAElCA,QAAAA;AAAQ,GACC,CAAC,CAAA;AAEvB,CAAC,EAAC;AACF4D,oBAAoB,CAACnB,WAAW,GAAG3D,cAAc,CAAA;AACjD8E,oBAAoB,CAAC1D,SAAS,GAAGnB,SAAS,CAAA;AAC1C6E,oBAAoB,CAAClB,YAAY,GAAGzD,aAAa;;;;"}
|
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
import { f as forwardRef,
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
2
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
-
import {
|
|
4
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { T as Thumbnail } from '../Thumbnail-b5dea0af.js';
|
|
5
6
|
import { Size, Theme, AspectRatio } from '@lumx/core/js/constants';
|
|
6
7
|
|
|
7
|
-
/**
|
|
8
|
-
* Avatar sizes.
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Defines the props of the component.
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
8
|
/**
|
|
16
9
|
* Component display name.
|
|
17
10
|
*/
|
|
@@ -53,35 +46,38 @@ const Avatar = forwardRef((props, ref) => {
|
|
|
53
46
|
thumbnailProps,
|
|
54
47
|
...forwardedProps
|
|
55
48
|
} = props;
|
|
56
|
-
return /*#__PURE__*/
|
|
57
|
-
ref: ref
|
|
58
|
-
|
|
49
|
+
return /*#__PURE__*/jsxs("div", {
|
|
50
|
+
ref: ref,
|
|
51
|
+
...forwardedProps,
|
|
59
52
|
className: classNames(className, handleBasicClasses({
|
|
60
53
|
prefix: CLASSNAME,
|
|
61
54
|
size,
|
|
62
55
|
theme
|
|
63
|
-
}))
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
56
|
+
})),
|
|
57
|
+
children: [/*#__PURE__*/jsx(Thumbnail, {
|
|
58
|
+
linkProps: linkProps,
|
|
59
|
+
linkAs: linkAs,
|
|
60
|
+
className: `${CLASSNAME}__thumbnail`,
|
|
61
|
+
onClick: onClick,
|
|
62
|
+
onKeyPress: onKeyPress,
|
|
63
|
+
...thumbnailProps,
|
|
64
|
+
aspectRatio: AspectRatio.square,
|
|
65
|
+
size: size,
|
|
66
|
+
image: image,
|
|
67
|
+
alt: alt,
|
|
68
|
+
theme: theme
|
|
69
|
+
}), actions && /*#__PURE__*/jsx("div", {
|
|
70
|
+
className: `${CLASSNAME}__actions`,
|
|
71
|
+
children: actions
|
|
72
|
+
}), badge && /*#__PURE__*/jsx("div", {
|
|
73
|
+
className: `${CLASSNAME}__badge`,
|
|
74
|
+
children: badge
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
81
77
|
});
|
|
82
78
|
Avatar.displayName = COMPONENT_NAME;
|
|
83
79
|
Avatar.className = CLASSNAME;
|
|
84
80
|
Avatar.defaultProps = DEFAULT_PROPS;
|
|
85
81
|
|
|
86
82
|
export { Avatar };
|
|
87
|
-
//# sourceMappingURL=avatar-
|
|
83
|
+
//# sourceMappingURL=avatar-5fc70e00.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar-
|
|
1
|
+
{"version":3,"file":"avatar-5fc70e00.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n /** Action toolbar content. */\n actions?: ReactNode;\n /** Image alternative text. */\n alt: string;\n /** Badge. */\n badge?: ReactElement;\n /** Image URL. */\n image: string;\n /** Props to pass to the link wrapping the thumbnail. */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** On click callback. */\n onClick?: MouseEventHandler<HTMLDivElement>;\n /** On key press callback. */\n onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n /** Size variant. */\n size?: AvatarSize;\n /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n thumbnailProps?: Omit<\n ThumbnailProps,\n 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n actions,\n alt,\n badge,\n className,\n image,\n linkProps,\n linkAs,\n onClick,\n onKeyPress,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n thumbnailProps,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n >\n <Thumbnail\n linkProps={linkProps}\n linkAs={linkAs}\n className={`${CLASSNAME}__thumbnail`}\n onClick={onClick}\n onKeyPress={onKeyPress}\n {...thumbnailProps}\n aspectRatio={AspectRatio.square}\n size={size}\n image={image}\n alt={alt}\n theme={theme}\n />\n {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;;AA6CA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,IAAA,CAAA,KAAA,EAAA;AACIjB,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLgB,cAAc;AAClBR,IAAAA,SAAS,EAAEU,UAAU,CAACV,SAAS,EAAEW,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE7B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAO,QAAA,EAAA,cAEzFC,GAAA,CAACC,SAAS,EAAA;AACNb,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,MAAM,EAAEA,MAAO;MACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,UAAU,EAAEA,UAAW;AAAA,MAAA,GACnBE,cAAc;MAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAChB,CAAC,EACDT,OAAO,iBAAIiB,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEhB,OAAAA;AAAO,KAAM,CAAC,EACnEE,KAAK,iBAAIe,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEd,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { f as forwardRef,
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
2
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
4
|
import { ColorPalette } from '@lumx/core/js/constants';
|
|
4
5
|
|
|
5
|
-
/**
|
|
6
|
-
* Defines the props of the component.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
6
|
/**
|
|
10
7
|
* Component display name.
|
|
11
8
|
*/
|
|
@@ -37,14 +34,15 @@ const Badge = forwardRef((props, ref) => {
|
|
|
37
34
|
color = DEFAULT_PROPS.color,
|
|
38
35
|
...forwardedProps
|
|
39
36
|
} = props;
|
|
40
|
-
return /*#__PURE__*/
|
|
41
|
-
ref: ref
|
|
42
|
-
|
|
37
|
+
return /*#__PURE__*/jsx("div", {
|
|
38
|
+
ref: ref,
|
|
39
|
+
...forwardedProps,
|
|
43
40
|
className: classNames(className, handleBasicClasses({
|
|
44
41
|
prefix: CLASSNAME$1,
|
|
45
42
|
color
|
|
46
|
-
}))
|
|
47
|
-
|
|
43
|
+
})),
|
|
44
|
+
children: children
|
|
45
|
+
});
|
|
48
46
|
});
|
|
49
47
|
Badge.displayName = COMPONENT_NAME$1;
|
|
50
48
|
Badge.className = CLASSNAME$1;
|
|
@@ -66,16 +64,18 @@ const BadgeWrapper = forwardRef((props, ref) => {
|
|
|
66
64
|
className,
|
|
67
65
|
...forwardedProps
|
|
68
66
|
} = props;
|
|
69
|
-
return /*#__PURE__*/
|
|
70
|
-
ref: ref
|
|
71
|
-
|
|
72
|
-
className: classNames(className, CLASSNAME)
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
67
|
+
return /*#__PURE__*/jsxs("div", {
|
|
68
|
+
ref: ref,
|
|
69
|
+
...forwardedProps,
|
|
70
|
+
className: classNames(className, CLASSNAME),
|
|
71
|
+
children: [children, badge && /*#__PURE__*/jsx("div", {
|
|
72
|
+
className: `${CLASSNAME}__badge`,
|
|
73
|
+
children: badge
|
|
74
|
+
})]
|
|
75
|
+
});
|
|
76
76
|
});
|
|
77
77
|
BadgeWrapper.displayName = 'BadgeWrapper';
|
|
78
78
|
BadgeWrapper.className = CLASSNAME;
|
|
79
79
|
|
|
80
80
|
export { Badge, BadgeWrapper };
|
|
81
|
-
//# sourceMappingURL=badge-
|
|
81
|
+
//# sourceMappingURL=badge-8390e590.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge-
|
|
1
|
+
{"version":3,"file":"badge-8390e590.js","sources":["../../../src/components/badge/Badge.tsx","../../../src/components/badge/BadgeWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { ColorPalette } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface BadgeProps extends GenericProps {\n /** Badge content. */\n children?: ReactNode;\n /** Color variant. */\n color?: ColorPalette;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Badge';\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<BadgeProps> = {\n color: ColorPalette.primary,\n};\n\n/**\n * Badge component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {\n const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}\n >\n {children}\n </div>\n );\n});\nBadge.displayName = COMPONENT_NAME;\nBadge.className = CLASSNAME;\nBadge.defaultProps = DEFAULT_PROPS;\n","import { ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport interface BadgeWrapperProps extends GenericProps {\n /** Badge. */\n badge: ReactElement;\n /** Node to display the badge on */\n children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'BadgeWrapper';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {\n const { badge, children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n </div>\n );\n});\nBadgeWrapper.displayName = 'BadgeWrapper';\nBadgeWrapper.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","color","ColorPalette","primary","Badge","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps","BadgeWrapper","badge","_jsxs"],"mappings":";;;;;AAmBA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,OAAO,CAAA;;AAE9B;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAkC,GAAG;EACvCC,KAAK,EAAEC,YAAY,CAACC,OAAAA;AACxB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,KAAK,GAAGC,UAAU,CAA6B,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxE,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAER,KAAK,GAAGD,aAAa,CAACC,KAAK;IAAE,GAAGS,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AACrF,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AACIJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLG,cAAc;AAClBD,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEhB,WAAS;AAAEG,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AAAAO,IAAAA,QAAA,EAElFA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,KAAK,CAACW,WAAW,GAAGlB,gBAAc,CAAA;AAClCO,KAAK,CAACK,SAAS,GAAGX,WAAS,CAAA;AAC3BM,KAAK,CAACY,YAAY,GAAGhB,aAAa;;AC1ClC;AACA;AACA;AACA,MAAMH,cAAc,GAAG,cAAc,CAAA;;AAErC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;AAE3C,MAAMoB,YAAY,GAAGZ,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEW,KAAK;IAAEV,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAE/D,EAAA,oBACIa,IAAA,CAAA,KAAA,EAAA;AAAKZ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAEX,SAAS,CAAE;AAAAU,IAAAA,QAAA,EAC1EA,CAAAA,QAAQ,EACRU,KAAK,iBAAIP,GAAA,CAAA,KAAA,EAAA;MAAKF,SAAS,EAAE,CAAGX,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAAU,MAAAA,QAAA,EAAEU,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFD,YAAY,CAACF,WAAW,GAAG,cAAc,CAAA;AACzCE,YAAY,CAACR,SAAS,GAAGX,SAAS;;;;"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
export { a as Button, B as ButtonEmphasis } from '../Button-
|
|
2
|
-
export { I as IconButton } from '../IconButton-
|
|
3
|
-
import { f as forwardRef,
|
|
1
|
+
export { a as Button, B as ButtonEmphasis } from '../Button-1f227024.js';
|
|
2
|
+
export { I as IconButton } from '../IconButton-f4df224c.js';
|
|
3
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
4
4
|
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Defines the props of the component
|
|
8
|
-
*/
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
9
6
|
|
|
10
7
|
/**
|
|
11
8
|
* Component display name.
|
|
@@ -35,15 +32,16 @@ const ButtonGroup = forwardRef((props, ref) => {
|
|
|
35
32
|
className,
|
|
36
33
|
...forwardedProps
|
|
37
34
|
} = props;
|
|
38
|
-
return /*#__PURE__*/
|
|
39
|
-
ref: ref
|
|
40
|
-
|
|
41
|
-
className: classNames(className, CLASSNAME)
|
|
42
|
-
|
|
35
|
+
return /*#__PURE__*/jsx("div", {
|
|
36
|
+
ref: ref,
|
|
37
|
+
...forwardedProps,
|
|
38
|
+
className: classNames(className, CLASSNAME),
|
|
39
|
+
children: children
|
|
40
|
+
});
|
|
43
41
|
});
|
|
44
42
|
ButtonGroup.displayName = COMPONENT_NAME;
|
|
45
43
|
ButtonGroup.className = CLASSNAME;
|
|
46
44
|
ButtonGroup.defaultProps = DEFAULT_PROPS;
|
|
47
45
|
|
|
48
46
|
export { ButtonGroup };
|
|
49
|
-
//# sourceMappingURL=button-
|
|
47
|
+
//# sourceMappingURL=button-e3c7f2eb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-
|
|
1
|
+
{"version":3,"file":"button-e3c7f2eb.js","sources":["../../../src/components/button/ButtonGroup.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component\n */\nexport interface ButtonGroupProps extends GenericProps {\n /**\n * Children\n */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ButtonGroup';\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<ButtonGroupProps> = {};\n\n/**\n * ButtonGroup component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const ButtonGroup = forwardRef<ButtonGroupProps, HTMLDivElement>((props, ref) => {\n const { children, className, ...forwardedProps } = props;\n\n return (\n <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>\n {children}\n </div>\n );\n});\nButtonGroup.displayName = COMPONENT_NAME;\nButtonGroup.className = CLASSNAME;\nButtonGroup.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","ButtonGroup","forwardRef","props","ref","children","className","forwardedProps","_jsx","classNames","displayName","defaultProps"],"mappings":";;;;;;AAgBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAwC,GAAG,EAAE,CAAA;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACpF,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGJ,KAAK,CAAA;AAExD,EAAA,oBACIK,GAAA,CAAA,KAAA,EAAA;AAAKJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GAAKG,cAAc;AAAED,IAAAA,SAAS,EAAEG,UAAU,CAACH,SAAS,EAAER,SAAS,CAAE;AAAAO,IAAAA,QAAA,EAC1EA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,WAAW,CAACS,WAAW,GAAGb,cAAc,CAAA;AACxCI,WAAW,CAACK,SAAS,GAAGR,SAAS,CAAA;AACjCG,WAAW,CAACU,YAAY,GAAGX,aAAa;;;;"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
1
|
import React__default from 'react';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import { mdiMinus, mdiCheck } from '@lumx/icons';
|
|
4
4
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
5
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
6
6
|
import { u as useMergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
7
7
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
8
|
-
import { u as useDisableStateProps } from '../useDisableStateProps-
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
8
|
+
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
9
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
|
+
import { InputLabel } from './input-label-2feb0bb0.js';
|
|
11
|
+
import { InputHelper } from './input-helper-64153099.js';
|
|
11
12
|
import { Theme } from '@lumx/core/js/constants';
|
|
12
|
-
import { Icon } from './icon-
|
|
13
|
+
import { Icon } from './icon-b708cca4.js';
|
|
13
14
|
|
|
14
15
|
/**
|
|
15
16
|
* Intermediate state of checkbox.
|
|
@@ -77,9 +78,9 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
77
78
|
const input = localInputRef.current;
|
|
78
79
|
if (input) input.indeterminate = intermediateState;
|
|
79
80
|
}, [intermediateState]);
|
|
80
|
-
return /*#__PURE__*/
|
|
81
|
-
ref: ref
|
|
82
|
-
|
|
81
|
+
return /*#__PURE__*/jsxs("div", {
|
|
82
|
+
ref: ref,
|
|
83
|
+
...forwardedProps,
|
|
83
84
|
className: classNames(className, handleBasicClasses({
|
|
84
85
|
// Whether state is intermediate class name will "-checked"
|
|
85
86
|
isChecked: intermediateState ? true : isChecked,
|
|
@@ -87,45 +88,53 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
87
88
|
isUnchecked: !isChecked,
|
|
88
89
|
prefix: CLASSNAME,
|
|
89
90
|
theme
|
|
90
|
-
}))
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
91
|
+
})),
|
|
92
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
93
|
+
className: `${CLASSNAME}__input-wrapper`,
|
|
94
|
+
children: [/*#__PURE__*/jsx("input", {
|
|
95
|
+
ref: useMergeRefs(inputRef, localInputRef),
|
|
96
|
+
type: "checkbox",
|
|
97
|
+
id: inputId,
|
|
98
|
+
className: `${CLASSNAME}__input-native`,
|
|
99
|
+
...disabledStateProps,
|
|
100
|
+
name: name,
|
|
101
|
+
value: value,
|
|
102
|
+
checked: isChecked,
|
|
103
|
+
onChange: handleChange,
|
|
104
|
+
"aria-describedby": helper ? `${inputId}-helper` : undefined,
|
|
105
|
+
"aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
|
|
106
|
+
readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
|
|
107
|
+
...inputProps
|
|
108
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
109
|
+
className: `${CLASSNAME}__input-placeholder`,
|
|
110
|
+
children: [/*#__PURE__*/jsx("div", {
|
|
111
|
+
className: `${CLASSNAME}__input-background`
|
|
112
|
+
}), /*#__PURE__*/jsx("div", {
|
|
113
|
+
className: `${CLASSNAME}__input-indicator`,
|
|
114
|
+
children: /*#__PURE__*/jsx(Icon, {
|
|
115
|
+
icon: intermediateState ? mdiMinus : mdiCheck
|
|
116
|
+
})
|
|
117
|
+
})]
|
|
118
|
+
})]
|
|
119
|
+
}), /*#__PURE__*/jsxs("div", {
|
|
120
|
+
className: `${CLASSNAME}__content`,
|
|
121
|
+
children: [label && /*#__PURE__*/jsx(InputLabel, {
|
|
122
|
+
htmlFor: inputId,
|
|
123
|
+
className: `${CLASSNAME}__label`,
|
|
124
|
+
theme: theme,
|
|
125
|
+
children: label
|
|
126
|
+
}), helper && /*#__PURE__*/jsx(InputHelper, {
|
|
127
|
+
id: `${inputId}-helper`,
|
|
128
|
+
className: `${CLASSNAME}__helper`,
|
|
129
|
+
theme: theme,
|
|
130
|
+
children: helper
|
|
131
|
+
})]
|
|
132
|
+
})]
|
|
133
|
+
});
|
|
125
134
|
});
|
|
126
135
|
Checkbox.displayName = COMPONENT_NAME;
|
|
127
136
|
Checkbox.className = CLASSNAME;
|
|
128
137
|
Checkbox.defaultProps = DEFAULT_PROPS;
|
|
129
138
|
|
|
130
139
|
export { Checkbox };
|
|
131
|
-
//# sourceMappingURL=checkbox-
|
|
140
|
+
//# sourceMappingURL=checkbox-d1ca9748.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-dc4caec8.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiCheck, mdiMinus } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Intermediate state of checkbox.\n */\nconst INTERMEDIATE_STATE = 'intermediate';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {\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 or intermediate. */\n isChecked?: boolean | 'intermediate';\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 /** Native input value property. */\n value?: string;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\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\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n checked,\n className,\n helper,\n id,\n inputRef,\n isChecked = checked,\n label,\n name,\n onChange,\n theme = defaultTheme,\n value,\n inputProps = {},\n ...forwardedProps\n } = otherProps;\n const localInputRef = React.useRef<HTMLInputElement>(null);\n const generatedInputId = useId();\n const inputId = id || generatedInputId;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n const intermediateState = isChecked === INTERMEDIATE_STATE;\n\n React.useEffect(() => {\n const input = localInputRef.current;\n if (input) input.indeterminate = intermediateState;\n }, [intermediateState]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n // Whether state is intermediate class name will \"-checked\"\n isChecked: intermediateState ? true : isChecked,\n isDisabled: isAnyDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={useMergeRefs(inputRef, localInputRef)}\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n {...disabledStateProps}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n aria-describedby={helper ? `${inputId}-helper` : undefined}\n aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}\n readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}\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={intermediateState ? mdiMinus : 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":["INTERMEDIATE_STATE","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Checkbox","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","className","helper","id","inputRef","isChecked","label","name","onChange","theme","value","inputProps","forwardedProps","localInputRef","React","useRef","generatedInputId","useId","inputId","handleChange","event","intermediateState","useEffect","input","current","indeterminate","createElement","_extends","classNames","handleBasicClasses","isDisabled","isUnchecked","prefix","useMergeRefs","type","undefined","Boolean","readOnly","Icon","icon","mdiMinus","mdiCheck","InputLabel","htmlFor","InputHelper","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"checkbox-d1ca9748.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiCheck, mdiMinus } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\n\n/**\n * Intermediate state of checkbox.\n */\nconst INTERMEDIATE_STATE = 'intermediate';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps, HasTheme, HasAriaDisabled {\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 or intermediate. */\n isChecked?: boolean | 'intermediate';\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 /** Native input value property. */\n value?: string;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\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\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox = forwardRef<CheckboxProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n checked,\n className,\n helper,\n id,\n inputRef,\n isChecked = checked,\n label,\n name,\n onChange,\n theme = defaultTheme,\n value,\n inputProps = {},\n ...forwardedProps\n } = otherProps;\n const localInputRef = React.useRef<HTMLInputElement>(null);\n const generatedInputId = useId();\n const inputId = id || generatedInputId;\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n const intermediateState = isChecked === INTERMEDIATE_STATE;\n\n React.useEffect(() => {\n const input = localInputRef.current;\n if (input) input.indeterminate = intermediateState;\n }, [intermediateState]);\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n // Whether state is intermediate class name will \"-checked\"\n isChecked: intermediateState ? true : isChecked,\n isDisabled: isAnyDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n ref={useMergeRefs(inputRef, localInputRef)}\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n {...disabledStateProps}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n aria-describedby={helper ? `${inputId}-helper` : undefined}\n aria-checked={intermediateState ? 'mixed' : Boolean(isChecked)}\n readOnly={inputProps.readOnly || disabledStateProps['aria-disabled']}\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={intermediateState ? mdiMinus : 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":["INTERMEDIATE_STATE","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Checkbox","forwardRef","props","ref","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","checked","className","helper","id","inputRef","isChecked","label","name","onChange","theme","value","inputProps","forwardedProps","localInputRef","React","useRef","generatedInputId","useId","inputId","handleChange","event","intermediateState","useEffect","input","current","indeterminate","_jsxs","classNames","handleBasicClasses","isDisabled","isUnchecked","prefix","children","_jsx","useMergeRefs","type","undefined","Boolean","readOnly","Icon","icon","mdiMinus","mdiCheck","InputLabel","htmlFor","InputHelper","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
export { C as Chip } from '../Chip-
|
|
2
|
-
import { f as forwardRef,
|
|
1
|
+
export { C as Chip } from '../Chip-a34f6905.js';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-15f62847.js';
|
|
3
3
|
import { getRootClassName } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { useState } from 'react';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
6
|
|
|
6
7
|
const INITIAL_STATE_ACTIVE_CHIP = -1;
|
|
7
8
|
|
|
@@ -54,10 +55,6 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
|
|
|
54
55
|
};
|
|
55
56
|
};
|
|
56
57
|
|
|
57
|
-
/**
|
|
58
|
-
* Defines the props of the component.
|
|
59
|
-
*/
|
|
60
|
-
|
|
61
58
|
/**
|
|
62
59
|
* Component default props.
|
|
63
60
|
*/
|
|
@@ -87,11 +84,12 @@ const InternalChipGroup = forwardRef((props, ref) => {
|
|
|
87
84
|
className,
|
|
88
85
|
...forwardedProps
|
|
89
86
|
} = props;
|
|
90
|
-
return /*#__PURE__*/
|
|
91
|
-
ref: ref
|
|
92
|
-
|
|
93
|
-
className: classNames(className, CLASSNAME)
|
|
94
|
-
|
|
87
|
+
return /*#__PURE__*/jsx("div", {
|
|
88
|
+
ref: ref,
|
|
89
|
+
...forwardedProps,
|
|
90
|
+
className: classNames(className, CLASSNAME),
|
|
91
|
+
children: children
|
|
92
|
+
});
|
|
95
93
|
});
|
|
96
94
|
InternalChipGroup.displayName = COMPONENT_NAME;
|
|
97
95
|
InternalChipGroup.className = CLASSNAME;
|
|
@@ -101,4 +99,4 @@ const ChipGroup = Object.assign(InternalChipGroup, {
|
|
|
101
99
|
});
|
|
102
100
|
|
|
103
101
|
export { ChipGroup };
|
|
104
|
-
//# sourceMappingURL=chip-
|
|
102
|
+
//# sourceMappingURL=chip-e40c5521.js.map
|