@lumx/react 3.20.1-alpha.29 → 3.20.1-alpha.30
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-4b67daa8.js +98 -0
- package/_internal/Button-4b67daa8.js.map +1 -0
- package/_internal/ButtonRoot-a70baf82.js +118 -0
- package/_internal/ButtonRoot-a70baf82.js.map +1 -0
- package/_internal/Chip-70af04b4.js +144 -0
- package/_internal/Chip-70af04b4.js.map +1 -0
- package/_internal/ClickAwayProvider-1204f237.js +95 -0
- package/_internal/ClickAwayProvider-1204f237.js.map +1 -0
- package/_internal/DisabledStateContext-ea04260d.js +29 -0
- package/_internal/DisabledStateContext-ea04260d.js.map +1 -0
- package/_internal/HeadingLevelProvider-ebdcb0c7.js +61 -0
- package/_internal/HeadingLevelProvider-ebdcb0c7.js.map +1 -0
- package/_internal/IconButton-8d61f5be.js +77 -0
- package/_internal/IconButton-8d61f5be.js.map +1 -0
- package/_internal/ImageCaption-db44ec9e.js +75 -0
- package/_internal/ImageCaption-db44ec9e.js.map +1 -0
- package/_internal/List-c75646f2.js +818 -0
- package/_internal/List-c75646f2.js.map +1 -0
- package/_internal/PopoverDialog-35b2d87d.js +657 -0
- package/_internal/PopoverDialog-35b2d87d.js.map +1 -0
- package/_internal/Portal-3f86608e.js +45 -0
- package/_internal/Portal-3f86608e.js.map +1 -0
- package/_internal/RawClickable-2c2b6a89.js +52 -0
- package/_internal/RawClickable-2c2b6a89.js.map +1 -0
- package/_internal/Slides-ce641b5f.js +679 -0
- package/_internal/Slides-ce641b5f.js.map +1 -0
- package/_internal/ThemeContext-3181f000.js +14 -0
- package/_internal/ThemeContext-3181f000.js.map +1 -0
- package/_internal/Thumbnail-02bd6869.js +314 -0
- package/_internal/Thumbnail-02bd6869.js.map +1 -0
- package/_internal/components/alert-dialog-a24330ed.js +166 -0
- package/_internal/components/alert-dialog-a24330ed.js.map +1 -0
- package/_internal/components/autocomplete-70749e51.js +262 -0
- package/_internal/components/autocomplete-70749e51.js.map +1 -0
- package/_internal/components/avatar-ed9f4869.js +84 -0
- package/_internal/components/avatar-ed9f4869.js.map +1 -0
- package/_internal/components/badge-ccf47147.js +82 -0
- package/_internal/components/badge-ccf47147.js.map +1 -0
- package/_internal/components/button-9f710830.js +48 -0
- package/_internal/components/button-9f710830.js.map +1 -0
- package/_internal/components/checkbox-8ab51ef9.js +142 -0
- package/_internal/components/checkbox-8ab51ef9.js.map +1 -0
- package/_internal/components/chip-19e40755.js +103 -0
- package/_internal/components/chip-19e40755.js.map +1 -0
- package/_internal/components/comment-block-bb6a0603.js +139 -0
- package/_internal/components/comment-block-bb6a0603.js.map +1 -0
- package/_internal/components/date-picker-e4209b01.js +2 -0
- package/_internal/components/date-picker-e4209b01.js.map +1 -0
- package/_internal/components/dialog-30336ccb.js +239 -0
- package/_internal/components/dialog-30336ccb.js.map +1 -0
- package/_internal/components/divider-0e93aa3d.js +51 -0
- package/_internal/components/divider-0e93aa3d.js.map +1 -0
- package/_internal/components/drag-handle-ba2e7e67.js +52 -0
- package/_internal/components/drag-handle-ba2e7e67.js.map +1 -0
- package/_internal/components/dropdown-d18122d7.js +148 -0
- package/_internal/components/dropdown-d18122d7.js.map +1 -0
- package/_internal/components/expansion-panel-0b263437.js +169 -0
- package/_internal/components/expansion-panel-0b263437.js.map +1 -0
- package/_internal/components/flag-8f9a498a.js +60 -0
- package/_internal/components/flag-8f9a498a.js.map +1 -0
- package/_internal/components/flex-box-15be92f6.js +57 -0
- package/_internal/components/flex-box-15be92f6.js.map +1 -0
- package/_internal/components/generic-block-5d843f1e.js +128 -0
- package/_internal/components/generic-block-5d843f1e.js.map +1 -0
- package/_internal/components/grid-8c08dc4b.js +105 -0
- package/_internal/components/grid-8c08dc4b.js.map +1 -0
- package/_internal/components/grid-column-85e305e7.js +59 -0
- package/_internal/components/grid-column-85e305e7.js.map +1 -0
- package/_internal/components/heading-7bfafd7d.js +54 -0
- package/_internal/components/heading-7bfafd7d.js.map +1 -0
- package/_internal/components/icon-ee15673b.js +103 -0
- package/_internal/components/icon-ee15673b.js.map +1 -0
- package/_internal/components/image-block-3479abda.js +111 -0
- package/_internal/components/image-block-3479abda.js.map +1 -0
- package/_internal/components/image-lightbox-1d7ca133.js +758 -0
- package/_internal/components/image-lightbox-1d7ca133.js.map +1 -0
- package/_internal/components/inline-list-5ba8bb0f.js +75 -0
- package/_internal/components/inline-list-5ba8bb0f.js.map +1 -0
- package/_internal/components/input-helper-2e4e49fd.js +72 -0
- package/_internal/components/input-helper-2e4e49fd.js.map +1 -0
- package/_internal/components/input-label-30d199c3.js +60 -0
- package/_internal/components/input-label-30d199c3.js.map +1 -0
- package/_internal/components/lightbox-c5f9afd0.js +156 -0
- package/_internal/components/lightbox-c5f9afd0.js.map +1 -0
- package/_internal/components/link-43ee103e.js +73 -0
- package/_internal/components/link-43ee103e.js.map +1 -0
- package/_internal/components/link-preview-db0ee2d6.js +118 -0
- package/_internal/components/link-preview-db0ee2d6.js.map +1 -0
- package/_internal/components/list-2f256244.js +72 -0
- package/_internal/components/list-2f256244.js.map +1 -0
- package/_internal/components/message-f7674e0e.js +101 -0
- package/_internal/components/message-f7674e0e.js.map +1 -0
- package/_internal/components/mosaic-3effd0cf.js +95 -0
- package/_internal/components/mosaic-3effd0cf.js.map +1 -0
- package/_internal/components/navigation-3a5dc270.js +227 -0
- package/_internal/components/navigation-3a5dc270.js.map +1 -0
- package/_internal/components/notification-098c5600.js +146 -0
- package/_internal/components/notification-098c5600.js.map +1 -0
- package/_internal/components/popover-dfcddda4.js +3 -0
- package/_internal/components/popover-dfcddda4.js.map +1 -0
- package/_internal/components/post-block-69797e4d.js +110 -0
- package/_internal/components/post-block-69797e4d.js.map +1 -0
- package/_internal/components/progress-44bb0301.js +183 -0
- package/_internal/components/progress-44bb0301.js.map +1 -0
- package/_internal/components/progress-tracker-e0981fcc.js +309 -0
- package/_internal/components/progress-tracker-e0981fcc.js.map +1 -0
- package/_internal/components/radio-button-929c7bee.js +150 -0
- package/_internal/components/radio-button-929c7bee.js.map +1 -0
- package/_internal/components/select-64bc72a0.js +458 -0
- package/_internal/components/select-64bc72a0.js.map +1 -0
- package/_internal/components/side-navigation-c610c689.js +166 -0
- package/_internal/components/side-navigation-c610c689.js.map +1 -0
- package/_internal/components/skeleton-1ea8c82a.js +167 -0
- package/_internal/components/skeleton-1ea8c82a.js.map +1 -0
- package/_internal/components/slider-78cfaa67.js +312 -0
- package/_internal/components/slider-78cfaa67.js.map +1 -0
- package/_internal/components/slideshow-d8a943a7.js +151 -0
- package/_internal/components/slideshow-d8a943a7.js.map +1 -0
- package/_internal/components/switch-25b65051.js +122 -0
- package/_internal/components/switch-25b65051.js.map +1 -0
- package/_internal/components/table-ec20c66c.js +296 -0
- package/_internal/components/table-ec20c66c.js.map +1 -0
- package/_internal/components/tabs-89c055bd.js +299 -0
- package/_internal/components/tabs-89c055bd.js.map +1 -0
- package/_internal/components/text-d04d0f1b.js +2 -0
- package/_internal/components/text-d04d0f1b.js.map +1 -0
- package/_internal/components/text-field-8f13957e.js +361 -0
- package/_internal/components/text-field-8f13957e.js.map +1 -0
- package/_internal/components/thumbnail-1255957f.js +42 -0
- package/_internal/components/thumbnail-1255957f.js.map +1 -0
- package/_internal/components/toolbar-e7c984e6.js +62 -0
- package/_internal/components/toolbar-e7c984e6.js.map +1 -0
- package/_internal/components/tooltip-dcb43bbe.js +328 -0
- package/_internal/components/tooltip-dcb43bbe.js.map +1 -0
- package/_internal/components/uploader-7ef4db39.js +154 -0
- package/_internal/components/uploader-7ef4db39.js.map +1 -0
- package/_internal/components/user-block-24d97650.js +145 -0
- package/_internal/components/user-block-24d97650.js.map +1 -0
- package/_internal/constants-43721918.js +2170 -0
- package/_internal/constants-43721918.js.map +1 -0
- package/_internal/constants-d0e3f49e.js +24 -0
- package/_internal/constants-d0e3f49e.js.map +1 -0
- package/_internal/context-9d1336a1.js +19 -0
- package/_internal/context-9d1336a1.js.map +1 -0
- package/_internal/forwardRef-8bce732e.js +9 -0
- package/_internal/forwardRef-8bce732e.js.map +1 -0
- package/_internal/getFocusableElements-230173a8.js +13 -0
- package/_internal/getFocusableElements-230173a8.js.map +1 -0
- package/_internal/index-25c9e8c2.js +118 -0
- package/_internal/index-25c9e8c2.js.map +1 -0
- package/_internal/index-25d2a45e.js +437 -0
- package/_internal/index-25d2a45e.js.map +1 -0
- package/_internal/isComponent-b9762ff1.js +18 -0
- package/_internal/isComponent-b9762ff1.js.map +1 -0
- package/_internal/isComponentType-e806b848.js +9 -0
- package/_internal/isComponentType-e806b848.js.map +1 -0
- package/_internal/mergeRefs-f0d7d6ea.js +30 -0
- package/_internal/mergeRefs-f0d7d6ea.js.map +1 -0
- package/_internal/state-db358714.js +130 -0
- package/_internal/state-db358714.js.map +1 -0
- package/_internal/useBooleanState-2a3d237c.js +12 -0
- package/_internal/useBooleanState-2a3d237c.js.map +1 -0
- package/_internal/useCallbackOnEscape-b956a85d.js +64 -0
- package/_internal/useCallbackOnEscape-b956a85d.js.map +1 -0
- package/_internal/useDisableBodyScroll-36bd7352.js +219 -0
- package/_internal/useDisableBodyScroll-36bd7352.js.map +1 -0
- package/_internal/useDisableStateProps-69e16b7c.js +36 -0
- package/_internal/useDisableStateProps-69e16b7c.js.map +1 -0
- package/_internal/useFocusTrap-2dbae79e.js +112 -0
- package/_internal/useFocusTrap-2dbae79e.js.map +1 -0
- package/_internal/useId-3a1facc0.js +18 -0
- package/_internal/useId-3a1facc0.js.map +1 -0
- package/_internal/useRovingTabIndex-7daf0f24.js +77 -0
- package/_internal/useRovingTabIndex-7daf0f24.js.map +1 -0
- package/_internal/useTransitionVisibility-321fdbfa.js +50 -0
- package/_internal/useTransitionVisibility-321fdbfa.js.map +1 -0
- package/_internal/wrapChildrenIconWithSpaces-50d705e6.js +20 -0
- package/_internal/wrapChildrenIconWithSpaces-50d705e6.js.map +1 -0
- package/index.js +63 -14033
- package/index.js.map +1 -1
- package/package.json +3 -3
- package/utils/index.js +3 -158
- package/utils/index.js.map +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-64bc72a0.js","sources":["../../../src/hooks/useListenFocus.tsx","../../../src/components/select/WithSelectContext.tsx","../../../src/components/select/constants.ts","../../../src/components/select/Select.tsx","../../../src/components/select/SelectMultiple.tsx"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\n/**\n * Listen on element focus to store the focus status.\n */\nexport function useListenFocus(ref: RefObject<HTMLElement>) {\n const [isFocus, setFocus] = useState(false);\n\n useEffect(() => {\n const { current: element } = ref;\n if (!element) {\n return undefined;\n }\n\n const onFocus = () => setFocus(true);\n const onBlur = () => setFocus(false);\n element.addEventListener('focus', onFocus);\n element.addEventListener('blur', onBlur);\n return () => {\n element.removeEventListener('focus', onFocus);\n element.removeEventListener('blur', onBlur);\n };\n }, [ref, setFocus]);\n\n return isFocus;\n}\n","import classNames from 'classnames';\nimport { Ref, useCallback, useRef } from 'react';\n\nimport { Placement } from '@lumx/react';\nimport { Kind, Theme } from '@lumx/core/js/constants';\nimport { Dropdown } from '@lumx/react/components/dropdown/Dropdown';\nimport { InputHelper } from '@lumx/react/components/input-helper/InputHelper';\nimport { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';\nimport { useListenFocus } from '@lumx/react/hooks/useListenFocus';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\n\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { CoreSelectProps } from './constants';\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nexport const WithSelectContext = (\n SelectElement: React.FC<any>,\n props: CoreSelectProps,\n ref: Ref<HTMLDivElement>,\n): React.ReactElement => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n children,\n className,\n focusElement,\n isMultiple,\n closeOnClick = !isMultiple,\n disabled,\n error,\n hasError,\n helper,\n id,\n isDisabled = disabled,\n isEmpty,\n isOpen,\n isRequired,\n isValid,\n label,\n onClear,\n onDropdownClose,\n onInfiniteScroll,\n onInputClick,\n placeholder,\n theme = defaultTheme,\n value,\n variant,\n ...forwardedProps\n } = props;\n const generatedSelectId = useId();\n const selectId = id || generatedSelectId;\n const anchorRef = useRef<HTMLElement>(null);\n const selectRef = useRef<HTMLDivElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const isFocus = useListenFocus(anchorRef);\n\n const handleKeyboardNav = useCallback(\n (evt: React.KeyboardEvent<HTMLElement>) => {\n if ((evt.key === 'Enter' || evt.key === ' ' || evt.key === 'ArrowDown') && onInputClick) {\n evt.preventDefault();\n onInputClick();\n }\n },\n [onInputClick],\n );\n\n const onClose = () => {\n if (onDropdownClose) {\n onDropdownClose();\n }\n anchorRef?.current?.blur();\n };\n\n // Handle focus trap.\n useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);\n\n return (\n <div\n ref={mergeRefs(ref, selectRef)}\n className={classNames(\n className,\n handleBasicClasses({\n hasError,\n hasLabel: Boolean(label),\n hasPlaceholder: Boolean(placeholder),\n hasValue: !isEmpty,\n isDisabled,\n isEmpty,\n isFocus,\n isOpen,\n isValid,\n prefix: CLASSNAME,\n theme: theme === Theme.light ? Theme.light : Theme.dark,\n }),\n )}\n >\n <SelectElement\n {...forwardedProps}\n anchorRef={anchorRef}\n aria-disabled={isDisabled}\n handleKeyboardNav={handleKeyboardNav}\n hasError={hasError}\n isDisabled={isDisabled}\n isEmpty={isEmpty}\n isRequired={isRequired}\n isValid={isValid}\n label={label}\n placeholder={placeholder}\n id={selectId}\n theme={theme}\n value={value}\n variant={variant}\n onClear={onClear}\n onInputClick={onInputClick}\n />\n <Dropdown\n anchorRef={anchorRef}\n closeOnClick={closeOnClick}\n closeOnClickAway\n closeOnEscape\n isOpen={!!isOpen}\n placement={Placement.BOTTOM_START}\n onClose={onClose}\n onInfiniteScroll={onInfiniteScroll}\n ref={dropdownRef}\n >\n {children}\n </Dropdown>\n {hasError && error && (\n <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>\n {error}\n </InputHelper>\n )}\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n );\n};\n","import { IconButtonProps } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { ReactNode, SyntheticEvent } from 'react';\n\n/**\n * Select variants.\n */\nexport const SelectVariant = { input: 'input', chip: 'chip' } as const;\nexport type SelectVariant = ValueOf<typeof SelectVariant>;\n\nexport interface CoreSelectProps extends GenericProps, HasTheme {\n /** Props to pass to the clear button (minus those already set by the Select props). If not specified, the button won't be displayed. */\n clearButtonProps?: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;\n /** Whether the select (input variant) is displayed with error style or not. */\n hasError?: boolean;\n /** Error message. */\n error?: string | ReactNode;\n /** Helper text. */\n helper?: string;\n /** Whether the select should close on click. */\n closeOnClick?: boolean;\n /** Icon (SVG path). */\n icon?: string;\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 component is open or not. */\n isOpen?: boolean;\n /** Whether the select (input variant) is displayed with valid style or not. */\n isValid?: boolean;\n /** Label text. */\n label?: string;\n /** Placeholder input text. */\n placeholder?: string;\n /** Select variant. */\n variant?: SelectVariant;\n /** On clear callback. */\n onClear?(event: SyntheticEvent, value?: string): void;\n /** On blur callback. */\n onBlur?(): void;\n /** On filter text change callback (with 500ms debounce). */\n onFilter?(): void;\n /** On input click callback (can be used for dropdown toggle). */\n onInputClick?(): void;\n /** On dropdown close callback. */\n onDropdownClose?(): void;\n /** On scroll end callback. */\n onInfiniteScroll?(): void;\n /** Render value function. Default: Renders the value as a string. */\n selectedValueRender?(choice: string): ReactNode | string;\n /** Children */\n children?: React.ReactNode;\n}\n","import { RefObject } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';\nimport { mdiCheckCircle } from '@lumx/icons/esm/check-circle';\nimport { mdiCloseCircle } from '@lumx/icons/esm/close-circle';\nimport { mdiMenuDown } from '@lumx/icons/esm/menu-down';\nimport { Emphasis, Size, Theme } from '@lumx/core/js/constants';\nimport { IconButton } from '@lumx/react/components/button/IconButton';\nimport { Chip } from '@lumx/react/components/chip/Chip';\nimport { Icon } from '@lumx/react/components/icon/Icon';\nimport { InputLabel } from '@lumx/react/components/input-label/InputLabel';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { WithSelectContext } from './WithSelectContext';\nimport { CoreSelectProps, SelectVariant } from './constants';\n\n/** Defines the props of the component. */\nexport interface SelectProps extends CoreSelectProps {\n /** Selected value. */\n value: string;\n}\n\nexport { SelectVariant };\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/** The default value of props. */\nconst DEFAULT_PROPS: Partial<SelectProps> = {\n selectedValueRender: (choice) => choice,\n variant: SelectVariant.input,\n};\n\nconst stopPropagation = (evt: Event) => evt.stopPropagation();\n\n/**\n * Select component.\n */\nconst SelectField: React.FC<SelectProps> = (props) => {\n const defaultTheme = useTheme();\n const {\n anchorRef,\n clearButtonProps,\n handleKeyboardNav,\n hasError,\n hasInputClear,\n icon,\n id,\n isDisabled,\n isEmpty,\n isRequired,\n isValid,\n label,\n onClear,\n onInputClick,\n placeholder,\n selectedValueRender,\n theme = defaultTheme,\n value,\n variant,\n selectElementRef,\n ...forwardedProps\n } = props;\n\n return (\n <>\n {variant === SelectVariant.input && (\n <>\n {label && (\n <div className={`${CLASSNAME}__header`}>\n <InputLabel\n htmlFor={id}\n className={`${CLASSNAME}__label`}\n isRequired={isRequired}\n theme={theme}\n >\n {label}\n </InputLabel>\n </div>\n )}\n\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}\n id={id}\n className={`${CLASSNAME}__wrapper`}\n onClick={onInputClick}\n onKeyDown={handleKeyboardNav}\n tabIndex={isDisabled ? undefined : 0}\n aria-disabled={isDisabled || undefined}\n {...forwardedProps}\n >\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 <div\n className={classNames([\n `${CLASSNAME}__input-native`,\n isEmpty && placeholder && `${CLASSNAME}__input-native--placeholder`,\n ])}\n >\n {!isEmpty && <span>{selectedValueRender?.(value)}</span>}\n\n {isEmpty && placeholder && <span>{placeholder}</span>}\n </div>\n\n {(isValid || hasError) && (\n <div className={`${CLASSNAME}__input-validity`}>\n <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />\n </div>\n )}\n\n {hasInputClear && clearButtonProps && (\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={onClear}\n onKeyDown={stopPropagation}\n />\n )}\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={mdiMenuDown} size={Size.s} />\n </div>\n </div>\n </>\n )}\n\n {variant === SelectVariant.chip && (\n <Chip\n id={id}\n isSelected={!isEmpty}\n isDisabled={isDisabled}\n after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}\n onAfterClick={isEmpty ? onInputClick : onClear}\n onClick={onInputClick}\n ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}\n theme={theme}\n {...forwardedProps}\n >\n {isEmpty && <span>{label}</span>}\n\n {!isEmpty && <span>{selectedValueRender?.(value)}</span>}\n </Chip>\n )}\n </>\n );\n};\n\n/**\n * Select component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {\n const isEmpty = !props.value;\n const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;\n\n return WithSelectContext(\n SelectField,\n {\n ...DEFAULT_PROPS,\n ...props,\n className: classNames(\n props.className,\n handleBasicClasses({\n hasInputClear,\n hasUnique: !props.isEmpty,\n prefix: CLASSNAME,\n }),\n ),\n hasInputClear,\n isEmpty,\n },\n ref,\n );\n});\nSelect.displayName = COMPONENT_NAME;\nSelect.className = CLASSNAME;\nSelect.defaultProps = DEFAULT_PROPS;\nSelect.className = CLASSNAME;\n","import { ReactNode, RefObject, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';\nimport { mdiCheckCircle } from '@lumx/icons/esm/check-circle';\nimport { mdiClose } from '@lumx/icons/esm/close';\nimport { mdiCloseCircle } from '@lumx/icons/esm/close-circle';\nimport { mdiMenuDown } from '@lumx/icons/esm/menu-down';\nimport { Size, Theme } from '@lumx/core/js/constants';\nimport { Chip } from '@lumx/react/components/chip/Chip';\nimport { Icon } from '@lumx/react/components/icon/Icon';\nimport { InputLabel } from '@lumx/react/components/input-label/InputLabel';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { WithSelectContext } from './WithSelectContext';\nimport { CoreSelectProps, SelectVariant } from './constants';\n\n/** Defines the props of the component. */\nexport interface SelectMultipleProps extends CoreSelectProps {\n /** Selected values. */\n value: string[];\n /** Selected value render function. Default: Renders the value inside of a Chip. */\n selectedChipRender?(\n choice: string,\n index: number,\n onClear?: (event: SyntheticEvent, choice: string) => void,\n isDisabled?: boolean,\n theme?: any,\n ): ReactNode | string;\n}\n\n/** The display name of the component. */\nconst COMPONENT_NAME = 'Select';\n\n/** The default class name and classes prefix for this component. */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/** The default value of props. */\nconst DEFAULT_PROPS: Partial<SelectMultipleProps> = {\n selectedChipRender(choice, index, onClear, isDisabled?, theme?) {\n const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);\n return (\n <Chip\n key={index}\n after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}\n isDisabled={isDisabled}\n size={Size.s}\n onAfterClick={onClick}\n onClick={onClick}\n theme={theme}\n >\n {choice}\n </Chip>\n );\n },\n selectedValueRender: (choice) => choice,\n variant: SelectVariant.input,\n};\n\nexport const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {\n const defaultTheme = useTheme();\n const {\n anchorRef,\n handleKeyboardNav,\n hasError,\n icon,\n id,\n isDisabled,\n isEmpty,\n isRequired,\n isValid,\n label,\n onClear,\n onInputClick,\n placeholder,\n selectedChipRender,\n selectedValueRender,\n theme = defaultTheme,\n value,\n variant,\n selectElementRef,\n ...forwardedProps\n } = props;\n\n return (\n <>\n {variant === SelectVariant.input && (\n <>\n {label && (\n <div className={`${CLASSNAME}__header`}>\n <InputLabel\n htmlFor={id}\n className={`${CLASSNAME}__label`}\n isRequired={isRequired}\n theme={theme}\n >\n {label}\n </InputLabel>\n </div>\n )}\n\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n <div\n ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}\n id={id}\n className={`${CLASSNAME}__wrapper`}\n onClick={onInputClick}\n onKeyDown={handleKeyboardNav}\n tabIndex={isDisabled ? undefined : 0}\n aria-disabled={isDisabled || undefined}\n {...forwardedProps}\n >\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 <div className={`${CLASSNAME}__chips`}>\n {!isEmpty &&\n value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))}\n </div>\n\n {isEmpty && placeholder && (\n <div\n className={classNames([\n `${CLASSNAME}__input-native`,\n `${CLASSNAME}__input-native--placeholder`,\n ])}\n >\n <span>{placeholder}</span>\n </div>\n )}\n\n {(isValid || hasError) && (\n <div className={`${CLASSNAME}__input-validity`}>\n <Icon icon={isValid ? mdiCheckCircle : mdiAlertCircle} size={Size.xxs} />\n </div>\n )}\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={mdiMenuDown} size={Size.s} />\n </div>\n </div>\n </>\n )}\n\n {variant === SelectVariant.chip && (\n <Chip\n id={id}\n isSelected={!isEmpty}\n isDisabled={isDisabled}\n after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}\n onAfterClick={isEmpty ? onInputClick : onClear}\n onClick={onInputClick}\n ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}\n theme={theme}\n {...forwardedProps}\n >\n {isEmpty && <span>{label}</span>}\n\n {!isEmpty && (\n <span>\n <span>{selectedValueRender?.(value[0])}</span>\n\n {value.length > 1 && <span> +{value.length - 1}</span>}\n </span>\n )}\n </Chip>\n )}\n </>\n );\n};\n\n/**\n * SelectMultiple component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((props, ref) => {\n return WithSelectContext(\n SelectMultipleField,\n {\n ...DEFAULT_PROPS,\n ...props,\n className: classNames(\n props.className,\n handleBasicClasses({\n hasMultiple: !props.isEmpty,\n prefix: CLASSNAME,\n }),\n ),\n isEmpty: props.value.length === 0,\n isMultiple: true,\n },\n ref,\n );\n});\nSelectMultiple.displayName = COMPONENT_NAME;\nSelectMultiple.className = CLASSNAME;\nSelectMultiple.defaultProps = DEFAULT_PROPS;\n"],"names":["useListenFocus","ref","isFocus","setFocus","useState","useEffect","current","element","undefined","onFocus","onBlur","addEventListener","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","WithSelectContext","SelectElement","props","defaultTheme","useTheme","Theme","light","children","className","focusElement","isMultiple","closeOnClick","disabled","error","hasError","helper","id","isDisabled","isEmpty","isOpen","isRequired","isValid","label","onClear","onDropdownClose","onInfiniteScroll","onInputClick","placeholder","theme","value","variant","forwardedProps","generatedSelectId","useId","selectId","anchorRef","useRef","selectRef","dropdownRef","handleKeyboardNav","useCallback","evt","key","preventDefault","onClose","blur","useFocusTrap","_jsxs","mergeRefs","classNames","handleBasicClasses","hasLabel","Boolean","hasPlaceholder","hasValue","prefix","dark","_jsx","Dropdown","closeOnClickAway","closeOnEscape","placement","Placement","BOTTOM_START","InputHelper","kind","Kind","SelectVariant","input","chip","DEFAULT_PROPS","selectedValueRender","choice","stopPropagation","SelectField","clearButtonProps","hasInputClear","icon","selectElementRef","_Fragment","InputLabel","htmlFor","onClick","onKeyDown","tabIndex","Icon","color","size","Size","xs","mdiCheckCircle","mdiAlertCircle","xxs","IconButton","mdiCloseCircle","emphasis","Emphasis","low","s","mdiMenuDown","Chip","isSelected","after","onAfterClick","Select","forwardRef","hasUnique","displayName","defaultProps","selectedChipRender","index","event","mdiClose","SelectMultipleField","map","val","length","SelectMultiple","hasMultiple"],"mappings":"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"}
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { Children } from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { i as isComponent } from '../isComponent-b9762ff1.js';
|
|
4
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
5
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
6
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
7
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
|
+
import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
|
|
9
|
+
import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
|
|
10
|
+
import { u as useId } from '../useId-3a1facc0.js';
|
|
11
|
+
import { R as RawClickable } from '../RawClickable-2c2b6a89.js';
|
|
12
|
+
import { Theme, Emphasis, Size } from '@lumx/core/js/constants';
|
|
13
|
+
import { Icon } from './icon-ee15673b.js';
|
|
14
|
+
import { I as IconButton } from '../IconButton-8d61f5be.js';
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Component display name.
|
|
18
|
+
*/
|
|
19
|
+
const COMPONENT_NAME$1 = 'SideNavigation';
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Component default class name and class prefix.
|
|
23
|
+
*/
|
|
24
|
+
const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* SideNavigation component.
|
|
28
|
+
*
|
|
29
|
+
* @param props Component props.
|
|
30
|
+
* @param ref Component ref.
|
|
31
|
+
* @return React element.
|
|
32
|
+
*/
|
|
33
|
+
const SideNavigation = forwardRef((props, ref) => {
|
|
34
|
+
const defaultTheme = useTheme();
|
|
35
|
+
const {
|
|
36
|
+
children,
|
|
37
|
+
className,
|
|
38
|
+
theme = defaultTheme,
|
|
39
|
+
...forwardedProps
|
|
40
|
+
} = props;
|
|
41
|
+
const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
|
|
42
|
+
return /*#__PURE__*/jsx("ul", {
|
|
43
|
+
ref: ref,
|
|
44
|
+
...forwardedProps,
|
|
45
|
+
className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$1),
|
|
46
|
+
children: content
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
SideNavigation.displayName = COMPONENT_NAME$1;
|
|
50
|
+
SideNavigation.className = CLASSNAME$1;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Component display name.
|
|
54
|
+
*/
|
|
55
|
+
const COMPONENT_NAME = 'SideNavigationItem';
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Component default class name and class prefix.
|
|
59
|
+
*/
|
|
60
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
61
|
+
|
|
62
|
+
/**
|
|
63
|
+
* Component default props.
|
|
64
|
+
*/
|
|
65
|
+
const DEFAULT_PROPS = {
|
|
66
|
+
emphasis: Emphasis.high,
|
|
67
|
+
closeMode: 'unmount'
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* SideNavigationItem component.
|
|
72
|
+
*
|
|
73
|
+
* @param props Component props.
|
|
74
|
+
* @param ref Component ref.
|
|
75
|
+
* @return React element.
|
|
76
|
+
*/
|
|
77
|
+
const SideNavigationItem = forwardRef((props, ref) => {
|
|
78
|
+
const {
|
|
79
|
+
children,
|
|
80
|
+
className,
|
|
81
|
+
emphasis = DEFAULT_PROPS.emphasis,
|
|
82
|
+
icon,
|
|
83
|
+
isOpen,
|
|
84
|
+
isSelected,
|
|
85
|
+
label,
|
|
86
|
+
linkAs,
|
|
87
|
+
linkProps,
|
|
88
|
+
onActionClick,
|
|
89
|
+
onClick,
|
|
90
|
+
toggleButtonProps,
|
|
91
|
+
closeMode = DEFAULT_PROPS.closeMode,
|
|
92
|
+
...forwardedProps
|
|
93
|
+
} = props;
|
|
94
|
+
const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
|
|
95
|
+
const hasContent = Boolean(content);
|
|
96
|
+
const shouldSplitActions = Boolean(onActionClick);
|
|
97
|
+
const showChildren = hasContent && isOpen;
|
|
98
|
+
const contentId = useId();
|
|
99
|
+
const ariaProps = {};
|
|
100
|
+
if (hasContent) {
|
|
101
|
+
ariaProps['aria-expanded'] = !!showChildren;
|
|
102
|
+
// Associate with content ID only if in DOM (shown or hidden and not unmounted)
|
|
103
|
+
ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
|
|
104
|
+
}
|
|
105
|
+
return /*#__PURE__*/jsxs("li", {
|
|
106
|
+
ref: ref,
|
|
107
|
+
...forwardedProps,
|
|
108
|
+
className: classNames(className, handleBasicClasses({
|
|
109
|
+
emphasis,
|
|
110
|
+
isOpen: showChildren,
|
|
111
|
+
isSelected,
|
|
112
|
+
prefix: CLASSNAME
|
|
113
|
+
})),
|
|
114
|
+
children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
|
|
115
|
+
className: `${CLASSNAME}__wrapper`,
|
|
116
|
+
children: [/*#__PURE__*/jsxs(RawClickable, {
|
|
117
|
+
as: linkAs || (linkProps?.href ? 'a' : 'button'),
|
|
118
|
+
...linkProps,
|
|
119
|
+
className: `${CLASSNAME}__link`,
|
|
120
|
+
onClick: onClick,
|
|
121
|
+
children: [icon && /*#__PURE__*/jsx(Icon, {
|
|
122
|
+
className: `${CLASSNAME}__icon`,
|
|
123
|
+
icon: icon,
|
|
124
|
+
size: Size.xs
|
|
125
|
+
}), /*#__PURE__*/jsx("span", {
|
|
126
|
+
children: label
|
|
127
|
+
})]
|
|
128
|
+
}), /*#__PURE__*/jsx(IconButton, {
|
|
129
|
+
...toggleButtonProps,
|
|
130
|
+
className: `${CLASSNAME}__toggle`,
|
|
131
|
+
icon: isOpen ? mdiChevronUp : mdiChevronDown,
|
|
132
|
+
size: Size.m,
|
|
133
|
+
emphasis: Emphasis.low,
|
|
134
|
+
onClick: onActionClick,
|
|
135
|
+
...ariaProps
|
|
136
|
+
})]
|
|
137
|
+
}) : /*#__PURE__*/jsxs(RawClickable, {
|
|
138
|
+
as: linkAs || (linkProps?.href ? 'a' : 'button'),
|
|
139
|
+
...linkProps,
|
|
140
|
+
className: `${CLASSNAME}__link`,
|
|
141
|
+
onClick: onClick,
|
|
142
|
+
...ariaProps,
|
|
143
|
+
children: [icon && /*#__PURE__*/jsx(Icon, {
|
|
144
|
+
className: `${CLASSNAME}__icon`,
|
|
145
|
+
icon: icon,
|
|
146
|
+
size: Size.xs
|
|
147
|
+
}), /*#__PURE__*/jsx("span", {
|
|
148
|
+
children: label
|
|
149
|
+
}), hasContent && /*#__PURE__*/jsx(Icon, {
|
|
150
|
+
className: `${CLASSNAME}__chevron`,
|
|
151
|
+
icon: isOpen ? mdiChevronUp : mdiChevronDown,
|
|
152
|
+
size: Size.xs
|
|
153
|
+
})]
|
|
154
|
+
}), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
|
|
155
|
+
className: `${CLASSNAME}__children`,
|
|
156
|
+
id: contentId,
|
|
157
|
+
children: content
|
|
158
|
+
})]
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
SideNavigationItem.displayName = COMPONENT_NAME;
|
|
162
|
+
SideNavigationItem.className = CLASSNAME;
|
|
163
|
+
SideNavigationItem.defaultProps = DEFAULT_PROPS;
|
|
164
|
+
|
|
165
|
+
export { SideNavigation, SideNavigationItem };
|
|
166
|
+
//# sourceMappingURL=side-navigation-c610c689.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-navigation-c610c689.js","sources":["../../../src/components/side-navigation/SideNavigation.tsx","../../../src/components/side-navigation/SideNavigationItem.tsx"],"sourcesContent":["import { Children, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { SideNavigationItem, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, isComponent } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationProps extends GenericProps, HasTheme {\n /** SideNavigationItem elements. */\n children: ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigation';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SideNavigation component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const SideNavigation = forwardRef<SideNavigationProps, HTMLUListElement>((props, ref) => {\n const defaultTheme = useTheme();\n const { children, className, theme = defaultTheme, ...forwardedProps } = props;\n const content = Children.toArray(children).filter(isComponent(SideNavigationItem));\n\n return (\n <ul\n ref={ref}\n {...forwardedProps}\n className={classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME)}\n >\n {content}\n </ul>\n );\n});\nSideNavigation.displayName = COMPONENT_NAME;\nSideNavigation.className = CLASSNAME;\n","import { Children, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiChevronDown } from '@lumx/icons/esm/chevron-down';\nimport { mdiChevronUp } from '@lumx/icons/esm/chevron-up';\nimport { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';\nimport { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { RawClickable } from '@lumx/react/utils/react/RawClickable';\n\n/**\n * Defines the props of the component.\n */\nexport interface SideNavigationItemProps extends GenericProps, HasCloseMode {\n /** SideNavigationItem elements. */\n children?: ReactNode;\n /** Emphasis variant. */\n emphasis?: Emphasis;\n /** Label content. */\n label: string | ReactNode;\n /** Icon (SVG path). */\n icon?: string;\n /** Whether the component is open or not. */\n isOpen?: boolean;\n /** Whether the component is selected or not. */\n isSelected?: boolean;\n /** Custom react component for the link (can be used to inject react router Link). */\n linkAs?: 'a' | any;\n /** Props to pass to the link (minus those already set by the SideNavigationItem props). */\n linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */\n toggleButtonProps: Pick<IconButtonProps, 'label'> &\n Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;\n /** On action button click callback. */\n onActionClick?(evt: React.MouseEvent): void;\n /** On click callback. */\n onClick?(evt: React.MouseEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SideNavigationItem';\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<SideNavigationItemProps> = {\n emphasis: Emphasis.high,\n closeMode: 'unmount',\n};\n\n/**\n * SideNavigationItem component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElement>((props, ref) => {\n const {\n children,\n className,\n emphasis = DEFAULT_PROPS.emphasis,\n icon,\n isOpen,\n isSelected,\n label,\n linkAs,\n linkProps,\n onActionClick,\n onClick,\n toggleButtonProps,\n closeMode = DEFAULT_PROPS.closeMode,\n ...forwardedProps\n } = props;\n\n const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));\n const hasContent = Boolean(content);\n const shouldSplitActions = Boolean(onActionClick);\n const showChildren = hasContent && isOpen;\n\n const contentId = useId();\n const ariaProps: any = {};\n if (hasContent) {\n ariaProps['aria-expanded'] = !!showChildren;\n // Associate with content ID only if in DOM (shown or hidden and not unmounted)\n ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;\n }\n\n return (\n <li\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n emphasis,\n isOpen: showChildren,\n isSelected,\n prefix: CLASSNAME,\n }),\n )}\n >\n {shouldSplitActions ? (\n <div className={`${CLASSNAME}__wrapper`}>\n <RawClickable\n as={linkAs || (linkProps?.href ? 'a' : 'button')}\n {...(linkProps as any)}\n className={`${CLASSNAME}__link`}\n onClick={onClick}\n >\n {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}\n <span>{label}</span>\n </RawClickable>\n\n <IconButton\n {...toggleButtonProps}\n className={`${CLASSNAME}__toggle`}\n icon={isOpen ? mdiChevronUp : mdiChevronDown}\n size={Size.m}\n emphasis={Emphasis.low}\n onClick={onActionClick}\n {...ariaProps}\n />\n </div>\n ) : (\n <RawClickable\n as={linkAs || (linkProps?.href ? 'a' : 'button')}\n {...linkProps}\n className={`${CLASSNAME}__link`}\n onClick={onClick}\n {...ariaProps}\n >\n {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}\n <span>{label}</span>\n {hasContent && (\n <Icon\n className={`${CLASSNAME}__chevron`}\n icon={isOpen ? mdiChevronUp : mdiChevronDown}\n size={Size.xs}\n />\n )}\n </RawClickable>\n )}\n\n {(closeMode === 'hide' || showChildren) && (\n <ul className={`${CLASSNAME}__children`} id={contentId}>\n {content}\n </ul>\n )}\n </li>\n );\n});\nSideNavigationItem.displayName = COMPONENT_NAME;\nSideNavigationItem.className = CLASSNAME;\nSideNavigationItem.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","SideNavigation","forwardRef","props","ref","defaultTheme","useTheme","children","className","theme","forwardedProps","content","Children","toArray","filter","isComponent","SideNavigationItem","_jsx","classNames","Theme","dark","displayName","DEFAULT_PROPS","emphasis","Emphasis","high","closeMode","icon","isOpen","isSelected","label","linkAs","linkProps","onActionClick","onClick","toggleButtonProps","hasContent","Boolean","shouldSplitActions","showChildren","contentId","useId","ariaProps","undefined","_jsxs","handleBasicClasses","prefix","RawClickable","as","href","Icon","size","Size","xs","IconButton","mdiChevronUp","mdiChevronDown","m","low","id","defaultProps"],"mappings":"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"}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
+
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
4
|
+
import { f as forwardRef } from '../forwardRef-8bce732e.js';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
import { Theme } from '@lumx/core/js/constants';
|
|
7
|
+
|
|
8
|
+
const DEFAULT_PROPS$2 = {};
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Component display name.
|
|
12
|
+
*/
|
|
13
|
+
const COMPONENT_NAME$2 = 'SkeletonCircle';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Component default class name and class prefix.
|
|
17
|
+
*/
|
|
18
|
+
const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* SkeletonCircle component.
|
|
22
|
+
*
|
|
23
|
+
* @param props Component props.
|
|
24
|
+
* @param ref Component ref.
|
|
25
|
+
* @return React element.
|
|
26
|
+
*/
|
|
27
|
+
const SkeletonCircle = forwardRef((props, ref) => {
|
|
28
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
29
|
+
const {
|
|
30
|
+
className,
|
|
31
|
+
size,
|
|
32
|
+
color,
|
|
33
|
+
theme = defaultTheme,
|
|
34
|
+
...forwardedProps
|
|
35
|
+
} = props;
|
|
36
|
+
return /*#__PURE__*/jsx("div", {
|
|
37
|
+
ref: ref,
|
|
38
|
+
...forwardedProps,
|
|
39
|
+
className: classNames(className, handleBasicClasses({
|
|
40
|
+
prefix: CLASSNAME$2,
|
|
41
|
+
size,
|
|
42
|
+
color,
|
|
43
|
+
theme
|
|
44
|
+
}))
|
|
45
|
+
});
|
|
46
|
+
});
|
|
47
|
+
SkeletonCircle.displayName = COMPONENT_NAME$2;
|
|
48
|
+
SkeletonCircle.defaultProps = DEFAULT_PROPS$2;
|
|
49
|
+
SkeletonCircle.className = CLASSNAME$2;
|
|
50
|
+
|
|
51
|
+
const SkeletonRectangleVariant = {
|
|
52
|
+
squared: 'squared',
|
|
53
|
+
rounded: 'rounded',
|
|
54
|
+
pill: 'pill'
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Defines the props of the component.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
const DEFAULT_PROPS$1 = {
|
|
62
|
+
variant: SkeletonRectangleVariant.squared
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Component display name.
|
|
67
|
+
*/
|
|
68
|
+
const COMPONENT_NAME$1 = 'SkeletonRectangle';
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Component default class name and class prefix.
|
|
72
|
+
*/
|
|
73
|
+
const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* SkeletonRectangle component.
|
|
77
|
+
*
|
|
78
|
+
* @param props Component props.
|
|
79
|
+
* @param ref Component ref.
|
|
80
|
+
* @return React element.
|
|
81
|
+
*/
|
|
82
|
+
const SkeletonRectangle = forwardRef((props, ref) => {
|
|
83
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
84
|
+
const {
|
|
85
|
+
aspectRatio,
|
|
86
|
+
className,
|
|
87
|
+
height,
|
|
88
|
+
theme = defaultTheme,
|
|
89
|
+
variant = DEFAULT_PROPS$1.variant,
|
|
90
|
+
width,
|
|
91
|
+
color,
|
|
92
|
+
...forwardedProps
|
|
93
|
+
} = props;
|
|
94
|
+
return /*#__PURE__*/jsx("div", {
|
|
95
|
+
ref: ref,
|
|
96
|
+
...forwardedProps,
|
|
97
|
+
className: classNames(className, handleBasicClasses({
|
|
98
|
+
prefix: CLASSNAME$1,
|
|
99
|
+
aspectRatio,
|
|
100
|
+
height: aspectRatio ? undefined : height,
|
|
101
|
+
theme,
|
|
102
|
+
variant,
|
|
103
|
+
width,
|
|
104
|
+
color
|
|
105
|
+
})),
|
|
106
|
+
children: /*#__PURE__*/jsx("div", {
|
|
107
|
+
className: `${CLASSNAME$1}__inner`
|
|
108
|
+
})
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
SkeletonRectangle.displayName = COMPONENT_NAME$1;
|
|
112
|
+
SkeletonRectangle.className = CLASSNAME$1;
|
|
113
|
+
SkeletonRectangle.defaultProps = DEFAULT_PROPS$1;
|
|
114
|
+
|
|
115
|
+
const DEFAULT_PROPS = {};
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Component display name.
|
|
119
|
+
*/
|
|
120
|
+
const COMPONENT_NAME = 'SkeletonTypography';
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Component default class name and class prefix.
|
|
124
|
+
*/
|
|
125
|
+
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* SkeletonTypography component.
|
|
129
|
+
*
|
|
130
|
+
* @param props Component props.
|
|
131
|
+
* @param ref Component ref.
|
|
132
|
+
* @return React element.
|
|
133
|
+
*/
|
|
134
|
+
const SkeletonTypography = forwardRef((props, ref) => {
|
|
135
|
+
const defaultTheme = useTheme() || Theme.light;
|
|
136
|
+
const {
|
|
137
|
+
className,
|
|
138
|
+
theme = defaultTheme,
|
|
139
|
+
typography,
|
|
140
|
+
width,
|
|
141
|
+
color,
|
|
142
|
+
...forwardedProps
|
|
143
|
+
} = props;
|
|
144
|
+
return /*#__PURE__*/jsx("div", {
|
|
145
|
+
ref: ref,
|
|
146
|
+
...forwardedProps,
|
|
147
|
+
className: classNames(className, handleBasicClasses({
|
|
148
|
+
prefix: CLASSNAME,
|
|
149
|
+
theme,
|
|
150
|
+
typography,
|
|
151
|
+
color
|
|
152
|
+
})),
|
|
153
|
+
style: {
|
|
154
|
+
...forwardedProps.style,
|
|
155
|
+
width
|
|
156
|
+
},
|
|
157
|
+
children: /*#__PURE__*/jsx("div", {
|
|
158
|
+
className: `${CLASSNAME}__inner`
|
|
159
|
+
})
|
|
160
|
+
});
|
|
161
|
+
});
|
|
162
|
+
SkeletonTypography.displayName = COMPONENT_NAME;
|
|
163
|
+
SkeletonTypography.defaultProps = DEFAULT_PROPS;
|
|
164
|
+
SkeletonTypography.className = CLASSNAME;
|
|
165
|
+
|
|
166
|
+
export { SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography };
|
|
167
|
+
//# sourceMappingURL=skeleton-1ea8c82a.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"skeleton-1ea8c82a.js","sources":["../../../src/components/skeleton/SkeletonCircle.tsx","../../../src/components/skeleton/SkeletonRectangle.tsx","../../../src/components/skeleton/SkeletonTypography.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonCircleProps extends GenericProps, HasTheme {\n /** Size variant. */\n size: GlobalSize;\n /** The color of the skeleton. */\n color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonCircle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonCircle component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}\n />\n );\n});\nSkeletonCircle.displayName = COMPONENT_NAME;\nSkeletonCircle.defaultProps = DEFAULT_PROPS;\nSkeletonCircle.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Skeleton variants.\n */\nexport const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;\nexport type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonRectangleProps extends GenericProps, HasTheme {\n /** Aspect ratio (use with width and not height). */\n aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;\n /** Height size. */\n height?: GlobalSize;\n /** Border variant. */\n variant?: SkeletonRectangleVariant;\n /** Width size. */\n width?: GlobalSize;\n /** The color of the skeleton. */\n color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {\n variant: SkeletonRectangleVariant.squared,\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonRectangle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonRectangle component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const {\n aspectRatio,\n className,\n height,\n theme = defaultTheme,\n variant = DEFAULT_PROPS.variant,\n width,\n color,\n ...forwardedProps\n } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n aspectRatio,\n height: aspectRatio ? undefined : height,\n theme,\n variant,\n width,\n color,\n }),\n )}\n >\n <div className={`${CLASSNAME}__inner`} />\n </div>\n );\n});\nSkeletonRectangle.displayName = COMPONENT_NAME;\nSkeletonRectangle.className = CLASSNAME;\nSkeletonRectangle.defaultProps = DEFAULT_PROPS;\n","import { CSSProperties } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, TypographyInterface, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonTypographyProps extends GenericProps, HasTheme {\n /** Typography variant. */\n typography: TypographyInterface;\n /** Width CSS property. */\n width?: CSSProperties['width'];\n /** The color of the skeleton. */\n color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonTypography';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonTypography component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {\n const defaultTheme = useTheme() || Theme.light;\n const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}\n style={{ ...forwardedProps.style, width }}\n >\n <div className={`${CLASSNAME}__inner`} />\n </div>\n );\n});\nSkeletonTypography.displayName = COMPONENT_NAME;\nSkeletonTypography.defaultProps = DEFAULT_PROPS;\nSkeletonTypography.className = CLASSNAME;\n"],"names":["DEFAULT_PROPS","COMPONENT_NAME","CLASSNAME","getRootClassName","SkeletonCircle","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","size","color","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps","SkeletonRectangleVariant","squared","rounded","pill","variant","SkeletonRectangle","aspectRatio","height","width","undefined","children","SkeletonTypography","typography","style"],"mappings":"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"}
|