@lumx/react 3.20.1-alpha.26 → 3.20.1-alpha.28
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-85482487.js → Button-5a87fee9.js} +10 -11
- package/_internal/Button-5a87fee9.js.map +1 -0
- package/_internal/{ButtonRoot-823f3e9c.js → ButtonRoot-bf682215.js} +2 -2
- package/_internal/ButtonRoot-bf682215.js.map +1 -0
- package/_internal/{Chip-a34f6905.js → Chip-8d0aae06.js} +8 -11
- package/_internal/Chip-8d0aae06.js.map +1 -0
- package/_internal/{ClickAwayProvider-7093ba23.js → ClickAwayProvider-1204f237.js} +2 -2
- package/_internal/ClickAwayProvider-1204f237.js.map +1 -0
- package/_internal/{IconButton-1a22c4c8.js → IconButton-351389b0.js} +5 -5
- package/_internal/{IconButton-1a22c4c8.js.map → IconButton-351389b0.js.map} +1 -1
- package/_internal/{ImageCaption-a0a6de5c.js → ImageCaption-4109b433.js} +4 -4
- package/_internal/{ImageCaption-a0a6de5c.js.map → ImageCaption-4109b433.js.map} +1 -1
- package/_internal/{List-54237e0e.js → List-b7882a99.js} +247 -223
- package/_internal/List-b7882a99.js.map +1 -0
- package/_internal/{PopoverDialog-4ebe79f2.js → PopoverDialog-2e7b9ed5.js} +12 -12
- package/_internal/PopoverDialog-2e7b9ed5.js.map +1 -0
- package/_internal/{Slides-ae91d12c.js → Slides-83646e84.js} +6 -9
- package/_internal/Slides-83646e84.js.map +1 -0
- package/_internal/{Thumbnail-0872250e.js → Thumbnail-741501a5.js} +3 -3
- package/_internal/{Thumbnail-0872250e.js.map → Thumbnail-741501a5.js.map} +1 -1
- package/_internal/components/{alert-dialog-0eeb06ce.js → alert-dialog-5df4f133.js} +6 -6
- package/_internal/components/{alert-dialog-0eeb06ce.js.map → alert-dialog-5df4f133.js.map} +1 -1
- package/_internal/components/{autocomplete-32170542.js → autocomplete-824c779e.js} +7 -7
- package/_internal/components/{autocomplete-32170542.js.map → autocomplete-824c779e.js.map} +1 -1
- package/_internal/components/{avatar-d2214a61.js → avatar-69b66f01.js} +3 -3
- package/_internal/components/{avatar-d2214a61.js.map → avatar-69b66f01.js.map} +1 -1
- package/_internal/components/{badge-8390e590.js → badge-63cd3b1c.js} +2 -2
- package/_internal/components/{badge-8390e590.js.map → badge-63cd3b1c.js.map} +1 -1
- package/_internal/components/{button-b5818c5a.js → button-eebd4e00.js} +4 -4
- package/_internal/components/{button-b5818c5a.js.map → button-eebd4e00.js.map} +1 -1
- package/_internal/components/{checkbox-346834f8.js → checkbox-54943a02.js} +5 -5
- package/_internal/components/{checkbox-346834f8.js.map → checkbox-54943a02.js.map} +1 -1
- package/_internal/components/{chip-e40c5521.js → chip-9ad6b318.js} +3 -3
- package/_internal/components/{chip-e40c5521.js.map → chip-9ad6b318.js.map} +1 -1
- package/_internal/components/{comment-block-a4997791.js → comment-block-55a4ab3c.js} +4 -4
- package/_internal/components/{comment-block-a4997791.js.map → comment-block-55a4ab3c.js.map} +1 -1
- package/_internal/components/date-picker-a824a3ae.js +2 -0
- package/_internal/components/date-picker-a824a3ae.js.map +1 -0
- package/_internal/components/{dialog-ebdb9500.js → dialog-5e6320b8.js} +8 -8
- package/_internal/components/dialog-5e6320b8.js.map +1 -0
- package/_internal/components/{divider-116af6b9.js → divider-bdf11ba3.js} +2 -2
- package/_internal/components/{divider-116af6b9.js.map → divider-bdf11ba3.js.map} +1 -1
- package/_internal/components/{drag-handle-6b073866.js → drag-handle-45912fd3.js} +3 -3
- package/_internal/components/{drag-handle-6b073866.js.map → drag-handle-45912fd3.js.map} +1 -1
- package/_internal/components/{dropdown-0baed51b.js → dropdown-0216211d.js} +6 -6
- package/_internal/components/{dropdown-0baed51b.js.map → dropdown-0216211d.js.map} +1 -1
- package/_internal/components/{expansion-panel-80edf6c9.js → expansion-panel-3ce73c6b.js} +8 -8
- package/_internal/components/expansion-panel-3ce73c6b.js.map +1 -0
- package/_internal/components/{flag-7c9d3abf.js → flag-1b177f78.js} +4 -4
- package/_internal/components/{flag-7c9d3abf.js.map → flag-1b177f78.js.map} +1 -1
- package/_internal/components/{flex-box-55144e5f.js → flex-box-93b97715.js} +3 -3
- package/_internal/components/flex-box-93b97715.js.map +1 -0
- package/_internal/components/{generic-block-ff0509ee.js → generic-block-925f7c5b.js} +16 -12
- package/_internal/components/generic-block-925f7c5b.js.map +1 -0
- package/_internal/components/{grid-6f1b5a41.js → grid-95fd1493.js} +2 -2
- package/_internal/components/{grid-6f1b5a41.js.map → grid-95fd1493.js.map} +1 -1
- package/_internal/components/{grid-column-f01df853.js → grid-column-43f28cfb.js} +3 -4
- package/_internal/components/grid-column-43f28cfb.js.map +1 -0
- package/_internal/components/{heading-d4c66a34.js → heading-45d6e78e.js} +3 -3
- package/_internal/components/{heading-d4c66a34.js.map → heading-45d6e78e.js.map} +1 -1
- package/_internal/components/icon-79195151.js +2 -0
- package/_internal/components/icon-79195151.js.map +1 -0
- package/_internal/components/{image-block-755d8b96.js → image-block-aba6d2db.js} +4 -4
- package/_internal/components/{image-block-755d8b96.js.map → image-block-aba6d2db.js.map} +1 -1
- package/_internal/components/{image-lightbox-d31dcd8a.js → image-lightbox-8b8e77c2.js} +9 -9
- package/_internal/components/{image-lightbox-d31dcd8a.js.map → image-lightbox-8b8e77c2.js.map} +1 -1
- package/_internal/components/{inline-list-e6f19a98.js → inline-list-dfb9fd34.js} +2 -2
- package/_internal/components/{inline-list-e6f19a98.js.map → inline-list-dfb9fd34.js.map} +1 -1
- package/_internal/components/{input-helper-64153099.js → input-helper-c8a0078b.js} +2 -2
- package/_internal/components/{input-helper-64153099.js.map → input-helper-c8a0078b.js.map} +1 -1
- package/_internal/components/{input-label-2feb0bb0.js → input-label-9711398b.js} +2 -2
- package/_internal/components/{input-label-2feb0bb0.js.map → input-label-9711398b.js.map} +1 -1
- package/_internal/components/{lightbox-9dbd7c15.js → lightbox-894abe64.js} +6 -6
- package/_internal/components/{lightbox-9dbd7c15.js.map → lightbox-894abe64.js.map} +1 -1
- package/_internal/components/{link-f9421eab.js → link-e70e64ed.js} +4 -4
- package/_internal/components/{link-f9421eab.js.map → link-e70e64ed.js.map} +1 -1
- package/_internal/components/{link-preview-5c7e3878.js → link-preview-e56f3570.js} +4 -4
- package/_internal/components/{link-preview-5c7e3878.js.map → link-preview-e56f3570.js.map} +1 -1
- package/_internal/components/{list-b08d8423.js → list-59b7ce56.js} +3 -3
- package/_internal/components/{list-b08d8423.js.map → list-59b7ce56.js.map} +1 -1
- package/_internal/components/{message-b3957df0.js → message-a255dfd3.js} +4 -4
- package/_internal/components/{message-b3957df0.js.map → message-a255dfd3.js.map} +1 -1
- package/_internal/components/{mosaic-742a9109.js → mosaic-192f2270.js} +4 -5
- package/_internal/components/mosaic-192f2270.js.map +1 -0
- package/_internal/components/{navigation-b1cd43c3.js → navigation-dfe8aac0.js} +7 -7
- package/_internal/components/{navigation-b1cd43c3.js.map → navigation-dfe8aac0.js.map} +1 -1
- package/_internal/components/{notification-94679f51.js → notification-10f289b5.js} +5 -8
- package/_internal/components/notification-10f289b5.js.map +1 -0
- package/_internal/components/popover-6c7f745b.js +3 -0
- package/_internal/components/popover-6c7f745b.js.map +1 -0
- package/_internal/components/{post-block-3ac52237.js → post-block-f7dcc6e9.js} +13 -13
- package/_internal/components/post-block-f7dcc6e9.js.map +1 -0
- package/_internal/components/{progress-f39c3fa2.js → progress-7a05fb0c.js} +2 -2
- package/_internal/components/{progress-f39c3fa2.js.map → progress-7a05fb0c.js.map} +1 -1
- package/_internal/components/{progress-tracker-997931ac.js → progress-tracker-48876add.js} +5 -5
- package/_internal/components/{progress-tracker-997931ac.js.map → progress-tracker-48876add.js.map} +1 -1
- package/_internal/components/{radio-button-559a4863.js → radio-button-07cf45e9.js} +4 -4
- package/_internal/components/{radio-button-559a4863.js.map → radio-button-07cf45e9.js.map} +1 -1
- package/_internal/components/{select-f3b44cb6.js → select-8b54a444.js} +13 -14
- package/_internal/components/select-8b54a444.js.map +1 -0
- package/_internal/components/{side-navigation-414825d8.js → side-navigation-7eeed3b4.js} +6 -7
- package/_internal/components/side-navigation-7eeed3b4.js.map +1 -0
- package/_internal/components/{skeleton-c66516ee.js → skeleton-a4e84085.js} +2 -2
- package/_internal/components/{skeleton-c66516ee.js.map → skeleton-a4e84085.js.map} +1 -1
- package/_internal/components/{slider-efbfbc45.js → slider-5d64b470.js} +4 -4
- package/_internal/components/{slider-efbfbc45.js.map → slider-5d64b470.js.map} +1 -1
- package/_internal/components/{slideshow-dc4b79ae.js → slideshow-bce65cf6.js} +4 -4
- package/_internal/components/{slideshow-dc4b79ae.js.map → slideshow-bce65cf6.js.map} +1 -1
- package/_internal/components/{switch-769a2a04.js → switch-7ae55d89.js} +5 -6
- package/_internal/components/switch-7ae55d89.js.map +1 -0
- package/_internal/components/{table-c43ec4a5.js → table-5bdf4aec.js} +3 -3
- package/_internal/components/{table-c43ec4a5.js.map → table-5bdf4aec.js.map} +1 -1
- package/_internal/components/{tabs-4037fe57.js → tabs-2ad54592.js} +4 -4
- package/_internal/components/{tabs-4037fe57.js.map → tabs-2ad54592.js.map} +1 -1
- package/_internal/components/text-09c81111.js +2 -0
- package/_internal/components/text-09c81111.js.map +1 -0
- package/_internal/components/{text-field-0a15a15d.js → text-field-3e1030f0.js} +7 -8
- package/_internal/components/text-field-3e1030f0.js.map +1 -0
- package/_internal/components/{thumbnail-f1784929.js → thumbnail-1c5828b9.js} +2 -2
- package/_internal/components/{thumbnail-f1784929.js.map → thumbnail-1c5828b9.js.map} +1 -1
- package/_internal/components/{toolbar-a43533a2.js → toolbar-0d14efb7.js} +2 -2
- package/_internal/components/{toolbar-a43533a2.js.map → toolbar-0d14efb7.js.map} +1 -1
- package/_internal/components/{tooltip-2885ab2e.js → tooltip-31181a24.js} +4 -4
- package/_internal/components/{tooltip-2885ab2e.js.map → tooltip-31181a24.js.map} +1 -1
- package/_internal/components/{uploader-7bc3adaa.js → uploader-845b2412.js} +3 -3
- package/_internal/components/{uploader-7bc3adaa.js.map → uploader-845b2412.js.map} +1 -1
- package/_internal/components/{user-block-5f7b09af.js → user-block-91c30797.js} +12 -13
- package/_internal/components/user-block-91c30797.js.map +1 -0
- package/_internal/{constants-b9e57936.js → constants-9b714e31.js} +145 -133
- package/_internal/{constants-b9e57936.js.map → constants-9b714e31.js.map} +1 -1
- package/_internal/forwardRef-d0e90329.js +82 -0
- package/_internal/{forwardRef-15f62847.js.map → forwardRef-d0e90329.js.map} +1 -1
- package/_internal/{index-9df37c0d.js → index-68e1b0af.js} +6 -6
- package/_internal/{index-9df37c0d.js.map → index-68e1b0af.js.map} +1 -1
- package/_internal/{index-192f8ada.js → index-745f94ee.js} +2 -2
- package/_internal/{index-192f8ada.js.map → index-745f94ee.js.map} +1 -1
- package/_internal/{index-b06353f2.js → index-ab520e78.js} +3 -3
- package/_internal/{index-b06353f2.js.map → index-ab520e78.js.map} +1 -1
- package/_internal/{isComponent-78df9309.js → isComponent-b9762ff1.js} +3 -5
- package/_internal/isComponent-b9762ff1.js.map +1 -0
- package/_internal/{useCallbackOnEscape-ea4d9eb4.js → useCallbackOnEscape-0b220f9c.js} +3 -3
- package/_internal/useCallbackOnEscape-0b220f9c.js.map +1 -0
- package/_internal/{useFocusTrap-c3c6378b.js → useFocusTrap-3114e5e8.js} +2 -2
- package/_internal/{useFocusTrap-c3c6378b.js.map → useFocusTrap-3114e5e8.js.map} +1 -1
- package/_internal/{wrapChildrenIconWithSpaces-f1e91251.js → wrapChildrenIconWithSpaces-e6038f72.js} +2 -2
- package/_internal/{wrapChildrenIconWithSpaces-f1e91251.js.map → wrapChildrenIconWithSpaces-e6038f72.js.map} +1 -1
- package/index.d.ts +4 -15
- package/index.js +61 -61
- package/package.json +7 -13
- package/utils/index.js +1 -1
- package/_internal/Button-85482487.js.map +0 -1
- package/_internal/ButtonRoot-823f3e9c.js.map +0 -1
- package/_internal/Chip-a34f6905.js.map +0 -1
- package/_internal/ClickAwayProvider-7093ba23.js.map +0 -1
- package/_internal/List-54237e0e.js.map +0 -1
- package/_internal/PopoverDialog-4ebe79f2.js.map +0 -1
- package/_internal/Slides-ae91d12c.js.map +0 -1
- package/_internal/components/date-picker-48a39549.js +0 -2
- package/_internal/components/date-picker-48a39549.js.map +0 -1
- package/_internal/components/dialog-ebdb9500.js.map +0 -1
- package/_internal/components/expansion-panel-80edf6c9.js.map +0 -1
- package/_internal/components/flex-box-55144e5f.js.map +0 -1
- package/_internal/components/generic-block-ff0509ee.js.map +0 -1
- package/_internal/components/grid-column-f01df853.js.map +0 -1
- package/_internal/components/icon-7c79ab42.js +0 -2
- package/_internal/components/icon-7c79ab42.js.map +0 -1
- package/_internal/components/mosaic-742a9109.js.map +0 -1
- package/_internal/components/notification-94679f51.js.map +0 -1
- package/_internal/components/popover-65bfbc57.js +0 -3
- package/_internal/components/popover-65bfbc57.js.map +0 -1
- package/_internal/components/post-block-3ac52237.js.map +0 -1
- package/_internal/components/select-f3b44cb6.js.map +0 -1
- package/_internal/components/side-navigation-414825d8.js.map +0 -1
- package/_internal/components/switch-769a2a04.js.map +0 -1
- package/_internal/components/text-851c62f8.js +0 -2
- package/_internal/components/text-851c62f8.js.map +0 -1
- package/_internal/components/text-field-0a15a15d.js.map +0 -1
- package/_internal/components/user-block-5f7b09af.js.map +0 -1
- package/_internal/forwardRef-15f62847.js +0 -70
- package/_internal/isComponent-78df9309.js.map +0 -1
- package/_internal/partitionMulti-4daccdd5.js +0 -25
- package/_internal/partitionMulti-4daccdd5.js.map +0 -1
- package/_internal/useCallbackOnEscape-ea4d9eb4.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-4037fe57.js","sources":["../../../src/components/tabs/TabProvider.tsx","../../../src/components/tabs/TabList.tsx","../../../src/components/tabs/Tab.tsx","../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from './state';\n\nexport interface TabProviderProps {\n /** Active tab index. */\n activeTabIndex?: number;\n /** Tab provider children. */\n children: ReactNode;\n /** Tab panel children should not render if the tab panel is hidden. */\n isLazy?: boolean;\n /** Activate tabs on focus. */\n shouldActivateOnFocus?: boolean;\n\n /** Tab change callback. */\n onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<TabProviderProps> = {\n isLazy: INIT_STATE.isLazy,\n shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which tabs can be defined and linked to their tab panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel\n * components in the react tree.\n *\n * @param props React component props.\n * @return React element.\n */\nexport const TabProvider: React.FC<TabProviderProps> = (props) => {\n const { children, onChange, ...propState } = props;\n const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n // On prop state change => dispatch update.\n useEffect(\n () => {\n dispatch({ type: 'update', payload: { ...DEFAULT_PROPS, ...propState } });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dispatch, ...Object.values(propState)],\n );\n\n // On active tab index state change => send update to the onChange.\n useEffect(\n () => {\n if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {\n return;\n }\n\n // Escape rendering/useEffect context\n queueMicrotask(() => {\n // Wait for React to commit last state changes (avoid looping state update)\n ReactDOM.flushSync(() => {\n onChange(state.activeTabIndex);\n });\n });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onChange, state.activeTabIndex],\n );\n\n return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nTabProvider.defaultProps = DEFAULT_PROPS;\n","import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\n\nexport enum TabListLayout {\n clustered = 'clustered',\n fixed = 'fixed',\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface TabListProps extends GenericProps, HasTheme {\n /** ARIA label (purpose of the set of tabs). */\n ['aria-label']: string;\n /** Tab list. */\n children: ReactNode;\n /** Layout of the tabs in the list. */\n layout?: TabListLayout;\n /** Position of the tabs in the list (requires 'clustered' layout). */\n position?: Alignment;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabListProps> = {\n layout: TabListLayout.fixed,\n position: Alignment.left,\n};\n\n/**\n * TabList component.\n *\n * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n 'aria-label': ariaLabel,\n children,\n className,\n layout = DEFAULT_PROPS.layout,\n position = DEFAULT_PROPS.position,\n theme = defaultTheme,\n ...forwardedProps\n } = props;\n const tabListRef = React.useRef(null);\n useRovingTabIndex({\n parentRef: tabListRef,\n elementSelector: '[role=\"tab\"]',\n keepTabIndex: false,\n extraDependencies: [children],\n });\n\n return (\n <div\n ref={mergeRefs(ref, tabListRef)}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}\n >\n <div className={`${CLASSNAME}__links`} role=\"tablist\" aria-label={ariaLabel}>\n {children}\n </div>\n </div>\n );\n});\nTabList.displayName = COMPONENT_NAME;\nTabList.className = CLASSNAME;\nTabList.defaultProps = DEFAULT_PROPS;\n","import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, IconProps, Size, Text } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { useTabProviderContext } from './state';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabProps extends GenericProps {\n /** Children are not supported. */\n children?: never;\n /** Icon (SVG path). */\n icon?: IconProps['icon'];\n /** Icon component properties. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Native id property. */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tab';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs__link`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabProps> = {};\n\n/**\n * Tab component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {\n const { isAnyDisabled, otherProps } = useDisableStateProps(props);\n const {\n className,\n icon,\n iconProps = {},\n id,\n isActive: propIsActive,\n label,\n onFocus,\n onKeyPress,\n tabIndex = -1,\n ...forwardedProps\n } = otherProps;\n const state = useTabProviderContext('tab', id);\n const isActive = propIsActive || state?.isActive;\n\n const changeToCurrentTab = useCallback(() => {\n if (isAnyDisabled) {\n return;\n }\n state?.changeToTab();\n }, [isAnyDisabled, state]);\n\n const handleFocus: FocusEventHandler = useCallback(\n (event) => {\n onFocus?.(event);\n if (state?.shouldActivateOnFocus) {\n changeToCurrentTab();\n }\n },\n [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n );\n\n const handleKeyPress: KeyboardEventHandler = useCallback(\n (event) => {\n onKeyPress?.(event);\n if (event.key !== 'Enter' || isAnyDisabled) {\n return;\n }\n changeToCurrentTab();\n },\n [changeToCurrentTab, isAnyDisabled, onKeyPress],\n );\n\n return (\n <button\n ref={ref}\n {...forwardedProps}\n type=\"button\"\n id={state?.tabId}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled: isAnyDisabled }),\n )}\n onClick={changeToCurrentTab}\n onKeyPress={handleKeyPress}\n onFocus={handleFocus}\n role=\"tab\"\n tabIndex={isActive ? 0 : tabIndex}\n aria-disabled={isAnyDisabled}\n aria-selected={isActive}\n aria-controls={state?.tabPanelId}\n >\n {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}\n {label && (\n <Text as=\"span\" truncate>\n {label}\n </Text>\n )}\n </button>\n );\n});\nTab.displayName = COMPONENT_NAME;\nTab.className = CLASSNAME;\nTab.defaultProps = DEFAULT_PROPS;\n","import classNames from 'classnames';\n\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTabProviderContext } from '@lumx/react/components/tabs/state';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabPanelProps extends GenericProps {\n /** Native id property */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabPanel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tab-panel`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabPanelProps> = {};\n\n/**\n * TabPanel component.\n *\n * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {\n const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;\n\n const state = useTabProviderContext('tabPanel', id);\n const isActive = propIsActive || state?.isActive;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n id={state?.tabPanelId}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}\n role=\"tabpanel\"\n tabIndex={isActive ? 0 : -1}\n aria-labelledby={state?.tabId}\n >\n {(!state?.isLazy || isActive) && children}\n </div>\n );\n});\nTabPanel.displayName = COMPONENT_NAME;\nTabPanel.className = CLASSNAME;\nTabPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","TabProvider","props","children","onChange","propState","state","dispatch","useReducer","reducer","useEffect","type","payload","Object","values","activeTabIndex","queueMicrotask","ReactDOM","flushSync","_jsx","TabProviderContext","Provider","value","defaultProps","TabListLayout","COMPONENT_NAME","CLASSNAME","CSS_PREFIX","layout","fixed","position","Alignment","left","TabList","forwardRef","ref","defaultTheme","useTheme","Theme","light","ariaLabel","className","theme","forwardedProps","tabListRef","React","useRef","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","mergeRefs","classNames","handleBasicClasses","prefix","role","displayName","Tab","isAnyDisabled","otherProps","useDisableStateProps","icon","iconProps","id","isActive","propIsActive","label","onFocus","onKeyPress","tabIndex","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","handleKeyPress","key","_jsxs","tabId","isDisabled","onClick","tabPanelId","Icon","size","Size","xs","Text","as","truncate","TabPanel"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs-2ad54592.js","sources":["../../../src/components/tabs/TabProvider.tsx","../../../src/components/tabs/TabList.tsx","../../../src/components/tabs/Tab.tsx","../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport { ReactNode, useEffect, useReducer } from 'react';\nimport { INIT_STATE, TabProviderContext, reducer } from './state';\n\nexport interface TabProviderProps {\n /** Active tab index. */\n activeTabIndex?: number;\n /** Tab provider children. */\n children: ReactNode;\n /** Tab panel children should not render if the tab panel is hidden. */\n isLazy?: boolean;\n /** Activate tabs on focus. */\n shouldActivateOnFocus?: boolean;\n\n /** Tab change callback. */\n onChange?(index: number): void;\n}\n\nconst DEFAULT_PROPS: Partial<TabProviderProps> = {\n isLazy: INIT_STATE.isLazy,\n shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus,\n};\n\n/**\n * This component provides a context in which tabs can be defined and linked to their tab panel.\n *\n * It does not produce any markup so you can wrap it around any React elements and then split the TabList and TabPanel\n * components in the react tree.\n *\n * @param props React component props.\n * @return React element.\n */\nexport const TabProvider: React.FC<TabProviderProps> = (props) => {\n const { children, onChange, ...propState } = props;\n const [state, dispatch] = useReducer(reducer, INIT_STATE);\n\n // On prop state change => dispatch update.\n useEffect(\n () => {\n dispatch({ type: 'update', payload: { ...DEFAULT_PROPS, ...propState } });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [dispatch, ...Object.values(propState)],\n );\n\n // On active tab index state change => send update to the onChange.\n useEffect(\n () => {\n if (state === INIT_STATE || !onChange || propState.activeTabIndex === state.activeTabIndex) {\n return;\n }\n\n // Escape rendering/useEffect context\n queueMicrotask(() => {\n // Wait for React to commit last state changes (avoid looping state update)\n ReactDOM.flushSync(() => {\n onChange(state.activeTabIndex);\n });\n });\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [onChange, state.activeTabIndex],\n );\n\n return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;\n};\nTabProvider.defaultProps = DEFAULT_PROPS;\n","import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, Theme } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\n\nexport enum TabListLayout {\n clustered = 'clustered',\n fixed = 'fixed',\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface TabListProps extends GenericProps, HasTheme {\n /** ARIA label (purpose of the set of tabs). */\n ['aria-label']: string;\n /** Tab list. */\n children: ReactNode;\n /** Layout of the tabs in the list. */\n layout?: TabListLayout;\n /** Position of the tabs in the list (requires 'clustered' layout). */\n position?: Alignment;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabList';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabListProps> = {\n layout: TabListLayout.fixed,\n position: Alignment.left,\n};\n\n/**\n * TabList component.\n *\n * Implements WAI-ARIA `tablist` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n 'aria-label': ariaLabel,\n children,\n className,\n layout = DEFAULT_PROPS.layout,\n position = DEFAULT_PROPS.position,\n theme = defaultTheme,\n ...forwardedProps\n } = props;\n const tabListRef = React.useRef(null);\n useRovingTabIndex({\n parentRef: tabListRef,\n elementSelector: '[role=\"tab\"]',\n keepTabIndex: false,\n extraDependencies: [children],\n });\n\n return (\n <div\n ref={mergeRefs(ref, tabListRef)}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, layout, position, theme }))}\n >\n <div className={`${CLASSNAME}__links`} role=\"tablist\" aria-label={ariaLabel}>\n {children}\n </div>\n </div>\n );\n});\nTabList.displayName = COMPONENT_NAME;\nTabList.className = CLASSNAME;\nTabList.defaultProps = DEFAULT_PROPS;\n","import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Icon, IconProps, Size, Text } from '@lumx/react';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';\nimport { useTabProviderContext } from './state';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabProps extends GenericProps {\n /** Children are not supported. */\n children?: never;\n /** Icon (SVG path). */\n icon?: IconProps['icon'];\n /** Icon component properties. */\n iconProps?: Omit<IconProps, 'icon'>;\n /** Native id property. */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label content. */\n label: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tab';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tabs__link`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabProps> = {};\n\n/**\n * Tab component.\n *\n * Implements WAI-ARIA `tab` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tab = forwardRef<TabProps, HTMLButtonElement>((props, ref) => {\n const { isAnyDisabled, otherProps } = useDisableStateProps(props);\n const {\n className,\n icon,\n iconProps = {},\n id,\n isActive: propIsActive,\n label,\n onFocus,\n onKeyPress,\n tabIndex = -1,\n ...forwardedProps\n } = otherProps;\n const state = useTabProviderContext('tab', id);\n const isActive = propIsActive || state?.isActive;\n\n const changeToCurrentTab = useCallback(() => {\n if (isAnyDisabled) {\n return;\n }\n state?.changeToTab();\n }, [isAnyDisabled, state]);\n\n const handleFocus: FocusEventHandler = useCallback(\n (event) => {\n onFocus?.(event);\n if (state?.shouldActivateOnFocus) {\n changeToCurrentTab();\n }\n },\n [changeToCurrentTab, onFocus, state?.shouldActivateOnFocus],\n );\n\n const handleKeyPress: KeyboardEventHandler = useCallback(\n (event) => {\n onKeyPress?.(event);\n if (event.key !== 'Enter' || isAnyDisabled) {\n return;\n }\n changeToCurrentTab();\n },\n [changeToCurrentTab, isAnyDisabled, onKeyPress],\n );\n\n return (\n <button\n ref={ref}\n {...forwardedProps}\n type=\"button\"\n id={state?.tabId}\n className={classNames(\n className,\n handleBasicClasses({ prefix: CLASSNAME, isActive, isDisabled: isAnyDisabled }),\n )}\n onClick={changeToCurrentTab}\n onKeyPress={handleKeyPress}\n onFocus={handleFocus}\n role=\"tab\"\n tabIndex={isActive ? 0 : tabIndex}\n aria-disabled={isAnyDisabled}\n aria-selected={isActive}\n aria-controls={state?.tabPanelId}\n >\n {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}\n {label && (\n <Text as=\"span\" truncate>\n {label}\n </Text>\n )}\n </button>\n );\n});\nTab.displayName = COMPONENT_NAME;\nTab.className = CLASSNAME;\nTab.defaultProps = DEFAULT_PROPS;\n","import classNames from 'classnames';\n\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTabProviderContext } from '@lumx/react/components/tabs/state';\nimport { CSS_PREFIX } from '@lumx/react/constants';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { handleBasicClasses } from '@lumx/core/js/utils/className';\n\n/**\n * Defines the props of the component.\n */\nexport interface TabPanelProps extends GenericProps {\n /** Native id property */\n id?: string;\n /** Whether the tab is active or not. */\n isActive?: boolean;\n /** Children */\n children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TabPanel';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = `${CSS_PREFIX}-tab-panel`;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TabPanelProps> = {};\n\n/**\n * TabPanel component.\n *\n * Implements WAI-ARIA `tabpanel` role {@see https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html#rps_label}\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TabPanel = forwardRef<TabPanelProps, HTMLDivElement>((props, ref) => {\n const { children, id, className, isActive: propIsActive, ...forwardedProps } = props;\n\n const state = useTabProviderContext('tabPanel', id);\n const isActive = propIsActive || state?.isActive;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n id={state?.tabPanelId}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, isActive }))}\n role=\"tabpanel\"\n tabIndex={isActive ? 0 : -1}\n aria-labelledby={state?.tabId}\n >\n {(!state?.isLazy || isActive) && children}\n </div>\n );\n});\nTabPanel.displayName = COMPONENT_NAME;\nTabPanel.className = CLASSNAME;\nTabPanel.defaultProps = DEFAULT_PROPS;\n"],"names":["DEFAULT_PROPS","isLazy","INIT_STATE","shouldActivateOnFocus","TabProvider","props","children","onChange","propState","state","dispatch","useReducer","reducer","useEffect","type","payload","Object","values","activeTabIndex","queueMicrotask","ReactDOM","flushSync","_jsx","TabProviderContext","Provider","value","defaultProps","TabListLayout","COMPONENT_NAME","CLASSNAME","CSS_PREFIX","layout","fixed","position","Alignment","left","TabList","forwardRef","ref","defaultTheme","useTheme","Theme","light","ariaLabel","className","theme","forwardedProps","tabListRef","React","useRef","useRovingTabIndex","parentRef","elementSelector","keepTabIndex","extraDependencies","mergeRefs","classNames","handleBasicClasses","prefix","role","displayName","Tab","isAnyDisabled","otherProps","useDisableStateProps","icon","iconProps","id","isActive","propIsActive","label","onFocus","onKeyPress","tabIndex","useTabProviderContext","changeToCurrentTab","useCallback","changeToTab","handleFocus","event","handleKeyPress","key","_jsxs","tabId","isDisabled","onClick","tabPanelId","Icon","size","Size","xs","Text","as","truncate","TabPanel"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-09c81111.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useRef, useState, useEffect } from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
3
|
-
import get from 'lodash/get';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
4
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
4
|
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
6
5
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
@@ -8,12 +7,12 @@ import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
|
8
7
|
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
9
8
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
9
|
import { Theme, Size, Emphasis, Kind } from '@lumx/core/js/constants';
|
|
11
|
-
import { InputLabel } from './input-label-
|
|
12
|
-
import { I as Icon, m as mdiAlertCircle } from '../index-
|
|
10
|
+
import { InputLabel } from './input-label-9711398b.js';
|
|
11
|
+
import { I as Icon, m as mdiAlertCircle } from '../index-745f94ee.js';
|
|
13
12
|
import { m as mdiCheckCircle } from '../check-circle-de24f857.js';
|
|
14
|
-
import { I as IconButton } from '../IconButton-
|
|
13
|
+
import { I as IconButton } from '../IconButton-351389b0.js';
|
|
15
14
|
import { m as mdiCloseCircle } from '../close-circle-ef5d1aac.js';
|
|
16
|
-
import { InputHelper } from './input-helper-
|
|
15
|
+
import { InputHelper } from './input-helper-c8a0078b.js';
|
|
17
16
|
|
|
18
17
|
/**
|
|
19
18
|
* Component display name.
|
|
@@ -111,7 +110,7 @@ const renderInputNative = props => {
|
|
|
111
110
|
setFocus(false);
|
|
112
111
|
};
|
|
113
112
|
const handleChange = event => {
|
|
114
|
-
onChange(
|
|
113
|
+
onChange(event.target.value, name, event);
|
|
115
114
|
};
|
|
116
115
|
const Component = multiline ? 'textarea' : 'input';
|
|
117
116
|
const inputProps = {
|
|
@@ -357,4 +356,4 @@ TextField.className = CLASSNAME;
|
|
|
357
356
|
TextField.defaultProps = DEFAULT_PROPS;
|
|
358
357
|
|
|
359
358
|
export { TextField };
|
|
360
|
-
//# sourceMappingURL=text-field-
|
|
359
|
+
//# sourceMappingURL=text-field-3e1030f0.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text-field-3e1030f0.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';\nimport {\n Emphasis,\n Icon,\n IconButton,\n IconButtonProps,\n InputHelper,\n InputLabel,\n InputLabelProps,\n Kind,\n Size,\n Theme,\n} from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useId } from '@lumx/react/hooks/useId';\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 * Defines the props of the component.\n */\nexport interface TextFieldProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Chip Group to be rendered before the main text input. */\n chips?: ReactNode;\n /** Props to pass to the clear button (minus those already set by the TextField props). If not specified, the button won't be displayed. */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /** Error message. */\n error?: string | ReactNode;\n /** Whether we force the focus style or not. */\n forceFocusStyle?: boolean;\n /** Whether the text field is displayed with error style or not. */\n hasError?: boolean;\n /** Additional element to put at the end of the text field. */\n afterElement?: ReactNode;\n /** Helper text. */\n helper?: string | ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Native input id property (generated if not provided to link the label element). */\n id?: string;\n /** Reference to the <input> or <textarea> element. */\n inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement>;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Whether the component is required or not. */\n isRequired?: boolean;\n /** Whether the text field is displayed with valid style or not. */\n isValid?: boolean;\n /** Label text. */\n label?: string;\n /** Additional label props. */\n labelProps?: InputLabelProps;\n /** Max string length the input accepts (constrains the input and displays a character counter). */\n maxLength?: number;\n /** Minimum number of rows displayed in multiline mode (requires `multiline` to be enabled). */\n minimumRows?: number;\n /** Whether the text field is a textarea or an input. */\n multiline?: boolean;\n /** Native input name property. */\n name?: string;\n /** Placeholder text. */\n placeholder?: string;\n /** Reference to the wrapper. */\n textFieldRef?: Ref<HTMLDivElement>;\n /** Native input type (only when `multiline` is disabled). */\n type?: React.ComponentProps<'input'>['type'];\n /** Value. */\n value?: string;\n /** On blur callback. */\n onBlur?(event: React.FocusEvent): void;\n /** On change callback. */\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n /** On clear callback. */\n onClear?(event?: SyntheticEvent): void;\n /** On focus callback. */\n onFocus?(event: React.FocusEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'TextField';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Default minimum number of rows in the multiline mode.\n */\nconst DEFAULT_MIN_ROWS = 2;\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TextFieldProps> = {\n type: 'text',\n};\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nconst useComputeNumberOfRows = (\n minimumRows: number,\n): {\n /** number of rows to be used on the text area */\n rows: number;\n /**\n * Callback in order to recalculate the number of rows due to a change on the text area\n */\n recomputeNumberOfRows(target: Element): void;\n} => {\n const [rows, setRows] = useState(minimumRows);\n\n const recompute = (target: Element) => {\n /**\n * HEAD's UP! This part is a little bit tricky. The idea here is to only\n * display the necessary rows on the textarea. In order to dynamically adjust\n * the height on that field, we need to:\n * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n * by the line height.\n * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n * when we will not see the update and the rows will be resized to the minimum.\n * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n */\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = minimumRows;\n let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n // eslint-disable-next-line no-param-reassign\n (target as HTMLTextAreaElement).rows = currentRows;\n\n setRows(currentRows);\n };\n\n return {\n recomputeNumberOfRows: recompute,\n rows,\n };\n};\n\ninterface InputNativeProps {\n id?: string;\n inputRef?: TextFieldProps['inputRef'];\n isDisabled?: boolean;\n 'aria-disabled'?: boolean;\n isRequired?: boolean;\n readOnly?: boolean;\n multiline?: boolean;\n maxLength?: number;\n placeholder?: string;\n rows: number;\n type: TextFieldProps['type'];\n name?: string;\n value?: string;\n setFocus(focus: boolean): void;\n recomputeNumberOfRows(target: Element): void;\n onChange(value: string, name?: string, event?: SyntheticEvent): void;\n onFocus?(value: React.FocusEvent): void;\n onBlur?(value: React.FocusEvent): void;\n hasError?: boolean;\n describedById?: string;\n}\n\nconst renderInputNative: React.FC<InputNativeProps> = (props) => {\n const {\n id,\n isRequired,\n placeholder,\n multiline,\n value,\n setFocus,\n onChange,\n onFocus,\n onBlur,\n inputRef,\n rows,\n recomputeNumberOfRows,\n type,\n name,\n hasError,\n describedById,\n ...forwardedProps\n } = props;\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const ref = useRef<HTMLElement>(null);\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n // Recompute the number of rows for the first rendering\n if (multiline && ref && ref.current) {\n recomputeNumberOfRows(ref.current);\n }\n }, [ref, multiline, recomputeNumberOfRows, value]);\n\n const onTextFieldFocus = (event: React.FocusEvent) => {\n onFocus?.(event);\n setFocus(true);\n };\n\n const onTextFieldBlur = (event: React.FocusEvent) => {\n onBlur?.(event);\n setFocus(false);\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange(event.target.value, name, event);\n };\n\n const Component = multiline ? 'textarea' : 'input';\n const inputProps: any = {\n ...forwardedProps,\n id,\n className: multiline\n ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea`\n : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,\n placeholder,\n value,\n name,\n required: isRequired,\n onFocus: onTextFieldFocus,\n onBlur: onTextFieldBlur,\n onChange: handleChange,\n 'aria-invalid': hasError ? 'true' : undefined,\n 'aria-describedby': describedById,\n readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],\n ref: mergeRefs(inputRef as any, ref) as any,\n };\n if (multiline) {\n inputProps.rows = rows;\n } else {\n inputProps.type = type;\n }\n return <Component {...inputProps} />;\n};\n\n/**\n * TextField component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref) => {\n const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n chips,\n className,\n clearButtonProps,\n error,\n forceFocusStyle,\n hasError,\n helper,\n icon,\n id,\n inputRef: inputRefProps,\n isRequired,\n isValid,\n label,\n labelProps,\n maxLength,\n minimumRows,\n multiline,\n name,\n onBlur,\n onChange,\n onClear,\n onFocus,\n placeholder,\n textFieldRef,\n theme = defaultTheme,\n type = DEFAULT_PROPS.type,\n value,\n afterElement,\n ...forwardedProps\n } = otherProps;\n const generatedTextFieldId = useId();\n const textFieldId = id || generatedTextFieldId;\n /** Keep a clean local input ref to manage focus */\n const localInputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n /** Merge prop input ref and local input ref */\n const inputRef = mergeRefs(localInputRef, inputRefProps);\n /**\n * Generate unique ids for both the helper and error texts, in order to\n * later on add them to the input native as aria-describedby. If both the error and the helper are present,\n * we want to first use the most important one, which is the errorId. That way, screen readers will read first\n * the error and then the helper\n */\n const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;\n const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;\n const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);\n const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');\n\n const [isFocus, setFocus] = useState(false);\n const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);\n const valueLength = (value || '').length;\n const isNotEmpty = valueLength > 0;\n\n /**\n * Function triggered when the Clear Button is clicked.\n * The idea is to execute the `onChange` callback with an empty string\n * and remove focus from the clear button.\n * @param evt On clear event.\n */\n const handleClear = (evt: React.ChangeEvent) => {\n evt.nativeEvent.preventDefault();\n evt.nativeEvent.stopPropagation();\n (evt.currentTarget as HTMLElement).blur();\n\n onChange('');\n\n if (onClear) {\n onClear(evt);\n }\n\n /** Use local inputRef in case the prop input ref is a `mergeRefs` function. */\n const inputElement = localInputRef as RefObject<HTMLInputElement | HTMLTextAreaElement>;\n\n if (inputElement && inputElement.current) {\n inputElement.current.focus();\n }\n };\n\n return (\n <div\n ref={ref}\n className={classNames(\n className,\n handleBasicClasses({\n hasChips: Boolean(chips),\n hasError: !isValid && hasError,\n hasIcon: Boolean(icon),\n hasInput: !multiline,\n hasInputClear: clearButtonProps && isNotEmpty,\n hasLabel: Boolean(label),\n hasPlaceholder: Boolean(placeholder),\n hasTextarea: multiline,\n hasValue: Boolean(value),\n isDisabled: isAnyDisabled,\n isFocus: isFocus || forceFocusStyle,\n isValid,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n {(label || maxLength) && (\n <div className={`${CLASSNAME}__header`}>\n {label && (\n <InputLabel\n {...labelProps}\n htmlFor={textFieldId}\n className={`${CLASSNAME}__label`}\n isRequired={isRequired}\n theme={theme}\n >\n {label}\n </InputLabel>\n )}\n\n {maxLength && (\n <div className={`${CLASSNAME}__char-counter`}>\n <span>{maxLength - valueLength}</span>\n {maxLength - valueLength === 0 && <Icon icon={mdiAlertCircle} size={Size.xxs} />}\n </div>\n )}\n </div>\n )}\n\n <div className={`${CLASSNAME}__wrapper`} ref={textFieldRef}>\n {icon && (\n <Icon\n className={`${CLASSNAME}__input-icon`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={icon}\n size={Size.xs}\n />\n )}\n\n {chips && (\n <div className={`${CLASSNAME}__chips`}>\n {chips}\n\n {renderInputNative({\n id: textFieldId,\n inputRef,\n ...disabledStateProps,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n hasError,\n describedById,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {!chips && (\n <div className={`${CLASSNAME}__input-wrapper`}>\n {renderInputNative({\n id: textFieldId,\n inputRef,\n ...disabledStateProps,\n isRequired,\n maxLength,\n multiline,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n recomputeNumberOfRows,\n rows,\n setFocus,\n type,\n value,\n name,\n hasError,\n describedById,\n ...forwardedProps,\n })}\n </div>\n )}\n\n {(isValid || hasError) && (\n <Icon\n className={`${CLASSNAME}__input-validity`}\n color={theme === Theme.dark ? 'light' : undefined}\n icon={isValid ? mdiCheckCircle : mdiAlertCircle}\n size={Size.xxs}\n />\n )}\n\n {clearButtonProps && isNotEmpty && !isAnyDisabled && (\n <IconButton\n {...clearButtonProps}\n className={`${CLASSNAME}__input-clear`}\n icon={mdiCloseCircle}\n emphasis={Emphasis.low}\n size={Size.s}\n theme={theme}\n onClick={handleClear}\n type=\"button\"\n />\n )}\n\n {afterElement && <div className={`${CLASSNAME}__after-element`}>{afterElement}</div>}\n </div>\n\n {hasError && error && (\n <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme} id={errorId}>\n {error}\n </InputHelper>\n )}\n\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme} id={helperId}>\n {helper}\n </InputHelper>\n )}\n </div>\n );\n});\nTextField.displayName = COMPONENT_NAME;\nTextField.className = CLASSNAME;\nTextField.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_MIN_ROWS","DEFAULT_PROPS","type","useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows","renderInputNative","props","id","isRequired","placeholder","multiline","value","setFocus","onChange","onFocus","onBlur","inputRef","name","hasError","describedById","forwardedProps","ref","useRef","useEffect","current","onTextFieldFocus","event","onTextFieldBlur","handleChange","Component","inputProps","className","required","undefined","readOnly","mergeRefs","_jsx","TextField","forwardRef","isAnyDisabled","disabledStateProps","otherProps","useDisableStateProps","defaultTheme","useTheme","Theme","light","chips","clearButtonProps","error","forceFocusStyle","helper","icon","inputRefProps","isValid","label","labelProps","maxLength","onClear","textFieldRef","theme","afterElement","generatedTextFieldId","useId","textFieldId","localInputRef","helperId","errorId","describedByIds","filter","Boolean","length","join","isFocus","valueLength","isNotEmpty","handleClear","evt","nativeEvent","preventDefault","stopPropagation","currentTarget","blur","inputElement","focus","_jsxs","classNames","handleBasicClasses","hasChips","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","isDisabled","prefix","children","InputLabel","htmlFor","Icon","mdiAlertCircle","size","Size","xxs","color","dark","xs","mdiCheckCircle","IconButton","mdiCloseCircle","emphasis","Emphasis","low","s","onClick","InputHelper","kind","Kind","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { T as Thumbnail, u as useFocusPointStyle } from '../Thumbnail-
|
|
1
|
+
export { T as Thumbnail, u as useFocusPointStyle } from '../Thumbnail-741501a5.js';
|
|
2
2
|
import { AspectRatio } from '@lumx/core/js/constants';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -39,4 +39,4 @@ const ThumbnailObjectFit = {
|
|
|
39
39
|
};
|
|
40
40
|
|
|
41
41
|
export { ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant };
|
|
42
|
-
//# sourceMappingURL=thumbnail-
|
|
42
|
+
//# sourceMappingURL=thumbnail-1c5828b9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"thumbnail-
|
|
1
|
+
{"version":3,"file":"thumbnail-1c5828b9.js","sources":["../../../src/components/thumbnail/types.ts"],"sourcesContent":["import React from 'react';\nimport { AspectRatio, Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils/type';\n\n/**\n * Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).\n */\nexport type FocusPoint = { x?: number; y?: number };\n\n/**\n * Loading attribute is not yet supported in typescript, so we need\n * to add it in order to avoid a ts error.\n * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes\n */\ndeclare module 'react' {\n interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {\n loading?: 'eager' | 'lazy';\n }\n}\n\n/**\n * All available aspect ratios.\n * @deprecated\n */\nexport const ThumbnailAspectRatio: Record<string, AspectRatio> = { ...AspectRatio };\n\n/**\n * Thumbnail sizes.\n */\nexport type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Thumbnail variants.\n */\nexport const ThumbnailVariant = {\n squared: 'squared',\n rounded: 'rounded',\n} as const;\nexport type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;\n\n/**\n * Thumbnail object fit.\n */\nexport const ThumbnailObjectFit = {\n cover: 'cover',\n contain: 'contain',\n} as const;\nexport type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;\n"],"names":["ThumbnailAspectRatio","AspectRatio","ThumbnailVariant","squared","rounded","ThumbnailObjectFit","cover","contain"],"mappings":";;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACO,MAAMA,oBAAiD,GAAG;EAAE,GAAGC,WAAAA;AAAY,EAAC;;AAEnF;AACA;AACA;;AAGA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAA;AACb,EAAU;AAGV;AACA;AACA;AACO,MAAMC,kBAAkB,GAAG;AAC9BC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,OAAO,EAAE,SAAA;AACb;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
1
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
2
2
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
|
|
@@ -58,4 +58,4 @@ Toolbar.className = CLASSNAME;
|
|
|
58
58
|
Toolbar.defaultProps = DEFAULT_PROPS;
|
|
59
59
|
|
|
60
60
|
export { Toolbar };
|
|
61
|
-
//# sourceMappingURL=toolbar-
|
|
61
|
+
//# sourceMappingURL=toolbar-0d14efb7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar-
|
|
1
|
+
{"version":3,"file":"toolbar-0d14efb7.js","sources":["../../../src/components/toolbar/Toolbar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\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 ToolbarProps extends GenericProps {\n /** After content (placed after the label). */\n after?: ReactNode;\n /** Before content (placed before the label). */\n before?: ReactNode;\n /** Label content. */\n label?: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Toolbar';\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<ToolbarProps> = {};\n\n/**\n * Toolbar component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Toolbar = forwardRef<ToolbarProps, HTMLDivElement>((props, ref) => {\n const { after, before, className, label, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n hasAfter: Boolean(after),\n hasBefore: Boolean(before),\n hasLabel: Boolean(label),\n prefix: CLASSNAME,\n }),\n )}\n >\n {before && <div className={`${CLASSNAME}__before`}>{before}</div>}\n {label && <div className={`${CLASSNAME}__label`}>{label}</div>}\n {after && <div className={`${CLASSNAME}__after`}>{after}</div>}\n </div>\n );\n});\nToolbar.displayName = COMPONENT_NAME;\nToolbar.className = CLASSNAME;\nToolbar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Toolbar","forwardRef","props","ref","after","before","className","label","forwardedProps","_jsxs","classNames","handleBasicClasses","hasAfter","Boolean","hasBefore","hasLabel","prefix","children","_jsx","displayName","defaultProps"],"mappings":";;;;AAoBA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAoC,GAAG,EAAE,CAAA;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAA+B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5E,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGN,KAAK,CAAA;AAEpE,EAAA,oBACIO,IAAA,CAAA,KAAA,EAAA;AACIN,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLK,cAAc;AAClBF,IAAAA,SAAS,EAAEI,UAAU,CACjBJ,SAAS,EACTK,kBAAkB,CAAC;AACfC,MAAAA,QAAQ,EAAEC,OAAO,CAACT,KAAK,CAAC;AACxBU,MAAAA,SAAS,EAAED,OAAO,CAACR,MAAM,CAAC;AAC1BU,MAAAA,QAAQ,EAAEF,OAAO,CAACN,KAAK,CAAC;AACxBS,MAAAA,MAAM,EAAEnB,SAAAA;AACZ,KAAC,CACL,CAAE;IAAAoB,QAAA,EAAA,CAEDZ,MAAM,iBAAIa,GAAA,CAAA,KAAA,EAAA;MAAKZ,SAAS,EAAE,CAAGT,EAAAA,SAAS,CAAW,QAAA,CAAA;AAAAoB,MAAAA,QAAA,EAAEZ,MAAAA;AAAM,KAAM,CAAC,EAChEE,KAAK,iBAAIW,GAAA,CAAA,KAAA,EAAA;MAAKZ,SAAS,EAAE,CAAGT,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAAoB,MAAAA,QAAA,EAAEV,KAAAA;AAAK,KAAM,CAAC,EAC7DH,KAAK,iBAAIc,GAAA,CAAA,KAAA,EAAA;MAAKZ,SAAS,EAAE,CAAGT,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAAoB,MAAAA,QAAA,EAAEb,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFJ,OAAO,CAACmB,WAAW,GAAGvB,cAAc,CAAA;AACpCI,OAAO,CAACM,SAAS,GAAGT,SAAS,CAAA;AAC7BG,OAAO,CAACoB,YAAY,GAAGrB,aAAa;;;;"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React__default, { useMemo, cloneElement, useState, useRef, useEffect } from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
3
|
import { I as IS_BROWSER, D as DOCUMENT, V as VISUALLY_HIDDEN } from '../constants-d0e3f49e.js';
|
|
4
4
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
5
|
import { m as mergeRefs, u as useMergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
6
6
|
import { T as TooltipContextProvider } from '../context-9d1336a1.js';
|
|
7
7
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
8
|
-
import { a as POPOVER_ZINDEX, P as Placement, u as usePopper } from '../constants-
|
|
8
|
+
import { a as POPOVER_ZINDEX, P as Placement, u as usePopper } from '../constants-9b714e31.js';
|
|
9
9
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
10
|
-
import { u as useCallbackOnEscape } from '../useCallbackOnEscape-
|
|
10
|
+
import { u as useCallbackOnEscape } from '../useCallbackOnEscape-0b220f9c.js';
|
|
11
11
|
import { TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
|
|
12
12
|
import { P as Portal } from '../Portal-3f86608e.js';
|
|
13
13
|
|
|
@@ -324,4 +324,4 @@ Tooltip.className = CLASSNAME;
|
|
|
324
324
|
Tooltip.defaultProps = DEFAULT_PROPS;
|
|
325
325
|
|
|
326
326
|
export { Tooltip };
|
|
327
|
-
//# sourceMappingURL=tooltip-
|
|
327
|
+
//# sourceMappingURL=tooltip-31181a24.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-2885ab2e.js","sources":["../../../src/components/tooltip/constants.ts","../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/utils/browser/isHoverNotSupported.ts","../../../src/utils/browser/isFocusVisible.ts","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { POPOVER_ZINDEX } from '../popover/constants';\n\nexport const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;\n\n/**\n * Make sure tooltip appear above popovers.\n */\nexport const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;\n","import React, { cloneElement, ReactNode, useMemo } from 'react';\n\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\n\ninterface Options {\n /** Original tooltip anchor */\n children: ReactNode;\n /** Set tooltip anchor element */\n setAnchorElement: (e: HTMLDivElement) => void;\n /** Whether the tooltip is open or not */\n isMounted: boolean | undefined;\n /** Tooltip id */\n id: string;\n /** Tooltip label*/\n label?: string | null | false;\n /** Choose how the tooltip text should link to the anchor */\n ariaLinkMode: 'aria-describedby' | 'aria-labelledby';\n}\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n */\nexport const useInjectTooltipRef = (options: Options): ReactNode => {\n const { children, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;\n // Only add link when mounted\n const linkId = isMounted ? id : undefined;\n\n return useMemo(() => {\n if (!label) return children;\n\n // Non-disabled element\n if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {\n const ref = mergeRefs((children as any).ref, setAnchorElement);\n const props = { ...children.props, ref };\n\n // Do not add label/description if the tooltip label is already in aria-label\n if (linkId && label !== props['aria-label']) {\n if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';\n else props[ariaLinkMode] = '';\n props[ariaLinkMode] += linkId;\n }\n\n return cloneElement(children, props);\n }\n\n const aria = linkId ? { [ariaLinkMode]: linkId } : undefined;\n return (\n <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...aria}>\n {children}\n </div>\n );\n }, [label, children, setAnchorElement, linkId, ariaLinkMode]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const isHoverNotSupported = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","/** Check if the focus is visible on the given element */\nexport const isFocusVisible = (element?: HTMLElement) => {\n try {\n return element?.matches?.(':focus-visible, [data-focus-visible-added]');\n } catch (_ignored) {\n // Can fail on non browser env\n return true;\n }\n};\n","import { MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { isHoverNotSupported } from '@lumx/react/utils/browser/isHoverNotSupported';\nimport { IS_BROWSER, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param delay Delay in millisecond to display the tooltip.\n * @param anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null) {\n const [isOpen, setIsOpen] = useState(false);\n\n const onPopperMount = useRef<any>(null) as MutableRefObject<(elem: HTMLElement | null) => void>;\n\n // Global close on escape\n const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);\n useCallbackOnEscape(isOpen ? closeCallback : undefined);\n\n useEffect(() => {\n if (!anchorElement) {\n return undefined;\n }\n let timer: number | undefined;\n let openStartTime: number | undefined;\n let shouldOpen: boolean | undefined;\n\n // Run timer to defer updating the isOpen state.\n const deferUpdate = (duration: number) => {\n if (timer) clearTimeout(timer);\n const update = () => {\n setIsOpen(!!shouldOpen);\n };\n // Skip timeout in fake browsers\n if (!IS_BROWSER) update();\n else timer = setTimeout(update, duration) as any;\n };\n\n const hoverNotSupported = isHoverNotSupported();\n const hasTouch = 'ontouchstart' in window;\n\n // Adapt open/close delay\n const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n // Open (or/and cancel closing) of tooltip.\n const open = () => {\n if (shouldOpen && !timer) return;\n shouldOpen = true;\n openStartTime = Date.now();\n deferUpdate(openDelay);\n };\n\n // Close or cancel opening of tooltip\n const getClose = (overrideDelay = closeDelay) => {\n if (!shouldOpen && !timer) return;\n shouldOpen = false;\n deferUpdate(overrideDelay);\n };\n const close = () => getClose(closeDelay);\n const closeImmediately = () => getClose(0);\n setCloseCallback(() => closeImmediately);\n\n // Adapt event to browsers with or without `hover` support.\n const events: Array<[Node, Event['type'], any]> = [];\n if (hoverNotSupported) {\n /**\n * Handle touchend event\n * If end comes before the open delay => cancel tooltip (close immediate).\n * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n */\n const longPressEnd = (evt: Event) => {\n if (!openStartTime) return;\n if (Date.now() - openStartTime >= openDelay) {\n // Tooltip take priority, event prevented.\n evt.stopPropagation();\n evt.preventDefault();\n anchorElement.focus();\n // Close with delay.\n close();\n } else {\n // Close immediately.\n closeImmediately();\n }\n };\n\n events.push(\n [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd],\n );\n } else {\n events.push(\n [anchorElement, 'mouseenter', open],\n [anchorElement, 'mouseleave', close],\n [anchorElement, 'mouseup', closeImmediately],\n );\n\n onPopperMount.current = (popperElement: HTMLElement | null) => {\n if (!popperElement) return;\n // Popper element hover\n popperElement.addEventListener('mouseenter', open);\n popperElement.addEventListener('mouseleave', close);\n // Add to event list to remove on unmount\n events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);\n };\n }\n\n // Events always applied no matter the browser:.\n events.push(\n // Open on focus (only if focus is visible).\n [\n anchorElement,\n 'focusin',\n (e: Event) => {\n // Skip if focus is not visible\n if (!isFocusVisible(e.target as HTMLElement)) return;\n open();\n },\n ],\n // Close on lost focus.\n [anchorElement, 'focusout', closeImmediately],\n );\n\n // Attach events\n for (const [node, eventType, eventHandler] of events) {\n node.addEventListener(eventType, eventHandler);\n }\n return () => {\n // Clear pending timers.\n if (timer) clearTimeout(timer);\n\n // Detach events.\n for (const [node, eventType, eventHandler] of events) {\n node.removeEventListener(eventType, eventHandler);\n }\n };\n }, [anchorElement, delay]);\n\n return { isOpen, onPopperMount: onPopperMount.current };\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';\nimport { GenericProps, HasCloseMode } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { Placement } from '@lumx/react/components/popover';\nimport { TooltipContextProvider } from '@lumx/react/components/tooltip/context';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { usePopper } from '@lumx/react/hooks/usePopper';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';\nimport { Portal } from '@lumx/react/utils';\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps, HasCloseMode {\n /** Anchor (element on which we activate the tooltip). */\n children: ReactNode;\n /** Delay (in ms) before closing the tooltip. */\n delay?: number;\n /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n forceOpen?: boolean;\n /** Label text. */\n label?: string | null | false;\n /** Placement of the tooltip relative to the anchor. */\n placement?: TooltipPlacement;\n /** Choose how the tooltip text should link to the anchor */\n ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\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<TooltipProps> = {\n placement: Placement.BOTTOM,\n closeMode: 'unmount',\n ariaLinkMode: 'aria-describedby',\n zIndex: TOOLTIP_ZINDEX,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) => {\n const {\n label,\n children,\n className,\n delay,\n placement = DEFAULT_PROPS.placement,\n forceOpen,\n closeMode = DEFAULT_PROPS.closeMode,\n ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,\n zIndex = DEFAULT_PROPS.zIndex,\n ...forwardedProps\n } = props;\n // Disable in SSR.\n if (!DOCUMENT) {\n return <>{children}</>;\n }\n\n const id = useId();\n\n const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: { offset: [0, ARROW_SIZE] },\n },\n ],\n });\n\n const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);\n const isOpen = (isActivated || forceOpen) && !!label;\n const isMounted = !!label && (isOpen || closeMode === 'hide');\n const isHidden = !isOpen && closeMode === 'hide';\n const wrappedChildren = useInjectTooltipRef({\n children,\n setAnchorElement,\n isMounted,\n id,\n label,\n ariaLinkMode: ariaLinkMode as any,\n });\n\n // Update on open\n React.useEffect(() => {\n if (isOpen || popperElement) update?.();\n }, [isOpen, update, popperElement]);\n\n const labelLines = label ? label.split('\\n') : [];\n\n const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);\n\n return (\n <>\n <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>\n {isMounted && (\n <Portal>\n <div\n ref={tooltipRef}\n {...forwardedProps}\n id={id}\n role=\"tooltip\"\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n position,\n isInitializing: !styles.popper?.transform,\n }),\n isHidden && VISUALLY_HIDDEN,\n )}\n style={{ ...(isHidden ? undefined : styles.popper), zIndex }}\n {...attributes.popper}\n >\n <div className={`${CLASSNAME}__arrow`} />\n <div className={`${CLASSNAME}__inner`}>\n {labelLines.map((line) => (\n <p key={line}>{line}</p>\n ))}\n </div>\n </div>\n </Portal>\n )}\n </>\n );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["TOOLTIP_ZINDEX","POPOVER_ZINDEX","useInjectTooltipRef","options","children","setAnchorElement","isMounted","id","label","ariaLinkMode","linkId","undefined","useMemo","React","isValidElement","props","disabled","isDisabled","ref","mergeRefs","cloneElement","aria","_jsx","className","isHoverNotSupported","window","matchMedia","matches","isFocusVisible","element","_ignored","useTooltipOpen","delay","anchorElement","isOpen","setIsOpen","useState","onPopperMount","useRef","closeCallback","setCloseCallback","useCallbackOnEscape","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","update","IS_BROWSER","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","getClose","overrideDelay","closeImmediately","events","longPressEnd","evt","stopPropagation","preventDefault","focus","push","current","popperElement","addEventListener","e","target","node","eventType","eventHandler","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","closeMode","zIndex","ARROW_SIZE","Tooltip","forwardRef","forceOpen","forwardedProps","DOCUMENT","_Fragment","useId","setPopperElement","styles","attributes","usePopper","modifiers","name","offset","position","popper","isActivated","isHidden","wrappedChildren","labelLines","split","tooltipRef","useMergeRefs","_jsxs","TooltipContextProvider","Portal","role","classNames","handleBasicClasses","prefix","isInitializing","transform","VISUALLY_HIDDEN","style","map","line","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip-31181a24.js","sources":["../../../src/components/tooltip/constants.ts","../../../src/components/tooltip/useInjectTooltipRef.tsx","../../../src/utils/browser/isHoverNotSupported.ts","../../../src/utils/browser/isFocusVisible.ts","../../../src/components/tooltip/useTooltipOpen.tsx","../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { POPOVER_ZINDEX } from '../popover/constants';\n\nexport const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;\n\n/**\n * Make sure tooltip appear above popovers.\n */\nexport const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;\n","import React, { cloneElement, ReactNode, useMemo } from 'react';\n\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\n\ninterface Options {\n /** Original tooltip anchor */\n children: ReactNode;\n /** Set tooltip anchor element */\n setAnchorElement: (e: HTMLDivElement) => void;\n /** Whether the tooltip is open or not */\n isMounted: boolean | undefined;\n /** Tooltip id */\n id: string;\n /** Tooltip label*/\n label?: string | null | false;\n /** Choose how the tooltip text should link to the anchor */\n ariaLinkMode: 'aria-describedby' | 'aria-labelledby';\n}\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n */\nexport const useInjectTooltipRef = (options: Options): ReactNode => {\n const { children, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;\n // Only add link when mounted\n const linkId = isMounted ? id : undefined;\n\n return useMemo(() => {\n if (!label) return children;\n\n // Non-disabled element\n if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {\n const ref = mergeRefs((children as any).ref, setAnchorElement);\n const props = { ...children.props, ref };\n\n // Do not add label/description if the tooltip label is already in aria-label\n if (linkId && label !== props['aria-label']) {\n if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';\n else props[ariaLinkMode] = '';\n props[ariaLinkMode] += linkId;\n }\n\n return cloneElement(children, props);\n }\n\n const aria = linkId ? { [ariaLinkMode]: linkId } : undefined;\n return (\n <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...aria}>\n {children}\n </div>\n );\n }, [label, children, setAnchorElement, linkId, ariaLinkMode]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const isHoverNotSupported = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","/** Check if the focus is visible on the given element */\nexport const isFocusVisible = (element?: HTMLElement) => {\n try {\n return element?.matches?.(':focus-visible, [data-focus-visible-added]');\n } catch (_ignored) {\n // Can fail on non browser env\n return true;\n }\n};\n","import { MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { isHoverNotSupported } from '@lumx/react/utils/browser/isHoverNotSupported';\nimport { IS_BROWSER, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param delay Delay in millisecond to display the tooltip.\n * @param anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null) {\n const [isOpen, setIsOpen] = useState(false);\n\n const onPopperMount = useRef<any>(null) as MutableRefObject<(elem: HTMLElement | null) => void>;\n\n // Global close on escape\n const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);\n useCallbackOnEscape(isOpen ? closeCallback : undefined);\n\n useEffect(() => {\n if (!anchorElement) {\n return undefined;\n }\n let timer: number | undefined;\n let openStartTime: number | undefined;\n let shouldOpen: boolean | undefined;\n\n // Run timer to defer updating the isOpen state.\n const deferUpdate = (duration: number) => {\n if (timer) clearTimeout(timer);\n const update = () => {\n setIsOpen(!!shouldOpen);\n };\n // Skip timeout in fake browsers\n if (!IS_BROWSER) update();\n else timer = setTimeout(update, duration) as any;\n };\n\n const hoverNotSupported = isHoverNotSupported();\n const hasTouch = 'ontouchstart' in window;\n\n // Adapt open/close delay\n const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n // Open (or/and cancel closing) of tooltip.\n const open = () => {\n if (shouldOpen && !timer) return;\n shouldOpen = true;\n openStartTime = Date.now();\n deferUpdate(openDelay);\n };\n\n // Close or cancel opening of tooltip\n const getClose = (overrideDelay = closeDelay) => {\n if (!shouldOpen && !timer) return;\n shouldOpen = false;\n deferUpdate(overrideDelay);\n };\n const close = () => getClose(closeDelay);\n const closeImmediately = () => getClose(0);\n setCloseCallback(() => closeImmediately);\n\n // Adapt event to browsers with or without `hover` support.\n const events: Array<[Node, Event['type'], any]> = [];\n if (hoverNotSupported) {\n /**\n * Handle touchend event\n * If end comes before the open delay => cancel tooltip (close immediate).\n * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n */\n const longPressEnd = (evt: Event) => {\n if (!openStartTime) return;\n if (Date.now() - openStartTime >= openDelay) {\n // Tooltip take priority, event prevented.\n evt.stopPropagation();\n evt.preventDefault();\n anchorElement.focus();\n // Close with delay.\n close();\n } else {\n // Close immediately.\n closeImmediately();\n }\n };\n\n events.push(\n [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd],\n );\n } else {\n events.push(\n [anchorElement, 'mouseenter', open],\n [anchorElement, 'mouseleave', close],\n [anchorElement, 'mouseup', closeImmediately],\n );\n\n onPopperMount.current = (popperElement: HTMLElement | null) => {\n if (!popperElement) return;\n // Popper element hover\n popperElement.addEventListener('mouseenter', open);\n popperElement.addEventListener('mouseleave', close);\n // Add to event list to remove on unmount\n events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);\n };\n }\n\n // Events always applied no matter the browser:.\n events.push(\n // Open on focus (only if focus is visible).\n [\n anchorElement,\n 'focusin',\n (e: Event) => {\n // Skip if focus is not visible\n if (!isFocusVisible(e.target as HTMLElement)) return;\n open();\n },\n ],\n // Close on lost focus.\n [anchorElement, 'focusout', closeImmediately],\n );\n\n // Attach events\n for (const [node, eventType, eventHandler] of events) {\n node.addEventListener(eventType, eventHandler);\n }\n return () => {\n // Clear pending timers.\n if (timer) clearTimeout(timer);\n\n // Detach events.\n for (const [node, eventType, eventHandler] of events) {\n node.removeEventListener(eventType, eventHandler);\n }\n };\n }, [anchorElement, delay]);\n\n return { isOpen, onPopperMount: onPopperMount.current };\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';\nimport { GenericProps, HasCloseMode } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { Placement } from '@lumx/react/components/popover';\nimport { TooltipContextProvider } from '@lumx/react/components/tooltip/context';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { usePopper } from '@lumx/react/hooks/usePopper';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';\nimport { Portal } from '@lumx/react/utils';\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps, HasCloseMode {\n /** Anchor (element on which we activate the tooltip). */\n children: ReactNode;\n /** Delay (in ms) before closing the tooltip. */\n delay?: number;\n /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n forceOpen?: boolean;\n /** Label text. */\n label?: string | null | false;\n /** Placement of the tooltip relative to the anchor. */\n placement?: TooltipPlacement;\n /** Choose how the tooltip text should link to the anchor */\n ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\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<TooltipProps> = {\n placement: Placement.BOTTOM,\n closeMode: 'unmount',\n ariaLinkMode: 'aria-describedby',\n zIndex: TOOLTIP_ZINDEX,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) => {\n const {\n label,\n children,\n className,\n delay,\n placement = DEFAULT_PROPS.placement,\n forceOpen,\n closeMode = DEFAULT_PROPS.closeMode,\n ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,\n zIndex = DEFAULT_PROPS.zIndex,\n ...forwardedProps\n } = props;\n // Disable in SSR.\n if (!DOCUMENT) {\n return <>{children}</>;\n }\n\n const id = useId();\n\n const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n const { styles, attributes, update } = usePopper(anchorElement, popperElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: { offset: [0, ARROW_SIZE] },\n },\n ],\n });\n\n const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);\n const isOpen = (isActivated || forceOpen) && !!label;\n const isMounted = !!label && (isOpen || closeMode === 'hide');\n const isHidden = !isOpen && closeMode === 'hide';\n const wrappedChildren = useInjectTooltipRef({\n children,\n setAnchorElement,\n isMounted,\n id,\n label,\n ariaLinkMode: ariaLinkMode as any,\n });\n\n // Update on open\n React.useEffect(() => {\n if (isOpen || popperElement) update?.();\n }, [isOpen, update, popperElement]);\n\n const labelLines = label ? label.split('\\n') : [];\n\n const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);\n\n return (\n <>\n <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>\n {isMounted && (\n <Portal>\n <div\n ref={tooltipRef}\n {...forwardedProps}\n id={id}\n role=\"tooltip\"\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n position,\n isInitializing: !styles.popper?.transform,\n }),\n isHidden && VISUALLY_HIDDEN,\n )}\n style={{ ...(isHidden ? undefined : styles.popper), zIndex }}\n {...attributes.popper}\n >\n <div className={`${CLASSNAME}__arrow`} />\n <div className={`${CLASSNAME}__inner`}>\n {labelLines.map((line) => (\n <p key={line}>{line}</p>\n ))}\n </div>\n </div>\n </Portal>\n )}\n </>\n );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["TOOLTIP_ZINDEX","POPOVER_ZINDEX","useInjectTooltipRef","options","children","setAnchorElement","isMounted","id","label","ariaLinkMode","linkId","undefined","useMemo","React","isValidElement","props","disabled","isDisabled","ref","mergeRefs","cloneElement","aria","_jsx","className","isHoverNotSupported","window","matchMedia","matches","isFocusVisible","element","_ignored","useTooltipOpen","delay","anchorElement","isOpen","setIsOpen","useState","onPopperMount","useRef","closeCallback","setCloseCallback","useCallbackOnEscape","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","update","IS_BROWSER","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","getClose","overrideDelay","closeImmediately","events","longPressEnd","evt","stopPropagation","preventDefault","focus","push","current","popperElement","addEventListener","e","target","node","eventType","eventHandler","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","closeMode","zIndex","ARROW_SIZE","Tooltip","forwardRef","forceOpen","forwardedProps","DOCUMENT","_Fragment","useId","setPopperElement","styles","attributes","usePopper","modifiers","name","offset","position","popper","isActivated","isHidden","wrappedChildren","labelLines","split","tooltipRef","useMergeRefs","_jsxs","TooltipContextProvider","Portal","role","classNames","handleBasicClasses","prefix","isInitializing","transform","VISUALLY_HIDDEN","style","map","line","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
3
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
4
4
|
import { u as useBooleanState } from '../useBooleanState-2a3d237c.js';
|
|
5
5
|
import { u as useId } from '../useId-3a1facc0.js';
|
|
@@ -8,7 +8,7 @@ import { V as VISUALLY_HIDDEN } from '../constants-d0e3f49e.js';
|
|
|
8
8
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
9
|
import { u as useDisableStateProps } from '../useDisableStateProps-69e16b7c.js';
|
|
10
10
|
import { AspectRatio, Size, Theme } from '@lumx/core/js/constants';
|
|
11
|
-
import { I as Icon } from '../index-
|
|
11
|
+
import { I as Icon } from '../index-745f94ee.js';
|
|
12
12
|
|
|
13
13
|
const UploaderVariant = {
|
|
14
14
|
square: 'square',
|
|
@@ -150,4 +150,4 @@ Uploader.className = CLASSNAME;
|
|
|
150
150
|
Uploader.defaultProps = DEFAULT_PROPS;
|
|
151
151
|
|
|
152
152
|
export { Uploader, UploaderVariant };
|
|
153
|
-
//# sourceMappingURL=uploader-
|
|
153
|
+
//# sourceMappingURL=uploader-845b2412.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uploader-7bc3adaa.js","sources":["../../../src/components/uploader/Uploader.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useBooleanState } from '@lumx/react/hooks/useBooleanState';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Uploader variants.\n */\nexport const UploaderVariant = {\n square: 'square',\n rounded: 'rounded',\n circle: 'circle',\n} as const;\nexport type UploaderVariant = ValueOf<typeof UploaderVariant>;\n\n/**\n * Uploader sizes.\n */\nexport type UploaderSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Extend native HTML input props with specialized `onChange` providing the a `File` array.\n */\ninterface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {\n onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Icon (SVG path). */\n icon?: string;\n /** Disabled state */\n isDisabled?: boolean;\n /** Label text. */\n label?: string;\n /** Size variant. */\n size?: UploaderSize;\n /** Variant. */\n variant?: UploaderVariant;\n /** On click callback. */\n onClick?: MouseEventHandler;\n /** Handle file selection with a native input file. */\n fileInputProps?: FileInputProps;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Uploader';\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<UploaderProps> = {\n aspectRatio: AspectRatio.horizontal,\n size: Size.xl,\n variant: UploaderVariant.square,\n};\n\n/**\n * Uploader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Uploader = forwardRef<UploaderProps>((props, ref) => {\n const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n aspectRatio = DEFAULT_PROPS.aspectRatio,\n className,\n label,\n icon,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n variant = DEFAULT_PROPS.variant,\n fileInputProps,\n onClick,\n ...forwardedProps\n } = otherProps;\n // Adjust to square aspect ratio when using circle variants.\n const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;\n\n const handleClick: React.MouseEventHandler = React.useCallback(\n (evt) => {\n if (isAnyDisabled) {\n evt.preventDefault();\n } else {\n onClick?.(evt);\n }\n },\n [isAnyDisabled, onClick],\n );\n\n const generatedInputId = useId();\n const inputId = fileInputProps?.id || generatedInputId;\n const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);\n const wrapper = fileInputProps\n ? ({ Component: 'label', props: { htmlFor: inputId } } as const)\n : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);\n\n const onChange = React.useMemo(() => {\n if (isAnyDisabled || !fileInputProps?.onChange) return undefined;\n return (evt: React.ChangeEvent<HTMLInputElement>) => {\n const fileList = evt.target.files;\n const files = fileList ? Array.from(fileList) : [];\n fileInputProps.onChange(files, evt);\n };\n }, [isAnyDisabled, fileInputProps]);\n\n return (\n <wrapper.Component\n ref={ref as any}\n {...wrapper.props}\n {...forwardedProps}\n onClick={handleClick}\n className={classNames(\n className,\n handleBasicClasses({\n aspectRatio: adjustedAspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isDragHovering,\n isDisabled: isAnyDisabled,\n }),\n )}\n >\n <span className={`${CLASSNAME}__background`} />\n\n <span className={`${CLASSNAME}__wrapper`}>\n {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.s} />}\n\n {label && <span className={`${CLASSNAME}__label`}>{label}</span>}\n </span>\n\n {fileInputProps && (\n <input\n type=\"file\"\n id={inputId}\n className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}\n {...disabledStateProps}\n {...fileInputProps}\n readOnly={isAnyDisabled}\n onChange={onChange}\n onDragEnter={setDragHovering}\n onDragLeave={unsetDragHovering}\n onDrop={unsetDragHovering}\n />\n )}\n </wrapper.Component>\n );\n});\nUploader.displayName = COMPONENT_NAME;\nUploader.className = CLASSNAME;\nUploader.defaultProps = DEFAULT_PROPS;\n"],"names":["UploaderVariant","square","rounded","circle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","aspectRatio","AspectRatio","horizontal","size","Size","xl","variant","Uploader","forwardRef","props","ref","disabledStateProps","otherProps","isAnyDisabled","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","label","icon","theme","fileInputProps","onClick","forwardedProps","adjustedAspectRatio","handleClick","React","useCallback","evt","preventDefault","generatedInputId","useId","inputId","id","isDragHovering","unsetDragHovering","setDragHovering","useBooleanState","wrapper","Component","htmlFor","type","onChange","useMemo","undefined","fileList","target","files","Array","from","_jsxs","classNames","handleBasicClasses","prefix","isDisabled","children","_jsx","Icon","s","VISUALLY_HIDDEN","readOnly","onDragEnter","onDragLeave","onDrop","displayName","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"uploader-845b2412.js","sources":["../../../src/components/uploader/Uploader.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useBooleanState } from '@lumx/react/hooks/useBooleanState';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Uploader variants.\n */\nexport const UploaderVariant = {\n square: 'square',\n rounded: 'rounded',\n circle: 'circle',\n} as const;\nexport type UploaderVariant = ValueOf<typeof UploaderVariant>;\n\n/**\n * Uploader sizes.\n */\nexport type UploaderSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Extend native HTML input props with specialized `onChange` providing the a `File` array.\n */\ninterface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {\n onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {\n /** Image aspect ratio. */\n aspectRatio?: AspectRatio;\n /** Icon (SVG path). */\n icon?: string;\n /** Disabled state */\n isDisabled?: boolean;\n /** Label text. */\n label?: string;\n /** Size variant. */\n size?: UploaderSize;\n /** Variant. */\n variant?: UploaderVariant;\n /** On click callback. */\n onClick?: MouseEventHandler;\n /** Handle file selection with a native input file. */\n fileInputProps?: FileInputProps;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Uploader';\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<UploaderProps> = {\n aspectRatio: AspectRatio.horizontal,\n size: Size.xl,\n variant: UploaderVariant.square,\n};\n\n/**\n * Uploader component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Uploader = forwardRef<UploaderProps>((props, ref) => {\n const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);\n const defaultTheme = useTheme() || Theme.light;\n const {\n aspectRatio = DEFAULT_PROPS.aspectRatio,\n className,\n label,\n icon,\n size = DEFAULT_PROPS.size,\n theme = defaultTheme,\n variant = DEFAULT_PROPS.variant,\n fileInputProps,\n onClick,\n ...forwardedProps\n } = otherProps;\n // Adjust to square aspect ratio when using circle variants.\n const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;\n\n const handleClick: React.MouseEventHandler = React.useCallback(\n (evt) => {\n if (isAnyDisabled) {\n evt.preventDefault();\n } else {\n onClick?.(evt);\n }\n },\n [isAnyDisabled, onClick],\n );\n\n const generatedInputId = useId();\n const inputId = fileInputProps?.id || generatedInputId;\n const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);\n const wrapper = fileInputProps\n ? ({ Component: 'label', props: { htmlFor: inputId } } as const)\n : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);\n\n const onChange = React.useMemo(() => {\n if (isAnyDisabled || !fileInputProps?.onChange) return undefined;\n return (evt: React.ChangeEvent<HTMLInputElement>) => {\n const fileList = evt.target.files;\n const files = fileList ? Array.from(fileList) : [];\n fileInputProps.onChange(files, evt);\n };\n }, [isAnyDisabled, fileInputProps]);\n\n return (\n <wrapper.Component\n ref={ref as any}\n {...wrapper.props}\n {...forwardedProps}\n onClick={handleClick}\n className={classNames(\n className,\n handleBasicClasses({\n aspectRatio: adjustedAspectRatio,\n prefix: CLASSNAME,\n size,\n theme,\n variant,\n isDragHovering,\n isDisabled: isAnyDisabled,\n }),\n )}\n >\n <span className={`${CLASSNAME}__background`} />\n\n <span className={`${CLASSNAME}__wrapper`}>\n {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.s} />}\n\n {label && <span className={`${CLASSNAME}__label`}>{label}</span>}\n </span>\n\n {fileInputProps && (\n <input\n type=\"file\"\n id={inputId}\n className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}\n {...disabledStateProps}\n {...fileInputProps}\n readOnly={isAnyDisabled}\n onChange={onChange}\n onDragEnter={setDragHovering}\n onDragLeave={unsetDragHovering}\n onDrop={unsetDragHovering}\n />\n )}\n </wrapper.Component>\n );\n});\nUploader.displayName = COMPONENT_NAME;\nUploader.className = CLASSNAME;\nUploader.defaultProps = DEFAULT_PROPS;\n"],"names":["UploaderVariant","square","rounded","circle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","aspectRatio","AspectRatio","horizontal","size","Size","xl","variant","Uploader","forwardRef","props","ref","disabledStateProps","otherProps","isAnyDisabled","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","label","icon","theme","fileInputProps","onClick","forwardedProps","adjustedAspectRatio","handleClick","React","useCallback","evt","preventDefault","generatedInputId","useId","inputId","id","isDragHovering","unsetDragHovering","setDragHovering","useBooleanState","wrapper","Component","htmlFor","type","onChange","useMemo","undefined","fileList","target","files","Array","from","_jsxs","classNames","handleBasicClasses","prefix","isDisabled","children","_jsx","Icon","s","VISUALLY_HIDDEN","readOnly","onDragEnter","onDragLeave","onDrop","displayName","defaultProps"],"mappings":"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"}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { f as forwardRef, c as classNames } from '../forwardRef-
|
|
3
|
-
import isEmpty from 'lodash/isEmpty';
|
|
4
|
-
import set from 'lodash/set';
|
|
2
|
+
import { f as forwardRef, c as classNames } from '../forwardRef-d0e90329.js';
|
|
5
3
|
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
6
4
|
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
7
5
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
6
|
import { Orientation, Size, Theme, ColorPalette } from '@lumx/core/js/constants';
|
|
9
|
-
import { Avatar } from './avatar-
|
|
10
|
-
import { Link } from './link-
|
|
7
|
+
import { Avatar } from './avatar-69b66f01.js';
|
|
8
|
+
import { Link } from './link-e70e64ed.js';
|
|
11
9
|
|
|
12
10
|
/**
|
|
13
11
|
* Component display name.
|
|
@@ -67,7 +65,7 @@ const UserBlock = forwardRef((props, ref) => {
|
|
|
67
65
|
const isLink = Boolean(linkProps?.href || linkAs);
|
|
68
66
|
const isClickable = !!onClick || isLink;
|
|
69
67
|
const nameBlock = React__default.useMemo(() => {
|
|
70
|
-
if (
|
|
68
|
+
if (!name) {
|
|
71
69
|
return null;
|
|
72
70
|
}
|
|
73
71
|
let NameComponent = 'span';
|
|
@@ -84,15 +82,11 @@ const UserBlock = forwardRef((props, ref) => {
|
|
|
84
82
|
color: ColorPalette.dark
|
|
85
83
|
});
|
|
86
84
|
}
|
|
87
|
-
// Disable avatar focus since the name block is the same link / same button.
|
|
88
|
-
if (avatarProps) {
|
|
89
|
-
set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
|
|
90
|
-
}
|
|
91
85
|
return /*#__PURE__*/jsx(NameComponent, {
|
|
92
86
|
...nProps,
|
|
93
87
|
children: name
|
|
94
88
|
});
|
|
95
|
-
}, [
|
|
89
|
+
}, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
|
|
96
90
|
const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
|
|
97
91
|
const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
|
|
98
92
|
className: `${CLASSNAME}__fields`,
|
|
@@ -121,7 +115,12 @@ const UserBlock = forwardRef((props, ref) => {
|
|
|
121
115
|
className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
|
|
122
116
|
size: componentSize,
|
|
123
117
|
onClick: onClick,
|
|
124
|
-
theme: theme
|
|
118
|
+
theme: theme,
|
|
119
|
+
thumbnailProps: {
|
|
120
|
+
...avatarProps?.thumbnailProps,
|
|
121
|
+
// Disable avatar focus since the name block is the same link / same button.
|
|
122
|
+
tabIndex: avatarProps ? -1 : undefined
|
|
123
|
+
}
|
|
125
124
|
}), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
|
|
126
125
|
className: `${CLASSNAME}__wrapper`,
|
|
127
126
|
children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
|
|
@@ -142,4 +141,4 @@ UserBlock.className = CLASSNAME;
|
|
|
142
141
|
UserBlock.defaultProps = DEFAULT_PROPS;
|
|
143
142
|
|
|
144
143
|
export { UserBlock };
|
|
145
|
-
//# sourceMappingURL=user-block-
|
|
144
|
+
//# sourceMappingURL=user-block-91c30797.js.map
|