@lumx/react 3.20.1-alpha.13 → 3.20.1-alpha.14
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/Falsy.d.ts +7 -0
- package/_internal/index.js +236 -0
- package/_internal/index.js.map +1 -0
- package/index.d.ts +352 -7
- package/index.js +14486 -65
- package/index.js.map +1 -1
- package/package.json +11 -3
- package/src/components/alert-dialog/AlertDialog.stories.tsx +127 -0
- package/src/components/alert-dialog/AlertDialog.test.tsx +34 -0
- package/src/components/alert-dialog/AlertDialog.tsx +189 -0
- package/src/components/alert-dialog/index.ts +1 -0
- package/src/components/autocomplete/Autocomplete.stories.tsx +75 -0
- package/src/components/autocomplete/Autocomplete.test.tsx +99 -0
- package/src/components/autocomplete/Autocomplete.tsx +294 -0
- package/src/components/autocomplete/AutocompleteMultiple.stories.tsx +167 -0
- package/src/components/autocomplete/AutocompleteMultiple.test.tsx +61 -0
- package/src/components/autocomplete/AutocompleteMultiple.tsx +156 -0
- package/src/components/autocomplete/__mockData__/index.ts +39 -0
- package/src/components/autocomplete/index.ts +2 -0
- package/src/components/avatar/Avatar.stories.tsx +119 -0
- package/src/components/avatar/Avatar.test.tsx +32 -0
- package/src/components/avatar/Avatar.tsx +114 -0
- package/src/components/avatar/index.ts +1 -0
- package/src/components/badge/Badge.stories.tsx +69 -0
- package/src/components/badge/Badge.test.tsx +45 -0
- package/src/components/badge/Badge.tsx +58 -0
- package/src/components/badge/BadgeWrapper.stories.tsx +75 -0
- package/src/components/badge/BadgeWrapper.test.tsx +47 -0
- package/src/components/badge/BadgeWrapper.tsx +37 -0
- package/src/components/badge/index.ts +2 -0
- package/src/components/button/Button.stories.tsx +355 -0
- package/src/components/button/Button.test.tsx +125 -0
- package/src/components/button/Button.tsx +101 -0
- package/src/components/button/ButtonGroup.stories.tsx +52 -0
- package/src/components/button/ButtonGroup.test.tsx +41 -0
- package/src/components/button/ButtonGroup.tsx +50 -0
- package/src/components/button/ButtonRoot.tsx +163 -0
- package/src/components/button/IconButton.stories.tsx +52 -0
- package/src/components/button/IconButton.test.tsx +66 -0
- package/src/components/button/IconButton.tsx +91 -0
- package/src/components/button/index.ts +4 -0
- package/src/components/checkbox/Checkbox.stories.tsx +64 -0
- package/src/components/checkbox/Checkbox.test.tsx +154 -0
- package/src/components/checkbox/Checkbox.tsx +164 -0
- package/src/components/checkbox/index.ts +1 -0
- package/src/components/chip/Chip.stories.tsx +164 -0
- package/src/components/chip/Chip.test.tsx +243 -0
- package/src/components/chip/Chip.tsx +168 -0
- package/src/components/chip/ChipGroup.stories.tsx +47 -0
- package/src/components/chip/ChipGroup.test.tsx +37 -0
- package/src/components/chip/ChipGroup.tsx +60 -0
- package/src/components/chip/index.ts +2 -0
- package/src/components/comment-block/CommentBlock.stories.tsx +91 -0
- package/src/components/comment-block/CommentBlock.test.tsx +28 -0
- package/src/components/comment-block/CommentBlock.tsx +172 -0
- package/src/components/comment-block/index.ts +1 -0
- package/src/components/date-picker/DatePicker.stories.tsx +118 -0
- package/src/components/date-picker/DatePicker.test.tsx +34 -0
- package/src/components/date-picker/DatePicker.tsx +52 -0
- package/src/components/date-picker/DatePickerControlled.test.tsx +91 -0
- package/src/components/date-picker/DatePickerControlled.tsx +259 -0
- package/src/components/date-picker/DatePickerField.stories.tsx +100 -0
- package/src/components/date-picker/DatePickerField.test.tsx +70 -0
- package/src/components/date-picker/DatePickerField.tsx +135 -0
- package/src/components/date-picker/constants.ts +11 -0
- package/src/components/date-picker/index.ts +4 -0
- package/src/components/date-picker/types.ts +28 -0
- package/src/components/dialog/Dialog.stories.tsx +318 -0
- package/src/components/dialog/Dialog.test.tsx +97 -0
- package/src/components/dialog/Dialog.tsx +288 -0
- package/src/components/dialog/index.ts +1 -0
- package/src/components/divider/Divider.test.tsx +51 -0
- package/src/components/divider/Divider.tsx +50 -0
- package/src/components/divider/index.ts +1 -0
- package/src/components/drag-handle/DragHandle.test.tsx +36 -0
- package/src/components/drag-handle/DragHandle.tsx +51 -0
- package/src/components/drag-handle/index.ts +1 -0
- package/src/components/dropdown/Dropdown.stories.tsx +31 -0
- package/src/components/dropdown/Dropdown.test.tsx +66 -0
- package/src/components/dropdown/Dropdown.tsx +186 -0
- package/src/components/dropdown/index.ts +1 -0
- package/src/components/expansion-panel/ExpansionPanel.stories.tsx +91 -0
- package/src/components/expansion-panel/ExpansionPanel.test.tsx +185 -0
- package/src/components/expansion-panel/ExpansionPanel.tsx +195 -0
- package/src/components/expansion-panel/index.ts +1 -0
- package/src/components/flag/Flag.stories.tsx +48 -0
- package/src/components/flag/Flag.test.tsx +62 -0
- package/src/components/flag/Flag.tsx +52 -0
- package/src/components/flag/index.ts +1 -0
- package/src/components/flex-box/FlexBox.stories.tsx +156 -0
- package/src/components/flex-box/FlexBox.test.tsx +24 -0
- package/src/components/flex-box/FlexBox.tsx +100 -0
- package/src/components/flex-box/index.ts +1 -0
- package/src/components/generic-block/GenericBlock.stories.jsx +128 -0
- package/src/components/generic-block/GenericBlock.test.tsx +156 -0
- package/src/components/generic-block/GenericBlock.tsx +225 -0
- package/src/components/generic-block/constants.ts +9 -0
- package/src/components/generic-block/index.ts +2 -0
- package/src/components/grid/Grid.tsx +83 -0
- package/src/components/grid/GridItem.tsx +55 -0
- package/src/components/grid/index.ts +2 -0
- package/src/components/grid-column/GridColumn.stories.tsx +45 -0
- package/src/components/grid-column/GridColumn.test.jsx +56 -0
- package/src/components/grid-column/GridColumn.tsx +83 -0
- package/src/components/grid-column/index.ts +1 -0
- package/src/components/heading/Heading.stories.tsx +69 -0
- package/src/components/heading/Heading.test.tsx +82 -0
- package/src/components/heading/Heading.tsx +65 -0
- package/src/components/heading/HeadingLevelProvider.tsx +30 -0
- package/src/components/heading/constants.ts +16 -0
- package/src/components/heading/context.tsx +13 -0
- package/src/components/heading/index.ts +3 -0
- package/src/components/heading/useHeadingLevel.tsx +8 -0
- package/src/components/icon/Icon.stories.tsx +73 -0
- package/src/components/icon/Icon.test.tsx +125 -0
- package/src/components/icon/Icon.tsx +133 -0
- package/src/components/icon/index.ts +1 -0
- package/src/components/image-block/ImageBlock.stories.tsx +117 -0
- package/src/components/image-block/ImageBlock.test.tsx +58 -0
- package/src/components/image-block/ImageBlock.tsx +142 -0
- package/src/components/image-block/ImageCaption.tsx +115 -0
- package/src/components/image-block/index.ts +1 -0
- package/src/components/image-lightbox/ImageLightbox.stories.tsx +160 -0
- package/src/components/image-lightbox/ImageLightbox.test.tsx +254 -0
- package/src/components/image-lightbox/ImageLightbox.tsx +90 -0
- package/src/components/image-lightbox/constants.ts +11 -0
- package/src/components/image-lightbox/index.ts +2 -0
- package/src/components/image-lightbox/internal/ImageSlide.tsx +107 -0
- package/src/components/image-lightbox/internal/ImageSlideshow.tsx +164 -0
- package/src/components/image-lightbox/internal/useAnimateScroll.ts +55 -0
- package/src/components/image-lightbox/internal/usePointerZoom.ts +148 -0
- package/src/components/image-lightbox/types.ts +48 -0
- package/src/components/image-lightbox/useImageLightbox.tsx +141 -0
- package/src/components/inline-list/InlineList.stories.tsx +77 -0
- package/src/components/inline-list/InlineList.test.tsx +52 -0
- package/src/components/inline-list/InlineList.tsx +96 -0
- package/src/components/inline-list/index.ts +1 -0
- package/src/components/input-helper/InputHelper.stories.tsx +35 -0
- package/src/components/input-helper/InputHelper.test.tsx +55 -0
- package/src/components/input-helper/InputHelper.tsx +65 -0
- package/src/components/input-helper/constants.ts +11 -0
- package/src/components/input-helper/index.ts +1 -0
- package/src/components/input-label/InputLabel.stories.tsx +45 -0
- package/src/components/input-label/InputLabel.test.tsx +59 -0
- package/src/components/input-label/InputLabel.tsx +69 -0
- package/src/components/input-label/index.ts +1 -0
- package/src/components/lightbox/Lightbox.stories.tsx +101 -0
- package/src/components/lightbox/Lightbox.test.tsx +53 -0
- package/src/components/lightbox/Lightbox.tsx +180 -0
- package/src/components/lightbox/index.ts +1 -0
- package/src/components/link/Link.stories.tsx +195 -0
- package/src/components/link/Link.test.tsx +127 -0
- package/src/components/link/Link.tsx +106 -0
- package/src/components/link/index.ts +1 -0
- package/src/components/link-preview/LinkPreview.stories.tsx +61 -0
- package/src/components/link-preview/LinkPreview.test.tsx +105 -0
- package/src/components/link-preview/LinkPreview.tsx +158 -0
- package/src/components/link-preview/index.ts +1 -0
- package/src/components/list/List.stories.tsx +116 -0
- package/src/components/list/List.test.tsx +18 -0
- package/src/components/list/List.tsx +104 -0
- package/src/components/list/ListDivider.stories.tsx +12 -0
- package/src/components/list/ListDivider.test.tsx +22 -0
- package/src/components/list/ListDivider.tsx +35 -0
- package/src/components/list/ListItem.stories.tsx +66 -0
- package/src/components/list/ListItem.test.tsx +93 -0
- package/src/components/list/ListItem.tsx +157 -0
- package/src/components/list/ListSubheader.stories.tsx +11 -0
- package/src/components/list/ListSubheader.test.tsx +21 -0
- package/src/components/list/ListSubheader.tsx +44 -0
- package/src/components/list/index.ts +4 -0
- package/src/components/list/useInteractiveList.tsx +202 -0
- package/src/components/message/Message.stories.tsx +72 -0
- package/src/components/message/Message.test.tsx +76 -0
- package/src/components/message/Message.tsx +100 -0
- package/src/components/message/index.ts +1 -0
- package/src/components/mosaic/Mosaic.stories.tsx +89 -0
- package/src/components/mosaic/Mosaic.test.tsx +77 -0
- package/src/components/mosaic/Mosaic.tsx +98 -0
- package/src/components/mosaic/index.ts +1 -0
- package/src/components/navigation/Navigation.stories.tsx +234 -0
- package/src/components/navigation/Navigation.test.tsx +65 -0
- package/src/components/navigation/Navigation.tsx +79 -0
- package/src/components/navigation/NavigationItem.test.tsx +35 -0
- package/src/components/navigation/NavigationItem.tsx +82 -0
- package/src/components/navigation/NavigationSection.test.tsx +137 -0
- package/src/components/navigation/NavigationSection.tsx +108 -0
- package/src/components/navigation/context.tsx +7 -0
- package/src/components/navigation/index.ts +1 -0
- package/src/components/notification/Notification.test.tsx +94 -0
- package/src/components/notification/Notification.tsx +138 -0
- package/src/components/notification/Notifications.stories.tsx +92 -0
- package/src/components/notification/constants.ts +28 -0
- package/src/components/notification/index.ts +1 -0
- package/src/components/popover/Popover.stories.tsx +264 -0
- package/src/components/popover/Popover.test.tsx +62 -0
- package/src/components/popover/Popover.tsx +201 -0
- package/src/components/popover/constants.ts +62 -0
- package/src/components/popover/index.ts +3 -0
- package/src/components/popover/usePopoverStyle.tsx +184 -0
- package/src/components/popover/useRestoreFocusOnClose.tsx +47 -0
- package/src/components/popover-dialog/PopoverDialog.stories.tsx +64 -0
- package/src/components/popover-dialog/PopoverDialog.test.tsx +139 -0
- package/src/components/popover-dialog/PopoverDialog.tsx +74 -0
- package/src/components/popover-dialog/index.tsx +1 -0
- package/src/components/post-block/PostBlock.test.tsx +27 -0
- package/src/components/post-block/PostBlock.tsx +122 -0
- package/src/components/post-block/index.ts +1 -0
- package/src/components/progress/Progress.tsx +68 -0
- package/src/components/progress/ProgressCircular.stories.tsx +43 -0
- package/src/components/progress/ProgressCircular.test.tsx +46 -0
- package/src/components/progress/ProgressCircular.tsx +82 -0
- package/src/components/progress/ProgressLinear.stories.tsx +12 -0
- package/src/components/progress/ProgressLinear.test.tsx +30 -0
- package/src/components/progress/ProgressLinear.tsx +50 -0
- package/src/components/progress/index.ts +3 -0
- package/src/components/progress-tracker/ProgressTracker.stories.tsx +145 -0
- package/src/components/progress-tracker/ProgressTracker.test.tsx +42 -0
- package/src/components/progress-tracker/ProgressTracker.tsx +87 -0
- package/src/components/progress-tracker/ProgressTrackerProvider.test.tsx +65 -0
- package/src/components/progress-tracker/ProgressTrackerProvider.tsx +67 -0
- package/src/components/progress-tracker/ProgressTrackerStep.test.tsx +36 -0
- package/src/components/progress-tracker/ProgressTrackerStep.tsx +159 -0
- package/src/components/progress-tracker/ProgressTrackerStepPanel.test.tsx +34 -0
- package/src/components/progress-tracker/ProgressTrackerStepPanel.tsx +67 -0
- package/src/components/progress-tracker/index.ts +4 -0
- package/src/components/radio-button/RadioButton.stories.tsx +71 -0
- package/src/components/radio-button/RadioButton.test.tsx +143 -0
- package/src/components/radio-button/RadioButton.tsx +143 -0
- package/src/components/radio-button/RadioGroup.stories.tsx +39 -0
- package/src/components/radio-button/RadioGroup.test.tsx +29 -0
- package/src/components/radio-button/RadioGroup.tsx +44 -0
- package/src/components/radio-button/index.ts +2 -0
- package/src/components/select/Select.stories.tsx +385 -0
- package/src/components/select/Select.test.tsx +199 -0
- package/src/components/select/Select.tsx +199 -0
- package/src/components/select/SelectMultiple.stories.tsx +315 -0
- package/src/components/select/SelectMultiple.test.tsx +213 -0
- package/src/components/select/SelectMultiple.tsx +206 -0
- package/src/components/select/WithSelectContext.tsx +147 -0
- package/src/components/select/constants.ts +55 -0
- package/src/components/select/index.ts +2 -0
- package/src/components/side-navigation/SideNavigation.stories.tsx +191 -0
- package/src/components/side-navigation/SideNavigation.test.tsx +37 -0
- package/src/components/side-navigation/SideNavigation.tsx +52 -0
- package/src/components/side-navigation/SideNavigationItem.stories.tsx +133 -0
- package/src/components/side-navigation/SideNavigationItem.test.tsx +136 -0
- package/src/components/side-navigation/SideNavigationItem.tsx +165 -0
- package/src/components/side-navigation/index.ts +2 -0
- package/src/components/skeleton/SkeletonCircle.stories.tsx +41 -0
- package/src/components/skeleton/SkeletonCircle.test.tsx +27 -0
- package/src/components/skeleton/SkeletonCircle.tsx +52 -0
- package/src/components/skeleton/SkeletonRectangle.stories.tsx +82 -0
- package/src/components/skeleton/SkeletonRectangle.test.tsx +27 -0
- package/src/components/skeleton/SkeletonRectangle.tsx +88 -0
- package/src/components/skeleton/SkeletonTypography.stories.tsx +19 -0
- package/src/components/skeleton/SkeletonTypography.test.tsx +27 -0
- package/src/components/skeleton/SkeletonTypography.tsx +59 -0
- package/src/components/skeleton/index.ts +3 -0
- package/src/components/slider/Slider.stories.tsx +45 -0
- package/src/components/slider/Slider.test.tsx +29 -0
- package/src/components/slider/Slider.tsx +299 -0
- package/src/components/slider/index.ts +2 -0
- package/src/components/slideshow/Slides.tsx +130 -0
- package/src/components/slideshow/Slideshow.stories.tsx +179 -0
- package/src/components/slideshow/Slideshow.test.tsx +35 -0
- package/src/components/slideshow/Slideshow.tsx +173 -0
- package/src/components/slideshow/SlideshowControls.stories.tsx +100 -0
- package/src/components/slideshow/SlideshowControls.tsx +243 -0
- package/src/components/slideshow/SlideshowItem.tsx +44 -0
- package/src/components/slideshow/SlideshowItemGroup.tsx +60 -0
- package/src/components/slideshow/constants.ts +24 -0
- package/src/components/slideshow/index.ts +4 -0
- package/src/components/slideshow/useKeyNavigate.ts +28 -0
- package/src/components/slideshow/usePaginationVisibleRange.ts +37 -0
- package/src/components/slideshow/useSlideFocusManagement.tsx +92 -0
- package/src/components/slideshow/useSwipeNavigate.ts +18 -0
- package/src/components/switch/Switch.stories.tsx +49 -0
- package/src/components/switch/Switch.test.tsx +144 -0
- package/src/components/switch/Switch.tsx +145 -0
- package/src/components/switch/index.ts +1 -0
- package/src/components/table/Table.test.tsx +29 -0
- package/src/components/table/Table.tsx +59 -0
- package/src/components/table/TableBody.test.tsx +30 -0
- package/src/components/table/TableBody.tsx +42 -0
- package/src/components/table/TableCell.test.tsx +72 -0
- package/src/components/table/TableCell.tsx +130 -0
- package/src/components/table/TableHeader.test.tsx +30 -0
- package/src/components/table/TableHeader.tsx +48 -0
- package/src/components/table/TableRow.test.tsx +40 -0
- package/src/components/table/TableRow.tsx +71 -0
- package/src/components/table/index.ts +5 -0
- package/src/components/tabs/Tab.test.tsx +50 -0
- package/src/components/tabs/Tab.tsx +133 -0
- package/src/components/tabs/TabList.test.tsx +49 -0
- package/src/components/tabs/TabList.tsx +94 -0
- package/src/components/tabs/TabPanel.test.tsx +37 -0
- package/src/components/tabs/TabPanel.tsx +67 -0
- package/src/components/tabs/TabProvider.test.tsx +161 -0
- package/src/components/tabs/TabProvider.tsx +67 -0
- package/src/components/tabs/Tabs.stories.tsx +170 -0
- package/src/components/tabs/index.ts +4 -0
- package/src/components/tabs/state.ts +114 -0
- package/src/components/tabs/test-utils.ts +39 -0
- package/src/components/text/Text.stories.tsx +177 -0
- package/src/components/text/Text.test.tsx +92 -0
- package/src/components/text/Text.tsx +139 -0
- package/src/components/text/index.ts +1 -0
- package/src/components/text-field/TextField.stories.tsx +180 -0
- package/src/components/text-field/TextField.test.tsx +298 -0
- package/src/components/text-field/TextField.tsx +493 -0
- package/src/components/text-field/index.ts +1 -0
- package/src/components/thumbnail/Thumbnail.stories.tsx +448 -0
- package/src/components/thumbnail/Thumbnail.test.tsx +88 -0
- package/src/components/thumbnail/Thumbnail.tsx +248 -0
- package/src/components/thumbnail/index.ts +3 -0
- package/src/components/thumbnail/types.ts +48 -0
- package/src/components/thumbnail/useFocusPointStyle.test.ts +92 -0
- package/src/components/thumbnail/useFocusPointStyle.tsx +107 -0
- package/src/components/thumbnail/useImageLoad.ts +40 -0
- package/src/components/toolbar/Toolbar.tsx +68 -0
- package/src/components/toolbar/index.ts +1 -0
- package/src/components/tooltip/Tooltip.stories.tsx +118 -0
- package/src/components/tooltip/Tooltip.test.tsx +417 -0
- package/src/components/tooltip/Tooltip.tsx +165 -0
- package/src/components/tooltip/constants.ts +8 -0
- package/src/components/tooltip/context.tsx +17 -0
- package/src/components/tooltip/index.ts +1 -0
- package/src/components/tooltip/useInjectTooltipRef.tsx +55 -0
- package/src/components/tooltip/useTooltipOpen.tsx +143 -0
- package/src/components/uploader/Uploader.stories.tsx +109 -0
- package/src/components/uploader/Uploader.test.tsx +146 -0
- package/src/components/uploader/Uploader.tsx +177 -0
- package/src/components/uploader/index.ts +1 -0
- package/src/components/user-block/UserBlock.stories.tsx +133 -0
- package/src/components/user-block/UserBlock.test.tsx +106 -0
- package/src/components/user-block/UserBlock.tsx +193 -0
- package/src/components/user-block/index.ts +1 -0
- package/src/constants.ts +27 -0
- package/src/hooks/useBooleanState.tsx +13 -0
- package/src/hooks/useCallbackOnEscape.ts +34 -0
- package/src/hooks/useChipGroupNavigation.tsx +75 -0
- package/src/hooks/useClickAway.tsx +48 -0
- package/src/hooks/useDisableBodyScroll.ts +28 -0
- package/src/hooks/useEventCallback.tsx +17 -0
- package/src/hooks/useFocus.tsx +21 -0
- package/src/hooks/useFocusTrap.ts +93 -0
- package/src/hooks/useFocusWithin.ts +33 -0
- package/src/hooks/useId.test.tsx +22 -0
- package/src/hooks/useId.ts +15 -0
- package/src/hooks/useImageSize.ts +17 -0
- package/src/hooks/useInfiniteScroll.tsx +60 -0
- package/src/hooks/useIntersectionObserver.tsx +43 -0
- package/src/hooks/useInterval.tsx +31 -0
- package/src/hooks/useKeyboardListNavigation.tsx +204 -0
- package/src/hooks/useListenFocus.tsx +26 -0
- package/src/hooks/useOverflowTooltipLabel.tsx +32 -0
- package/src/hooks/usePopper.ts +12 -0
- package/src/hooks/usePreviousValue.ts +12 -0
- package/src/hooks/useRovingTabIndex.tsx +90 -0
- package/src/hooks/useSizeOnWindowResize.ts +30 -0
- package/src/hooks/useSlideshowControls.ts +246 -0
- package/src/hooks/useStopPropagation.ts +21 -0
- package/src/hooks/useTransitionVisibility.ts +48 -0
- package/src/index.ts +63 -0
- package/src/stories/controls/color.ts +7 -0
- package/src/stories/controls/element.ts +6 -0
- package/src/stories/controls/focusPoint.ts +1 -0
- package/src/stories/controls/icons.ts +126 -0
- package/src/stories/controls/image.ts +84 -0
- package/src/stories/controls/selectArgType.ts +8 -0
- package/src/stories/controls/theme.ts +3 -0
- package/src/stories/controls/typography.ts +5 -0
- package/src/stories/controls/withUndefined.ts +1 -0
- package/src/stories/decorators/withChromaticForceScreenSize.tsx +7 -0
- package/src/stories/decorators/withCombinations.tsx +132 -0
- package/src/stories/decorators/withNestedProps.tsx +22 -0
- package/src/stories/decorators/withResizableBox.tsx +21 -0
- package/src/stories/decorators/withThemedBackground.tsx +16 -0
- package/src/stories/decorators/withValueOnChange.tsx +18 -0
- package/src/stories/decorators/withWrapper.tsx +19 -0
- package/src/stories/generated/Autocomplete/Demos.stories.tsx +7 -0
- package/src/stories/generated/Avatar/Demos.stories.tsx +7 -0
- package/src/stories/generated/Badge/Demos.stories.tsx +9 -0
- package/src/stories/generated/Button/Demos.stories.tsx +11 -0
- package/src/stories/generated/Checkbox/Demos.stories.tsx +6 -0
- package/src/stories/generated/Chip/Demos.stories.tsx +11 -0
- package/src/stories/generated/CommentBlock/Demos.stories.tsx +8 -0
- package/src/stories/generated/DatePicker/Demos.stories.tsx +8 -0
- package/src/stories/generated/Dialog/Demos.stories.tsx +10 -0
- package/src/stories/generated/Divider/Demos.stories.tsx +6 -0
- package/src/stories/generated/Dropdown/Demos.stories.tsx +8 -0
- package/src/stories/generated/ExpansionPanel/Demos.stories.tsx +9 -0
- package/src/stories/generated/Flag/Demos.stories.tsx +6 -0
- package/src/stories/generated/GenericBlock/Demos.stories.tsx +8 -0
- package/src/stories/generated/Heading/Demos.stories.tsx +6 -0
- package/src/stories/generated/Icon/Demos.stories.tsx +8 -0
- package/src/stories/generated/ImageBlock/Demos.stories.tsx +9 -0
- package/src/stories/generated/ImageLightbox/Demos.stories.tsx +6 -0
- package/src/stories/generated/Lightbox/Demos.stories.tsx +6 -0
- package/src/stories/generated/LinkPreview/Demos.stories.tsx +7 -0
- package/src/stories/generated/List/Demos.stories.tsx +11 -0
- package/src/stories/generated/Message/Demos.stories.tsx +11 -0
- package/src/stories/generated/Mosaic/Demos.stories.tsx +10 -0
- package/src/stories/generated/Notification/Demos.stories.tsx +6 -0
- package/src/stories/generated/Popover/Demos.stories.tsx +11 -0
- package/src/stories/generated/PopoverDialog/Demos.stories.tsx +6 -0
- package/src/stories/generated/PostBlock/Demos.stories.tsx +6 -0
- package/src/stories/generated/Progress/Demos.stories.tsx +7 -0
- package/src/stories/generated/ProgressTracker/Demos.stories.tsx +9 -0
- package/src/stories/generated/RadioButton/Demos.stories.tsx +6 -0
- package/src/stories/generated/Select/Demos.stories.tsx +14 -0
- package/src/stories/generated/SideNavigation/Demos.stories.tsx +10 -0
- package/src/stories/generated/Skeleton/Demos.stories.tsx +9 -0
- package/src/stories/generated/Slider/Demos.stories.tsx +9 -0
- package/src/stories/generated/Slideshow/Demos.stories.tsx +8 -0
- package/src/stories/generated/Switch/Demos.stories.tsx +6 -0
- package/src/stories/generated/Table/Demos.stories.tsx +7 -0
- package/src/stories/generated/Tabs/Demos.stories.tsx +8 -0
- package/src/stories/generated/TextField/Demos.stories.tsx +20 -0
- package/src/stories/generated/Thumbnail/Demos.stories.tsx +12 -0
- package/src/stories/generated/Toolbar/Demos.stories.tsx +10 -0
- package/src/stories/generated/Tooltip/Demos.stories.tsx +8 -0
- package/src/stories/generated/Uploader/Demos.stories.tsx +8 -0
- package/src/stories/generated/UserBlock/Demos.stories.tsx +11 -0
- package/src/stories/utils/CustomLink.tsx +12 -0
- package/src/stories/utils/concatPath.tsx +17 -0
- package/src/stories/utils/disableArgTypes.ts +3 -0
- package/src/stories/utils/initDemoShadowDOMPortal.ts +10 -0
- package/src/stories/utils/lorem.ts +59 -0
- package/src/stories/utils/theming.tsx +166 -0
- package/src/stories/utils/toFlattenProps.ts +28 -0
- package/src/stories/utils/withCategory.ts +12 -0
- package/src/testing/utils/ThemeSentinel.tsx +10 -0
- package/src/testing/utils/commonTestsSuiteRTL.tsx +193 -0
- package/src/testing/utils/index.ts +1 -0
- package/src/testing/utils/queries.ts +19 -0
- package/src/untypped-modules.d.ts +9 -0
- package/src/utils/ClickAwayProvider/ClickAwayProvider.stories.jsx +70 -0
- package/src/utils/ClickAwayProvider/ClickAwayProvider.tsx +69 -0
- package/src/utils/ClickAwayProvider/index.ts +1 -0
- package/src/utils/MaterialThemeSwitcher/MaterialThemeSwitcher.tsx +54 -0
- package/src/utils/MaterialThemeSwitcher/index.ts +1 -0
- package/src/utils/Portal/Portal.test.tsx +31 -0
- package/src/utils/Portal/Portal.tsx +33 -0
- package/src/utils/Portal/PortalProvider.stories.jsx +22 -0
- package/src/utils/Portal/PortalProvider.test.tsx +72 -0
- package/src/utils/Portal/PortalProvider.tsx +24 -0
- package/src/utils/Portal/index.tsx +2 -0
- package/src/utils/browser/DOM/findImage.tsx +3 -0
- package/src/utils/browser/DOM/startViewTransition.ts +68 -0
- package/src/utils/browser/focus/constants.ts +7 -0
- package/src/utils/browser/focus/getFirstAndLastFocusable.test.ts +134 -0
- package/src/utils/browser/focus/getFirstAndLastFocusable.ts +21 -0
- package/src/utils/browser/focus/getFocusableElements.test.ts +151 -0
- package/src/utils/browser/focus/getFocusableElements.ts +7 -0
- package/src/utils/browser/isFocusVisible.ts +9 -0
- package/src/utils/browser/isHoverNotSupported.test.js +24 -0
- package/src/utils/browser/isHoverNotSupported.ts +2 -0
- package/src/utils/browser/isReducedMotion.ts +6 -0
- package/src/utils/date/addMonthResetDay.test.ts +13 -0
- package/src/utils/date/addMonthResetDay.ts +9 -0
- package/src/utils/date/formatDayNumber.test.ts +12 -0
- package/src/utils/date/formatDayNumber.ts +5 -0
- package/src/utils/date/getFirstDayOfWeek.test.ts +20 -0
- package/src/utils/date/getFirstDayOfWeek.ts +59 -0
- package/src/utils/date/getMonthCalendar.test.ts +127 -0
- package/src/utils/date/getMonthCalendar.ts +69 -0
- package/src/utils/date/getWeekDays.test.ts +48 -0
- package/src/utils/date/getWeekDays.ts +34 -0
- package/src/utils/date/getYearDisplayName.test.ts +20 -0
- package/src/utils/date/getYearDisplayName.ts +12 -0
- package/src/utils/date/isDateValid.test.ts +15 -0
- package/src/utils/date/isDateValid.ts +4 -0
- package/src/utils/date/isSameDay.test.ts +37 -0
- package/src/utils/date/isSameDay.ts +11 -0
- package/src/utils/disabled/DisabledStateContext.tsx +29 -0
- package/src/utils/disabled/DisabledStateProvider.stories.tsx +92 -0
- package/src/utils/disabled/index.ts +2 -0
- package/src/utils/disabled/useDisableStateProps.test.tsx +74 -0
- package/src/utils/disabled/useDisableStateProps.tsx +37 -0
- package/src/utils/function/makeListenerTowerContext.ts +32 -0
- package/src/utils/index.ts +7 -0
- package/src/utils/locale/getCurrentLocale.ts +4 -0
- package/src/utils/locale/parseLocale.test.ts +17 -0
- package/src/utils/locale/parseLocale.ts +23 -0
- package/src/utils/locale/types.ts +8 -0
- package/src/utils/number/clamp.ts +17 -0
- package/src/utils/object/isEqual.test.ts +25 -0
- package/src/utils/object/isEqual.ts +11 -0
- package/src/utils/partitionMulti.test.ts +27 -0
- package/{_internal/partitionMulti-4daccdd5.js → src/utils/partitionMulti.ts} +9 -5
- package/src/utils/react/OnBeforeUnmount.tsx +20 -0
- package/src/utils/react/RawClickable.test.tsx +153 -0
- package/src/utils/react/RawClickable.tsx +65 -0
- package/src/utils/react/flattenChildren.ts +32 -0
- package/src/utils/react/forwardRef.ts +11 -0
- package/src/utils/react/forwardRefPolymorphic.ts +9 -0
- package/src/utils/react/mergeRefs.ts +33 -0
- package/src/utils/react/renderLink.tsx +17 -0
- package/src/utils/react/skipRender.tsx +18 -0
- package/src/utils/react/unref.ts +7 -0
- package/src/utils/react/wrapChildrenIconWithSpaces.test.tsx +37 -0
- package/src/utils/react/wrapChildrenIconWithSpaces.tsx +22 -0
- package/src/utils/theme/ThemeContext.ts +16 -0
- package/src/utils/theme/invertTheme.ts +4 -0
- package/src/utils/type/Comp.ts +14 -0
- package/src/utils/type/ComponentRef.ts +16 -0
- package/src/utils/type/HasAriaDisabled.ts +6 -0
- package/src/utils/type/HasPolymorphicAs.ts +6 -0
- package/src/utils/type/HasRequiredLinkHref.ts +1 -0
- package/src/utils/type/MaybeElementOrRef.ts +6 -0
- package/src/utils/type/index.ts +9 -0
- package/src/utils/type/isComponent.ts +33 -0
- package/src/utils/type/isComponentType.ts +9 -0
- package/utils/index.d.ts +1 -1
- package/utils/index.js +1 -3
- package/utils/index.js.map +1 -1
- package/_internal/Button-f19e18df.js +0 -96
- package/_internal/Button-f19e18df.js.map +0 -1
- package/_internal/ButtonRoot-ab633b1d.js +0 -115
- package/_internal/ButtonRoot-ab633b1d.js.map +0 -1
- package/_internal/Chip-4c572eec.js +0 -149
- package/_internal/Chip-4c572eec.js.map +0 -1
- package/_internal/ClickAwayProvider-bcce6ceb.js +0 -93
- package/_internal/ClickAwayProvider-bcce6ceb.js.map +0 -1
- package/_internal/DisabledStateContext-077b7bef.js +0 -29
- package/_internal/DisabledStateContext-077b7bef.js.map +0 -1
- package/_internal/HeadingLevelProvider-e4817816.js +0 -59
- package/_internal/HeadingLevelProvider-e4817816.js.map +0 -1
- package/_internal/IconButton-10585058.js +0 -72
- package/_internal/IconButton-10585058.js.map +0 -1
- package/_internal/ImageCaption-4279b2b6.js +0 -65
- package/_internal/ImageCaption-4279b2b6.js.map +0 -1
- package/_internal/List-d5f5d465.js +0 -791
- package/_internal/List-d5f5d465.js.map +0 -1
- package/_internal/PopoverDialog-21e5c9dd.js +0 -647
- package/_internal/PopoverDialog-21e5c9dd.js.map +0 -1
- package/_internal/Portal-c43d098b.js +0 -42
- package/_internal/Portal-c43d098b.js.map +0 -1
- package/_internal/RawClickable-c76bbc4c.js +0 -50
- package/_internal/RawClickable-c76bbc4c.js.map +0 -1
- package/_internal/Slides-01f513ce.js +0 -675
- package/_internal/Slides-01f513ce.js.map +0 -1
- package/_internal/ThemeContext-3181f000.js +0 -14
- package/_internal/ThemeContext-3181f000.js.map +0 -1
- package/_internal/Thumbnail-30d2a781.js +0 -312
- package/_internal/Thumbnail-30d2a781.js.map +0 -1
- package/_internal/components/alert-dialog-8f1c163c.js +0 -147
- package/_internal/components/alert-dialog-8f1c163c.js.map +0 -1
- package/_internal/components/autocomplete-bfbdeb3c.js +0 -264
- package/_internal/components/autocomplete-bfbdeb3c.js.map +0 -1
- package/_internal/components/avatar-6990e3e9.js +0 -87
- package/_internal/components/avatar-6990e3e9.js.map +0 -1
- package/_internal/components/badge-81543bc7.js +0 -81
- package/_internal/components/badge-81543bc7.js.map +0 -1
- package/_internal/components/button-927abe71.js +0 -49
- package/_internal/components/button-927abe71.js.map +0 -1
- package/_internal/components/checkbox-dc4caec8.js +0 -131
- package/_internal/components/checkbox-dc4caec8.js.map +0 -1
- package/_internal/components/chip-fb3d0c76.js +0 -104
- package/_internal/components/chip-fb3d0c76.js.map +0 -1
- package/_internal/components/comment-block-b84c4694.js +0 -121
- package/_internal/components/comment-block-b84c4694.js.map +0 -1
- package/_internal/components/date-picker-a425534c.js +0 -2
- package/_internal/components/date-picker-a425534c.js.map +0 -1
- package/_internal/components/dialog-7dbcb485.js +0 -226
- package/_internal/components/dialog-7dbcb485.js.map +0 -1
- package/_internal/components/divider-12e9b6a0.js +0 -53
- package/_internal/components/divider-12e9b6a0.js.map +0 -1
- package/_internal/components/drag-handle-a38ff757.js +0 -53
- package/_internal/components/drag-handle-a38ff757.js.map +0 -1
- package/_internal/components/dropdown-38b0b6a0.js +0 -148
- package/_internal/components/dropdown-38b0b6a0.js.map +0 -1
- package/_internal/components/expansion-panel-c4b93653.js +0 -158
- package/_internal/components/expansion-panel-c4b93653.js.map +0 -1
- package/_internal/components/flag-c5e2f5f0.js +0 -55
- package/_internal/components/flag-c5e2f5f0.js.map +0 -1
- package/_internal/components/flex-box-c8701a85.js +0 -58
- package/_internal/components/flex-box-c8701a85.js.map +0 -1
- package/_internal/components/generic-block-0d6ad5a6.js +0 -115
- package/_internal/components/generic-block-0d6ad5a6.js.map +0 -1
- package/_internal/components/grid-3b194fe8.js +0 -109
- package/_internal/components/grid-3b194fe8.js.map +0 -1
- package/_internal/components/grid-column-985b9327.js +0 -60
- package/_internal/components/grid-column-985b9327.js.map +0 -1
- package/_internal/components/heading-5e954dfc.js +0 -54
- package/_internal/components/heading-5e954dfc.js.map +0 -1
- package/_internal/components/icon-2e7345ad.js +0 -103
- package/_internal/components/icon-2e7345ad.js.map +0 -1
- package/_internal/components/image-block-8d21dd7e.js +0 -109
- package/_internal/components/image-block-8d21dd7e.js.map +0 -1
- package/_internal/components/image-lightbox-4a5ab962.js +0 -743
- package/_internal/components/image-lightbox-4a5ab962.js.map +0 -1
- package/_internal/components/inline-list-4884f004.js +0 -74
- package/_internal/components/inline-list-4884f004.js.map +0 -1
- package/_internal/components/input-helper-e644e05e.js +0 -73
- package/_internal/components/input-helper-e644e05e.js.map +0 -1
- package/_internal/components/input-label-5e509a1b.js +0 -61
- package/_internal/components/input-label-5e509a1b.js.map +0 -1
- package/_internal/components/lightbox-bec1b95f.js +0 -149
- package/_internal/components/lightbox-bec1b95f.js.map +0 -1
- package/_internal/components/link-9637b9e4.js +0 -70
- package/_internal/components/link-9637b9e4.js.map +0 -1
- package/_internal/components/link-preview-7a4a6e4b.js +0 -108
- package/_internal/components/link-preview-7a4a6e4b.js.map +0 -1
- package/_internal/components/list-5c8f7122.js +0 -77
- package/_internal/components/list-5c8f7122.js.map +0 -1
- package/_internal/components/message-a67067d9.js +0 -96
- package/_internal/components/message-a67067d9.js.map +0 -1
- package/_internal/components/mosaic-92b66c80.js +0 -92
- package/_internal/components/mosaic-92b66c80.js.map +0 -1
- package/_internal/components/navigation-4fd3917d.js +0 -210
- package/_internal/components/navigation-4fd3917d.js.map +0 -1
- package/_internal/components/notification-9063c963.js +0 -140
- package/_internal/components/notification-9063c963.js.map +0 -1
- package/_internal/components/popover-3c4c54bd.js +0 -3
- package/_internal/components/popover-3c4c54bd.js.map +0 -1
- package/_internal/components/post-block-0cfc2206.js +0 -99
- package/_internal/components/post-block-0cfc2206.js.map +0 -1
- package/_internal/components/progress-eaf5b33d.js +0 -188
- package/_internal/components/progress-eaf5b33d.js.map +0 -1
- package/_internal/components/progress-tracker-4a65718d.js +0 -309
- package/_internal/components/progress-tracker-4a65718d.js.map +0 -1
- package/_internal/components/radio-button-3ef8a325.js +0 -148
- package/_internal/components/radio-button-3ef8a325.js.map +0 -1
- package/_internal/components/select-d46cfe35.js +0 -404
- package/_internal/components/select-d46cfe35.js.map +0 -1
- package/_internal/components/side-navigation-75b22f19.js +0 -159
- package/_internal/components/side-navigation-75b22f19.js.map +0 -1
- package/_internal/components/skeleton-361ce335.js +0 -174
- package/_internal/components/skeleton-361ce335.js.map +0 -1
- package/_internal/components/slider-8094cb5c.js +0 -305
- package/_internal/components/slider-8094cb5c.js.map +0 -1
- package/_internal/components/slideshow-2e8cd372.js +0 -150
- package/_internal/components/slideshow-2e8cd372.js.map +0 -1
- package/_internal/components/switch-5516949b.js +0 -118
- package/_internal/components/switch-5516949b.js.map +0 -1
- package/_internal/components/table-fa198ee6.js +0 -299
- package/_internal/components/table-fa198ee6.js.map +0 -1
- package/_internal/components/tabs-bb9bc2a5.js +0 -298
- package/_internal/components/tabs-bb9bc2a5.js.map +0 -1
- package/_internal/components/text-289c0526.js +0 -2
- package/_internal/components/text-289c0526.js.map +0 -1
- package/_internal/components/text-field-82733568.js +0 -346
- package/_internal/components/text-field-82733568.js.map +0 -1
- package/_internal/components/thumbnail-e3acff82.js +0 -42
- package/_internal/components/thumbnail-e3acff82.js.map +0 -1
- package/_internal/components/toolbar-155562be.js +0 -60
- package/_internal/components/toolbar-155562be.js.map +0 -1
- package/_internal/components/tooltip-84ffb4f9.js +0 -318
- package/_internal/components/tooltip-84ffb4f9.js.map +0 -1
- package/_internal/components/uploader-896a1d89.js +0 -150
- package/_internal/components/uploader-896a1d89.js.map +0 -1
- package/_internal/components/user-block-8fd15895.js +0 -143
- package/_internal/components/user-block-8fd15895.js.map +0 -1
- package/_internal/constants-b9e57936.js +0 -2155
- package/_internal/constants-b9e57936.js.map +0 -1
- package/_internal/constants-d0e3f49e.js +0 -24
- package/_internal/constants-d0e3f49e.js.map +0 -1
- package/_internal/context-21aeb1c7.js +0 -19
- package/_internal/context-21aeb1c7.js.map +0 -1
- package/_internal/forwardRef-49d2bb84.js +0 -80
- package/_internal/forwardRef-49d2bb84.js.map +0 -1
- package/_internal/getFocusableElements-230173a8.js +0 -13
- package/_internal/getFocusableElements-230173a8.js.map +0 -1
- package/_internal/index-b4d256e7.js +0 -118
- package/_internal/index-b4d256e7.js.map +0 -1
- package/_internal/index-f415b08e.js +0 -430
- package/_internal/index-f415b08e.js.map +0 -1
- package/_internal/isComponent-78df9309.js +0 -20
- package/_internal/isComponent-78df9309.js.map +0 -1
- package/_internal/isComponentType-e806b848.js +0 -9
- package/_internal/isComponentType-e806b848.js.map +0 -1
- package/_internal/mergeRefs-f0d7d6ea.js +0 -30
- package/_internal/mergeRefs-f0d7d6ea.js.map +0 -1
- package/_internal/partitionMulti-4daccdd5.js.map +0 -1
- package/_internal/state-db358714.js +0 -130
- package/_internal/state-db358714.js.map +0 -1
- package/_internal/useBooleanState-2a3d237c.js +0 -12
- package/_internal/useBooleanState-2a3d237c.js.map +0 -1
- package/_internal/useCallbackOnEscape-ea4d9eb4.js +0 -62
- package/_internal/useCallbackOnEscape-ea4d9eb4.js.map +0 -1
- package/_internal/useDisableBodyScroll-36bd7352.js +0 -219
- package/_internal/useDisableBodyScroll-36bd7352.js.map +0 -1
- package/_internal/useDisableStateProps-fffc365f.js +0 -36
- package/_internal/useDisableStateProps-fffc365f.js.map +0 -1
- package/_internal/useFocusTrap-c3c6378b.js +0 -112
- package/_internal/useFocusTrap-c3c6378b.js.map +0 -1
- package/_internal/useId-3a1facc0.js +0 -18
- package/_internal/useId-3a1facc0.js.map +0 -1
- package/_internal/useRovingTabIndex-7daf0f24.js +0 -77
- package/_internal/useRovingTabIndex-7daf0f24.js.map +0 -1
- package/_internal/useTransitionVisibility-321fdbfa.js +0 -50
- package/_internal/useTransitionVisibility-321fdbfa.js.map +0 -1
- package/_internal/wrapChildrenIconWithSpaces-f86106ce.js +0 -20
- package/_internal/wrapChildrenIconWithSpaces-f86106ce.js.map +0 -1
|
@@ -1,346 +0,0 @@
|
|
|
1
|
-
import { f as forwardRef, c as classNames, _ as _extends } from '../forwardRef-49d2bb84.js';
|
|
2
|
-
import { useRef, useState, useEffect } from 'react';
|
|
3
|
-
import get from 'lodash/get';
|
|
4
|
-
import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
|
|
5
|
-
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
6
|
-
import { m as mergeRefs } from '../mergeRefs-f0d7d6ea.js';
|
|
7
|
-
import { u as useId } from '../useId-3a1facc0.js';
|
|
8
|
-
import { u as useTheme } from '../ThemeContext-3181f000.js';
|
|
9
|
-
import { u as useDisableStateProps } from '../useDisableStateProps-fffc365f.js';
|
|
10
|
-
import { Theme, Size, Emphasis, Kind } from '@lumx/core/js/constants';
|
|
11
|
-
import { InputLabel } from './input-label-5e509a1b.js';
|
|
12
|
-
import { Icon } from './icon-2e7345ad.js';
|
|
13
|
-
import { I as IconButton } from '../IconButton-10585058.js';
|
|
14
|
-
import { InputHelper } from './input-helper-e644e05e.js';
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Defines the props of the component.
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Component display name.
|
|
22
|
-
*/
|
|
23
|
-
const COMPONENT_NAME = 'TextField';
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Component default class name and class prefix.
|
|
27
|
-
*/
|
|
28
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* Default minimum number of rows in the multiline mode.
|
|
32
|
-
*/
|
|
33
|
-
const DEFAULT_MIN_ROWS = 2;
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Component default props.
|
|
37
|
-
*/
|
|
38
|
-
const DEFAULT_PROPS = {
|
|
39
|
-
type: 'text'
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Hook that allows to calculate the number of rows needed for a text area.
|
|
44
|
-
* @param minimumRows Minimum number of rows that we want to display.
|
|
45
|
-
* @return rows to be used and a callback to recalculate
|
|
46
|
-
*/
|
|
47
|
-
const useComputeNumberOfRows = minimumRows => {
|
|
48
|
-
const [rows, setRows] = useState(minimumRows);
|
|
49
|
-
const recompute = target => {
|
|
50
|
-
/**
|
|
51
|
-
* HEAD's UP! This part is a little bit tricky. The idea here is to only
|
|
52
|
-
* display the necessary rows on the textarea. In order to dynamically adjust
|
|
53
|
-
* the height on that field, we need to:
|
|
54
|
-
* 1. Set the current amount of rows to the minimum. That will make the scroll appear.
|
|
55
|
-
* 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
|
|
56
|
-
* 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
|
|
57
|
-
* by the line height.
|
|
58
|
-
* 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
|
|
59
|
-
* the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
|
|
60
|
-
* when we will not see the update and the rows will be resized to the minimum.
|
|
61
|
-
* 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
|
|
62
|
-
* on the state in order to allow React to re-render. Therefore, we save them using `useState`
|
|
63
|
-
*/
|
|
64
|
-
// eslint-disable-next-line no-param-reassign
|
|
65
|
-
target.rows = minimumRows;
|
|
66
|
-
let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
|
|
67
|
-
currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
|
|
68
|
-
// eslint-disable-next-line no-param-reassign
|
|
69
|
-
target.rows = currentRows;
|
|
70
|
-
setRows(currentRows);
|
|
71
|
-
};
|
|
72
|
-
return {
|
|
73
|
-
recomputeNumberOfRows: recompute,
|
|
74
|
-
rows
|
|
75
|
-
};
|
|
76
|
-
};
|
|
77
|
-
const renderInputNative = props => {
|
|
78
|
-
const {
|
|
79
|
-
id,
|
|
80
|
-
isRequired,
|
|
81
|
-
placeholder,
|
|
82
|
-
multiline,
|
|
83
|
-
value,
|
|
84
|
-
setFocus,
|
|
85
|
-
onChange,
|
|
86
|
-
onFocus,
|
|
87
|
-
onBlur,
|
|
88
|
-
inputRef,
|
|
89
|
-
rows,
|
|
90
|
-
recomputeNumberOfRows,
|
|
91
|
-
type,
|
|
92
|
-
name,
|
|
93
|
-
hasError,
|
|
94
|
-
describedById,
|
|
95
|
-
...forwardedProps
|
|
96
|
-
} = props;
|
|
97
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
98
|
-
const ref = useRef(null);
|
|
99
|
-
|
|
100
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
101
|
-
useEffect(() => {
|
|
102
|
-
// Recompute the number of rows for the first rendering
|
|
103
|
-
if (multiline && ref && ref.current) {
|
|
104
|
-
recomputeNumberOfRows(ref.current);
|
|
105
|
-
}
|
|
106
|
-
}, [ref, multiline, recomputeNumberOfRows, value]);
|
|
107
|
-
const onTextFieldFocus = event => {
|
|
108
|
-
onFocus?.(event);
|
|
109
|
-
setFocus(true);
|
|
110
|
-
};
|
|
111
|
-
const onTextFieldBlur = event => {
|
|
112
|
-
onBlur?.(event);
|
|
113
|
-
setFocus(false);
|
|
114
|
-
};
|
|
115
|
-
const handleChange = event => {
|
|
116
|
-
onChange(get(event, 'target.value'), name, event);
|
|
117
|
-
};
|
|
118
|
-
const Component = multiline ? 'textarea' : 'input';
|
|
119
|
-
const inputProps = {
|
|
120
|
-
...forwardedProps,
|
|
121
|
-
id,
|
|
122
|
-
className: multiline ? `${CLASSNAME}__input-native ${CLASSNAME}__input-native--textarea` : `${CLASSNAME}__input-native ${CLASSNAME}__input-native--text`,
|
|
123
|
-
placeholder,
|
|
124
|
-
value,
|
|
125
|
-
name,
|
|
126
|
-
required: isRequired,
|
|
127
|
-
onFocus: onTextFieldFocus,
|
|
128
|
-
onBlur: onTextFieldBlur,
|
|
129
|
-
onChange: handleChange,
|
|
130
|
-
'aria-invalid': hasError ? 'true' : undefined,
|
|
131
|
-
'aria-describedby': describedById,
|
|
132
|
-
readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
|
|
133
|
-
ref: mergeRefs(inputRef, ref)
|
|
134
|
-
};
|
|
135
|
-
if (multiline) {
|
|
136
|
-
inputProps.rows = rows;
|
|
137
|
-
} else {
|
|
138
|
-
inputProps.type = type;
|
|
139
|
-
}
|
|
140
|
-
return /*#__PURE__*/React.createElement(Component, inputProps);
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
/**
|
|
144
|
-
* TextField component.
|
|
145
|
-
*
|
|
146
|
-
* @param props Component props.
|
|
147
|
-
* @param ref Component ref.
|
|
148
|
-
* @return React element.
|
|
149
|
-
*/
|
|
150
|
-
const TextField = forwardRef((props, ref) => {
|
|
151
|
-
const {
|
|
152
|
-
isAnyDisabled,
|
|
153
|
-
disabledStateProps,
|
|
154
|
-
otherProps
|
|
155
|
-
} = useDisableStateProps(props);
|
|
156
|
-
const defaultTheme = useTheme() || Theme.light;
|
|
157
|
-
const {
|
|
158
|
-
chips,
|
|
159
|
-
className,
|
|
160
|
-
clearButtonProps,
|
|
161
|
-
error,
|
|
162
|
-
forceFocusStyle,
|
|
163
|
-
hasError,
|
|
164
|
-
helper,
|
|
165
|
-
icon,
|
|
166
|
-
id,
|
|
167
|
-
inputRef: inputRefProps,
|
|
168
|
-
isRequired,
|
|
169
|
-
isValid,
|
|
170
|
-
label,
|
|
171
|
-
labelProps,
|
|
172
|
-
maxLength,
|
|
173
|
-
minimumRows,
|
|
174
|
-
multiline,
|
|
175
|
-
name,
|
|
176
|
-
onBlur,
|
|
177
|
-
onChange,
|
|
178
|
-
onClear,
|
|
179
|
-
onFocus,
|
|
180
|
-
placeholder,
|
|
181
|
-
textFieldRef,
|
|
182
|
-
theme = defaultTheme,
|
|
183
|
-
type = DEFAULT_PROPS.type,
|
|
184
|
-
value,
|
|
185
|
-
afterElement,
|
|
186
|
-
...forwardedProps
|
|
187
|
-
} = otherProps;
|
|
188
|
-
const generatedTextFieldId = useId();
|
|
189
|
-
const textFieldId = id || generatedTextFieldId;
|
|
190
|
-
/** Keep a clean local input ref to manage focus */
|
|
191
|
-
const localInputRef = useRef(null);
|
|
192
|
-
/** Merge prop input ref and local input ref */
|
|
193
|
-
const inputRef = mergeRefs(localInputRef, inputRefProps);
|
|
194
|
-
/**
|
|
195
|
-
* Generate unique ids for both the helper and error texts, in order to
|
|
196
|
-
* later on add them to the input native as aria-describedby. If both the error and the helper are present,
|
|
197
|
-
* we want to first use the most important one, which is the errorId. That way, screen readers will read first
|
|
198
|
-
* the error and then the helper
|
|
199
|
-
*/
|
|
200
|
-
const helperId = helper ? `text-field-helper-${generatedTextFieldId}` : undefined;
|
|
201
|
-
const errorId = error ? `text-field-error-${generatedTextFieldId}` : undefined;
|
|
202
|
-
const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
|
|
203
|
-
const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
|
|
204
|
-
const [isFocus, setFocus] = useState(false);
|
|
205
|
-
const {
|
|
206
|
-
rows,
|
|
207
|
-
recomputeNumberOfRows
|
|
208
|
-
} = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);
|
|
209
|
-
const valueLength = (value || '').length;
|
|
210
|
-
const isNotEmpty = valueLength > 0;
|
|
211
|
-
|
|
212
|
-
/**
|
|
213
|
-
* Function triggered when the Clear Button is clicked.
|
|
214
|
-
* The idea is to execute the `onChange` callback with an empty string
|
|
215
|
-
* and remove focus from the clear button.
|
|
216
|
-
* @param evt On clear event.
|
|
217
|
-
*/
|
|
218
|
-
const handleClear = evt => {
|
|
219
|
-
evt.nativeEvent.preventDefault();
|
|
220
|
-
evt.nativeEvent.stopPropagation();
|
|
221
|
-
evt.currentTarget.blur();
|
|
222
|
-
onChange('');
|
|
223
|
-
if (onClear) {
|
|
224
|
-
onClear(evt);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
/** Use local inputRef in case the prop input ref is a `mergeRefs` function. */
|
|
228
|
-
const inputElement = localInputRef;
|
|
229
|
-
if (inputElement && inputElement.current) {
|
|
230
|
-
inputElement.current.focus();
|
|
231
|
-
}
|
|
232
|
-
};
|
|
233
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
234
|
-
ref: ref,
|
|
235
|
-
className: classNames(className, handleBasicClasses({
|
|
236
|
-
hasChips: Boolean(chips),
|
|
237
|
-
hasError: !isValid && hasError,
|
|
238
|
-
hasIcon: Boolean(icon),
|
|
239
|
-
hasInput: !multiline,
|
|
240
|
-
hasInputClear: clearButtonProps && isNotEmpty,
|
|
241
|
-
hasLabel: Boolean(label),
|
|
242
|
-
hasPlaceholder: Boolean(placeholder),
|
|
243
|
-
hasTextarea: multiline,
|
|
244
|
-
hasValue: Boolean(value),
|
|
245
|
-
isDisabled: isAnyDisabled,
|
|
246
|
-
isFocus: isFocus || forceFocusStyle,
|
|
247
|
-
isValid,
|
|
248
|
-
prefix: CLASSNAME,
|
|
249
|
-
theme
|
|
250
|
-
}))
|
|
251
|
-
}, (label || maxLength) && /*#__PURE__*/React.createElement("div", {
|
|
252
|
-
className: `${CLASSNAME}__header`
|
|
253
|
-
}, label && /*#__PURE__*/React.createElement(InputLabel, _extends({}, labelProps, {
|
|
254
|
-
htmlFor: textFieldId,
|
|
255
|
-
className: `${CLASSNAME}__label`,
|
|
256
|
-
isRequired: isRequired,
|
|
257
|
-
theme: theme
|
|
258
|
-
}), label), maxLength && /*#__PURE__*/React.createElement("div", {
|
|
259
|
-
className: `${CLASSNAME}__char-counter`
|
|
260
|
-
}, /*#__PURE__*/React.createElement("span", null, maxLength - valueLength), maxLength - valueLength === 0 && /*#__PURE__*/React.createElement(Icon, {
|
|
261
|
-
icon: mdiAlertCircle,
|
|
262
|
-
size: Size.xxs
|
|
263
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
264
|
-
className: `${CLASSNAME}__wrapper`,
|
|
265
|
-
ref: textFieldRef
|
|
266
|
-
}, icon && /*#__PURE__*/React.createElement(Icon, {
|
|
267
|
-
className: `${CLASSNAME}__input-icon`,
|
|
268
|
-
color: theme === Theme.dark ? 'light' : undefined,
|
|
269
|
-
icon: icon,
|
|
270
|
-
size: Size.xs
|
|
271
|
-
}), chips && /*#__PURE__*/React.createElement("div", {
|
|
272
|
-
className: `${CLASSNAME}__chips`
|
|
273
|
-
}, chips, renderInputNative({
|
|
274
|
-
id: textFieldId,
|
|
275
|
-
inputRef,
|
|
276
|
-
...disabledStateProps,
|
|
277
|
-
isRequired,
|
|
278
|
-
maxLength,
|
|
279
|
-
multiline,
|
|
280
|
-
onBlur,
|
|
281
|
-
onChange,
|
|
282
|
-
onFocus,
|
|
283
|
-
placeholder,
|
|
284
|
-
recomputeNumberOfRows,
|
|
285
|
-
rows,
|
|
286
|
-
setFocus,
|
|
287
|
-
type,
|
|
288
|
-
value,
|
|
289
|
-
name,
|
|
290
|
-
hasError,
|
|
291
|
-
describedById,
|
|
292
|
-
...forwardedProps
|
|
293
|
-
})), !chips && /*#__PURE__*/React.createElement("div", {
|
|
294
|
-
className: `${CLASSNAME}__input-wrapper`
|
|
295
|
-
}, renderInputNative({
|
|
296
|
-
id: textFieldId,
|
|
297
|
-
inputRef,
|
|
298
|
-
...disabledStateProps,
|
|
299
|
-
isRequired,
|
|
300
|
-
maxLength,
|
|
301
|
-
multiline,
|
|
302
|
-
onBlur,
|
|
303
|
-
onChange,
|
|
304
|
-
onFocus,
|
|
305
|
-
placeholder,
|
|
306
|
-
recomputeNumberOfRows,
|
|
307
|
-
rows,
|
|
308
|
-
setFocus,
|
|
309
|
-
type,
|
|
310
|
-
value,
|
|
311
|
-
name,
|
|
312
|
-
hasError,
|
|
313
|
-
describedById,
|
|
314
|
-
...forwardedProps
|
|
315
|
-
})), (isValid || hasError) && /*#__PURE__*/React.createElement(Icon, {
|
|
316
|
-
className: `${CLASSNAME}__input-validity`,
|
|
317
|
-
color: theme === Theme.dark ? 'light' : undefined,
|
|
318
|
-
icon: isValid ? mdiCheckCircle : mdiAlertCircle,
|
|
319
|
-
size: Size.xxs
|
|
320
|
-
}), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/React.createElement(IconButton, _extends({}, clearButtonProps, {
|
|
321
|
-
className: `${CLASSNAME}__input-clear`,
|
|
322
|
-
icon: mdiCloseCircle,
|
|
323
|
-
emphasis: Emphasis.low,
|
|
324
|
-
size: Size.s,
|
|
325
|
-
theme: theme,
|
|
326
|
-
onClick: handleClear,
|
|
327
|
-
type: "button"
|
|
328
|
-
})), afterElement && /*#__PURE__*/React.createElement("div", {
|
|
329
|
-
className: `${CLASSNAME}__after-element`
|
|
330
|
-
}, afterElement)), hasError && error && /*#__PURE__*/React.createElement(InputHelper, {
|
|
331
|
-
className: `${CLASSNAME}__helper`,
|
|
332
|
-
kind: Kind.error,
|
|
333
|
-
theme: theme,
|
|
334
|
-
id: errorId
|
|
335
|
-
}, error), helper && /*#__PURE__*/React.createElement(InputHelper, {
|
|
336
|
-
className: `${CLASSNAME}__helper`,
|
|
337
|
-
theme: theme,
|
|
338
|
-
id: helperId
|
|
339
|
-
}, helper));
|
|
340
|
-
});
|
|
341
|
-
TextField.displayName = COMPONENT_NAME;
|
|
342
|
-
TextField.className = CLASSNAME;
|
|
343
|
-
TextField.defaultProps = DEFAULT_PROPS;
|
|
344
|
-
|
|
345
|
-
export { TextField };
|
|
346
|
-
//# sourceMappingURL=text-field-82733568.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"text-field-82733568.js","sources":["../../../src/components/text-field/TextField.tsx"],"sourcesContent":["import { ReactNode, Ref, RefObject, SyntheticEvent, useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\nimport get from 'lodash/get';\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) => {\n onChange(get(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","get","Component","inputProps","className","required","undefined","readOnly","mergeRefs","React","createElement","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","classNames","handleBasicClasses","hasChips","hasIcon","hasInput","hasInputClear","hasLabel","hasPlaceholder","hasTextarea","hasValue","isDisabled","prefix","InputLabel","_extends","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,42 +0,0 @@
|
|
|
1
|
-
export { T as Thumbnail, u as useFocusPointStyle } from '../Thumbnail-30d2a781.js';
|
|
2
|
-
import { AspectRatio } from '@lumx/core/js/constants';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Loading attribute is not yet supported in typescript, so we need
|
|
10
|
-
* to add it in order to avoid a ts error.
|
|
11
|
-
* https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* All available aspect ratios.
|
|
16
|
-
* @deprecated
|
|
17
|
-
*/
|
|
18
|
-
const ThumbnailAspectRatio = {
|
|
19
|
-
...AspectRatio
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Thumbnail sizes.
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* Thumbnail variants.
|
|
28
|
-
*/
|
|
29
|
-
const ThumbnailVariant = {
|
|
30
|
-
squared: 'squared',
|
|
31
|
-
rounded: 'rounded'
|
|
32
|
-
};
|
|
33
|
-
/**
|
|
34
|
-
* Thumbnail object fit.
|
|
35
|
-
*/
|
|
36
|
-
const ThumbnailObjectFit = {
|
|
37
|
-
cover: 'cover',
|
|
38
|
-
contain: 'contain'
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export { ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant };
|
|
42
|
-
//# sourceMappingURL=thumbnail-e3acff82.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"thumbnail-e3acff82.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,60 +0,0 @@
|
|
|
1
|
-
import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
|
|
2
|
-
import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* Defines the props of the component.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Component display name.
|
|
10
|
-
*/
|
|
11
|
-
const COMPONENT_NAME = 'Toolbar';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Component default class name and class prefix.
|
|
15
|
-
*/
|
|
16
|
-
const CLASSNAME = getRootClassName(COMPONENT_NAME);
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Component default props.
|
|
20
|
-
*/
|
|
21
|
-
const DEFAULT_PROPS = {};
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Toolbar component.
|
|
25
|
-
*
|
|
26
|
-
* @param props Component props.
|
|
27
|
-
* @param ref Component ref.
|
|
28
|
-
* @return React element.
|
|
29
|
-
*/
|
|
30
|
-
const Toolbar = forwardRef((props, ref) => {
|
|
31
|
-
const {
|
|
32
|
-
after,
|
|
33
|
-
before,
|
|
34
|
-
className,
|
|
35
|
-
label,
|
|
36
|
-
...forwardedProps
|
|
37
|
-
} = props;
|
|
38
|
-
return /*#__PURE__*/React.createElement("div", _extends({
|
|
39
|
-
ref: ref
|
|
40
|
-
}, forwardedProps, {
|
|
41
|
-
className: classNames(className, handleBasicClasses({
|
|
42
|
-
hasAfter: Boolean(after),
|
|
43
|
-
hasBefore: Boolean(before),
|
|
44
|
-
hasLabel: Boolean(label),
|
|
45
|
-
prefix: CLASSNAME
|
|
46
|
-
}))
|
|
47
|
-
}), before && /*#__PURE__*/React.createElement("div", {
|
|
48
|
-
className: `${CLASSNAME}__before`
|
|
49
|
-
}, before), label && /*#__PURE__*/React.createElement("div", {
|
|
50
|
-
className: `${CLASSNAME}__label`
|
|
51
|
-
}, label), after && /*#__PURE__*/React.createElement("div", {
|
|
52
|
-
className: `${CLASSNAME}__after`
|
|
53
|
-
}, after));
|
|
54
|
-
});
|
|
55
|
-
Toolbar.displayName = COMPONENT_NAME;
|
|
56
|
-
Toolbar.className = CLASSNAME;
|
|
57
|
-
Toolbar.defaultProps = DEFAULT_PROPS;
|
|
58
|
-
|
|
59
|
-
export { Toolbar };
|
|
60
|
-
//# sourceMappingURL=toolbar-155562be.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar-155562be.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","React","createElement","_extends","classNames","handleBasicClasses","hasAfter","Boolean","hasBefore","hasLabel","prefix","displayName","defaultProps"],"mappings":";;;AAQA;AACA;AACA;;AAUA;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,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACIR,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLK,cAAc,EAAA;AAClBF,IAAAA,SAAS,EAAEM,UAAU,CACjBN,SAAS,EACTO,kBAAkB,CAAC;AACfC,MAAAA,QAAQ,EAAEC,OAAO,CAACX,KAAK,CAAC;AACxBY,MAAAA,SAAS,EAAED,OAAO,CAACV,MAAM,CAAC;AAC1BY,MAAAA,QAAQ,EAAEF,OAAO,CAACR,KAAK,CAAC;AACxBW,MAAAA,MAAM,EAAErB,SAAAA;AACZ,KAAC,CACL,CAAA;AAAE,GAAA,CAAA,EAEDQ,MAAM,iBAAII,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKJ,SAAS,EAAE,GAAGT,SAAS,CAAA,QAAA,CAAA;AAAW,GAAA,EAAEQ,MAAY,CAAC,EAChEE,KAAK,iBAAIE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKJ,SAAS,EAAE,GAAGT,SAAS,CAAA,OAAA,CAAA;AAAU,GAAA,EAAEU,KAAW,CAAC,EAC7DH,KAAK,iBAAIK,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKJ,SAAS,EAAE,GAAGT,SAAS,CAAA,OAAA,CAAA;GAAYO,EAAAA,KAAW,CAC5D,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;;;;"}
|