@vibe/core 3.50.1-alpha-1be71.0 → 3.50.1
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/AlertBanner/AlertBanner.d.ts +1 -1
- package/dist/components/AttentionBox/AttentionBox.d.ts +1 -1
- package/dist/components/Avatar/Avatar.d.ts +1 -1
- package/dist/components/Avatar/AvatarBadge.d.ts +1 -1
- package/dist/components/Avatar/AvatarContent.d.ts +1 -1
- package/dist/components/Badge/Badge.d.ts +1 -1
- package/dist/components/Badge/Indicator/Indicator.d.ts +1 -1
- package/dist/components/Box/Box.d.ts +1 -1
- package/dist/components/BreadcrumbsBar/BreadcrumbsBar.d.ts +1 -1
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/components/Chips/Chips.d.ts +1 -1
- package/dist/components/ColorPicker/ColorPicker.d.ts +1 -1
- package/dist/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.d.ts +1 -1
- package/dist/components/Combobox/Combobox.d.ts +1 -1
- package/dist/components/Combobox/components/ComboboxOption/ComboboxOption.d.ts +1 -1
- package/dist/components/Counter/Counter.d.ts +1 -1
- package/dist/components/DialogContentContainer/DialogContentContainer.d.ts +1 -1
- package/dist/components/Divider/Divider.d.ts +1 -1
- package/dist/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/components/DropdownNew/Dropdown.types.d.ts +4 -0
- package/dist/components/DropdownNew/hooks/useDropdownCombobox.d.ts +1 -1
- package/dist/components/DropdownNew/hooks/useDropdownFiltering.d.ts +1 -1
- package/dist/components/DropdownNew/hooks/useDropdownMultiCombobox.d.ts +1 -1
- package/dist/components/DropdownNew/utils/dropdownUtils.d.ts +1 -1
- package/dist/components/EditableHeading/EditableHeading.d.ts +1 -1
- package/dist/components/EditableText/EditableText.d.ts +1 -1
- package/dist/components/Flex/Flex.d.ts +1 -1
- package/dist/components/FormattedNumber/FormattedNumber.d.ts +1 -1
- package/dist/components/Heading/Heading.d.ts +1 -1
- package/dist/components/Icon/Icon.d.ts +1 -1
- package/dist/components/IconButton/IconButton.d.ts +1 -1
- package/dist/components/Label/Label.d.ts +1 -1
- package/dist/components/LegacyModal/LegacyModal.d.ts +1 -1
- package/dist/components/Link/Link.d.ts +1 -1
- package/dist/components/List/List.d.ts +1 -1
- package/dist/components/ListItem/ListItem.d.ts +1 -1
- package/dist/components/ListItemAvatar/ListItemAvatar.d.ts +1 -1
- package/dist/components/ListItemIcon/ListItemIcon.d.ts +1 -1
- package/dist/components/Loader/Loader.d.ts +1 -1
- package/dist/components/Menu/Menu/Menu.d.ts +1 -1
- package/dist/components/Menu/MenuItem/MenuItem.d.ts +1 -1
- package/dist/components/Menu/MenuItemButton/MenuItemButton.d.ts +1 -1
- package/dist/components/Menu/MenuTitle/MenuTitle.d.ts +1 -1
- package/dist/components/MenuButton/MenuButton.d.ts +1 -1
- package/dist/components/MultiStepIndicator/MultiStepIndicator.d.ts +1 -1
- package/dist/components/ProgressBars/LinearProgressBar/LinearProgressBar.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/Slider/Slider.d.ts +1 -1
- package/dist/components/Slider/SliderInfix.d.ts +1 -1
- package/dist/components/SplitButton/SplitButton.d.ts +1 -1
- package/dist/components/Steps/Steps.d.ts +1 -1
- package/dist/components/Table/Table/Table.d.ts +1 -1
- package/dist/components/Tabs/TabPanels/TabPanels.d.ts +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/components/TextField/TextField.d.ts +1 -1
- package/dist/components/ThemeProvider/ThemeProvider.d.ts +1 -1
- package/dist/components/Tipseen/Tipseen.d.ts +1 -1
- package/dist/components/Toast/Toast.d.ts +1 -1
- package/dist/metadata.json +11649 -8784
- package/dist/mocked_classnames/components/AlertBanner/AlertBanner.d.ts +1 -1
- package/dist/mocked_classnames/components/AttentionBox/AttentionBox.d.ts +1 -1
- package/dist/mocked_classnames/components/Avatar/Avatar.d.ts +1 -1
- package/dist/mocked_classnames/components/Avatar/AvatarBadge.d.ts +1 -1
- package/dist/mocked_classnames/components/Avatar/AvatarContent.d.ts +1 -1
- package/dist/mocked_classnames/components/Badge/Badge.d.ts +1 -1
- package/dist/mocked_classnames/components/Badge/Indicator/Indicator.d.ts +1 -1
- package/dist/mocked_classnames/components/Box/Box.d.ts +1 -1
- package/dist/mocked_classnames/components/BreadcrumbsBar/BreadcrumbsBar.d.ts +1 -1
- package/dist/mocked_classnames/components/Button/Button.d.ts +1 -1
- package/dist/mocked_classnames/components/ButtonGroup/ButtonGroup.d.ts +1 -1
- package/dist/mocked_classnames/components/Chips/Chips.d.ts +1 -1
- package/dist/mocked_classnames/components/ColorPicker/ColorPicker.d.ts +1 -1
- package/dist/mocked_classnames/components/ColorPicker/components/ColorPickerContent/ColorPickerContent.d.ts +1 -1
- package/dist/mocked_classnames/components/Combobox/Combobox.d.ts +1 -1
- package/dist/mocked_classnames/components/Combobox/components/ComboboxOption/ComboboxOption.d.ts +1 -1
- package/dist/mocked_classnames/components/Counter/Counter.d.ts +1 -1
- package/dist/mocked_classnames/components/DialogContentContainer/DialogContentContainer.d.ts +1 -1
- package/dist/mocked_classnames/components/Divider/Divider.d.ts +1 -1
- package/dist/mocked_classnames/components/Dropdown/Dropdown.d.ts +1 -1
- package/dist/mocked_classnames/components/DropdownNew/Dropdown.types.d.ts +4 -0
- package/dist/mocked_classnames/components/DropdownNew/hooks/useDropdownCombobox.d.ts +1 -1
- package/dist/mocked_classnames/components/DropdownNew/hooks/useDropdownFiltering.d.ts +1 -1
- package/dist/mocked_classnames/components/DropdownNew/hooks/useDropdownMultiCombobox.d.ts +1 -1
- package/dist/mocked_classnames/components/DropdownNew/utils/dropdownUtils.d.ts +1 -1
- package/dist/mocked_classnames/components/EditableHeading/EditableHeading.d.ts +1 -1
- package/dist/mocked_classnames/components/EditableText/EditableText.d.ts +1 -1
- package/dist/mocked_classnames/components/Flex/Flex.d.ts +1 -1
- package/dist/mocked_classnames/components/FormattedNumber/FormattedNumber.d.ts +1 -1
- package/dist/mocked_classnames/components/Heading/Heading.d.ts +1 -1
- package/dist/mocked_classnames/components/Icon/Icon.d.ts +1 -1
- package/dist/mocked_classnames/components/IconButton/IconButton.d.ts +1 -1
- package/dist/mocked_classnames/components/Label/Label.d.ts +1 -1
- package/dist/mocked_classnames/components/LegacyModal/LegacyModal.d.ts +1 -1
- package/dist/mocked_classnames/components/Link/Link.d.ts +1 -1
- package/dist/mocked_classnames/components/List/List.d.ts +1 -1
- package/dist/mocked_classnames/components/ListItem/ListItem.d.ts +1 -1
- package/dist/mocked_classnames/components/ListItemAvatar/ListItemAvatar.d.ts +1 -1
- package/dist/mocked_classnames/components/ListItemIcon/ListItemIcon.d.ts +1 -1
- package/dist/mocked_classnames/components/Loader/Loader.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/Menu/Menu.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/MenuItem/MenuItem.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/MenuItemButton/MenuItemButton.d.ts +1 -1
- package/dist/mocked_classnames/components/Menu/MenuTitle/MenuTitle.d.ts +1 -1
- package/dist/mocked_classnames/components/MenuButton/MenuButton.d.ts +1 -1
- package/dist/mocked_classnames/components/MultiStepIndicator/MultiStepIndicator.d.ts +1 -1
- package/dist/mocked_classnames/components/ProgressBars/LinearProgressBar/LinearProgressBar.d.ts +1 -1
- package/dist/mocked_classnames/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/mocked_classnames/components/Slider/Slider.d.ts +1 -1
- package/dist/mocked_classnames/components/Slider/SliderInfix.d.ts +1 -1
- package/dist/mocked_classnames/components/SplitButton/SplitButton.d.ts +1 -1
- package/dist/mocked_classnames/components/Steps/Steps.d.ts +1 -1
- package/dist/mocked_classnames/components/Table/Table/Table.d.ts +1 -1
- package/dist/mocked_classnames/components/Tabs/TabPanels/TabPanels.d.ts +1 -1
- package/dist/mocked_classnames/components/Text/Text.d.ts +1 -1
- package/dist/mocked_classnames/components/TextField/TextField.d.ts +1 -1
- package/dist/mocked_classnames/components/ThemeProvider/ThemeProvider.d.ts +1 -1
- package/dist/mocked_classnames/components/Tipseen/Tipseen.d.ts +1 -1
- package/dist/mocked_classnames/components/Toast/Toast.d.ts +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/Avatar.js +1 -1
- package/dist/mocked_classnames/src/components/Avatar/Avatar.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/Badge/Indicator/Indicator.js +1 -1
- package/dist/mocked_classnames/src/components/Badge/Indicator/Indicator.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/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/Counter/Counter.js +1 -1
- package/dist/mocked_classnames/src/components/Counter/Counter.js.map +1 -1
- package/dist/mocked_classnames/src/components/Dialog/Dialog.js +1 -1
- package/dist/mocked_classnames/src/components/Dialog/Dialog.js.map +1 -1
- package/dist/mocked_classnames/src/components/Divider/Divider.js +1 -1
- package/dist/mocked_classnames/src/components/Divider/Divider.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/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/Menu/MenuTitle/MenuTitle.js +1 -1
- package/dist/mocked_classnames/src/components/Menu/MenuTitle/MenuTitle.js.map +1 -1
- package/dist/mocked_classnames/src/components/Skeleton/Skeleton.js +1 -1
- package/dist/mocked_classnames/src/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderInfix.js +1 -1
- package/dist/mocked_classnames/src/components/Slider/SliderInfix.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/Table/TableContainer/TableContainer.module.scss.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableRowMenu/TableRowMenu.js +1 -1
- package/dist/mocked_classnames/src/components/Table/TableRowMenu/TableRowMenu.js.map +1 -1
- package/dist/mocked_classnames/src/components/TextField/TextField.js.map +1 -1
- package/dist/mocked_classnames/src/components/ThemeProvider/ThemeProvider.js +1 -1
- package/dist/mocked_classnames/src/components/ThemeProvider/ThemeProvider.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/index.js +1 -1
- package/dist/mocked_classnames/src/types/withStaticProps.js +1 -1
- package/dist/mocked_classnames/src/types/withStaticProps.js.map +1 -1
- package/dist/mocked_classnames/types/withStaticProps.d.ts +2 -2
- package/dist/src/components/AttentionBox/AttentionBox.js +1 -1
- package/dist/src/components/AttentionBox/AttentionBox.js.map +1 -1
- package/dist/src/components/Avatar/Avatar.js +1 -1
- package/dist/src/components/Avatar/Avatar.js.map +1 -1
- package/dist/src/components/Avatar/AvatarBadge.js +1 -1
- package/dist/src/components/Avatar/AvatarBadge.js.map +1 -1
- package/dist/src/components/Avatar/AvatarContent.js +1 -1
- package/dist/src/components/Avatar/AvatarContent.js.map +1 -1
- package/dist/src/components/Badge/Indicator/Indicator.js +1 -1
- package/dist/src/components/Badge/Indicator/Indicator.js.map +1 -1
- package/dist/src/components/BreadcrumbsBar/BreadcrumbsBar.js +1 -1
- package/dist/src/components/BreadcrumbsBar/BreadcrumbsBar.js.map +1 -1
- package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.js +1 -1
- package/dist/src/components/Combobox/components/ComboboxOption/ComboboxOption.js.map +1 -1
- package/dist/src/components/Counter/Counter.js +1 -1
- package/dist/src/components/Counter/Counter.js.map +1 -1
- package/dist/src/components/Dialog/Dialog.js +1 -1
- package/dist/src/components/Dialog/Dialog.js.map +1 -1
- package/dist/src/components/Divider/Divider.js +1 -1
- package/dist/src/components/Divider/Divider.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/Menu/MenuItemButton/MenuItemButton.js +1 -1
- package/dist/src/components/Menu/MenuItemButton/MenuItemButton.js.map +1 -1
- package/dist/src/components/Menu/MenuTitle/MenuTitle.js +1 -1
- package/dist/src/components/Menu/MenuTitle/MenuTitle.js.map +1 -1
- package/dist/src/components/Skeleton/Skeleton.js +1 -1
- package/dist/src/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/src/components/Slider/SliderInfix.js +1 -1
- package/dist/src/components/Slider/SliderInfix.js.map +1 -1
- package/dist/src/components/SplitButton/SplitButton.js +1 -1
- package/dist/src/components/SplitButton/SplitButton.js.map +1 -1
- package/dist/src/components/Table/TableContainer/TableContainer.module.scss.js +1 -1
- package/dist/src/components/Table/TableRowMenu/TableRowMenu.js +1 -1
- package/dist/src/components/Table/TableRowMenu/TableRowMenu.js.map +1 -1
- package/dist/src/components/TextField/TextField.js.map +1 -1
- package/dist/src/components/ThemeProvider/ThemeProvider.js +1 -1
- package/dist/src/components/ThemeProvider/ThemeProvider.js.map +1 -1
- package/dist/src/components/Toast/Toast.js +1 -1
- package/dist/src/components/Toast/Toast.js.map +1 -1
- package/dist/src/index.js +1 -1
- package/dist/src/types/withStaticProps.js +1 -1
- package/dist/src/types/withStaticProps.js.map +1 -1
- package/dist/types/withStaticProps.d.ts +2 -2
- package/package.json +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import o,{useMemo as i}from"react";import{camelCase as r}from"lodash-es";import{getStyle as s}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as a,ComponentDefaultTestId as n}from"../../tests/testIds.js";import c from"../Icon/Icon.js";import m from"../IconButton/IconButton.js";import{IconType as l}from"../Icon/IconConstants.js";import{AttentionBoxType as p}from"./AttentionBoxConstants.js";import{
|
|
1
|
+
import{defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import o,{useMemo as i}from"react";import{camelCase as r}from"lodash-es";import{getStyle as s}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as a,ComponentDefaultTestId as n}from"../../tests/testIds.js";import c from"../Icon/Icon.js";import m from"../IconButton/IconButton.js";import{IconType as l}from"../Icon/IconConstants.js";import{AttentionBoxType as p}from"./AttentionBoxConstants.js";import{withStaticPropsWithoutForwardRef as d}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import f from"../Text/Text.js";import u from"../Flex/Flex.js";import y from"./AttentionBox.module.scss.js";import j from"../../../icons/dist/react/Info.js";import v from"../../../icons/dist/react/Alert.js";import x from"../../../icons/dist/react/CloseSmall.js";var I=d((function(l){var p=l.className,d=l.withIconWithoutHeader,I=void 0!==d&&d,h=l.type,g=void 0===h?"primary":h,C=l.icon,N=l.iconType,T=void 0===N?"svg":N,E=l.title,B=l.text,A=l.children,S=l.withoutIcon,w=void 0!==S&&S,H=l.onClose,b=l.compact,F=void 0!==b&&b,z=l.id,P=l["data-testid"],_=l.closeButtonAriaLabel,L=void 0===_?"Close":_,O=l.entryAnimation,W=void 0!==O&&O,k=i((function(){return"primary"===g?j:v}),[g]),M=void 0===C?k:C;return o.createElement("aside",{className:e(y.attentionBox,s(y,r("type-".concat(g))),p,t({},y.entryAnimation,W)),role:"alert","data-testid":P||a(n.ATTENTION_BOX,z)},E&&o.createElement(u,{justify:"start",align:"center",className:y.titleContainer,gap:"xs"},!w&&o.createElement(c,{className:y.icon,iconType:T,ariaHidden:!0,icon:M,ignoreFocusStyle:!0,iconSize:"20"}),o.createElement(f,{type:"text1",element:"h5",weight:"medium",className:y.title},E)),o.createElement(u,{justify:"start",align:"center",gap:"xs"},!E&&F&&!w&&I&&o.createElement(c,{iconType:T,iconSize:18,ariaHidden:!0,icon:M,ignoreFocusStyle:!0}),o.createElement(f,{type:"text2",element:F?void 0:"p",className:e(y.text,t(t(t({},y.compact,F),y.dismissible,!!H),y.paragraph,!F))},B||A)),H&&o.createElement(m,{size:"small",color:"on-primary-color",className:y.closeIcon,wrapperClassName:e(y.closeIconWrapper,t({},y.closeIconCompact,F)),ariaLabel:L,hideTooltip:!0,icon:x,onClick:H}))}),{types:p,iconTypes:l});export{I as default};
|
|
2
2
|
//# sourceMappingURL=AttentionBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttentionBox.js","sources":["../../../../../src/components/AttentionBox/AttentionBox.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useMemo } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport Icon from \"../Icon/Icon\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { CloseSmall, Alert as AlertIcon, Info as InfoIcon } from \"@vibe/icons\";\nimport { IconType as IconTypeEnum } from \"../Icon/IconConstants\";\nimport { AttentionBoxType as AttentionBoxTypeEnum } from \"./AttentionBoxConstants\";\nimport { AttentionBoxType } from \"./AttentionBox.types\";\nimport { SubIcon, VibeComponentProps,
|
|
1
|
+
{"version":3,"file":"AttentionBox.js","sources":["../../../../../src/components/AttentionBox/AttentionBox.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { useMemo } from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport Icon from \"../Icon/Icon\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { CloseSmall, Alert as AlertIcon, Info as InfoIcon } from \"@vibe/icons\";\nimport { IconType as IconTypeEnum } from \"../Icon/IconConstants\";\nimport { AttentionBoxType as AttentionBoxTypeEnum } from \"./AttentionBoxConstants\";\nimport { AttentionBoxType } from \"./AttentionBox.types\";\nimport { SubIcon, VibeComponentProps, ElementContent, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport Text from \"../Text/Text\";\nimport Flex from \"../Flex/Flex\";\nimport styles from \"./AttentionBox.module.scss\";\n\nexport interface AttentionBoxProps extends VibeComponentProps {\n // TODO: [breaking] remove prop\n /**\n * If true, displays an icon even when no header is provided.\n */\n withIconWithoutHeader?: boolean;\n /**\n * The type of the AttentionBox.\n */\n type?: AttentionBoxType;\n /**\n * The icon displayed next to the title or text.\n */\n icon?: SubIcon;\n /**\n * The type of the icon.\n */\n iconType?: \"svg\" | \"font\";\n /**\n * The title of the component.\n */\n title?: string;\n /**\n * The text content displayed inside.\n */\n text?: string;\n /**\n * The content of the component.\n */\n children?: ElementContent;\n // TODO: [breaking] remove prop\n /**\n * If true, the icon is not displayed.\n */\n withoutIcon?: boolean;\n /**\n * Callback fired when the close button is clicked.\n */\n onClose?: (event: React.MouseEvent) => void;\n /**\n * If true, renders in compact mode.\n */\n compact?: boolean;\n /**\n * The label of the close button.\n */\n closeButtonAriaLabel?: string;\n /**\n * If true, an entry animation is applied when the component appears.\n */\n entryAnimation?: boolean;\n}\n\nconst AttentionBox = ({\n className,\n withIconWithoutHeader = false,\n type = \"primary\",\n icon,\n iconType = \"svg\",\n title,\n text,\n children,\n withoutIcon = false,\n onClose,\n compact = false,\n id,\n \"data-testid\": dataTestId,\n closeButtonAriaLabel = \"Close\",\n entryAnimation = false\n}: AttentionBoxProps) => {\n const defaultIcon = useMemo(() => {\n return type === \"primary\" ? InfoIcon : AlertIcon;\n }, [type]);\n\n const overrideIcon = icon === undefined ? defaultIcon : icon;\n\n return (\n <aside\n className={cx(styles.attentionBox, getStyle(styles, camelCase(`type-${type}`)), className, {\n [styles.entryAnimation]: entryAnimation\n })}\n role=\"alert\"\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}\n >\n {title && (\n <Flex justify=\"start\" align=\"center\" className={styles.titleContainer} gap=\"xs\">\n {!withoutIcon && (\n <Icon\n className={styles.icon}\n iconType={iconType}\n ariaHidden\n icon={overrideIcon}\n ignoreFocusStyle\n iconSize=\"20\"\n />\n )}\n <Text type=\"text1\" element=\"h5\" weight=\"medium\" className={styles.title}>\n {title}\n </Text>\n </Flex>\n )}\n <Flex justify=\"start\" align=\"center\" gap=\"xs\">\n {!title && compact && !withoutIcon && withIconWithoutHeader && (\n <Icon iconType={iconType} iconSize={18} ariaHidden icon={overrideIcon} ignoreFocusStyle />\n )}\n <Text\n type=\"text2\"\n element={compact ? undefined : \"p\"}\n className={cx(styles.text, {\n [styles.compact]: compact,\n [styles.dismissible]: !!onClose,\n [styles.paragraph]: !compact\n })}\n >\n {text || children}\n </Text>\n </Flex>\n {onClose && (\n <IconButton\n size=\"small\"\n color=\"on-primary-color\"\n className={styles.closeIcon}\n wrapperClassName={cx(styles.closeIconWrapper, {\n [styles.closeIconCompact]: compact\n })}\n ariaLabel={closeButtonAriaLabel}\n hideTooltip\n icon={CloseSmall}\n onClick={onClose}\n />\n )}\n </aside>\n );\n};\n\ninterface AttentionBoxStaticProps {\n types: typeof AttentionBoxTypeEnum;\n iconTypes: typeof IconTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<AttentionBoxProps, AttentionBoxStaticProps>(AttentionBox, {\n types: AttentionBoxTypeEnum,\n iconTypes: IconTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","className","_ref$withIconWithoutH","withIconWithoutHeader","_ref$type","type","icon","_ref$iconType","iconType","title","text","children","_ref$withoutIcon","withoutIcon","onClose","_ref$compact","compact","id","dataTestId","_ref$closeButtonAriaL","closeButtonAriaLabel","_ref$entryAnimation","entryAnimation","defaultIcon","useMemo","InfoIcon","AlertIcon","overrideIcon","undefined","React","cx","styles","attentionBox","getStyle","camelCase","concat","_defineProperty","role","getTestId","ComponentDefaultTestId","ATTENTION_BOX","createElement","Flex","justify","align","titleContainer","gap","Icon","ariaHidden","ignoreFocusStyle","iconSize","Text","element","weight","dismissible","paragraph","IconButton","size","color","closeIcon","wrapperClassName","closeIconWrapper","closeIconCompact","ariaLabel","hideTooltip","CloseSmall","onClick","types","AttentionBoxTypeEnum","iconTypes","IconTypeEnum"],"mappings":"k4BAqEA,IAuFeA,EAAAA,GAvFM,SAAHC,GAgBM,IAftBC,EAASD,EAATC,UAASC,EAAAF,EACTG,sBAAAA,OAAwB,IAAHD,GAAQA,EAAAE,EAAAJ,EAC7BK,KAAAA,OAAO,IAAHD,EAAG,UAASA,EAChBE,EAAIN,EAAJM,KAAIC,EAAAP,EACJQ,SAAAA,OAAW,IAAHD,EAAG,MAAKA,EAChBE,EAAKT,EAALS,MACAC,EAAIV,EAAJU,KACAC,EAAQX,EAARW,SAAQC,EAAAZ,EACRa,YAAAA,OAAc,IAAHD,GAAQA,EACnBE,EAAOd,EAAPc,QAAOC,EAAAf,EACPgB,QAAAA,OAAU,IAAHD,GAAQA,EACfE,EAAEjB,EAAFiB,GACeC,EAAUlB,EAAzB,eAAamB,EAAAnB,EACboB,qBAAAA,OAAuB,IAAHD,EAAG,QAAOA,EAAAE,EAAArB,EAC9BsB,eAAAA,OAAiB,IAAHD,GAAQA,EAEhBE,EAAcC,GAAQ,WAC1B,MAAgB,YAATnB,EAAqBoB,EAAWC,CACzC,GAAG,CAACrB,IAEEsB,OAAwBC,IAATtB,EAAqBiB,EAAcjB,EAExD,OACEuB,yBACE5B,UAAW6B,EAAGC,EAAOC,aAAcC,EAASF,EAAQG,UAASC,OAAS9B,KAAUJ,EAASmC,EACtFL,CAAAA,EAAAA,EAAOT,eAAiBA,IAE3Be,KAAK,sBACQnB,GAAcoB,EAAUC,EAAuBC,cAAevB,IAE1ER,GACCoB,EAACY,cAAAC,GAAKC,QAAQ,QAAQC,MAAM,SAAS3C,UAAW8B,EAAOc,eAAgBC,IAAI,OACvEjC,GACAgB,EAAAY,cAACM,EAAI,CACH9C,UAAW8B,EAAOzB,KAClBE,SAAUA,EACVwC,YAAU,EACV1C,KAAMqB,EACNsB,kBAAgB,EAChBC,SAAS,OAGbrB,EAACY,cAAAU,GAAK9C,KAAK,QAAQ+C,QAAQ,KAAKC,OAAO,SAASpD,UAAW8B,EAAOtB,OAC/DA,IAIPoB,EAAAY,cAACC,EAAI,CAACC,QAAQ,QAAQC,MAAM,SAASE,IAAI,OACrCrC,GAASO,IAAYH,GAAeV,GACpC0B,EAACY,cAAAM,EAAK,CAAAvC,SAAUA,EAAU0C,SAAU,GAAIF,YAAW,EAAA1C,KAAMqB,EAAcsB,sBAEzEpB,EAACY,cAAAU,EACC,CAAA9C,KAAK,QACL+C,QAASpC,OAAUY,EAAY,IAC/B3B,UAAW6B,EAAGC,EAAOrB,KAAI0B,EAAAA,EAAAA,EAAA,CAAA,EACtBL,EAAOf,QAAUA,GACjBe,EAAOuB,cAAgBxC,GACvBiB,EAAOwB,WAAavC,KAGtBN,GAAQC,IAGZG,GACCe,EAAAY,cAACe,EAAU,CACTC,KAAK,QACLC,MAAM,mBACNzD,UAAW8B,EAAO4B,UAClBC,iBAAkB9B,EAAGC,EAAO8B,iBAAgBzB,EAAA,CAAA,EACzCL,EAAO+B,iBAAmB9C,IAE7B+C,UAAW3C,EACX4C,eACA1D,KAAM2D,EACNC,QAASpD,IAKnB,GAO0G,CACxGqD,MAAOC,EACPC,UAAWC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{isNil as t,camelCase as o}from"lodash-es";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as s}from"../../tests/testIds.js";import i from"classnames";import l,{useMemo as n,useCallback as c}from"react";import{ElementAllowedColor as m}from"../../utils/colors-vars-map.js";import{getElementColor as d}from"../../types/Colors.js";import{AvatarType as p,AvatarSize as u}from"./AvatarConstants.js";import b from"./AvatarBadge.js";import g from"./AvatarContent.js";import f from"../Tooltip/Tooltip.js";import v from"../Clickable/ClickableWrapper.js";import{
|
|
1
|
+
import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{isNil as t,camelCase as o}from"lodash-es";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as s}from"../../tests/testIds.js";import i from"classnames";import l,{useMemo as n,useCallback as c}from"react";import{ElementAllowedColor as m}from"../../utils/colors-vars-map.js";import{getElementColor as d}from"../../types/Colors.js";import{AvatarType as p,AvatarSize as u}from"./AvatarConstants.js";import b from"./AvatarBadge.js";import g from"./AvatarContent.js";import f from"../Tooltip/Tooltip.js";import v from"../Clickable/ClickableWrapper.js";import{withStaticPropsWithoutForwardRef as h}from"../../types/withStaticProps.js";import j from"./Avatar.module.scss.js";var C=h((function(m){var p=m.id,u=m.type,h=void 0===u?"text":u,C=m.className,k=m.avatarContentWrapperClassName,E=m.textClassName,y=void 0===E?"":E,N=m.size,B=void 0===N?"large":N,x=m.src,P=m.icon,z=m.text,T=m.tooltipProps,A=m.ariaLabel,O=m.withoutTooltip,w=void 0!==O&&O,L=m.role,R=m.backgroundColor,I=void 0===R?"chili-blue":R,H=m.square,W=m.disabled,q=m.tabIndex,S=m.ariaHidden,_=void 0!==S&&S,D=m.topLeftBadgeProps,M=m.topRightBadgeProps,V=m.bottomLeftBadgeProps,F=m.bottomRightBadgeProps,G=m.withoutBorder,J=void 0!==G&&G,K=m.customSize,Q=void 0===K?null:K,U=m.customBackgroundColor,X=void 0===U?null:U,Y=m.onClick,Z=m["data-testid"],$=n((function(){return X?{backgroundColor:X}:x?{}:{backgroundColor:d(I)}}),[x,I,X]),ee=n((function(){return Q?{height:Q,width:Q}:{}}),[Q]),te=n((function(){if(!w)return T?Object.assign({content:A},T):{content:A}}),[A,T,w]),oe=n((function(){var e=[];return t(D)||e.push(l.createElement("div",{key:"top-left-badge",className:i(j.badge,j.badgeTopLeft)},l.createElement(b,Object.assign({size:B},D)))),t(M)||e.push(l.createElement("div",{key:"top-right-badge",className:i(j.badge,j.badgeTopRight)},l.createElement(b,Object.assign({size:B},M)))),t(V)||e.push(l.createElement("div",{key:"bottom-left-badge",className:i(j.badge,j.badgeBottomLeft)},l.createElement(b,Object.assign({size:B},V)))),t(F)||e.push(l.createElement("div",{key:"bottom-right-bade",className:i(j.badge,j.badgeBottomRight)},l.createElement(b,Object.assign({size:B},F)))),e.length>0?l.createElement("div",{className:i(j.badges)},e):null}),[B,D,M,V,F]),ae=n((function(){return W||!Y&&!(null==te?void 0:te.content)?-1:0}),[W,Y,null==te?void 0:te.content]),re=null!=q?q:ae,se=c((function(e){e.preventDefault(),Y&&Y(e,p)}),[Y,p]);return l.createElement("div",{id:p,"data-testid":Z||r(s.AVATAR,p),className:i(j.avatar,j[B],C),style:ee},l.createElement(v,{isClickable:!!Y,clickableProps:{onClick:se,tabIndex:"-1",className:j.clickableWrapper}},l.createElement(f,Object.assign({showTrigger:["focus","mouseenter"],hideTrigger:["blur","mouseleave"]},te),l.createElement("div",{className:i(j.circle,a(j,o("circle--"+h)),e(e(e({},j.disabled,W),j.square,H),j.withoutBorder,J),k),"aria-hidden":_,tabIndex:re,style:Object.assign({},$)},l.createElement(g,{type:h,size:B,src:x,icon:P,text:z,ariaLabel:A,role:L,textClassName:y})),oe)))}),{types:p,sizes:u,colors:m,backgroundColors:m});export{C as default};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"lodash-es\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport Tooltip, { TooltipProps } from \"../Tooltip/Tooltip\";\nimport ClickableWrapper from \"../Clickable/ClickableWrapper\";\nimport { SubIcon, VibeComponentProps, withStaticProps } from \"../../types\";\nimport styles from \"./Avatar.module.scss\";\n\nexport interface AvatarProps extends VibeComponentProps {\n /**\n * The image source for the avatar.\n */\n src?: string;\n /**\n * The text displayed inside the avatar.\n */\n text?: string;\n /**\n * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * The ARIA label of the avatar.\n */\n ariaLabel?: string;\n /**\n * If true, the tooltip is disabled.\n */\n withoutTooltip?: boolean;\n /**\n * The icon displayed inside the avatar.\n */\n icon?: SubIcon;\n /**\n * The type of the avatar.\n */\n type?: AvatarType;\n /**\n * Class name applied to the text inside the avatar.\n */\n textClassName?: string;\n /**\n * Class name applied to the avatar content wrapper.\n */\n avatarContentWrapperClassName?: string;\n /**\n * The background color of the avatar.\n */\n backgroundColor?: ElementAllowedColor;\n /**\n * A custom background color.\n */\n customBackgroundColor?: string;\n /**\n * The ARIA role of the avatar.\n */\n role?: AriaRole;\n /**\n * The size of the avatar.\n */\n size?: AvatarSize;\n /**\n * A custom size in pixels.\n */\n customSize?: number;\n /**\n * The tab index of the avatar.\n */\n tabIndex?: number;\n /**\n * If true, the avatar is hidden from assistive technologies.\n */\n ariaHidden?: boolean;\n /**\n * If true, the avatar is disabled.\n */\n disabled?: boolean;\n /**\n * If true, renders the avatar as a square instead of a circle.\n */\n square?: boolean;\n /**\n * Props for the top-left badge.\n */\n topLeftBadgeProps?: AvatarBadgeProps;\n /**\n * Props for the top-right badge.\n */\n topRightBadgeProps?: AvatarBadgeProps;\n /**\n * Props for the bottom-left badge.\n */\n bottomLeftBadgeProps?: AvatarBadgeProps;\n /**\n * Props for the bottom-right badge.\n */\n bottomRightBadgeProps?: AvatarBadgeProps;\n /**\n * If true, removes the avatar's border.\n */\n withoutBorder?: boolean;\n /**\n * Callback fired when the avatar is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar = ({\n id,\n type = \"text\",\n className,\n avatarContentWrapperClassName,\n textClassName = \"\",\n size = \"large\",\n src,\n icon,\n text,\n tooltipProps,\n ariaLabel,\n withoutTooltip = false,\n role,\n backgroundColor = \"chili-blue\",\n square,\n disabled,\n tabIndex,\n ariaHidden = false,\n topLeftBadgeProps,\n topRightBadgeProps,\n bottomLeftBadgeProps,\n bottomRightBadgeProps,\n withoutBorder = false,\n customSize = null,\n customBackgroundColor = null,\n onClick,\n \"data-testid\": dataTestId\n}: AvatarProps) => {\n const backgroundColorStyle = useMemo(() => {\n if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n }, [src, backgroundColor, customBackgroundColor]);\n const sizeStyle = useMemo(() => {\n return customSize ? { height: customSize, width: customSize } : {};\n }, [customSize]);\n\n const overrideTooltipProps = useMemo(() => {\n if (withoutTooltip) return undefined;\n\n if (tooltipProps) {\n return { content: ariaLabel, ...tooltipProps };\n } else {\n return { content: ariaLabel };\n }\n }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n const badgesContainer = useMemo(() => {\n const badges = [];\n if (!isNil(topLeftBadgeProps)) {\n badges.push(\n <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n <AvatarBadge size={size} {...topLeftBadgeProps} />\n </div>\n );\n }\n if (!isNil(topRightBadgeProps)) {\n badges.push(\n <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n <AvatarBadge size={size} {...topRightBadgeProps} />\n </div>\n );\n }\n if (!isNil(bottomLeftBadgeProps)) {\n badges.push(\n <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n </div>\n );\n }\n if (!isNil(bottomRightBadgeProps)) {\n badges.push(\n <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n <AvatarBadge size={size} {...bottomRightBadgeProps} />\n </div>\n );\n }\n\n return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n const defaultTabIndex = useMemo(() => {\n if (!disabled && (onClick || overrideTooltipProps?.content)) {\n return 0;\n }\n return -1;\n }, [disabled, onClick, overrideTooltipProps?.content]);\n\n const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n const clickHandler = useCallback(\n (event: React.MouseEvent | React.KeyboardEvent) => {\n event.preventDefault();\n if (onClick) {\n onClick(event, id);\n }\n },\n [onClick, id]\n );\n\n return (\n <div\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n className={cx(styles.avatar, styles[size], className)}\n style={sizeStyle}\n >\n <ClickableWrapper\n isClickable={!!onClick}\n clickableProps={{\n onClick: clickHandler,\n tabIndex: \"-1\",\n className: styles.clickableWrapper\n }}\n >\n <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n <div\n className={cx(\n styles.circle,\n getStyle(styles, camelCase(\"circle--\" + type)),\n {\n [styles.disabled]: disabled,\n [styles.square]: square,\n [styles.withoutBorder]: withoutBorder\n },\n avatarContentWrapperClassName\n )}\n aria-hidden={ariaHidden}\n tabIndex={overrideTabIndex}\n style={{ ...backgroundColorStyle }}\n >\n <AvatarContent\n type={type}\n size={size}\n src={src}\n icon={icon}\n text={text}\n ariaLabel={ariaLabel}\n role={role}\n textClassName={textClassName}\n />\n </div>\n {badgesContainer}\n </Tooltip>\n </ClickableWrapper>\n </div>\n );\n};\n\ninterface AvatarStaticProps {\n types: typeof AvatarTypeEnum;\n sizes: typeof AvatarSizeEnum;\n colors: typeof ElementAllowedColorEnum;\n backgroundColors: typeof ElementAllowedColorEnum;\n}\n\nexport default withStaticProps<AvatarProps, AvatarStaticProps>(Avatar, {\n types: AvatarTypeEnum,\n sizes: AvatarSizeEnum,\n colors: ElementAllowedColorEnum,\n backgroundColors: ElementAllowedColorEnum\n});\n"],"names":["withStaticProps","_ref","id","_ref$type","type","className","avatarContentWrapperClassName","_ref$textClassName","textClassName","_ref$size","size","src","icon","text","tooltipProps","ariaLabel","_ref$withoutTooltip","withoutTooltip","role","_ref$backgroundColor","backgroundColor","square","disabled","tabIndex","_ref$ariaHidden","ariaHidden","topLeftBadgeProps","topRightBadgeProps","bottomLeftBadgeProps","bottomRightBadgeProps","_ref$withoutBorder","withoutBorder","_ref$customSize","customSize","_ref$customBackground","customBackgroundColor","onClick","dataTestId","backgroundColorStyle","useMemo","getElementColor","sizeStyle","height","width","overrideTooltipProps","Object","assign","content","badgesContainer","badges","isNil","push","React","key","cx","styles","badge","badgeTopLeft","createElement","AvatarBadge","badgeTopRight","badgeBottomLeft","badgeBottomRight","length","defaultTabIndex","overrideTabIndex","clickHandler","useCallback","event","preventDefault","getTestId","ComponentDefaultTestId","AVATAR","avatar","style","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent","types","AvatarTypeEnum","sizes","AvatarSizeEnum","colors","ElementAllowedColorEnum","backgroundColors"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { AriaRole, useCallback, useMemo } from \"react\";\nimport { isNil } from \"lodash-es\";\nimport { ElementAllowedColor as ElementAllowedColorEnum } from \"../../utils/colors-vars-map\";\nimport { ElementAllowedColor, getElementColor } from \"../../types/Colors\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport AvatarBadge, { AvatarBadgeProps } from \"./AvatarBadge\";\nimport AvatarContent from \"./AvatarContent\";\nimport Tooltip, { TooltipProps } from \"../Tooltip/Tooltip\";\nimport ClickableWrapper from \"../Clickable/ClickableWrapper\";\nimport { SubIcon, VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Avatar.module.scss\";\n\nexport interface AvatarProps extends VibeComponentProps {\n /**\n * The image source for the avatar.\n */\n src?: string;\n /**\n * The text displayed inside the avatar.\n */\n text?: string;\n /**\n * Props passed to the Tooltip component. See full options in the [Tooltip documentation](https://vibe.monday.com/?path=/docs/components-tooltip--docs).\n */\n tooltipProps?: Partial<TooltipProps>;\n /**\n * The ARIA label of the avatar.\n */\n ariaLabel?: string;\n /**\n * If true, the tooltip is disabled.\n */\n withoutTooltip?: boolean;\n /**\n * The icon displayed inside the avatar.\n */\n icon?: SubIcon;\n /**\n * The type of the avatar.\n */\n type?: AvatarType;\n /**\n * Class name applied to the text inside the avatar.\n */\n textClassName?: string;\n /**\n * Class name applied to the avatar content wrapper.\n */\n avatarContentWrapperClassName?: string;\n /**\n * The background color of the avatar.\n */\n backgroundColor?: ElementAllowedColor;\n /**\n * A custom background color.\n */\n customBackgroundColor?: string;\n /**\n * The ARIA role of the avatar.\n */\n role?: AriaRole;\n /**\n * The size of the avatar.\n */\n size?: AvatarSize;\n /**\n * A custom size in pixels.\n */\n customSize?: number;\n /**\n * The tab index of the avatar.\n */\n tabIndex?: number;\n /**\n * If true, the avatar is hidden from assistive technologies.\n */\n ariaHidden?: boolean;\n /**\n * If true, the avatar is disabled.\n */\n disabled?: boolean;\n /**\n * If true, renders the avatar as a square instead of a circle.\n */\n square?: boolean;\n /**\n * Props for the top-left badge.\n */\n topLeftBadgeProps?: AvatarBadgeProps;\n /**\n * Props for the top-right badge.\n */\n topRightBadgeProps?: AvatarBadgeProps;\n /**\n * Props for the bottom-left badge.\n */\n bottomLeftBadgeProps?: AvatarBadgeProps;\n /**\n * Props for the bottom-right badge.\n */\n bottomRightBadgeProps?: AvatarBadgeProps;\n /**\n * If true, removes the avatar's border.\n */\n withoutBorder?: boolean;\n /**\n * Callback fired when the avatar is clicked.\n */\n onClick?: (event: React.MouseEvent | React.KeyboardEvent, avatarId: string) => void;\n}\n\nconst Avatar = ({\n id,\n type = \"text\",\n className,\n avatarContentWrapperClassName,\n textClassName = \"\",\n size = \"large\",\n src,\n icon,\n text,\n tooltipProps,\n ariaLabel,\n withoutTooltip = false,\n role,\n backgroundColor = \"chili-blue\",\n square,\n disabled,\n tabIndex,\n ariaHidden = false,\n topLeftBadgeProps,\n topRightBadgeProps,\n bottomLeftBadgeProps,\n bottomRightBadgeProps,\n withoutBorder = false,\n customSize = null,\n customBackgroundColor = null,\n onClick,\n \"data-testid\": dataTestId\n}: AvatarProps) => {\n const backgroundColorStyle = useMemo(() => {\n if (customBackgroundColor) return { backgroundColor: customBackgroundColor };\n return src ? {} : { backgroundColor: getElementColor(backgroundColor) };\n }, [src, backgroundColor, customBackgroundColor]);\n const sizeStyle = useMemo(() => {\n return customSize ? { height: customSize, width: customSize } : {};\n }, [customSize]);\n\n const overrideTooltipProps = useMemo(() => {\n if (withoutTooltip) return undefined;\n\n if (tooltipProps) {\n return { content: ariaLabel, ...tooltipProps };\n } else {\n return { content: ariaLabel };\n }\n }, [ariaLabel, tooltipProps, withoutTooltip]);\n\n const badgesContainer = useMemo(() => {\n const badges = [];\n if (!isNil(topLeftBadgeProps)) {\n badges.push(\n <div key=\"top-left-badge\" className={cx(styles.badge, styles.badgeTopLeft)}>\n <AvatarBadge size={size} {...topLeftBadgeProps} />\n </div>\n );\n }\n if (!isNil(topRightBadgeProps)) {\n badges.push(\n <div key=\"top-right-badge\" className={cx(styles.badge, styles.badgeTopRight)}>\n <AvatarBadge size={size} {...topRightBadgeProps} />\n </div>\n );\n }\n if (!isNil(bottomLeftBadgeProps)) {\n badges.push(\n <div key=\"bottom-left-badge\" className={cx(styles.badge, styles.badgeBottomLeft)}>\n <AvatarBadge size={size} {...bottomLeftBadgeProps} />\n </div>\n );\n }\n if (!isNil(bottomRightBadgeProps)) {\n badges.push(\n <div key=\"bottom-right-bade\" className={cx(styles.badge, styles.badgeBottomRight)}>\n <AvatarBadge size={size} {...bottomRightBadgeProps} />\n </div>\n );\n }\n\n return badges.length > 0 ? <div className={cx(styles.badges)}>{badges}</div> : null;\n }, [size, topLeftBadgeProps, topRightBadgeProps, bottomLeftBadgeProps, bottomRightBadgeProps]);\n\n const defaultTabIndex = useMemo(() => {\n if (!disabled && (onClick || overrideTooltipProps?.content)) {\n return 0;\n }\n return -1;\n }, [disabled, onClick, overrideTooltipProps?.content]);\n\n const overrideTabIndex = tabIndex ?? defaultTabIndex;\n\n const clickHandler = useCallback(\n (event: React.MouseEvent | React.KeyboardEvent) => {\n event.preventDefault();\n if (onClick) {\n onClick(event, id);\n }\n },\n [onClick, id]\n );\n\n return (\n <div\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR, id)}\n className={cx(styles.avatar, styles[size], className)}\n style={sizeStyle}\n >\n <ClickableWrapper\n isClickable={!!onClick}\n clickableProps={{\n onClick: clickHandler,\n tabIndex: \"-1\",\n className: styles.clickableWrapper\n }}\n >\n <Tooltip showTrigger={[\"focus\", \"mouseenter\"]} hideTrigger={[\"blur\", \"mouseleave\"]} {...overrideTooltipProps}>\n <div\n className={cx(\n styles.circle,\n getStyle(styles, camelCase(\"circle--\" + type)),\n {\n [styles.disabled]: disabled,\n [styles.square]: square,\n [styles.withoutBorder]: withoutBorder\n },\n avatarContentWrapperClassName\n )}\n aria-hidden={ariaHidden}\n tabIndex={overrideTabIndex}\n style={{ ...backgroundColorStyle }}\n >\n <AvatarContent\n type={type}\n size={size}\n src={src}\n icon={icon}\n text={text}\n ariaLabel={ariaLabel}\n role={role}\n textClassName={textClassName}\n />\n </div>\n {badgesContainer}\n </Tooltip>\n </ClickableWrapper>\n </div>\n );\n};\n\ninterface AvatarStaticProps {\n types: typeof AvatarTypeEnum;\n sizes: typeof AvatarSizeEnum;\n colors: typeof ElementAllowedColorEnum;\n backgroundColors: typeof ElementAllowedColorEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<AvatarProps, AvatarStaticProps>(Avatar, {\n types: AvatarTypeEnum,\n sizes: AvatarSizeEnum,\n colors: ElementAllowedColorEnum,\n backgroundColors: ElementAllowedColorEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","id","_ref$type","type","className","avatarContentWrapperClassName","_ref$textClassName","textClassName","_ref$size","size","src","icon","text","tooltipProps","ariaLabel","_ref$withoutTooltip","withoutTooltip","role","_ref$backgroundColor","backgroundColor","square","disabled","tabIndex","_ref$ariaHidden","ariaHidden","topLeftBadgeProps","topRightBadgeProps","bottomLeftBadgeProps","bottomRightBadgeProps","_ref$withoutBorder","withoutBorder","_ref$customSize","customSize","_ref$customBackground","customBackgroundColor","onClick","dataTestId","backgroundColorStyle","useMemo","getElementColor","sizeStyle","height","width","overrideTooltipProps","Object","assign","content","badgesContainer","badges","isNil","push","React","key","cx","styles","badge","badgeTopLeft","createElement","AvatarBadge","badgeTopRight","badgeBottomLeft","badgeBottomRight","length","defaultTabIndex","overrideTabIndex","clickHandler","useCallback","event","preventDefault","getTestId","ComponentDefaultTestId","AVATAR","avatar","style","ClickableWrapper","isClickable","clickableProps","clickableWrapper","Tooltip","showTrigger","hideTrigger","circle","getStyle","camelCase","_defineProperty","AvatarContent","types","AvatarTypeEnum","sizes","AvatarSizeEnum","colors","ElementAllowedColorEnum","backgroundColors"],"mappings":"mzBAoHA,IA4JeA,EAAAA,GA5JA,SAAHC,GA4BM,IA3BhBC,EAAED,EAAFC,GAAEC,EAAAF,EACFG,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAASJ,EAATI,UACAC,EAA6BL,EAA7BK,8BAA6BC,EAAAN,EAC7BO,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAR,EAClBS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,EAAGV,EAAHU,IACAC,EAAIX,EAAJW,KACAC,EAAIZ,EAAJY,KACAC,EAAYb,EAAZa,aACAC,EAASd,EAATc,UAASC,EAAAf,EACTgB,eAAAA,OAAiB,IAAHD,GAAQA,EACtBE,EAAIjB,EAAJiB,KAAIC,EAAAlB,EACJmB,gBAAAA,OAAkB,IAAHD,EAAG,aAAYA,EAC9BE,EAAMpB,EAANoB,OACAC,EAAQrB,EAARqB,SACAC,EAAQtB,EAARsB,SAAQC,EAAAvB,EACRwB,WAAAA,OAAa,IAAHD,GAAQA,EAClBE,EAAiBzB,EAAjByB,kBACAC,EAAkB1B,EAAlB0B,mBACAC,EAAoB3B,EAApB2B,qBACAC,EAAqB5B,EAArB4B,sBAAqBC,EAAA7B,EACrB8B,cAAAA,OAAgB,IAAHD,GAAQA,EAAAE,EAAA/B,EACrBgC,WAAAA,OAAa,IAAHD,EAAG,KAAIA,EAAAE,EAAAjC,EACjBkC,sBAAAA,OAAwB,IAAHD,EAAG,KAAIA,EAC5BE,EAAOnC,EAAPmC,QACeC,EAAUpC,EAAzB,eAEMqC,EAAuBC,GAAQ,WACnC,OAAIJ,EAA8B,CAAEf,gBAAiBe,GAC9CxB,EAAM,CAAA,EAAK,CAAES,gBAAiBoB,EAAgBpB,GACtD,GAAE,CAACT,EAAKS,EAAiBe,IACpBM,GAAYF,GAAQ,WACxB,OAAON,EAAa,CAAES,OAAQT,EAAYU,MAAOV,GAAe,EAClE,GAAG,CAACA,IAEEW,GAAuBL,GAAQ,WACnC,IAAItB,EAEJ,OAAIH,EACF+B,OAAAC,OAAA,CAASC,QAAShC,GAAcD,GAEzB,CAAEiC,QAAShC,EAErB,GAAE,CAACA,EAAWD,EAAcG,IAEvB+B,GAAkBT,GAAQ,WAC9B,IAAMU,EAAS,GA8Bf,OA7BKC,EAAMxB,IACTuB,EAAOE,KACLC,uBAAKC,IAAI,iBAAiBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOE,eAC3DL,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUgB,MAI9BwB,EAAMvB,IACTsB,EAAOE,KACLC,uBAAKC,IAAI,kBAAkBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOK,gBAC5DR,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUiB,MAI9BuB,EAAMtB,IACTqB,EAAOE,KACLC,uBAAKC,IAAI,oBAAoBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOM,kBAC9DT,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUkB,MAI9BsB,EAAMrB,IACToB,EAAOE,KACLC,uBAAKC,IAAI,oBAAoBhD,UAAWiD,EAAGC,EAAOC,MAAOD,EAAOO,mBAC9DV,EAACM,cAAAC,EAAYd,OAAAC,OAAA,CAAApC,KAAMA,GAAUmB,MAK5BoB,EAAOc,OAAS,EAAIX,EAAKM,cAAA,MAAA,CAAArD,UAAWiD,EAAGC,EAAON,SAAUA,GAAgB,IACjF,GAAG,CAACvC,EAAMgB,EAAmBC,EAAoBC,EAAsBC,IAEjEmC,GAAkBzB,GAAQ,WAC9B,OAAKjB,IAAac,KAAWQ,gBAAAA,GAAsBG,UAG3C,EAFC,CAGV,GAAE,CAACzB,EAAUc,EAASQ,gBAAAA,GAAsBG,UAEvCkB,GAAmB1C,QAAAA,EAAYyC,GAE/BE,GAAeC,GACnB,SAACC,GACCA,EAAMC,iBACFjC,GACFA,EAAQgC,EAAOlE,EAEnB,GACA,CAACkC,EAASlC,IAGZ,OACEkD,EAAAM,cAAA,MAAA,CACExD,GAAIA,EACS,cAAAmC,GAAciC,EAAUC,EAAuBC,OAAQtE,GACpEG,UAAWiD,EAAGC,EAAOkB,OAAQlB,EAAO7C,GAAOL,GAC3CqE,MAAOjC,IAEPW,EAACM,cAAAiB,GACCC,cAAexC,EACfyC,eAAgB,CACdzC,QAAS8B,GACT3C,SAAU,KACVlB,UAAWkD,EAAOuB,mBAGpB1B,EAAAM,cAACqB,EAAQlC,OAAAC,OAAA,CAAAkC,YAAa,CAAC,QAAS,cAAeC,YAAa,CAAC,OAAQ,eAAmBrC,IACtFQ,EAAAM,cAAA,MAAA,CACErD,UAAWiD,EACTC,EAAO2B,OACPC,EAAS5B,EAAQ6B,EAAU,WAAahF,IAAMiF,EAAAA,EAAAA,EAAA,CAAA,EAE3C9B,EAAOjC,SAAWA,GAClBiC,EAAOlC,OAASA,GAChBkC,EAAOxB,cAAgBA,GAE1BzB,GACD,cACYmB,EACbF,SAAU0C,GACVS,MAAK7B,OAAAC,OAAA,CAAA,EAAOR,IAEZc,EAAAM,cAAC4B,EAAa,CACZlF,KAAMA,EACNM,KAAMA,EACNC,IAAKA,EACLC,KAAMA,EACNC,KAAMA,EACNE,UAAWA,EACXG,KAAMA,EACNV,cAAeA,KAGlBwC,KAKX,GASwF,CACtFuC,MAAOC,EACPC,MAAOC,EACPC,OAAQC,EACRC,iBAAkBD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as s}from"../../../_virtual/_tslib.js";import t from"react";import{camelCase as o}from"lodash-es";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as e,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import m from"../Icon/CustomSvgIcon/CustomSvgIcon.js";import{AvatarSize as c}from"./AvatarConstants.js";import l from"./AvatarBadge.module.scss.js";import d from"../Icon/Icon.js";import{
|
|
1
|
+
import{__rest as s}from"../../../_virtual/_tslib.js";import t from"react";import{camelCase as o}from"lodash-es";import{getStyle as a}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as e,ComponentDefaultTestId as r}from"../../tests/testIds.js";import i from"classnames";import m from"../Icon/CustomSvgIcon/CustomSvgIcon.js";import{AvatarSize as c}from"./AvatarConstants.js";import l from"./AvatarBadge.module.scss.js";import d from"../Icon/Icon.js";import{withStaticPropsWithoutForwardRef as n}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";var p=n((function(c){var n=c.src,p=c.icon,f=c.tabIndex,j=void 0===f?0:f,u=c.className,v=c.size,I=void 0===v?"large":v,b=c.id,g=c["data-testid"],A=s(c,["src","icon","tabIndex","className","size","id","data-testid"]),C=i(a(l,o("badge--"+I)),u),N=g||e(r.AVATAR_BADGE,b);return p?t.createElement(d,Object.assign({icon:p,className:C},A,{"data-testid":N})):n?t.createElement(m,Object.assign({src:n,className:C,clickable:-1===j},A,{"data-testid":N})):null}),{sizes:c});export{p as default};
|
|
2
2
|
//# sourceMappingURL=AvatarBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBadge.js","sources":["../../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport CustomSvgIcon from \"../Icon/CustomSvgIcon/CustomSvgIcon\";\nimport { AvatarSize as AvatarSizeEnum } from \"./AvatarConstants\";\nimport { AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport Icon from \"../Icon/Icon\";\nimport { VibeComponentProps, SubIcon,
|
|
1
|
+
{"version":3,"file":"AvatarBadge.js","sources":["../../../../../src/components/Avatar/AvatarBadge.tsx"],"sourcesContent":["import React from \"react\";\nimport { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport CustomSvgIcon from \"../Icon/CustomSvgIcon/CustomSvgIcon\";\nimport { AvatarSize as AvatarSizeEnum } from \"./AvatarConstants\";\nimport { AvatarSize } from \"./Avatar.types\";\nimport styles from \"./AvatarBadge.module.scss\";\nimport Icon from \"../Icon/Icon\";\nimport { VibeComponentProps, SubIcon, withStaticPropsWithoutForwardRef } from \"../../types\";\n\nexport interface AvatarBadgeProps extends VibeComponentProps {\n /**\n * The image source for the badge.\n */\n src?: string;\n /**\n * The icon displayed inside the badge.\n */\n icon?: SubIcon;\n /**\n * The tab index of the badge.\n */\n tabIndex?: string | number;\n /**\n * The size of the badge.\n */\n size?: AvatarSize;\n}\n\nconst AvatarBadge = ({\n src,\n icon,\n tabIndex = 0,\n className,\n size = \"large\",\n id,\n \"data-testid\": dataTestId,\n ...otherProps\n}: AvatarBadgeProps) => {\n const classNames = cx(getStyle(styles, camelCase(\"badge--\" + size)), className);\n const testId = dataTestId || getTestId(ComponentDefaultTestId.AVATAR_BADGE, id);\n\n if (icon) {\n return <Icon icon={icon} className={classNames} {...otherProps} data-testid={testId} />;\n }\n\n return src ? (\n <CustomSvgIcon src={src} className={classNames} clickable={tabIndex === -1} {...otherProps} data-testid={testId} />\n ) : null;\n};\n\ninterface AvatarBadgeStaticProps {\n sizes: typeof AvatarSizeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<AvatarBadgeProps, AvatarBadgeStaticProps>(AvatarBadge, {\n sizes: AvatarSizeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_a","src","icon","_a$tabIndex","tabIndex","className","_a$size","size","id","dataTestId","otherProps","__rest","classNames","cx","getStyle","styles","camelCase","testId","getTestId","ComponentDefaultTestId","AVATAR_BADGE","React","createElement","Icon","Object","assign","CustomSvgIcon","clickable","sizes","AvatarSizeEnum"],"mappings":"2kBA+BA,IA0BeA,EAAAA,GA1BK,SAACC,OACnBC,IAAAA,IACAC,IAAAA,KAAIC,IACJC,SAAAA,OAAW,IAAHD,EAAG,EAACA,EACZE,IAAAA,UAASC,IACTC,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EACdE,IAAAA,GACeC,IAAf,eACGC,EARgBC,EAAAX,EAAA,CAAA,MAAA,OAAA,WAAA,YAAA,OAAA,KAAA,gBAUbY,EAAaC,EAAGC,EAASC,EAAQC,EAAU,UAAYT,IAAQF,GAC/DY,EAASR,GAAcS,EAAUC,EAAuBC,aAAcZ,GAE5E,OAAIN,EACKmB,EAACC,cAAAC,EAAKC,OAAAC,OAAA,CAAAvB,KAAMA,EAAMG,UAAWO,GAAgBF,EAAyB,CAAA,cAAAO,KAGxEhB,EACLoB,EAACC,cAAAI,EAAcF,OAAAC,OAAA,CAAAxB,IAAKA,EAAKI,UAAWO,EAAYe,WAAyB,IAAdvB,GAAqBM,EAAU,CAAA,cAAeO,KACvG,IACN,GAMuG,CACrGW,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{camelCase as t}from"lodash-es";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as s,ComponentDefaultTestId as a}from"../../tests/testIds.js";import r from"classnames";import o from"react";import{AvatarSize as i,AvatarType as m}from"./AvatarConstants.js";import l from"../Icon/Icon.js";import{
|
|
1
|
+
import{camelCase as t}from"lodash-es";import{getStyle as e}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as s,ComponentDefaultTestId as a}from"../../tests/testIds.js";import r from"classnames";import o from"react";import{AvatarSize as i,AvatarType as m}from"./AvatarConstants.js";import l from"../Icon/Icon.js";import{withStaticPropsWithoutForwardRef as c}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import n from"./AvatarContent.module.scss.js";var d=c((function(i){var m=i.type,c=void 0===m?"text":m,d=i.src,p=i.icon,f=i.text,u=i.ariaLabel,A=i.role,N=i.size,T=void 0===N?"large":N,v=i.textClassName,j=void 0===v?"":v,C=i.id,E=i["data-testid"],x=r(e(n,t("content_"+c)),e(n,t("content_"+c+"--"+T)));switch(c){case"img":return o.createElement("img",{role:A,alt:u,src:d,className:x,id:C,"data-testid":E||s(a.AVATAR_CONTENT,C)});case"icon":return o.createElement(l,{icon:p,"aria-label":u,className:x,ariaHidden:!1,id:C,"data-testid":E||s(a.AVATAR_CONTENT,C)});case"text":return o.createElement("span",{"aria-label":u,role:A,className:r(x,j),id:C,"data-testid":E||s(a.AVATAR_CONTENT,C)},f);default:return null}}),{sizes:i,types:m});export{d as default};
|
|
2
2
|
//# sourceMappingURL=AvatarContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarContent.js","sources":["../../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport Icon from \"../Icon/Icon\";\nimport { SubIcon, VibeComponentProps,
|
|
1
|
+
{"version":3,"file":"AvatarContent.js","sources":["../../../../../src/components/Avatar/AvatarContent.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React from \"react\";\nimport { AvatarSize as AvatarSizeEnum, AvatarType as AvatarTypeEnum } from \"./AvatarConstants\";\nimport { AvatarSize, AvatarType } from \"./Avatar.types\";\nimport Icon from \"../Icon/Icon\";\nimport { SubIcon, VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./AvatarContent.module.scss\";\n\nexport interface AvatarContentProps extends VibeComponentProps {\n /**\n * The image source when the type is set to `img`.\n */\n src?: string;\n /**\n * The type of content displayed inside the avatar.\n */\n type?: AvatarType;\n /**\n * The size of the avatar content.\n */\n size?: AvatarSize;\n /**\n * The ARIA role of the content.\n */\n role?: string;\n /**\n * The label of the content for accessibility.\n */\n ariaLabel?: string;\n /**\n * The icon displayed when the type is set to `icon`.\n */\n icon?: SubIcon;\n /**\n * Class name applied to the text content.\n */\n textClassName?: string;\n /**\n * The text displayed when the type is set to `text`.\n */\n text?: string;\n}\n\nconst AvatarContent = ({\n type = \"text\",\n src,\n icon,\n text,\n ariaLabel,\n role,\n size = \"large\",\n textClassName = \"\",\n id,\n \"data-testid\": dataTestId\n}: AvatarContentProps) => {\n const className = cx(\n getStyle(styles, camelCase(\"content_\" + type)),\n getStyle(styles, camelCase(\"content_\" + type + \"--\" + size))\n );\n switch (type) {\n case \"img\":\n return (\n <img\n role={role}\n alt={ariaLabel}\n src={src}\n className={className}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n />\n );\n case \"icon\":\n return (\n <Icon\n icon={icon}\n aria-label={ariaLabel}\n // role={role}\n className={className}\n ariaHidden={false}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n />\n );\n case \"text\":\n return (\n <span\n aria-label={ariaLabel}\n role={role}\n className={cx(className, textClassName)}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.AVATAR_CONTENT, id)}\n >\n {text}\n </span>\n );\n default:\n return null;\n }\n};\n\ninterface AvatarContentStaticProps {\n sizes: typeof AvatarSizeEnum;\n types: typeof AvatarTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<AvatarContentProps, AvatarContentStaticProps>(AvatarContent, {\n sizes: AvatarSizeEnum,\n types: AvatarTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","_ref$type","type","src","icon","text","ariaLabel","role","_ref$size","size","_ref$textClassName","textClassName","id","dataTestId","className","cx","getStyle","styles","camelCase","React","createElement","alt","getTestId","ComponentDefaultTestId","AVATAR_CONTENT","Icon","ariaHidden","sizes","AvatarSizeEnum","types","AvatarTypeEnum"],"mappings":"kfA8CA,IA8DeA,EAAAA,GA9DO,SAAHC,GAWM,IAAAC,EAAAD,EAVvBE,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EACbE,EAAGH,EAAHG,IACAC,EAAIJ,EAAJI,KACAC,EAAIL,EAAJK,KACAC,EAASN,EAATM,UACAC,EAAIP,EAAJO,KAAIC,EAAAR,EACJS,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAV,EACdW,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAClBE,EAAEZ,EAAFY,GACeC,EAAUb,EAAzB,eAEMc,EAAYC,EAChBC,EAASC,EAAQC,EAAU,WAAahB,IACxCc,EAASC,EAAQC,EAAU,WAAahB,EAAO,KAAOO,KAExD,OAAQP,GACN,IAAK,MACH,OACEiB,EAAAC,cAAA,MAAA,CACEb,KAAMA,EACNc,IAAKf,EACLH,IAAKA,EACLW,UAAWA,EACXF,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,gBAACM,EAAI,CACHrB,KAAMA,eACME,EAEZQ,UAAWA,EACXY,YAAY,EACZd,GAAIA,EAAE,cACOC,GAAcS,EAAUC,EAAuBC,eAAgBZ,KAGlF,IAAK,OACH,OACEO,EAAAC,cAAA,OAAA,CAAA,aACcd,EACZC,KAAMA,EACNO,UAAWC,EAAGD,EAAWH,GACzBC,GAAIA,EACS,cAAAC,GAAcS,EAAUC,EAAuBC,eAAgBZ,IAE3EP,GAGP,QACE,OAAO,KAEb,GAO6G,CAC3GsB,MAAOC,EACPC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import s from"classnames";import o from"./Indicator.module.scss.js";import{IndicatorColor as r}from"./IndicatorConstants.js";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{
|
|
1
|
+
import t from"react";import s from"classnames";import o from"./Indicator.module.scss.js";import{IndicatorColor as r}from"./IndicatorConstants.js";import{ComponentDefaultTestId as a}from"../../../tests/constants.js";import{withStaticPropsWithoutForwardRef as i}from"../../../types/withStaticProps.js";import"../../../utils/colors-vars-map.js";import{getTestId as m}from"../../../tests/testIds.js";var e=i((function(r){var i=r.color,e=r.id,c=r["data-testid"];return t.createElement("div",{className:s(o.indicator,o[void 0===i?"notification":i],r.className),"data-testid":c||m(a.INDICATOR,e)})}),{colors:r});export{e as default};
|
|
2
2
|
//# sourceMappingURL=Indicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Badge/Indicator/Indicator.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { IndicatorColor as IndicatorColorEnum } from \"./IndicatorConstants\";\nimport { IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { VibeComponentProps,
|
|
1
|
+
{"version":3,"file":"Indicator.js","sources":["../../../../../../src/components/Badge/Indicator/Indicator.tsx"],"sourcesContent":["import React from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Indicator.module.scss\";\nimport { IndicatorColor as IndicatorColorEnum } from \"./IndicatorConstants\";\nimport { IndicatorColor } from \"./Indicator.types\";\nimport { ComponentDefaultTestId } from \"../../../tests/constants\";\nimport { VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../../types\";\nimport { getTestId } from \"../../../tests/test-ids-utils\";\n\nexport interface IndicatorProps extends VibeComponentProps {\n /**\n * The color of the indicator.\n */\n color?: IndicatorColor;\n}\n\nconst Indicator = ({ color = \"notification\", className, id, \"data-testid\": dataTestId }: IndicatorProps) => {\n return (\n <div\n className={cx(styles.indicator, styles[color], className)}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.INDICATOR, id)}\n />\n );\n};\n\ninterface IndicatorStaticProps {\n colors: typeof IndicatorColorEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<IndicatorProps, IndicatorStaticProps>(Indicator, {\n colors: IndicatorColorEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","_ref$color","color","id","dataTestId","React","createElement","className","cx","styles","indicator","getTestId","ComponentDefaultTestId","INDICATOR","colors","IndicatorColorEnum"],"mappings":"4YAgBA,IAaeA,EAAAA,GAbG,SAAHC,GAA4F,IAAAC,EAAAD,EAAtFE,MAAmCC,EAAEH,EAAFG,GAAmBC,EAAUJ,EAAzB,eAC1D,OACEK,EAAAC,cAAA,MAAA,CACEC,UAAWC,EAAGC,EAAOC,UAAWD,OAHT,IAAHR,EAAG,eAAcA,GAAWD,EAATO,WAI1B,cAAAH,GAAcO,EAAUC,EAAuBC,UAAWV,IAG7E,GAMiG,CAC/FW,OAAQC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import e from"classnames";import{getTestId as r,ComponentDefaultTestId as a}from"../../tests/testIds.js";import{BreadcrumbsBarType as s}from"./BreadcrumbsConstants.js";import{
|
|
1
|
+
import t from"react";import e from"classnames";import{getTestId as r,ComponentDefaultTestId as a}from"../../tests/testIds.js";import{BreadcrumbsBarType as s}from"./BreadcrumbsConstants.js";import{withStaticPropsWithoutForwardRef as i}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import o from"./BreadcrumbsBar.module.scss.js";import n from"../../../icons/dist/react/NavigationChevronRight.js";var m=i((function(s){var i=s.children,m=s.type,l=void 0===m?"indication":m,c=s.id,d=s["data-testid"];return t.createElement("nav",{"aria-label":"Breadcrumb",className:e(o.breadcrumbsBar,s.className),id:c,"data-testid":d||r(a.BREADCRUMBS_BAR,c)},t.createElement("ol",null,i&&t.Children.map(i,(function(e,r){return t.isValidElement(e)?[r>0&&t.createElement(n,{className:o.separatorIcon,size:"14","aria-hidden":"true"}),t.cloneElement(e,Object.assign(Object.assign({},null==e?void 0:e.props),{isClickable:"indication"!==l}))]:null}))))}),{types:s});export{m as default};
|
|
2
2
|
//# sourceMappingURL=BreadcrumbsBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BreadcrumbsBar.js","sources":["../../../../../src/components/BreadcrumbsBar/BreadcrumbsBar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { NavigationChevronRight } from \"@vibe/icons\";\nimport { BreadcrumbsBarType as BreadcrumbsBarTypeEnum } from \"./BreadcrumbsConstants\";\nimport { BreadcrumbsBarType } from \"./Breadcrumbs.types\";\nimport { BreadcrumbItemProps } from \"./BreadcrumbItem/BreadcrumbItem\";\nimport {
|
|
1
|
+
{"version":3,"file":"BreadcrumbsBar.js","sources":["../../../../../src/components/BreadcrumbsBar/BreadcrumbsBar.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport cx from \"classnames\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport { NavigationChevronRight } from \"@vibe/icons\";\nimport { BreadcrumbsBarType as BreadcrumbsBarTypeEnum } from \"./BreadcrumbsConstants\";\nimport { BreadcrumbsBarType } from \"./Breadcrumbs.types\";\nimport { BreadcrumbItemProps } from \"./BreadcrumbItem/BreadcrumbItem\";\nimport { VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./BreadcrumbsBar.module.scss\";\nimport { BreadcrumbMenuProps } from \"./BreadcrumbMenu/BreadcrumbMenu\";\n\nexport interface BreadcrumbBarProps extends VibeComponentProps {\n /**\n * The type of the breadcrumb bar, determining if it is navigational or for indication only.\n */\n type: BreadcrumbsBarType;\n /**\n * The breadcrumb items displayed in the bar.\n */\n children:\n | ReactElement<BreadcrumbItemProps | BreadcrumbMenuProps>\n | ReactElement<BreadcrumbItemProps | BreadcrumbMenuProps>[];\n}\n\nconst BreadcrumbsBar = ({\n className,\n children,\n type = \"indication\",\n id,\n \"data-testid\": dataTestId\n}: BreadcrumbBarProps) => (\n <nav\n aria-label=\"Breadcrumb\"\n className={cx(styles.breadcrumbsBar, className)}\n id={id}\n data-testid={dataTestId || getTestId(ComponentDefaultTestId.BREADCRUMBS_BAR, id)}\n >\n <ol>\n {children &&\n React.Children.map(children, (child, index) =>\n React.isValidElement(child)\n ? [\n index > 0 && <NavigationChevronRight className={styles.separatorIcon} size=\"14\" aria-hidden=\"true\" />,\n React.cloneElement(child, {\n ...child?.props,\n isClickable: type !== \"indication\"\n })\n ]\n : null\n )}\n </ol>\n </nav>\n);\n\ninterface BreadcrumbsBarStaticProps {\n types: typeof BreadcrumbsBarTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<BreadcrumbBarProps, BreadcrumbsBarStaticProps>(BreadcrumbsBar, {\n types: BreadcrumbsBarTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","children","_ref$type","type","id","dataTestId","React","createElement","className","cx","styles","breadcrumbsBar","getTestId","ComponentDefaultTestId","BREADCRUMBS_BAR","Children","map","child","index","isValidElement","NavigationChevronRight","separatorIcon","size","cloneElement","Object","assign","props","isClickable","types","BreadcrumbsBarTypeEnum"],"mappings":"waAwBA,IAkCeA,EAAAA,GAlCQ,SAAHC,GAAA,IAElBC,EAAQD,EAARC,SAAQC,EAAAF,EACRG,KAAAA,OAAO,IAAHD,EAAG,aAAYA,EACnBE,EAAEJ,EAAFI,GACeC,EAAUL,EAAzB,eAAa,OAEbM,EACaC,cAAA,MAAA,CAAA,aAAA,aACXC,UAAWC,EAAGC,EAAOC,eARdX,EAATQ,WASEJ,GAAIA,EAAE,cACOC,GAAcO,EAAUC,EAAuBC,gBAAiBV,IAE7EE,EAAAC,cAAA,KAAA,KACGN,GACCK,EAAMS,SAASC,IAAIf,GAAU,SAACgB,EAAOC,GAAK,OACxCZ,EAAMa,eAAeF,GACjB,CACEC,EAAQ,GAAKZ,EAACC,cAAAa,GAAuBZ,UAAWE,EAAOW,cAAeC,KAAK,KAAI,cAAa,SAC5FhB,EAAMiB,aAAaN,EACdO,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAR,aAAK,EAALA,EAAOS,OACV,CAAAC,YAAsB,eAATxB,MAGjB,IAAI,KAGV,GAOuG,CAC7GyB,MAAOC"}
|
package/dist/mocked_classnames/src/components/Combobox/components/ComboboxOption/ComboboxOption.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import t,{useRef as n,useEffect as i,useCallback as r,useMemo as l}from"react";import s from"../../../Icon/Icon.js";import c from"../../../Tooltip/Tooltip.js";import a from"../../../../hooks/useIsOverflowing/useIsOverflowing.js";import{keyCodes as m}from"../../../../constants/keyCodes.js";import"../../../../constants/sizes.js";import{getOptionId as p}from"../../helpers.js";import{
|
|
1
|
+
import{defineProperty as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import e from"classnames";import t,{useRef as n,useEffect as i,useCallback as r,useMemo as l}from"react";import s from"../../../Icon/Icon.js";import c from"../../../Tooltip/Tooltip.js";import a from"../../../../hooks/useIsOverflowing/useIsOverflowing.js";import{keyCodes as m}from"../../../../constants/keyCodes.js";import"../../../../constants/sizes.js";import{getOptionId as p}from"../../helpers.js";import{withStaticPropsWithoutForwardRef as f}from"../../../../types/withStaticProps.js";import"../../../../utils/colors-vars-map.js";import{ComboboxOptionIconType as u}from"../ComboboxConstants.js";import{getTestId as d,ComponentDefaultTestId as v}from"../../../../tests/testIds.js";import b from"./ComboboxOption.module.scss.js";var h=f((function(f){var u=f.index,h=f.option,y=f.className,O=f.isActive,I=f.visualFocus,j=f.scrollRef,g=f.scrollOffset,T=void 0===g?100:g,C=f.onOptionClick,E=f.onOptionLeave,k=f.onOptionHover,N=f.optionLineHeight,S=f.shouldScrollWhenActive,w=void 0===S||S,x=f.optionRenderer,L=void 0===x?null:x,P=h.id,H=h.leftIcon,R=h.leftIconType,z=h.rightIcon,A=h.rightIconType,B=h.label,F=h.iconSize,M=void 0===F?18:F,_=h.disabled,W=h.selected,D=h.ariaLabel,K=h.belongToCategory,V=void 0!==K&&K,X=h.tooltipContent,q=n(null),G=n(),J=a({ref:G});i((function(){var o,e=q.current;I&&e&&w&&((null==j?void 0:j.current)&&e?j.current.scrollTop=e.offsetTop-T:null===(o=null==e?void 0:e.scrollIntoView)||void 0===o||o.call(e,{behaviour:"smooth"}))}),[q,I,w,j,T,V]);var Q=function(o,n,i){return"renderer"===n?o(e(b.optionIcon,i)):t.createElement(s,{className:e(b.optionIcon,i),iconType:"font",icon:o,iconSize:M,ignoreFocusStyle:!0})},U=r((function(o){_||C(o,u,h,!0)}),[u,h,C,_]),Y=r((function(o){_||E(o,u,h,!0)}),[u,h,E,_]),Z=r((function(o){_||k(o,u,h,!0)}),[u,h,k,_]),$=r((function(o){o.key!==m.ENTER&&o.key!==m.SPACE||C(o,u,h,!1)}),[C,u,h]);X||(X=J?B:null);var oo=l((function(){return L&&L(h)}),[L,h]),eo=t.createElement(t.Fragment,null,H&&Q(H,R,b.left),t.createElement("div",{ref:G,className:e(b.optionLabel)},B),z&&Q(z,A,""));return t.createElement(c,{content:X,hideWhenReferenceHidden:!0},t.createElement("div",{ref:q,key:P||B,"aria-level":V?2:1,"aria-selected":O,"aria-label":D||B,id:p(P,u),"data-testid":d(v.COMBOBOX_OPTION,u),onMouseEnter:Z,onClick:U,onKeyDown:$,onMouseLeave:Y,className:e(b.comboboxOption,y,o(o(o(o({},b.disabled,_),b.selected,W),b.active,O),b.activeOutline,I)),style:{height:N}},oo||eo))}),{iconTypes:u});export{h as default};
|
|
2
2
|
//# sourceMappingURL=ComboboxOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOption.js","sources":["../../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport useIsOverflowing from \"../../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { keyCodes } from \"../../../../constants\";\nimport { getOptionId } from \"../../helpers\";\nimport { SubIcon,
|
|
1
|
+
{"version":3,"file":"ComboboxOption.js","sources":["../../../../../../../src/components/Combobox/components/ComboboxOption/ComboboxOption.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport React, { RefObject, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport Icon from \"../../../Icon/Icon\";\nimport Tooltip from \"../../../Tooltip/Tooltip\";\nimport useIsOverflowing from \"../../../../hooks/useIsOverflowing/useIsOverflowing\";\nimport { keyCodes } from \"../../../../constants\";\nimport { getOptionId } from \"../../helpers\";\nimport { SubIcon, withStaticPropsWithoutForwardRef } from \"../../../../types\";\nimport {\n ComboboxOptionIconType as ComboboxOptionIconTypeEnum,\n IComboboxOption,\n IComboboxOptionEvents\n} from \"../ComboboxConstants\";\nimport { ComboboxOptionIconType } from \"../../Combobox.types\";\nimport { ComponentDefaultTestId, getTestId } from \"../../../../tests/test-ids-utils\";\nimport styles from \"./ComboboxOption.module.scss\";\n\nexport interface ComboboxOptionProps extends IComboboxOptionEvents {\n /**\n * The index of the option in the list.\n */\n index?: number;\n /**\n * The option data containing label, icons, and other properties.\n */\n option?: IComboboxOption;\n /**\n * Class name applied to the option element.\n */\n className?: string;\n /**\n * If true, the option is currently active.\n */\n isActive?: boolean;\n /**\n * If true, the option has visual focus.\n */\n visualFocus?: boolean;\n /**\n * A reference to the scroll container.\n */\n scrollRef?: RefObject<HTMLElement>;\n /**\n * The amount of offset when scrolling to the active item.\n */\n scrollOffset?: number;\n /**\n * The height of each option.\n */\n optionLineHeight?: number;\n /**\n * If true, scrolls to the active option when it is selected.\n */\n shouldScrollWhenActive?: boolean;\n /**\n * Custom renderer for the option content.\n */\n optionRenderer?: (option: IComboboxOption) => JSX.Element;\n}\n\nconst ComboboxOption = ({\n index,\n option,\n className,\n isActive,\n visualFocus,\n scrollRef,\n scrollOffset = 100,\n onOptionClick,\n onOptionLeave,\n onOptionHover,\n optionLineHeight,\n shouldScrollWhenActive = true,\n optionRenderer = null\n}: ComboboxOptionProps) => {\n const {\n id,\n leftIcon,\n leftIconType,\n rightIcon,\n rightIconType,\n label,\n iconSize = 18,\n disabled,\n selected,\n ariaLabel,\n belongToCategory = false\n } = option;\n let { tooltipContent } = option;\n\n const ref = useRef(null);\n const labelRef = useRef();\n\n const isOptionOverflowing = useIsOverflowing({ ref: labelRef });\n\n useEffect(() => {\n const element = ref.current;\n if (visualFocus && element && shouldScrollWhenActive) {\n if (scrollRef?.current && element) {\n // not supported with virtualized atm, need their scrollRef (element with overflow-y auto that has the scroll)\n scrollRef.current.scrollTop = element.offsetTop - scrollOffset;\n } else {\n element?.scrollIntoView?.({ behaviour: \"smooth\" });\n }\n }\n }, [ref, visualFocus, shouldScrollWhenActive, scrollRef, scrollOffset, belongToCategory]);\n\n const renderIcon = (\n icon: SubIcon | ((className: string) => JSX.Element),\n iconType: ComboboxOptionIconType,\n className: string\n ) => {\n if (iconType === \"renderer\") {\n return (icon as (className: string) => JSX.Element)(cx(styles.optionIcon, className));\n }\n\n return (\n <Icon\n className={cx(styles.optionIcon, className)}\n iconType=\"font\"\n icon={icon as SubIcon}\n iconSize={iconSize}\n ignoreFocusStyle\n />\n );\n };\n\n const onClick = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionClick(event, index, option, true);\n },\n [index, option, onOptionClick, disabled]\n );\n\n const onMouseLeave = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionLeave(event, index, option, true);\n },\n [index, option, onOptionLeave, disabled]\n );\n\n const onMouseEnter = useCallback(\n (event: React.MouseEvent) => {\n if (disabled) return;\n onOptionHover(event, index, option, true);\n },\n [index, option, onOptionHover, disabled]\n );\n\n const onKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === keyCodes.ENTER || event.key === keyCodes.SPACE) {\n onOptionClick(event, index, option, false);\n }\n },\n [onOptionClick, index, option]\n );\n if (!tooltipContent) {\n tooltipContent = isOptionOverflowing ? label : null;\n }\n\n const optionRendererValue = useMemo(() => optionRenderer && optionRenderer(option), [optionRenderer, option]);\n\n const optionValue = (\n <>\n {leftIcon && renderIcon(leftIcon, leftIconType, styles.left)}\n <div ref={labelRef} className={cx(styles.optionLabel)}>\n {label}\n </div>\n {rightIcon && renderIcon(rightIcon, rightIconType, \"\")}\n </>\n );\n\n return (\n <Tooltip content={tooltipContent} hideWhenReferenceHidden>\n <div\n ref={ref}\n key={id || label}\n aria-level={belongToCategory ? 2 : 1}\n aria-selected={isActive}\n aria-label={ariaLabel || label}\n id={getOptionId(id, index)}\n data-testid={getTestId(ComponentDefaultTestId.COMBOBOX_OPTION, index)}\n onMouseEnter={onMouseEnter}\n onClick={onClick}\n onKeyDown={onKeyDown}\n onMouseLeave={onMouseLeave}\n className={cx(styles.comboboxOption, className, {\n [styles.disabled]: disabled,\n [styles.selected]: selected,\n [styles.active]: isActive,\n [styles.activeOutline]: visualFocus\n })}\n style={{ height: optionLineHeight }}\n >\n {optionRendererValue || optionValue}\n </div>\n </Tooltip>\n );\n};\n\ninterface ComboboxOptionStaticProps {\n iconTypes: typeof ComboboxOptionIconTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<ComboboxOptionProps, ComboboxOptionStaticProps>(ComboboxOption, {\n iconTypes: ComboboxOptionIconTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","index","option","className","isActive","visualFocus","scrollRef","_ref$scrollOffset","scrollOffset","onOptionClick","onOptionLeave","onOptionHover","optionLineHeight","_ref$shouldScrollWhen","shouldScrollWhenActive","_ref$optionRenderer","optionRenderer","id","leftIcon","leftIconType","rightIcon","rightIconType","label","_option$iconSize","iconSize","disabled","selected","ariaLabel","_option$belongToCateg","belongToCategory","tooltipContent","ref","useRef","labelRef","isOptionOverflowing","useIsOverflowing","useEffect","element","current","scrollTop","offsetTop","_a","scrollIntoView","call","behaviour","renderIcon","icon","iconType","cx","styles","optionIcon","React","createElement","Icon","ignoreFocusStyle","onClick","useCallback","event","onMouseLeave","onMouseEnter","onKeyDown","key","keyCodes","ENTER","SPACE","optionRendererValue","useMemo","optionValue","Fragment","left","optionLabel","Tooltip","content","hideWhenReferenceHidden","getOptionId","getTestId","ComponentDefaultTestId","COMBOBOX_OPTION","comboboxOption","_defineProperty","active","activeOutline","style","height","iconTypes","ComboboxOptionIconTypeEnum"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"lodash-es";import{getStyle as i}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as a}from"../../tests/testIds.js";import n from"classnames";import s,{useState as l,useRef as d,useCallback as m,useEffect as c,useMemo as u}from"react";import{SwitchTransition as p,CSSTransition as f}from"react-transition-group";import v from"../../hooks/useEventListener/index.js";import E from"../../hooks/useAfterFirstRender/index.js";import{NOOP as b}from"../../utils/function-utils.js";import{CounterSize as j,CounterColor as x,CounterType as h}from"./CounterConstants.js";import{
|
|
1
|
+
import{slicedToArray as e,defineProperty as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{camelCase as o}from"lodash-es";import{getStyle as i}from"../../helpers/typesciptCssModulesHelper.js";import{getTestId as r,ComponentDefaultTestId as a}from"../../tests/testIds.js";import n from"classnames";import s,{useState as l,useRef as d,useCallback as m,useEffect as c,useMemo as u}from"react";import{SwitchTransition as p,CSSTransition as f}from"react-transition-group";import v from"../../hooks/useEventListener/index.js";import E from"../../hooks/useAfterFirstRender/index.js";import{NOOP as b}from"../../utils/function-utils.js";import{CounterSize as j,CounterColor as x,CounterType as h}from"./CounterConstants.js";import{withStaticPropsWithoutForwardRef as y}from"../../types/withStaticProps.js";import"../../utils/colors-vars-map.js";import A from"./Counter.module.scss.js";var N=y((function(j){var x=j.className,h=j.counterClassName,y=j.count,N=void 0===y?0:y,k=j.size,C=void 0===k?"large":k,g=j.kind,w=void 0===g?"fill":g,L=j.color,M=void 0===L?"primary":L,z=j.maxDigits,D=void 0===z?3:z,P=j.ariaLabeledBy,R=void 0===P?"":P,T=j.ariaLabel,B=void 0===T?"":T,H=j.id,O=void 0===H?"":H,U=j.prefix,_=void 0===U?"":U,F=j.onMouseDown,I=void 0===F?b:F,S=j.noAnimation,q=void 0!==S&&S,G=j["data-testid"],J=l(!1),K=e(J,2),Q=K[0],V=K[1],W=d(null),X=m((function(){V(!0)}),[V]),Y=m((function(){V(!1)}),[V]);v({eventName:"animationend",callback:Y,ref:W});var Z=E();c((function(){Z.current&&X()}),[N,Z,X]),c((function(){D>0||console.error("Max digits must be a positive number")}),[D]);var $=u((function(){return n(A.counter,i(A,o("size-"+C)),i(A,o("kind-"+w)),i(A,o("color-"+M)),t({},A.withAnimation,Q),h)}),[C,w,M,Q,h]),ee="counter"+(O?"-".concat(O):""),te=(null==N?void 0:(""+N).length)>D?"".concat(Math.pow(10,D)-1,"+"):N+"",oe=s.createElement("span",{id:ee,"data-testid":G||r(a.COUNTER,O)},_+te);return s.createElement("span",{className:x,"aria-label":"".concat(B," ").concat(te),"aria-labelledby":R,onMouseDown:I},s.createElement("div",{className:$,"aria-label":te,ref:W},q?oe:s.createElement(p,{mode:"out-in"},s.createElement(f,{key:te,classNames:{enter:A.fadeEnter,enterActive:A.fadeEnterActive,exit:A.fadeExit,exitActive:A.fadeExitActive},addEndListener:function(e,t){e.addEventListener("transitionend",t,!1)}},s.createElement("span",{id:ee,"data-testid":G||r(a.COUNTER,O)},_+te)))))}),{sizes:j,colors:x,kinds:h});export{N as default};
|
|
2
2
|
//# sourceMappingURL=Counter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Counter.js","sources":["../../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport {\n CounterColor as CounterColorEnum,\n CounterSize as CounterSizeEnum,\n CounterType as CounterTypeEnum\n} from \"./CounterConstants\";\nimport { CounterColor, CounterSize, CounterType } from \"./Counter.types\";\nimport { VibeComponentProps,
|
|
1
|
+
{"version":3,"file":"Counter.js","sources":["../../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import { camelCase } from \"lodash-es\";\nimport { getStyle } from \"../../helpers/typesciptCssModulesHelper\";\nimport { ComponentDefaultTestId, getTestId } from \"../../tests/test-ids-utils\";\nimport cx from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CSSTransition, SwitchTransition } from \"react-transition-group\";\nimport useEventListener from \"../../hooks/useEventListener\";\nimport useAfterFirstRender from \"../../hooks/useAfterFirstRender\";\nimport { NOOP } from \"../../utils/function-utils\";\nimport {\n CounterColor as CounterColorEnum,\n CounterSize as CounterSizeEnum,\n CounterType as CounterTypeEnum\n} from \"./CounterConstants\";\nimport { CounterColor, CounterSize, CounterType } from \"./Counter.types\";\nimport { VibeComponentProps, withStaticPropsWithoutForwardRef } from \"../../types\";\nimport styles from \"./Counter.module.scss\";\n\nexport interface CounterProps extends VibeComponentProps {\n /**\n * The ID of the element describing the counter.\n */\n ariaLabeledBy?: string;\n /**\n * Class name applied to the counter element.\n */\n counterClassName?: string;\n /**\n * The numeric value displayed in the counter.\n */\n count?: number;\n /**\n * The label of the counter for accessibility.\n */\n ariaLabel?: string;\n /**\n * The size of the counter.\n */\n size?: CounterSize;\n /**\n * The visual style of the counter.\n */\n kind?: CounterType;\n /**\n * The color of the counter.\n */\n color?: CounterColor;\n /**\n * The maximum number of digits displayed before truncation.\n */\n maxDigits?: number;\n /**\n * Text prepended to the counter value.\n */\n prefix?: string;\n /**\n * Callback fired when the counter is clicked.\n */\n onMouseDown?: (event: React.MouseEvent<HTMLSpanElement>) => void;\n /**\n * If true, disables counter animations.\n */\n noAnimation?: boolean;\n}\n\nconst Counter = ({\n className,\n counterClassName,\n count = 0,\n size = \"large\",\n kind = \"fill\",\n color = \"primary\",\n maxDigits = 3,\n ariaLabeledBy = \"\",\n ariaLabel = \"\",\n id = \"\",\n prefix = \"\",\n onMouseDown = NOOP,\n noAnimation = false,\n \"data-testid\": dataTestId\n}: CounterProps) => {\n const [countChangeAnimationState, setCountChangeAnimationState] = useState(false);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const setCountChangedAnimationActive = useCallback(() => {\n setCountChangeAnimationState(true);\n }, [setCountChangeAnimationState]);\n\n const setCountChangedAnimationNotActive = useCallback(() => {\n setCountChangeAnimationState(false);\n }, [setCountChangeAnimationState]);\n\n useEventListener({\n eventName: \"animationend\",\n callback: setCountChangedAnimationNotActive,\n ref\n });\n\n const isAfterFirstRender = useAfterFirstRender();\n\n useEffect(() => {\n if (isAfterFirstRender.current) {\n setCountChangedAnimationActive();\n }\n }, [count, isAfterFirstRender, setCountChangedAnimationActive]);\n\n useEffect(() => {\n if (maxDigits <= 0) {\n console.error(\"Max digits must be a positive number\");\n }\n }, [maxDigits]);\n\n const classNames = useMemo(() => {\n return cx(\n styles.counter,\n getStyle(styles, camelCase(\"size-\" + size)),\n getStyle(styles, camelCase(\"kind-\" + kind)),\n getStyle(styles, camelCase(\"color-\" + color)),\n {\n [styles.withAnimation]: countChangeAnimationState\n },\n counterClassName\n );\n }, [size, kind, color, countChangeAnimationState, counterClassName]);\n\n const counterId = \"counter\" + (id ? `-${id}` : \"\");\n const countText = count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : String(count);\n const counter = (\n <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n );\n\n return (\n <span\n className={className}\n aria-label={`${ariaLabel} ${countText}`}\n aria-labelledby={ariaLabeledBy}\n onMouseDown={onMouseDown}\n >\n <div className={classNames} aria-label={countText} ref={ref}>\n {noAnimation ? (\n counter\n ) : (\n <SwitchTransition mode=\"out-in\">\n <CSSTransition\n key={countText}\n classNames={{\n enter: styles.fadeEnter,\n enterActive: styles.fadeEnterActive,\n exit: styles.fadeExit,\n exitActive: styles.fadeExitActive\n }}\n // @ts-expect-error @definitelyTyped typings expecting a single parameter for some reason when the function passed here is called with two parameters\n // See https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L522-L534\n addEndListener={(node: HTMLElement, done: () => void) => {\n node.addEventListener(\"transitionend\", done, false);\n }}\n >\n <span id={counterId} data-testid={dataTestId || getTestId(ComponentDefaultTestId.COUNTER, id)}>\n {prefix + countText}\n </span>\n </CSSTransition>\n </SwitchTransition>\n )}\n </div>\n </span>\n );\n};\n\ninterface CounterStaticProps {\n sizes: typeof CounterSizeEnum;\n colors: typeof CounterColorEnum;\n kinds: typeof CounterTypeEnum;\n}\n\nexport default withStaticPropsWithoutForwardRef<CounterProps, CounterStaticProps>(Counter, {\n sizes: CounterSizeEnum,\n colors: CounterColorEnum,\n kinds: CounterTypeEnum\n});\n"],"names":["withStaticPropsWithoutForwardRef","_ref","className","counterClassName","_ref$count","count","_ref$size","size","_ref$kind","kind","_ref$color","color","_ref$maxDigits","maxDigits","_ref$ariaLabeledBy","ariaLabeledBy","_ref$ariaLabel","ariaLabel","_ref$id","id","_ref$prefix","prefix","_ref$onMouseDown","onMouseDown","NOOP","_ref$noAnimation","noAnimation","dataTestId","_useState","useState","_useState2","_slicedToArray","countChangeAnimationState","setCountChangeAnimationState","ref","useRef","setCountChangedAnimationActive","useCallback","setCountChangedAnimationNotActive","useEventListener","eventName","callback","isAfterFirstRender","useAfterFirstRender","useEffect","current","console","error","classNames","useMemo","cx","styles","counter","getStyle","camelCase","_defineProperty","withAnimation","counterId","concat","countText","length","Math","pow","String","React","createElement","getTestId","ComponentDefaultTestId","COUNTER","SwitchTransition","mode","CSSTransition","key","enter","fadeEnter","enterActive","fadeEnterActive","exit","fadeExit","exitActive","fadeExitActive","addEndListener","node","done","addEventListener","sizes","CounterSizeEnum","colors","CounterColorEnum","kinds","CounterTypeEnum"],"mappings":"43BAiEA,IAgHeA,EAAAA,GAhHC,SAAHC,GAeM,IAdjBC,EAASD,EAATC,UACAC,EAAgBF,EAAhBE,iBAAgBC,EAAAH,EAChBI,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EAAAE,EAAAL,EACTM,KAAAA,OAAO,IAAHD,EAAG,QAAOA,EAAAE,EAAAP,EACdQ,KAAAA,OAAO,IAAHD,EAAG,OAAMA,EAAAE,EAAAT,EACbU,MAAAA,OAAQ,IAAHD,EAAG,UAASA,EAAAE,EAAAX,EACjBY,UAAAA,OAAY,IAAHD,EAAG,EAACA,EAAAE,EAAAb,EACbc,cAAAA,OAAgB,IAAHD,EAAG,GAAEA,EAAAE,EAAAf,EAClBgB,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAAE,EAAAjB,EACdkB,GAAAA,OAAK,IAAHD,EAAG,GAAEA,EAAAE,EAAAnB,EACPoB,OAAAA,OAAS,IAAHD,EAAG,GAAEA,EAAAE,EAAArB,EACXsB,YAAAA,OAAcC,IAAHF,EAAGE,EAAIF,EAAAG,EAAAxB,EAClByB,YAAAA,OAAc,IAAHD,GAAQA,EACJE,EAAU1B,EAAzB,eAEA2B,EAAkEC,GAAS,GAAMC,EAAAC,EAAAH,EAAA,GAA1EI,EAAyBF,EAAA,GAAEG,EAA4BH,EAAA,GAExDI,EAAMC,EAAuB,MAE7BC,EAAiCC,GAAY,WACjDJ,GAA6B,EAC/B,GAAG,CAACA,IAEEK,EAAoCD,GAAY,WACpDJ,GAA6B,EAC/B,GAAG,CAACA,IAEJM,EAAiB,CACfC,UAAW,eACXC,SAAUH,EACVJ,IAAAA,IAGF,IAAMQ,EAAqBC,IAE3BC,GAAU,WACJF,EAAmBG,SACrBT,GAEH,GAAE,CAAC/B,EAAOqC,EAAoBN,IAE/BQ,GAAU,WACJ/B,EAAa,GACfiC,QAAQC,MAAM,uCAElB,GAAG,CAAClC,IAEJ,IAAMmC,EAAaC,GAAQ,WACzB,OAAOC,EACLC,EAAOC,QACPC,EAASF,EAAQG,EAAU,QAAU/C,IACrC8C,EAASF,EAAQG,EAAU,QAAU7C,IACrC4C,EAASF,EAAQG,EAAU,SAAW3C,IAAO4C,EAAA,CAAA,EAE1CJ,EAAOK,cAAgBxB,GAE1B7B,EAEJ,GAAG,CAACI,EAAME,EAAME,EAAOqB,EAA2B7B,IAE5CsD,GAAY,WAAatC,EAAEuC,IAAAA,OAAOvC,GAAO,IACzCwC,IAAYtD,aAAK,GAALA,MAAkBuD,QAAS/C,EAAS,GAAA6C,OAAMG,KAAAC,IAAA,GAAMjD,GAAY,OAAcR,EAAP0D,GAC/EX,GACJY,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAS,cAAe9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,IAId,OACEK,EACEC,cAAA,OAAA,CAAA/D,UAAWA,yBACIe,OAASyC,OAAIC,IACX,kBAAA5C,EACjBQ,YAAaA,GAEbyC,EAAKC,cAAA,MAAA,CAAA/D,UAAW8C,EAAwB,aAAAW,GAAWzB,IAAKA,GACrDR,EACC0B,GAEAY,EAAAC,cAACI,EAAgB,CAACC,KAAK,UACrBN,EAAAC,cAACM,EACC,CAAAC,IAAKb,GACLX,WAAY,CACVyB,MAAOtB,EAAOuB,UACdC,YAAaxB,EAAOyB,gBACpBC,KAAM1B,EAAO2B,SACbC,WAAY5B,EAAO6B,gBAIrBC,eAAgB,SAACC,EAAmBC,GAClCD,EAAKE,iBAAiB,gBAAiBD,GAAM,EAC/C,GAEAnB,EAAMC,cAAA,OAAA,CAAA9C,GAAIsC,GAAwB,cAAA9B,GAAcuC,EAAUC,EAAuBC,QAASjD,IACvFE,EAASsC,OAQ1B,GAQ2F,CACzF0B,MAAOC,EACPC,OAAQC,EACRC,MAAOC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as
|
|
1
|
+
import{inherits as e,createClass as o,toConsumableArray as n,classCallCheck as t,callSuper as i}from"../../../_virtual/_rollupPluginBabelHelpers.js";import s from"classnames";import r,{PureComponent as a}from"react";import{createPortal as l}from"react-dom";import{Manager as u,Reference as h,Popper as d}from"react-popper";import{isFunction as c}from"lodash-es";import{NOOP as p,convertToArray as m,chainFunctions as g}from"../../utils/function-utils.js";import f from"./DialogContent/DialogContent.js";import{isInsideClass as v}from"../../utils/dom-utils.js";import{Refable as D}from"../Refable/Refable.js";import{HideShowEvent as y,DialogPosition as w,AnimationType as E}from"./DialogConstants.js";import k from"./Dialog.module.scss.js";import{getTestId as C,ComponentDefaultTestId as T}from"../../tests/testIds.js";import S from"../LayerProvider/LayerContext.js";import{isClient as b}from"../../utils/ssr-utils.js";import{createObserveContentResizeModifier as O}from"./modifiers/observeContentResizeModifier.js";var M=function(p){function g(e){var o;return t(this,g),(o=i(this,g,[e])).state={shouldUseDerivedStateFromProps:e.useDerivedStateFromProps,isOpen:e.shouldShowOnMount},o.onMouseEnter=o.onMouseEnter.bind(o),o.onMouseLeave=o.onMouseLeave.bind(o),o.onMouseDown=o.onMouseDown.bind(o),o.onClick=o.onClick.bind(o),o.onFocus=o.onFocus.bind(o),o.onBlur=o.onBlur.bind(o),o.isShown=o.isShown.bind(o),o.onEsc=o.onEsc.bind(o),o.onClickOutside=o.onClickOutside.bind(o),o.onDialogEnter=o.onDialogEnter.bind(o),o.onDialogLeave=o.onDialogLeave.bind(o),o.getContainer=o.getContainer.bind(o),o.onContentClick=o.onContentClick.bind(o),o.onKeyDown=o.onKeyDown.bind(o),o.closeDialogOnEscape=o.closeDialogOnEscape.bind(o),o.onContextMenu=o.onContextMenu.bind(o),o.hideTimeout=null,o.showTimeout=null,o}return e(g,a),o(g,[{key:"closeDialogOnEscape",value:function(e){if(this.state.isOpen)switch(e.key){case"Escape":this.hideDialogIfNeeded(e,y.ESCAPE_KEY);break;case"Tab":this.handleEvent(y.TAB_KEY,e.target,e);break;case"Enter":this.handleEvent(y.ENTER,e.target,e)}}},{key:"componentDidMount",value:function(){var e=this.props,o=e.shouldCallbackOnMount,n=e.onDialogDidShow,t=this.state.isOpen;b()&&document.addEventListener("keyup",this.closeDialogOnEscape),o&&t&&n&&n()}},{key:"componentWillUnmount",value:function(){b()&&document.removeEventListener("keyup",this.closeDialogOnEscape),this.showTimeout&&(clearTimeout(this.showTimeout),this.showTimeout=null),this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=null)}},{key:"getContainer",value:function(){var e=document.querySelector(this.props.containerSelector);if(!(e&&e instanceof Element)){var o=this.context.layerRef;return(null==o?void 0:o.current)?o.current:document.body}return e}},{key:"showDialog",value:function(e,o){var n=this,t=this.props,i=t.instantShowAndHide,s=t.getDynamicShowDelay,r=t.showDelay,a=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).preventAnimation;if(s){var l=s();r=l.showDelay||0,a=a||l.preventAnimation}i?(this.onShowDialog(e,o),this.setState({isOpen:!0,preventAnimation:a}),this.showTimeout=null):this.showTimeout=setTimeout((function(){n.onShowDialog(e,o),n.showTimeout=null,n.setState({isOpen:!0,preventAnimation:a})}),r)}},{key:"onShowDialog",value:function(e,o){this.isShown()||(0,this.props.onDialogDidShow)(e,o)}},{key:"showDialogIfNeeded",value:function(e,o){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this.props.disable||(this.hideTimeout&&(clearTimeout(this.hideTimeout),this.hideTimeout=null),this.showTimeout||this.showDialog(e,o,n))}},{key:"hideDialog",value:function(e,o){var n=this,t=this.props,i=t.hideDelay;t.instantShowAndHide?(this.onHideDialog(e,o),this.setState({isOpen:!1}),this.hideTimeout=null):this.hideTimeout=setTimeout((function(){n.onHideDialog(e,o),n.setState({isOpen:!1}),n.hideTimeout=null}),i)}},{key:"onHideDialog",value:function(e,o){var n=this.props.onDialogDidHide;n&&n(e,o)}},{key:"hideDialogIfNeeded",value:function(e,o){this.showTimeout&&(clearTimeout(this.showTimeout),this.showTimeout=null),this.hideTimeout||this.hideDialog(e,o)}},{key:"handleEvent",value:function(e,o,n){var t=this.props,i=t.showTriggerIgnoreClass,s=t.hideTriggerIgnoreClass;return!this.isShowTrigger(e)||this.isShown()||v(o,i)?this.isHideTrigger(e)&&!v(o,s)?this.hideDialogIfNeeded(n,e):void 0:this.showDialogIfNeeded(n,e)}},{key:"isShown",value:function(){return this.state.isOpen||this.props.open}},{key:"isShowTrigger",value:function(e){var o=this.props,n=o.addKeyboardHideShowTriggersByDefault,t=m(o.showTrigger);return!(!n||"focus"!==e||-1>=t.indexOf("mouseenter"))||t.indexOf(e)>-1}},{key:"isHideTrigger",value:function(e){var o=this.props,n=o.addKeyboardHideShowTriggersByDefault,t=m(o.hideTrigger);return!(!n||"blur"!==e||-1>=t.indexOf("mouseleave"))||t.indexOf(e)>-1}},{key:"onMouseEnter",value:function(e){this.handleEvent("mouseenter",e.target,e)}},{key:"onMouseLeave",value:function(e){this.handleEvent("mouseleave",e.target,e)}},{key:"onClick",value:function(e){e.button||this.handleEvent("click",e.target,e)}},{key:"onKeyDown",value:function(e){"Enter"===e.key&&this.handleEvent("enter",e.target,e),"Tab"===e.key&&this.handleEvent("tab",e.target,e)}},{key:"onMouseDown",value:function(e){e.button||this.handleEvent("mousedown",e.target,e)}},{key:"onFocus",value:function(e){this.handleEvent("focus",e.target,e)}},{key:"onBlur",value:function(e){this.handleEvent("blur",e.relatedTarget,e)}},{key:"onEsc",value:function(e){this.handleEvent("esckey",e.target,e)}},{key:"onContextMenu",value:function(e){var o=this.isShown();(this.isShowTrigger("contextmenu")&&!o||this.isHideTrigger("contextmenu")&&o)&&e.preventDefault(),this.handleEvent("contextmenu",e.target,e)}},{key:"onClickOutside",value:function(e){var o=this.props.onClickOutside;this.handleEvent("clickoutside",e.target,e),o(e)}},{key:"onDialogEnter",value:function(e){this.props.showOnDialogEnter&&this.showDialogIfNeeded(e,"DialogEnter")}},{key:"onDialogLeave",value:function(e){this.props.showOnDialogEnter&&this.hideDialogIfNeeded(e,"DialogLeave")}},{key:"onContentClick",value:function(e){var o=this.props.onContentClick;this.handleEvent("onContentClick",e.target,e),o(e)}},{key:"render",value:function(){var e=this,o=this.props,t=o.wrapperClassName,i=o.content,a=o.startingEdge,p=o.children,m=o.preventAnimationOnMount,g=o.animationType,v=o.position,y=o.showDelay,w=o.moveBy,E=o.modifiers,S=o.tooltip,M=o.tooltipClassName,H=o.referenceWrapperClassName,L=o.zIndex,A=o.hideWhenReferenceHidden,N=o.disableContainerScroll,I=o.containerSelector,R=o.observeContentResize,j=this.state.preventAnimation,B=o["data-testid"]||C(T.DIALOG,o.id),P=m||j?void 0:g,F=c(i)?i():i;return F?r.createElement(u,null,r.createElement(h,null,(function(o){var n=o.ref;return r.createElement(D,{className:s(H),ref:n,onBlur:x("onBlur",e,e.props),onKeyDown:x("onKeyDown",e,e.props),onClick:x("onClick",e,e.props),onFocus:x("onFocus",e,e.props),onMouseDown:x("onMouseDown",e,e.props),onMouseEnter:x("onMouseEnter",e,e.props),onMouseLeave:x("onMouseLeave",e,e.props),onContextMenu:x("onContextMenu",e,e.props)},p)})),b()&&l(r.createElement(d,{placement:v,modifiers:[{name:"offset",options:{offset:[w.secondary,w.main]}},{name:"zIndex",enabled:!0,phase:"write",fn:function(e){var o=e.state;return L&&(o.styles.popper.zIndex=L+""),o}},{name:"rotator",enabled:!0,phase:"write",fn:function(e){var o=e.state;return o.styles.arrow?(o.styles.arrow.transform="".concat(o.styles.arrow.transform," rotate(45deg)"),o):o}},O(R)].concat(n(E))},(function(o){var n=o.placement,i=o.style,l=o.ref,u=o.arrowProps,h=o.isReferenceHidden;if(!e.isShown()&&n)return null;if(A&&h){var d=new CustomEvent("onReferenceHidden");e.hideDialog(d,"onReferenceHidden")}return r.createElement(f,{"data-testid":B,isReferenceHidden:A&&h,onMouseEnter:e.onDialogEnter,onMouseLeave:e.onDialogLeave,onClickOutside:e.onClickOutside,onContextMenu:e.onContextMenu,onEsc:e.onEsc,animationType:P,position:n,wrapperClassName:t,startingEdge:a,isOpen:e.isShown(),showDelay:y,styleObject:i,ref:l,onClick:e.onContentClick,hasTooltip:!!S,containerSelector:I,disableContainerScroll:N},F,S&&r.createElement("div",{style:u.style,ref:u.ref,className:s(k.arrow,M),"data-placement":n}))})),this.getContainer())):p}}],[{key:"getDerivedStateFromProps",value:function(e,o){return o.shouldUseDerivedStateFromProps?{isOpen:e.isOpen}:null}}])}();function x(e,o,n){return g([n[e],o[e]],!0)}M.hideShowTriggers=y,M.positions=w,M.animationTypes=E,M.defaultProps={position:"top",modifiers:[],moveBy:{main:0,secondary:0},showDelay:100,hideDelay:100,showTrigger:M.hideShowTriggers.MOUSE_ENTER,hideTrigger:M.hideShowTriggers.MOUSE_LEAVE,showOnDialogEnter:!1,shouldShowOnMount:!1,disable:!1,open:!1,animationType:M.animationTypes.EXPAND,preventAnimationOnMount:!1,tooltip:!1,onDialogDidShow:p,onDialogDidHide:p,onClickOutside:p,onContentClick:p,useDerivedStateFromProps:!1,hideWhenReferenceHidden:!1,shouldCallbackOnMount:!1,instantShowAndHide:!1,addKeyboardHideShowTriggersByDefault:!1,observeContentResize:!1},M.contextType=S;export{M as default};
|
|
2
2
|
//# sourceMappingURL=Dialog.js.map
|