@frontify/fondue 12.0.0-beta.306 → 12.0.0-beta.307
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/ColorInputFlyout/ColorPickerTrigger.es.js +1 -1
- package/dist/components/ColorInputFlyout/ColorPickerTrigger.es.js.map +1 -1
- package/dist/components/Dropdown/Dropdown.es.js +1 -1
- package/dist/components/Dropdown/Dropdown.es.js.map +1 -1
- package/dist/components/Trigger/Trigger.es.js +18 -17
- package/dist/components/Trigger/Trigger.es.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -38,7 +38,7 @@ const h = ({
|
|
|
38
38
|
id: x(m),
|
|
39
39
|
disabled: o,
|
|
40
40
|
className: r([
|
|
41
|
-
"tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-
|
|
41
|
+
"tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-8",
|
|
42
42
|
!t && "tw-text-black-60",
|
|
43
43
|
o && "tw-text-black-40"
|
|
44
44
|
])
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerTrigger.es.js","sources":["../../../src/components/ColorInputFlyout/ColorPickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContent } from '@components/MenuItem/MenuItemContent';\nimport { Trigger } from '@components/Trigger/Trigger';\nimport { IconDroplet } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { toShortRgb } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorFormat } from '../../types/colors';\nimport { ColorInputTitle } from './ColorInputTitle';\nimport { ColorPickerFlyoutProps } from './ColorPickerFlyout';\n\ntype ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' | 'currentColor' | 'disabled'> & {\n isOpen?: boolean;\n format: ColorFormat;\n clearable?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n};\n\nexport const ColorInputTrigger = ({\n id,\n currentColor,\n format,\n isOpen = false,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}: ColorInputTriggerProps): ReactElement => {\n const { isFocusVisible, focusProps } = useFocusRing();\n const backgroundColor = currentColor ? tinycolor(toShortRgb(currentColor)).toRgbString() : '';\n\n return (\n <Trigger\n isOpen={isOpen}\n disabled={disabled}\n isFocusVisible={isFocusVisible}\n showClear={!!currentColor && clearable}\n onClear={onClear}\n onDelete={onDelete}\n >\n <button\n {...focusProps}\n type=\"button\"\n id={useMemoizedId(id)}\n disabled={disabled}\n className={merge([\n 'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-
|
|
1
|
+
{"version":3,"file":"ColorPickerTrigger.es.js","sources":["../../../src/components/ColorInputFlyout/ColorPickerTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContent } from '@components/MenuItem/MenuItemContent';\nimport { Trigger } from '@components/Trigger/Trigger';\nimport { IconDroplet } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { toShortRgb } from '@utilities/colors';\nimport { merge } from '@utilities/merge';\nimport React, { ReactElement } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { ColorFormat } from '../../types/colors';\nimport { ColorInputTitle } from './ColorInputTitle';\nimport { ColorPickerFlyoutProps } from './ColorPickerFlyout';\n\ntype ColorInputTriggerProps = Pick<ColorPickerFlyoutProps, 'id' | 'currentColor' | 'disabled'> & {\n isOpen?: boolean;\n format: ColorFormat;\n clearable?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n};\n\nexport const ColorInputTrigger = ({\n id,\n currentColor,\n format,\n isOpen = false,\n disabled = false,\n clearable = false,\n onClear,\n onDelete,\n}: ColorInputTriggerProps): ReactElement => {\n const { isFocusVisible, focusProps } = useFocusRing();\n const backgroundColor = currentColor ? tinycolor(toShortRgb(currentColor)).toRgbString() : '';\n\n return (\n <Trigger\n isOpen={isOpen}\n disabled={disabled}\n isFocusVisible={isFocusVisible}\n showClear={!!currentColor && clearable}\n onClear={onClear}\n onDelete={onDelete}\n >\n <button\n {...focusProps}\n type=\"button\"\n id={useMemoizedId(id)}\n disabled={disabled}\n className={merge([\n 'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none tw-py-2 tw-pl-3 tw-min-h-[34px] tw-pr-8',\n !currentColor && 'tw-text-black-60',\n disabled && 'tw-text-black-40',\n ])}\n >\n <MenuItemContent\n title={\n currentColor ? <ColorInputTitle format={format} currentColor={currentColor} /> : 'Select color'\n }\n decorator={\n currentColor ? (\n <span\n className={merge([\n 'tw-h-4 tw-w-4 tw-rounded tw-flex tw-items-center tw-justify-center tw-ring-1 tw-ring-black-10 tw-ring-offset-1',\n disabled && 'tw-opacity-50',\n ])}\n style={{ backgroundColor }}\n />\n ) : (\n <span className=\"tw-text-black-70\">\n <IconDroplet size={IconSize.Size12} />\n </span>\n )\n }\n />\n </button>\n </Trigger>\n );\n};\nColorInputTrigger.displayName = 'FondueColorInputTrigger';\n"],"names":["ColorInputTrigger","id","currentColor","format","isOpen","disabled","clearable","onClear","onDelete","isFocusVisible","focusProps","useFocusRing","backgroundColor","tinycolor","toShortRgb","React","Trigger","useMemoizedId","merge","MenuItemContent","ColorInputTitle","IconDroplet","IconSize"],"mappings":";;;;;;;;;;;AAwBO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AACJ,MAA4C;AACxC,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAkBV,IAAeW,EAAUC,EAAWZ,CAAY,CAAC,EAAE,YAAgB,IAAA;AAGvF,SAAA,gBAAAa,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,QAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAI;AAAA,MACA,WAAW,CAAC,CAACP,KAAgBI;AAAA,MAC7B,SAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,IAEA,gBAAAO,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGL;AAAA,QACJ,MAAK;AAAA,QACL,IAAIO,EAAchB,CAAE;AAAA,QACpB,UAAAI;AAAA,QACA,WAAWa,EAAM;AAAA,UACb;AAAA,UACA,CAAChB,KAAgB;AAAA,UACjBG,KAAY;AAAA,QAAA,CACf;AAAA,MAAA;AAAA,MAED,gBAAAU,EAAA;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OACIjB,IAAe,gBAAAa,EAAA,cAACK,GAAgB,EAAA,QAAAjB,GAAgB,cAAAD,EAA4B,CAAA,IAAK;AAAA,UAErF,WACIA,IACI,gBAAAa,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWG,EAAM;AAAA,gBACb;AAAA,gBACAb,KAAY;AAAA,cAAA,CACf;AAAA,cACD,OAAO,EAAE,iBAAAO,EAAgB;AAAA,YAAA;AAAA,UAC7B,IAEC,gBAAAG,EAAA,cAAA,QAAA,EAAK,WAAU,mBAAA,mCACXM,GAAY,EAAA,MAAMC,EAAS,OAAQ,CAAA,CACxC;AAAA,QAAA;AAAA,MAGZ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAtB,EAAkB,cAAc;"}
|
|
@@ -102,7 +102,7 @@ const Pt = (t, l) => L(A(t)).has(l) ? null : t.map(({ menuItems: r }) => r).flat
|
|
|
102
102
|
className: ut([
|
|
103
103
|
"tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none",
|
|
104
104
|
p === "Small" ? "tw-py-2 tw-pl-3 tw-min-h-[34px]" : "tw-pl-5 tw-py-4 tw-min-h-[60px]",
|
|
105
|
-
x ? "tw-pr-
|
|
105
|
+
x ? "tw-pr-12" : "tw-pr-8",
|
|
106
106
|
Z
|
|
107
107
|
])
|
|
108
108
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { MenuBlock, MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport {\n MenuItemContent,\n MenuItemContentSize,\n MenuItemStyle,\n MenuItemTextColorState,\n menuItemTextColorRecord,\n} from '@components/MenuItem';\nimport { Trigger, TriggerEmphasis, TriggerSize } from '@components/Trigger/Trigger';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { VariationPlacement } from '@popperjs/core';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { ReactElement, useEffect, useRef } from 'react';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\n\nexport const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36; //Small Input height as default\n\nexport enum DropdownSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n Start = 'Start',\n End = 'End',\n}\n\nexport enum DropdownPosition {\n Top = 'Top',\n Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n id?: string;\n menuBlocks: MenuBlock[];\n onChange: (id?: string | number) => void;\n activeItemId?: string | number;\n placeholder?: string;\n size?: DropdownSize;\n disabled?: boolean;\n clearable?: boolean;\n ariaLabel?: string;\n decorator?: ReactElement;\n autoResize?: boolean;\n validation?: Validation;\n alignment?: DropdownAlignment;\n position?: DropdownPosition;\n emphasis?: TriggerEmphasis;\n flip?: boolean;\n 'data-test-id'?: string;\n enablePortal?: boolean;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n if (disabledItems.has(activeId)) {\n return null;\n }\n\n return (\n blocks\n .map(({ menuItems }) => menuItems)\n .flat()\n .find(({ id }) => id.toString() === activeId?.toString()) || null\n );\n};\n\nexport const Dropdown = ({\n id: propId,\n menuBlocks,\n onChange,\n activeItemId,\n placeholder = 'Select item',\n size = DropdownSize.Small,\n disabled = false,\n clearable = false,\n ariaLabel = 'Dropdown',\n decorator,\n autoResize = true,\n validation = Validation.Default,\n alignment = DropdownAlignment.Start,\n position = DropdownPosition.Bottom,\n emphasis = TriggerEmphasis.Default,\n flip = false,\n 'data-test-id': dataTestId = 'dropdown',\n enablePortal = true,\n}: DropdownProps): ReactElement => {\n const activeItem = !!activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n const props = mapToAriaProps(ariaLabel, menuBlocks);\n const state = useSelectState({\n ...props,\n defaultSelectedKey: activeItemId,\n onSelectionChange: (key) => onChange(key),\n disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n });\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n const { isOpen } = state;\n const { isFocusVisible, focusProps } = useFocusRing();\n const overlayRef = useRef<HTMLDivElement | null>(null);\n const { overlayProps } = useOverlay(\n { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n overlayRef,\n );\n\n useEffect(() => {\n if (state.disabledKeys.has(activeItemId as string)) {\n return;\n }\n\n if (activeItemId !== state.selectedKey) {\n state.setSelectedKey(activeItemId as string);\n }\n }, [activeItemId]);\n\n const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n const textColorClass = activeItem\n ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n : 'tw-text-text-x-weak';\n\n const onClear = clearable\n ? () => {\n state.setSelectedKey('');\n const first = state.collection.getFirstKey();\n if (first) {\n state.selectionManager.setFocusedKey(first);\n }\n }\n : undefined;\n\n const showClear = !!activeItem && !!onClear;\n const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n const placementMap: Record<string, VariationPlacement> = {\n ['Top-Start']: 'top-start',\n ['Top-End']: 'top-end',\n ['Bottom-Start']: 'bottom-start',\n ['Bottom-End']: 'bottom-end',\n };\n const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n placement: placementMap[`${position}-${alignment}`],\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n return (\n <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\" data-test-id={dataTestId}>\n <Trigger\n disabled={disabled}\n buttonProps={buttonProps}\n isFocusVisible={!disabled && isFocusVisible}\n isOpen={isOpen}\n size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n emphasis={emphasis}\n onClear={onClear}\n showClear={showClear}\n validation={validation}\n >\n <HiddenSelect state={state} triggerRef={triggerRef} />\n <button\n {...mergeProps(buttonProps, focusProps)}\n id={useMemoizedId(propId)}\n ref={triggerRef}\n data-test-id={`${dataTestId}-trigger`}\n className={merge([\n 'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n size === DropdownSize.Small\n ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n showClear ? 'tw-pr-11' : 'tw-pr-7',\n textColorClass,\n ])}\n >\n <MenuItemContent\n ariaProps={valueProps}\n title={activeItem?.title || placeholder}\n decorator={decorator ?? activeItem?.decorator}\n subtitle={activeItem?.subtitle}\n size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n />\n </button>\n </Trigger>\n {!disabled && isOpen && heightIsReady && (\n <EnablePortalWrapper enablePortal={enablePortal}>\n <div\n ref={dropdownRef}\n style={{\n ...popperInstance.styles.popper,\n width: triggerRef.current?.getBoundingClientRect().width,\n minWidth: 'fit-content',\n }}\n {...popperInstance.attributes.popper}\n className=\"tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n key=\"content\"\n >\n <FocusScope restoreFocus>\n <div\n {...overlayProps}\n ref={overlayRef}\n style={autoResize ? { maxHeight } : {}}\n className=\"tw-flex tw-flex-col\"\n data-test-id={`${dataTestId}-menu`}\n role=\"dialog\"\n >\n <DismissButton onDismiss={() => close()} />\n <SelectMenu ariaProps={menuProps} state={state} menuBlocks={menuBlocks} scrollable />\n <DismissButton onDismiss={() => close()} />\n </div>\n </FocusScope>\n </div>\n </EnablePortalWrapper>\n )}\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n </div>\n );\n};\nDropdown.displayName = 'FonduesDropdown';\n"],"names":["DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","DropdownSize","DropdownAlignment","DropdownPosition","getActiveItem","blocks","activeId","getDisabledItemIds","getMenuItems","menuItems","id","Dropdown","propId","menuBlocks","onChange","activeItemId","placeholder","size","disabled","clearable","ariaLabel","decorator","autoResize","validation","Validation","alignment","position","emphasis","TriggerEmphasis","flip","dataTestId","enablePortal","activeItem","props","mapToAriaProps","state","useSelectState","key","triggerRef","useRef","triggerProps","valueProps","menuProps","useSelect","buttonProps","useButton","isOpen","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","useEffect","maxHeight","useDropdownAutoHeight","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","enabledTextColorState","MenuItemTextColorState","textState","textColorClass","menuItemTextColorRecord","MenuItemStyle","onClear","first","showClear","dropdownRef","placementMap","popperInstance","usePopper","React","Trigger","TriggerSize","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","EnablePortalWrapper","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.es.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { MenuBlock, MenuItemType, SelectMenu } from '@components/Dropdown/SelectMenu/SelectMenu';\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport {\n MenuItemContent,\n MenuItemContentSize,\n MenuItemStyle,\n MenuItemTextColorState,\n menuItemTextColorRecord,\n} from '@components/MenuItem';\nimport { Trigger, TriggerEmphasis, TriggerSize } from '@components/Trigger/Trigger';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { VariationPlacement } from '@popperjs/core';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { DismissButton, useOverlay } from '@react-aria/overlays';\nimport { HiddenSelect, useSelect } from '@react-aria/select';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSelectState } from '@react-stately/select';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport React, { ReactElement, useEffect, useRef } from 'react';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\n\nexport const DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT = 36; //Small Input height as default\n\nexport enum DropdownSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum DropdownAlignment {\n Start = 'Start',\n End = 'End',\n}\n\nexport enum DropdownPosition {\n Top = 'Top',\n Bottom = 'Bottom',\n}\n\nexport type DropdownProps = {\n id?: string;\n menuBlocks: MenuBlock[];\n onChange: (id?: string | number) => void;\n activeItemId?: string | number;\n placeholder?: string;\n size?: DropdownSize;\n disabled?: boolean;\n clearable?: boolean;\n ariaLabel?: string;\n decorator?: ReactElement;\n autoResize?: boolean;\n validation?: Validation;\n alignment?: DropdownAlignment;\n position?: DropdownPosition;\n emphasis?: TriggerEmphasis;\n flip?: boolean;\n 'data-test-id'?: string;\n enablePortal?: boolean;\n};\n\nconst getActiveItem = (blocks: MenuBlock[], activeId: string | number): MenuItemType | null => {\n const disabledItems = getDisabledItemIds(getMenuItems(blocks));\n if (disabledItems.has(activeId)) {\n return null;\n }\n\n return (\n blocks\n .map(({ menuItems }) => menuItems)\n .flat()\n .find(({ id }) => id.toString() === activeId?.toString()) || null\n );\n};\n\nexport const Dropdown = ({\n id: propId,\n menuBlocks,\n onChange,\n activeItemId,\n placeholder = 'Select item',\n size = DropdownSize.Small,\n disabled = false,\n clearable = false,\n ariaLabel = 'Dropdown',\n decorator,\n autoResize = true,\n validation = Validation.Default,\n alignment = DropdownAlignment.Start,\n position = DropdownPosition.Bottom,\n emphasis = TriggerEmphasis.Default,\n flip = false,\n 'data-test-id': dataTestId = 'dropdown',\n enablePortal = true,\n}: DropdownProps): ReactElement => {\n const activeItem = !!activeItemId ? getActiveItem(menuBlocks, activeItemId) : null;\n const props = mapToAriaProps(ariaLabel, menuBlocks);\n const state = useSelectState({\n ...props,\n defaultSelectedKey: activeItemId,\n onSelectionChange: (key) => onChange(key),\n disabledKeys: getDisabledItemIds(getMenuItems(menuBlocks)),\n });\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n const { triggerProps, valueProps, menuProps } = useSelect({ ...props, isDisabled: disabled }, state, triggerRef);\n\n const { buttonProps } = useButton({ ...triggerProps, isDisabled: disabled }, triggerRef);\n const { isOpen } = state;\n const { isFocusVisible, focusProps } = useFocusRing();\n const overlayRef = useRef<HTMLDivElement | null>(null);\n const { overlayProps } = useOverlay(\n { isOpen, onClose: () => state.close(), shouldCloseOnBlur: true, isDismissable: true },\n overlayRef,\n );\n\n useEffect(() => {\n if (state.disabledKeys.has(activeItemId as string)) {\n return;\n }\n\n if (activeItemId !== state.selectedKey) {\n state.setSelectedKey(activeItemId as string);\n }\n }, [activeItemId]);\n\n const { maxHeight } = useDropdownAutoHeight(triggerRef, { isOpen, autoResize });\n\n const heightIsReady = !autoResize || maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n const enabledTextColorState = activeItem ? MenuItemTextColorState.Active : MenuItemTextColorState.Default;\n const textState = disabled ? MenuItemTextColorState.Disabled : enabledTextColorState;\n\n const textColorClass = activeItem\n ? menuItemTextColorRecord[activeItem.style || MenuItemStyle.Primary][textState]\n : 'tw-text-text-x-weak';\n\n const onClear = clearable\n ? () => {\n state.setSelectedKey('');\n const first = state.collection.getFirstKey();\n if (first) {\n state.selectionManager.setFocusedKey(first);\n }\n }\n : undefined;\n\n const showClear = !!activeItem && !!onClear;\n const dropdownRef = useRef<HTMLDivElement | null>(null);\n\n const placementMap: Record<string, VariationPlacement> = {\n ['Top-Start']: 'top-start',\n ['Top-End']: 'top-end',\n ['Bottom-Start']: 'bottom-start',\n ['Bottom-End']: 'bottom-end',\n };\n const popperInstance = usePopper(triggerRef?.current, dropdownRef.current, {\n placement: placementMap[`${position}-${alignment}`],\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n return (\n <div className=\"tw-relative tw-w-full tw-font-sans tw-text-s\" data-test-id={dataTestId}>\n <Trigger\n disabled={disabled}\n buttonProps={buttonProps}\n isFocusVisible={!disabled && isFocusVisible}\n isOpen={isOpen}\n size={size === DropdownSize.Large ? TriggerSize.Large : TriggerSize.Small}\n emphasis={emphasis}\n onClear={onClear}\n showClear={showClear}\n validation={validation}\n >\n <HiddenSelect state={state} triggerRef={triggerRef} />\n <button\n {...mergeProps(buttonProps, focusProps)}\n id={useMemoizedId(propId)}\n ref={triggerRef}\n data-test-id={`${dataTestId}-trigger`}\n className={merge([\n 'tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none',\n size === DropdownSize.Small\n ? 'tw-py-2 tw-pl-3 tw-min-h-[34px]'\n : 'tw-pl-5 tw-py-4 tw-min-h-[60px]',\n showClear ? 'tw-pr-12' : 'tw-pr-8',\n textColorClass,\n ])}\n >\n <MenuItemContent\n ariaProps={valueProps}\n title={activeItem?.title || placeholder}\n decorator={decorator ?? activeItem?.decorator}\n subtitle={activeItem?.subtitle}\n size={size === DropdownSize.Small ? MenuItemContentSize.Small : MenuItemContentSize.Large}\n />\n </button>\n </Trigger>\n {!disabled && isOpen && heightIsReady && (\n <EnablePortalWrapper enablePortal={enablePortal}>\n <div\n ref={dropdownRef}\n style={{\n ...popperInstance.styles.popper,\n width: triggerRef.current?.getBoundingClientRect().width,\n minWidth: 'fit-content',\n }}\n {...popperInstance.attributes.popper}\n className=\"tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden\"\n key=\"content\"\n >\n <FocusScope restoreFocus>\n <div\n {...overlayProps}\n ref={overlayRef}\n style={autoResize ? { maxHeight } : {}}\n className=\"tw-flex tw-flex-col\"\n data-test-id={`${dataTestId}-menu`}\n role=\"dialog\"\n >\n <DismissButton onDismiss={() => close()} />\n <SelectMenu ariaProps={menuProps} state={state} menuBlocks={menuBlocks} scrollable />\n <DismissButton onDismiss={() => close()} />\n </div>\n </FocusScope>\n </div>\n </EnablePortalWrapper>\n )}\n {validation === Validation.Loading && (\n <span className=\"tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n </div>\n );\n};\nDropdown.displayName = 'FonduesDropdown';\n"],"names":["DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","DropdownSize","DropdownAlignment","DropdownPosition","getActiveItem","blocks","activeId","getDisabledItemIds","getMenuItems","menuItems","id","Dropdown","propId","menuBlocks","onChange","activeItemId","placeholder","size","disabled","clearable","ariaLabel","decorator","autoResize","validation","Validation","alignment","position","emphasis","TriggerEmphasis","flip","dataTestId","enablePortal","activeItem","props","mapToAriaProps","state","useSelectState","key","triggerRef","useRef","triggerProps","valueProps","menuProps","useSelect","buttonProps","useButton","isOpen","isFocusVisible","focusProps","useFocusRing","overlayRef","overlayProps","useOverlay","useEffect","maxHeight","useDropdownAutoHeight","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","enabledTextColorState","MenuItemTextColorState","textState","textColorClass","menuItemTextColorRecord","MenuItemStyle","onClear","first","showClear","dropdownRef","placementMap","popperInstance","usePopper","React","Trigger","TriggerSize","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","EnablePortalWrapper","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"mappings":"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"}
|
|
@@ -3,15 +3,15 @@ import { useFocusRing as u } from "@react-aria/focus";
|
|
|
3
3
|
import { FOCUS_STYLE as m, FOCUS_VISIBLE_STYLE as v } from "../../utilities/focusStyle.es.js";
|
|
4
4
|
import { merge as r } from "../../utilities/merge.es.js";
|
|
5
5
|
import { Validation as n, validationClassMap as S } from "../../utilities/validation.es.js";
|
|
6
|
-
import
|
|
6
|
+
import e from "react";
|
|
7
7
|
import F from "../../foundation/Icon/Generated/IconCross.es.js";
|
|
8
8
|
import C from "../../foundation/Icon/Generated/IconTrashBin.es.js";
|
|
9
9
|
import N from "../../foundation/Icon/Generated/IconCaretDown.es.js";
|
|
10
10
|
import I from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
|
|
11
|
-
var h = /* @__PURE__ */ ((
|
|
12
|
-
const y = (
|
|
11
|
+
var h = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(h || {}), D = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Weak = "Weak", t))(D || {});
|
|
12
|
+
const y = (t, l, s, i, o) => r([
|
|
13
13
|
"tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]",
|
|
14
|
-
|
|
14
|
+
t && m,
|
|
15
15
|
l ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : r([
|
|
16
16
|
"hover:tw-border-line-xx-strong",
|
|
17
17
|
i === "Weak" ? "" : "tw-bg-base",
|
|
@@ -19,7 +19,7 @@ const y = (e, l, s, i, o) => r([
|
|
|
19
19
|
i === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : S[o]
|
|
20
20
|
])
|
|
21
21
|
]), z = ({
|
|
22
|
-
buttonProps:
|
|
22
|
+
buttonProps: t,
|
|
23
23
|
onClear: l,
|
|
24
24
|
onDelete: s,
|
|
25
25
|
children: i,
|
|
@@ -33,14 +33,14 @@ const y = (e, l, s, i, o) => r([
|
|
|
33
33
|
/* Default */
|
|
34
34
|
}) => {
|
|
35
35
|
const { focusProps: x, isFocusVisible: d } = u(), { focusProps: k, isFocusVisible: E } = u();
|
|
36
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ e.createElement(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
"data-test-id": "trigger",
|
|
40
40
|
className: y(b, o, c, g, a)
|
|
41
41
|
},
|
|
42
42
|
i,
|
|
43
|
-
/* @__PURE__ */
|
|
43
|
+
/* @__PURE__ */ e.createElement(
|
|
44
44
|
"div",
|
|
45
45
|
{
|
|
46
46
|
className: r([
|
|
@@ -48,7 +48,7 @@ const y = (e, l, s, i, o) => r([
|
|
|
48
48
|
f === "Large" ? "tw-right-5 tw-gap-1.5" : "tw-right-3 tw-gap-1"
|
|
49
49
|
])
|
|
50
50
|
},
|
|
51
|
-
p && /* @__PURE__ */
|
|
51
|
+
p && /* @__PURE__ */ e.createElement(
|
|
52
52
|
"button",
|
|
53
53
|
{
|
|
54
54
|
...x,
|
|
@@ -61,9 +61,9 @@ const y = (e, l, s, i, o) => r([
|
|
|
61
61
|
]),
|
|
62
62
|
onClick: () => !!l && l()
|
|
63
63
|
},
|
|
64
|
-
/* @__PURE__ */
|
|
64
|
+
/* @__PURE__ */ e.createElement(F, { size: w.Size12 })
|
|
65
65
|
),
|
|
66
|
-
!!s && /* @__PURE__ */
|
|
66
|
+
!!s && /* @__PURE__ */ e.createElement(
|
|
67
67
|
"button",
|
|
68
68
|
{
|
|
69
69
|
...k,
|
|
@@ -77,15 +77,16 @@ const y = (e, l, s, i, o) => r([
|
|
|
77
77
|
]),
|
|
78
78
|
onClick: s
|
|
79
79
|
},
|
|
80
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ e.createElement(C, { size: w.Size12 })
|
|
81
81
|
),
|
|
82
|
-
/* @__PURE__ */
|
|
82
|
+
/* @__PURE__ */ e.createElement(
|
|
83
83
|
"button",
|
|
84
84
|
{
|
|
85
|
-
...
|
|
85
|
+
...t,
|
|
86
86
|
type: "button",
|
|
87
87
|
tabIndex: -1,
|
|
88
88
|
disabled: o,
|
|
89
|
+
"aria-hidden": !0,
|
|
89
90
|
className: r([
|
|
90
91
|
"tw-rounded",
|
|
91
92
|
o ? "tw-pointer-events-none tw-text-black-40" : r([
|
|
@@ -95,9 +96,9 @@ const y = (e, l, s, i, o) => r([
|
|
|
95
96
|
])
|
|
96
97
|
])
|
|
97
98
|
},
|
|
98
|
-
/* @__PURE__ */
|
|
99
|
-
)
|
|
100
|
-
(a === n.Error || a === n.Warning) && /* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ e.createElement("div", { className: r(["tw-transition-transform", c && "tw-rotate-180"]) }, /* @__PURE__ */ e.createElement(N, { size: w.Size16 }))
|
|
100
|
+
),
|
|
101
|
+
(a === n.Error || a === n.Warning) && /* @__PURE__ */ e.createElement(
|
|
101
102
|
"span",
|
|
102
103
|
{
|
|
103
104
|
className: r([
|
|
@@ -107,7 +108,7 @@ const y = (e, l, s, i, o) => r([
|
|
|
107
108
|
]),
|
|
108
109
|
"data-test-id": "error-state-exclamation-mark-icon"
|
|
109
110
|
},
|
|
110
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ e.createElement(I, null)
|
|
111
112
|
)
|
|
112
113
|
)
|
|
113
114
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { HTMLAttributes, ReactElement, ReactNode } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n children?: ReactNode;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}: TriggerProps): ReactElement => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <
|
|
1
|
+
{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { HTMLAttributes, ReactElement, ReactNode } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n children?: ReactNode;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}: TriggerProps): ReactElement => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <button\n {...buttonProps}\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n aria-hidden={true}\n className={merge([\n 'tw-rounded',\n disabled\n ? 'tw-pointer-events-none tw-text-black-40'\n : merge([\n 'group-hover:tw-text-black ',\n isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n FOCUS_VISIBLE_STYLE,\n ]),\n ])}\n >\n <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n <IconCaretDown size={IconSize.Size16} />\n </div>\n </button>\n\n {(validation === Validation.Error || validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n </div>\n );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":"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"}
|