npm - @frontify/fondue - Versions diffs - 12.2.4 → 12.2.6 - Mend

@frontify/fondue 12.2.4 → 12.2.6

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.

Files changed (12) hide show

package/dist/components/Dropdown/Dropdown.es.js.map +1 -1
package/dist/components/Menu/Menu.es.js.map +1 -1
package/dist/components/Slider/Slider.es.js.map +1 -1
package/dist/index.cjs.js.map +1 -1
package/dist/index.d.ts +11 -2
package/dist/index.umd.js.map +1 -1
package/dist/packages/charts/style.css +1 -1
package/dist/packages/components/style.css +1 -1
package/dist/packages/tokens/style.css +1 -1
package/dist/packages/tokens/tailwind.config.js +1 -1
package/dist/style.css +1 -1
package/package.json +4 -4

package/dist/components/Dropdown/Dropdown.es.js.map CHANGED Viewed

	@@ -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 { type 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 { type ReactElement, useEffect, useRef } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { type MenuBlock, type 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 { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\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 as string),\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","jsxs","Trigger","TriggerSize","jsx","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","EnablePortalWrapper","createElement","_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 { type 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 { type ReactElement, useEffect, useRef } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { getDisabledItemIds, getMenuItems, mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { type MenuBlock, type 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 { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\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\n/\n @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown-replaces-dropdown-and-menu the migration guide}.\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 as string),\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","jsxs","Trigger","TriggerSize","jsx","HiddenSelect","mergeProps","useMemoizedId","merge","MenuItemContent","MenuItemContentSize","EnablePortalWrapper","createElement","_a","FocusScope","DismissButton","SelectMenu","LoadingCircle","LoadingCircleSize"],"mappings":"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"}

package/dist/components/Menu/Menu.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode, type RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\nimport { merge } from '@utilities/merge';\n\ninterface Props {\n triggerRef?: RefObject<Element>;\n open?: boolean;\n children?: ReactNode \| ReactNode[];\n onClose?: () => void;\n offset?: [number, number];\n 'data-test-id'?: string;\n}\n\nexport type MenuProps = Props;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\nexport const Menu = ({\n triggerRef,\n children,\n open = true,\n offset = [0, 8],\n onClose,\n 'data-test-id': dataTestId = 'menu',\n}: MenuProps) => {\n const [isMenuOpen, setIsMenuOpen] = useState(open);\n const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement \| null>(null);\n const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement \| null>(null);\n\n const handleClickOutside = useCallback(() => {\n if (menuOpenerRef && isMenuOpen) {\n setIsMenuOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }, [menuOpenerRef, isMenuOpen, onClose]);\n\n const { dismissibleElementRef } = useClickOutside<HTMLOListElement>(handleClickOutside, [\n menuOpenerRef as HTMLElement,\n ]);\n\n const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n isMenuOpen,\n menuContainerRef,\n 'li > a, li > button:not(:disabled)',\n );\n\n const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n placement: 'bottom-start',\n strategy: 'fixed',\n modifiers: [\n {\n name: 'flip',\n enabled: true,\n },\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n ],\n });\n\n useEffect(() => {\n const trigger = triggerRef?.current;\n\n if (trigger) {\n setMenuOpenerRef(trigger as HTMLElement);\n }\n }, [triggerRef]);\n\n useEffect(() => {\n setIsMenuOpen(open);\n }, [open]);\n\n useEffect(() => {\n if (isMenuOpen && popperInstance.update) {\n popperInstance.update();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMenuOpen]);\n\n useEffect(() => {\n if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n setIsMenuOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n return (\n <nav\n className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n ref={setMenuContainerRef}\n style={menuOpenerRef ? popperInstance.styles.popper : {}}\n {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n data-test-id={dataTestId}\n role={isMenuOpen ? 'navigation' : ''}\n >\n <ol ref={dismissibleElementRef} className=\"tw-list-none\">\n {children}\n </ol>\n </nav>\n );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","dataTestId","isMenuOpen","setIsMenuOpen","useState","menuOpenerRef","setMenuOpenerRef","menuContainerRef","setMenuContainerRef","handleClickOutside","useCallback","dismissibleElementRef","useClickOutside","menuKeyboardNavigationAction","useMenuKeyboardNavigation","popperInstance","usePopper","useEffect","trigger","jsx"],"mappings":";;;;;;;AAqBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,~~GAEzDC~~,IAAO,CAAC;AAAA,EACjB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS,CAAC,GAAG,CAAC;AAAA,EACd,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAiB;AACb,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAI,GAC3C,CAACO,GAAeC,CAAgB,IAAIF,EAA6B,IAAI,GACrE,CAACG,GAAkBC,CAAmB,IAAIJ,EAA6B,IAAI,GAE3EK,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBH,MACjBC,EAAc,EAAK,GACfH,KACQA;EAGjB,GAAA,CAACK,GAAeH,GAAYF,CAAO,CAAC,GAEjC,EAAE,uBAAAW,EAAA,IAA0BC,EAAkCH,GAAoB;AAAA,IACpFJ;AAAA,EAAA,CACH,GAEKQ,IAA+BC;AAAA,IACjCZ;AAAA,IACAK;AAAA,IACA;AAAA,EAAA,GAGEQ,IAAiBC,EAAUX,GAAeE,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAR;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAkB,EAAU,MAAM;AACZ,UAAMC,IAAUtB,KAAA,gBAAAA,EAAY;AAE5B,IAAIsB,KACAZ,EAAiBY,CAAsB;AAAA,EAC3C,GACD,CAACtB,CAAU,CAAC,GAEfqB,EAAU,MAAM;AACZ,IAAAd,EAAcL,CAAI;AAAA,EAAA,GACnB,CAACA,CAAI,CAAC,GAETmB,EAAU,MAAM;AACR,IAAAf,KAAca,EAAe,UAC7BA,EAAe,OAAO;AAAA,EAC1B,GAED,CAACb,CAAU,CAAC,GAEfe,EAAU,MAAM;AACR,IAAAJ,MAAiC,gBAAgBR,MACjDF,EAAc,EAAK,GACfH,KACQA;EAGjB,GAAA,CAACa,GAA8Bb,GAASK,CAAa,CAAC,GAGrD,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW1B,EAAM,CAACD,GAAmBU,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,KAAKM;AAAA,MACL,OAAOH,IAAgBU,EAAe,OAAO,SAAS,CAAC;AAAA,MACtD,GAAIV,IAAgBU,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAcd;AAAA,MACd,MAAMC,IAAa,eAAe;AAAA,MAElC,4BAAC,MAAG,EAAA,KAAKS,GAAuB,WAAU,gBACrC,UAAAd,GACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}
1	+ {"version":3,"file":"Menu.es.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type ReactNode, type RefObject, useCallback, useEffect, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport { useMenuKeyboardNavigation } from '@components/Menu/useMenuKeyboardNavigation';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { INSET_BORDER } from '@utilities/borderStyle';\nimport { merge } from '@utilities/merge';\n\ninterface Props {\n triggerRef?: RefObject<Element>;\n open?: boolean;\n children?: ReactNode \| ReactNode[];\n onClose?: () => void;\n offset?: [number, number];\n 'data-test-id'?: string;\n}\n\nexport type MenuProps = Props;\n\nconst CONTAINER_BASE_CLASSES = 'tw-relative tw-bg-base tw-rounded tw-py-2 tw-shadow-mid tw-z-[120000]';\nconst CONTAINER_CLASSES = merge([CONTAINER_BASE_CLASSES, INSET_BORDER]);\n\n/\n @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown-replaces-dropdown-and-menu the migration guide}.\n */\nexport const Menu = ({\n triggerRef,\n children,\n open = true,\n offset = [0, 8],\n onClose,\n 'data-test-id': dataTestId = 'menu',\n}: MenuProps) => {\n const [isMenuOpen, setIsMenuOpen] = useState(open);\n const [menuOpenerRef, setMenuOpenerRef] = useState<HTMLElement \| null>(null);\n const [menuContainerRef, setMenuContainerRef] = useState<HTMLElement \| null>(null);\n\n const handleClickOutside = useCallback(() => {\n if (menuOpenerRef && isMenuOpen) {\n setIsMenuOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }, [menuOpenerRef, isMenuOpen, onClose]);\n\n const { dismissibleElementRef } = useClickOutside<HTMLOListElement>(handleClickOutside, [\n menuOpenerRef as HTMLElement,\n ]);\n\n const menuKeyboardNavigationAction = useMenuKeyboardNavigation(\n isMenuOpen,\n menuContainerRef,\n 'li > a, li > button:not(:disabled)',\n );\n\n const popperInstance = usePopper(menuOpenerRef, menuContainerRef, {\n placement: 'bottom-start',\n strategy: 'fixed',\n modifiers: [\n {\n name: 'flip',\n enabled: true,\n },\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n ],\n });\n\n useEffect(() => {\n const trigger = triggerRef?.current;\n\n if (trigger) {\n setMenuOpenerRef(trigger as HTMLElement);\n }\n }, [triggerRef]);\n\n useEffect(() => {\n setIsMenuOpen(open);\n }, [open]);\n\n useEffect(() => {\n if (isMenuOpen && popperInstance.update) {\n popperInstance.update();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isMenuOpen]);\n\n useEffect(() => {\n if (menuKeyboardNavigationAction === 'CLOSE_MENU' && menuOpenerRef) {\n setIsMenuOpen(false);\n if (onClose) {\n onClose();\n }\n }\n }, [menuKeyboardNavigationAction, onClose, menuOpenerRef]);\n\n return (\n <nav\n className={merge([CONTAINER_CLASSES, isMenuOpen ? 'tw-block' : 'tw-hidden'])}\n ref={setMenuContainerRef}\n style={menuOpenerRef ? popperInstance.styles.popper : {}}\n {...(menuOpenerRef ? popperInstance.attributes.popper : {})}\n data-test-id={dataTestId}\n role={isMenuOpen ? 'navigation' : ''}\n >\n <ol ref={dismissibleElementRef} className=\"tw-list-none\">\n {children}\n </ol>\n </nav>\n );\n};\nMenu.displayName = 'FondueMenu';\n"],"names":["CONTAINER_BASE_CLASSES","CONTAINER_CLASSES","merge","INSET_BORDER","Menu","triggerRef","children","open","offset","onClose","dataTestId","isMenuOpen","setIsMenuOpen","useState","menuOpenerRef","setMenuOpenerRef","menuContainerRef","setMenuContainerRef","handleClickOutside","useCallback","dismissibleElementRef","useClickOutside","menuKeyboardNavigationAction","useMenuKeyboardNavigation","popperInstance","usePopper","useEffect","trigger","jsx"],"mappings":";;;;;;;AAqBA,MAAMA,IAAyB,yEACzBC,IAAoBC,EAAM,CAACF,GAAwBG,CAAY,CAAC,GAKzDC,IAAO,CAAC;AAAA,EACjB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS,CAAC,GAAG,CAAC;AAAA,EACd,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAiB;AACb,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASN,CAAI,GAC3C,CAACO,GAAeC,CAAgB,IAAIF,EAA6B,IAAI,GACrE,CAACG,GAAkBC,CAAmB,IAAIJ,EAA6B,IAAI,GAE3EK,IAAqBC,EAAY,MAAM;AACzC,IAAIL,KAAiBH,MACjBC,EAAc,EAAK,GACfH,KACQA;EAGjB,GAAA,CAACK,GAAeH,GAAYF,CAAO,CAAC,GAEjC,EAAE,uBAAAW,EAAA,IAA0BC,EAAkCH,GAAoB;AAAA,IACpFJ;AAAA,EAAA,CACH,GAEKQ,IAA+BC;AAAA,IACjCZ;AAAA,IACAK;AAAA,IACA;AAAA,EAAA,GAGEQ,IAAiBC,EAAUX,GAAeE,GAAkB;AAAA,IAC9D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAAR;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAkB,EAAU,MAAM;AACZ,UAAMC,IAAUtB,KAAA,gBAAAA,EAAY;AAE5B,IAAIsB,KACAZ,EAAiBY,CAAsB;AAAA,EAC3C,GACD,CAACtB,CAAU,CAAC,GAEfqB,EAAU,MAAM;AACZ,IAAAd,EAAcL,CAAI;AAAA,EAAA,GACnB,CAACA,CAAI,CAAC,GAETmB,EAAU,MAAM;AACR,IAAAf,KAAca,EAAe,UAC7BA,EAAe,OAAO;AAAA,EAC1B,GAED,CAACb,CAAU,CAAC,GAEfe,EAAU,MAAM;AACR,IAAAJ,MAAiC,gBAAgBR,MACjDF,EAAc,EAAK,GACfH,KACQA;EAGjB,GAAA,CAACa,GAA8Bb,GAASK,CAAa,CAAC,GAGrD,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW1B,EAAM,CAACD,GAAmBU,IAAa,aAAa,WAAW,CAAC;AAAA,MAC3E,KAAKM;AAAA,MACL,OAAOH,IAAgBU,EAAe,OAAO,SAAS,CAAC;AAAA,MACtD,GAAIV,IAAgBU,EAAe,WAAW,SAAS,CAAC;AAAA,MACzD,gBAAcd;AAAA,MACd,MAAMC,IAAa,eAAe;AAAA,MAElC,4BAAC,MAAG,EAAA,KAAKS,GAAuB,WAAU,gBACrC,UAAAd,GACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AACAF,EAAK,cAAc;"}

package/dist/components/Slider/Slider.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.es.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n type AriaAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type TouchEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { TextInput, TextInputType } from '@components/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { merge } from '@utilities/merge';\nimport { clamp } from '@utilities/number';\nimport { Validation } from '@utilities/validation';\n\ntype BaseSliderProps = {\n id?: string;\n label?: string;\n value?: number;\n min?: number;\n max?: number;\n showMinMax?: boolean;\n step?: number;\n stepMultiplier?: number;\n onError?: (errorCode: SliderError) => void;\n onChange: (value: SliderValue) => void;\n valueSuffix?: string;\n disabled?: boolean;\n 'data-test-id'?: string;\n};\n\nexport type SliderValue = {\n raw: number;\n withSuffix: string;\n};\n\nexport type SliderProps = BaseSliderProps &\n Pick<AriaAttributes, 'aria-label'> &\n Pick<AriaAttributes, 'aria-labelledby'>;\n\nexport enum SliderError {\n MinMax = 'MinMax',\n ValueOutOfRange = 'ValueOutOfRange',\n ValueNaN = 'ValueNaN',\n}\n\nexport const MIN_DEFAULT_VALUE = 0;\nexport const MAX_DEFAULT_VALUE = 100;\nexport const STEP_DEFAULT_VALUE = 1;\nexport const STEP_MULTIPLIER_DEFAULT_VALUE = 5;\nexport const ARIA_LABEL_DEFAULT_VALUE = 'Slider text input';\nconst DEBOUNCE_INTERVAL = 3;\nconst INCREMENT_KEYS = ['ArrowUp', 'ArrowRight'];\nconst DECREMENT_KEYS = ['ArrowDown', 'ArrowLeft'];\nconst LIMITS_KEYS = ['Home', 'End'];\n\nexport const Slider = ({\n id: propId,\n label,\n value: propValue,\n min = MIN_DEFAULT_VALUE,\n max = MAX_DEFAULT_VALUE,\n showMinMax = false,\n step = STEP_DEFAULT_VALUE,\n stepMultiplier = STEP_MULTIPLIER_DEFAULT_VALUE,\n valueSuffix = '',\n onError,\n onChange,\n 'aria-label': ariaLabel = ARIA_LABEL_DEFAULT_VALUE,\n 'aria-labelledby': ariaLabelledBy,\n disabled = false,\n 'data-test-id': dataTestId = 'fondue-slider',\n}: SliderProps) => {\n const [value, setValue] = useState<number>();\n const [valueWithSuffix, setValueWithSuffix] = useState('');\n const [error, setError] = useState<SliderError>();\n const [percentagePosition, setPercentagePosition] = useState<number>();\n const [sliderRef, setSliderRef] = useState<HTMLButtonElement \| null>(null);\n const [isMouseOver, setIsMouseOver] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const id = useMemoizedId(propId);\n\n const onInputChange = (inputValue: string) => {\n // make sure the suffix will be added to the input field\n setValueWithSuffix(`${inputValue.replace(valueSuffix, '')}${valueSuffix}`);\n };\n\n const updateThumbPosition = useCallback(\n ({ clientX, rawValue }: { clientX?: number; rawValue?: number }) => {\n if (!sliderRef) {\n return;\n }\n\n const range = max - min;\n const sliderPosition = sliderRef.getBoundingClientRect().x;\n const trackSize = sliderRef.clientWidth;\n\n let percentage;\n if (clientX !== undefined) {\n const mousePosition = clientX;\n const positionInPixels = mousePosition - sliderPosition;\n percentage = positionInPixels / trackSize;\n } else {\n // if raw value, update thumb position independently of steps\n percentage = ((rawValue ?? min) - min) / range;\n setPercentagePosition(clamp(percentage, 0, 1) 100);\n return;\n }\n\n const newPosition = clamp(percentage, 0, 1);\n const totalSteps = range / step;\n const stepValue = clamp(Math.round(newPosition * totalSteps) * step + min, min, max);\n setPercentagePosition(((stepValue - min) / range) * 100);\n setValueWithSuffix(`${stepValue}${valueSuffix}`);\n },\n [sliderRef, max, min, step, valueSuffix],\n );\n\n const onDrag = useMemo(\n () =>\n !sliderRef\n ? () => {}\n : debounce((event: Event & { clientX: number; touches: [{ clientX: number }] }) => {\n if (disabled) {\n return;\n }\n updateThumbPosition({\n clientX: event.clientX ?? event.touches[0].clientX,\n });\n }, DEBOUNCE_INTERVAL),\n [updateThumbPosition, sliderRef, disabled],\n );\n\n const stopDrag = useCallback(() => {\n if (!sliderRef) {\n return;\n }\n\n setIsDragging(false);\n window.removeEventListener('mousemove', onDrag);\n window.removeEventListener('touchmove', onDrag);\n window.removeEventListener('mouseup', stopDrag);\n }, [sliderRef, onDrag]);\n\n const startDrag = (event: MouseEvent<HTMLButtonElement> \| TouchEvent<HTMLButtonElement>) => {\n if (!sliderRef \|\| disabled) {\n return;\n }\n\n setIsDragging(true);\n\n updateThumbPosition({\n clientX: (event as MouseEvent).clientX ?? (event as TouchEvent).touches[0].clientX,\n });\n\n window.addEventListener('mousemove', onDrag);\n window.addEventListener('touchmove', onDrag);\n window.addEventListener('mouseup', stopDrag);\n };\n\n const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (\n ![...INCREMENT_KEYS, ...DECREMENT_KEYS, ...LIMITS_KEYS].includes(event.key) \|\|\n value === undefined \|\|\n disabled\n ) {\n return;\n }\n\n event.preventDefault();\n\n let variation = 0;\n let rawValue = 0;\n if (DECREMENT_KEYS.includes(event.key)) {\n variation = -step;\n } else if (INCREMENT_KEYS.includes(event.key)) {\n variation = step;\n }\n\n if (!LIMITS_KEYS.includes(event.key)) {\n variation = event.shiftKey ? stepMultiplier : 1;\n rawValue = clamp(Math.floor(value / step) step + variation, min, max);\n } else {\n rawValue = event.key === 'Home' ? min : max;\n }\n\n setValue(rawValue);\n setValueWithSuffix(`${rawValue}${valueSuffix}`);\n };\n\n const onMouseOver = () => {\n if (disabled) {\n return;\n }\n\n setIsMouseOver(true);\n };\n\n const onMouseOut = () => {\n if (disabled) {\n return;\n }\n\n setIsMouseOver(false);\n };\n\n const onFocus = () => {\n if (disabled) {\n return;\n }\n\n setIsDragging(true);\n };\n\n const onBlur = () => {\n if (disabled) {\n return;\n }\n\n setIsDragging(false);\n };\n\n // This side effect will handle the initial property values\n // and their changes\n useEffect(() => {\n if (!sliderRef) {\n return;\n }\n\n if (min > max) {\n setError(SliderError.MinMax);\n return;\n }\n\n const raw = propValue ?? min;\n\n setValue(raw);\n setValueWithSuffix(`${raw}${valueSuffix}`);\n updateThumbPosition({ rawValue: raw });\n }, [sliderRef, updateThumbPosition, min, max, propValue, valueSuffix]);\n\n useEffect(() => {\n if (!valueWithSuffix) {\n return;\n }\n\n const valueWithoutSuffix = valueWithSuffix.replace(valueSuffix, '');\n const rawValue = +valueWithoutSuffix;\n\n if (Number.isNaN(rawValue) \|\| !valueWithoutSuffix) {\n setValue(undefined);\n setError(SliderError.ValueNaN);\n return;\n }\n\n if (rawValue < min \|\| rawValue > max) {\n setValue(undefined);\n setError(SliderError.ValueOutOfRange);\n return;\n }\n\n setError(undefined);\n setValue(rawValue);\n }, [valueWithSuffix, valueSuffix, min, max]);\n\n useEffect(() => {\n if (error \|\| value === undefined \|\| !valueWithSuffix) {\n return;\n }\n\n const valueWithoutSuffix = valueWithSuffix.replace(valueSuffix, '');\n const rawValue = +valueWithoutSuffix;\n\n // don't call onChange if value is invalid or different\n // than the value in the text field\n if (Number.isNaN(rawValue) \|\| value !== rawValue) {\n return;\n }\n\n updateThumbPosition({ rawValue: value });\n if (!disabled) {\n onChange({\n raw: value,\n withSuffix: valueWithSuffix.replace(valueSuffix, '') + valueSuffix,\n });\n }\n }, [value, valueWithSuffix, valueSuffix, error, onChange, updateThumbPosition, disabled]);\n\n useEffect(() => {\n if (error && onError) {\n onError(error);\n }\n }, [error, onError]);\n\n return (\n <div className=\"tw-flex tw-flex-col\" data-test-id={dataTestId} id={id}>\n <label\n id={`${id}-label`}\n htmlFor={id}\n className={merge([!label && 'tw-hidden', disabled && 'tw-text-text-disabled'])}\n data-test-id={`${dataTestId}-label`}\n >\n {label}\n </label>\n <div className=\"tw-flex\">\n <div className={merge(['tw-flex-1 tw-flex tw-items-center'])}>\n {showMinMax && (\n <div className={merge(['tw-mr-3', disabled && 'tw-text-text-disabled'])}>\n {min}\n {valueSuffix}\n </div>\n )}\n <button\n ref={setSliderRef}\n data-test-id={`${dataTestId}-interactive`}\n className=\"tw-flex-1 tw-relative tw-h-full tw-cursor-pointer disabled:tw-cursor-default tw-outline-none\"\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n onFocus={onFocus}\n onBlur={onBlur}\n onMouseDown={startDrag}\n onMouseUp={stopDrag}\n onTouchStart={startDrag}\n onTouchEnd={stopDrag}\n onKeyDown={onKeyDown}\n disabled={disabled}\n >\n <span className=\"tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral tw-flex-1\"></span>\n {percentagePosition !== undefined && (\n <span\n role=\"slider\"\n aria-valuenow={value}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-label={ariaLabel}\n aria-labelledby={label ? `${id}-label` : ariaLabelledBy}\n data-test-id={`${dataTestId}-track`}\n className={merge([\n 'tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-origin-left tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral-strong tw-flex-1',\n disabled && 'tw-bg-box-neutral',\n ])}\n style={{ width: `${percentagePosition}%` }}\n ></span>\n )}\n <span\n className={merge([\n 'tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-w-5 tw-h-5',\n 'after:tw-absolute after:tw-block after:tw-top-1/2 after:tw-left-1/2 after:tw--translate-y-1/2 after:tw--translate-x-1/2 after:tw-w-5 after:tw-h-5 after:tw-bg-base after:tw-rounded-full after:tw-border after:tw-border-line-strong',\n isMouseOver && !isDragging && 'after:tw-shadow',\n isDragging &&\n \"after:tw-border-line-xx-strong before:tw-content-[''] before:tw-opacity-25 before:tw-top-1/2 before:tw--translate-y-1/2 before:tw--translate-x-1/2 before:tw-left-1/2 before:tw-block before:tw-rounded-full before:tw-absolute before:tw-z-0 before:tw-w-9 before:tw-h-9 before:tw-bg-box-neutral-strong\",\n disabled && 'after:tw-bg-box-neutral after:tw-border-line-weak',\n ])}\n style={{ left: `${percentagePosition}%` }}\n ></span>\n </button>\n {showMinMax && (\n <div className={merge(['tw-ml-3', disabled && 'tw-text-text-disabled'])}>\n {max}\n {valueSuffix}\n </div>\n )}\n <div className=\"tw-w-16 tw-ml-3\">\n <TextInput\n id={`${id}-text-input`}\n value={valueWithSuffix}\n placeholder={ariaLabel}\n aria-labelledby={label ? `${id}-label` : ariaLabelledBy}\n type={TextInputType.Text}\n validation={error ? Validation.Error : Validation.Default}\n onChange={onInputChange}\n disabled={disabled}\n />\n </div>\n </div>\n </div>\n </div>\n );\n};\nSlider.displayName = 'FondueSlider';\n"],"names":["SliderError","MIN_DEFAULT_VALUE","MAX_DEFAULT_VALUE","STEP_DEFAULT_VALUE","STEP_MULTIPLIER_DEFAULT_VALUE","ARIA_LABEL_DEFAULT_VALUE","DEBOUNCE_INTERVAL","INCREMENT_KEYS","DECREMENT_KEYS","LIMITS_KEYS","Slider","propId","label","propValue","min","max","showMinMax","step","stepMultiplier","valueSuffix","onError","onChange","ariaLabel","ariaLabelledBy","disabled","dataTestId","value","setValue","useState","valueWithSuffix","setValueWithSuffix","error","setError","percentagePosition","setPercentagePosition","sliderRef","setSliderRef","isMouseOver","setIsMouseOver","isDragging","setIsDragging","id","useMemoizedId","onInputChange","inputValue","updateThumbPosition","useCallback","clientX","rawValue","range","sliderPosition","trackSize","percentage","clamp","newPosition","totalSteps","stepValue","onDrag","useMemo","debounce","event","stopDrag","startDrag","onKeyDown","variation","onMouseOver","onMouseOut","onFocus","onBlur","useEffect","raw","valueWithoutSuffix","jsx","merge","jsxs","TextInput","TextInputType","Validation"],"mappings":"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"}
1	+ {"version":3,"file":"Slider.es.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n type AriaAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type TouchEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { TextInput, TextInputType } from '@components/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { debounce } from '@utilities/debounce';\nimport { merge } from '@utilities/merge';\nimport { clamp } from '@utilities/number';\nimport { Validation } from '@utilities/validation';\n\ntype BaseSliderProps = {\n id?: string;\n label?: string;\n value?: number;\n min?: number;\n max?: number;\n showMinMax?: boolean;\n step?: number;\n stepMultiplier?: number;\n onError?: (errorCode: SliderError) => void;\n onChange: (value: SliderValue) => void;\n valueSuffix?: string;\n disabled?: boolean;\n 'data-test-id'?: string;\n};\n\nexport type SliderValue = {\n raw: number;\n withSuffix: string;\n};\n\nexport type SliderProps = BaseSliderProps &\n Pick<AriaAttributes, 'aria-label'> &\n Pick<AriaAttributes, 'aria-labelledby'>;\n\nexport enum SliderError {\n MinMax = 'MinMax',\n ValueOutOfRange = 'ValueOutOfRange',\n ValueNaN = 'ValueNaN',\n}\n\nexport const MIN_DEFAULT_VALUE = 0;\nexport const MAX_DEFAULT_VALUE = 100;\nexport const STEP_DEFAULT_VALUE = 1;\nexport const STEP_MULTIPLIER_DEFAULT_VALUE = 5;\nexport const ARIA_LABEL_DEFAULT_VALUE = 'Slider text input';\nconst DEBOUNCE_INTERVAL = 3;\nconst INCREMENT_KEYS = ['ArrowUp', 'ArrowRight'];\nconst DECREMENT_KEYS = ['ArrowDown', 'ArrowLeft'];\nconst LIMITS_KEYS = ['Home', 'End'];\n\n/\n @deprecated Use `Slider` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#slider the migration guide}.\n /\nexport const Slider = ({\n id: propId,\n label,\n value: propValue,\n min = MIN_DEFAULT_VALUE,\n max = MAX_DEFAULT_VALUE,\n showMinMax = false,\n step = STEP_DEFAULT_VALUE,\n stepMultiplier = STEP_MULTIPLIER_DEFAULT_VALUE,\n valueSuffix = '',\n onError,\n onChange,\n 'aria-label': ariaLabel = ARIA_LABEL_DEFAULT_VALUE,\n 'aria-labelledby': ariaLabelledBy,\n disabled = false,\n 'data-test-id': dataTestId = 'fondue-slider',\n}: SliderProps) => {\n const [value, setValue] = useState<number>();\n const [valueWithSuffix, setValueWithSuffix] = useState('');\n const [error, setError] = useState<SliderError>();\n const [percentagePosition, setPercentagePosition] = useState<number>();\n const [sliderRef, setSliderRef] = useState<HTMLButtonElement \| null>(null);\n const [isMouseOver, setIsMouseOver] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n const id = useMemoizedId(propId);\n\n const onInputChange = (inputValue: string) => {\n // make sure the suffix will be added to the input field\n setValueWithSuffix(`${inputValue.replace(valueSuffix, '')}${valueSuffix}`);\n };\n\n const updateThumbPosition = useCallback(\n ({ clientX, rawValue }: { clientX?: number; rawValue?: number }) => {\n if (!sliderRef) {\n return;\n }\n\n const range = max - min;\n const sliderPosition = sliderRef.getBoundingClientRect().x;\n const trackSize = sliderRef.clientWidth;\n\n let percentage;\n if (clientX !== undefined) {\n const mousePosition = clientX;\n const positionInPixels = mousePosition - sliderPosition;\n percentage = positionInPixels / trackSize;\n } else {\n // if raw value, update thumb position independently of steps\n percentage = ((rawValue ?? min) - min) / range;\n setPercentagePosition(clamp(percentage, 0, 1) 100);\n return;\n }\n\n const newPosition = clamp(percentage, 0, 1);\n const totalSteps = range / step;\n const stepValue = clamp(Math.round(newPosition * totalSteps) * step + min, min, max);\n setPercentagePosition(((stepValue - min) / range) * 100);\n setValueWithSuffix(`${stepValue}${valueSuffix}`);\n },\n [sliderRef, max, min, step, valueSuffix],\n );\n\n const onDrag = useMemo(\n () =>\n !sliderRef\n ? () => {}\n : debounce((event: Event & { clientX: number; touches: [{ clientX: number }] }) => {\n if (disabled) {\n return;\n }\n updateThumbPosition({\n clientX: event.clientX ?? event.touches[0].clientX,\n });\n }, DEBOUNCE_INTERVAL),\n [updateThumbPosition, sliderRef, disabled],\n );\n\n const stopDrag = useCallback(() => {\n if (!sliderRef) {\n return;\n }\n\n setIsDragging(false);\n window.removeEventListener('mousemove', onDrag);\n window.removeEventListener('touchmove', onDrag);\n window.removeEventListener('mouseup', stopDrag);\n }, [sliderRef, onDrag]);\n\n const startDrag = (event: MouseEvent<HTMLButtonElement> \| TouchEvent<HTMLButtonElement>) => {\n if (!sliderRef \|\| disabled) {\n return;\n }\n\n setIsDragging(true);\n\n updateThumbPosition({\n clientX: (event as MouseEvent).clientX ?? (event as TouchEvent).touches[0].clientX,\n });\n\n window.addEventListener('mousemove', onDrag);\n window.addEventListener('touchmove', onDrag);\n window.addEventListener('mouseup', stopDrag);\n };\n\n const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (\n ![...INCREMENT_KEYS, ...DECREMENT_KEYS, ...LIMITS_KEYS].includes(event.key) \|\|\n value === undefined \|\|\n disabled\n ) {\n return;\n }\n\n event.preventDefault();\n\n let variation = 0;\n let rawValue = 0;\n if (DECREMENT_KEYS.includes(event.key)) {\n variation = -step;\n } else if (INCREMENT_KEYS.includes(event.key)) {\n variation = step;\n }\n\n if (!LIMITS_KEYS.includes(event.key)) {\n variation = event.shiftKey ? stepMultiplier : 1;\n rawValue = clamp(Math.floor(value / step) step + variation, min, max);\n } else {\n rawValue = event.key === 'Home' ? min : max;\n }\n\n setValue(rawValue);\n setValueWithSuffix(`${rawValue}${valueSuffix}`);\n };\n\n const onMouseOver = () => {\n if (disabled) {\n return;\n }\n\n setIsMouseOver(true);\n };\n\n const onMouseOut = () => {\n if (disabled) {\n return;\n }\n\n setIsMouseOver(false);\n };\n\n const onFocus = () => {\n if (disabled) {\n return;\n }\n\n setIsDragging(true);\n };\n\n const onBlur = () => {\n if (disabled) {\n return;\n }\n\n setIsDragging(false);\n };\n\n // This side effect will handle the initial property values\n // and their changes\n useEffect(() => {\n if (!sliderRef) {\n return;\n }\n\n if (min > max) {\n setError(SliderError.MinMax);\n return;\n }\n\n const raw = propValue ?? min;\n\n setValue(raw);\n setValueWithSuffix(`${raw}${valueSuffix}`);\n updateThumbPosition({ rawValue: raw });\n }, [sliderRef, updateThumbPosition, min, max, propValue, valueSuffix]);\n\n useEffect(() => {\n if (!valueWithSuffix) {\n return;\n }\n\n const valueWithoutSuffix = valueWithSuffix.replace(valueSuffix, '');\n const rawValue = +valueWithoutSuffix;\n\n if (Number.isNaN(rawValue) \|\| !valueWithoutSuffix) {\n setValue(undefined);\n setError(SliderError.ValueNaN);\n return;\n }\n\n if (rawValue < min \|\| rawValue > max) {\n setValue(undefined);\n setError(SliderError.ValueOutOfRange);\n return;\n }\n\n setError(undefined);\n setValue(rawValue);\n }, [valueWithSuffix, valueSuffix, min, max]);\n\n useEffect(() => {\n if (error \|\| value === undefined \|\| !valueWithSuffix) {\n return;\n }\n\n const valueWithoutSuffix = valueWithSuffix.replace(valueSuffix, '');\n const rawValue = +valueWithoutSuffix;\n\n // don't call onChange if value is invalid or different\n // than the value in the text field\n if (Number.isNaN(rawValue) \|\| value !== rawValue) {\n return;\n }\n\n updateThumbPosition({ rawValue: value });\n if (!disabled) {\n onChange({\n raw: value,\n withSuffix: valueWithSuffix.replace(valueSuffix, '') + valueSuffix,\n });\n }\n }, [value, valueWithSuffix, valueSuffix, error, onChange, updateThumbPosition, disabled]);\n\n useEffect(() => {\n if (error && onError) {\n onError(error);\n }\n }, [error, onError]);\n\n return (\n <div className=\"tw-flex tw-flex-col\" data-test-id={dataTestId} id={id}>\n <label\n id={`${id}-label`}\n htmlFor={id}\n className={merge([!label && 'tw-hidden', disabled && 'tw-text-text-disabled'])}\n data-test-id={`${dataTestId}-label`}\n >\n {label}\n </label>\n <div className=\"tw-flex\">\n <div className={merge(['tw-flex-1 tw-flex tw-items-center'])}>\n {showMinMax && (\n <div className={merge(['tw-mr-3', disabled && 'tw-text-text-disabled'])}>\n {min}\n {valueSuffix}\n </div>\n )}\n <button\n ref={setSliderRef}\n data-test-id={`${dataTestId}-interactive`}\n className=\"tw-flex-1 tw-relative tw-h-full tw-cursor-pointer disabled:tw-cursor-default tw-outline-none\"\n onMouseOver={onMouseOver}\n onMouseOut={onMouseOut}\n onFocus={onFocus}\n onBlur={onBlur}\n onMouseDown={startDrag}\n onMouseUp={stopDrag}\n onTouchStart={startDrag}\n onTouchEnd={stopDrag}\n onKeyDown={onKeyDown}\n disabled={disabled}\n >\n <span className=\"tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral tw-flex-1\"></span>\n {percentagePosition !== undefined && (\n <span\n role=\"slider\"\n aria-valuenow={value}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-label={ariaLabel}\n aria-labelledby={label ? `${id}-label` : ariaLabelledBy}\n data-test-id={`${dataTestId}-track`}\n className={merge([\n 'tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-origin-left tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral-strong tw-flex-1',\n disabled && 'tw-bg-box-neutral',\n ])}\n style={{ width: `${percentagePosition}%` }}\n ></span>\n )}\n <span\n className={merge([\n 'tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-w-5 tw-h-5',\n 'after:tw-absolute after:tw-block after:tw-top-1/2 after:tw-left-1/2 after:tw--translate-y-1/2 after:tw--translate-x-1/2 after:tw-w-5 after:tw-h-5 after:tw-bg-base after:tw-rounded-full after:tw-border after:tw-border-line-strong',\n isMouseOver && !isDragging && 'after:tw-shadow',\n isDragging &&\n \"after:tw-border-line-xx-strong before:tw-content-[''] before:tw-opacity-25 before:tw-top-1/2 before:tw--translate-y-1/2 before:tw--translate-x-1/2 before:tw-left-1/2 before:tw-block before:tw-rounded-full before:tw-absolute before:tw-z-0 before:tw-w-9 before:tw-h-9 before:tw-bg-box-neutral-strong\",\n disabled && 'after:tw-bg-box-neutral after:tw-border-line-weak',\n ])}\n style={{ left: `${percentagePosition}%` }}\n ></span>\n </button>\n {showMinMax && (\n <div className={merge(['tw-ml-3', disabled && 'tw-text-text-disabled'])}>\n {max}\n {valueSuffix}\n </div>\n )}\n <div className=\"tw-w-16 tw-ml-3\">\n <TextInput\n id={`${id}-text-input`}\n value={valueWithSuffix}\n placeholder={ariaLabel}\n aria-labelledby={label ? `${id}-label` : ariaLabelledBy}\n type={TextInputType.Text}\n validation={error ? Validation.Error : Validation.Default}\n onChange={onInputChange}\n disabled={disabled}\n />\n </div>\n </div>\n </div>\n </div>\n );\n};\nSlider.displayName = 'FondueSlider';\n"],"names":["SliderError","MIN_DEFAULT_VALUE","MAX_DEFAULT_VALUE","STEP_DEFAULT_VALUE","STEP_MULTIPLIER_DEFAULT_VALUE","ARIA_LABEL_DEFAULT_VALUE","DEBOUNCE_INTERVAL","INCREMENT_KEYS","DECREMENT_KEYS","LIMITS_KEYS","Slider","propId","label","propValue","min","max","showMinMax","step","stepMultiplier","valueSuffix","onError","onChange","ariaLabel","ariaLabelledBy","disabled","dataTestId","value","setValue","useState","valueWithSuffix","setValueWithSuffix","error","setError","percentagePosition","setPercentagePosition","sliderRef","setSliderRef","isMouseOver","setIsMouseOver","isDragging","setIsDragging","id","useMemoizedId","onInputChange","inputValue","updateThumbPosition","useCallback","clientX","rawValue","range","sliderPosition","trackSize","percentage","clamp","newPosition","totalSteps","stepValue","onDrag","useMemo","debounce","event","stopDrag","startDrag","onKeyDown","variation","onMouseOver","onMouseOut","onFocus","onBlur","useEffect","raw","valueWithoutSuffix","jsx","merge","jsxs","TextInput","TextInputType","Validation"],"mappings":"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"}