@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":"FieldLabel.js","sources":["../../../../../src/components/FieldLabel/FieldLabel.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, type ForwardedRef, forwardRef } from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./FieldLabel.module.scss\";\n\nexport interface FieldLabelProps extends VibeComponentProps {\n /**\n * The icon displayed next to the label.\n */\n icon?: string | React.FunctionComponent | null;\n /**\n * The text content of the label.\n */\n labelText?: string;\n /**\n * The ID of the associated input element.\n */\n labelFor?: string;\n /**\n * Class name applied to the icon.\n */\n iconClassName?: string;\n /**\n * Class name applied to the label text.\n */\n labelClassName?: string;\n /**\n * If true, displays an asterisk to indicate a required field.\n */\n required?: boolean;\n /**\n * The HTML for attribute of the associated input element.\n */\n htmlFor?: string;\n}\n\nconst FieldLabel: FC<FieldLabelProps> = forwardRef(\n (\n {\n className,\n icon = \"\",\n labelText = \"\",\n labelFor = \"\",\n iconClassName = \"\",\n labelClassName = \"\",\n required = false,\n id = \"\",\n htmlFor = \"\"\n },\n ref: ForwardedRef<HTMLLabelElement>\n ) => {\n if (!labelText) {\n return null;\n }\n\n return (\n <section className={cx(styles.labelComponentWrapper, className)}>\n <Icon icon={icon} className={cx(styles.labelComponentIcon, iconClassName)} id={labelFor} iconType=\"font\" />\n <label\n id={id}\n htmlFor={labelFor || htmlFor}\n ref={ref}\n className={cx(styles.labelComponentText, labelClassName)}\n >\n {labelText}\n {required && <span className={styles.required}> *</span>}\n </label>\n </section>\n );\n }\n);\n\nexport default FieldLabel;\n"],"names":["FieldLabel","forwardRef","_ref","ref","_ref$icon","icon","_ref$labelText","labelText","_ref$labelFor","labelFor","_ref$iconClassName","iconClassName","_ref$labelClassName","labelClassName","_ref$required","required","_ref$id","id","_ref$htmlFor","htmlFor","React","createElement","className","cx","styles","labelComponentWrapper","Icon","labelComponentIcon","iconType","labelComponentText"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldLabel.js","sources":["../../../../../src/components/FieldLabel/FieldLabel.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { type FC, type ForwardedRef, forwardRef } from \"react\";\nimport { Icon } from \"@vibe/icon\";\nimport type VibeComponentProps from \"../../types/VibeComponentProps\";\nimport styles from \"./FieldLabel.module.scss\";\n\nexport interface FieldLabelProps extends VibeComponentProps {\n /**\n * The icon displayed next to the label.\n */\n icon?: string | React.FunctionComponent | null;\n /**\n * The text content of the label.\n */\n labelText?: string;\n /**\n * The ID of the associated input element.\n */\n labelFor?: string;\n /**\n * Class name applied to the icon.\n */\n iconClassName?: string;\n /**\n * Class name applied to the label text.\n */\n labelClassName?: string;\n /**\n * If true, displays an asterisk to indicate a required field.\n */\n required?: boolean;\n /**\n * The HTML for attribute of the associated input element.\n */\n htmlFor?: string;\n}\n\nconst FieldLabel: FC<FieldLabelProps> = forwardRef(\n (\n {\n className,\n icon = \"\",\n labelText = \"\",\n labelFor = \"\",\n iconClassName = \"\",\n labelClassName = \"\",\n required = false,\n id = \"\",\n htmlFor = \"\"\n },\n ref: ForwardedRef<HTMLLabelElement>\n ) => {\n if (!labelText) {\n return null;\n }\n\n return (\n <section className={cx(styles.labelComponentWrapper, className)}>\n <Icon icon={icon} className={cx(styles.labelComponentIcon, iconClassName)} id={labelFor} iconType=\"font\" />\n <label\n id={id}\n htmlFor={labelFor || htmlFor}\n ref={ref}\n className={cx(styles.labelComponentText, labelClassName)}\n >\n {labelText}\n {required && <span className={styles.required}> *</span>}\n </label>\n </section>\n );\n }\n);\n\nexport default FieldLabel;\n"],"names":["FieldLabel","forwardRef","_ref","ref","_ref$icon","icon","_ref$labelText","labelText","_ref$labelFor","labelFor","_ref$iconClassName","iconClassName","_ref$labelClassName","labelClassName","_ref$required","required","_ref$id","id","_ref$htmlFor","htmlFor","React","createElement","className","cx","styles","labelComponentWrapper","Icon","labelComponentIcon","iconType","labelComponentText"],"mappings":"qKAqCMA,IAAAA,EAAkCC,GACtC,SAAAC,EAYEC,GACE,IAXSC,EAAAF,EACTG,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAJ,EACTK,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAN,EACdO,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EACbS,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAV,EAClBW,eAAAA,OAAiB,IAAHD,EAAG,GAAEA,EAAAE,EAAAZ,EACnBa,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAd,EAChBe,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAhB,EACPiB,QAAAA,OAAU,IAAHD,EAAG,GAAEA,EAId,OAAKX,EAKHa,EAASC,cAAA,UAAA,CAAAC,UAAWC,EAAGC,EAAOC,sBAjBrBvB,EAAToB,YAkBEF,EAACC,cAAAK,EAAK,CAAArB,KAAMA,EAAMiB,UAAWC,EAAGC,EAAOG,mBAAoBhB,GAAgBM,GAAIR,EAAUmB,SAAS,SAClGR,EACEC,cAAA,QAAA,CAAAJ,GAAIA,EACJE,QAASV,GAAYU,EACrBhB,IAAKA,EACLmB,UAAWC,EAAGC,EAAOK,mBAAoBhB,IAExCN,EACAQ,GAAYK,EAAMC,cAAA,OAAA,CAAAC,UAAWE,EAAOT,UAAmB,QAbrD,IAiBX"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{forwardRef as
|
|
1
|
+
import e,{forwardRef as t,useRef as o,useMemo as s,Fragment as i}from"react";import r from"classnames";import{noop as a}from"es-toolkit";import n from"../../hooks/useMergeRef.js";import d from"../Tooltip/Tooltip.js";import{getWidthHeight as c}from"./services/IconButton-helpers.js";import{withStaticProps as l}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as m}from"../../tests/testIds.js";import{ComponentDefaultTestId as p,ComponentVibeId as u}from"../../tests/constants.js";import{getStyle as f}from"../../helpers/typesciptCssModulesHelper.js";import v from"./IconButton.module.scss.js";import b from"../../../components/button/dist/Button/Button.js";import j from"../../../components/icon/dist/Icon/Icon.js";import g from"../../../icons/dist/react/AddSmall.js";var C=l(t((function(t,l){var C=t.className,y=t.wrapperClassName,N=t.iconClassName,I=t.id,h=t.icon,k=void 0===h?g:h,x=t.size,B=void 0===x?"medium":x,O=t.tooltipProps,T=void 0===O?{}:O,E=t.tooltipContent,P=t.ariaLabeledBy,S=t.ariaLabel,w=t.ariaHasPopup,z=t.ariaExpanded,L=t.ariaControls,F=t["aria-describedby"],H=t["aria-hidden"],M=t["aria-pressed"],R=t.hideTooltip,U=void 0!==R&&R,W=t.kind,_=void 0===W?"tertiary":W,A=t.active,q=t.disabled,D=void 0!==q&&q,G=t.disabledReason,J=t.onClick,K=void 0===J?a:J,Q=t.color,V=t["data-testid"],X=t.insetFocus,Y=void 0!==X&&X,Z=t.tabIndex,$=t.loading,ee=void 0!==$&&$,te=o(null),oe=n(l,te),se=s((function(){return(null==T?void 0:T.content)||E}),[null==T?void 0:T.content,E]),ie=s((function(){return S||("string"==typeof se?se:void 0)}),[S,se]),re=s((function(){switch(B){case"xxs":case"xs":return 16;case"small":case"medium":case"large":return 20;default:return 24}}),[B]),ae=s((function(){var e={justifyContent:"center",alignItems:"center",padding:0};return B&&(e=Object.assign(Object.assign({},e),c(B))),e}),[B]),ne=s((function(){return U?null:D&&G?G:se||S}),[U,D,G,se,S]),de=y?"div":i,ce=s((function(){return y?{className:r(y,v.wrapper)}:{}}),[y]);return e.createElement(de,Object.assign({},ce),e.createElement(d,Object.assign({},T,{content:ne,referenceWrapperClassName:v.referenceWrapper}),e.createElement(b,{onClick:K,disabled:D,color:Q,kind:_,ariaLabeledBy:P,ariaLabel:ie,ariaHasPopup:w,ariaExpanded:z,ariaControls:L,"aria-describedby":F,"aria-hidden":H,"aria-pressed":M,ref:oe,id:I,"data-testid":V||m(p.ICON_BUTTON,I),"data-vibe":u.ICON_BUTTON,noSidePadding:!0,active:A,className:C,style:ae,insetFocus:Y,tabIndex:Z,loading:ee,loaderClassName:r(v.loader,f(v,B))},e.createElement(j,{icon:k,iconType:"svg",iconSize:re,ignoreFocusStyle:!0,className:N}))))})),{sizes:b.sizes,kinds:b.kinds,colors:b.colors});export{C as default};
|
|
2
2
|
//# sourceMappingURL=IconButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.js","sources":["../../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import React, { type AriaAttributes, forwardRef, Fragment, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Tooltip, { type TooltipProps } from \"../Tooltip/Tooltip\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { AddSmall } from \"@vibe/icons\";\nimport { getWidthHeight, type Size } from \"./services/IconButton-helpers\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Button, type ButtonColor, type ButtonType } from \"@vibe/button\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./IconButton.module.scss\";\n\nexport interface IconButtonProps extends VibeComponentProps {\n /**\n * Callback fired when the button is clicked.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the button wrapper.\n */\n wrapperClassName?: string;\n /**\n * Class name applied to the icon.\n */\n iconClassName?: string;\n /**\n * The icon displayed inside the button.\n */\n icon?: SubIcon;\n /**\n * The ID of the element that labels this button.\n */\n ariaLabeledBy?: string;\n /**\n * The ARIA label for accessibility.\n */\n ariaLabel?: string;\n /**\n * If true, indicates that the button controls a popup.\n */\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /**\n * If true, indicates that the associated popup is open.\n */\n ariaExpanded?: boolean;\n /**\n * The ID of the region controlled by the button.\n */\n ariaControls?: string;\n /**\n * ID of the element describing the button.\n */\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /**\n * If true, hides the button from assistive technologies.\n */\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /**\n * Indicates the current \"pressed\" state of toggle buttons.\n */\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /**\n * The size of the button.\n */\n size?: Size;\n /**\n * If true, hides the tooltip.\n */\n hideTooltip?: boolean;\n /**\n * Props for the Tooltip component.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Tooltip content displayed on hover.\n */\n tooltipContent?: string;\n /**\n * The button variant.\n */\n kind?: ButtonType;\n /**\n * If true, the button is in an active state.\n */\n active?: boolean;\n /**\n * The color of the button.\n */\n color?: ButtonColor;\n /**\n * If true, the button is disabled.\n */\n disabled?: boolean;\n /**\n * If disabled, this message will be displayed in the tooltip.\n */\n disabledReason?: string;\n /**\n * If true, the focus indicator is displayed inside the button instead of around it.\n */\n insetFocus?: boolean;\n /**\n * The tab order of the button.\n */\n tabIndex?: number;\n /**\n * If true, a loader replaces the icon.\n */\n loading?: boolean;\n}\n\nconst IconButton = forwardRef(\n (\n {\n className,\n wrapperClassName,\n iconClassName,\n id,\n icon = AddSmall,\n size = \"medium\",\n tooltipProps = {} as TooltipProps,\n tooltipContent,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n hideTooltip = false,\n kind = \"tertiary\",\n active,\n disabled = false,\n disabledReason,\n onClick = NOOP,\n color,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex,\n loading = false\n }: IconButtonProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const overrideTooltipContent = useMemo(\n () => tooltipProps?.content || tooltipContent,\n [tooltipProps?.content, tooltipContent]\n );\n\n const buttonAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n if (typeof overrideTooltipContent === \"string\") return overrideTooltipContent;\n return undefined;\n }, [ariaLabel, overrideTooltipContent]);\n\n const iconSize = useMemo(() => {\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n case \"small\":\n case \"medium\":\n case \"large\":\n return 20;\n default:\n return 24;\n }\n }, [size]);\n\n const overrideStyle = useMemo(() => {\n let style = {\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: 0\n } as React.CSSProperties;\n\n if (size) {\n style = { ...style, ...getWidthHeight(size) };\n }\n return style;\n }, [size]);\n\n const calculatedTooltipContent = useMemo(() => {\n if (hideTooltip) return null;\n if (disabled && disabledReason) return disabledReason;\n if (overrideTooltipContent) return overrideTooltipContent as never;\n return ariaLabel;\n }, [hideTooltip, disabled, disabledReason, overrideTooltipContent, ariaLabel]);\n\n const IconButtonWrapper = wrapperClassName ? \"div\" : Fragment;\n const iconButtonWrapperProps = useMemo(() => {\n return wrapperClassName ? { className: cx(wrapperClassName, styles.wrapper) } : {};\n }, [wrapperClassName]);\n\n return (\n <IconButtonWrapper {...iconButtonWrapperProps}>\n <Tooltip\n {...tooltipProps}\n content={calculatedTooltipContent}\n referenceWrapperClassName={styles.referenceWrapper}\n >\n <Button\n onClick={onClick}\n disabled={disabled}\n color={color}\n kind={kind}\n ariaLabeledBy={ariaLabeledBy}\n ariaLabel={buttonAriaLabel}\n ariaHasPopup={ariaHasPopup}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n aria-describedby={ariaDescribedBy}\n aria-hidden={ariaHidden}\n aria-pressed={ariaPressed}\n ref={mergedRef}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.ICON_BUTTON, id)}\n data-vibe={ComponentVibeId.ICON_BUTTON}\n noSidePadding\n active={active}\n className={className}\n style={overrideStyle}\n insetFocus={insetFocus}\n tabIndex={tabIndex}\n loading={loading}\n loaderClassName={cx(styles.loader, getStyle(styles, size))}\n >\n <Icon icon={icon} iconType=\"svg\" iconSize={iconSize} ignoreFocusStyle className={iconClassName} />\n </Button>\n </Tooltip>\n </IconButtonWrapper>\n );\n }\n);\n\ninterface IconButtonStaticProps {\n sizes: typeof Button.sizes;\n kinds: typeof Button.kinds;\n colors: typeof Button.colors;\n}\n\nexport default withStaticProps<IconButtonProps, IconButtonStaticProps>(IconButton, {\n sizes: Button.sizes,\n kinds: Button.kinds,\n colors: Button.colors\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","wrapperClassName","iconClassName","id","_ref$icon","icon","AddSmall","_ref$size","size","_ref$tooltipProps","tooltipProps","tooltipContent","ariaLabeledBy","ariaLabel","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","_ref$hideTooltip","hideTooltip","_ref$kind","kind","active","_ref$disabled","disabled","disabledReason","_ref$onClick","onClick","NOOP","color","dataTestId","_ref$insetFocus","insetFocus","tabIndex","_ref$loading","loading","componentRef","useRef","mergedRef","useMergeRef","overrideTooltipContent","useMemo","content","buttonAriaLabel","iconSize","overrideStyle","style","justifyContent","alignItems","padding","Object","assign","getWidthHeight","calculatedTooltipContent","IconButtonWrapper","Fragment","iconButtonWrapperProps","cx","styles","wrapper","React","createElement","Tooltip","referenceWrapperClassName","referenceWrapper","Button","getTestId","ComponentDefaultTestId","ICON_BUTTON","ComponentVibeId","noSidePadding","loaderClassName","loader","getStyle","Icon","iconType","ignoreFocusStyle","sizes","kinds","colors"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"IconButton.js","sources":["../../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import React, { type AriaAttributes, forwardRef, Fragment, useMemo, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { noop as NOOP } from \"es-toolkit\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport Tooltip, { type TooltipProps } from \"../Tooltip/Tooltip\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { AddSmall } from \"@vibe/icons\";\nimport { getWidthHeight, type Size } from \"./services/IconButton-helpers\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { Button, type ButtonColor, type ButtonType } from \"@vibe/button\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./IconButton.module.scss\";\n\nexport interface IconButtonProps extends VibeComponentProps {\n /**\n * Callback fired when the button is clicked.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Class name applied to the button wrapper.\n */\n wrapperClassName?: string;\n /**\n * Class name applied to the icon.\n */\n iconClassName?: string;\n /**\n * The icon displayed inside the button.\n */\n icon?: SubIcon;\n /**\n * The ID of the element that labels this button.\n */\n ariaLabeledBy?: string;\n /**\n * The ARIA label for accessibility.\n */\n ariaLabel?: string;\n /**\n * If true, indicates that the button controls a popup.\n */\n ariaHasPopup?: React.HTMLProps<HTMLButtonElement>[\"aria-haspopup\"];\n /**\n * If true, indicates that the associated popup is open.\n */\n ariaExpanded?: boolean;\n /**\n * The ID of the region controlled by the button.\n */\n ariaControls?: string;\n /**\n * ID of the element describing the button.\n */\n \"aria-describedby\"?: AriaAttributes[\"aria-describedby\"];\n /**\n * If true, hides the button from assistive technologies.\n */\n \"aria-hidden\"?: AriaAttributes[\"aria-hidden\"];\n /**\n * Indicates the current \"pressed\" state of toggle buttons.\n */\n \"aria-pressed\"?: AriaAttributes[\"aria-pressed\"];\n /**\n * The size of the button.\n */\n size?: Size;\n /**\n * If true, hides the tooltip.\n */\n hideTooltip?: boolean;\n /**\n * Props for the Tooltip component.\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * Tooltip content displayed on hover.\n */\n tooltipContent?: string;\n /**\n * The button variant.\n */\n kind?: ButtonType;\n /**\n * If true, the button is in an active state.\n */\n active?: boolean;\n /**\n * The color of the button.\n */\n color?: ButtonColor;\n /**\n * If true, the button is disabled.\n */\n disabled?: boolean;\n /**\n * If disabled, this message will be displayed in the tooltip.\n */\n disabledReason?: string;\n /**\n * If true, the focus indicator is displayed inside the button instead of around it.\n */\n insetFocus?: boolean;\n /**\n * The tab order of the button.\n */\n tabIndex?: number;\n /**\n * If true, a loader replaces the icon.\n */\n loading?: boolean;\n}\n\nconst IconButton = forwardRef(\n (\n {\n className,\n wrapperClassName,\n iconClassName,\n id,\n icon = AddSmall,\n size = \"medium\",\n tooltipProps = {} as TooltipProps,\n tooltipContent,\n ariaLabeledBy,\n ariaLabel,\n ariaHasPopup,\n ariaExpanded,\n ariaControls,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-hidden\": ariaHidden,\n \"aria-pressed\": ariaPressed,\n hideTooltip = false,\n kind = \"tertiary\",\n active,\n disabled = false,\n disabledReason,\n onClick = NOOP,\n color,\n \"data-testid\": dataTestId,\n insetFocus = false,\n tabIndex,\n loading = false\n }: IconButtonProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n const overrideTooltipContent = useMemo(\n () => tooltipProps?.content || tooltipContent,\n [tooltipProps?.content, tooltipContent]\n );\n\n const buttonAriaLabel = useMemo(() => {\n if (ariaLabel) return ariaLabel;\n if (typeof overrideTooltipContent === \"string\") return overrideTooltipContent;\n return undefined;\n }, [ariaLabel, overrideTooltipContent]);\n\n const iconSize = useMemo(() => {\n switch (size) {\n case \"xxs\":\n case \"xs\":\n return 16;\n case \"small\":\n case \"medium\":\n case \"large\":\n return 20;\n default:\n return 24;\n }\n }, [size]);\n\n const overrideStyle = useMemo(() => {\n let style = {\n justifyContent: \"center\",\n alignItems: \"center\",\n padding: 0\n } as React.CSSProperties;\n\n if (size) {\n style = { ...style, ...getWidthHeight(size) };\n }\n return style;\n }, [size]);\n\n const calculatedTooltipContent = useMemo(() => {\n if (hideTooltip) return null;\n if (disabled && disabledReason) return disabledReason;\n if (overrideTooltipContent) return overrideTooltipContent as never;\n return ariaLabel;\n }, [hideTooltip, disabled, disabledReason, overrideTooltipContent, ariaLabel]);\n\n const IconButtonWrapper = wrapperClassName ? \"div\" : Fragment;\n const iconButtonWrapperProps = useMemo(() => {\n return wrapperClassName ? { className: cx(wrapperClassName, styles.wrapper) } : {};\n }, [wrapperClassName]);\n\n return (\n <IconButtonWrapper {...iconButtonWrapperProps}>\n <Tooltip\n {...tooltipProps}\n content={calculatedTooltipContent}\n referenceWrapperClassName={styles.referenceWrapper}\n >\n <Button\n onClick={onClick}\n disabled={disabled}\n color={color}\n kind={kind}\n ariaLabeledBy={ariaLabeledBy}\n ariaLabel={buttonAriaLabel}\n ariaHasPopup={ariaHasPopup}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n aria-describedby={ariaDescribedBy}\n aria-hidden={ariaHidden}\n aria-pressed={ariaPressed}\n ref={mergedRef}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.ICON_BUTTON, id)}\n data-vibe={ComponentVibeId.ICON_BUTTON}\n noSidePadding\n active={active}\n className={className}\n style={overrideStyle}\n insetFocus={insetFocus}\n tabIndex={tabIndex}\n loading={loading}\n loaderClassName={cx(styles.loader, getStyle(styles, size))}\n >\n <Icon icon={icon} iconType=\"svg\" iconSize={iconSize} ignoreFocusStyle className={iconClassName} />\n </Button>\n </Tooltip>\n </IconButtonWrapper>\n );\n }\n);\n\ninterface IconButtonStaticProps {\n sizes: typeof Button.sizes;\n kinds: typeof Button.kinds;\n colors: typeof Button.colors;\n}\n\nexport default withStaticProps<IconButtonProps, IconButtonStaticProps>(IconButton, {\n sizes: Button.sizes,\n kinds: Button.kinds,\n colors: Button.colors\n});\n"],"names":["withStaticProps","forwardRef","_ref","ref","className","wrapperClassName","iconClassName","id","_ref$icon","icon","AddSmall","_ref$size","size","_ref$tooltipProps","tooltipProps","tooltipContent","ariaLabeledBy","ariaLabel","ariaHasPopup","ariaExpanded","ariaControls","ariaDescribedBy","ariaHidden","ariaPressed","_ref$hideTooltip","hideTooltip","_ref$kind","kind","active","_ref$disabled","disabled","disabledReason","_ref$onClick","onClick","NOOP","color","dataTestId","_ref$insetFocus","insetFocus","tabIndex","_ref$loading","loading","componentRef","useRef","mergedRef","useMergeRef","overrideTooltipContent","useMemo","content","buttonAriaLabel","iconSize","overrideStyle","style","justifyContent","alignItems","padding","Object","assign","getWidthHeight","calculatedTooltipContent","IconButtonWrapper","Fragment","iconButtonWrapperProps","cx","styles","wrapper","React","createElement","Tooltip","referenceWrapperClassName","referenceWrapper","Button","getTestId","ComponentDefaultTestId","ICON_BUTTON","ComponentVibeId","noSidePadding","loaderClassName","loader","getStyle","Icon","iconType","ignoreFocusStyle","sizes","kinds","colors"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import
|
|
1
|
+
import{slicedToArray as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as e,useRef as t,useState as a,useCallback as n}from"react";import r from"../IconButton/IconButton.js";import"../../../_virtual/_tslib.js";import"classnames";import"../Link/Link.js";import"./components/InfoLink/InfoLink.module.scss.js";import l from"./components/InfoDialogContent/InfoDialogContent.js";import{ComponentDefaultTestId as s,ComponentVibeId as d}from"../../tests/constants.js";import{getTestId as c}from"../../tests/testIds.js";import m from"../../hooks/useMergeRef.js";import u from"../../../components/dialog/dist/Dialog/Dialog.js";import p from"../../../icons/dist/react/Info.js";var f=e((function(e,f){var g=e.id,b=e.className,v=e.title,k=e.body,j=e.link,y=e["aria-label"],D=e["aria-labelledby"],I=e.position,h=void 0===I?"bottom-start":I,B=e.disabled,L=void 0!==B&&B,N=e.onDialogShow,E=e.onDialogHide,H=e.hideButtonTooltip,T=e.dialogClassName,C=e.containerSelector,S=e["data-testid"],_=t(null),w=m(f,_),x=t(null),F=t(null),A=a(!1),O=o(A,2),P=O[0],R=O[1],q=g?"".concat(g,"-dialog"):void 0,z=n((function(){R(!0),null==N||N(),requestAnimationFrame((function(){var o;null===(o=F.current)||void 0===o||o.focus()}))}),[N]),M=n((function(o){var i;R(!1),null==E||E(),"Escape"===o.key&&(null===(i=_.current)||void 0===i||i.focus())}),[E]);return i.createElement(u,{ref:x,id:q,disable:L,position:h,moveBy:{main:4,secondary:0},showTrigger:["click"],hideTrigger:["click","clickoutside","esckey"],onDialogDidShow:z,onDialogDidHide:M,containerSelector:C,content:i.createElement(l,{ref:F,id:q,title:v,body:k,link:j,className:T}),hideWhenReferenceHidden:!0},i.createElement(r,{ref:w,id:g,className:b,icon:p,size:"xs",kind:"tertiary",active:P,disabled:L,ariaLabel:y,ariaLabeledBy:D,ariaControls:q,ariaHasPopup:"dialog",ariaExpanded:P,"data-testid":S||c(s.INFO,g),"data-vibe":d.INFO,hideTooltip:H}))}));export{f as default};
|
|
2
2
|
//# sourceMappingURL=Info.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.js","sources":["../../../../../src/components/Info/Info.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Info as InfoIcon } from \"@vibe/icons\";\nimport { IconButton } from \"../IconButton\";\nimport { Dialog, type DialogEvent } from \"@vibe/dialog\";\nimport { InfoDialogContent } from \"./components\";\nimport { type InfoProps } from \"./Info.types\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\n\nconst Info = forwardRef(\n (\n {\n id,\n className,\n title,\n body,\n link,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n position = \"bottom-start\",\n disabled = false,\n onDialogShow,\n onDialogHide,\n hideButtonTooltip,\n dialogClassName,\n containerSelector,\n \"data-testid\": dataTestId\n }: InfoProps,\n ref: React.ForwardedRef<HTMLButtonElement>\n ) => {\n const iconButtonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, iconButtonRef);\n const dialogRef = useRef<Dialog>(null);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const dialogId = id ? `${id}-dialog` : undefined;\n\n const handleDialogShow = useCallback(() => {\n setIsOpen(true);\n onDialogShow?.();\n requestAnimationFrame(() => {\n dialogContentRef.current?.focus();\n });\n }, [onDialogShow]);\n\n const handleDialogHide = useCallback(\n (e: DialogEvent) => {\n setIsOpen(false);\n onDialogHide?.();\n if ((e as React.KeyboardEvent).key === \"Escape\") {\n iconButtonRef.current?.focus();\n }\n },\n [onDialogHide]\n );\n\n return (\n <Dialog\n ref={dialogRef}\n id={dialogId}\n disable={disabled}\n position={position}\n moveBy={{ main: 4, secondary: 0 }}\n showTrigger={[\"click\"]}\n hideTrigger={[\"click\", \"clickoutside\", \"esckey\"]}\n onDialogDidShow={handleDialogShow}\n onDialogDidHide={handleDialogHide}\n containerSelector={containerSelector}\n content={\n <InfoDialogContent\n ref={dialogContentRef}\n id={dialogId}\n title={title}\n body={body}\n link={link}\n className={dialogClassName}\n />\n }\n hideWhenReferenceHidden\n >\n <IconButton\n ref={mergedRef}\n id={id}\n className={className}\n icon={InfoIcon}\n size=\"xs\"\n kind=\"tertiary\"\n active={isOpen}\n disabled={disabled}\n ariaLabel={ariaLabel}\n ariaLabeledBy={ariaLabelledby}\n ariaControls={dialogId}\n ariaHasPopup=\"dialog\"\n ariaExpanded={isOpen}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.INFO, id)}\n data-vibe={ComponentVibeId.INFO}\n hideTooltip={hideButtonTooltip}\n />\n </Dialog>\n );\n }\n);\n\nexport default Info;\n"],"names":["Info","forwardRef","_ref","ref","id","className","title","body","link","ariaLabel","ariaLabelledby","_ref$position","position","_ref$disabled","disabled","onDialogShow","onDialogHide","hideButtonTooltip","dialogClassName","containerSelector","dataTestId","iconButtonRef","useRef","mergedRef","useMergeRef","dialogRef","dialogContentRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","dialogId","concat","undefined","handleDialogShow","useCallback","requestAnimationFrame","_a","current","focus","handleDialogHide","e","key","React","createElement","Dialog","disable","moveBy","main","secondary","showTrigger","hideTrigger","onDialogDidShow","onDialogDidHide","content","InfoDialogContent","hideWhenReferenceHidden","IconButton","icon","InfoIcon","size","kind","active","ariaLabeledBy","ariaControls","ariaHasPopup","ariaExpanded","getTestId","ComponentDefaultTestId","INFO","ComponentVibeId","hideTooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Info.js","sources":["../../../../../src/components/Info/Info.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Info as InfoIcon } from \"@vibe/icons\";\nimport { IconButton } from \"../IconButton\";\nimport { Dialog, type DialogEvent } from \"@vibe/dialog\";\nimport { InfoDialogContent } from \"./components\";\nimport { type InfoProps } from \"./Info.types\";\nimport { ComponentDefaultTestId, ComponentVibeId } from \"../../tests/constants\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\n\nconst Info = forwardRef(\n (\n {\n id,\n className,\n title,\n body,\n link,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledby,\n position = \"bottom-start\",\n disabled = false,\n onDialogShow,\n onDialogHide,\n hideButtonTooltip,\n dialogClassName,\n containerSelector,\n \"data-testid\": dataTestId\n }: InfoProps,\n ref: React.ForwardedRef<HTMLButtonElement>\n ) => {\n const iconButtonRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRef(ref, iconButtonRef);\n const dialogRef = useRef<Dialog>(null);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const dialogId = id ? `${id}-dialog` : undefined;\n\n const handleDialogShow = useCallback(() => {\n setIsOpen(true);\n onDialogShow?.();\n requestAnimationFrame(() => {\n dialogContentRef.current?.focus();\n });\n }, [onDialogShow]);\n\n const handleDialogHide = useCallback(\n (e: DialogEvent) => {\n setIsOpen(false);\n onDialogHide?.();\n if ((e as React.KeyboardEvent).key === \"Escape\") {\n iconButtonRef.current?.focus();\n }\n },\n [onDialogHide]\n );\n\n return (\n <Dialog\n ref={dialogRef}\n id={dialogId}\n disable={disabled}\n position={position}\n moveBy={{ main: 4, secondary: 0 }}\n showTrigger={[\"click\"]}\n hideTrigger={[\"click\", \"clickoutside\", \"esckey\"]}\n onDialogDidShow={handleDialogShow}\n onDialogDidHide={handleDialogHide}\n containerSelector={containerSelector}\n content={\n <InfoDialogContent\n ref={dialogContentRef}\n id={dialogId}\n title={title}\n body={body}\n link={link}\n className={dialogClassName}\n />\n }\n hideWhenReferenceHidden\n >\n <IconButton\n ref={mergedRef}\n id={id}\n className={className}\n icon={InfoIcon}\n size=\"xs\"\n kind=\"tertiary\"\n active={isOpen}\n disabled={disabled}\n ariaLabel={ariaLabel}\n ariaLabeledBy={ariaLabelledby}\n ariaControls={dialogId}\n ariaHasPopup=\"dialog\"\n ariaExpanded={isOpen}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.INFO, id)}\n data-vibe={ComponentVibeId.INFO}\n hideTooltip={hideButtonTooltip}\n />\n </Dialog>\n );\n }\n);\n\nexport default Info;\n"],"names":["Info","forwardRef","_ref","ref","id","className","title","body","link","ariaLabel","ariaLabelledby","_ref$position","position","_ref$disabled","disabled","onDialogShow","onDialogHide","hideButtonTooltip","dialogClassName","containerSelector","dataTestId","iconButtonRef","useRef","mergedRef","useMergeRef","dialogRef","dialogContentRef","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","dialogId","concat","undefined","handleDialogShow","useCallback","requestAnimationFrame","_a","current","focus","handleDialogHide","e","key","React","createElement","Dialog","disable","moveBy","main","secondary","showTrigger","hideTrigger","onDialogDidShow","onDialogDidHide","content","InfoDialogContent","hideWhenReferenceHidden","IconButton","icon","InfoIcon","size","kind","active","ariaLabeledBy","ariaControls","ariaHasPopup","ariaExpanded","getTestId","ComponentDefaultTestId","INFO","ComponentVibeId","hideTooltip"],"mappings":"wrBAUMA,IAAAA,EAAOC,GACX,SAAAC,EAkBEC,GACE,IAjBAC,EAAEF,EAAFE,GACAC,EAASH,EAATG,UACAC,EAAKJ,EAALI,MACAC,EAAIL,EAAJK,KACAC,EAAIN,EAAJM,KACcC,EAASP,EAAvB,cACmBQ,EAAcR,EAAjC,mBAAiBS,EAAAT,EACjBU,SAAAA,OAAW,IAAHD,EAAG,eAAcA,EAAAE,EAAAX,EACzBY,SAAAA,OAAW,IAAHD,GAAQA,EAChBE,EAAYb,EAAZa,aACAC,EAAYd,EAAZc,aACAC,EAAiBf,EAAjBe,kBACAC,EAAehB,EAAfgB,gBACAC,EAAiBjB,EAAjBiB,kBACeC,EAAUlB,EAAzB,eAIImB,EAAgBC,EAA0B,MAC1CC,EAAYC,EAAYrB,EAAKkB,GAC7BI,EAAYH,EAAe,MAC3BI,EAAmBJ,EAAuB,MAEhDK,EAA4BC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAApCI,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAElBI,EAAW7B,EAAE,GAAA8B,OAAM9B,kBAAc+B,EAEjCC,EAAmBC,GAAY,WACnCL,GAAU,GACVjB,SAAAA,IACAuB,uBAAsB,iBACM,QAA1BC,EAAAb,EAAiBc,eAAS,IAAAD,GAAAA,EAAAE,OAC5B,GACF,GAAG,CAAC1B,IAEE2B,EAAmBL,GACvB,SAACM,SACCX,GAAU,GACVhB,SAAAA,IACuC,WAAlC2B,EAA0BC,MACN,QAAvBL,EAAAlB,EAAcmB,eAAS,IAAAD,GAAAA,EAAAE,QAE3B,GACA,CAACzB,IAGH,OACE6B,EAACC,cAAAC,GACC5C,IAAKsB,EACLrB,GAAI6B,EACJe,QAASlC,EACTF,SAAUA,EACVqC,OAAQ,CAAEC,KAAM,EAAGC,UAAW,GAC9BC,YAAa,CAAC,SACdC,YAAa,CAAC,QAAS,eAAgB,UACvCC,gBAAiBlB,EACjBmB,gBAAiBb,EACjBvB,kBAAmBA,EACnBqC,QACEX,gBAACY,EAAiB,CAChBtD,IAAKuB,EACLtB,GAAI6B,EACJ3B,MAAOA,EACPC,KAAMA,EACNC,KAAMA,EACNH,UAAWa,IAGfwC,yBAAuB,GAEvBb,EAAAC,cAACa,EAAU,CACTxD,IAAKoB,EACLnB,GAAIA,EACJC,UAAWA,EACXuD,KAAMC,EACNC,KAAK,KACLC,KAAK,WACLC,OAAQjC,EACRjB,SAAUA,EACVL,UAAWA,EACXwD,cAAevD,EACfwD,aAAcjC,EACdkC,aAAa,SACbC,aAAcrC,EAAM,cACPX,GAAciD,EAAUC,EAAuBC,KAAMnE,eACvDoE,EAAgBD,KAC3BE,YAAaxD,IAIrB"}
|
package/dist/mocked_classnames/src/components/Info/components/InfoDialogContent/InfoDialogContent.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{forwardRef as t}from"react";import
|
|
1
|
+
import e,{forwardRef as t}from"react";import n from"../../../Text/Text.js";import o from"../../../Flex/Flex.js";import r from"../InfoLink/InfoLink.js";import a from"./InfoDialogContent.module.scss.js";import i from"../../../../../components/dialog/dist/DialogContentContainer/DialogContentContainer.js";var m=t((function(t,m){var l=t.title,s=t.body,c=t.link;return l||s||c?e.createElement(i,{id:t.id,type:"popover",size:"medium",className:t.className},e.createElement(o,{ref:m,tabIndex:-1,align:"start",direction:"column",gap:"xs",className:a.contentWrapper},l&&e.createElement(n,{type:"text2",weight:"bold"},l),s&&e.createElement(n,{type:"text2",element:"p"},s),c&&e.createElement(r,Object.assign({className:a.link},c)))):null}));export{m as default};
|
|
2
2
|
//# sourceMappingURL=InfoDialogContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoDialogContent.js","sources":["../../../../../../../src/components/Info/components/InfoDialogContent/InfoDialogContent.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { Text } from \"../../../Text\";\nimport { Flex } from \"../../../Flex\";\nimport InfoLink from \"../InfoLink/InfoLink\";\nimport { type InfoDialogContentProps } from \"./InfoDialogContent.types\";\nimport styles from \"./InfoDialogContent.module.scss\";\n\nconst InfoDialogContent = forwardRef(\n ({ id, title, body, link, className }: InfoDialogContentProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n if (!title && !body && !link) {\n return null;\n }\n\n return (\n <DialogContentContainer id={id} type=\"popover\" size=\"medium\" className={className}>\n <Flex ref={ref} tabIndex={-1} align=\"start\" direction=\"column\" gap=\"xs\" className={styles.contentWrapper}>\n {title && (\n <Text type=\"text2\" weight=\"bold\">\n {title}\n </Text>\n )}\n {body && (\n <Text type=\"text2\" element=\"p\">\n {body}\n </Text>\n )}\n {link && <InfoLink className={styles.link} {...link} />}\n </Flex>\n </DialogContentContainer>\n );\n }\n);\n\nexport default InfoDialogContent;\n"],"names":["InfoDialogContent","forwardRef","_ref","ref","title","body","link","React","createElement","DialogContentContainer","id","type","size","className","Flex","tabIndex","align","direction","gap","styles","contentWrapper","Text","weight","element","InfoLink","Object","assign"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InfoDialogContent.js","sources":["../../../../../../../src/components/Info/components/InfoDialogContent/InfoDialogContent.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { DialogContentContainer } from \"@vibe/dialog\";\nimport { Text } from \"../../../Text\";\nimport { Flex } from \"../../../Flex\";\nimport InfoLink from \"../InfoLink/InfoLink\";\nimport { type InfoDialogContentProps } from \"./InfoDialogContent.types\";\nimport styles from \"./InfoDialogContent.module.scss\";\n\nconst InfoDialogContent = forwardRef(\n ({ id, title, body, link, className }: InfoDialogContentProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n if (!title && !body && !link) {\n return null;\n }\n\n return (\n <DialogContentContainer id={id} type=\"popover\" size=\"medium\" className={className}>\n <Flex ref={ref} tabIndex={-1} align=\"start\" direction=\"column\" gap=\"xs\" className={styles.contentWrapper}>\n {title && (\n <Text type=\"text2\" weight=\"bold\">\n {title}\n </Text>\n )}\n {body && (\n <Text type=\"text2\" element=\"p\">\n {body}\n </Text>\n )}\n {link && <InfoLink className={styles.link} {...link} />}\n </Flex>\n </DialogContentContainer>\n );\n }\n);\n\nexport default InfoDialogContent;\n"],"names":["InfoDialogContent","forwardRef","_ref","ref","title","body","link","React","createElement","DialogContentContainer","id","type","size","className","Flex","tabIndex","align","direction","gap","styles","contentWrapper","Text","weight","element","InfoLink","Object","assign"],"mappings":"+SAQMA,IAAAA,EAAoBC,GACxB,SAAAC,EAA+DC,GAA2C,IAAnGC,EAAKF,EAALE,MAAOC,EAAIH,EAAJG,KAAMC,EAAIJ,EAAJI,KAClB,OAAKF,GAAUC,GAASC,EAKtBC,EAACC,cAAAC,GAAuBC,GANvBR,EAAFQ,GAMiCC,KAAK,UAAUC,KAAK,SAASC,UAN9BX,EAATW,WAOpBN,EAACC,cAAAM,EAAK,CAAAX,IAAKA,EAAKY,UAAW,EAAGC,MAAM,QAAQC,UAAU,SAASC,IAAI,KAAKL,UAAWM,EAAOC,gBACvFhB,GACCG,EAACC,cAAAa,GAAKV,KAAK,QAAQW,OAAO,QACvBlB,GAGJC,GACCE,EAACC,cAAAa,GAAKV,KAAK,QAAQY,QAAQ,KACxBlB,GAGJC,GAAQC,EAAAC,cAACgB,EAAQC,OAAAC,OAAA,CAACb,UAAWM,EAAOb,MAAUA,MAhB5C,IAoBX"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useMemo as
|
|
1
|
+
import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import o,{useMemo as r,useCallback as i,cloneElement as l}from"react";import a from"react-dom";import n from"classnames";import{useA11yDialog as s}from"./a11yDialog.js";import d from"./LegacyModalContent/LegacyModalContent.js";import m from"./LegacyModalHeader/LegacyModalHeader.js";import c from"./useBodyScrollLock.js";import u from"./useShowHideModal.js";import{ModalWidth as f,validateTitleProp as p,isModalHeader as v,isModalContent as y,isModalFooter as g}from"./ModalHelper.js";import{NOOP as j}from"../../utils/function-utils.js";import{withStaticPropsWithoutForwardRef as h}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getTestId as L}from"../../tests/testIds.js";import{ComponentDefaultTestId as M}from"../../tests/constants.js";import w from"./LegacyModal.module.scss.js";import{isClient as E}from"../../utils/ssr-utils.js";import C from"../../../components/layers/dist/LayerProvider/LayerProvider.js";var A=h((function(f){var h=f.classNames,A=void 0===h?{container:"",overlay:"",modal:""}:h,b=f.id,D=f.show,O=f.title,P=void 0===O?"":O,H=f.description,S=void 0===H?"":H,B=f.onClose,N=void 0===B?j:B,x=f.alertDialog,_=void 0!==x&&x,k=f.children,z=f.triggerElement,I=f.width,R=void 0===I?"default":I,T=f.closeButtonAriaLabel,V=void 0===T?"Close":T,Y=f.contentSpacing,$=void 0!==Y&&Y,q=f.zIndex,F=void 0===q?1e4:q,G=f.unmountOnClose,J=void 0===G||G,K=f["data-testid"],Q=r((function(){return k?o.Children.toArray(k):[]}),[k]);p(P,Q);var U=s({id:b,alertDialog:_}),W=e(U,2),X=W[0],Z=W[1],ee=i((function(){_||null==N||N()}),[_,N]);c({instance:X});var te=u({instance:X,show:D,triggerElement:z,onClose:N,alertDialog:_}).shouldShow,oe=r((function(){var e=Z.title.id,t=Q.find(v);return t?l(t,{id:e,closeModal:N}):o.createElement(m,{title:P,description:S,closeModal:N,id:e,closeButtonAriaLabel:V})}),[Z.title,Q,P,S,N,V]),re=r((function(){return Q.find(y)||o.createElement(d,null,Q.filter((function(e){return!v(e)&&!g(e)})))}),[Q]),ie=r((function(){return Q.find(g)||null}),[Q]),le="default"!==R&&"full-width"!==R,ae=o.createElement(C,{layerRef:{current:null==X?void 0:X.$el}},o.createElement("div",Object.assign({},Z.container,{className:n(w.container,A.container),"data-testid":K||L(M.MODAL,b),style:{"--monday-modal-z-index":F}}),o.createElement("div",{onClick:ee,className:n(w.overlay,A.overlay),"data-testid":M.MODAL_OVERLAY}),o.createElement("div",Object.assign({},Z.dialog,{className:n(w.dialog,A.modal,t(t(t({},w.default,"default"===R),w.full,"full-width"===R),w.spacing,$)),style:{width:le?R:null}}),oe,re,ie)));return J&&!te?null:E()?a.createPortal(ae,document.body):null}),{width:f});export{A as default};
|
|
2
2
|
//# sourceMappingURL=LegacyModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyModal.js","sources":["../../../../../src/components/LegacyModal/LegacyModal.tsx"],"sourcesContent":["import React, { cloneElement, type ReactElement, useCallback, useMemo } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport cx from \"classnames\";\nimport { useA11yDialog } from \"./a11yDialog\";\nimport ModalContent from \"./LegacyModalContent/LegacyModalContent\";\nimport ModalHeader from \"./LegacyModalHeader/LegacyModalHeader\";\nimport useBodyScrollLock from \"./useBodyScrollLock\";\nimport useShowHideModal from \"./useShowHideModal\";\nimport {\n isModalContent,\n isModalFooter,\n isModalHeader,\n ModalWidth as ModalWidthEnum,\n validateTitleProp\n} from \"./ModalHelper\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { withStaticPropsWithoutForwardRef } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport styles from \"./LegacyModal.module.scss\";\nimport { type ModalWidth } from \"./LegacyModal.types\";\nimport { LayerProvider } from \"@vibe/layer\";\nimport { isClient } from \"../../utils/ssr-utils\";\n\nexport interface LegacyModalProps {\n /**\n * Id of the modal, used internally and for accessibility\n */\n id?: string;\n \"data-testid\"?: string;\n /**\n * Show/hide the Dialog\n */\n show: boolean;\n /**\n * Heading for the modal, mandatory when ModalHeader isn't provided in children\n */\n title?: string;\n /**\n * Description for the modal title\n */\n description?: string;\n /**\n * Called when the modal is closed (by close button/click outside/esc key)\n */\n onClose: () => void;\n /**\n * Makes the dialog behave like a modal (preventing closing on click outside of\n * ESC key)..\n */\n alertDialog?: boolean;\n /**\n * Used for the fromOrigin animation\n */\n triggerElement?: Element;\n /**\n * Set the modal's width. Can be one of the presets or any custom size\n */\n width?: ModalWidth | string;\n /**\n * Aria label for the close button\n */\n closeButtonAriaLabel?: string;\n /**\n * Add gaps between parts of the modal\n */\n contentSpacing?: boolean;\n /**\n * classNames for specific parts of the dialog\n */\n classNames?: {\n container?: string;\n overlay?: string;\n modal?: string;\n };\n /**\n * Dialog content\n */\n children?: ReactElement | ReactElement[];\n /**\n * z-index attribute of the container\n */\n zIndex?: number;\n /**\n * When `false`, the modal will remain in the DOM when closed\n */\n unmountOnClose?: boolean;\n}\n\nconst Modal = ({\n classNames = { container: \"\", overlay: \"\", modal: \"\" },\n id,\n show,\n title = \"\",\n description = \"\",\n onClose = NOOP,\n alertDialog = false,\n children,\n triggerElement,\n width = \"default\",\n closeButtonAriaLabel = \"Close\",\n contentSpacing = false,\n zIndex = 10000,\n unmountOnClose = true,\n \"data-testid\": dataTestId\n}: LegacyModalProps) => {\n const childrenArray: ReactElement[] = useMemo(\n () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),\n [children]\n );\n validateTitleProp(title, childrenArray);\n\n const [instance, attr] = useA11yDialog({\n id,\n alertDialog\n });\n\n const closeIfNotAlertType = useCallback(() => {\n if (!alertDialog) {\n onClose?.();\n }\n }, [alertDialog, onClose]);\n\n // lock body scroll when modal is open\n useBodyScrollLock({ instance });\n\n // show/hide and animate the modal\n const { shouldShow } = useShowHideModal({\n instance,\n show,\n triggerElement,\n onClose,\n alertDialog\n });\n\n const header = useMemo(() => {\n const { id } = attr.title;\n const header = childrenArray.find(isModalHeader);\n if (header) {\n return cloneElement(header, { id, closeModal: onClose });\n }\n return (\n <ModalHeader\n title={title}\n description={description}\n closeModal={onClose}\n id={id}\n closeButtonAriaLabel={closeButtonAriaLabel}\n />\n );\n }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]);\n\n const content = useMemo(() => {\n return (\n childrenArray.find(isModalContent) || (\n <ModalContent>{childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))}</ModalContent>\n )\n );\n }, [childrenArray]);\n\n const footer = useMemo(() => {\n return childrenArray.find(isModalFooter) || null;\n }, [childrenArray]);\n\n const customWidth = width !== \"default\" && width !== \"full-width\";\n\n const dialog = (\n <LayerProvider layerRef={{ current: instance?.$el }}>\n <div\n {...attr.container}\n className={cx(styles.container, classNames.container)}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n style={{ \"--monday-modal-z-index\": zIndex }}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div\n onClick={closeIfNotAlertType}\n className={cx(styles.overlay, classNames.overlay)}\n data-testid={ComponentDefaultTestId.MODAL_OVERLAY}\n />\n <div\n {...attr.dialog}\n className={cx(styles.dialog, classNames.modal, {\n [styles.default]: width === \"default\",\n [styles.full]: width === \"full-width\",\n [styles.spacing]: contentSpacing\n })}\n style={{ width: customWidth ? width : null }}\n >\n {header}\n {content}\n {footer}\n </div>\n </div>\n </LayerProvider>\n );\n\n if (unmountOnClose && !shouldShow) {\n return null;\n }\n return isClient() ? ReactDOM.createPortal(dialog, document.body) : null;\n};\n\ninterface LegacyModalStaticProps {\n width: typeof ModalWidthEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<LegacyModalProps, LegacyModalStaticProps>(Modal, {\n width: ModalWidthEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","_ref$classNames","classNames","container","overlay","modal","id","show","_ref$title","title","_ref$description","description","_ref$onClose","onClose","NOOP","_ref$alertDialog","alertDialog","children","triggerElement","_ref$width","width","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$contentSpacing","contentSpacing","_ref$zIndex","zIndex","_ref$unmountOnClose","unmountOnClose","dataTestId","childrenArray","useMemo","React","Children","toArray","validateTitleProp","_useA11yDialog","useA11yDialog","_useA11yDialog2","_slicedToArray","instance","attr","closeIfNotAlertType","useCallback","useBodyScrollLock","shouldShow","useShowHideModal","header","find","isModalHeader","cloneElement","closeModal","createElement","ModalHeader","content","isModalContent","ModalContent","filter","child","isModalFooter","footer","customWidth","dialog","LayerProvider","layerRef","current","$el","Object","assign","className","cx","styles","getTestId","ComponentDefaultTestId","MODAL","style","onClick","MODAL_OVERLAY","_defineProperty","default","full","spacing","isClient","ReactDOM","createPortal","document","body","ModalWidthEnum"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LegacyModal.js","sources":["../../../../../src/components/LegacyModal/LegacyModal.tsx"],"sourcesContent":["import React, { cloneElement, type ReactElement, useCallback, useMemo } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport cx from \"classnames\";\nimport { useA11yDialog } from \"./a11yDialog\";\nimport ModalContent from \"./LegacyModalContent/LegacyModalContent\";\nimport ModalHeader from \"./LegacyModalHeader/LegacyModalHeader\";\nimport useBodyScrollLock from \"./useBodyScrollLock\";\nimport useShowHideModal from \"./useShowHideModal\";\nimport {\n isModalContent,\n isModalFooter,\n isModalHeader,\n ModalWidth as ModalWidthEnum,\n validateTitleProp\n} from \"./ModalHelper\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { withStaticPropsWithoutForwardRef } from \"../../types\";\nimport { getTestId } from \"../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../tests/constants\";\nimport styles from \"./LegacyModal.module.scss\";\nimport { type ModalWidth } from \"./LegacyModal.types\";\nimport { LayerProvider } from \"@vibe/layer\";\nimport { isClient } from \"../../utils/ssr-utils\";\n\nexport interface LegacyModalProps {\n /**\n * Id of the modal, used internally and for accessibility\n */\n id?: string;\n \"data-testid\"?: string;\n /**\n * Show/hide the Dialog\n */\n show: boolean;\n /**\n * Heading for the modal, mandatory when ModalHeader isn't provided in children\n */\n title?: string;\n /**\n * Description for the modal title\n */\n description?: string;\n /**\n * Called when the modal is closed (by close button/click outside/esc key)\n */\n onClose: () => void;\n /**\n * Makes the dialog behave like a modal (preventing closing on click outside of\n * ESC key)..\n */\n alertDialog?: boolean;\n /**\n * Used for the fromOrigin animation\n */\n triggerElement?: Element;\n /**\n * Set the modal's width. Can be one of the presets or any custom size\n */\n width?: ModalWidth | string;\n /**\n * Aria label for the close button\n */\n closeButtonAriaLabel?: string;\n /**\n * Add gaps between parts of the modal\n */\n contentSpacing?: boolean;\n /**\n * classNames for specific parts of the dialog\n */\n classNames?: {\n container?: string;\n overlay?: string;\n modal?: string;\n };\n /**\n * Dialog content\n */\n children?: ReactElement | ReactElement[];\n /**\n * z-index attribute of the container\n */\n zIndex?: number;\n /**\n * When `false`, the modal will remain in the DOM when closed\n */\n unmountOnClose?: boolean;\n}\n\nconst Modal = ({\n classNames = { container: \"\", overlay: \"\", modal: \"\" },\n id,\n show,\n title = \"\",\n description = \"\",\n onClose = NOOP,\n alertDialog = false,\n children,\n triggerElement,\n width = \"default\",\n closeButtonAriaLabel = \"Close\",\n contentSpacing = false,\n zIndex = 10000,\n unmountOnClose = true,\n \"data-testid\": dataTestId\n}: LegacyModalProps) => {\n const childrenArray: ReactElement[] = useMemo(\n () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),\n [children]\n );\n validateTitleProp(title, childrenArray);\n\n const [instance, attr] = useA11yDialog({\n id,\n alertDialog\n });\n\n const closeIfNotAlertType = useCallback(() => {\n if (!alertDialog) {\n onClose?.();\n }\n }, [alertDialog, onClose]);\n\n // lock body scroll when modal is open\n useBodyScrollLock({ instance });\n\n // show/hide and animate the modal\n const { shouldShow } = useShowHideModal({\n instance,\n show,\n triggerElement,\n onClose,\n alertDialog\n });\n\n const header = useMemo(() => {\n const { id } = attr.title;\n const header = childrenArray.find(isModalHeader);\n if (header) {\n return cloneElement(header, { id, closeModal: onClose });\n }\n return (\n <ModalHeader\n title={title}\n description={description}\n closeModal={onClose}\n id={id}\n closeButtonAriaLabel={closeButtonAriaLabel}\n />\n );\n }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]);\n\n const content = useMemo(() => {\n return (\n childrenArray.find(isModalContent) || (\n <ModalContent>{childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))}</ModalContent>\n )\n );\n }, [childrenArray]);\n\n const footer = useMemo(() => {\n return childrenArray.find(isModalFooter) || null;\n }, [childrenArray]);\n\n const customWidth = width !== \"default\" && width !== \"full-width\";\n\n const dialog = (\n <LayerProvider layerRef={{ current: instance?.$el }}>\n <div\n {...attr.container}\n className={cx(styles.container, classNames.container)}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL, id)}\n style={{ \"--monday-modal-z-index\": zIndex }}\n >\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div\n onClick={closeIfNotAlertType}\n className={cx(styles.overlay, classNames.overlay)}\n data-testid={ComponentDefaultTestId.MODAL_OVERLAY}\n />\n <div\n {...attr.dialog}\n className={cx(styles.dialog, classNames.modal, {\n [styles.default]: width === \"default\",\n [styles.full]: width === \"full-width\",\n [styles.spacing]: contentSpacing\n })}\n style={{ width: customWidth ? width : null }}\n >\n {header}\n {content}\n {footer}\n </div>\n </div>\n </LayerProvider>\n );\n\n if (unmountOnClose && !shouldShow) {\n return null;\n }\n return isClient() ? ReactDOM.createPortal(dialog, document.body) : null;\n};\n\ninterface LegacyModalStaticProps {\n width: typeof ModalWidthEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<LegacyModalProps, LegacyModalStaticProps>(Modal, {\n width: ModalWidthEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","_ref$classNames","classNames","container","overlay","modal","id","show","_ref$title","title","_ref$description","description","_ref$onClose","onClose","NOOP","_ref$alertDialog","alertDialog","children","triggerElement","_ref$width","width","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$contentSpacing","contentSpacing","_ref$zIndex","zIndex","_ref$unmountOnClose","unmountOnClose","dataTestId","childrenArray","useMemo","React","Children","toArray","validateTitleProp","_useA11yDialog","useA11yDialog","_useA11yDialog2","_slicedToArray","instance","attr","closeIfNotAlertType","useCallback","useBodyScrollLock","shouldShow","useShowHideModal","header","find","isModalHeader","cloneElement","closeModal","createElement","ModalHeader","content","isModalContent","ModalContent","filter","child","isModalFooter","footer","customWidth","dialog","LayerProvider","layerRef","current","$el","Object","assign","className","cx","styles","getTestId","ComponentDefaultTestId","MODAL","style","onClick","MODAL_OVERLAY","_defineProperty","default","full","spacing","isClient","ReactDOM","createPortal","document","body","ModalWidthEnum"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,{forwardRef as e}from"react";import{getTestId as
|
|
1
|
+
import t,{forwardRef as e}from"react";import{getTestId as o}from"../../../../tests/testIds.js";import{ComponentDefaultTestId as a}from"../../../../tests/constants.js";import r from"../../../Flex/Flex.js";import s from"../LegacyModalFooter.js";import n from"../../../../../components/button/dist/Button/Button.js";var i=e((function(e,i){var m=e.primaryButtonText,l=e.secondaryButtonText,d=e.disablePrimaryButton,c=e.onPrimaryButtonClick,u=e.onSecondaryButtonClick,p=e.id;return t.createElement(s,{id:p,className:e.className,"data-testid":e["data-testid"]||o(a.MODAL_FOOTER_BUTTONS,p)},t.createElement(r,{justify:"end",gap:"small"},l&&t.createElement(n,{onClick:u,kind:"tertiary"},l),t.createElement(n,{onClick:c,disabled:d},m)))}));Object.assign(i,{displayName:"ModalFooterButtons"});export{i as default};
|
|
2
2
|
//# sourceMappingURL=LegacyModalFooterButtons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyModalFooterButtons.js","sources":["../../../../../../../src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport Flex from \"../../../Flex/Flex\";\nimport { Button } from \"@vibe/button\";\nimport LegacyModalFooter from \"../LegacyModalFooter\";\n\nexport interface LegacyModalFooterButtonsProps extends VibeComponentProps {\n primaryButtonText: string;\n secondaryButtonText?: string;\n disablePrimaryButton?: boolean;\n onPrimaryButtonClick?: () => void;\n onSecondaryButtonClick?: () => void;\n}\n\nconst LegacyModalFooterButtons = forwardRef(\n (\n {\n primaryButtonText,\n secondaryButtonText,\n disablePrimaryButton,\n onPrimaryButtonClick,\n onSecondaryButtonClick,\n className,\n id,\n \"data-testid\": dataTestId\n }: LegacyModalFooterButtonsProps,\n // As ModalFooter does not currently forward refs\n // eslint-disable-next-line\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n return (\n <LegacyModalFooter\n id={id}\n className={className}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}\n >\n <Flex justify=\"end\" gap=\"small\">\n {secondaryButtonText && (\n <Button onClick={onSecondaryButtonClick} kind=\"tertiary\">\n {secondaryButtonText}\n </Button>\n )}\n <Button onClick={onPrimaryButtonClick} disabled={disablePrimaryButton}>\n {primaryButtonText}\n </Button>\n </Flex>\n </LegacyModalFooter>\n );\n }\n);\n\nObject.assign(LegacyModalFooterButtons, {\n displayName: \"ModalFooterButtons\"\n});\n\nexport default LegacyModalFooterButtons;\n"],"names":["LegacyModalFooterButtons","forwardRef","_ref","ref","primaryButtonText","secondaryButtonText","disablePrimaryButton","onPrimaryButtonClick","onSecondaryButtonClick","id","React","LegacyModalFooter","className","getTestId","ComponentDefaultTestId","MODAL_FOOTER_BUTTONS","createElement","Flex","justify","gap","Button","onClick","kind","disabled","Object","assign","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LegacyModalFooterButtons.js","sources":["../../../../../../../src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { type VibeComponentProps } from \"../../../../types\";\nimport { getTestId } from \"../../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../../tests/constants\";\nimport Flex from \"../../../Flex/Flex\";\nimport { Button } from \"@vibe/button\";\nimport LegacyModalFooter from \"../LegacyModalFooter\";\n\nexport interface LegacyModalFooterButtonsProps extends VibeComponentProps {\n primaryButtonText: string;\n secondaryButtonText?: string;\n disablePrimaryButton?: boolean;\n onPrimaryButtonClick?: () => void;\n onSecondaryButtonClick?: () => void;\n}\n\nconst LegacyModalFooterButtons = forwardRef(\n (\n {\n primaryButtonText,\n secondaryButtonText,\n disablePrimaryButton,\n onPrimaryButtonClick,\n onSecondaryButtonClick,\n className,\n id,\n \"data-testid\": dataTestId\n }: LegacyModalFooterButtonsProps,\n // As ModalFooter does not currently forward refs\n // eslint-disable-next-line\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n return (\n <LegacyModalFooter\n id={id}\n className={className}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}\n >\n <Flex justify=\"end\" gap=\"small\">\n {secondaryButtonText && (\n <Button onClick={onSecondaryButtonClick} kind=\"tertiary\">\n {secondaryButtonText}\n </Button>\n )}\n <Button onClick={onPrimaryButtonClick} disabled={disablePrimaryButton}>\n {primaryButtonText}\n </Button>\n </Flex>\n </LegacyModalFooter>\n );\n }\n);\n\nObject.assign(LegacyModalFooterButtons, {\n displayName: \"ModalFooterButtons\"\n});\n\nexport default LegacyModalFooterButtons;\n"],"names":["LegacyModalFooterButtons","forwardRef","_ref","ref","primaryButtonText","secondaryButtonText","disablePrimaryButton","onPrimaryButtonClick","onSecondaryButtonClick","id","React","LegacyModalFooter","className","getTestId","ComponentDefaultTestId","MODAL_FOOTER_BUTTONS","createElement","Flex","justify","gap","Button","onClick","kind","disabled","Object","assign","displayName"],"mappings":"yTAgBA,IAAMA,EAA2BC,GAC/B,SAAAC,EAaEC,GACE,IAZAC,EAAiBF,EAAjBE,kBACAC,EAAmBH,EAAnBG,oBACAC,EAAoBJ,EAApBI,qBACAC,EAAoBL,EAApBK,qBACAC,EAAsBN,EAAtBM,uBAEAC,EAAEP,EAAFO,GAOF,OACEC,gBAACC,EAAiB,CAChBF,GAAIA,EACJG,UAXOV,EAATU,UAYe,cAVUV,EAAzB,gBAU6BW,EAAUC,EAAuBC,qBAAsBN,IAElFC,EAACM,cAAAC,GAAKC,QAAQ,MAAMC,IAAI,SACrBd,GACCK,EAACM,cAAAI,GAAOC,QAASb,EAAwBc,KAAK,YAC3CjB,GAGLK,EAAAM,cAACI,EAAM,CAACC,QAASd,EAAsBgB,SAAUjB,GAC9CF,IAKX,IAGFoB,OAAOC,OAAOzB,EAA0B,CACtC0B,YAAa"}
|
package/dist/mocked_classnames/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import t from"classnames";import s from"../../IconButton/IconButton.js";import{
|
|
1
|
+
import e from"react";import t from"classnames";import s from"../../IconButton/IconButton.js";import{NOOP as o}from"../../../utils/function-utils.js";import{getTestId as a}from"../../../tests/testIds.js";import{ComponentDefaultTestId as i}from"../../../tests/constants.js";import r from"../../Text/Text.js";import n from"../../Heading/Heading.js";import m from"../../Flex/Flex.js";import c from"./LegacyModalHeader.module.scss.js";import l from"../../../../components/icon/dist/Icon/Icon.js";import d from"../../../../icons/dist/react/CloseSmall.js";var p=function(p){var f=p.title,u=p.children,j=p.titleClassName,x=p.description,N=void 0===x?"":x,v=p.descriptionClassName,E=p.icon,g=p.closeModal,y=void 0===g?o:g,L=p.iconSize,C=void 0===L?24:L,H=p.iconClassName,I=p.closeButtonAriaLabel,B=void 0===I?"close":I,M=p.id,S=p["data-testid"];return e.createElement("div",{className:t(c.container,p.className),"data-testid":S||a(i.MODAL_HEADER,M)},u||e.createElement(m,{align:"start",gap:"small",className:j},E&&e.createElement(l,{className:t(c.icon,H),icon:E,iconType:"svg",iconSize:C,ignoreFocusStyle:!0}),e.createElement(n,{id:M,maxLines:2},f)),N&&e.createElement(r,{type:"text2",maxLines:2,className:t(c.description,v)},N),e.createElement("div",{className:t(c.closeButton)},e.createElement(s,{key:"xxs",onClick:y,ariaLabel:B,icon:d,kind:"tertiary",size:"small"})))};Object.assign(p,{displayName:"ModalHeader"});export{p as default};
|
|
2
2
|
//# sourceMappingURL=LegacyModalHeader.js.map
|
package/dist/mocked_classnames/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyModalHeader.js","sources":["../../../../../../src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport IconButton from \"../../IconButton/IconButton\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type ElementContent, type VibeComponentProps } from \"../../../types\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport Text from \"../../Text/Text\";\nimport Heading from \"../../Heading/Heading\";\nimport Flex from \"../../Flex/Flex\";\nimport styles from \"./LegacyModalHeader.module.scss\";\n\ninterface BaseLegacyModalHeaderProps extends VibeComponentProps {\n /**\n * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links\n */\n description?: ElementContent;\n /**\n * Icon to be rendered before the title\n */\n // icon?: string | React.FunctionComponent<IconSubComponentProps> | null;\n icon?: SubIcon;\n /**\n * Class name for the title\n */\n titleClassName?: string;\n /**\n * closes the Modal. No need to provide it, it is being provided by the modal\n */\n closeModal?: () => void;\n /**\n * Class name for the description\n */\n descriptionClassName?: string;\n /**\n * Size of the icon\n */\n iconSize?: number;\n /**\n * class name for the icon\n */\n iconClassName?: string;\n /**\n * Aria label for the close button\n */\n closeButtonAriaLabel?: string;\n}\n\ninterface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {\n title: ElementContent;\n children?: never;\n}\n\ninterface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {\n title?: never;\n children: ElementContent;\n}\n\nexport type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;\n\nconst LegacyModalHeader = ({\n className,\n title,\n children,\n titleClassName,\n description = \"\",\n descriptionClassName,\n icon,\n closeModal = NOOP,\n iconSize = 24,\n iconClassName,\n closeButtonAriaLabel = \"close\",\n id,\n \"data-testid\": dataTestId\n}: LegacyModalHeaderProps) => {\n return (\n <div\n className={cx(styles.container, className)}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}\n >\n {children ? (\n children\n ) : (\n <Flex align=\"start\" gap=\"small\" className={titleClassName}>\n {icon && (\n <Icon\n className={cx(styles.icon, iconClassName)}\n icon={icon}\n iconType=\"svg\"\n iconSize={iconSize}\n ignoreFocusStyle\n />\n )}\n <Heading id={id} maxLines={2}>\n {title}\n </Heading>\n </Flex>\n )}\n {description && (\n <Text type=\"text2\" maxLines={2} className={cx(styles.description, descriptionClassName)}>\n {description}\n </Text>\n )}\n\n <div className={cx(styles.closeButton)}>\n <IconButton\n key=\"xxs\"\n onClick={closeModal}\n ariaLabel={closeButtonAriaLabel}\n icon={CloseSmall}\n kind=\"tertiary\"\n size=\"small\"\n />\n </div>\n </div>\n );\n};\n\nObject.assign(LegacyModalHeader, {\n displayName: \"ModalHeader\"\n});\n\nexport default LegacyModalHeader;\n"],"names":["LegacyModalHeader","_ref","title","children","titleClassName","_ref$description","description","descriptionClassName","icon","_ref$closeModal","closeModal","NOOP","_ref$iconSize","iconSize","iconClassName","_ref$closeButtonAriaL","closeButtonAriaLabel","id","dataTestId","React","className","cx","styles","container","getTestId","ComponentDefaultTestId","MODAL_HEADER","createElement","Flex","align","gap","Icon","iconType","ignoreFocusStyle","Heading","maxLines","Text","type","closeButton","IconButton","key","onClick","ariaLabel","CloseSmall","kind","size","Object","assign","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LegacyModalHeader.js","sources":["../../../../../../src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport IconButton from \"../../IconButton/IconButton\";\nimport { CloseSmall } from \"@vibe/icons\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { type ElementContent, type VibeComponentProps } from \"../../../types\";\nimport { NOOP } from \"../../../utils/function-utils\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport Text from \"../../Text/Text\";\nimport Heading from \"../../Heading/Heading\";\nimport Flex from \"../../Flex/Flex\";\nimport styles from \"./LegacyModalHeader.module.scss\";\n\ninterface BaseLegacyModalHeaderProps extends VibeComponentProps {\n /**\n * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links\n */\n description?: ElementContent;\n /**\n * Icon to be rendered before the title\n */\n // icon?: string | React.FunctionComponent<IconSubComponentProps> | null;\n icon?: SubIcon;\n /**\n * Class name for the title\n */\n titleClassName?: string;\n /**\n * closes the Modal. No need to provide it, it is being provided by the modal\n */\n closeModal?: () => void;\n /**\n * Class name for the description\n */\n descriptionClassName?: string;\n /**\n * Size of the icon\n */\n iconSize?: number;\n /**\n * class name for the icon\n */\n iconClassName?: string;\n /**\n * Aria label for the close button\n */\n closeButtonAriaLabel?: string;\n}\n\ninterface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {\n title: ElementContent;\n children?: never;\n}\n\ninterface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {\n title?: never;\n children: ElementContent;\n}\n\nexport type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;\n\nconst LegacyModalHeader = ({\n className,\n title,\n children,\n titleClassName,\n description = \"\",\n descriptionClassName,\n icon,\n closeModal = NOOP,\n iconSize = 24,\n iconClassName,\n closeButtonAriaLabel = \"close\",\n id,\n \"data-testid\": dataTestId\n}: LegacyModalHeaderProps) => {\n return (\n <div\n className={cx(styles.container, className)}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_HEADER, id)}\n >\n {children ? (\n children\n ) : (\n <Flex align=\"start\" gap=\"small\" className={titleClassName}>\n {icon && (\n <Icon\n className={cx(styles.icon, iconClassName)}\n icon={icon}\n iconType=\"svg\"\n iconSize={iconSize}\n ignoreFocusStyle\n />\n )}\n <Heading id={id} maxLines={2}>\n {title}\n </Heading>\n </Flex>\n )}\n {description && (\n <Text type=\"text2\" maxLines={2} className={cx(styles.description, descriptionClassName)}>\n {description}\n </Text>\n )}\n\n <div className={cx(styles.closeButton)}>\n <IconButton\n key=\"xxs\"\n onClick={closeModal}\n ariaLabel={closeButtonAriaLabel}\n icon={CloseSmall}\n kind=\"tertiary\"\n size=\"small\"\n />\n </div>\n </div>\n );\n};\n\nObject.assign(LegacyModalHeader, {\n displayName: \"ModalHeader\"\n});\n\nexport default LegacyModalHeader;\n"],"names":["LegacyModalHeader","_ref","title","children","titleClassName","_ref$description","description","descriptionClassName","icon","_ref$closeModal","closeModal","NOOP","_ref$iconSize","iconSize","iconClassName","_ref$closeButtonAriaL","closeButtonAriaLabel","id","dataTestId","React","className","cx","styles","container","getTestId","ComponentDefaultTestId","MODAL_HEADER","createElement","Flex","align","gap","Icon","iconType","ignoreFocusStyle","Heading","maxLines","Text","type","closeButton","IconButton","key","onClick","ariaLabel","CloseSmall","kind","size","Object","assign","displayName"],"mappings":"qiBA8DA,IAAMA,EAAoB,SAAHC,GAcM,IAZ3BC,EAAKD,EAALC,MACAC,EAAQF,EAARE,SACAC,EAAcH,EAAdG,eAAcC,EAAAJ,EACdK,YAAAA,OAAc,IAAHD,EAAG,GAAEA,EAChBE,EAAoBN,EAApBM,qBACAC,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,WAAAA,OAAaC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAX,EACjBY,SAAAA,OAAW,IAAHD,EAAG,GAAEA,EACbE,EAAab,EAAba,cAAaC,EAAAd,EACbe,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAC9BE,EAAEhB,EAAFgB,GACeC,EAAUjB,EAAzB,eAEA,OACEkB,uBACEC,UAAWC,EAAGC,EAAOC,UAhBhBtB,EAATmB,WAiBiB,cAAAF,GAAcM,EAAUC,EAAuBC,aAAcT,IAEzEd,GAGCgB,EAAAQ,cAACC,EAAK,CAAAC,MAAM,QAAQC,IAAI,QAAQV,UAAWhB,GACxCI,GACCW,EAACQ,cAAAI,EACC,CAAAX,UAAWC,EAAGC,EAAOd,KAAMM,GAC3BN,KAAMA,EACNwB,SAAS,MACTnB,SAAUA,EACVoB,sBAGJd,EAAAQ,cAACO,EAAO,CAACjB,GAAIA,EAAIkB,SAAU,GACxBjC,IAINI,GACCa,EAAAQ,cAACS,EAAI,CAACC,KAAK,QAAQF,SAAU,EAAGf,UAAWC,EAAGC,EAAOhB,YAAaC,IAC/DD,GAILa,EAAAQ,cAAA,MAAA,CAAKP,UAAWC,EAAGC,EAAOgB,cACxBnB,EAAAQ,cAACY,EAAU,CACTC,IAAI,MACJC,QAAS/B,EACTgC,UAAW1B,EACXR,KAAMmC,EACNC,KAAK,WACLC,KAAK,WAKf,EAEAC,OAAOC,OAAO/C,EAAmB,CAC/BgD,YAAa"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as
|
|
1
|
+
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as i,ComponentDefaultTestId as o}from"../../tests/testIds.js";import e from"classnames";import r,{forwardRef as s,useCallback as a}from"react";import{NOOP as n}from"../../utils/function-utils.js";import{IconPosition as l,LinkTarget as m}from"./LinkConsts.js";import{withStaticProps as c}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import d from"./Link.module.scss.js";import{getStyle as p}from"../../helpers/typesciptCssModulesHelper.js";import{camelCase as f}from"es-toolkit";import{ComponentVibeId as v}from"../../tests/constants.js";import u from"../../../components/icon/dist/Icon/Icon.js";function b(t,i,o){if(t)return r.createElement(u,{className:o,icon:i,iconType:"font"})}var y=c(s((function(s,l){var m=s.className,c=s.textClassName,u=s.href,y=void 0===u?"":u,j=s.text,N=void 0===j?"":j,k=s.rel,h=void 0===k?"noreferrer":k,x=s.onClick,L=void 0===x?n:x,g=s.target,C=void 0===g?"_blank":g,I=s.ariaLabelDescription,P=void 0===I?"":I,E=s.color,S=void 0===E?"primary":E,D=s.ariaDescribedby,T=void 0===D?"":D,_=s.icon,z=void 0===_?"":_,B=s.iconPosition,F=s.id,H=void 0===F?"":F,K=s.ariaLabeledBy,w=void 0===K?"":K,M=s.disableNavigation,q=void 0!==M&&M,A=s.inheritFontSize,G=void 0!==A&&A,J=s.inlineText,O=void 0!==J&&J,Q=s.style,R=s["data-testid"],U="start"===(void 0===B?"start":B),V=a((function(t){q&&t.preventDefault(),L&&L(t)}),[q,L]);return r.createElement("a",{"data-testid":R||i(o.LINK,H),"data-vibe":v.LINK,id:H,href:y,rel:h,ref:l,onClick:V,target:C,style:Q,className:e(d.link,m,p(d,f("color-"+S)),t(t({},d.inheritFontSize,G),d.inlineText,O)),"aria-label":P,"aria-describedby":T,"aria-labelledby":w},b(U,z,e(d.iconStart)),r.createElement("span",{className:e(d.text,c)},N),b(!U,z,e(d.iconEnd)))})),{position:l,iconPositions:l,targets:m});export{y as default};
|
|
2
2
|
//# sourceMappingURL=Link.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sources":["../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { IconPosition as IconPositionEnum, LinkTarget as LinkTargetEnum } from \"./LinkConsts\";\nimport { type LinkColor, type LinkIconPosition, type LinkTarget } from \"./Link.types\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./Link.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LinkProps extends VibeComponentProps {\n /**\n * Class name applied to the link text.\n */\n textClassName?: string;\n /**\n * The URL the link points to.\n */\n href?: string;\n /**\n * The text content of the link.\n */\n text?: string;\n /**\n * Specifies the relationship between the current document and the linked resource.\n */\n rel?: string;\n /**\n * Callback fired when the link is clicked.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Specifies where to open the linked document.\n */\n target?: LinkTarget;\n /**\n * The ARIA label description for accessibility.\n */\n ariaLabelDescription?: string;\n /**\n * The ID of the element that describes this link.\n */\n ariaDescribedby?: string;\n /**\n * The ID of the element labeling this link.\n */\n ariaLabeledBy?: string;\n /**\n * Icon displayed next to the link text.\n */\n icon?: SubIcon;\n /**\n * The position of the icon relative to the text.\n */\n iconPosition?: LinkIconPosition;\n /**\n * If true, disables navigation when the link is clicked.\n */\n disableNavigation?: boolean;\n /**\n * If true, the link inherits the surrounding text's font size.\n */\n inheritFontSize?: boolean;\n /**\n * If true, the link is styled to fit within inline text content.\n */\n inlineText?: boolean;\n /** The link's color style */\n color?: LinkColor;\n /**\n * Inline style object applied to the link element.\n */\n style?: React.CSSProperties;\n}\n\nconst Link = forwardRef(\n (\n {\n className,\n textClassName,\n href = \"\",\n text = \"\",\n rel = \"noreferrer\",\n onClick = NOOP,\n target = \"_blank\",\n ariaLabelDescription = \"\",\n color = \"primary\",\n ariaDescribedby = \"\",\n icon = \"\",\n iconPosition = \"start\",\n id = \"\",\n ariaLabeledBy = \"\",\n disableNavigation = false,\n inheritFontSize = false,\n inlineText = false,\n style,\n \"data-testid\": dataTestId\n }: LinkProps,\n ref: React.ForwardedRef<HTMLAnchorElement>\n ) => {\n const isStart = iconPosition === \"start\";\n\n const onClickWrapper = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (disableNavigation) {\n e.preventDefault();\n }\n onClick && onClick(e);\n },\n [disableNavigation, onClick]\n );\n\n return (\n <a\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.LINK, id)}\n data-vibe={ComponentVibeId.LINK}\n id={id}\n href={href}\n rel={rel}\n ref={ref}\n onClick={onClickWrapper}\n target={target}\n style={style}\n className={cx(styles.link, className, getStyle(styles, camelCase(\"color-\" + color)), {\n [styles.inheritFontSize]: inheritFontSize,\n [styles.inlineText]: inlineText\n })}\n aria-label={ariaLabelDescription}\n aria-describedby={ariaDescribedby}\n aria-labelledby={ariaLabeledBy}\n >\n {getIcon(isStart, icon, cx(styles.iconStart))}\n <span className={cx(styles.text, textClassName)}>{text}</span>\n {getIcon(!isStart, icon, cx(styles.iconEnd))}\n </a>\n );\n }\n);\n\nfunction getIcon(shouldShow: boolean, icon: string | React.FunctionComponent | null, className: string) {\n if (!shouldShow) return;\n return <Icon className={className} icon={icon} iconType=\"font\" />;\n}\n\ninterface LinkStaticProps {\n targets: typeof LinkTargetEnum;\n iconPositions: typeof IconPositionEnum;\n position: typeof IconPositionEnum;\n}\n\nexport default withStaticProps<LinkProps, LinkStaticProps>(Link, {\n position: IconPositionEnum,\n iconPositions: IconPositionEnum,\n targets: LinkTargetEnum\n});\n"],"names":["getIcon","shouldShow","icon","className","React","createElement","Icon","iconType","withStaticProps","forwardRef","_ref","ref","textClassName","_ref$href","href","_ref$text","text","_ref$rel","rel","_ref$onClick","onClick","NOOP","_ref$target","target","_ref$ariaLabelDescrip","ariaLabelDescription","_ref$color","color","_ref$ariaDescribedby","ariaDescribedby","_ref$icon","_ref$iconPosition","iconPosition","_ref$id","id","_ref$ariaLabeledBy","ariaLabeledBy","_ref$disableNavigatio","disableNavigation","_ref$inheritFontSize","inheritFontSize","_ref$inlineText","inlineText","style","dataTestId","isStart","onClickWrapper","useCallback","e","preventDefault","getTestId","ComponentDefaultTestId","LINK","ComponentVibeId","cx","styles","link","getStyle","camelCase","_defineProperty","iconStart","iconEnd","position","IconPositionEnum","iconPositions","targets","LinkTargetEnum"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.js","sources":["../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { IconPosition as IconPositionEnum, LinkTarget as LinkTargetEnum } from \"./LinkConsts\";\nimport { type LinkColor, type LinkIconPosition, type LinkTarget } from \"./Link.types\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./Link.module.scss\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { camelCase } from \"es-toolkit\";\nimport { ComponentVibeId } from \"../../tests/constants\";\n\nexport interface LinkProps extends VibeComponentProps {\n /**\n * Class name applied to the link text.\n */\n textClassName?: string;\n /**\n * The URL the link points to.\n */\n href?: string;\n /**\n * The text content of the link.\n */\n text?: string;\n /**\n * Specifies the relationship between the current document and the linked resource.\n */\n rel?: string;\n /**\n * Callback fired when the link is clicked.\n */\n onClick?: (event: React.MouseEvent) => void;\n /**\n * Specifies where to open the linked document.\n */\n target?: LinkTarget;\n /**\n * The ARIA label description for accessibility.\n */\n ariaLabelDescription?: string;\n /**\n * The ID of the element that describes this link.\n */\n ariaDescribedby?: string;\n /**\n * The ID of the element labeling this link.\n */\n ariaLabeledBy?: string;\n /**\n * Icon displayed next to the link text.\n */\n icon?: SubIcon;\n /**\n * The position of the icon relative to the text.\n */\n iconPosition?: LinkIconPosition;\n /**\n * If true, disables navigation when the link is clicked.\n */\n disableNavigation?: boolean;\n /**\n * If true, the link inherits the surrounding text's font size.\n */\n inheritFontSize?: boolean;\n /**\n * If true, the link is styled to fit within inline text content.\n */\n inlineText?: boolean;\n /** The link's color style */\n color?: LinkColor;\n /**\n * Inline style object applied to the link element.\n */\n style?: React.CSSProperties;\n}\n\nconst Link = forwardRef(\n (\n {\n className,\n textClassName,\n href = \"\",\n text = \"\",\n rel = \"noreferrer\",\n onClick = NOOP,\n target = \"_blank\",\n ariaLabelDescription = \"\",\n color = \"primary\",\n ariaDescribedby = \"\",\n icon = \"\",\n iconPosition = \"start\",\n id = \"\",\n ariaLabeledBy = \"\",\n disableNavigation = false,\n inheritFontSize = false,\n inlineText = false,\n style,\n \"data-testid\": dataTestId\n }: LinkProps,\n ref: React.ForwardedRef<HTMLAnchorElement>\n ) => {\n const isStart = iconPosition === \"start\";\n\n const onClickWrapper = useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n if (disableNavigation) {\n e.preventDefault();\n }\n onClick && onClick(e);\n },\n [disableNavigation, onClick]\n );\n\n return (\n <a\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.LINK, id)}\n data-vibe={ComponentVibeId.LINK}\n id={id}\n href={href}\n rel={rel}\n ref={ref}\n onClick={onClickWrapper}\n target={target}\n style={style}\n className={cx(styles.link, className, getStyle(styles, camelCase(\"color-\" + color)), {\n [styles.inheritFontSize]: inheritFontSize,\n [styles.inlineText]: inlineText\n })}\n aria-label={ariaLabelDescription}\n aria-describedby={ariaDescribedby}\n aria-labelledby={ariaLabeledBy}\n >\n {getIcon(isStart, icon, cx(styles.iconStart))}\n <span className={cx(styles.text, textClassName)}>{text}</span>\n {getIcon(!isStart, icon, cx(styles.iconEnd))}\n </a>\n );\n }\n);\n\nfunction getIcon(shouldShow: boolean, icon: string | React.FunctionComponent | null, className: string) {\n if (!shouldShow) return;\n return <Icon className={className} icon={icon} iconType=\"font\" />;\n}\n\ninterface LinkStaticProps {\n targets: typeof LinkTargetEnum;\n iconPositions: typeof IconPositionEnum;\n position: typeof IconPositionEnum;\n}\n\nexport default withStaticProps<LinkProps, LinkStaticProps>(Link, {\n position: IconPositionEnum,\n iconPositions: IconPositionEnum,\n targets: LinkTargetEnum\n});\n"],"names":["getIcon","shouldShow","icon","className","React","createElement","Icon","iconType","withStaticProps","forwardRef","_ref","ref","textClassName","_ref$href","href","_ref$text","text","_ref$rel","rel","_ref$onClick","onClick","NOOP","_ref$target","target","_ref$ariaLabelDescrip","ariaLabelDescription","_ref$color","color","_ref$ariaDescribedby","ariaDescribedby","_ref$icon","_ref$iconPosition","iconPosition","_ref$id","id","_ref$ariaLabeledBy","ariaLabeledBy","_ref$disableNavigatio","disableNavigation","_ref$inheritFontSize","inheritFontSize","_ref$inlineText","inlineText","style","dataTestId","isStart","onClickWrapper","useCallback","e","preventDefault","getTestId","ComponentDefaultTestId","LINK","ComponentVibeId","cx","styles","link","getStyle","camelCase","_defineProperty","iconStart","iconEnd","position","IconPositionEnum","iconPositions","targets","LinkTargetEnum"],"mappings":"mtBA8IA,SAASA,EAAQC,EAAqBC,EAA+CC,GACnF,GAAKF,EACL,OAAOG,EAACC,cAAAC,EAAK,CAAAH,UAAWA,EAAWD,KAAMA,EAAMK,SAAS,QAC1D,CAQA,IAAeC,EAAAA,EA3EFC,GACX,SAAAC,EAsBEC,GACE,IArBAR,EAASO,EAATP,UACAS,EAAaF,EAAbE,cAAaC,EAAAH,EACbI,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAL,EACTM,KAAAA,OAAO,IAAHD,EAAG,GAAEA,EAAAE,EAAAP,EACTQ,IAAAA,OAAM,IAAHD,EAAG,aAAYA,EAAAE,EAAAT,EAClBU,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAZ,EACda,OAAAA,OAAS,IAAHD,EAAG,SAAQA,EAAAE,EAAAd,EACjBe,qBAAAA,OAAuB,IAAHD,EAAG,GAAEA,EAAAE,EAAAhB,EACzBiB,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAlB,EACjBmB,gBAAAA,OAAkB,IAAHD,EAAG,GAAEA,EAAAE,EAAApB,EACpBR,KAAAA,OAAO,IAAH4B,EAAG,GAAEA,EAAAC,EAAArB,EACTsB,aAAsBC,EAAAvB,EACtBwB,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAzB,EACP0B,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAA3B,EAClB4B,kBAAAA,OAAoB,IAAHD,GAAQA,EAAAE,EAAA7B,EACzB8B,gBAAAA,OAAkB,IAAHD,GAAQA,EAAAE,EAAA/B,EACvBgC,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAKjC,EAALiC,MACeC,EAAUlC,EAAzB,eAIImC,EAA2B,gBAXhB,IAAHd,EAAG,QAAOA,GAalBe,EAAiBC,GACrB,SAACC,GACKV,GACFU,EAAEC,iBAEJ7B,GAAWA,EAAQ4B,EACrB,GACA,CAACV,EAAmBlB,IAGtB,OACEhB,EAAAC,cAAA,IAAA,CAAA,cACeuC,GAAcM,EAAUC,EAAuBC,KAAMlB,eACvDmB,EAAgBD,KAC3BlB,GAAIA,EACJpB,KAAMA,EACNI,IAAKA,EACLP,IAAKA,EACLS,QAAS0B,EACTvB,OAAQA,EACRoB,MAAOA,EACPxC,UAAWmD,EAAGC,EAAOC,KAAMrD,EAAWsD,EAASF,EAAQG,EAAU,SAAW/B,IAAOgC,EAAAA,EAAA,CAAA,EAChFJ,EAAOf,gBAAkBA,GACzBe,EAAOb,WAAaA,IAEX,aAAAjB,EACM,mBAAAI,oBACDO,GAEhBpC,EAAQ6C,EAAS3C,EAAMoD,EAAGC,EAAOK,YAClCxD,EAAAC,cAAA,OAAA,CAAMF,UAAWmD,EAAGC,EAAOvC,KAAMJ,IAAiBI,GACjDhB,GAAS6C,EAAS3C,EAAMoD,EAAGC,EAAOM,UAGzC,IAc+D,CAC/DC,SAAUC,EACVC,cAAeD,EACfE,QAASC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as
|
|
1
|
+
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import o,{forwardRef as s,useContext as i,useRef as r,useEffect as n,useCallback as a}from"react";import{camelCase as m}from"es-toolkit";import{getStyle as l}from"../../helpers/typesciptCssModulesHelper.js";import p from"../Text/Text.js";import{SELECTION_KEYS as d}from"../../constants/keyCodes.js";import{SIZES as c}from"../../constants/sizes.js";import{NOOP as u}from"../../utils/function-utils.js";import{withStaticProps as f}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import j from"../../hooks/useKeyEvent/index.js";import"../Menu/Menu/hooks/useLastNavigationDirection.js";import"../../hooks/useFullKeyboardListeners.js";import"../../hooks/useActiveDescendantListFocus/index.js";import"../../hooks/useVibeMediaQuery/index.js";import v from"../../hooks/useMergeRef.js";import"../../tests/constants.js";import"../../hooks/useSwitch/index.js";import{ListContext as k}from"../List/utils/ListContext.js";import{ListItemComponentType as h}from"./ListItemConstants.js";import x from"./ListItem.module.scss.js";var b=s((function(s,f){var h=s.className,b=s.id,y=s.component,L=void 0===y?"div":y,I=s.onClick,M=void 0===I?u:I,C=s.onHover,P=void 0===C?u:C,g=s.selected,F=s.disabled,N=void 0!==F&&F,z=s.size,E=void 0===z?c.SMALL:z,H=s.tabIndex,S=void 0===H?0:H,w=s.children,A=s["aria-current"],D=s["data-testid"],K=s.role,T=void 0===K?"option":K,_=s.tooltipProps,B=i(k).updateFocusedItem,O=r(null),Q=v(f,O);n((function(){g&&(null==B||B(b))}),[g,b,B]);var R=a((function(t){N||M(t,b)}),[N,M,b]);j({keys:d,ref:O,callback:R});var V=a((function(t){N||P(t,b)}),[N,P,b]);return o.createElement(p,{element:L,"data-testid":D||b,ref:Q,className:e(x.listItem,h,l(x,m(E)),t(t({},x.selected,g&&!N),x.disabled,N)),id:b,type:"text2","aria-disabled":N,"aria-selected":g,onClick:R,onMouseEnter:V,onFocus:V,role:T,tabIndex:S,"aria-current":A,tooltipProps:_},w)}));Object.assign(b,{displayName:"ListItem"});var y=f(b,{sizes:c,components:h});export{y as default};
|
|
2
2
|
//# sourceMappingURL=ListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n type AriaAttributes,\n type AriaRole,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef\n} from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport Text from \"../Text/Text\";\nimport { SIZES, SELECTION_KEYS } from \"../../constants\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { withStaticProps, type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { useKeyEvent } from \"../../hooks\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ListContext } from \"../List/utils/ListContext\";\nimport { ListItemComponentType as ListItemComponentTypeEnum } from \"./ListItemConstants\";\nimport { type ListItemElement, type ListItemSize } from \"./ListItem.types\";\nimport { type TooltipProps } from \"../Tooltip/Tooltip\";\nimport styles from \"./ListItem.module.scss\";\n\nexport interface ListItemProps extends VibeComponentProps {\n /**\n * The HTML element used for the list item.\n */\n component?: ListItemElement;\n /**\n * The textual content inside the list item.\n */\n children?: ElementContent;\n /**\n * Callback fired when the item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;\n /**\n * Callback fired when the item is hovered.\n */\n onHover?: (event: React.MouseEvent | React.FocusEvent, id: string) => void;\n /**\n * If true, disables the item and prevents interactions.\n */\n disabled?: boolean;\n /**\n * If true, marks the item as selected.\n */\n selected?: boolean;\n /**\n * The size of the list item.\n */\n size?: ListItemSize;\n /**\n * The tab index of the list item for keyboard navigation.\n */\n tabIndex?: number;\n /**\n * Indicates the current state of the item in a set of items.\n */\n \"aria-current\"?: AriaAttributes[\"aria-current\"];\n /**\n * The ARIA role of the list item.\n */\n role?: AriaRole;\n /**\n * Props passed to the tooltip displayed when hovering over the text.\n */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nconst ListItem = forwardRef(\n (\n {\n className,\n id,\n component = \"div\",\n onClick = NOOP,\n onHover = NOOP,\n selected,\n disabled = false,\n size = SIZES.SMALL,\n tabIndex = 0,\n children,\n \"aria-current\": ariaCurrent,\n \"data-testid\": dataTestId,\n role = \"option\",\n tooltipProps\n }: ListItemProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const { updateFocusedItem } = useContext(ListContext);\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n useEffect(() => {\n if (selected) {\n updateFocusedItem?.(id);\n }\n }, [selected, id, updateFocusedItem]);\n\n const componentOnClick = useCallback(\n (event: React.MouseEvent | React.KeyboardEvent) => {\n if (disabled) return;\n onClick(event, id);\n },\n [disabled, onClick, id]\n );\n\n useKeyEvent({\n keys: SELECTION_KEYS,\n ref: componentRef,\n callback: componentOnClick\n });\n\n const componentOnHover = useCallback(\n (event: React.MouseEvent | React.FocusEvent) => {\n if (disabled) return;\n onHover(event, id);\n },\n [disabled, onHover, id]\n );\n\n return (\n <Text\n element={component}\n data-testid={dataTestId || id}\n ref={mergedRef}\n className={cx(styles.listItem, className, getStyle(styles, camelCase(size)), {\n [styles.selected]: selected && !disabled,\n [styles.disabled]: disabled\n })}\n id={id}\n type=\"text2\"\n aria-disabled={disabled}\n aria-selected={selected}\n onClick={componentOnClick}\n onMouseEnter={componentOnHover}\n onFocus={componentOnHover}\n role={role}\n tabIndex={tabIndex}\n aria-current={ariaCurrent}\n tooltipProps={tooltipProps}\n >\n {children}\n </Text>\n );\n }\n);\n\nObject.assign(ListItem, {\n // Used by VirtualizedListItems\n displayName: \"ListItem\"\n});\n\ninterface ListItemStaticProps {\n sizes: typeof SIZES;\n components: typeof ListItemComponentTypeEnum;\n}\n\nexport default withStaticProps<ListItemProps, ListItemStaticProps>(ListItem, {\n sizes: SIZES,\n components: ListItemComponentTypeEnum\n});\n"],"names":["ListItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$onClick","onClick","NOOP","_ref$onHover","onHover","selected","_ref$disabled","disabled","_ref$size","size","SIZES","SMALL","_ref$tabIndex","tabIndex","children","ariaCurrent","dataTestId","_ref$role","role","tooltipProps","updateFocusedItem","useContext","ListContext","componentRef","useRef","mergedRef","useMergeRef","useEffect","componentOnClick","useCallback","event","useKeyEvent","keys","SELECTION_KEYS","callback","componentOnHover","React","createElement","Text","element","cx","styles","listItem","getStyle","camelCase","_defineProperty","type","onMouseEnter","onFocus","Object","assign","displayName","withStaticProps","sizes","components","ListItemComponentTypeEnum"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, {\n type AriaAttributes,\n type AriaRole,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n useRef\n} from \"react\";\nimport { camelCase } from \"es-toolkit\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport Text from \"../Text/Text\";\nimport { SIZES, SELECTION_KEYS } from \"../../constants\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport { withStaticProps, type VibeComponentProps, type ElementContent } from \"../../types\";\nimport { useKeyEvent } from \"../../hooks\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { ListContext } from \"../List/utils/ListContext\";\nimport { ListItemComponentType as ListItemComponentTypeEnum } from \"./ListItemConstants\";\nimport { type ListItemElement, type ListItemSize } from \"./ListItem.types\";\nimport { type TooltipProps } from \"../Tooltip/Tooltip\";\nimport styles from \"./ListItem.module.scss\";\n\nexport interface ListItemProps extends VibeComponentProps {\n /**\n * The HTML element used for the list item.\n */\n component?: ListItemElement;\n /**\n * The textual content inside the list item.\n */\n children?: ElementContent;\n /**\n * Callback fired when the item is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent, id: string) => void;\n /**\n * Callback fired when the item is hovered.\n */\n onHover?: (event: React.MouseEvent | React.FocusEvent, id: string) => void;\n /**\n * If true, disables the item and prevents interactions.\n */\n disabled?: boolean;\n /**\n * If true, marks the item as selected.\n */\n selected?: boolean;\n /**\n * The size of the list item.\n */\n size?: ListItemSize;\n /**\n * The tab index of the list item for keyboard navigation.\n */\n tabIndex?: number;\n /**\n * Indicates the current state of the item in a set of items.\n */\n \"aria-current\"?: AriaAttributes[\"aria-current\"];\n /**\n * The ARIA role of the list item.\n */\n role?: AriaRole;\n /**\n * Props passed to the tooltip displayed when hovering over the text.\n */\n tooltipProps?: Partial<TooltipProps>;\n}\n\nconst ListItem = forwardRef(\n (\n {\n className,\n id,\n component = \"div\",\n onClick = NOOP,\n onHover = NOOP,\n selected,\n disabled = false,\n size = SIZES.SMALL,\n tabIndex = 0,\n children,\n \"aria-current\": ariaCurrent,\n \"data-testid\": dataTestId,\n role = \"option\",\n tooltipProps\n }: ListItemProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const { updateFocusedItem } = useContext(ListContext);\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n useEffect(() => {\n if (selected) {\n updateFocusedItem?.(id);\n }\n }, [selected, id, updateFocusedItem]);\n\n const componentOnClick = useCallback(\n (event: React.MouseEvent | React.KeyboardEvent) => {\n if (disabled) return;\n onClick(event, id);\n },\n [disabled, onClick, id]\n );\n\n useKeyEvent({\n keys: SELECTION_KEYS,\n ref: componentRef,\n callback: componentOnClick\n });\n\n const componentOnHover = useCallback(\n (event: React.MouseEvent | React.FocusEvent) => {\n if (disabled) return;\n onHover(event, id);\n },\n [disabled, onHover, id]\n );\n\n return (\n <Text\n element={component}\n data-testid={dataTestId || id}\n ref={mergedRef}\n className={cx(styles.listItem, className, getStyle(styles, camelCase(size)), {\n [styles.selected]: selected && !disabled,\n [styles.disabled]: disabled\n })}\n id={id}\n type=\"text2\"\n aria-disabled={disabled}\n aria-selected={selected}\n onClick={componentOnClick}\n onMouseEnter={componentOnHover}\n onFocus={componentOnHover}\n role={role}\n tabIndex={tabIndex}\n aria-current={ariaCurrent}\n tooltipProps={tooltipProps}\n >\n {children}\n </Text>\n );\n }\n);\n\nObject.assign(ListItem, {\n // Used by VirtualizedListItems\n displayName: \"ListItem\"\n});\n\ninterface ListItemStaticProps {\n sizes: typeof SIZES;\n components: typeof ListItemComponentTypeEnum;\n}\n\nexport default withStaticProps<ListItemProps, ListItemStaticProps>(ListItem, {\n sizes: SIZES,\n components: ListItemComponentTypeEnum\n});\n"],"names":["ListItem","forwardRef","_ref","ref","className","id","_ref$component","component","_ref$onClick","onClick","NOOP","_ref$onHover","onHover","selected","_ref$disabled","disabled","_ref$size","size","SIZES","SMALL","_ref$tabIndex","tabIndex","children","ariaCurrent","dataTestId","_ref$role","role","tooltipProps","updateFocusedItem","useContext","ListContext","componentRef","useRef","mergedRef","useMergeRef","useEffect","componentOnClick","useCallback","event","useKeyEvent","keys","SELECTION_KEYS","callback","componentOnHover","React","createElement","Text","element","cx","styles","listItem","getStyle","camelCase","_defineProperty","type","onMouseEnter","onFocus","Object","assign","displayName","withStaticProps","sizes","components","ListItemComponentTypeEnum"],"mappings":"0nCAuEA,IAAMA,EAAWC,GACf,SAAAC,EAiBEC,GACE,IAhBAC,EAASF,EAATE,UACAC,EAAEH,EAAFG,GAAEC,EAAAJ,EACFK,UAAAA,OAAY,IAAHD,EAAG,MAAKA,EAAAE,EAAAN,EACjBO,QAAAA,OAAUC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAT,EACdU,QAAAA,OAAUF,IAAHC,EAAGD,EAAIC,EACdE,EAAQX,EAARW,SAAQC,EAAAZ,EACRa,SAAAA,OAAW,IAAHD,GAAQA,EAAAE,EAAAd,EAChBe,KAAAA,OAAI,IAAAD,EAAGE,EAAMC,MAAKH,EAAAI,EAAAlB,EAClBmB,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,EAAQpB,EAARoB,SACgBC,EAAWrB,EAA3B,gBACesB,EAAUtB,EAAzB,eAAauB,EAAAvB,EACbwB,KAAAA,OAAO,IAAHD,EAAG,SAAQA,EACfE,EAAYzB,EAAZyB,aAIMC,EAAsBC,EAAWC,GAAjCF,kBACFG,EAAeC,EAAO,MACtBC,EAAYC,EAAY/B,EAAK4B,GAEnCI,GAAU,WACJtB,IACFe,SAAAA,EAAoBvB,GAEvB,GAAE,CAACQ,EAAUR,EAAIuB,IAElB,IAAMQ,EAAmBC,GACvB,SAACC,GACKvB,GACJN,EAAQ6B,EAAOjC,EAChB,GACD,CAACU,EAAUN,EAASJ,IAGtBkC,EAAY,CACVC,KAAMC,EACNtC,IAAK4B,EACLW,SAAUN,IAGZ,IAAMO,EAAmBN,GACvB,SAACC,GACKvB,GACJH,EAAQ0B,EAAOjC,EAChB,GACD,CAACU,EAAUH,EAASP,IAGtB,OACEuC,EAAAC,cAACC,EAAI,CACHC,QAASxC,EACI,cAAAiB,GAAcnB,EAC3BF,IAAK8B,EACL7B,UAAW4C,EAAGC,EAAOC,SAAU9C,EAAW+C,EAASF,EAAQG,EAAUnC,IAAMoC,EAAAA,EACxEJ,CAAAA,EAAAA,EAAOpC,SAAWA,IAAaE,GAC/BkC,EAAOlC,SAAWA,IAErBV,GAAIA,EACJiD,KAAK,QAAO,gBACGvC,EACA,gBAAAF,EACfJ,QAAS2B,EACTmB,aAAcZ,EACda,QAASb,EACTjB,KAAMA,EACNL,SAAUA,iBACIE,EACdI,aAAcA,GAEbL,EAGP,IAGFmC,OAAOC,OAAO1D,EAAU,CAEtB2D,YAAa,aAQf,IAAeC,EAAAA,EAAoD5D,EAAU,CAC3E6D,MAAO3C,EACP4C,WAAYC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import o from"classnames";import t,{forwardRef as s,useRef as e}from"react";import r from"../../hooks/useMergeRef.js";import{
|
|
1
|
+
import o from"classnames";import t,{forwardRef as s,useRef as e}from"react";import r from"../../hooks/useMergeRef.js";import{ListItemIconMargin as i}from"./ListItemIconConstants.js";import{ListItemComponentType as m}from"../ListItem/ListItemConstants.js";import{withStaticProps as n}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import{getStyle as c}from"../../helpers/typesciptCssModulesHelper.js";import a from"./ListItemIcon.module.scss.js";import p from"../../../components/icon/dist/Icon/Icon.js";var l=18,f=n(s((function(s,i){var m=s.className,n=s.id,l=s.icon,f=s.margin,d=void 0===f?"start":f,u=s.component,I=void 0===u?"div":u,j=e(null),v=r(i,j);return t.createElement(I,{ref:v,className:o(a.listItemIcon,c(a,d),m),id:n,"aria-hidden":"true"},t.createElement(p,{icon:l,ignoreFocusStyle:!0,iconSize:18}))})),{margin:i,components:m});export{l as LIST_ITEM_ICON_SIZE,f as default};
|
|
2
2
|
//# sourceMappingURL=ListItemIcon.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemIcon.js","sources":["../../../../../src/components/ListItemIcon/ListItemIcon.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { ListItemIconMargin as ListItemIconMarginEnum } from \"./ListItemIconConstants\";\nimport { ListItemComponentType as ListItemComponentTypeEnum } from \"../ListItem/ListItemConstants\";\nimport { type ListItemElement } from \"../ListItem\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./ListItemIcon.module.scss\";\nimport { type ListItemIconMargin } from \"./ListItemIcon.types\";\n\nexport const LIST_ITEM_ICON_SIZE = 18;\n\nexport interface ListItemIconProps extends VibeComponentProps {\n /**\n * The HTML element used for the list item icon.\n */\n component?: ListItemElement;\n /**\n * The icon displayed inside the list item.\n */\n icon?: SubIcon;\n /**\n * The position of the icon inside the list item, determining its margins.\n */\n margin?: ListItemIconMargin;\n}\n\nconst ListItemIcon = forwardRef(\n (\n { className, id, icon, margin = \"start\", component: Component = \"div\" }: ListItemIconProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n return (\n <Component\n ref={mergedRef}\n className={cx(styles.listItemIcon, getStyle(styles, margin), className)}\n id={id}\n aria-hidden=\"true\"\n >\n <Icon icon={icon} ignoreFocusStyle iconSize={LIST_ITEM_ICON_SIZE} />\n </Component>\n );\n }\n);\n\ninterface ListItemIconStaticProps {\n margin: typeof ListItemIconMarginEnum;\n components: typeof ListItemComponentTypeEnum;\n}\n\nexport default withStaticProps<ListItemIconProps, ListItemIconStaticProps>(ListItemIcon, {\n margin: ListItemIconMarginEnum,\n components: ListItemComponentTypeEnum\n});\n"],"names":["LIST_ITEM_ICON_SIZE","withStaticProps","forwardRef","_ref","ref","className","id","icon","_ref$margin","margin","_ref$component","component","Component","componentRef","useRef","mergedRef","useMergeRef","React","createElement","cx","styles","listItemIcon","getStyle","Icon","ignoreFocusStyle","iconSize","ListItemIconMarginEnum","components","ListItemComponentTypeEnum"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItemIcon.js","sources":["../../../../../src/components/ListItemIcon/ListItemIcon.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { forwardRef, useRef } from \"react\";\nimport useMergeRef from \"../../hooks/useMergeRef\";\nimport { Icon, type SubIcon } from \"@vibe/icon\";\nimport { ListItemIconMargin as ListItemIconMarginEnum } from \"./ListItemIconConstants\";\nimport { ListItemComponentType as ListItemComponentTypeEnum } from \"../ListItem/ListItemConstants\";\nimport { type ListItemElement } from \"../ListItem\";\nimport { type VibeComponentProps, withStaticProps } from \"../../types\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport styles from \"./ListItemIcon.module.scss\";\nimport { type ListItemIconMargin } from \"./ListItemIcon.types\";\n\nexport const LIST_ITEM_ICON_SIZE = 18;\n\nexport interface ListItemIconProps extends VibeComponentProps {\n /**\n * The HTML element used for the list item icon.\n */\n component?: ListItemElement;\n /**\n * The icon displayed inside the list item.\n */\n icon?: SubIcon;\n /**\n * The position of the icon inside the list item, determining its margins.\n */\n margin?: ListItemIconMargin;\n}\n\nconst ListItemIcon = forwardRef(\n (\n { className, id, icon, margin = \"start\", component: Component = \"div\" }: ListItemIconProps,\n ref: React.ForwardedRef<HTMLElement>\n ) => {\n const componentRef = useRef(null);\n const mergedRef = useMergeRef(ref, componentRef);\n\n return (\n <Component\n ref={mergedRef}\n className={cx(styles.listItemIcon, getStyle(styles, margin), className)}\n id={id}\n aria-hidden=\"true\"\n >\n <Icon icon={icon} ignoreFocusStyle iconSize={LIST_ITEM_ICON_SIZE} />\n </Component>\n );\n }\n);\n\ninterface ListItemIconStaticProps {\n margin: typeof ListItemIconMarginEnum;\n components: typeof ListItemComponentTypeEnum;\n}\n\nexport default withStaticProps<ListItemIconProps, ListItemIconStaticProps>(ListItemIcon, {\n margin: ListItemIconMarginEnum,\n components: ListItemComponentTypeEnum\n});\n"],"names":["LIST_ITEM_ICON_SIZE","withStaticProps","forwardRef","_ref","ref","className","id","icon","_ref$margin","margin","_ref$component","component","Component","componentRef","useRef","mergedRef","useMergeRef","React","createElement","cx","styles","listItemIcon","getStyle","Icon","ignoreFocusStyle","iconSize","ListItemIconMarginEnum","components","ListItemComponentTypeEnum"],"mappings":"ohBAYO,IAAMA,EAAsB,GA2CpBC,EAAAA,EA1BMC,GACnB,SAAAC,EAEEC,GACE,IAFAC,EAASF,EAATE,UAAWC,EAAEH,EAAFG,GAAIC,EAAIJ,EAAJI,KAAIC,EAAAL,EAAEM,OAAAA,OAAS,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EAAEQ,UAAWC,OAAY,IAAHF,EAAG,MAAKA,EAG/DG,EAAeC,EAAO,MACtBC,EAAYC,EAAYZ,EAAKS,GAEnC,OACEI,EAAAC,cAACN,EAAS,CACRR,IAAKW,EACLV,UAAWc,EAAGC,EAAOC,aAAcC,EAASF,EAAQX,GAASJ,GAC7DC,GAAIA,gBACQ,QAEZW,EAAAC,cAACK,EAAI,CAAChB,KAAMA,EAAMiB,kBAAiB,EAAAC,SAhCR,KAmCjC,IAQuF,CACvFhB,OAAQiB,EACRC,WAAYC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import n from"classnames";import{SIZES as t}from"../../../constants/sizes.js";import
|
|
1
|
+
import{slicedToArray as e}from"../../../../_virtual/_rollupPluginBabelHelpers.js";import n from"classnames";import{SIZES as t}from"../../../constants/sizes.js";import s,{forwardRef as o,useRef as u,useState as i,useMemo as r,useCallback as l,useEffect as d}from"react";import a from"../../../hooks/useMergeRef.js";import c from"../../../hooks/ssr/useIsomorphicLayoutEffect.js";import m from"./hooks/useSubMenuIndex.js";import p from"./hooks/useOnCloseMenu.js";import v from"./hooks/useCloseMenuOnKeyEvent.js";import f from"./hooks/useMenuKeyboardNavigation.js";import I from"./hooks/useMouseLeave.js";import{useAdjacentSelectableMenuIndex as M}from"./hooks/useAdjacentSelectableMenuIndex.js";import{useFocusWithin as b}from"../../../hooks/useFocusWithin.js";import h from"../../../hooks/usePrevious/index.js";import{withStaticProps as x}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import{getStyle as S}from"../../../helpers/typesciptCssModulesHelper.js";import{getTestId as j}from"../../../tests/testIds.js";import{ComponentDefaultTestId as O,ComponentVibeId as k}from"../../../tests/constants.js";import{useFocusOnMount as g}from"./hooks/useFocusOnMount.js";import{useMenuId as C}from"./hooks/useMenuId.js";import{generateMenuItemId as E}from"./utils/utils.js";import y from"./Menu.module.scss.js";import A from"../../../../hooks/dist/useClickOutside/index.js";var N=o((function(o,x){var N=o.id,B=o.className,F=o.size,P=void 0===F?t.MEDIUM:F,D=o.tabIndex,L=void 0===D?0:D,V=o.ariaLabel,U=void 0===V?"Menu":V,z=o.ariaDescribedBy,R=o.children,T=o.isVisible,W=void 0===T||T,H=o.onClose,K=o.onItemFocus,_=o.focusOnMount,q=void 0!==_&&_,w=o.focusItemIndex,G=void 0===w?-1:w,J=o.focusItemIndexOnMount,Q=void 0===J?-1:J,X=o.isSubMenu,Y=void 0!==X&&X,Z=o.useDocumentEventListeners,$=void 0!==Z&&Z,ee=o.shouldScrollMenu,ne=void 0!==ee&&ee,te=o["data-testid"],se=u(null),oe=a(se,x),ue=C(N),ie=u(null),re=i(G),le=e(re,2),de=le[0],ae=le[1],ce=i(!1),me=e(ce,2),pe=me[0],ve=me[1],fe=r((function(){return s.Children.toArray(R).filter((function(e){return!!e.type.isMenuChild||(console.error("Menu child must be a menuChild item (such as MenuItem, MenuDivider, MenuTitle, etc). This child is not supported: ",e),!1)}))}),[R]),Ie=l((function(e){var n,t,o;ae(e);var u=fe[e],i=s.isValidElement(u)?(null===(n=null==u?void 0:u.props)||void 0===n?void 0:n.id)||"".concat(ue,"-item-").concat(e):void 0;i?null===(t=null==se?void 0:se.current)||void 0===t||t.setAttribute("aria-activedescendant",i):null===(o=null==se?void 0:se.current)||void 0===o||o.removeAttribute("aria-activedescendant")}),[fe,ue]),Me=l((function(e){K&&K(e),Ie(e),ve(!1)}),[Ie,K]),be=m(),he=be.setSubMenuIsOpenByIndex,xe=be.hasOpenSubMenu,Se=be.openSubMenuIndex,je=be.resetOpenSubMenuIndex,Oe=p({setActiveItemIndex:Me,setOpenSubMenuIndex:be.setOpenSubMenuIndex,onClose:H});A({ref:se,callback:function(){return Oe()}}),v({hasOpenSubMenu:xe,onCloseMenu:Oe,ref:se,onClose:H,isSubMenu:Y,useDocumentEventListeners:$});var ke=M({children:fe}),ge=ke.getNextSelectableIndex,Ce=ke.getPreviousSelectableIndex;f({hasOpenSubMenu:xe,getNextSelectableIndex:ge,getPreviousSelectableIndex:Ce,activeItemIndex:de,setActiveItemIndex:Me,isVisible:W,ref:se,useDocumentEventListeners:$}),I({resetOpenSubMenuIndex:je,hasOpenSubMenu:xe,ref:se,setActiveItemIndex:Me}),g({focusItemIndexOnMount:Q,focusChildOnMount:fe[Q],getNextSelectableIndex:ge,updateActiveItemIndex:Ie,setIsInitialFocusSet:ve});var Ee=l((function(){ve(!0)}),[ve]),ye=h(xe);d((function(){var e;xe||$||de>-1&&ye&&(null===(e=null==se?void 0:se.current)||void 0===e||e.focus())}),[de,xe,ye,$]),c((function(){q&&!$&&requestAnimationFrame((function(){se&&se.current&&se.current.focus()}))}),[se,q,$]);var Ae=b({onBlurWithin:function(){Oe&&Oe()}}).focusWithinProps;return s.createElement("ul",{onFocus:null==Ae?void 0:Ae.onFocus,onBlur:null==Ae?void 0:Ae.onBlur,id:ue,"data-testid":te||j(O.MENU,N),"data-vibe":k.MENU,className:n(y.menu,S(y,P),B),ref:oe,tabIndex:L,"aria-label":U,role:"menu","aria-describedby":z,onMouseOver:Ee},fe&&s.Children.map(fe,(function(e,n){return s.isValidElement(e)?s.cloneElement(e,Object.assign(Object.assign({},null==e?void 0:e.props),{activeItemIndex:de,index:n,setActiveItemIndex:Ie,menuRef:se,resetOpenSubMenuIndex:je,isParentMenuVisible:W,setSubMenuIsOpenByIndex:he,hasOpenSubMenu:n===Se,closeMenu:Oe,id:E(ue,e,n),useDocumentEventListeners:$,isInitialSelectedState:pe,shouldScrollMenu:ne,getNextSelectableIndex:ge,getPreviousSelectableIndex:Ce,isUnderSubMenu:Y,splitMenuItemIconButtonRef:ie})):null})))}));Object.assign(N,{isMenu:!0,supportFocusOnMount:!0});var B=x(N,{sizes:t});export{B as default};
|
|
2
2
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../../../../_virtual/_tslib.js";import o,{forwardRef as t,useRef as i,useMemo as r}from"react";import l from"../../Tooltip/Tooltip.js";import
|
|
1
|
+
import{__rest as e}from"../../../../_virtual/_tslib.js";import o,{forwardRef as t,useRef as i,useMemo as r}from"react";import l from"../../Tooltip/Tooltip.js";import n from"../../../hooks/useIsOverflowing/useIsOverflowing.js";import{withStaticProps as s}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import a from"../../Label/Label.js";import c from"./MenuItem.module.scss.js";import p from"./components/BaseMenuItem/BaseMenuItem.js";import m from"./components/MenuItemIcon/MenuItemIcon.js";import{TooltipPositions as d}from"../../Tooltip/TooltipConstants.js";import u from"../../Flex/Flex.js";import b from"../../../../components/icon/dist/Icon/Icon.js";var g=t((function(t,s){var d=t.className,b=t.iconWrapperClassName,g=t.rightIconWrapperClassName,f=t.title,I=void 0===f?"":f,h=t.label,v=void 0===h?"":h,y=t.icon,C=void 0===y?"":y,j=t.rightIcon,k=void 0===j?"":j,N=t.rightIconType,T=t.rightIconBackgroundColor,w=t.rightIconAriaLabel,E=t.iconType,M=t.iconBackgroundColor,B=t.disabled,P=void 0!==B&&B,x=t.disableReason,O=t.selected,L=void 0!==O&&O,S=t.key,W=t.children,D=t.tooltipContent,R=t.tooltipPosition,A=void 0===R?"right":R,F=t.tooltipShowDelay,_=void 0===F?300:F,V=t.tooltipProps,q=t["aria-label"],z=e(t,["className","iconWrapperClassName","rightIconWrapperClassName","title","label","icon","rightIcon","rightIconType","rightIconBackgroundColor","rightIconAriaLabel","iconType","iconBackgroundColor","disabled","disableReason","selected","key","children","tooltipContent","tooltipPosition","tooltipShowDelay","tooltipProps","aria-label"]),G=i(),H=null!=q?q:I,J=null!=w?w:I,K=n({ref:G})||P||D,Q=r((function(){return P?x:D||I}),[x,P,I,D]),U=r((function(){if(v)return"string"==typeof v?o.createElement(a,{kind:"line",text:v}):o.isValidElement(v)&&v.type===a?v:void 0}),[v]);return o.createElement(l,Object.assign({content:K?Q:null,position:A,showDelay:_},V),o.createElement(p,Object.assign({key:S,ref:s,subMenu:W,className:d,disabled:P,selected:L},z),!!C&&o.createElement(m,{icon:C,type:E,label:H,disabled:P,selected:L,backgroundColor:M,wrapperClassName:b}),o.createElement("div",{ref:G,className:c.title},I),o.createElement(u,{gap:"xs"},!!k&&!W&&o.createElement(m,{icon:k,type:N,label:J,disabled:P,selected:L,backgroundColor:T,isRightIcon:!0,wrapperClassName:g}),U)))}));Object.assign(g,{isSelectable:!0,isMenuChild:!0});var f=s(g,{iconType:b.type,tooltipPositions:d});export{f as default};
|
|
2
2
|
//# sourceMappingURL=MenuItem.js.map
|