@vibe/core 3.77.1-alpha-eb809.0 → 3.77.1-alpha-4a3fa.0
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/dist/components/EditableTypography/EditableTypography.d.ts +4 -0
- package/dist/components/dialog/dist/Dialog/Dialog.js +1 -1
- package/dist/components/dialog/dist/Dialog/Dialog.js.map +1 -1
- package/dist/components/layers/dist/LayerProvider/LayerContext.js.map +1 -0
- package/dist/components/layers/dist/LayerProvider/LayerProvider.js.map +1 -0
- package/dist/metadata.json +18 -32
- package/dist/mocked_classnames/base/dist/BaseInput/BaseInput.js +2 -0
- package/dist/mocked_classnames/base/dist/BaseInput/BaseInput.js.map +1 -0
- package/dist/mocked_classnames/base/dist/BaseInput/BaseInput.module.scss.js +2 -0
- package/dist/mocked_classnames/base/dist/BaseInput/BaseInput.module.scss.js.map +1 -0
- package/dist/mocked_classnames/base/dist/_virtual/_tslib.js +2 -0
- package/dist/mocked_classnames/base/dist/_virtual/_tslib.js.map +1 -0
- package/dist/mocked_classnames/components/EditableTypography/EditableTypography.d.ts +4 -0
- package/dist/mocked_classnames/components/button/dist/Button/Button.js +2 -0
- package/dist/mocked_classnames/components/button/dist/Button/Button.js.map +1 -0
- package/dist/mocked_classnames/components/button/dist/Button/Button.module.scss.js +2 -0
- package/dist/mocked_classnames/components/button/dist/Button/Button.module.scss.js.map +1 -0
- package/dist/mocked_classnames/components/button/dist/Button/ButtonConstants.js +2 -0
- package/dist/mocked_classnames/components/button/dist/Button/ButtonConstants.js.map +1 -0
- package/dist/mocked_classnames/components/button/dist/Button/helper/dom-helpers.js +2 -0
- package/dist/mocked_classnames/components/button/dist/Button/helper/dom-helpers.js.map +1 -0
- package/dist/mocked_classnames/components/button/dist/Button/helper/useButtonLoading.js +2 -0
- package/dist/mocked_classnames/components/button/dist/Button/helper/useButtonLoading.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/Dialog.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/Dialog.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/Dialog.module.scss.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/Dialog.module.scss.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogConstants.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogConstants.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogContent/DialogContent.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogContent/DialogContent.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogContent/DialogContent.module.scss.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogContent/DialogContent.module.scss.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogContent/useDisableScroll.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/DialogContent/useDisableScroll.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/modifiers/observeContentResizeModifier.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/modifiers/observeContentResizeModifier.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/modifiers/observeReferenceResizeModifier.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/modifiers/observeReferenceResizeModifier.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/useForceUpdate.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/useForceUpdate.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/usePopover.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Dialog/usePopover.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/DialogContentContainer/DialogContentContainer.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/DialogContentContainer/DialogContentContainer.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/DialogContentContainer/DialogContentContainer.module.scss.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/DialogContentContainer/DialogContentContainer.module.scss.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/Refable/Refable.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/Refable/Refable.js.map +1 -0
- package/dist/mocked_classnames/components/dialog/dist/_virtual/_tslib.js +2 -0
- package/dist/mocked_classnames/components/dialog/dist/_virtual/_tslib.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/CustomSvgIcon/CustomSvgIcon.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/CustomSvgIcon/CustomSvgIcon.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/FontIcon/FontIcon.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/FontIcon/FontIcon.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/Icon.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/Icon.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/Icon.module.scss.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/Icon.module.scss.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/constants.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/constants.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/hooks/useIconProps.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/hooks/useIconProps.js.map +1 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/hooks/useIconScreenReaderAccessProps.js +2 -0
- package/dist/mocked_classnames/components/icon/dist/Icon/hooks/useIconScreenReaderAccessProps.js.map +1 -0
- package/dist/mocked_classnames/components/layers/dist/LayerProvider/LayerContext.js +2 -0
- package/dist/mocked_classnames/components/layers/dist/LayerProvider/LayerContext.js.map +1 -0
- package/dist/mocked_classnames/components/layers/dist/LayerProvider/LayerProvider.js +2 -0
- package/dist/mocked_classnames/components/layers/dist/LayerProvider/LayerProvider.js.map +1 -0
- package/dist/mocked_classnames/components/loader/dist/Loader/Loader.js +2 -0
- package/dist/mocked_classnames/components/loader/dist/Loader/Loader.js.map +1 -0
- package/dist/mocked_classnames/components/loader/dist/Loader/Loader.module.scss.js +2 -0
- package/dist/mocked_classnames/components/loader/dist/Loader/Loader.module.scss.js.map +1 -0
- package/dist/mocked_classnames/components/loader/dist/Loader/LoaderConstants.js +2 -0
- package/dist/mocked_classnames/components/loader/dist/Loader/LoaderConstants.js.map +1 -0
- package/dist/mocked_classnames/hooks/dist/useClickOutside/index.js +2 -0
- package/dist/mocked_classnames/hooks/dist/useClickOutside/index.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/_virtual/_tslib.js +2 -0
- package/dist/mocked_classnames/icons/dist/_virtual/_tslib.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/AddSmall.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/AddSmall.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Alert.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Alert.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Check.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Check.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/CloseMedium.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/CloseMedium.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/CloseSmall.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/CloseSmall.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/DropdownChevronDown.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/DropdownChevronDown.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/DropdownChevronRight.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/DropdownChevronRight.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/DropdownChevronUp.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/DropdownChevronUp.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Favorite.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Favorite.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Info.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Info.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Menu.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Menu.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/MoveArrowLeft.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/MoveArrowLeft.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/MoveArrowRight.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/MoveArrowRight.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/NavigationChevronLeft.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/NavigationChevronLeft.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/NavigationChevronRight.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/NavigationChevronRight.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/NoColor.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/NoColor.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Remove.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Remove.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Search.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Search.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Sort.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Sort.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/SortAscending.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/SortAscending.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/SortDescending.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/SortDescending.js.map +1 -0
- package/dist/mocked_classnames/icons/dist/react/Warning.js +2 -0
- package/dist/mocked_classnames/icons/dist/react/Warning.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/constants/keyCodes.js +2 -0
- package/dist/mocked_classnames/shared/dist/constants/keyCodes.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/constants/sizes.js +2 -0
- package/dist/mocked_classnames/shared/dist/constants/sizes.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/hooks/ssr/useIsMounted.js +2 -0
- package/dist/mocked_classnames/shared/dist/hooks/ssr/useIsMounted.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/hooks/ssr/useIsomorphicLayoutEffect.js +2 -0
- package/dist/mocked_classnames/shared/dist/hooks/ssr/useIsomorphicLayoutEffect.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/hooks/useEventListener.js +2 -0
- package/dist/mocked_classnames/shared/dist/hooks/useEventListener.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/hooks/useKeyEvent.js +2 -0
- package/dist/mocked_classnames/shared/dist/hooks/useKeyEvent.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/hooks/useMergeRef.js +2 -0
- package/dist/mocked_classnames/shared/dist/hooks/useMergeRef.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/tests/constants.js +2 -0
- package/dist/mocked_classnames/shared/dist/tests/constants.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/tests/test-ids-utils.js +2 -0
- package/dist/mocked_classnames/shared/dist/tests/test-ids-utils.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/types/withStaticProps.js +2 -0
- package/dist/mocked_classnames/shared/dist/types/withStaticProps.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/utils/dom-utils.js +2 -0
- package/dist/mocked_classnames/shared/dist/utils/dom-utils.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/utils/function-utils.js +2 -0
- package/dist/mocked_classnames/shared/dist/utils/function-utils.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/utils/screenReaderAccessHelper.js +2 -0
- package/dist/mocked_classnames/shared/dist/utils/screenReaderAccessHelper.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/utils/ssr-utils.js +2 -0
- package/dist/mocked_classnames/shared/dist/utils/ssr-utils.js.map +1 -0
- package/dist/mocked_classnames/shared/dist/utils/typesciptCssModulesHelper.js +2 -0
- package/dist/mocked_classnames/shared/dist/utils/typesciptCssModulesHelper.js.map +1 -0
- package/dist/mocked_classnames/src/components/AlertBanner/AlertBanner.js +1 -1
- package/dist/mocked_classnames/src/components/AlertBanner/AlertBanner.js.map +1 -1
- package/dist/mocked_classnames/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.js +1 -1
- package/dist/mocked_classnames/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/AttentionBox/AttentionBox.js +1 -1
- package/dist/mocked_classnames/src/components/AttentionBox/AttentionBox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarBadge.js +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarBadge.js.map +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarContent.js +1 -1
- package/dist/mocked_classnames/src/components/Avatar/AvatarContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/BaseListItem/utils.js +1 -1
- package/dist/mocked_classnames/src/components/BaseListItem/utils.js.map +1 -1
- package/dist/mocked_classnames/src/components/BreadcrumbsBar/BreadcrumbsBar.js +1 -1
- package/dist/mocked_classnames/src/components/BreadcrumbsBar/BreadcrumbsBar.js.map +1 -1
- package/dist/mocked_classnames/src/components/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/mocked_classnames/src/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/mocked_classnames/src/components/ButtonGroup/ButtonWrapper.js +1 -1
- package/dist/mocked_classnames/src/components/ButtonGroup/ButtonWrapper.js.map +1 -1
- package/dist/mocked_classnames/src/components/Checkbox/Checkbox.js +1 -1
- package/dist/mocked_classnames/src/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Chips/Chips.js +1 -1
- package/dist/mocked_classnames/src/components/Chips/Chips.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/ColorPicker.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/ColorPicker.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js +1 -1
- package/dist/mocked_classnames/src/components/ColorPicker/components/ColorPickerItemComponent/ColorPickerItemComponent.js.map +1 -1
- package/dist/mocked_classnames/src/components/Combobox/Combobox.js +1 -1
- package/dist/mocked_classnames/src/components/Combobox/Combobox.js.map +1 -1
- package/dist/mocked_classnames/src/components/Combobox/components/ComboboxOption/ComboboxOption.js +1 -1
- package/dist/mocked_classnames/src/components/Combobox/components/ComboboxOption/ComboboxOption.js.map +1 -1
- package/dist/mocked_classnames/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js +1 -1
- package/dist/mocked_classnames/src/components/DatePicker/DateNavigationItem/DateNavigationItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/DatePicker/DatePickerHeader/DatePickerHeader.js +1 -1
- package/dist/mocked_classnames/src/components/DatePicker/DatePickerHeader/DatePickerHeader.js.map +1 -1
- package/dist/mocked_classnames/src/components/DatePicker/YearPicker/YearsList.js +1 -1
- package/dist/mocked_classnames/src/components/DatePicker/YearPicker/YearsList.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/ChildrenContent/ChildrenContent.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/ChildrenContent/ChildrenContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/ClearIndicator/ClearIndicator.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/ClearIndicator/ClearIndicator.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.js +1 -1
- package/dist/mocked_classnames/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.js.map +1 -1
- package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js +1 -1
- package/dist/mocked_classnames/src/components/EditableTypography/EditableTypography.js.map +1 -1
- package/dist/mocked_classnames/src/components/EmptyState/EmptyState.js +1 -1
- package/dist/mocked_classnames/src/components/EmptyState/EmptyState.js.map +1 -1
- package/dist/mocked_classnames/src/components/ExpandCollapse/ExpandCollapse.js +1 -1
- package/dist/mocked_classnames/src/components/ExpandCollapse/ExpandCollapse.js.map +1 -1
- package/dist/mocked_classnames/src/components/FieldLabel/FieldLabel.js +1 -1
- package/dist/mocked_classnames/src/components/FieldLabel/FieldLabel.js.map +1 -1
- package/dist/mocked_classnames/src/components/IconButton/IconButton.js +1 -1
- package/dist/mocked_classnames/src/components/IconButton/IconButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Info/Info.js +1 -1
- package/dist/mocked_classnames/src/components/Info/Info.js.map +1 -1
- package/dist/mocked_classnames/src/components/Info/components/InfoDialogContent/InfoDialogContent.js +1 -1
- package/dist/mocked_classnames/src/components/Info/components/InfoDialogContent/InfoDialogContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/LegacyModal/LegacyModal.js +1 -1
- package/dist/mocked_classnames/src/components/LegacyModal/LegacyModal.js.map +1 -1
- package/dist/mocked_classnames/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.js +1 -1
- package/dist/mocked_classnames/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.js.map +1 -1
- package/dist/mocked_classnames/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.js +1 -1
- package/dist/mocked_classnames/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.js.map +1 -1
- package/dist/mocked_classnames/src/components/Link/Link.js +1 -1
- package/dist/mocked_classnames/src/components/Link/Link.js.map +1 -1
- package/dist/mocked_classnames/src/components/ListItem/ListItem.js +1 -1
- package/dist/mocked_classnames/src/components/ListItem/ListItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/ListItemIcon/ListItemIcon.js +1 -1
- package/dist/mocked_classnames/src/components/ListItemIcon/ListItemIcon.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/Menu/Menu.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/MenuItem.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemIcon/MenuItemIcon.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenu/MenuItemSubMenu.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItem/components/MenuItemSubMenuIcon/MenuItemSubMenuIcon.js.map +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItemButton/MenuItemButton.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuItemButton/MenuItemButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/MenuButton/MenuButton.js +1 -1
- package/dist/mocked_classnames/src/components/MenuButton/MenuButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/ModalHeader/ModalHeader.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/ModalHeader/ModalHeader.js.map +1 -1
- package/dist/mocked_classnames/src/components/Modal/ModalTopActions/ModalTopActions.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.js +1 -1
- package/dist/mocked_classnames/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.js.map +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/MultiStepIndicator.js.map +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js +1 -1
- package/dist/mocked_classnames/src/components/MultiStepIndicator/components/StepIndicator/StepIndicator.js.map +1 -1
- package/dist/mocked_classnames/src/components/NumberField/NumberField.js +1 -1
- package/dist/mocked_classnames/src/components/NumberField/NumberField.js.map +1 -1
- package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js +1 -1
- package/dist/mocked_classnames/src/components/NumberField/components/NumberFieldSpinButton/NumberFieldSpinButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Search/Search.js +1 -1
- package/dist/mocked_classnames/src/components/Search/Search.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderInfixHooks.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderInfixHooks.js.map +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButtonConstants.js +1 -1
- package/dist/mocked_classnames/src/components/SplitButton/SplitButtonConstants.js.map +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsCommand.js +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsCommand.js.map +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsHeader.js +1 -1
- package/dist/mocked_classnames/src/components/Steps/StepsHeader.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/Table/tableHelpers.js +1 -1
- package/dist/mocked_classnames/src/components/Table/Table/tableHelpers.js.map +1 -1
- package/dist/mocked_classnames/src/components/Table/TableHeaderCell/TableHeaderCell.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableHeaderCell/TableHeaderCell.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js +1 -1
- package/dist/mocked_classnames/src/components/Tabs/Tab/Tab.js.map +1 -1
- package/dist/mocked_classnames/src/components/TextField/TextField.js +1 -1
- package/dist/mocked_classnames/src/components/TextField/TextField.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/Tipseen.js +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/Tipseen.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/TipseenContent.js +1 -1
- package/dist/mocked_classnames/src/components/Tipseen/TipseenContent.js.map +1 -1
- package/dist/mocked_classnames/src/components/Toast/Toast.js +1 -1
- package/dist/mocked_classnames/src/components/Toast/Toast.js.map +1 -1
- package/dist/mocked_classnames/src/components/Toast/ToastButton/ToastButton.js +1 -1
- package/dist/mocked_classnames/src/components/Toast/ToastButton/ToastButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Toast/ToastConstants.js +1 -1
- package/dist/mocked_classnames/src/components/Toast/ToastConstants.js.map +1 -1
- package/dist/mocked_classnames/src/components/Toast/ToastHelpers.js +1 -1
- package/dist/mocked_classnames/src/components/Toast/ToastHelpers.js.map +1 -1
- package/dist/mocked_classnames/src/components/Tooltip/Tooltip.js +1 -1
- package/dist/mocked_classnames/src/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.js +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/components/AttentionBoxButton/AttentionBoxButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.js +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/components/AttentionBoxCloseButton/AttentionBoxCloseButton.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.js +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/components/AttentionBoxLeadingIcon/AttentionBoxLeadingIcon.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/consts/icons.js +1 -1
- package/dist/mocked_classnames/src/components/next/AttentionBox/consts/icons.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownPopup/DropdownPopup.js +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/DropdownPopup/DropdownPopup.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Menu/Menu.js +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Menu/Menu.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/MultiSelectedValues/MultiSelectedValues.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/DropdownInput.js.map +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/TriggerActions.js +1 -1
- package/dist/mocked_classnames/src/components/next/Dropdown/components/Trigger/TriggerActions.js.map +1 -1
- package/dist/mocked_classnames/src/index.js +1 -1
- package/dist/src/components/Dropdown/Dropdown.js +1 -1
- package/dist/src/components/Dropdown/Dropdown.js.map +1 -1
- package/dist/src/components/EditableTypography/EditableTypography.js +1 -1
- package/dist/src/components/EditableTypography/EditableTypography.js.map +1 -1
- package/dist/src/components/LegacyModal/LegacyModal.js +1 -1
- package/dist/src/components/LegacyModal/LegacyModal.js.map +1 -1
- package/dist/src/components/Modal/Modal/Modal.js +1 -1
- package/dist/src/components/Modal/Modal/Modal.js.map +1 -1
- package/dist/src/index.js +1 -1
- package/package.json +10 -10
- package/dist/components/layer/dist/LayerProvider/LayerContext.js.map +0 -1
- package/dist/components/layer/dist/LayerProvider/LayerProvider.js.map +0 -1
- /package/dist/components/{layer → layers}/dist/LayerProvider/LayerContext.js +0 -0
- /package/dist/components/{layer → layers}/dist/LayerProvider/LayerProvider.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { BaseSizes, type SIZES_VALUES } from \"../../constants\";\nimport React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect, useContext } from \"react\";\nimport Select, { type InputProps, components, createFilter, type ActionMeta } from \"react-select\";\nimport AsyncSelect from \"react-select/async\";\nimport BaseSelect from \"react-select/base\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport MenuComponent from \"./components/menu/menu\";\nimport DropdownIndicatorComponent from \"./components/DropdownIndicator/DropdownIndicator\";\nimport OptionComponent from \"./components/option/option\";\nimport SingleValueComponent from \"./components/singleValue/singleValue\";\nimport ClearIndicatorComponent from \"./components/ClearIndicator/ClearIndicator\";\nimport MultiValueContainer from \"./components/MultiValueContainer/MultiValueContainer\";\nimport { isClient } from \"../../utils/ssr-utils\";\nimport {\n ADD_AUTO_HEIGHT_COMPONENTS,\n defaultCustomStyles,\n DROPDOWN_CHIP_COLORS,\n DROPDOWN_ID,\n DROPDOWN_INPUT_ARIA_LABEL,\n DROPDOWN_MENU_ARIA_LABEL,\n DROPDOWN_MENU_ID,\n DROPDOWN_MENU_PLACEMENT,\n DROPDOWN_MENU_POSITION\n} from \"./DropdownConstants\";\nimport generateBaseStyles, { customTheme } from \"./Dropdown.styles\";\nimport Control from \"./components/Control/Control\";\nimport Text from \"../Text/Text\";\nimport menuStyles from \"./components/menu/menu.module.scss\";\nimport styles from \"./Dropdown.module.scss\";\nimport {\n type DropdownOption,\n type DropdownState,\n type CustomMenuProps,\n type CustomOptionProps,\n type CustomSingleValueProps,\n type DropdownComponentProps\n} from \"./Dropdown.types\";\nimport { withStaticProps } from \"../../types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\nimport { LayerContext } from \"@vibe/layer\";\n\nconst Dropdown = forwardRef(\n (\n {\n className,\n optionWrapperClassName,\n singleValueWrapperClassName,\n dropdownMenuWrapperClassName,\n placeholder = \"\",\n allowPlaceholderEllipsis,\n disabled = false,\n readOnly = false,\n onMenuOpen = NOOP,\n onMenuClose = NOOP,\n onFocus = NOOP,\n onBlur = NOOP,\n onScroll = NOOP,\n onMenuScrollToBottom = NOOP,\n onChange: customOnChange = NOOP,\n searchable = true,\n captureMenuScroll = false,\n options = [],\n defaultValue,\n value: customValue,\n noOptionsMessage,\n openMenuOnFocus,\n openMenuOnClick,\n clearable = true,\n OptionRenderer,\n optionRenderer,\n ValueRenderer,\n valueRenderer,\n menuRenderer,\n menuPlacement = \"bottom\",\n rtl,\n size = \"medium\",\n asyncOptions,\n cacheOptions,\n defaultOptions,\n isVirtualized,\n menuPortalTarget,\n extraStyles = defaultCustomStyles,\n maxMenuHeight,\n menuIsOpen,\n tabIndex = \"0\",\n id = DROPDOWN_ID,\n menuId = DROPDOWN_MENU_ID,\n menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,\n inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,\n autoFocus = false,\n multi = false,\n multiline = false,\n onOptionRemove: customOnOptionRemove,\n onOptionSelect,\n onClear,\n onInputChange = NOOP,\n closeMenuOnSelect = !multi,\n closeMenuOnScroll: customCloseMenuOnScroll = false,\n withMandatoryDefaultOptions = false,\n isOptionSelected,\n insideOverflowContainer = false,\n insideOverflowWithTransformContainer = false,\n insideLayerContext = false,\n tooltipContent = \"\",\n onKeyDown = NOOP,\n isLoading = false,\n loadingMessage,\n ariaLabel,\n tabSelectsValue = true,\n popupsContainerSelector,\n filterOption,\n menuPosition = \"absolute\",\n \"data-testid\": dataTestId,\n withGroupDivider = false,\n inputValue,\n blurInputOnSelect,\n multiValueDialogClassName\n }: DropdownComponentProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const controlRef = useRef();\n const { layerRef } = useContext(LayerContext);\n const overrideMenuPortalTarget =\n (insideLayerContext && layerRef?.current) ||\n menuPortalTarget ||\n (popupsContainerSelector && document.querySelector(popupsContainerSelector));\n const overrideDefaultValue = useMemo(() => {\n if (defaultValue) {\n return Array.isArray(defaultValue)\n ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))\n : { ...(defaultValue as DropdownOption), isMandatory: true };\n }\n\n return defaultValue;\n }, [defaultValue]);\n\n BaseSelect.prototype.renderLiveRegion = (): null => {\n return null;\n };\n\n // SSR support\n const [WindowedMenuList, setWindowedMenuList] = useState(null);\n useEffect(() => {\n if (isClient()) {\n if (isTestEnv()) {\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n setWindowedMenuList(() => require(\"react-windowed-select\").WindowedMenuList);\n } else {\n // Dynamically import the specific named export from react-windowed-select for SSR support\n import(\"react-windowed-select\").then(module => {\n setWindowedMenuList(() => module.WindowedMenuList);\n });\n }\n }\n }, []);\n\n const [selected, setSelected] = useState(overrideDefaultValue || []);\n const [focusedOptionId, setFocusedOptionId] = useState(\"\");\n const finalOptionRenderer = optionRenderer || OptionRenderer;\n const finalValueRenderer = valueRenderer || ValueRenderer;\n const isControlled = !!customValue;\n const selectedOptions = customValue ?? selected;\n const selectedOptionsMap = useMemo(() => {\n if (Array.isArray(selectedOptions)) {\n return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});\n }\n return {};\n }, [selectedOptions]);\n\n const overrideAriaLabel = useMemo(() => {\n return (\n ariaLabel ||\n `${readOnly ? \"Readonly \" : \"\"} ${tooltipContent} ${\n Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(\", \")}` : \"Select\"\n }`\n );\n }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);\n const value = multi ? selectedOptions : customValue;\n\n const inlineStyles = useMemo(() => {\n // We first want to get the default stylized groups (e.g. \"container\", \"menu\").\n const baseStyles = generateBaseStyles({\n size,\n rtl,\n insideOverflowContainer,\n controlRef,\n insideOverflowWithTransformContainer,\n withGroupDivider,\n searchable,\n allowPlaceholderEllipsis\n });\n\n type BaseStyles = typeof baseStyles;\n\n // Then we want to run the consumer's root-level custom styles with our \"base\" override groups.\n const customStyles = extraStyles(baseStyles);\n\n // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.\n const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {\n return {\n ...accumulator,\n [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {\n const providedFn = baseStyles[stylesGroup as keyof BaseStyles];\n const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;\n\n return stylesFn(provided, state);\n }\n };\n }, {} as BaseStyles);\n\n if (multi) {\n if (multiline) {\n ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {\n const original = mergedStyles[component];\n mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({\n ...original(provided, state),\n height: \"auto\"\n });\n });\n }\n\n const originalValueContainer = mergedStyles.valueContainer;\n mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({\n ...originalValueContainer(provided, state),\n paddingLeft: 6\n });\n }\n\n return mergedStyles;\n }, [\n size,\n rtl,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n allowPlaceholderEllipsis,\n extraStyles,\n multi,\n multiline\n ]);\n\n const Menu = useCallback(\n (props: CustomMenuProps) => (\n <MenuComponent\n {...props}\n id={menuId}\n ariaLabel={menuAriaLabel}\n Renderer={menuRenderer}\n dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}\n onScroll={onScroll}\n />\n ),\n [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]\n );\n\n const DropdownIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <DropdownIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const Option = useCallback(\n (props: CustomOptionProps) => (\n <OptionComponent\n setFocusedOptionId={setFocusedOptionId}\n {...props}\n Renderer={finalOptionRenderer}\n optionWrapperClassName={optionWrapperClassName}\n />\n ),\n [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]\n );\n\n const Input = useCallback(\n (props: InputProps | any) => {\n const { focusedOptionId, menuIsOpen } = props.selectProps;\n const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : \"\";\n return (\n <components.Input\n {...props}\n aria-activedescendant={ariaActiveDescendant}\n role=\"combobox\"\n aria-expanded={!readOnly && menuIsOpen}\n aria-label={inputAriaLabel}\n aria-controls={menuId}\n readOnly={!searchable ? true : undefined}\n />\n );\n },\n [menuId, readOnly]\n );\n\n const SingleValue = useCallback(\n (props: CustomSingleValueProps) => (\n <SingleValueComponent\n {...props}\n readOnly={readOnly}\n Renderer={finalValueRenderer}\n selectedOption={selectedOptions[0]}\n singleValueWrapperClassName={singleValueWrapperClassName}\n />\n ),\n [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]\n );\n\n const ClearIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <ClearIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const onOptionRemove = useMemo(() => {\n return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {\n if (customOnOptionRemove) {\n customOnOptionRemove(selectedOptionsMap[optionValue]);\n }\n const newSelectedOptions = Array.isArray(selectedOptions)\n ? selectedOptions.filter(option => option.value !== optionValue)\n : selectedOptions;\n\n if (customOnChange) {\n customOnChange(newSelectedOptions, e);\n }\n setSelected(newSelectedOptions);\n };\n }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);\n\n const customProps = useMemo(\n () => ({\n selectedOptions,\n onSelectedDelete: onOptionRemove,\n isMultiline: multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n controlRef,\n tooltipContent,\n popupsContainerSelector: insideLayerContext ? layerRef?.current : popupsContainerSelector,\n size,\n dialogClassName: multiValueDialogClassName\n }),\n [\n selectedOptions,\n onOptionRemove,\n multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n tooltipContent,\n layerRef,\n popupsContainerSelector,\n insideLayerContext,\n size,\n multiValueDialogClassName\n ]\n );\n const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {\n if (customOnChange) {\n customOnChange(option, meta);\n }\n\n switch (meta.action) {\n case \"select-option\": {\n const selectedOption = multi ? meta.option : option;\n\n if (onOptionSelect) {\n onOptionSelect(selectedOption);\n }\n\n if (!isControlled) {\n setSelected([...selectedOptions, selectedOption]);\n }\n break;\n }\n\n case \"clear\":\n if (onClear) {\n onClear();\n }\n\n if (!isControlled) {\n if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);\n else setSelected([]);\n }\n break;\n }\n };\n\n let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;\n\n // @ts-expect-error - We need to check if the default export is available\n DropDownComponent = DropDownComponent.default || DropDownComponent;\n\n const asyncAdditions = {\n ...(asyncOptions && {\n loadOptions: asyncOptions,\n cacheOptions,\n ...(defaultOptions && { defaultOptions })\n })\n };\n\n const additions = {\n ...(!asyncOptions && { options }),\n ...(multi && {\n isMulti: true\n })\n };\n\n const closeMenuOnScroll = useCallback(\n (event: React.FocusEvent) => {\n const scrolledElement = event.target;\n if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {\n return false;\n }\n return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;\n },\n [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]\n );\n\n const calculatedPlaceholder = useMemo(\n () =>\n allowPlaceholderEllipsis ? (\n <Text type=\"text2\" color=\"inherit\">\n {placeholder}\n </Text>\n ) : (\n placeholder\n ),\n [allowPlaceholderEllipsis, placeholder]\n );\n\n return (\n <DropDownComponent\n className={cx(styles.dropdown, className)}\n selectProps={customProps}\n components={{\n DropdownIndicator,\n Menu,\n ClearIndicator,\n Input,\n Option,\n Control,\n SingleValue,\n ...(multi && {\n MultiValue: NOOP, // We need it for react-select to behave nice with \"multi\"\n ValueContainer: MultiValueContainer\n }),\n ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })\n }}\n // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling\n closeMenuOnScroll={closeMenuOnScroll}\n size={size}\n noOptionsMessage={noOptionsMessage}\n placeholder={calculatedPlaceholder}\n isDisabled={disabled}\n isClearable={!readOnly && clearable}\n isSearchable={!readOnly}\n readOnly={readOnly}\n aria-readonly={readOnly}\n aria-label={overrideAriaLabel}\n aria-details={tooltipContent}\n aria-haspopup=\"listbox\"\n defaultValue={defaultValue}\n value={value}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onFocus={onFocus}\n onBlur={onBlur}\n onMenuScrollToBottom={onMenuScrollToBottom}\n captureMenuScroll={captureMenuScroll}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onInputChange={onInputChange}\n openMenuOnFocus={openMenuOnFocus}\n openMenuOnClick={openMenuOnClick}\n focusedOptionId={focusedOptionId}\n isRtl={rtl}\n styles={inlineStyles}\n theme={customTheme}\n maxMenuHeight={maxMenuHeight}\n menuPortalTarget={overrideMenuPortalTarget}\n menuPlacement={menuPlacement}\n menuPosition={menuPosition}\n menuIsOpen={!readOnly && menuIsOpen}\n tabIndex={tabIndex}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n data-vibe={ComponentVibeId.DROPDOWN}\n autoFocus={autoFocus}\n closeMenuOnSelect={closeMenuOnSelect}\n ref={ref as React.Ref<any>}\n withMandatoryDefaultOptions={withMandatoryDefaultOptions}\n isOptionSelected={isOptionSelected}\n isLoading={isLoading}\n loadingMessage={loadingMessage}\n tabSelectsValue={tabSelectsValue}\n filterOption={filterOption}\n inputValue={inputValue}\n blurInputOnSelect={blurInputOnSelect}\n {...asyncAdditions}\n {...additions}\n />\n );\n }\n);\n\ninterface DropdownStaticProps {\n sizes: typeof BaseSizes;\n chipColors: typeof DROPDOWN_CHIP_COLORS;\n menuPlacements: typeof DROPDOWN_MENU_PLACEMENT;\n menuPositions: typeof DROPDOWN_MENU_POSITION;\n createFilter: typeof createFilter;\n}\n\nexport default withStaticProps<DropdownComponentProps, DropdownStaticProps>(Dropdown, {\n sizes: BaseSizes,\n chipColors: DROPDOWN_CHIP_COLORS,\n menuPlacements: DROPDOWN_MENU_PLACEMENT,\n menuPositions: DROPDOWN_MENU_POSITION,\n createFilter\n});\n\nfunction isTestEnv() {\n try {\n return (\n typeof require === \"function\" &&\n typeof module !== \"undefined\" &&\n typeof process !== \"undefined\" &&\n process.env.NODE_ENV === \"test\"\n );\n } catch (e) {\n return false;\n }\n}\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","optionWrapperClassName","singleValueWrapperClassName","dropdownMenuWrapperClassName","_ref$placeholder","placeholder","allowPlaceholderEllipsis","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$onMenuOpen","onMenuOpen","NOOP","_ref$onMenuClose","onMenuClose","_ref$onFocus","onFocus","_ref$onBlur","onBlur","_ref$onScroll","onScroll","_ref$onMenuScrollToBo","onMenuScrollToBottom","_ref$onChange","onChange","customOnChange","_ref$searchable","searchable","_ref$captureMenuScrol","captureMenuScroll","_ref$options","options","defaultValue","customValue","value","noOptionsMessage","openMenuOnFocus","openMenuOnClick","_ref$clearable","clearable","OptionRenderer","optionRenderer","ValueRenderer","valueRenderer","menuRenderer","_ref$menuPlacement","menuPlacement","rtl","_ref$size","size","asyncOptions","cacheOptions","defaultOptions","isVirtualized","menuPortalTarget","_ref$extraStyles","extraStyles","defaultCustomStyles","maxMenuHeight","menuIsOpen","_ref$tabIndex","tabIndex","_ref$id","id","DROPDOWN_ID","_ref$menuId","menuId","DROPDOWN_MENU_ID","_ref$menuAriaLabel","menuAriaLabel","DROPDOWN_MENU_ARIA_LABEL","_ref$inputAriaLabel","inputAriaLabel","DROPDOWN_INPUT_ARIA_LABEL","_ref$autoFocus","autoFocus","_ref$multi","multi","_ref$multiline","multiline","customOnOptionRemove","onOptionRemove","onOptionSelect","onClear","_ref$onInputChange","onInputChange","_ref$closeMenuOnSelec","closeMenuOnSelect","_ref$closeMenuOnScrol","closeMenuOnScroll","customCloseMenuOnScroll","_ref$withMandatoryDef","withMandatoryDefaultOptions","isOptionSelected","_ref$insideOverflowCo","insideOverflowContainer","_ref$insideOverflowWi","insideOverflowWithTransformContainer","_ref$insideLayerConte","insideLayerContext","_ref$tooltipContent","tooltipContent","_ref$onKeyDown","onKeyDown","_ref$isLoading","isLoading","loadingMessage","ariaLabel","_ref$tabSelectsValue","tabSelectsValue","popupsContainerSelector","filterOption","_ref$menuPosition","menuPosition","dataTestId","_ref$withGroupDivider","withGroupDivider","inputValue","blurInputOnSelect","multiValueDialogClassName","controlRef","useRef","layerRef","useContext","LayerContext","overrideMenuPortalTarget","current","document","querySelector","overrideDefaultValue","useMemo","Array","isArray","map","df","Object","assign","isMandatory","BaseSelect","prototype","renderLiveRegion","_useState","useState","_useState2","_slicedToArray","WindowedMenuList","setWindowedMenuList","useEffect","isClient","require","module","process","env","NODE_ENV","e","isTestEnv","import","then","_useState3","_useState4","selected","setSelected","_useState5","_useState6","focusedOptionId","setFocusedOptionId","finalOptionRenderer","finalValueRenderer","isControlled","selectedOptions","selectedOptionsMap","reduce","acc","option","_defineProperty","overrideAriaLabel","concat","o","label","join","inlineStyles","baseStyles","generateBaseStyles","customStyles","mergedStyles","entries","accumulator","_ref2","_ref3","stylesGroup","stylesFn","defaultStyles","state","providedFn","provided","ADD_AUTO_HEIGHT_COMPONENTS","forEach","component","original","height","originalValueContainer","valueContainer","paddingLeft","Menu","useCallback","props","React","createElement","MenuComponent","Renderer","DropdownIndicator","DropdownIndicatorComponent","Option","OptionComponent","Input","_props$selectProps","selectProps","components","role","undefined","SingleValue","SingleValueComponent","selectedOption","ClearIndicator","ClearIndicatorComponent","optionValue","newSelectedOptions","filter","customProps","onSelectedDelete","isMultiline","dialogClassName","DropDownComponent","AsyncSelect","Select","default","asyncAdditions","loadOptions","additions","isMulti","event","scrolledElement","target","parentElement","_a","classList","contains","menuStyles","dropdownMenuWrapper","calculatedPlaceholder","Text","type","color","cx","styles","dropdown","Control","MultiValue","ValueContainer","MultiValueContainer","MenuList","isDisabled","isClearable","isSearchable","meta","action","_toConsumableArray","isRtl","theme","customTheme","getTestId","ComponentDefaultTestId","DROPDOWN","ComponentVibeId","sizes","BaseSizes","chipColors","DROPDOWN_CHIP_COLORS","menuPlacements","DROPDOWN_MENU_PLACEMENT","menuPositions","DROPDOWN_MENU_POSITION","createFilter"],"mappings":"spDA2CA,IAwdeA,EAAAA,EAxdEC,GACf,SAAAC,EA4EEC,GACE,IA3EAC,EAASF,EAATE,UACAC,EAAsBH,EAAtBG,uBACAC,EAA2BJ,EAA3BI,4BACAC,EAA4BL,EAA5BK,6BAA4BC,EAAAN,EAC5BO,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAChBE,EAAwBR,EAAxBQ,yBAAwBC,EAAAT,EACxBU,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAX,EAChBY,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAb,EAChBc,WAAAA,OAAaC,IAAHF,EAAGE,EAAIF,EAAAG,GAAAhB,EACjBiB,YAAAA,QAAcF,IAAHC,GAAGD,EAAIC,GAAAE,GAAAlB,EAClBmB,QAAAA,QAAUJ,IAAHG,GAAGH,EAAIG,GAAAE,GAAApB,EACdqB,OAAAA,QAASN,IAAHK,GAAGL,EAAIK,GAAAE,GAAAtB,EACbuB,SAAAA,QAAWR,IAAHO,GAAGP,EAAIO,GAAAE,GAAAxB,EACfyB,qBAAAA,QAAuBV,IAAHS,GAAGT,EAAIS,GAAAE,GAAA1B,EAC3B2B,SAAUC,QAAiBb,IAAHW,GAAGX,EAAIW,GAAAG,GAAA7B,EAC/B8B,WAAAA,QAAa,IAAHD,IAAOA,GAAAE,GAAA/B,EACjBgC,kBAAAA,QAAoB,IAAHD,IAAQA,GAAAE,GAAAjC,EACzBkC,QAAAA,QAAU,IAAHD,GAAG,GAAEA,GACZE,GAAYnC,EAAZmC,aACOC,GAAWpC,EAAlBqC,MACAC,GAAgBtC,EAAhBsC,iBACAC,GAAevC,EAAfuC,gBACAC,GAAexC,EAAfwC,gBAAeC,GAAAzC,EACf0C,UAAAA,QAAY,IAAHD,IAAOA,GAChBE,GAAc3C,EAAd2C,eACAC,GAAc5C,EAAd4C,eACAC,GAAa7C,EAAb6C,cACAC,GAAa9C,EAAb8C,cACAC,GAAY/C,EAAZ+C,aAAYC,GAAAhD,EACZiD,cAAAA,QAAgB,IAAHD,GAAG,SAAQA,GACxBE,GAAGlD,EAAHkD,IAAGC,GAAAnD,EACHoD,KAAAA,QAAO,IAAHD,GAAG,SAAQA,GACfE,GAAYrD,EAAZqD,aACAC,GAAYtD,EAAZsD,aACAC,GAAcvD,EAAduD,eACAC,GAAaxD,EAAbwD,cACAC,GAAgBzD,EAAhByD,iBAAgBC,GAAA1D,EAChB2D,YAAAA,QAAcC,IAAHF,GAAGE,EAAmBF,GACjCG,GAAa7D,EAAb6D,cACAC,GAAU9D,EAAV8D,WAAUC,GAAA/D,EACVgE,SAAAA,QAAW,IAAHD,GAAG,IAAGA,GAAAE,GAAAjE,EACdkE,GAAAA,QAAKC,IAAHF,GAAGE,EAAWF,GAAAG,GAAApE,EAChBqE,OAAAA,QAASC,IAAHF,GAAGE,EAAgBF,GAAAG,GAAAvE,EACzBwE,cAAAA,QAAgBC,IAAHF,GAAGE,EAAwBF,GAAAG,GAAA1E,EACxC2E,eAAAA,QAAiBC,IAAHF,GAAGE,EAAyBF,GAAAG,GAAA7E,EAC1C8E,UAAAA,QAAY,IAAHD,IAAQA,GAAAE,GAAA/E,EACjBgF,MAAAA,QAAQ,IAAHD,IAAQA,GAAAE,GAAAjF,EACbkF,UAAAA,QAAY,IAAHD,IAAQA,GACDE,GAAoBnF,EAApCoF,eACAC,GAAcrF,EAAdqF,eACAC,GAAOtF,EAAPsF,QAAOC,GAAAvF,EACPwF,cAAAA,QAAgBzE,IAAHwE,GAAGxE,EAAIwE,GAAAE,GAAAzF,EACpB0F,kBAAAA,QAAiB,IAAAD,IAAIT,GAAKS,GAAAE,GAAA3F,EAC1B4F,kBAAmBC,QAA0B,IAAHF,IAAQA,GAAAG,GAAA9F,EAClD+F,4BAAAA,QAA8B,IAAHD,IAAQA,GACnCE,GAAgBhG,EAAhBgG,iBAAgBC,GAAAjG,EAChBkG,wBAAAA,QAA0B,IAAHD,IAAQA,GAAAE,GAAAnG,EAC/BoG,qCAAAA,QAAuC,IAAHD,IAAQA,GAAAE,GAAArG,EAC5CsG,mBAAAA,QAAqB,IAAHD,IAAQA,GAAAE,GAAAvG,EAC1BwG,eAAAA,QAAiB,IAAHD,GAAG,GAAEA,GAAAE,GAAAzG,EACnB0G,UAAAA,QAAY3F,IAAH0F,GAAG1F,EAAI0F,GAAAE,GAAA3G,EAChB4G,UAAAA,QAAY,IAAHD,IAAQA,GACjBE,GAAc7G,EAAd6G,eACAC,GAAS9G,EAAT8G,UAASC,GAAA/G,EACTgH,gBAAAA,QAAkB,IAAHD,IAAOA,GACtBE,GAAuBjH,EAAvBiH,wBACAC,GAAYlH,EAAZkH,aAAYC,GAAAnH,EACZoH,aAAAA,QAAe,IAAHD,GAAG,WAAUA,GACVE,GAAUrH,EAAzB,eAAasH,GAAAtH,EACbuH,iBAAAA,QAAmB,IAAHD,IAAQA,GACxBE,GAAUxH,EAAVwH,WACAC,GAAiBzH,EAAjByH,kBACAC,GAAyB1H,EAAzB0H,0BAIIC,GAAaC,IACXC,GAAaC,EAAWC,GAAxBF,SACFG,GACH1B,KAAsBuB,cAAA,EAAAA,GAAUI,UACjCxE,IACCwD,IAA2BiB,SAASC,cAAclB,IAC/CmB,GAAuBC,GAAQ,WACnC,OAAIlG,GACKmG,MAAMC,QAAQpG,IAChBA,GAAkCqG,KAAI,SAAAC,GAAE,OAAIC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAMF,GAAI,CAAAG,aAAa,sCAC9DzG,IAA+B,CAAEyG,aAAa,IAGnDzG,EACT,GAAG,CAACA,KAEJ0G,EAAWC,UAAUC,iBAAmB,WACtC,OAAO,MAIT,IAAAC,GAAgDC,EAAS,MAAKC,GAAAC,EAAAH,GAAA,GAAvDI,GAAgBF,GAAA,GAAEG,GAAmBH,GAAA,GAC5CI,GAAU,WACJC,OA0XV,WACE,IACE,MACqB,mBAAZC,SACW,oBAAXC,QACY,oBAAZC,SACkB,SAAzBA,QAAQC,IAAIC,QAEf,CAAC,MAAOC,GACP,OAAO,CACR,CACH,CApYYC,GAKFC,OAAO,yBAAyBC,MAAK,SAAAP,GACnCJ,IAAoB,WAAA,OAAMI,EAAOL,mBACnC,IALAC,IAAoB,WAAA,OAAMG,QAAQ,yBAAyBJ,oBAQhE,GAAE,IAEH,IAAAa,GAAgChB,EAASb,IAAwB,IAAG8B,GAAAf,EAAAc,GAAA,GAA7DE,GAAQD,GAAA,GAAEE,GAAWF,GAAA,GAC5BG,GAA8CpB,EAAS,IAAGqB,GAAAnB,EAAAkB,GAAA,GAAnDE,GAAeD,GAAA,GAAEE,GAAkBF,GAAA,GACpCG,GAAsB7H,IAAkBD,GACxC+H,GAAqB5H,IAAiBD,GACtC8H,KAAiBvI,GACjBwI,GAAkBxI,SAAAA,GAAe+H,GACjCU,GAAqBxC,GAAQ,WACjC,OAAIC,MAAMC,QAAQqC,IACTA,GAAgBE,QAAO,SAACC,EAAKC,GAAM,OAAKtC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAMoC,GAAKE,EAACD,CAAAA,EAAAA,EAAO3I,MAAQ2I,GAAS,GAAE,CAAE,GAElF,EACT,GAAG,CAACJ,KAEEM,GAAoB7C,GAAQ,WAChC,OACEvB,IAAS,GAAAqE,OACNvK,EAAW,YAAc,GAAE,KAAAuK,OAAI3E,GAAc2E,KAAAA,OAC9C7C,MAAMC,QAAQqC,IAAgB,aAAAO,OAAgBP,GAAgBpC,KAAI,SAAA4C,GAAC,OAAIA,EAAEC,KAAK,IAAEC,KAAK,OAAU,SAGpG,GAAE,CAACxE,GAAWlG,EAAUgK,GAAiBpE,KACpCnE,GAAQ2C,GAAQ4F,GAAkBxI,GAElCmJ,GAAelD,GAAQ,WAE3B,IAAMmD,EAAaC,EAAmB,CACpCrI,KAAAA,GACAF,IAAAA,GACAgD,wBAAAA,GACAyB,WAAAA,GACAvB,qCAAAA,GACAmB,iBAAAA,GACAzF,WAAAA,GACAtB,yBAAAA,IAMIkL,EAAe/H,GAAY6H,GAG3BG,EAAoBjD,OAAOkD,QAAQF,GAAcZ,QAAO,SAACe,EAAWC,GAA6B,IAAAC,EAAA5C,EAAA2C,EAAA,GAA1BE,EAAWD,EAAA,GAAEE,EAAQF,EAAA,GAChG,OACKrD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAkD,GACHZ,EAACe,CAAAA,EAAAA,GAAc,SAACE,EAA2BC,GACzC,IAAMC,EAAaZ,EAAWQ,GACxBK,EAAWD,EAAaA,EAAWF,EAAeC,GAASD,EAEjE,OAAOD,EAASI,EAAUF,EAC3B,IAEJ,GAAE,CAAgB,GAEnB,GAAInH,GAAO,CACLE,IACFoH,EAA2BC,SAAQ,SAACC,GAClC,IAAMC,EAAWd,EAAaa,GAC9Bb,EAAaa,GAAa,SAACH,EAAsBF,GAAoB,sCAChEM,EAASJ,EAAUF,KACtBO,OAAQ,SAEZ,IAGF,IAAMC,EAAyBhB,EAAaiB,eAC5CjB,EAAaiB,eAAiB,SAACP,EAAsBF,GAAoB,OAAKzD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACzEgE,EAAuBN,EAAUF,KACpCU,YAAa,IAEhB,CAED,OAAOlB,CACT,GAAG,CACDvI,GACAF,GACAgD,GACAE,GACA5F,EACAmD,GACAqB,GACAE,KAGI4H,GAAOC,GACX,SAACC,GAAsB,OACrBC,EAAAC,cAACC,EACKzE,OAAAC,OAAA,CAAA,EAAAqE,GACJ9I,GAAIG,GACJyC,UAAWtC,GACX4I,SAAUrK,GACV1C,6BAA8BA,EAC9BkB,SAAUA,KACV,GAEJ,CAAClB,EAA8B0C,GAAcsB,GAAQG,GAAejD,KAGhE8L,GAAoBN,GACxB,SAACC,GAAkE,OACjEC,EAACC,cAAAI,mBAA+BN,EAAK,CAAE5J,KAAMA,KAAQ,GAEvD,CAACA,KAGGmK,GAASR,GACb,SAACC,GAAwB,OACvBC,gBAACO,EAAe9E,OAAAC,OAAA,CACd6B,mBAAoBA,IAChBwC,EACJ,CAAAI,SAAU3C,GACVtK,uBAAwBA,IAE3B,GACD,CAACsK,GAAqBtK,EAAwBqK,KAG1CiD,GAAQV,GACZ,SAACC,GACC,IAAAU,EAAwCV,EAAMW,YAAtCpD,EAAemD,EAAfnD,gBAAiBzG,EAAU4J,EAAV5J,WAEzB,OACEmJ,EAACC,cAAAU,EAAWH,uBACNT,EAAK,CAAA,wBAHgBzC,GAAmBzG,EAAayG,EAAkB,GAK3EsD,KAAK,WACU,iBAACjN,GAAYkD,EAChB,aAAAa,mBACGN,GACfzD,UAAWkB,SAAoBgM,IAGrC,GACA,CAACzJ,GAAQzD,IAGLmN,GAAchB,GAClB,SAACC,GAA6B,OAC5BC,gBAACe,EAAoBtF,OAAAC,OAAA,CAAA,EACfqE,EACJ,CAAApM,SAAUA,EACVwM,SAAU1C,GACVuD,eAAgBrD,GAAgB,GAChCxK,4BAA6BA,IAEhC,GACD,CAACsK,GAAoB9J,EAAUgK,GAAiBxK,IAG5C8N,GAAiBnB,GACrB,SAACC,GAAkE,OACjEC,EAACC,cAAAiB,mBAA4BnB,EAAK,CAAE5J,KAAMA,KAAQ,GAEpD,CAACA,KAGGgC,GAAiBiD,GAAQ,WAC7B,OAAO,SAAU+F,EAAqBvE,GAChC1E,IACFA,GAAqB0F,GAAmBuD,IAE1C,IAAMC,EAAqB/F,MAAMC,QAAQqC,IACrCA,GAAgB0D,QAAO,SAAAtD,GAAM,OAAIA,EAAO3I,QAAU+L,CAAW,IAC7DxD,GAEAhJ,IACFA,GAAeyM,EAAoBxE,GAErCO,GAAYiE,GAEf,GAAE,CAACzM,GAAgBuD,GAAsByF,GAAiBC,KAErD0D,GAAclG,GAClB,WAAA,MAAO,CACLuC,gBAAAA,GACA4D,iBAAkBpJ,GAClBqJ,YAAavJ,GACbgB,wBAAAA,GACAE,qCAAAA,GACAuB,WAAAA,GACAnB,eAAAA,GACAS,wBAAyBX,GAAqBuB,cAAQ,EAARA,GAAUI,QAAUhB,GAClE7D,KAAAA,GACAsL,gBAAiBhH,GACjB,GACF,CACEkD,GACAxF,GACAF,GACAgB,GACAE,GACAI,GACAqB,GACAZ,GACAX,GACAlD,GACAsE,KAmCAiH,GAAuCtL,GAAeuL,EAAcC,EAGxEF,GAAoBA,GAAkBG,SAAWH,GAEjD,IAAMI,oBACA1L,mBACF2L,YAAa3L,GACbC,aAAAA,IACIC,IAAkB,CAAEA,eAAAA,MAItB0L,GAASvG,OAAAC,OAAAD,OAAAC,OAAA,CAAA,GACRtF,IAAgB,CAAEnB,QAAAA,KACnB8C,IAAS,CACXkK,SAAS,IAIPtJ,GAAoBmH,GACxB,SAACoC,SACOC,EAAkBD,EAAME,OAC9B,QAAoC,UAAhCD,aAAe,EAAfA,EAAiBE,qBAAe,IAAAC,OAAA,EAAAA,EAAAC,UAAUC,SAASC,EAAWC,wBAG3D9J,IAA2BK,IAA2BE,GAC9D,GACD,CAACF,GAAyBE,GAAsCP,KAG5D+J,GAAwBvH,GAC5B,WAAA,OACE7H,EACEyM,EAAAC,cAAC2C,EAAK,CAAAC,KAAK,QAAQC,MAAM,WACtBxP,GAGHA,CACD,GACH,CAACC,EAA0BD,IAG7B,OACE0M,gBAAC0B,GAAiBjG,OAAAC,OAAA,CAChBzI,UAAW8P,EAAGC,EAAOC,SAAUhQ,GAC/ByN,YAAaY,GACbX,WAAUlF,OAAAC,OAAAD,OAAAC,OAAA,CACR0E,kBAAAA,GACAP,KAAAA,GACAoB,eAAAA,GACAT,MAAAA,GACAF,OAAAA,GACA4C,QAAAA,EACApC,YAAAA,IACI/I,IAAS,CACXoL,WAAYrP,EACZsP,eAAgBC,IAEd9M,IAAiB4F,IAAoB,CAAEmH,SAAUnH,KAGvDxD,kBAAmBA,GACnBxC,KAAMA,GACNd,iBAAkBA,GAClB/B,YAAaqP,GACbY,WAAY9P,EACZ+P,aAAc7P,GAAY8B,GAC1BgO,cAAe9P,EACfA,SAAUA,EAAQ,gBACHA,EAAQ,aACXsK,GACE,eAAA1E,mBACA,UACdrE,aAAcA,GACdE,MAAOA,GACPvB,WAAYA,EACZG,YAAaA,GACbE,QAASA,GACTE,OAAQA,GACRI,qBAAsBA,GACtBO,kBAAmBA,GACnBL,SAlHa,SAACqJ,EAA2C2F,GAK3D,OAJI/O,IACFA,GAAeoJ,EAAQ2F,GAGjBA,EAAKC,QACX,IAAK,gBACH,IAAM3C,EAAiBjJ,GAAQ2L,EAAK3F,OAASA,EAEzC3F,IACFA,GAAe4I,GAGZtD,IACHP,GAAW,GAAAe,OAAA0F,EAAKjG,IAAe,CAAEqD,KAEnC,MAGF,IAAK,QACC3I,IACFA,KAGGqF,IAC8BP,GAA7BrE,GAAyCqC,GAC5B,MAyFrB1B,UAAWA,GACXlB,cAAeA,GACfjD,gBAAiBA,GACjBC,gBAAiBA,GACjB+H,gBAAiBA,GACjBuG,MAAO5N,GACP+M,OAAQ1E,GACRwF,MAAOC,EACPnN,cAAeA,GACfJ,iBAAkBuE,GAClB/E,cAAeA,GACfmE,aAAcA,GACdtD,YAAalD,GAAYkD,GACzBE,SAAUA,GACVE,GAAIA,GAAE,cACOmD,IAAc4J,EAAUC,EAAuBC,SAAUjN,IAAG,YAC9DkN,EAAgBD,SAC3BrM,UAAWA,GACXY,kBAAmBA,GACnBzF,IAAKA,EACL8F,4BAA6BA,GAC7BC,iBAAkBA,GAClBY,UAAWA,GACXC,eAAgBA,GAChBG,gBAAiBA,GACjBE,aAAcA,GACdM,WAAYA,GACZC,kBAAmBA,IACfsH,GACAE,IAGV,IAWoF,CACpFoC,MAAOC,EACPC,WAAYC,EACZC,eAAgBC,EAChBC,cAAeC,EACfC,aAAAA"}
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport { BaseSizes, type SIZES_VALUES } from \"../../constants\";\nimport React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect, useContext } from \"react\";\nimport Select, { type InputProps, components, createFilter, type ActionMeta } from \"react-select\";\nimport AsyncSelect from \"react-select/async\";\nimport BaseSelect from \"react-select/base\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport MenuComponent from \"./components/menu/menu\";\nimport DropdownIndicatorComponent from \"./components/DropdownIndicator/DropdownIndicator\";\nimport OptionComponent from \"./components/option/option\";\nimport SingleValueComponent from \"./components/singleValue/singleValue\";\nimport ClearIndicatorComponent from \"./components/ClearIndicator/ClearIndicator\";\nimport MultiValueContainer from \"./components/MultiValueContainer/MultiValueContainer\";\nimport { isClient } from \"../../utils/ssr-utils\";\nimport {\n ADD_AUTO_HEIGHT_COMPONENTS,\n defaultCustomStyles,\n DROPDOWN_CHIP_COLORS,\n DROPDOWN_ID,\n DROPDOWN_INPUT_ARIA_LABEL,\n DROPDOWN_MENU_ARIA_LABEL,\n DROPDOWN_MENU_ID,\n DROPDOWN_MENU_PLACEMENT,\n DROPDOWN_MENU_POSITION\n} from \"./DropdownConstants\";\nimport generateBaseStyles, { customTheme } from \"./Dropdown.styles\";\nimport Control from \"./components/Control/Control\";\nimport Text from \"../Text/Text\";\nimport menuStyles from \"./components/menu/menu.module.scss\";\nimport styles from \"./Dropdown.module.scss\";\nimport {\n type DropdownOption,\n type DropdownState,\n type CustomMenuProps,\n type CustomOptionProps,\n type CustomSingleValueProps,\n type DropdownComponentProps\n} from \"./Dropdown.types\";\nimport { withStaticProps } from \"../../types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\nimport { LayerContext } from \"@vibe/layer\";\n\nconst Dropdown = forwardRef(\n (\n {\n className,\n optionWrapperClassName,\n singleValueWrapperClassName,\n dropdownMenuWrapperClassName,\n placeholder = \"\",\n allowPlaceholderEllipsis,\n disabled = false,\n readOnly = false,\n onMenuOpen = NOOP,\n onMenuClose = NOOP,\n onFocus = NOOP,\n onBlur = NOOP,\n onScroll = NOOP,\n onMenuScrollToBottom = NOOP,\n onChange: customOnChange = NOOP,\n searchable = true,\n captureMenuScroll = false,\n options = [],\n defaultValue,\n value: customValue,\n noOptionsMessage,\n openMenuOnFocus,\n openMenuOnClick,\n clearable = true,\n OptionRenderer,\n optionRenderer,\n ValueRenderer,\n valueRenderer,\n menuRenderer,\n menuPlacement = \"bottom\",\n rtl,\n size = \"medium\",\n asyncOptions,\n cacheOptions,\n defaultOptions,\n isVirtualized,\n menuPortalTarget,\n extraStyles = defaultCustomStyles,\n maxMenuHeight,\n menuIsOpen,\n tabIndex = \"0\",\n id = DROPDOWN_ID,\n menuId = DROPDOWN_MENU_ID,\n menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,\n inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,\n autoFocus = false,\n multi = false,\n multiline = false,\n onOptionRemove: customOnOptionRemove,\n onOptionSelect,\n onClear,\n onInputChange = NOOP,\n closeMenuOnSelect = !multi,\n closeMenuOnScroll: customCloseMenuOnScroll = false,\n withMandatoryDefaultOptions = false,\n isOptionSelected,\n insideOverflowContainer = false,\n insideOverflowWithTransformContainer = false,\n insideLayerContext = false,\n tooltipContent = \"\",\n onKeyDown = NOOP,\n isLoading = false,\n loadingMessage,\n ariaLabel,\n tabSelectsValue = true,\n popupsContainerSelector,\n filterOption,\n menuPosition = \"absolute\",\n \"data-testid\": dataTestId,\n withGroupDivider = false,\n inputValue,\n blurInputOnSelect,\n multiValueDialogClassName\n }: DropdownComponentProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const controlRef = useRef();\n const { layerRef } = useContext(LayerContext);\n const overrideMenuPortalTarget =\n (insideLayerContext && layerRef?.current) ||\n menuPortalTarget ||\n (popupsContainerSelector && document.querySelector(popupsContainerSelector));\n const overrideDefaultValue = useMemo(() => {\n if (defaultValue) {\n return Array.isArray(defaultValue)\n ? (defaultValue as DropdownOption[]).map(df => ({ ...df, isMandatory: true }))\n : { ...(defaultValue as DropdownOption), isMandatory: true };\n }\n\n return defaultValue;\n }, [defaultValue]);\n\n BaseSelect.prototype.renderLiveRegion = (): null => {\n return null;\n };\n\n // SSR support\n const [WindowedMenuList, setWindowedMenuList] = useState(null);\n useEffect(() => {\n if (isClient()) {\n if (isTestEnv()) {\n // eslint-disable-next-line @typescript-eslint/no-var-requires\n setWindowedMenuList(() => require(\"react-windowed-select\").WindowedMenuList);\n } else {\n // Dynamically import the specific named export from react-windowed-select for SSR support\n import(\"react-windowed-select\").then(module => {\n setWindowedMenuList(() => module.WindowedMenuList);\n });\n }\n }\n }, []);\n\n const [selected, setSelected] = useState(overrideDefaultValue || []);\n const [focusedOptionId, setFocusedOptionId] = useState(\"\");\n const finalOptionRenderer = optionRenderer || OptionRenderer;\n const finalValueRenderer = valueRenderer || ValueRenderer;\n const isControlled = !!customValue;\n const selectedOptions = customValue ?? selected;\n const selectedOptionsMap = useMemo(() => {\n if (Array.isArray(selectedOptions)) {\n return selectedOptions.reduce((acc, option) => ({ ...acc, [option.value]: option }), {});\n }\n return {};\n }, [selectedOptions]);\n\n const overrideAriaLabel = useMemo(() => {\n return (\n ariaLabel ||\n `${readOnly ? \"Readonly \" : \"\"} ${tooltipContent} ${\n Array.isArray(selectedOptions) ? `Selected: ${selectedOptions.map(o => o.label).join(\", \")}` : \"Select\"\n }`\n );\n }, [ariaLabel, readOnly, selectedOptions, tooltipContent]);\n const value = multi ? selectedOptions : customValue;\n\n const inlineStyles = useMemo(() => {\n // We first want to get the default stylized groups (e.g. \"container\", \"menu\").\n const baseStyles = generateBaseStyles({\n size,\n rtl,\n insideOverflowContainer,\n controlRef,\n insideOverflowWithTransformContainer,\n withGroupDivider,\n searchable,\n allowPlaceholderEllipsis\n });\n\n type BaseStyles = typeof baseStyles;\n\n // Then we want to run the consumer's root-level custom styles with our \"base\" override groups.\n const customStyles = extraStyles(baseStyles);\n\n // Lastly, we create a style groups object that makes sure we run each custom group with our basic overrides.\n const mergedStyles: any = Object.entries(customStyles).reduce((accumulator, [stylesGroup, stylesFn]) => {\n return {\n ...accumulator,\n [stylesGroup]: (defaultStyles: BaseStyles, state: DropdownState) => {\n const providedFn = baseStyles[stylesGroup as keyof BaseStyles];\n const provided = providedFn ? providedFn(defaultStyles, state) : defaultStyles;\n\n return stylesFn(provided, state);\n }\n };\n }, {} as BaseStyles);\n\n if (multi) {\n if (multiline) {\n ADD_AUTO_HEIGHT_COMPONENTS.forEach((component: string) => {\n const original = mergedStyles[component];\n mergedStyles[component] = (provided: BaseStyles, state: DropdownState) => ({\n ...original(provided, state),\n height: \"auto\"\n });\n });\n }\n\n const originalValueContainer = mergedStyles.valueContainer;\n mergedStyles.valueContainer = (provided: BaseStyles, state: DropdownState) => ({\n ...originalValueContainer(provided, state),\n paddingLeft: 6\n });\n }\n\n return mergedStyles;\n }, [\n size,\n rtl,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n allowPlaceholderEllipsis,\n extraStyles,\n multi,\n multiline\n ]);\n\n const Menu = useCallback(\n (props: CustomMenuProps) => (\n <MenuComponent\n {...props}\n id={menuId}\n ariaLabel={menuAriaLabel}\n Renderer={menuRenderer}\n dropdownMenuWrapperClassName={dropdownMenuWrapperClassName}\n onScroll={onScroll}\n />\n ),\n [dropdownMenuWrapperClassName, menuRenderer, menuId, menuAriaLabel, onScroll]\n );\n\n const DropdownIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <DropdownIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const Option = useCallback(\n (props: CustomOptionProps) => (\n <OptionComponent\n setFocusedOptionId={setFocusedOptionId}\n {...props}\n Renderer={finalOptionRenderer}\n optionWrapperClassName={optionWrapperClassName}\n />\n ),\n [finalOptionRenderer, optionWrapperClassName, setFocusedOptionId]\n );\n\n const Input = useCallback(\n (props: InputProps | any) => {\n const { focusedOptionId, menuIsOpen } = props.selectProps;\n const ariaActiveDescendant = focusedOptionId && menuIsOpen ? focusedOptionId : \"\";\n return (\n <components.Input\n {...props}\n aria-activedescendant={ariaActiveDescendant}\n role=\"combobox\"\n aria-expanded={!readOnly && menuIsOpen}\n aria-label={inputAriaLabel}\n aria-controls={menuId}\n readOnly={!searchable ? true : undefined}\n />\n );\n },\n [menuId, readOnly]\n );\n\n const SingleValue = useCallback(\n (props: CustomSingleValueProps) => (\n <SingleValueComponent\n {...props}\n readOnly={readOnly}\n Renderer={finalValueRenderer}\n selectedOption={selectedOptions[0]}\n singleValueWrapperClassName={singleValueWrapperClassName}\n />\n ),\n [finalValueRenderer, readOnly, selectedOptions, singleValueWrapperClassName]\n );\n\n const ClearIndicator = useCallback(\n (props: React.HTMLAttributes<HTMLElement> & { size?: SIZES_VALUES }) => (\n <ClearIndicatorComponent {...props} size={size} />\n ),\n [size]\n );\n\n const onOptionRemove = useMemo(() => {\n return function (optionValue: number, e: React.MouseEvent | React.KeyboardEvent) {\n if (customOnOptionRemove) {\n customOnOptionRemove(selectedOptionsMap[optionValue]);\n }\n const newSelectedOptions = Array.isArray(selectedOptions)\n ? selectedOptions.filter(option => option.value !== optionValue)\n : selectedOptions;\n\n if (customOnChange) {\n customOnChange(newSelectedOptions, e);\n }\n setSelected(newSelectedOptions);\n };\n }, [customOnChange, customOnOptionRemove, selectedOptions, selectedOptionsMap]);\n\n const customProps = useMemo(\n () => ({\n selectedOptions,\n onSelectedDelete: onOptionRemove,\n isMultiline: multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n controlRef,\n tooltipContent,\n popupsContainerSelector: insideLayerContext ? layerRef?.current : popupsContainerSelector,\n size,\n dialogClassName: multiValueDialogClassName\n }),\n [\n selectedOptions,\n onOptionRemove,\n multiline,\n insideOverflowContainer,\n insideOverflowWithTransformContainer,\n tooltipContent,\n layerRef,\n popupsContainerSelector,\n insideLayerContext,\n size,\n multiValueDialogClassName\n ]\n );\n const onChange = (option: DropdownOption | DropdownOption[], meta: ActionMeta<DropdownOption>) => {\n if (customOnChange) {\n customOnChange(option, meta);\n }\n\n switch (meta.action) {\n case \"select-option\": {\n const selectedOption = multi ? meta.option : option;\n\n if (onOptionSelect) {\n onOptionSelect(selectedOption);\n }\n\n if (!isControlled) {\n setSelected([...selectedOptions, selectedOption]);\n }\n break;\n }\n\n case \"clear\":\n if (onClear) {\n onClear();\n }\n\n if (!isControlled) {\n if (withMandatoryDefaultOptions) setSelected(overrideDefaultValue);\n else setSelected([]);\n }\n break;\n }\n };\n\n let DropDownComponent: React.ElementType = asyncOptions ? AsyncSelect : Select;\n\n // @ts-expect-error - We need to check if the default export is available\n DropDownComponent = DropDownComponent.default || DropDownComponent;\n\n const asyncAdditions = {\n ...(asyncOptions && {\n loadOptions: asyncOptions,\n cacheOptions,\n ...(defaultOptions && { defaultOptions })\n })\n };\n\n const additions = {\n ...(!asyncOptions && { options }),\n ...(multi && {\n isMulti: true\n })\n };\n\n const closeMenuOnScroll = useCallback(\n (event: React.FocusEvent) => {\n const scrolledElement = event.target;\n if (scrolledElement?.parentElement?.classList.contains(menuStyles.dropdownMenuWrapper)) {\n return false;\n }\n return customCloseMenuOnScroll || insideOverflowContainer || insideOverflowWithTransformContainer;\n },\n [insideOverflowContainer, insideOverflowWithTransformContainer, customCloseMenuOnScroll]\n );\n\n const calculatedPlaceholder = useMemo(\n () =>\n allowPlaceholderEllipsis ? (\n <Text type=\"text2\" color=\"inherit\">\n {placeholder}\n </Text>\n ) : (\n placeholder\n ),\n [allowPlaceholderEllipsis, placeholder]\n );\n\n return (\n <DropDownComponent\n className={cx(styles.dropdown, className)}\n selectProps={customProps}\n components={{\n DropdownIndicator,\n Menu,\n ClearIndicator,\n Input,\n Option,\n Control,\n SingleValue,\n ...(multi && {\n MultiValue: NOOP, // We need it for react-select to behave nice with \"multi\"\n ValueContainer: MultiValueContainer\n }),\n ...(isVirtualized && WindowedMenuList && { MenuList: WindowedMenuList })\n }}\n // When inside scroll we set the menu position by js and we can't follow the drop down location while use scrolling\n closeMenuOnScroll={closeMenuOnScroll}\n size={size}\n noOptionsMessage={noOptionsMessage}\n placeholder={calculatedPlaceholder}\n isDisabled={disabled}\n isClearable={!readOnly && clearable}\n isSearchable={!readOnly}\n readOnly={readOnly}\n aria-readonly={readOnly}\n aria-label={overrideAriaLabel}\n aria-details={tooltipContent}\n aria-haspopup=\"listbox\"\n defaultValue={defaultValue}\n value={value}\n onMenuOpen={onMenuOpen}\n onMenuClose={onMenuClose}\n onFocus={onFocus}\n onBlur={onBlur}\n onMenuScrollToBottom={onMenuScrollToBottom}\n captureMenuScroll={captureMenuScroll}\n onChange={onChange}\n onKeyDown={onKeyDown}\n onInputChange={onInputChange}\n openMenuOnFocus={openMenuOnFocus}\n openMenuOnClick={openMenuOnClick}\n focusedOptionId={focusedOptionId}\n isRtl={rtl}\n styles={inlineStyles}\n theme={customTheme}\n maxMenuHeight={maxMenuHeight}\n menuPortalTarget={overrideMenuPortalTarget}\n menuPlacement={menuPlacement}\n menuPosition={menuPosition}\n menuIsOpen={!readOnly && menuIsOpen}\n tabIndex={tabIndex}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.DROPDOWN, id)}\n data-vibe={ComponentVibeId.DROPDOWN}\n autoFocus={autoFocus}\n closeMenuOnSelect={closeMenuOnSelect}\n ref={ref as React.Ref<any>}\n withMandatoryDefaultOptions={withMandatoryDefaultOptions}\n isOptionSelected={isOptionSelected}\n isLoading={isLoading}\n loadingMessage={loadingMessage}\n tabSelectsValue={tabSelectsValue}\n filterOption={filterOption}\n inputValue={inputValue}\n blurInputOnSelect={blurInputOnSelect}\n {...asyncAdditions}\n {...additions}\n />\n );\n }\n);\n\ninterface DropdownStaticProps {\n sizes: typeof BaseSizes;\n chipColors: typeof DROPDOWN_CHIP_COLORS;\n menuPlacements: typeof DROPDOWN_MENU_PLACEMENT;\n menuPositions: typeof DROPDOWN_MENU_POSITION;\n createFilter: typeof createFilter;\n}\n\nexport default withStaticProps<DropdownComponentProps, DropdownStaticProps>(Dropdown, {\n sizes: BaseSizes,\n chipColors: DROPDOWN_CHIP_COLORS,\n menuPlacements: DROPDOWN_MENU_PLACEMENT,\n menuPositions: DROPDOWN_MENU_POSITION,\n createFilter\n});\n\nfunction isTestEnv() {\n try {\n return (\n typeof require === \"function\" &&\n typeof module !== \"undefined\" &&\n typeof process !== \"undefined\" &&\n process.env.NODE_ENV === \"test\"\n );\n } catch (e) {\n return false;\n }\n}\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","optionWrapperClassName","singleValueWrapperClassName","dropdownMenuWrapperClassName","_ref$placeholder","placeholder","allowPlaceholderEllipsis","_ref$disabled","disabled","_ref$readOnly","readOnly","_ref$onMenuOpen","onMenuOpen","NOOP","_ref$onMenuClose","onMenuClose","_ref$onFocus","onFocus","_ref$onBlur","onBlur","_ref$onScroll","onScroll","_ref$onMenuScrollToBo","onMenuScrollToBottom","_ref$onChange","onChange","customOnChange","_ref$searchable","searchable","_ref$captureMenuScrol","captureMenuScroll","_ref$options","options","defaultValue","customValue","value","noOptionsMessage","openMenuOnFocus","openMenuOnClick","_ref$clearable","clearable","OptionRenderer","optionRenderer","ValueRenderer","valueRenderer","menuRenderer","_ref$menuPlacement","menuPlacement","rtl","_ref$size","size","asyncOptions","cacheOptions","defaultOptions","isVirtualized","menuPortalTarget","_ref$extraStyles","extraStyles","defaultCustomStyles","maxMenuHeight","menuIsOpen","_ref$tabIndex","tabIndex","_ref$id","id","DROPDOWN_ID","_ref$menuId","menuId","DROPDOWN_MENU_ID","_ref$menuAriaLabel","menuAriaLabel","DROPDOWN_MENU_ARIA_LABEL","_ref$inputAriaLabel","inputAriaLabel","DROPDOWN_INPUT_ARIA_LABEL","_ref$autoFocus","autoFocus","_ref$multi","multi","_ref$multiline","multiline","customOnOptionRemove","onOptionRemove","onOptionSelect","onClear","_ref$onInputChange","onInputChange","_ref$closeMenuOnSelec","closeMenuOnSelect","_ref$closeMenuOnScrol","closeMenuOnScroll","customCloseMenuOnScroll","_ref$withMandatoryDef","withMandatoryDefaultOptions","isOptionSelected","_ref$insideOverflowCo","insideOverflowContainer","_ref$insideOverflowWi","insideOverflowWithTransformContainer","_ref$insideLayerConte","insideLayerContext","_ref$tooltipContent","tooltipContent","_ref$onKeyDown","onKeyDown","_ref$isLoading","isLoading","loadingMessage","ariaLabel","_ref$tabSelectsValue","tabSelectsValue","popupsContainerSelector","filterOption","_ref$menuPosition","menuPosition","dataTestId","_ref$withGroupDivider","withGroupDivider","inputValue","blurInputOnSelect","multiValueDialogClassName","controlRef","useRef","layerRef","useContext","LayerContext","overrideMenuPortalTarget","current","document","querySelector","overrideDefaultValue","useMemo","Array","isArray","map","df","Object","assign","isMandatory","BaseSelect","prototype","renderLiveRegion","_useState","useState","_useState2","_slicedToArray","WindowedMenuList","setWindowedMenuList","useEffect","isClient","require","module","process","env","NODE_ENV","e","isTestEnv","import","then","_useState3","_useState4","selected","setSelected","_useState5","_useState6","focusedOptionId","setFocusedOptionId","finalOptionRenderer","finalValueRenderer","isControlled","selectedOptions","selectedOptionsMap","reduce","acc","option","_defineProperty","overrideAriaLabel","concat","o","label","join","inlineStyles","baseStyles","generateBaseStyles","customStyles","mergedStyles","entries","accumulator","_ref2","_ref3","stylesGroup","stylesFn","defaultStyles","state","providedFn","provided","ADD_AUTO_HEIGHT_COMPONENTS","forEach","component","original","height","originalValueContainer","valueContainer","paddingLeft","Menu","useCallback","props","React","createElement","MenuComponent","Renderer","DropdownIndicator","DropdownIndicatorComponent","Option","OptionComponent","Input","_props$selectProps","selectProps","components","role","undefined","SingleValue","SingleValueComponent","selectedOption","ClearIndicator","ClearIndicatorComponent","optionValue","newSelectedOptions","filter","customProps","onSelectedDelete","isMultiline","dialogClassName","DropDownComponent","AsyncSelect","Select","default","asyncAdditions","loadOptions","additions","isMulti","event","scrolledElement","target","parentElement","_a","classList","contains","menuStyles","dropdownMenuWrapper","calculatedPlaceholder","Text","type","color","cx","styles","dropdown","Control","MultiValue","ValueContainer","MultiValueContainer","MenuList","isDisabled","isClearable","isSearchable","meta","action","_toConsumableArray","isRtl","theme","customTheme","getTestId","ComponentDefaultTestId","DROPDOWN","ComponentVibeId","sizes","BaseSizes","chipColors","DROPDOWN_CHIP_COLORS","menuPlacements","DROPDOWN_MENU_PLACEMENT","menuPositions","DROPDOWN_MENU_POSITION","createFilter"],"mappings":"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"}
|
package/dist/mocked_classnames/src/components/Dropdown/components/ChildrenContent/ChildrenContent.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import t,{useCallback as e}from"react";import r from"../../../Avatar/Avatar.js";import o from"../../../Text/Text.js";import a from"./ChildrenContent.module.scss.js";import{getTestId as n}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as i}from"../../../../tests/constants.js";import s from"../../../../../components/icon/dist/Icon/Icon.js";var c=function(c){var l=c.data,m=c.children,u=c.readOnly,d=e((function(t){u&&t.stopPropagation()}),[u]);return t.createElement("div",{className:a.valueContainer,onMouseDown:d,"data-testid":n(i.DROPDOWN_OPTION_CONTENT)},(null==l?void 0:l.leftRenderer)||t.createElement(t.Fragment,null,(null==l?void 0:l.leftAvatar)&&t.createElement(r,{className:a.avatar,withoutBorder:!0,square:l.square,src:l.leftAvatar,type:"img",customSize:20}),(null==l?void 0:l.leftIcon)&&t.createElement(s,{className:a.icon,iconSize:18,icon:l.leftIcon})),t.createElement(o,{type:o.types.TEXT2,color:o.colors.INHERIT},m),(null==l?void 0:l.rightIcon)&&t.createElement(s,{iconSize:18,icon:l.rightIcon}),(null==l?void 0:l.rightAvatar)&&t.createElement(r,{withoutBorder:!0,square:l.square,src:l.rightAvatar,type:"img",customSize:20}))};export{c as ChildrenContent};
|
|
2
2
|
//# sourceMappingURL=ChildrenContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChildrenContent.js","sources":["../../../../../../../src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport Avatar from \"../../../Avatar/Avatar\";\nimport { Icon } from \"@vibe/icon\";\nimport Text from \"../../../Text/Text\";\nimport styles from \"./ChildrenContent.module.scss\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\n\nexport const ChildrenContent = ({ data, children, readOnly }) => {\n const onMouseDown = useCallback(\n event => {\n if (readOnly) {\n event.stopPropagation();\n }\n },\n [readOnly]\n );\n\n return (\n <div\n className={styles.valueContainer}\n onMouseDown={onMouseDown}\n data-testid={getTestId(ComponentDefaultTestId.DROPDOWN_OPTION_CONTENT)}\n >\n {data?.leftRenderer || (\n <>\n {data?.leftAvatar && (\n <Avatar\n className={styles.avatar}\n withoutBorder\n square={data.square}\n src={data.leftAvatar}\n type=\"img\"\n customSize={20}\n />\n )}\n {data?.leftIcon && <Icon className={styles.icon} iconSize={18} icon={data.leftIcon} />}\n </>\n )}\n <Text type={Text.types.TEXT2} color={Text.colors.INHERIT}>\n {children}\n </Text>\n {data?.rightIcon && <Icon iconSize={18} icon={data.rightIcon} />}\n {data?.rightAvatar && (\n <Avatar withoutBorder square={data.square} src={data.rightAvatar} type=\"img\" customSize={20} />\n )}\n </div>\n );\n};\n"],"names":["ChildrenContent","_ref","data","children","readOnly","onMouseDown","useCallback","event","stopPropagation","React","createElement","className","styles","valueContainer","getTestId","ComponentDefaultTestId","DROPDOWN_OPTION_CONTENT","leftRenderer","Fragment","leftAvatar","Avatar","avatar","withoutBorder","square","src","type","customSize","leftIcon","Icon","icon","iconSize","Text","types","TEXT2","color","colors","INHERIT","rightIcon","rightAvatar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChildrenContent.js","sources":["../../../../../../../src/components/Dropdown/components/ChildrenContent/ChildrenContent.jsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport Avatar from \"../../../Avatar/Avatar\";\nimport { Icon } from \"@vibe/icon\";\nimport Text from \"../../../Text/Text\";\nimport styles from \"./ChildrenContent.module.scss\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\n\nexport const ChildrenContent = ({ data, children, readOnly }) => {\n const onMouseDown = useCallback(\n event => {\n if (readOnly) {\n event.stopPropagation();\n }\n },\n [readOnly]\n );\n\n return (\n <div\n className={styles.valueContainer}\n onMouseDown={onMouseDown}\n data-testid={getTestId(ComponentDefaultTestId.DROPDOWN_OPTION_CONTENT)}\n >\n {data?.leftRenderer || (\n <>\n {data?.leftAvatar && (\n <Avatar\n className={styles.avatar}\n withoutBorder\n square={data.square}\n src={data.leftAvatar}\n type=\"img\"\n customSize={20}\n />\n )}\n {data?.leftIcon && <Icon className={styles.icon} iconSize={18} icon={data.leftIcon} />}\n </>\n )}\n <Text type={Text.types.TEXT2} color={Text.colors.INHERIT}>\n {children}\n </Text>\n {data?.rightIcon && <Icon iconSize={18} icon={data.rightIcon} />}\n {data?.rightAvatar && (\n <Avatar withoutBorder square={data.square} src={data.rightAvatar} type=\"img\" customSize={20} />\n )}\n </div>\n );\n};\n"],"names":["ChildrenContent","_ref","data","children","readOnly","onMouseDown","useCallback","event","stopPropagation","React","createElement","className","styles","valueContainer","getTestId","ComponentDefaultTestId","DROPDOWN_OPTION_CONTENT","leftRenderer","Fragment","leftAvatar","Avatar","avatar","withoutBorder","square","src","type","customSize","leftIcon","Icon","icon","iconSize","Text","types","TEXT2","color","colors","INHERIT","rightIcon","rightAvatar"],"mappings":"0WAQaA,EAAkB,SAAHC,GAAqC,IAA/BC,EAAID,EAAJC,KAAMC,EAAQF,EAARE,SAAUC,EAAQH,EAARG,SAC1CC,EAAcC,GAClB,SAAAC,GACMH,GACFG,EAAMC,iBAEV,GACA,CAACJ,IAGH,OACEK,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAOC,eAClBR,YAAaA,EACb,cAAaS,EAAUC,EAAuBC,2BAE7Cd,aAAAA,EAAAA,EAAMe,eACLR,EAAAC,cAAAD,EAAAS,SAAA,MACGhB,aAAAA,EAAAA,EAAMiB,aACLV,EAAAC,cAACU,EAAM,CACLT,UAAWC,EAAOS,OAClBC,eAAa,EACbC,OAAQrB,EAAKqB,OACbC,IAAKtB,EAAKiB,WACVM,KAAK,MACLC,WAAY,MAGfxB,aAAI,EAAJA,EAAMyB,WAAYlB,EAAAC,cAACkB,EAAI,CAACjB,UAAWC,EAAOiB,KAAMC,SAAU,GAAID,KAAM3B,EAAKyB,YAG9ElB,EAAAC,cAACqB,EAAI,CAACN,KAAMM,EAAKC,MAAMC,MAAOC,MAAOH,EAAKI,OAAOC,SAC9CjC,IAEFD,aAAI,EAAJA,EAAMmC,YAAa5B,EAAAC,cAACkB,EAAI,CAACE,SAAU,GAAID,KAAM3B,EAAKmC,aAClDnC,aAAI,EAAJA,EAAMoC,cACL7B,EAAAC,cAACU,EAAM,CAACE,eAAa,EAACC,OAAQrB,EAAKqB,OAAQC,IAAKtB,EAAKoC,YAAab,KAAK,MAAMC,WAAY,KAIjG"}
|
package/dist/mocked_classnames/src/components/Dropdown/components/ClearIndicator/ClearIndicator.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{extends as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import r from"react";import{components as o}from"react-select";import{
|
|
1
|
+
import{extends as e}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import r from"react";import{components as o}from"react-select";import{getIndicatorSize as t}from"../../Dropdown.styles.js";import i from"../../../../../components/icon/dist/Icon/Icon.js";import a from"../../../../../icons/dist/react/CloseSmall.js";var n=function(n){var s=n.size;return r.createElement(o.ClearIndicator,e({},n,{className:"clear-indicator"}),r.createElement(i,{iconType:"svg",icon:a,iconSize:t(s),tabindex:"-1"}))};export{n as default};
|
|
2
2
|
//# sourceMappingURL=ClearIndicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ClearIndicator.js","sources":["../../../../../../../src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx"],"sourcesContent":["import React from \"react\";\nimport { components } from \"react-select\";\nimport { Icon } from \"@vibe/icon\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getIndicatorSize } from \"../../Dropdown.styles\";\n\nconst ClearIndicator = props => {\n const { size } = props;\n return (\n <components.ClearIndicator {...props} className=\"clear-indicator\">\n <Icon iconType=\"svg\" icon={CloseSmall} iconSize={getIndicatorSize(size)} tabindex=\"-1\" />\n </components.ClearIndicator>\n );\n};\n\nexport default ClearIndicator;\n"],"names":["ClearIndicator","props","size","React","createElement","components","_extends","className","Icon","iconType","icon","CloseSmall","iconSize","getIndicatorSize","tabindex"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ClearIndicator.js","sources":["../../../../../../../src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx"],"sourcesContent":["import React from \"react\";\nimport { components } from \"react-select\";\nimport { Icon } from \"@vibe/icon\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { getIndicatorSize } from \"../../Dropdown.styles\";\n\nconst ClearIndicator = props => {\n const { size } = props;\n return (\n <components.ClearIndicator {...props} className=\"clear-indicator\">\n <Icon iconType=\"svg\" icon={CloseSmall} iconSize={getIndicatorSize(size)} tabindex=\"-1\" />\n </components.ClearIndicator>\n );\n};\n\nexport default ClearIndicator;\n"],"names":["ClearIndicator","props","size","React","createElement","components","_extends","className","Icon","iconType","icon","CloseSmall","iconSize","getIndicatorSize","tabindex"],"mappings":"uUAMA,IAAMA,EAAiB,SAAAC,GACrB,IAAQC,EAASD,EAATC,KACR,OACEC,EAAAC,cAACC,EAAWL,eAAcM,EAAA,CAAA,EAAKL,EAAK,CAAEM,UAAU,oBAC9CJ,EAAAC,cAACI,EAAI,CAACC,SAAS,MAAMC,KAAMC,EAAYC,SAAUC,EAAiBX,GAAOY,SAAS,OAGxF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{extends as
|
|
1
|
+
import{extends as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import r from"react";import{components as e}from"react-select";import{getIndicatorSize as t}from"../../Dropdown.styles.js";import i from"../../../../../components/icon/dist/Icon/Icon.js";import n from"../../../../../icons/dist/react/DropdownChevronDown.js";var s=function(s){var c=s.isDisabled,a=s.size;return r.createElement(e.DropdownIndicator,o({},s,{className:"dropdown-indicator"}),r.createElement(i,{iconType:"svg",icon:n,iconSize:t(a),tabindex:"-1",clickable:!c}))};export{s as default};
|
|
2
2
|
//# sourceMappingURL=DropdownIndicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownIndicator.js","sources":["../../../../../../../src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx"],"sourcesContent":["import React from \"react\";\nimport { components } from \"react-select\";\nimport { Icon } from \"@vibe/icon\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { getIndicatorSize } from \"../../Dropdown.styles\";\n\nconst DropdownIndicator = props => {\n const { isDisabled, size } = props;\n return (\n <components.DropdownIndicator {...props} className=\"dropdown-indicator\">\n <Icon\n iconType=\"svg\"\n icon={DropdownChevronDown}\n iconSize={getIndicatorSize(size)}\n tabindex=\"-1\"\n clickable={!isDisabled}\n />\n </components.DropdownIndicator>\n );\n};\nexport default DropdownIndicator;\n"],"names":["DropdownIndicator","props","isDisabled","size","React","createElement","components","_extends","className","Icon","iconType","icon","DropdownChevronDown","iconSize","getIndicatorSize","tabindex","clickable"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownIndicator.js","sources":["../../../../../../../src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx"],"sourcesContent":["import React from \"react\";\nimport { components } from \"react-select\";\nimport { Icon } from \"@vibe/icon\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { getIndicatorSize } from \"../../Dropdown.styles\";\n\nconst DropdownIndicator = props => {\n const { isDisabled, size } = props;\n return (\n <components.DropdownIndicator {...props} className=\"dropdown-indicator\">\n <Icon\n iconType=\"svg\"\n icon={DropdownChevronDown}\n iconSize={getIndicatorSize(size)}\n tabindex=\"-1\"\n clickable={!isDisabled}\n />\n </components.DropdownIndicator>\n );\n};\nexport default DropdownIndicator;\n"],"names":["DropdownIndicator","props","isDisabled","size","React","createElement","components","_extends","className","Icon","iconType","icon","DropdownChevronDown","iconSize","getIndicatorSize","tabindex","clickable"],"mappings":"gVAMA,IAAMA,EAAoB,SAAAC,GACxB,IAAQC,EAAqBD,EAArBC,WAAYC,EAASF,EAATE,KACpB,OACEC,EAAAC,cAACC,EAAWN,kBAAiBO,EAAA,CAAA,EAAKN,EAAK,CAAEO,UAAU,uBACjDJ,EAAAC,cAACI,EAAI,CACHC,SAAS,MACTC,KAAMC,EACNC,SAAUC,EAAiBX,GAC3BY,SAAS,KACTC,WAAYd,IAIpB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectWithoutProperties as e,slicedToArray as t,defineProperty as n,extends as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import i,{useState as a,useEffect as l,useCallback as r}from"react";import{components as s}from"react-select";import c from"classnames";import{useHiddenOptionsData as
|
|
1
|
+
import{objectWithoutProperties as e,slicedToArray as t,defineProperty as n,extends as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import i,{useState as a,useEffect as l,useCallback as r}from"react";import{components as s}from"react-select";import c from"classnames";import{useHiddenOptionsData as p}from"../../hooks/useHiddenOptionsData.js";import u from"../../../Counter/Counter.js";import m from"../../../Chips/Chips.js";import d from"./MultiValueContainer.module.scss.js";import h from"../../../../../components/dialog/dist/Dialog/Dialog.js";import f from"../../../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";var v=["children","selectProps"];function g(g){var C=g.children,D=g.selectProps,E=e(g,v),w=D.isDisabled,N=D.placeholder,P=D.inputValue,b=D.selectProps,y=void 0===b?{}:b,j=D.withMandatoryDefaultOptions,M=D.readOnly,O=y.selectedOptions,k=y.onSelectedDelete,S=y.isMultiline,x=y.popupsContainerSelector,A=y.size,T=y.dialogClassName,R=C[1],V=a(),B=t(V,2),H=B[0],I=B[1],F=a(!1),W=t(F,2),_=W[0],z=W[1],q=a(!1),G=t(q,2),J=G[0],K=G[1],L=0===O.length&&!P,Q=d["chip-with-input-wrapper"],U=c(S?d["multiselect-chip-multi-line"]:d["multiselect-chip-single-line-".concat(A)],n({},d["multiselect-chip-disabled"],w)),X=p({isMultiline:S,ref:H,chipClassName:U,chipWrapperClassName:Q,selectedOptionsCount:O.length,isCounterShown:_}),Y=X.overflowIndex,Z=X.hiddenOptionsCount;l((function(){z(Z>0)}),[Z]);var $=r((function(){K(!0)}),[]),ee=r((function(){K(!1)}),[]),te=r((function(e){k(e.value,{action:"remove-value",removedValue:e})}),[k]),ne=["primary","negative","positive"],oe=r((function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:O.length;return O.map((function(n,o){var a=ne.includes(n.chipColor)?n.chipColor:"primary";return o>=e&&t>o?i.createElement(m,{"data-testid":"value-container-chip",key:n.value,className:c(d.chips,U),noAnimation:!0,disabled:w,id:n.value,label:n.label,onDelete:function(){return te(n)},disableClickableBehavior:!0,onMouseDown:function(e){e.stopPropagation()},readOnly:M||j&&n.isMandatory,allowTextSelection:M,leftRenderer:n.leftRenderer,rightRenderer:n.rightRenderer,leftAvatar:n.leftAvatar,leftIcon:n.leftIcon,color:a}):null}))}),[O,U,w,M,j,te,A]);return i.createElement(s.ValueContainer,o({selectProps:D},E),i.createElement("div",{className:d["value-container"],onTouchEndCapture:function(e){e.stopPropagation()}},L&&i.createElement("div",{className:d["placeholder-container"]},i.createElement(s.Placeholder,E,N)),i.createElement("div",{className:c(d["value-container-chips"],n({},d["without-placeholder"],!L)),ref:function(e){return I(e)},"data-testid":"value-container-chips"},_?i.createElement(i.Fragment,null,oe(0,Y-1),i.createElement("div",{className:Q},oe(Y-1,Y),R),oe(Y)):i.createElement(i.Fragment,null,oe(0,O.length-1),i.createElement("div",{className:Q},oe(O.length-1),R))),i.createElement("div",null,_&&i.createElement(h,{content:function(){return i.createElement(f,{className:d.valueDialogContent,onMouseDown:function(e){e.stopPropagation()}},oe(Y))},containerSelector:x,tooltip:!0,showTrigger:"click",hideTrigger:"clickoutside",position:"bottom",moveBy:{main:5},wrapperClassName:T,onDialogDidShow:$,onDialogDidHide:ee},i.createElement(u,{kind:"line",prefix:"+",count:Z,counterClassName:c(d.dropdownCounter,n({},d.active,J)),onMouseDown:function(e){e.stopPropagation()},noAnimation:!0})))))}export{g as default};
|
|
2
2
|
//# sourceMappingURL=MultiValueContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiValueContainer.js","sources":["../../../../../../../src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { components } from \"react-select\";\nimport cx from \"classnames\";\nimport { useHiddenOptionsData } from \"../../hooks/useHiddenOptionsData\";\nimport Counter from \"../../../Counter/Counter\";\nimport { Dialog, DialogContentContainer } from \"@vibe/dialog\";\nimport Chips from \"../../../Chips/Chips\";\nimport classes from \"./MultiValueContainer.module.scss\";\n\nconst DIALOG_OFFSET_Y = 5;\n\nexport default function Container({ children, selectProps, ...otherProps }) {\n const {\n isDisabled,\n placeholder,\n inputValue,\n selectProps: customProps = {},\n withMandatoryDefaultOptions,\n readOnly\n } = selectProps;\n const { selectedOptions, onSelectedDelete, isMultiline, popupsContainerSelector, size, dialogClassName } =\n customProps;\n const clickHandler = children[1];\n const [ref, setRef] = useState();\n const [isCounterShown, setIsCounterShown] = useState(false);\n const [isDialogOpen, setIsDialogOpen] = useState(false);\n const showPlaceholder = selectedOptions.length === 0 && !inputValue;\n const chipWrapperClassName = classes[\"chip-with-input-wrapper\"];\n const chipClassName = cx(\n isMultiline ? classes[\"multiselect-chip-multi-line\"] : classes[`multiselect-chip-single-line-${size}`],\n { [classes[\"multiselect-chip-disabled\"]]: isDisabled }\n );\n\n const { overflowIndex, hiddenOptionsCount } = useHiddenOptionsData({\n isMultiline,\n ref,\n chipClassName,\n chipWrapperClassName,\n selectedOptionsCount: selectedOptions.length,\n isCounterShown\n });\n\n useEffect(() => {\n setIsCounterShown(hiddenOptionsCount > 0);\n }, [hiddenOptionsCount]);\n\n const handleDialogShow = useCallback(() => {\n setIsDialogOpen(true);\n }, []);\n\n const handleDialogHide = useCallback(() => {\n setIsDialogOpen(false);\n }, []);\n\n const onDelete = useCallback(\n option => {\n onSelectedDelete(option.value, { action: \"remove-value\", removedValue: option });\n },\n [onSelectedDelete]\n );\n\n const DropdownChipColors = [\"primary\", \"negative\", \"positive\"];\n const renderOptions = useCallback(\n (from = 0, to = selectedOptions.length) =>\n selectedOptions.map((option, index) => {\n const overrideChipColor = DropdownChipColors.includes(option.chipColor) ? option.chipColor : \"primary\";\n return index >= from && index < to ? (\n <Chips\n data-testid=\"value-container-chip\"\n key={option.value}\n className={cx(classes.chips, chipClassName)}\n noAnimation\n disabled={isDisabled}\n id={option.value}\n label={option.label}\n onDelete={() => onDelete(option)}\n disableClickableBehavior\n onMouseDown={e => {\n e.stopPropagation();\n }}\n readOnly={readOnly || (withMandatoryDefaultOptions && option.isMandatory)}\n allowTextSelection={readOnly}\n leftRenderer={option.leftRenderer}\n rightRenderer={option.rightRenderer}\n leftAvatar={option.leftAvatar}\n leftIcon={option.leftIcon}\n color={overrideChipColor}\n />\n ) : null;\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [selectedOptions, chipClassName, isDisabled, readOnly, withMandatoryDefaultOptions, onDelete, size]\n );\n\n return (\n <components.ValueContainer selectProps={selectProps} {...otherProps}>\n <div\n className={classes[\"value-container\"]}\n onTouchEndCapture={e => {\n e.stopPropagation();\n }}\n >\n {showPlaceholder && (\n <div className={classes[\"placeholder-container\"]}>\n <components.Placeholder {...otherProps}>{placeholder}</components.Placeholder>\n </div>\n )}\n <div\n className={cx(classes[\"value-container-chips\"], { [classes[\"without-placeholder\"]]: !showPlaceholder })}\n ref={newRef => setRef(newRef)}\n data-testid=\"value-container-chips\"\n >\n {isCounterShown ? (\n <>\n {renderOptions(0, overflowIndex - 1)}\n <div className={chipWrapperClassName}>\n {renderOptions(overflowIndex - 1, overflowIndex)}\n {clickHandler}\n </div>\n {renderOptions(overflowIndex)}\n </>\n ) : (\n <>\n {renderOptions(0, selectedOptions.length - 1)}\n <div className={chipWrapperClassName}>\n {renderOptions(selectedOptions.length - 1)}\n {clickHandler}\n </div>\n </>\n )}\n </div>\n <div>\n {isCounterShown && (\n <Dialog\n content={() => (\n <DialogContentContainer\n className={classes.valueDialogContent}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n >\n {renderOptions(overflowIndex)}\n </DialogContentContainer>\n )}\n containerSelector={popupsContainerSelector}\n tooltip\n showTrigger=\"click\"\n hideTrigger=\"clickoutside\"\n position=\"bottom\"\n moveBy={{ main: DIALOG_OFFSET_Y }}\n wrapperClassName={dialogClassName}\n onDialogDidShow={handleDialogShow}\n onDialogDidHide={handleDialogHide}\n >\n <Counter\n kind=\"line\"\n prefix=\"+\"\n count={hiddenOptionsCount}\n counterClassName={cx(classes.dropdownCounter, { [classes.active]: isDialogOpen })}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n noAnimation\n />\n </Dialog>\n )}\n </div>\n </div>\n </components.ValueContainer>\n );\n}\n"],"names":["Container","_ref","children","selectProps","otherProps","_objectWithoutProperties","_excluded","isDisabled","placeholder","inputValue","_selectProps$selectPr","customProps","withMandatoryDefaultOptions","readOnly","selectedOptions","onSelectedDelete","isMultiline","popupsContainerSelector","size","dialogClassName","clickHandler","_useState","useState","_useState2","_slicedToArray","ref","setRef","_useState3","_useState4","isCounterShown","setIsCounterShown","_useState5","_useState6","isDialogOpen","setIsDialogOpen","showPlaceholder","length","chipWrapperClassName","classes","chipClassName","cx","concat","_defineProperty","_useHiddenOptionsData","useHiddenOptionsData","selectedOptionsCount","overflowIndex","hiddenOptionsCount","useEffect","handleDialogShow","useCallback","handleDialogHide","onDelete","option","value","action","removedValue","DropdownChipColors","renderOptions","from","arguments","undefined","to","map","index","overrideChipColor","includes","chipColor","React","createElement","Chips","key","className","chips","noAnimation","disabled","id","label","disableClickableBehavior","onMouseDown","e","stopPropagation","isMandatory","allowTextSelection","leftRenderer","rightRenderer","leftAvatar","leftIcon","color","components","ValueContainer","_extends","onTouchEndCapture","Placeholder","newRef","Fragment","Dialog","content","DialogContentContainer","valueDialogContent","containerSelector","tooltip","showTrigger","hideTrigger","position","moveBy","main","wrapperClassName","onDialogDidShow","onDialogDidHide","Counter","kind","prefix","count","counterClassName","dropdownCounter","active"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiValueContainer.js","sources":["../../../../../../../src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\";\nimport { components } from \"react-select\";\nimport cx from \"classnames\";\nimport { useHiddenOptionsData } from \"../../hooks/useHiddenOptionsData\";\nimport Counter from \"../../../Counter/Counter\";\nimport { Dialog, DialogContentContainer } from \"@vibe/dialog\";\nimport Chips from \"../../../Chips/Chips\";\nimport classes from \"./MultiValueContainer.module.scss\";\n\nconst DIALOG_OFFSET_Y = 5;\n\nexport default function Container({ children, selectProps, ...otherProps }) {\n const {\n isDisabled,\n placeholder,\n inputValue,\n selectProps: customProps = {},\n withMandatoryDefaultOptions,\n readOnly\n } = selectProps;\n const { selectedOptions, onSelectedDelete, isMultiline, popupsContainerSelector, size, dialogClassName } =\n customProps;\n const clickHandler = children[1];\n const [ref, setRef] = useState();\n const [isCounterShown, setIsCounterShown] = useState(false);\n const [isDialogOpen, setIsDialogOpen] = useState(false);\n const showPlaceholder = selectedOptions.length === 0 && !inputValue;\n const chipWrapperClassName = classes[\"chip-with-input-wrapper\"];\n const chipClassName = cx(\n isMultiline ? classes[\"multiselect-chip-multi-line\"] : classes[`multiselect-chip-single-line-${size}`],\n { [classes[\"multiselect-chip-disabled\"]]: isDisabled }\n );\n\n const { overflowIndex, hiddenOptionsCount } = useHiddenOptionsData({\n isMultiline,\n ref,\n chipClassName,\n chipWrapperClassName,\n selectedOptionsCount: selectedOptions.length,\n isCounterShown\n });\n\n useEffect(() => {\n setIsCounterShown(hiddenOptionsCount > 0);\n }, [hiddenOptionsCount]);\n\n const handleDialogShow = useCallback(() => {\n setIsDialogOpen(true);\n }, []);\n\n const handleDialogHide = useCallback(() => {\n setIsDialogOpen(false);\n }, []);\n\n const onDelete = useCallback(\n option => {\n onSelectedDelete(option.value, { action: \"remove-value\", removedValue: option });\n },\n [onSelectedDelete]\n );\n\n const DropdownChipColors = [\"primary\", \"negative\", \"positive\"];\n const renderOptions = useCallback(\n (from = 0, to = selectedOptions.length) =>\n selectedOptions.map((option, index) => {\n const overrideChipColor = DropdownChipColors.includes(option.chipColor) ? option.chipColor : \"primary\";\n return index >= from && index < to ? (\n <Chips\n data-testid=\"value-container-chip\"\n key={option.value}\n className={cx(classes.chips, chipClassName)}\n noAnimation\n disabled={isDisabled}\n id={option.value}\n label={option.label}\n onDelete={() => onDelete(option)}\n disableClickableBehavior\n onMouseDown={e => {\n e.stopPropagation();\n }}\n readOnly={readOnly || (withMandatoryDefaultOptions && option.isMandatory)}\n allowTextSelection={readOnly}\n leftRenderer={option.leftRenderer}\n rightRenderer={option.rightRenderer}\n leftAvatar={option.leftAvatar}\n leftIcon={option.leftIcon}\n color={overrideChipColor}\n />\n ) : null;\n }),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [selectedOptions, chipClassName, isDisabled, readOnly, withMandatoryDefaultOptions, onDelete, size]\n );\n\n return (\n <components.ValueContainer selectProps={selectProps} {...otherProps}>\n <div\n className={classes[\"value-container\"]}\n onTouchEndCapture={e => {\n e.stopPropagation();\n }}\n >\n {showPlaceholder && (\n <div className={classes[\"placeholder-container\"]}>\n <components.Placeholder {...otherProps}>{placeholder}</components.Placeholder>\n </div>\n )}\n <div\n className={cx(classes[\"value-container-chips\"], { [classes[\"without-placeholder\"]]: !showPlaceholder })}\n ref={newRef => setRef(newRef)}\n data-testid=\"value-container-chips\"\n >\n {isCounterShown ? (\n <>\n {renderOptions(0, overflowIndex - 1)}\n <div className={chipWrapperClassName}>\n {renderOptions(overflowIndex - 1, overflowIndex)}\n {clickHandler}\n </div>\n {renderOptions(overflowIndex)}\n </>\n ) : (\n <>\n {renderOptions(0, selectedOptions.length - 1)}\n <div className={chipWrapperClassName}>\n {renderOptions(selectedOptions.length - 1)}\n {clickHandler}\n </div>\n </>\n )}\n </div>\n <div>\n {isCounterShown && (\n <Dialog\n content={() => (\n <DialogContentContainer\n className={classes.valueDialogContent}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n >\n {renderOptions(overflowIndex)}\n </DialogContentContainer>\n )}\n containerSelector={popupsContainerSelector}\n tooltip\n showTrigger=\"click\"\n hideTrigger=\"clickoutside\"\n position=\"bottom\"\n moveBy={{ main: DIALOG_OFFSET_Y }}\n wrapperClassName={dialogClassName}\n onDialogDidShow={handleDialogShow}\n onDialogDidHide={handleDialogHide}\n >\n <Counter\n kind=\"line\"\n prefix=\"+\"\n count={hiddenOptionsCount}\n counterClassName={cx(classes.dropdownCounter, { [classes.active]: isDialogOpen })}\n onMouseDown={e => {\n e.stopPropagation();\n }}\n noAnimation\n />\n </Dialog>\n )}\n </div>\n </div>\n </components.ValueContainer>\n );\n}\n"],"names":["Container","_ref","children","selectProps","otherProps","_objectWithoutProperties","_excluded","isDisabled","placeholder","inputValue","_selectProps$selectPr","customProps","withMandatoryDefaultOptions","readOnly","selectedOptions","onSelectedDelete","isMultiline","popupsContainerSelector","size","dialogClassName","clickHandler","_useState","useState","_useState2","_slicedToArray","ref","setRef","_useState3","_useState4","isCounterShown","setIsCounterShown","_useState5","_useState6","isDialogOpen","setIsDialogOpen","showPlaceholder","length","chipWrapperClassName","classes","chipClassName","cx","concat","_defineProperty","_useHiddenOptionsData","useHiddenOptionsData","selectedOptionsCount","overflowIndex","hiddenOptionsCount","useEffect","handleDialogShow","useCallback","handleDialogHide","onDelete","option","value","action","removedValue","DropdownChipColors","renderOptions","from","arguments","undefined","to","map","index","overrideChipColor","includes","chipColor","React","createElement","Chips","key","className","chips","noAnimation","disabled","id","label","disableClickableBehavior","onMouseDown","e","stopPropagation","isMandatory","allowTextSelection","leftRenderer","rightRenderer","leftAvatar","leftIcon","color","components","ValueContainer","_extends","onTouchEndCapture","Placeholder","newRef","Fragment","Dialog","content","DialogContentContainer","valueDialogContent","containerSelector","tooltip","showTrigger","hideTrigger","position","moveBy","main","wrapperClassName","onDialogDidShow","onDialogDidHide","Counter","kind","prefix","count","counterClassName","dropdownCounter","active"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as n,useRef as l,useState as r,useEffect as a}from"react";import i from"classnames";import s from"../../hooks/useMergeRef.js";import u from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import d from"../../hooks/usePrevious/index.js";import f from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var m=n((function(n,m){var v=n.id,h=n.className,y=n["data-testid"],g=n.value,E=n.onChange,b=n.onClick,P=n.
|
|
1
|
+
import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{forwardRef as n,useRef as l,useState as r,useEffect as a}from"react";import i from"classnames";import s from"../../hooks/useMergeRef.js";import u from"./EditableTypography.module.scss.js";import{keyCodes as c}from"../../constants/keyCodes.js";import"../../constants/sizes.js";import{useKeyboardButtonPressedFunc as p}from"../../hooks/useKeyboardButtonPressedFunc.js";import d from"../../hooks/usePrevious/index.js";import f from"../../hooks/ssr/useIsomorphicLayoutEffect.js";var m=n((function(n,m){var v=n.id,h=n.className,y=n["data-testid"],g=n.value,E=n.onChange,b=n.onClick,P=n.onKeyDown,C=n.readOnly,x=void 0!==C&&C,k=n.ariaLabel,w=void 0===k?"":k,j=n.placeholder,D=n.clearable,N=n.typographyClassName,K=n.component,B=n.isEditMode,T=n.autoSelectTextOnEditMode,M=n.onEditModeChange,R=n.tooltipProps,S=n.type,A=n.weight,H=n.multiline,I=void 0!==H&&H,L=l(null),O=s(m,L),_=r(B||!1),z=e(_,2),F=z[0],q=z[1],G=r(g),J=e(G,2),Q=J[0],U=J[1],V=d(g),W=l(null),X=l(null);function Y(e){x||F||(e.preventDefault(),Z(!0))}function Z(e){null==M||M(e),q(e)}function $(){(Z(!1),g!==Q)&&(Q||D&&j?(U(Q),null==E||E(Q)):U(g))}function ee(){$()}function te(e){if(!e.nativeEvent.isComposing){if(e.key===c.ENTER){if(I&&e.shiftKey)return;e.preventDefault(),e.stopPropagation(),$()}e.key===c.ESCAPE&&(e.preventDefault(),e.stopPropagation(),Z(!1),U(g)),null==P||P(e)}}function oe(e){U(e.target.value)}a((function(){F||g===V||g===Q||U(g)}),[V,F,g,Q]),a((function(){q(B)}),[B]);var ne=p(Y);return a((function(){var e,t;F&&(!function(){var e,t;if(null===(t=null===(e=W.current)||void 0===e?void 0:e.focus)||void 0===t||t.call(e),W.current){var o=W.current,n=o.value.length;o.setSelectionRange(n,n)}}(),T&&(null===(t=null===(e=W.current)||void 0===e?void 0:e.select)||void 0===t||t.call(e)))}),[T,F]),f((function(){var e;if(X.current){var t=X.current.getBoundingClientRect();if(null===(e=null==W?void 0:W.current)||void 0===e||e.style.setProperty("--input-width","".concat(t.width,"px")),I){var o=null==W?void 0:W.current;null==o||o.style.setProperty("--input-height","auto"),null==o||o.style.setProperty("--input-height","".concat(o.scrollHeight+2,"px"))}}}),[Q,F]),o.createElement("div",{ref:O,id:v,"aria-label":w,"data-testid":y,className:i(u.editableTypography,h),role:F?null:"button",onClick:function(e){null==b||b(e),Y(e)},onKeyDown:ne},F&&(I?o.createElement("textarea",{ref:W,className:i(u.textarea,N),value:Q,onChange:oe,onKeyDown:te,onBlur:ee,"aria-label":w,placeholder:j,role:"textbox",rows:1}):o.createElement("input",{ref:W,className:i(u.input,N),value:Q,onChange:oe,onKeyDown:te,onBlur:ee,"aria-label":w,placeholder:j,role:"input"})),o.createElement(K,{ref:X,"aria-hidden":F,className:i(u.typography,N,t(t(t(t({},u.hidden,F),u.disabled,x),u.placeholder,!Q&&j),u.multiline,!F&&I)),tabIndex:0,tooltipProps:R,weight:A,type:S,ellipsis:!I},Q||j))}));export{m as default};
|
|
2
2
|
//# sourceMappingURL=EditableTypography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { type ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { type TooltipProps } from \"../Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { type TextType, type TextWeight } from \"../Text\";\nimport { type HeadingType, type HeadingWeight } from \"../Heading\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nexport interface EditableTypographyImplementationProps {\n /**\n * The current value of the text.\n */\n value: string;\n /**\n * Callback fired when the value changes.\n */\n onChange?: (value: string) => void;\n /**\n * Callback fired when the component is clicked.\n */\n onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n /**\n * If true, the text is read-only and cannot be edited.\n */\n readOnly?: boolean;\n /**\n * Placeholder text displayed when the value is empty.\n */\n placeholder?: string;\n /**\n * The label of the component for accessibility.\n */\n ariaLabel?: string;\n /**\n * Controls whether the component is in edit mode.\n */\n isEditMode?: boolean;\n /**\n * If true, automatically selects all text when entering edit mode.\n */\n autoSelectTextOnEditMode?: boolean;\n /**\n * Callback fired when the edit mode changes.\n */\n onEditModeChange?: (isEditMode: boolean) => void;\n /**\n * Props to customize the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n /**\n * The typography component used in view mode.\n */\n component: ElementType;\n /**\n * Class name applied to the typography component.\n */\n typographyClassName: string;\n /**\n * If true, shows the placeholder when empty.\n */\n clearable?: boolean;\n /**\n * The text or heading type.\n */\n type?: TextType | HeadingType;\n /**\n * The text or heading weight.\n */\n weight?: TextWeight | HeadingWeight;\n /**\n * If true, enables multi-line editing.\n */\n multiline?: boolean;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography = forwardRef(\n (\n {\n id,\n className,\n \"data-testid\": dataTestId,\n value,\n onChange,\n onClick,\n readOnly = false,\n ariaLabel = \"\",\n placeholder,\n clearable,\n typographyClassName,\n component: TypographyComponent,\n isEditMode,\n autoSelectTextOnEditMode,\n onEditModeChange,\n tooltipProps,\n type,\n weight,\n multiline = false\n }: EditableTypographyProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isEditing, setIsEditing] = useState(isEditMode || false);\n const [inputValue, setInputValue] = useState(value);\n\n const prevValue = usePrevious(value);\n\n const inputRef = useRef(null);\n const typographyRef = useRef(null);\n\n useEffect(() => {\n if (!isEditing && value !== prevValue && value !== inputValue) {\n setInputValue(value);\n }\n }, [prevValue, isEditing, value, inputValue]);\n\n useEffect(() => {\n setIsEditing(isEditMode);\n }, [isEditMode]);\n\n function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n onClick?.(event);\n toggleEditMode(event);\n }\n\n function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n if (readOnly || isEditing) {\n return;\n }\n event.preventDefault();\n handleEditModeChange(true);\n }\n\n function handleEditModeChange(value: boolean) {\n onEditModeChange?.(value);\n setIsEditing(value);\n }\n\n function handleInputValueChange() {\n handleEditModeChange(false);\n\n if (value === inputValue) {\n return;\n }\n\n const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n setInputValue(value);\n return;\n }\n setInputValue(inputValue);\n onChange?.(inputValue);\n }\n\n function handleBlur() {\n handleInputValueChange();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.key === keyCodes.ENTER) {\n if (multiline && event.shiftKey) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleInputValueChange();\n }\n if (event.key === keyCodes.ESCAPE) {\n event.preventDefault();\n event.stopPropagation();\n handleEditModeChange(false);\n setInputValue(value);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n setInputValue(event.target.value);\n }\n\n const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n function focus() {\n inputRef.current?.focus?.();\n\n if (inputRef.current) {\n const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n const textLength = inputElement.value.length;\n inputElement.setSelectionRange(textLength, textLength);\n }\n }\n\n function selectAllInputText() {\n inputRef.current?.select?.();\n }\n\n useEffect(() => {\n if (!isEditing) return;\n focus();\n if (autoSelectTextOnEditMode) {\n selectAllInputText();\n }\n }, [autoSelectTextOnEditMode, isEditing]);\n\n useIsomorphicLayoutEffect(() => {\n if (!typographyRef.current) {\n return;\n }\n\n const { width } = typographyRef.current.getBoundingClientRect();\n inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n if (multiline) {\n const textareaElement = inputRef?.current as HTMLTextAreaElement;\n textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n }\n }, [inputValue, isEditing]);\n\n return (\n <div\n ref={mergedRef}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx(styles.editableTypography, className)}\n role={isEditing ? null : \"button\"}\n onClick={onTypographyClick}\n onKeyDown={toggleKeyboardEditMode}\n >\n {isEditing &&\n (multiline ? (\n <textarea\n ref={inputRef}\n className={cx(styles.textarea, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n role=\"textbox\"\n rows={1}\n />\n ) : (\n <input\n ref={inputRef}\n className={cx(styles.input, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n role=\"input\"\n />\n ))}\n <TypographyComponent\n ref={typographyRef}\n aria-hidden={isEditing}\n className={cx(styles.typography, typographyClassName, {\n [styles.hidden]: isEditing,\n [styles.disabled]: readOnly,\n [styles.placeholder]: !inputValue && placeholder,\n [styles.multiline]: !isEditing && multiline\n })}\n tabIndex={0}\n tooltipProps={tooltipProps}\n weight={weight}\n type={type}\n ellipsis={!multiline}\n >\n {inputValue || placeholder}\n </TypographyComponent>\n </div>\n );\n }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","nativeEvent","isComposing","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","_b","current","_a","focus","inputElement","textLength","length","setSelectionRange","select","useIsomorphicLayoutEffect","_typographyRef$curren","getBoundingClientRect","style","setProperty","concat","width","textareaElement","scrollHeight","React","createElement","cx","styles","editableTypography","role","onKeyDown","textarea","onBlur","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"EditableTypography.js","sources":["../../../../../src/components/EditableTypography/EditableTypography.tsx"],"sourcesContent":["import React, { type ElementType, forwardRef, useEffect, useRef, useState } from \"react\";\nimport cx from \"classnames\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { type VibeComponentProps } from \"../../types\";\nimport styles from \"./EditableTypography.module.scss\";\nimport { keyCodes } from \"../../constants\";\nimport { useKeyboardButtonPressedFunc } from \"../../hooks/useKeyboardButtonPressedFunc\";\nimport { type TooltipProps } from \"../Tooltip\";\nimport usePrevious from \"../../hooks/usePrevious\";\nimport { type TextType, type TextWeight } from \"../Text\";\nimport { type HeadingType, type HeadingWeight } from \"../Heading\";\nimport useIsomorphicLayoutEffect from \"../../hooks/ssr/useIsomorphicLayoutEffect\";\n\nexport interface EditableTypographyImplementationProps {\n /**\n * The current value of the text.\n */\n value: string;\n /**\n * Callback fired when the value changes.\n */\n onChange?: (value: string) => void;\n /**\n * Callback fired when the component is clicked.\n */\n onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;\n /**\n * Callback fired when a key is pressed inside the input/textarea element.\n */\n onKeyDown?: (\n event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>\n ) => void;\n /**\n * If true, the text is read-only and cannot be edited.\n */\n readOnly?: boolean;\n /**\n * Placeholder text displayed when the value is empty.\n */\n placeholder?: string;\n /**\n * The label of the component for accessibility.\n */\n ariaLabel?: string;\n /**\n * Controls whether the component is in edit mode.\n */\n isEditMode?: boolean;\n /**\n * If true, automatically selects all text when entering edit mode.\n */\n autoSelectTextOnEditMode?: boolean;\n /**\n * Callback fired when the edit mode changes.\n */\n onEditModeChange?: (isEditMode: boolean) => void;\n /**\n * Props to customize the tooltip.\n */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nexport interface EditableTypographyProps extends VibeComponentProps, EditableTypographyImplementationProps {\n /**\n * The typography component used in view mode.\n */\n component: ElementType;\n /**\n * Class name applied to the typography component.\n */\n typographyClassName: string;\n /**\n * If true, shows the placeholder when empty.\n */\n clearable?: boolean;\n /**\n * The text or heading type.\n */\n type?: TextType | HeadingType;\n /**\n * The text or heading weight.\n */\n weight?: TextWeight | HeadingWeight;\n /**\n * If true, enables multi-line editing.\n */\n multiline?: boolean;\n}\n\nconst PADDING_OFFSET = 2;\n\nconst EditableTypography = forwardRef(\n (\n {\n id,\n className,\n \"data-testid\": dataTestId,\n value,\n onChange,\n onClick,\n onKeyDown,\n readOnly = false,\n ariaLabel = \"\",\n placeholder,\n clearable,\n typographyClassName,\n component: TypographyComponent,\n isEditMode,\n autoSelectTextOnEditMode,\n onEditModeChange,\n tooltipProps,\n type,\n weight,\n multiline = false\n }: EditableTypographyProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isEditing, setIsEditing] = useState(isEditMode || false);\n const [inputValue, setInputValue] = useState(value);\n\n const prevValue = usePrevious(value);\n\n const inputRef = useRef(null);\n const typographyRef = useRef(null);\n\n useEffect(() => {\n if (!isEditing && value !== prevValue && value !== inputValue) {\n setInputValue(value);\n }\n }, [prevValue, isEditing, value, inputValue]);\n\n useEffect(() => {\n setIsEditing(isEditMode);\n }, [isEditMode]);\n\n function onTypographyClick(event: React.KeyboardEvent | React.MouseEvent) {\n onClick?.(event);\n toggleEditMode(event);\n }\n\n function toggleEditMode(event: React.KeyboardEvent | React.MouseEvent) {\n if (readOnly || isEditing) {\n return;\n }\n event.preventDefault();\n handleEditModeChange(true);\n }\n\n function handleEditModeChange(value: boolean) {\n onEditModeChange?.(value);\n setIsEditing(value);\n }\n\n function handleInputValueChange() {\n handleEditModeChange(false);\n\n if (value === inputValue) {\n return;\n }\n\n const shouldShowPlaceholderWhenEmpty = clearable && placeholder;\n if (!inputValue && !shouldShowPlaceholderWhenEmpty) {\n setInputValue(value);\n return;\n }\n setInputValue(inputValue);\n onChange?.(inputValue);\n }\n\n function handleBlur() {\n handleInputValueChange();\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.key === keyCodes.ENTER) {\n if (multiline && event.shiftKey) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n handleInputValueChange();\n }\n if (event.key === keyCodes.ESCAPE) {\n event.preventDefault();\n event.stopPropagation();\n handleEditModeChange(false);\n setInputValue(value);\n }\n\n onKeyDown?.(event);\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {\n setInputValue(event.target.value);\n }\n\n const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);\n\n function focus() {\n inputRef.current?.focus?.();\n\n if (inputRef.current) {\n const inputElement = inputRef.current as HTMLInputElement | HTMLTextAreaElement;\n const textLength = inputElement.value.length;\n inputElement.setSelectionRange(textLength, textLength);\n }\n }\n\n function selectAllInputText() {\n inputRef.current?.select?.();\n }\n\n useEffect(() => {\n if (!isEditing) return;\n focus();\n if (autoSelectTextOnEditMode) {\n selectAllInputText();\n }\n }, [autoSelectTextOnEditMode, isEditing]);\n\n useIsomorphicLayoutEffect(() => {\n if (!typographyRef.current) {\n return;\n }\n\n const { width } = typographyRef.current.getBoundingClientRect();\n inputRef?.current?.style.setProperty(\"--input-width\", `${width}px`);\n\n if (multiline) {\n const textareaElement = inputRef?.current as HTMLTextAreaElement;\n textareaElement?.style.setProperty(\"--input-height\", \"auto\");\n textareaElement?.style.setProperty(\"--input-height\", `${textareaElement.scrollHeight + PADDING_OFFSET}px`);\n }\n }, [inputValue, isEditing]);\n\n return (\n <div\n ref={mergedRef}\n id={id}\n aria-label={ariaLabel}\n data-testid={dataTestId}\n className={cx(styles.editableTypography, className)}\n role={isEditing ? null : \"button\"}\n onClick={onTypographyClick}\n onKeyDown={toggleKeyboardEditMode}\n >\n {isEditing &&\n (multiline ? (\n <textarea\n ref={inputRef}\n className={cx(styles.textarea, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n role=\"textbox\"\n rows={1}\n />\n ) : (\n <input\n ref={inputRef}\n className={cx(styles.input, typographyClassName)}\n value={inputValue}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n aria-label={ariaLabel}\n placeholder={placeholder}\n role=\"input\"\n />\n ))}\n <TypographyComponent\n ref={typographyRef}\n aria-hidden={isEditing}\n className={cx(styles.typography, typographyClassName, {\n [styles.hidden]: isEditing,\n [styles.disabled]: readOnly,\n [styles.placeholder]: !inputValue && placeholder,\n [styles.multiline]: !isEditing && multiline\n })}\n tabIndex={0}\n tooltipProps={tooltipProps}\n weight={weight}\n type={type}\n ellipsis={!multiline}\n >\n {inputValue || placeholder}\n </TypographyComponent>\n </div>\n );\n }\n);\n\nexport default EditableTypography;\n"],"names":["EditableTypography","forwardRef","_ref","ref","id","className","dataTestId","value","onChange","onClick","onKeyDown","_ref$readOnly","readOnly","_ref$ariaLabel","ariaLabel","placeholder","clearable","typographyClassName","TypographyComponent","component","isEditMode","autoSelectTextOnEditMode","onEditModeChange","tooltipProps","type","weight","_ref$multiline","multiline","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isEditing","setIsEditing","_useState3","_useState4","inputValue","setInputValue","prevValue","usePrevious","inputRef","typographyRef","toggleEditMode","event","preventDefault","handleEditModeChange","handleInputValueChange","handleBlur","handleKeyDown","nativeEvent","isComposing","key","keyCodes","ENTER","shiftKey","stopPropagation","ESCAPE","handleChange","target","useEffect","toggleKeyboardEditMode","useKeyboardButtonPressedFunc","_b","current","_a","focus","inputElement","textLength","length","setSelectionRange","select","useIsomorphicLayoutEffect","_typographyRef$curren","getBoundingClientRect","style","setProperty","concat","width","textareaElement","scrollHeight","React","createElement","cx","styles","editableTypography","role","textarea","onBlur","rows","input","typography","_defineProperty","hidden","disabled","tabIndex","ellipsis"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{typeof as
|
|
1
|
+
import{typeof as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{__rest as e}from"../../../_virtual/_tslib.js";import i,{forwardRef as r}from"react";import n from"classnames";import s from"../Flex/Flex.js";import a from"../Heading/Heading.js";import m from"../Text/Text.js";import o from"./EmptyState.module.scss.js";import{getStyle as l}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as c,ComponentDefaultTestId as p}from"../../tests/testIds.js";import u from"../Link/Link.js";import{ComponentVibeId as d}from"../../tests/constants.js";import f from"../../../components/button/dist/Button/Button.js";var g=r((function(r,g){var j=r.className,x=r.title,E=r.description,y=r.visual,b=r.mainAction,v=r.supportingAction,T=r.layout,N=void 0===T?"default":T,_=r.id,h=r["data-testid"],k="compact"===N;return i.createElement(s,{direction:"column",align:"center",justify:"center",gap:k?"small":"medium",className:n(o.emptyState,l(o,N),j),id:_,"data-testid":h||c(p.EMPTY_STATE,_),"data-vibe":d.EMPTY_STATE,ref:g},!!y&&y,i.createElement(s,{direction:"column",align:"center",gap:k?12:"medium",className:o.content},i.createElement(s,{direction:"column",align:"center",gap:"xs"},x&&i.createElement(a,{type:"h3",weight:"normal",className:o.title,align:"center",ellipsis:!1},x),"string"==typeof E?i.createElement(m,{className:o.description,align:"center",ellipsis:!1},E):E),(b||v)&&i.createElement(s,{direction:"column",align:"center",gap:"small",className:o.actions},function(e,r){if("object"===t(e)&&"text"in e)return i.createElement(f,Object.assign({kind:"secondary",size:r?"small":"medium"},e),e.text);return e}(b,k),function(r,n){if("object"===t(r)){if("text"in r&&"href"in r){var s=r.text,a=e(r,["text"]);return i.createElement(u,Object.assign({text:s},a))}if("text"in r){var m=r.text,o=e(r,["text"]);return i.createElement(f,Object.assign({kind:"tertiary",size:n?"small":"medium"},o),m)}}return r}(v,k))))}));export{g as default};
|
|
2
2
|
//# sourceMappingURL=EmptyState.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.js","sources":["../../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport Flex from \"../../components/Flex/Flex\";\nimport Heading from \"../../components/Heading/Heading\";\nimport Text from \"../../components/Text/Text\";\nimport { type EmptyStateProps } from \"./EmptyState.types\";\nimport styles from \"./EmptyState.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Link, type LinkProps } from \"../Link\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n (\n {\n className,\n title,\n description,\n visual,\n mainAction,\n supportingAction,\n layout = \"default\",\n id,\n \"data-testid\": dataTestId\n },\n ref\n ) => {\n const isCompact = layout === \"compact\";\n\n return (\n <Flex\n direction=\"column\"\n align=\"center\"\n justify=\"center\"\n gap={isCompact ? \"small\" : \"medium\"}\n className={cx(styles.emptyState, getStyle(styles, layout), className)}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.EMPTY_STATE, id)}\n data-vibe={ComponentVibeId.EMPTY_STATE}\n ref={ref}\n >\n {!!visual && visual}\n\n <Flex direction=\"column\" align=\"center\" gap={isCompact ? 12 : \"medium\"} className={styles.content}>\n <Flex direction=\"column\" align=\"center\" gap=\"xs\">\n {title && (\n <Heading type=\"h3\" weight=\"normal\" className={styles.title} align=\"center\" ellipsis={false}>\n {title}\n </Heading>\n )}\n\n {typeof description === \"string\" ? (\n <Text className={styles.description} align=\"center\" ellipsis={false}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Flex>\n\n {(mainAction || supportingAction) && (\n <Flex direction=\"column\" align=\"center\" gap=\"small\" className={styles.actions}>\n {renderMainAction(mainAction, isCompact)}\n {renderSupportingAction(supportingAction, isCompact)}\n </Flex>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nfunction renderMainAction(mainAction: EmptyStateProps[\"mainAction\"], isCompact: boolean) {\n if (typeof mainAction === \"object\" && \"text\" in mainAction) {\n return (\n <Button kind=\"secondary\" size={isCompact ? \"small\" : \"medium\"} {...mainAction}>\n {mainAction.text}\n </Button>\n );\n }\n\n return mainAction;\n}\n\nfunction renderSupportingAction(supportingAction: EmptyStateProps[\"supportingAction\"], isCompact: boolean) {\n if (typeof supportingAction === \"object\") {\n if (\"text\" in supportingAction && \"href\" in supportingAction) {\n const { text, ...linkProps } = supportingAction as LinkProps & { text: string };\n return <Link text={text} {...linkProps} />;\n }\n if (\"text\" in supportingAction) {\n const { text, ...buttonProps } = supportingAction as ButtonProps & { text: string };\n return (\n <Button kind=\"tertiary\" size={isCompact ? \"small\" : \"medium\"} {...buttonProps}>\n {text}\n </Button>\n );\n }\n }\n\n return supportingAction;\n}\n\nexport default EmptyState;\n"],"names":["EmptyState","forwardRef","_ref","ref","className","title","description","visual","mainAction","supportingAction","_ref$layout","layout","id","dataTestId","isCompact","React","createElement","Flex","direction","align","justify","gap","cx","styles","emptyState","getStyle","getTestId","ComponentDefaultTestId","EMPTY_STATE","ComponentVibeId","content","Heading","type","weight","ellipsis","Text","actions","_typeof","Button","Object","assign","kind","size","text","renderMainAction","linkProps","__rest","Link","buttonProps","renderSupportingAction"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sources":["../../../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport Flex from \"../../components/Flex/Flex\";\nimport Heading from \"../../components/Heading/Heading\";\nimport Text from \"../../components/Text/Text\";\nimport { type EmptyStateProps } from \"./EmptyState.types\";\nimport styles from \"./EmptyState.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { Button, type ButtonProps } from \"@vibe/button\";\nimport { Link, type LinkProps } from \"../Link\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n (\n {\n className,\n title,\n description,\n visual,\n mainAction,\n supportingAction,\n layout = \"default\",\n id,\n \"data-testid\": dataTestId\n },\n ref\n ) => {\n const isCompact = layout === \"compact\";\n\n return (\n <Flex\n direction=\"column\"\n align=\"center\"\n justify=\"center\"\n gap={isCompact ? \"small\" : \"medium\"}\n className={cx(styles.emptyState, getStyle(styles, layout), className)}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.EMPTY_STATE, id)}\n data-vibe={ComponentVibeId.EMPTY_STATE}\n ref={ref}\n >\n {!!visual && visual}\n\n <Flex direction=\"column\" align=\"center\" gap={isCompact ? 12 : \"medium\"} className={styles.content}>\n <Flex direction=\"column\" align=\"center\" gap=\"xs\">\n {title && (\n <Heading type=\"h3\" weight=\"normal\" className={styles.title} align=\"center\" ellipsis={false}>\n {title}\n </Heading>\n )}\n\n {typeof description === \"string\" ? (\n <Text className={styles.description} align=\"center\" ellipsis={false}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Flex>\n\n {(mainAction || supportingAction) && (\n <Flex direction=\"column\" align=\"center\" gap=\"small\" className={styles.actions}>\n {renderMainAction(mainAction, isCompact)}\n {renderSupportingAction(supportingAction, isCompact)}\n </Flex>\n )}\n </Flex>\n </Flex>\n );\n }\n);\n\nfunction renderMainAction(mainAction: EmptyStateProps[\"mainAction\"], isCompact: boolean) {\n if (typeof mainAction === \"object\" && \"text\" in mainAction) {\n return (\n <Button kind=\"secondary\" size={isCompact ? \"small\" : \"medium\"} {...mainAction}>\n {mainAction.text}\n </Button>\n );\n }\n\n return mainAction;\n}\n\nfunction renderSupportingAction(supportingAction: EmptyStateProps[\"supportingAction\"], isCompact: boolean) {\n if (typeof supportingAction === \"object\") {\n if (\"text\" in supportingAction && \"href\" in supportingAction) {\n const { text, ...linkProps } = supportingAction as LinkProps & { text: string };\n return <Link text={text} {...linkProps} />;\n }\n if (\"text\" in supportingAction) {\n const { text, ...buttonProps } = supportingAction as ButtonProps & { text: string };\n return (\n <Button kind=\"tertiary\" size={isCompact ? \"small\" : \"medium\"} {...buttonProps}>\n {text}\n </Button>\n );\n }\n }\n\n return supportingAction;\n}\n\nexport default EmptyState;\n"],"names":["EmptyState","forwardRef","_ref","ref","className","title","description","visual","mainAction","supportingAction","_ref$layout","layout","id","dataTestId","isCompact","React","createElement","Flex","direction","align","justify","gap","cx","styles","emptyState","getStyle","getTestId","ComponentDefaultTestId","EMPTY_STATE","ComponentVibeId","content","Heading","type","weight","ellipsis","Text","actions","_typeof","Button","Object","assign","kind","size","text","renderMainAction","linkProps","__rest","Link","buttonProps","renderSupportingAction"],"mappings":"0nBAaMA,IAAAA,EAAaC,GACjB,SAAAC,EAYEC,GACE,IAXAC,EAASF,EAATE,UACAC,EAAKH,EAALG,MACAC,EAAWJ,EAAXI,YACAC,EAAML,EAANK,OACAC,EAAUN,EAAVM,WACAC,EAAgBP,EAAhBO,iBAAgBC,EAAAR,EAChBS,OAAAA,OAAS,IAAHD,EAAG,UAASA,EAClBE,EAAEV,EAAFU,GACeC,EAAUX,EAAzB,eAIIY,EAAuB,YAAXH,EAElB,OACEI,EAAAC,cAACC,EAAI,CACHC,UAAU,SACVC,MAAM,SACNC,QAAQ,SACRC,IAAKP,EAAY,QAAU,SAC3BV,UAAWkB,EAAGC,EAAOC,WAAYC,EAASF,EAAQZ,GAASP,GAC3DQ,GAAIA,EACS,cAAAC,GAAca,EAAUC,EAAuBC,YAAahB,GAC9D,YAAAiB,EAAgBD,YAC3BzB,IAAKA,KAEFI,GAAUA,EAEbQ,EAACC,cAAAC,EAAK,CAAAC,UAAU,SAASC,MAAM,SAASE,IAAKP,EAAY,GAAK,SAAUV,UAAWmB,EAAOO,SACxFf,EAAAC,cAACC,EAAI,CAACC,UAAU,SAASC,MAAM,SAASE,IAAI,MACzChB,GACCU,EAACC,cAAAe,EAAQ,CAAAC,KAAK,KAAKC,OAAO,SAAS7B,UAAWmB,EAAOlB,MAAOc,MAAM,SAASe,UAAU,GAClF7B,GAImB,iBAAhBC,EACNS,EAACC,cAAAmB,EAAK,CAAA/B,UAAWmB,EAAOjB,YAAaa,MAAM,SAASe,UAAU,GAC3D5B,GAGHA,IAIFE,GAAcC,IACdM,EAACC,cAAAC,EAAK,CAAAC,UAAU,SAASC,MAAM,SAASE,IAAI,QAAQjB,UAAWmB,EAAOa,SAWlF,SAA0B5B,EAA2CM,GACnE,GAA0B,WAAtBuB,EAAO7B,IAA2B,SAAUA,EAC9C,OACEO,EAACC,cAAAsB,EAAOC,OAAAC,OAAA,CAAAC,KAAK,YAAYC,KAAM5B,EAAY,QAAU,UAAcN,GAChEA,EAAWmC,MAKlB,OAAOnC,CACT,CApBeoC,CAAiBpC,EAAYM,GAsB5C,SAAgCL,EAAuDK,GACrF,GAAgC,WAA5BuB,EAAO5B,GAA+B,CACxC,GAAI,SAAUA,GAAoB,SAAUA,EAAkB,CACtD,IAAEkC,EAAuBlC,EAAvBkC,KAASE,EAASC,EAAKrC,EAAzB,CAAsB,SAC5B,OAAOM,EAAAC,cAAC+B,EAAKR,OAAAC,OAAA,CAAAG,KAAMA,GAAUE,GAC9B,CACD,GAAI,SAAUpC,EAAkB,CACxB,IAAEkC,EAAyBlC,EAAzBkC,KAASK,EAAWF,EAAKrC,EAA3B,CAAwB,SAC9B,OACEM,EAACC,cAAAsB,EAAOC,OAAAC,OAAA,CAAAC,KAAK,WAAWC,KAAM5B,EAAY,QAAU,UAAckC,GAC/DL,EAGN,CACF,CAED,OAAOlC,CACT,CAtCewC,CAAuBxC,EAAkBK,KAMtD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import n,{forwardRef as
|
|
1
|
+
import{slicedToArray as e,defineProperty as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import t from"classnames";import n,{forwardRef as r,useRef as a,useState as i,useCallback as s}from"react";import c from"../../hooks/useMergeRef.js";import l from"../Text/Text.js";import{getTestId as d,ComponentDefaultTestId as m}from"../../tests/testIds.js";import p from"./ExpandCollapse.module.scss.js";import{ComponentVibeId as f}from"../../tests/constants.js";import u from"../../../components/icon/dist/Icon/Icon.js";import v from"../../../icons/dist/react/DropdownChevronDown.js";var C=r((function(r,C){var h=r.children,E=r.headerComponentRenderer,N=void 0===E?null:E,g=r.title,j=void 0===g?"":g,x=r.className,y=r.defaultOpenState,P=void 0!==y&&y,B=r.iconSize,I=void 0===B?24:B,O=r.iconPosition,k=void 0===O?"right":O,A=r.id,S=void 0===A?"":A,b=r.open,D=r.onClick,L=void 0===D?null:D,T=r.hideBorder,_=void 0!==T&&T,w=r.headerClassName,z=r.contentClassName,R=r.componentClassName,X=r["data-testid"],H=r.captureOnClick,M=void 0===H||H,q=a(null),F=c(C,q),G=i(P),J=e(G,2),K=J[0],Q=J[1],U=void 0===b?K:b,V=function(){Q(!K)},W=s((function(){return"string"==typeof j?n.createElement(l,{type:"text1",className:t(p.headerContent)},j):j}),[j]),Y=function(){return n.createElement(u,{className:t(p.iconComponent,o(o({},p.animateIconOpen,U),p.animateIconClose,!U)),iconType:"svg",icon:v,iconSize:I})};return n.createElement("div",{ref:F,className:x,id:S,"data-testid":X||d(m.EXPAND_COLLAPSE,S),"data-vibe":f.EXPAND_COLLAPSE},n.createElement("div",{className:t(p.expandCollapse,o(o({},p.hideBorder,_),p.showBorder,!_),R)},n.createElement("button",{type:"button",className:t(p.header,p.section,w,o(o(o({},p.headerOpen,U),p.hideBorderBottom,_),p.leftIcon,"left"===k)),onClickCapture:M?L||V:void 0,onClick:M?void 0:L||V,"aria-expanded":U,"aria-controls":"".concat(S,"-controls")},"left"===k&&Y(),"string"!=typeof j||0!==j.length?W():N&&N(),"right"===k&&Y()),U&&n.createElement("div",{className:t(p.content,p.section,z,o({},p.animateExpandCollapseContent,U)),id:"".concat(S,"-controls"),role:"region"},h)))}));export{C as default};
|
|
2
2
|
//# sourceMappingURL=ExpandCollapse.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandCollapse.js","sources":["../../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useCallback, useRef, useState } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Icon } from \"@vibe/icon\";\nimport Text from \"../Text/Text\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ExpandCollapse.module.scss\";\nimport { type ExpandCollapseIconPosition } from \"./ExpandCollapse.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ExpandCollapseProps extends VibeComponentProps {\n /**\n * Custom renderer for the header component.\n */\n headerComponentRenderer?: () => ReactElement;\n /**\n * Class name applied to the header.\n */\n headerClassName?: string;\n /**\n * Class name applied to the content.\n */\n contentClassName?: string;\n /**\n * Class name applied to the root component.\n */\n componentClassName?: string;\n /**\n * The title displayed in the header.\n */\n title?: ElementContent;\n /**\n * The content inside the expandable section.\n */\n children?: ElementContent;\n /**\n * The size of the expand/collapse icon.\n */\n iconSize?: number | string;\n /**\n * The position of the icon.\n */\n iconPosition?: ExpandCollapseIconPosition;\n /**\n * If true, the section is open by default when rendered.\n */\n defaultOpenState?: boolean;\n /**\n * Controls the open state of the section.\n */\n open?: boolean;\n /**\n * Callback fired when the header is clicked.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * If true, hides the border around the component.\n */\n hideBorder?: boolean;\n /**\n * If true, captures the click event on the button.\n */\n captureOnClick?: boolean;\n}\n\nconst ExpandCollapse: FC<ExpandCollapseProps> = forwardRef(\n (\n {\n children,\n headerComponentRenderer = null,\n title = \"\",\n className,\n defaultOpenState = false,\n iconSize = 24,\n iconPosition = \"right\",\n id = \"\",\n open,\n onClick = null,\n hideBorder = false,\n headerClassName,\n contentClassName,\n componentClassName,\n \"data-testid\": dataTestId,\n captureOnClick = true\n },\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isOpen, setIsOpen] = useState(defaultOpenState);\n const isExpanded = open === undefined ? isOpen : open;\n\n const toggleExpand = () => {\n setIsOpen(!isOpen);\n };\n const renderHeader = useCallback(() => {\n return typeof title === \"string\" ? (\n <Text type=\"text1\" className={cx(styles.headerContent)}>\n {title}\n </Text>\n ) : (\n title\n );\n }, [title]);\n\n const renderIcon = () => (\n <Icon\n className={cx(styles.iconComponent, {\n [styles.animateIconOpen]: isExpanded,\n [styles.animateIconClose]: !isExpanded\n })}\n iconType=\"svg\"\n icon={DropdownChevronDown}\n iconSize={iconSize}\n />\n );\n\n return (\n <div\n ref={mergedRef}\n className={className}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.EXPAND_COLLAPSE, id)}\n data-vibe={ComponentVibeId.EXPAND_COLLAPSE}\n >\n <div\n className={cx(\n styles.expandCollapse,\n {\n [styles.hideBorder]: hideBorder,\n [styles.showBorder]: !hideBorder\n },\n componentClassName\n )}\n >\n <button\n type=\"button\"\n className={cx(styles.header, styles.section, headerClassName, {\n [styles.headerOpen]: isExpanded,\n [styles.hideBorderBottom]: hideBorder,\n [styles.leftIcon]: iconPosition === \"left\"\n })}\n onClickCapture={captureOnClick ? onClick || toggleExpand : undefined}\n onClick={!captureOnClick ? onClick || toggleExpand : undefined}\n aria-expanded={isExpanded}\n aria-controls={`${id}-controls`}\n >\n {iconPosition === \"left\" && renderIcon()}\n {typeof title !== \"string\" || title.length !== 0\n ? renderHeader()\n : headerComponentRenderer && headerComponentRenderer()}\n {iconPosition === \"right\" && renderIcon()}\n </button>\n {isExpanded && (\n <div\n className={cx(styles.content, styles.section, contentClassName, {\n [styles.animateExpandCollapseContent]: isExpanded\n })}\n id={`${id}-controls`}\n role=\"region\"\n >\n {children}\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n\nexport default ExpandCollapse;\n"],"names":["ExpandCollapse","forwardRef","_ref","ref","children","_ref$headerComponentR","headerComponentRenderer","_ref$title","title","className","_ref$defaultOpenState","defaultOpenState","_ref$iconSize","iconSize","_ref$iconPosition","iconPosition","_ref$id","id","open","_ref$onClick","onClick","_ref$hideBorder","hideBorder","headerClassName","contentClassName","componentClassName","dataTestId","_ref$captureOnClick","captureOnClick","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isExpanded","undefined","toggleExpand","renderHeader","useCallback","React","createElement","Text","type","cx","styles","headerContent","renderIcon","Icon","iconComponent","_defineProperty","animateIconOpen","animateIconClose","iconType","icon","DropdownChevronDown","getTestId","ComponentDefaultTestId","EXPAND_COLLAPSE","ComponentVibeId","expandCollapse","showBorder","header","section","headerOpen","hideBorderBottom","leftIcon","onClickCapture","concat","length","content","animateExpandCollapseContent","role"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ExpandCollapse.js","sources":["../../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, forwardRef, type ReactElement, useCallback, useRef, useState } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Icon } from \"@vibe/icon\";\nimport Text from \"../Text/Text\";\nimport { DropdownChevronDown } from \"@vibe/icons\";\nimport { type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport styles from \"./ExpandCollapse.module.scss\";\nimport { type ExpandCollapseIconPosition } from \"./ExpandCollapse.types\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface ExpandCollapseProps extends VibeComponentProps {\n /**\n * Custom renderer for the header component.\n */\n headerComponentRenderer?: () => ReactElement;\n /**\n * Class name applied to the header.\n */\n headerClassName?: string;\n /**\n * Class name applied to the content.\n */\n contentClassName?: string;\n /**\n * Class name applied to the root component.\n */\n componentClassName?: string;\n /**\n * The title displayed in the header.\n */\n title?: ElementContent;\n /**\n * The content inside the expandable section.\n */\n children?: ElementContent;\n /**\n * The size of the expand/collapse icon.\n */\n iconSize?: number | string;\n /**\n * The position of the icon.\n */\n iconPosition?: ExpandCollapseIconPosition;\n /**\n * If true, the section is open by default when rendered.\n */\n defaultOpenState?: boolean;\n /**\n * Controls the open state of the section.\n */\n open?: boolean;\n /**\n * Callback fired when the header is clicked.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * If true, hides the border around the component.\n */\n hideBorder?: boolean;\n /**\n * If true, captures the click event on the button.\n */\n captureOnClick?: boolean;\n}\n\nconst ExpandCollapse: FC<ExpandCollapseProps> = forwardRef(\n (\n {\n children,\n headerComponentRenderer = null,\n title = \"\",\n className,\n defaultOpenState = false,\n iconSize = 24,\n iconPosition = \"right\",\n id = \"\",\n open,\n onClick = null,\n hideBorder = false,\n headerClassName,\n contentClassName,\n componentClassName,\n \"data-testid\": dataTestId,\n captureOnClick = true\n },\n ref\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const [isOpen, setIsOpen] = useState(defaultOpenState);\n const isExpanded = open === undefined ? isOpen : open;\n\n const toggleExpand = () => {\n setIsOpen(!isOpen);\n };\n const renderHeader = useCallback(() => {\n return typeof title === \"string\" ? (\n <Text type=\"text1\" className={cx(styles.headerContent)}>\n {title}\n </Text>\n ) : (\n title\n );\n }, [title]);\n\n const renderIcon = () => (\n <Icon\n className={cx(styles.iconComponent, {\n [styles.animateIconOpen]: isExpanded,\n [styles.animateIconClose]: !isExpanded\n })}\n iconType=\"svg\"\n icon={DropdownChevronDown}\n iconSize={iconSize}\n />\n );\n\n return (\n <div\n ref={mergedRef}\n className={className}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.EXPAND_COLLAPSE, id)}\n data-vibe={ComponentVibeId.EXPAND_COLLAPSE}\n >\n <div\n className={cx(\n styles.expandCollapse,\n {\n [styles.hideBorder]: hideBorder,\n [styles.showBorder]: !hideBorder\n },\n componentClassName\n )}\n >\n <button\n type=\"button\"\n className={cx(styles.header, styles.section, headerClassName, {\n [styles.headerOpen]: isExpanded,\n [styles.hideBorderBottom]: hideBorder,\n [styles.leftIcon]: iconPosition === \"left\"\n })}\n onClickCapture={captureOnClick ? onClick || toggleExpand : undefined}\n onClick={!captureOnClick ? onClick || toggleExpand : undefined}\n aria-expanded={isExpanded}\n aria-controls={`${id}-controls`}\n >\n {iconPosition === \"left\" && renderIcon()}\n {typeof title !== \"string\" || title.length !== 0\n ? renderHeader()\n : headerComponentRenderer && headerComponentRenderer()}\n {iconPosition === \"right\" && renderIcon()}\n </button>\n {isExpanded && (\n <div\n className={cx(styles.content, styles.section, contentClassName, {\n [styles.animateExpandCollapseContent]: isExpanded\n })}\n id={`${id}-controls`}\n role=\"region\"\n >\n {children}\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n\nexport default ExpandCollapse;\n"],"names":["ExpandCollapse","forwardRef","_ref","ref","children","_ref$headerComponentR","headerComponentRenderer","_ref$title","title","className","_ref$defaultOpenState","defaultOpenState","_ref$iconSize","iconSize","_ref$iconPosition","iconPosition","_ref$id","id","open","_ref$onClick","onClick","_ref$hideBorder","hideBorder","headerClassName","contentClassName","componentClassName","dataTestId","_ref$captureOnClick","captureOnClick","componentRef","useRef","mergedRef","useMergeRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","isExpanded","undefined","toggleExpand","renderHeader","useCallback","React","createElement","Text","type","cx","styles","headerContent","renderIcon","Icon","iconComponent","_defineProperty","animateIconOpen","animateIconClose","iconType","icon","DropdownChevronDown","getTestId","ComponentDefaultTestId","EXPAND_COLLAPSE","ComponentVibeId","expandCollapse","showBorder","header","section","headerOpen","hideBorderBottom","leftIcon","onClickCapture","concat","length","content","animateExpandCollapseContent","role"],"mappings":"0kBAmEMA,IAAAA,EAA0CC,GAC9C,SAAAC,EAmBEC,GACE,IAlBAC,EAAQF,EAARE,SAAQC,EAAAH,EACRI,wBAAAA,OAA0B,IAAHD,EAAG,KAAIA,EAAAE,EAAAL,EAC9BM,MAAAA,OAAQ,IAAHD,EAAG,GAAEA,EACVE,EAASP,EAATO,UAASC,EAAAR,EACTS,iBAAAA,OAAmB,IAAHD,GAAQA,EAAAE,EAAAV,EACxBW,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EAAAE,EAAAZ,EACba,aAAAA,OAAe,IAAHD,EAAG,QAAOA,EAAAE,EAAAd,EACtBe,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EACPE,EAAIhB,EAAJgB,KAAIC,EAAAjB,EACJkB,QAAAA,OAAU,IAAHD,EAAG,KAAIA,EAAAE,EAAAnB,EACdoB,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAerB,EAAfqB,gBACAC,EAAgBtB,EAAhBsB,iBACAC,EAAkBvB,EAAlBuB,mBACeC,EAAUxB,EAAzB,eAAayB,EAAAzB,EACb0B,eAAAA,OAAiB,IAAHD,GAAOA,EAIjBE,EAAeC,EAAO,MACtBC,EAAYC,EAAY7B,EAAK0B,GAEnCI,EAA4BC,EAASvB,GAAiBwB,EAAAC,EAAAH,EAAA,GAA/CI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAClBI,OAAsBC,IAATtB,EAAqBmB,EAASnB,EAE3CuB,EAAe,WACnBH,GAAWD,IAEPK,EAAeC,GAAY,WAC/B,MAAwB,iBAAVnC,EACZoC,EAAAC,cAACC,EAAI,CAACC,KAAK,QAAQtC,UAAWuC,EAAGC,EAAOC,gBACrC1C,GAGHA,CAEJ,GAAG,CAACA,IAEE2C,EAAa,WAAH,OACdP,EAACC,cAAAO,EACC,CAAA3C,UAAWuC,EAAGC,EAAOI,cAAaC,EAAAA,EAC/BL,CAAAA,EAAAA,EAAOM,gBAAkBhB,GACzBU,EAAOO,kBAAoBjB,IAE9BkB,SAAS,MACTC,KAAMC,EACN9C,SAAUA,KAId,OACE+B,EACEC,cAAA,MAAA,CAAA1C,IAAK4B,EACLtB,UAAWA,EACXQ,GAAIA,EACS,cAAAS,GAAckC,EAAUC,EAAuBC,gBAAiB7C,GAAG,YACrE8C,EAAgBD,iBAE3BlB,EAAAC,cAAA,MAAA,CACEpC,UAAWuC,EACTC,EAAOe,eAAcV,EAAAA,EAElBL,GAAAA,EAAO3B,WAAaA,GACpB2B,EAAOgB,YAAc3C,GAExBG,IAGFmB,EAAAC,cAAA,SAAA,CACEE,KAAK,SACLtC,UAAWuC,EAAGC,EAAOiB,OAAQjB,EAAOkB,QAAS5C,EAAe+B,EAAAA,EAAAA,EAAA,CAAA,EACzDL,EAAOmB,WAAa7B,GACpBU,EAAOoB,iBAAmB/C,GAC1B2B,EAAOqB,SAA4B,SAAjBvD,IAErBwD,eAAgB3C,EAAiBR,GAAWqB,OAAeD,EAC3DpB,QAAUQ,OAA2CY,EAA1BpB,GAAWqB,EACvB,gBAAAF,EACA,gBAAA,GAAAiC,OAAGvD,EAAE,cAEF,SAAjBF,GAA2BoC,IACV,iBAAV3C,GAAuC,IAAjBA,EAAMiE,OAChC/B,IACApC,GAA2BA,IACb,UAAjBS,GAA4BoC,KAE9BZ,GACCK,EAAAC,cAAA,MAAA,CACEpC,UAAWuC,EAAGC,EAAOyB,QAASzB,EAAOkB,QAAS3C,EAAgB8B,EAC3DL,CAAAA,EAAAA,EAAO0B,6BAA+BpC,IAEzCtB,GAAEuD,GAAAA,OAAKvD,EAAa,aACpB2D,KAAK,UAEJxE,IAMb"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"classnames";import
|
|
1
|
+
import e from"classnames";import o,{forwardRef as a}from"react";import l from"./FieldLabel.module.scss.js";import n from"../../../components/icon/dist/Icon/Icon.js";var r=a((function(a,r){var t=a.icon,m=void 0===t?"":t,s=a.labelText,i=void 0===s?"":s,c=a.labelFor,d=void 0===c?"":c,p=a.iconClassName,v=void 0===p?"":p,b=a.labelClassName,f=void 0===b?"":b,u=a.required,N=void 0!==u&&u,C=a.id,E=void 0===C?"":C,F=a.htmlFor,x=void 0===F?"":F;return i?o.createElement("section",{className:e(l.labelComponentWrapper,a.className)},o.createElement(n,{icon:m,className:e(l.labelComponentIcon,v),id:d,iconType:"font"}),o.createElement("label",{id:E,htmlFor:d||x,ref:r,className:e(l.labelComponentText,f)},i,N&&o.createElement("span",{className:l.required}," *"))):null}));export{r as default};
|
|
2
2
|
//# sourceMappingURL=FieldLabel.js.map
|