npm - @chayns-components/core - Versions diffs - 5.4.7 → 5.4.8-alpha.0 - Mend

@chayns-components/core 5.4.7 → 5.4.8-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (462) hide show

package/lib/esm/components/slider-button/SliderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","useTheme","SliderButton","isDisabled","isSecondary","items","onChange","selectedButtonId","isRounded","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","sliderButtonRef","sliderButtonWrapperRef","popupRef","scope","animate","theme","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","otherItem","_","indexOf","show","hide","backgroundColor","color","buttonBackgroundColor","buttonDesign","thumbBackgroundColor","buttons","newItems","otherItems","elements","text","createElement","$isSecondary","$width","key","onClick","popupContent","$isSelected","push","ref","content","icons","pseudoButtons","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","hasMoreItems","$isDisabled","$isInvisible","$isRounded","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","style","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { PopupRef } from '../../types/popup';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonButtonsWrapper,\n StyledSliderButtonItem,\n StyledSliderButtonPopupContent,\n StyledSliderButtonPopupContentItem,\n StyledSliderButtonWrapper,\n} from './SliderButton.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type SliderButtonProps = {\n /*\n Whether the button is disabled and cannot be clicked anymore.\n /\n isDisabled?: boolean;\n /\n Displays the button in the secondary style.\n /\n isSecondary?: boolean;\n /\n The items that should be displayed in the slider button.\n /\n items: SliderButtonItem[];\n /\n Function to be executed when a button is selected. The id of the selected button is passed as an argument.\n * @param id\n /\n onChange?: (id: string) => void;\n /\n The id of the button that should be selected.\n /\n selectedButtonId?: string;\n /\n \n /\n isRounded?: boolean;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({\n isDisabled,\n isSecondary,\n items,\n onChange,\n selectedButtonId,\n isRounded = false,\n}) => {\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n const [shownItemsCount, setShownItemsCount] = useState(items.length);\n const [sliderSize, setSliderSize] = useState({ width: 0 });\n const [currentId, setCurrentId] = useState('');\n const [currentPopupId, setCurrentPopupId] = useState('');\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<PopupRef>(null);\n\n const [scope, animate] = useAnimate();\n\n const theme = useTheme() as Theme;\n\n const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n const elementSize = useElementSize(sliderButtonRef);\n\n useEffect(() => {\n if (elementSize) setSliderSize(elementSize);\n }, [elementSize]);\n\n const setPopupId = useCallback(\n (selectedId: string) => {\n const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n const newId = ids.find((id) => id === selectedId);\n\n if (newId) {\n setCurrentId('more');\n setCurrentPopupId(newId);\n\n return;\n }\n\n setCurrentId(selectedId);\n },\n [items, shownItemsCount],\n );\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n [initialItemWidth, items.length, sliderSize],\n );\n\n const maxShownItemsCount = useMemo(() => {\n let totalWidth = 0;\n let count = 0;\n\n while (count < items.length) {\n const visibleItems = items.slice(0, count + 1);\n const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n totalWidth += currentMaxWidth;\n count++;\n }\n\n return count;\n }, [items, sliderSize.width]);\n\n const itemWidth = useMemo(() => {\n const sliderWidth = sliderSize?.width \|\| 0;\n const itemCount = items.length \|\| 1;\n\n setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const setItemPosition = useCallback(\n (index: number) => {\n setCurrentIndex(index);\n\n void animation(itemWidth * index);\n },\n [animation, itemWidth],\n );\n\n useEffect(() => {\n if (typeof selectedButtonId === 'string') {\n let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n setCurrentId(selectedButtonId);\n\n setPopupId(selectedButtonId);\n\n if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n index = shownItemsCount - 1;\n }\n\n if (index >= 0) {\n setItemPosition(index);\n }\n }\n }, [\n animation,\n dragRange.right,\n isSliderBigger,\n itemWidth,\n items,\n selectedButtonId,\n setItemPosition,\n setPopupId,\n shownItemsCount,\n ]);\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n if (currentIndex === index && items.length === 2) {\n const otherItem = items.find((_, findIndex) => index !== findIndex);\n if (!otherItem) return;\n\n setPopupId(otherItem.id);\n setItemPosition(items.indexOf(otherItem));\n onChange?.(otherItem.id);\n return;\n }\n\n setPopupId(id);\n\n if (typeof onChange === 'function' && id !== 'more') {\n onChange(id);\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n setItemPosition(index);\n },\n [currentIndex, isDisabled, items, onChange, setItemPosition, setPopupId],\n );\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const thumbBackgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['207'];\n } else {\n color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const buttons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n const otherItems = items.slice(shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const popupContent = otherItems.map(({ id, text }) => (\n <StyledSliderButtonPopupContentItem\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n $isSelected={id === currentPopupId}\n >\n {text}\n </StyledSliderButtonPopupContentItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n <Popup\n ref={popupRef}\n content={\n <StyledSliderButtonPopupContent>\n {popupContent}\n </StyledSliderButtonPopupContent>\n }\n >\n <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n </Popup>\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [currentPopupId, handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n const pseudoButtons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n >\n <Icon icons={['fa fa-ellipsis']} />\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n }, []);\n\n const handleDragEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { middle, left } = position;\n\n let scrollLeft = 0;\n\n if (sliderButtonWrapperRef.current) {\n scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: scrollLeft - left,\n }).nearestPoint;\n }\n\n const { nearestIndex } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft,\n });\n\n const { nearestPoint } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: 0,\n });\n const hasMoreItems = items.length > shownItemsCount;\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n let id;\n\n if (hasMoreItems && nearestIndex === shownItemsCount - 1) {\n id = 'more';\n } else {\n id = items[nearestIndex]?.id;\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n if (typeof onChange === 'function' && id) {\n setPopupId(id);\n setCurrentIndex(nearestIndex);\n if (id !== 'more') onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, setPopupId, shownItemsCount, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <StyledSliderButtonButtonsWrapper $isInvisible>\n {pseudoButtons}\n </StyledSliderButtonButtonsWrapper>\n <StyledMotionSliderButtonThumb\n $isRounded={isRounded}\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={\n isSliderBigger\n ? { ...dragRange, right: dragRange.right - itemWidth }\n : { ...dragRange }\n }\n $width={itemWidth}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onClick={() => handleClick(currentId, currentIndex)}\n style={{ backgroundColor: thumbBackgroundColor }}\n />\n <StyledSliderButtonWrapper\n $isRounded={isRounded}\n $isDisabled={isDisabled}\n $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n ref={sliderButtonWrapperRef}\n style={{ backgroundColor }}\n >\n <AnimatePresence>\n <StyledSliderButtonButtonsWrapper>\n {buttons}\n </StyledSliderButtonButtonsWrapper>\n </AnimatePresence>\n </StyledSliderButtonWrapper>\n </StyledSliderButton>\n ),\n [\n backgroundColor,\n buttons,\n currentId,\n currentIndex,\n dragRange,\n handleClick,\n handleDragEnd,\n handleDragStart,\n isDisabled,\n isRounded,\n isSliderBigger,\n itemWidth,\n pseudoButtons,\n scope,\n thumbBackgroundColor,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useElementSize","useKeyboardFocusHighlighting","useColorScheme","calculateBiggestWidth","getNearestPoint","getThumbPosition","Icon","Popup","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","StyledSliderButtonWrapper","useTheme","useSliderButtonPopupKeyboard","useSliderButtonThumbKeyboard","SliderButton","isDisabled","isSecondary","items","onChange","selectedButtonId","isRounded","shouldEnableKeyboardHighlighting","dragRange","setDragRange","left","right","shownItemsCount","setShownItemsCount","length","sliderSize","setSliderSize","width","currentId","setCurrentId","currentPopupId","setCurrentPopupId","currentIndex","setCurrentIndex","isPopupOpen","setIsPopupOpen","sliderButtonRef","sliderButtonWrapperRef","popupRef","popupItemRefs","scope","animate","theme","colorScheme","shouldEnableKeyboardHighlightingEffective","shouldShowKeyboardHighlighting","initialItemWidth","elementSize","setPopupId","selectedId","ids","slice","map","id","newId","find","isSliderBigger","Math","floor","maxShownItemsCount","totalWidth","count","visibleItems","currentMaxWidth","itemWidth","sliderWidth","itemCount","animation","x","current","type","duration","setItemPosition","index","findIndex","handleClick","otherItem","_","indexOf","show","hide","backgroundColor","color","buttonBackgroundColor","buttonDesign","thumbBackgroundColor","popupItems","focusThumb","thumb","querySelector","focus","handlePopupKeyDown","onSelectPopupItem","handleThumbKeyDown","onSelectThumbItem","buttons","newItems","otherItems","elements","text","createElement","$isSecondary","$width","key","onClick","popupContent","popupIndex","onKeyDown","ref","element","tabIndex","role","$isSelected","push","onShow","onHide","content","icons","pseudoButtons","snapPoints","points","i","handleDragStart","handleDragEnd","position","middle","scrollLeft","nearestPoint","nearestIndex","hasMoreItems","$isDisabled","$isInvisible","$isRounded","drag","dragElastic","dragConstraints","onDragEnd","onDragStart","style","undefined","$shouldShowKeyboardHighlighting","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'motion/react';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useElementSize } from '../../hooks/element';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { PopupRef } from '../../types/popup';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport Icon from '../icon/Icon';\nimport Popup from '../popup/Popup';\nimport {\n StyledMotionSliderButtonThumb,\n StyledSliderButton,\n StyledSliderButtonButtonsWrapper,\n StyledSliderButtonItem,\n StyledSliderButtonPopupContent,\n StyledSliderButtonPopupContentItem,\n StyledSliderButtonWrapper,\n} from './SliderButton.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { SliderButtonProps } from './SliderButton.types';\nimport { useSliderButtonPopupKeyboard } from './useSliderButtonPopupKeyboard';\nimport { useSliderButtonThumbKeyboard } from './useSliderButtonThumbKeyboard';\n\nconst SliderButton: FC<SliderButtonProps> = ({\n isDisabled,\n isSecondary,\n items,\n onChange,\n selectedButtonId,\n isRounded = false,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n const [shownItemsCount, setShownItemsCount] = useState(items.length);\n const [sliderSize, setSliderSize] = useState({ width: 0 });\n const [currentId, setCurrentId] = useState('');\n const [currentPopupId, setCurrentPopupId] = useState('');\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const sliderButtonRef = useRef<HTMLDivElement>(null);\n const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<PopupRef>(null);\n const popupItemRefs = useRef<Array<HTMLDivElement \| null>>([]);\n\n const [scope, animate] = useAnimate();\n\n const theme = useTheme() as Theme;\n const colorScheme = useColorScheme();\n const shouldEnableKeyboardHighlightingEffective =\n shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;\n\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlightingEffective && !isDisabled,\n );\n\n const initialItemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n const elementSize = useElementSize(sliderButtonRef);\n\n useEffect(() => {\n if (elementSize) setSliderSize(elementSize);\n }, [elementSize]);\n\n const setPopupId = useCallback(\n (selectedId: string) => {\n const ids = items.slice(shownItemsCount - 1).map(({ id }) => id);\n\n const newId = ids.find((id) => id === selectedId);\n\n if (newId) {\n setCurrentId('more');\n setCurrentPopupId(newId);\n\n return;\n }\n\n setCurrentId(selectedId);\n },\n [items, shownItemsCount],\n );\n\n const isSliderBigger = useMemo(\n () => sliderSize && Math.floor(sliderSize.width / initialItemWidth) < items.length - 1,\n [initialItemWidth, items.length, sliderSize],\n );\n\n const maxShownItemsCount = useMemo(() => {\n let totalWidth = 0;\n let count = 0;\n\n while (count < items.length) {\n const visibleItems = items.slice(0, count + 1);\n const currentMaxWidth = calculateBiggestWidth(visibleItems) + 8;\n\n if (totalWidth + currentMaxWidth > sliderSize.width) break;\n\n totalWidth += currentMaxWidth;\n count++;\n }\n\n return count;\n }, [items, sliderSize.width]);\n\n const itemWidth = useMemo(() => {\n const sliderWidth = sliderSize?.width \|\| 0;\n const itemCount = items.length \|\| 1;\n\n setShownItemsCount(isSliderBigger ? maxShownItemsCount : itemCount);\n\n return sliderWidth / (isSliderBigger ? maxShownItemsCount : itemCount);\n }, [isSliderBigger, items.length, maxShownItemsCount, sliderSize?.width]);\n\n useEffect(() => {\n if (sliderSize) {\n const sliderWidth = itemWidth * (items.length - 1);\n\n const count = Math.floor(sliderSize.width / itemWidth);\n\n setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n }\n }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n const animation = useCallback(\n async (x: number) => {\n await animate(\n scope.current,\n { x },\n {\n type: 'tween',\n duration: 0.2,\n },\n );\n },\n [animate, scope],\n );\n\n const setItemPosition = useCallback(\n (index: number) => {\n setCurrentIndex(index);\n\n void animation(itemWidth * index);\n },\n [animation, itemWidth],\n );\n\n useEffect(() => {\n if (typeof selectedButtonId === 'string') {\n let index = items.findIndex(({ id }) => id === selectedButtonId);\n\n setCurrentId(selectedButtonId);\n\n setPopupId(selectedButtonId);\n\n if (items.length > shownItemsCount && index > shownItemsCount - 1) {\n index = shownItemsCount - 1;\n }\n\n if (index >= 0) {\n setItemPosition(index);\n }\n }\n }, [\n animation,\n dragRange.right,\n isSliderBigger,\n itemWidth,\n items,\n selectedButtonId,\n setItemPosition,\n setPopupId,\n shownItemsCount,\n ]);\n\n const handleClick = useCallback(\n (id: string, index: number) => {\n if (isDisabled) {\n return;\n }\n\n if (currentIndex === index && items.length === 2) {\n const otherItem = items.find((_, findIndex) => index !== findIndex);\n if (!otherItem) return;\n\n setPopupId(otherItem.id);\n setItemPosition(items.indexOf(otherItem));\n onChange?.(otherItem.id);\n return;\n }\n\n setPopupId(id);\n\n if (typeof onChange === 'function' && id !== 'more') {\n onChange(id);\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n setItemPosition(index);\n },\n [currentIndex, isDisabled, items, onChange, setItemPosition, setPopupId],\n );\n\n const backgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['202'];\n } else {\n color = theme.buttonBackgroundColor ?? theme['408'];\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const thumbBackgroundColor = useMemo(() => {\n let color;\n\n if (isSecondary) {\n color = theme['207'];\n } else {\n color = `rgba(${theme['405-rgb'] ?? ''}, 0.75)`;\n }\n\n if (theme.buttonDesign === '2') {\n color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n }\n\n return color;\n }, [isSecondary, theme]);\n\n const popupItems = useMemo(() => items.slice(shownItemsCount - 1), [items, shownItemsCount]);\n\n const focusThumb = useCallback(() => {\n const thumb = sliderButtonRef.current?.querySelector(\n '[data-slider-button-thumb=\"true\"]',\n ) as HTMLDivElement \| null;\n\n thumb?.focus();\n }, []);\n\n const { handlePopupKeyDown } = useSliderButtonPopupKeyboard({\n isPopupOpen,\n popupItems,\n currentPopupId,\n shownItemsCount,\n popupItemRefs,\n popupRef,\n focusThumb,\n onSelectPopupItem: handleClick,\n });\n\n const { handleThumbKeyDown } = useSliderButtonThumbKeyboard({\n currentId,\n currentIndex,\n shownItemsCount,\n items,\n onSelectThumbItem: handleClick,\n });\n\n const buttons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n const otherItems = items.slice(shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const popupContent = otherItems.map(({ id, text }, popupIndex) => (\n <StyledSliderButtonPopupContentItem\n key={`slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n onKeyDown={handlePopupKeyDown}\n ref={(element: HTMLDivElement \| null) => {\n popupItemRefs.current[popupIndex] = element;\n }}\n tabIndex={-1}\n role=\"button\"\n $isSelected={id === currentPopupId}\n >\n {text}\n </StyledSliderButtonPopupContentItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n <Popup\n ref={popupRef}\n onShow={() => {\n setIsPopupOpen(true);\n }}\n onHide={() => {\n setIsPopupOpen(false);\n popupItemRefs.current = [];\n }}\n content={\n <StyledSliderButtonPopupContent onKeyDown={handlePopupKeyDown}>\n {popupContent}\n </StyledSliderButtonPopupContent>\n }\n >\n <Icon icons={['fa fa-ellipsis']} color=\"white\" />\n </Popup>\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`slider-button-${id}`}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [\n currentPopupId,\n handleClick,\n handlePopupKeyDown,\n isSecondary,\n itemWidth,\n items,\n shownItemsCount,\n ]);\n\n const pseudoButtons = useMemo(() => {\n if (items.length > shownItemsCount) {\n const newItems = items.slice(0, shownItemsCount - 1);\n\n const elements = newItems.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n\n const id = 'more';\n\n elements.push(\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, newItems.length)}\n >\n <Icon icons={['fa fa-ellipsis']} />\n </StyledSliderButtonItem>,\n );\n\n return elements;\n }\n return items.map(({ id, text }, index) => (\n <StyledSliderButtonItem\n $isSecondary={isSecondary}\n $width={itemWidth}\n key={`pseudo-slider-button-${id}`}\n onClick={() => handleClick(id, index)}\n >\n {text}\n </StyledSliderButtonItem>\n ));\n }, [handleClick, isSecondary, itemWidth, items, shownItemsCount]);\n\n /*\n Creates an array with the snap points relative to the width of the items\n /\n const snapPoints = useMemo(() => {\n const points = [0];\n\n for (let i = 1; i < items.length; i++) {\n points.push(itemWidth i);\n }\n\n return points;\n }, [itemWidth, items.length]);\n\n const handleDragStart = useCallback(() => {\n void setRefreshScrollEnabled(false);\n }, []);\n\n const handleDragEnd = useCallback(() => {\n void setRefreshScrollEnabled(true);\n\n const position = getThumbPosition({ scope, itemWidth });\n\n if (!position) {\n return;\n }\n\n const { middle, left } = position;\n\n let scrollLeft = 0;\n\n if (sliderButtonWrapperRef.current) {\n scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: scrollLeft - left,\n }).nearestPoint;\n }\n\n const { nearestIndex } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft,\n });\n\n const { nearestPoint } = getNearestPoint({\n snapPoints,\n position: middle,\n scrollLeft: 0,\n });\n const hasMoreItems = items.length > shownItemsCount;\n\n if (nearestPoint >= 0 && nearestIndex >= 0) {\n void animation(nearestPoint);\n\n let id;\n\n if (hasMoreItems && nearestIndex === shownItemsCount - 1) {\n id = 'more';\n } else {\n id = items[nearestIndex]?.id;\n }\n\n if (popupRef.current) {\n if (id === 'more') {\n popupRef.current.show();\n } else {\n popupRef.current.hide();\n }\n }\n\n if (typeof onChange === 'function' && id) {\n setPopupId(id);\n setCurrentIndex(nearestIndex);\n if (id !== 'more') onChange(id);\n }\n }\n }, [animation, itemWidth, items, onChange, scope, setPopupId, shownItemsCount, snapPoints]);\n\n return useMemo(\n () => (\n <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n <StyledSliderButtonButtonsWrapper $isInvisible>\n {pseudoButtons}\n </StyledSliderButtonButtonsWrapper>\n <StyledMotionSliderButtonThumb\n $isRounded={isRounded}\n ref={scope}\n drag={isDisabled ? false : 'x'}\n dragElastic={0}\n dragConstraints={\n isSliderBigger\n ? { ...dragRange, right: dragRange.right - itemWidth }\n : { ...dragRange }\n }\n $width={itemWidth}\n onDragEnd={handleDragEnd}\n onDragStart={handleDragStart}\n onClick={() => handleClick(currentId, currentIndex)}\n style={{ backgroundColor: thumbBackgroundColor }}\n data-slider-button-thumb=\"true\"\n tabIndex={\n shouldEnableKeyboardHighlightingEffective && !isDisabled ? 0 : undefined\n }\n role={\n shouldEnableKeyboardHighlightingEffective && !isDisabled\n ? 'button'\n : undefined\n }\n onKeyDown={\n shouldEnableKeyboardHighlightingEffective && !isDisabled\n ? handleThumbKeyDown\n : undefined\n }\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n />\n <StyledSliderButtonWrapper\n $isRounded={isRounded}\n $isDisabled={isDisabled}\n $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n ref={sliderButtonWrapperRef}\n style={{ backgroundColor }}\n >\n <AnimatePresence>\n <StyledSliderButtonButtonsWrapper>\n {buttons}\n </StyledSliderButtonButtonsWrapper>\n </AnimatePresence>\n </StyledSliderButtonWrapper>\n </StyledSliderButton>\n ),\n [\n backgroundColor,\n buttons,\n currentId,\n currentIndex,\n dragRange,\n handleClick,\n handleDragEnd,\n handleDragStart,\n handleThumbKeyDown,\n isDisabled,\n isRounded,\n isSliderBigger,\n itemWidth,\n pseudoButtons,\n scope,\n shouldEnableKeyboardHighlightingEffective,\n shouldShowKeyboardHighlighting,\n thumbBackgroundColor,\n ],\n );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/slider-button/SliderButton.styles.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledSliderButton = styled.div`
     opacity: ${({
   $isDisabled
@@ -75,6 +76,10 @@ export const StyledSliderButtonPopupContentItem = styled.div`
   theme
 }) => $isSelected ? theme['secondary-102'] : undefined};
     padding: 4px 12px;
+    &:focus-visible {
+        ${keyboardFocusHighlightingRingCss};
+    }
 `;
 export const StyledSliderButtonButtonsWrapper = styled.div`
     position: absolute;
@@ -113,5 +118,13 @@ export const StyledMotionSliderButtonThumb = styled(motion.div)`
     justify-content: center;
     align-items: center;
     cursor: pointer;
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 //# sourceMappingURL=SliderButton.styles.js.map

package/lib/esm/components/slider-button/SliderButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","$isDisabled","StyledSliderButtonWrapper","$isRounded","$width","StyledSliderButtonItem","$isSecondary","theme","text","buttonColor","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","$isSelected","undefined","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n width: 100%;\n touch-action: none;\n position: relative;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{\n $width: number;\n $isDisabled?: boolean;\n $isRounded: boolean;\n}>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n align-items: center;\n border-radius: ${({ $isRounded }) => ($isRounded ? 32 : 3)}px;\n border: none;\n color: white;\n cursor: pointer;\n display: inline-flex;\n line-height: 1.15;\n height: 32px;\n position: relative;\n user-select: none;\n transition: opacity 0.3s ease;\n\n width: ${({ $width }) => $width}px;\n\n max-width: 100%;\n overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n overflow-y: hidden;\n\n // Chrome\n &::-webkit-scrollbar {\n display: none;\n }\n\n // IE and Edge\n -ms-overflow-style: none;\n\n // Firefox\n scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{\n $isSecondary?: boolean;\n $width: number;\n}>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n padding: 7px 12px;\n min-width: ${({ $width }) => $width}px;\n max-width: ${({ $width }) => $width}px;\n display: flex;\n white-space: nowrap;\n justify-content: center;\n color: ${({ $isSecondary, theme }: StyledSliderButtonItemProps) =>\n $isSecondary ? theme.text : (theme.buttonColor ?? 'white')};\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{ $isSelected?: boolean }>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n cursor: pointer;\n background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n $isSelected ? theme['secondary-102'] : undefined};\n padding: 4px 12px;\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n position: absolute;\n z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n display: flex;\n cursor: pointer;\n align-items: center;\n pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number; $isRounded: boolean }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n opacity: 1;\n width: ${({ $width }) => $width - 8}px;\n position: absolute;\n border-radius: ${({ $isRounded }) => ($isRounded ? 24 : 3)}px;\n top: 4px;\n left: 4px;\n white-space: nowrap;\n z-index: 3;\n height: 24px;\n padding: 7px 12px;\n display: flex;\n color: white;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,~~MAAM~~,mBAAmB;~~AAKtC~~,OAAO,MAAMC,kBAAkB,~~GAAGD~~,MAAM,~~CAACE~~,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,yBAAyB,~~GAAGJ~~,MAAM,~~CAACE~~,GAAmC;AACnF;AACA,qBAAqB,CAAC;EAAEG;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,sBAAsB,~~GAAGP~~,MAAM,~~CAACE~~,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE,YAAY;EAAEC;AAAmC,CAAC,KAC1DD,YAAY,GAAGC,KAAK,CAACC,IAAI,GAAID,KAAK,CAACE,WAAW,IAAI,OAAQ;AAClE,CAAC;AAED,OAAO,MAAMC,8BAA8B,~~GAAGZ~~,MAAM,~~CAACE~~,GAAG;AACxD;AACA;AACA,CAAC;~~AAID~~,OAAO,MAAMW,kCAAkC,~~GAAGb~~,MAAM,~~CAACE~~,GAA4C;AACrG;AACA;AACA;AACA,wBAAwB,CAAC;EAAEY,WAAW;EAAEL;AAA+C,CAAC,KAChFK,WAAW,GAAGL,KAAK,CAAC,eAAe,CAAC,GAAGM,SAAS;AACxD;AACA,CAAC;AAID,OAAO,~~MAAMC~~,gCAAgC,~~GAAGhB~~,MAAM,~~CAACE~~,GAA0C;AACjG;AACA,eAAe,CAAC;EAAEe;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;~~AAID~~,OAAO,MAAMC,6BAA6B,~~GAAGlB~~,MAAM,CAACD,MAAM,~~CAACG~~,GAAG,CAAqC;AACnG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA,qBAAqB,CAAC;EAAED;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SliderButton.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledSliderButton","div","$isDisabled","StyledSliderButtonWrapper","$isRounded","$width","StyledSliderButtonItem","$isSecondary","theme","text","buttonColor","StyledSliderButtonPopupContent","StyledSliderButtonPopupContentItem","$isSelected","undefined","StyledSliderButtonButtonsWrapper","$isInvisible","StyledMotionSliderButtonThumb","$shouldShowKeyboardHighlighting"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n width: 100%;\n touch-action: none;\n position: relative;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{\n $width: number;\n $isDisabled?: boolean;\n $isRounded: boolean;\n}>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n align-items: center;\n border-radius: ${({ $isRounded }) => ($isRounded ? 32 : 3)}px;\n border: none;\n color: white;\n cursor: pointer;\n display: inline-flex;\n line-height: 1.15;\n height: 32px;\n position: relative;\n user-select: none;\n transition: opacity 0.3s ease;\n\n width: ${({ $width }) => $width}px;\n\n max-width: 100%;\n overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n overflow-y: hidden;\n\n // Chrome\n &::-webkit-scrollbar {\n display: none;\n }\n\n // IE and Edge\n -ms-overflow-style: none;\n\n // Firefox\n scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{\n $isSecondary?: boolean;\n $width: number;\n}>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n padding: 7px 12px;\n min-width: ${({ $width }) => $width}px;\n max-width: ${({ $width }) => $width}px;\n display: flex;\n white-space: nowrap;\n justify-content: center;\n color: ${({ $isSecondary, theme }: StyledSliderButtonItemProps) =>\n $isSecondary ? theme.text : (theme.buttonColor ?? 'white')};\n`;\n\nexport const StyledSliderButtonPopupContent = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ntype StyledSliderButtonPopupContentItemProps = WithTheme<{\n $isSelected?: boolean;\n}>;\n\nexport const StyledSliderButtonPopupContentItem = styled.div<StyledSliderButtonPopupContentItemProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n cursor: pointer;\n background-color: ${({ $isSelected, theme }: StyledSliderButtonPopupContentItemProps) =>\n $isSelected ? theme['secondary-102'] : undefined};\n padding: 4px 12px;\n\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss};\n }\n`;\n\ntype StyledSliderButtonButtonsWrapperProps = WithTheme<{ $isInvisible?: boolean }>;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div<StyledSliderButtonButtonsWrapperProps>`\n position: absolute;\n z-index: ${({ $isInvisible }) => ($isInvisible ? '2' : '4')};\n opacity: ${({ $isInvisible }) => ($isInvisible ? 0 : 1)};\n display: flex;\n cursor: pointer;\n align-items: center;\n pointer-events: ${({ $isInvisible }) => ($isInvisible ? 'auto' : 'none')};\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{\n $width: number;\n $isRounded: boolean;\n $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n font-size: 110%;\n font-family: 'Roboto Medium', serif;\n opacity: 1;\n width: ${({ $width }) => $width - 8}px;\n position: absolute;\n border-radius: ${({ $isRounded }) => ($isRounded ? 24 : 3)}px;\n top: 4px;\n left: 4px;\n white-space: nowrap;\n z-index: 3;\n height: 24px;\n padding: 7px 12px;\n display: flex;\n color: white;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAI/F,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACI,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,yBAAyB,GAAGN,MAAM,CAACI,GAAmC;AACnF;AACA,qBAAqB,CAAC;EAAEG;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA,kBAAkB,CAAC;EAAEH;AAAY,CAAC,KAAMA,WAAW,GAAG,QAAQ,GAAG,QAAS;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMI,sBAAsB,GAAGT,MAAM,CAACI,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiB,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM;AACvC,iBAAiB,CAAC;EAAEA;AAAO,CAAC,KAAKA,MAAM;AACvC;AACA;AACA;AACA,aAAa,CAAC;EAAEE,YAAY;EAAEC;AAAmC,CAAC,KAC1DD,YAAY,GAAGC,KAAK,CAACC,IAAI,GAAID,KAAK,CAACE,WAAW,IAAI,OAAQ;AAClE,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGd,MAAM,CAACI,GAAG;AACxD;AACA;AACA,CAAC;AAMD,OAAO,MAAMW,kCAAkC,GAAGf,MAAM,CAACI,GAA4C;AACrG;AACA;AACA;AACA,wBAAwB,CAAC;EAAEY,WAAW;EAAEL;AAA+C,CAAC,KAChFK,WAAW,GAAGL,KAAK,CAAC,eAAe,CAAC,GAAGM,SAAS;AACxD;AACA;AACA;AACA,UAAUf,gCAAgC;AAC1C;AACA,CAAC;AAID,OAAO,MAAMgB,gCAAgC,GAAGlB,MAAM,CAACI,GAA0C;AACjG;AACA,eAAe,CAAC;EAAEe;AAAa,CAAC,KAAMA,YAAY,GAAG,GAAG,GAAG,GAAI;AAC/D,eAAe,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,CAAC,GAAG,CAAE;AAC3D;AACA;AACA;AACA,sBAAsB,CAAC;EAAEA;AAAa,CAAC,KAAMA,YAAY,GAAG,MAAM,GAAG,MAAO;AAC5E,CAAC;AAQD,OAAO,MAAMC,6BAA6B,GAAGpB,MAAM,CAACD,MAAM,CAACK,GAAG,CAAqC;AACnG;AACA;AACA;AACA,aAAa,CAAC;EAAEI;AAAO,CAAC,KAAKA,MAAM,GAAG,CAAC;AACvC;AACA,qBAAqB,CAAC;EAAED;AAAW,CAAC,KAAMA,UAAU,GAAG,EAAE,GAAG,CAAE;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEc;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BpB,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/slider-button/SliderButton.types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=SliderButton.types.js.map

package/lib/esm/components/slider-button/SliderButton.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SliderButton.types.js","names":[],"sources":["../../../../src/components/slider-button/SliderButton.types.ts"],"sourcesContent":["import type { SliderButtonItem } from '../../types/slider-button';\n\nexport type SliderButtonProps = {\n /**\n * Whether the button is disabled and cannot be clicked anymore.\n */\n isDisabled?: boolean;\n /**\n * Displays the button in the secondary style.\n */\n isSecondary?: boolean;\n /**\n * The items that should be displayed in the slider button.\n */\n items: SliderButtonItem[];\n /**\n * Function to be executed when a button is selected. The id of the selected button is passed as an argument.\n * @param id\n */\n onChange?: (id: string) => void;\n /**\n * The id of the button that should be selected.\n */\n selectedButtonId?: string;\n /**\n *\n */\n isRounded?: boolean;\n /**\n * Enables keyboard-only focus highlighting.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js ADDED Viewed

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+export const useSliderButtonPopupKeyboard = ({
+  isPopupOpen,
+  popupItems,
+  currentPopupId,
+  shownItemsCount,
+  popupItemRefs,
+  popupRef,
+  focusThumb,
+  onSelectPopupItem
+}) => {
+  const [focusedPopupIndex, setFocusedPopupIndex] = useState(0);
+  useEffect(() => {
+    if (!isPopupOpen) {
+      return;
+    }
+    const selectedIndex = popupItems.findIndex(({
+      id
+    }) => id === currentPopupId);
+    const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;
+    setFocusedPopupIndex(initialIndex);
+    window.requestAnimationFrame(() => {
+      popupItemRefs.current[initialIndex]?.focus();
+    });
+  }, [currentPopupId, isPopupOpen, popupItems, popupItemRefs]);
+  const handlePopupKeyDown = useCallback(event => {
+    if (!isPopupOpen || popupItems.length === 0) {
+      return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const direction = event.key === 'ArrowDown' ? 1 : -1;
+      const nextIndex = (focusedPopupIndex + direction + popupItems.length) % popupItems.length;
+      setFocusedPopupIndex(nextIndex);
+      popupItemRefs.current[nextIndex]?.focus();
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const nextItem = popupItems[focusedPopupIndex];
+      if (nextItem) {
+        onSelectPopupItem(nextItem.id, Math.max(0, shownItemsCount - 1));
+      }
+      return;
+    }
+    if (event.key === 'Escape' || event.key === 'ArrowLeft' || event.key === 'Tab') {
+      event.preventDefault();
+      popupRef.current?.hide();
+      focusThumb();
+    }
+  }, [focusThumb, focusedPopupIndex, isPopupOpen, onSelectPopupItem, popupItemRefs, popupItems, popupRef, shownItemsCount]);
+  return {
+    handlePopupKeyDown
+  };
+};
+//# sourceMappingURL=useSliderButtonPopupKeyboard.js.map

package/lib/esm/components/slider-button/useSliderButtonPopupKeyboard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSliderButtonPopupKeyboard.js","names":["useCallback","useEffect","useState","useSliderButtonPopupKeyboard","isPopupOpen","popupItems","currentPopupId","shownItemsCount","popupItemRefs","popupRef","focusThumb","onSelectPopupItem","focusedPopupIndex","setFocusedPopupIndex","selectedIndex","findIndex","id","initialIndex","window","requestAnimationFrame","current","focus","handlePopupKeyDown","event","length","key","preventDefault","direction","nextIndex","nextItem","Math","max","hide"],"sources":["../../../../src/components/slider-button/useSliderButtonPopupKeyboard.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport type { KeyboardEventHandler, MutableRefObject } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { SliderButtonItem } from '../../types/slider-button';\n\ntype UseSliderButtonPopupKeyboardProps = {\n isPopupOpen: boolean;\n popupItems: SliderButtonItem[];\n currentPopupId: string;\n shownItemsCount: number;\n popupItemRefs: MutableRefObject<Array<HTMLDivElement | null>>;\n popupRef: MutableRefObject<PopupRef | null>;\n focusThumb: VoidFunction;\n onSelectPopupItem: (id: string, index: number) => void;\n};\n\nexport const useSliderButtonPopupKeyboard = ({\n isPopupOpen,\n popupItems,\n currentPopupId,\n shownItemsCount,\n popupItemRefs,\n popupRef,\n focusThumb,\n onSelectPopupItem,\n}: UseSliderButtonPopupKeyboardProps) => {\n const [focusedPopupIndex, setFocusedPopupIndex] = useState(0);\n\n useEffect(() => {\n if (!isPopupOpen) {\n return;\n }\n\n const selectedIndex = popupItems.findIndex(({ id }) => id === currentPopupId);\n const initialIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\n setFocusedPopupIndex(initialIndex);\n\n window.requestAnimationFrame(() => {\n popupItemRefs.current[initialIndex]?.focus();\n });\n }, [currentPopupId, isPopupOpen, popupItems, popupItemRefs]);\n\n const handlePopupKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (!isPopupOpen || popupItems.length === 0) {\n return;\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n event.preventDefault();\n\n const direction = event.key === 'ArrowDown' ? 1 : -1;\n const nextIndex =\n (focusedPopupIndex + direction + popupItems.length) % popupItems.length;\n\n setFocusedPopupIndex(nextIndex);\n popupItemRefs.current[nextIndex]?.focus();\n return;\n }\n\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n\n const nextItem = popupItems[focusedPopupIndex];\n\n if (nextItem) {\n onSelectPopupItem(nextItem.id, Math.max(0, shownItemsCount - 1));\n }\n\n return;\n }\n\n if (event.key === 'Escape' || event.key === 'ArrowLeft' || event.key === 'Tab') {\n event.preventDefault();\n popupRef.current?.hide();\n focusThumb();\n }\n },\n [\n focusThumb,\n focusedPopupIndex,\n isPopupOpen,\n onSelectPopupItem,\n popupItemRefs,\n popupItems,\n popupRef,\n shownItemsCount,\n ],\n );\n\n return { handlePopupKeyDown };\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAgBxD,OAAO,MAAMC,4BAA4B,GAAGA,CAAC;EACzCC,WAAW;EACXC,UAAU;EACVC,cAAc;EACdC,eAAe;EACfC,aAAa;EACbC,QAAQ;EACRC,UAAU;EACVC;AAC+B,CAAC,KAAK;EACrC,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGX,QAAQ,CAAC,CAAC,CAAC;EAE7DD,SAAS,CAAC,MAAM;IACZ,IAAI,CAACG,WAAW,EAAE;MACd;IACJ;IAEA,MAAMU,aAAa,GAAGT,UAAU,CAACU,SAAS,CAAC,CAAC;MAAEC;IAAG,CAAC,KAAKA,EAAE,KAAKV,cAAc,CAAC;IAC7E,MAAMW,YAAY,GAAGH,aAAa,IAAI,CAAC,GAAGA,aAAa,GAAG,CAAC;IAE3DD,oBAAoB,CAACI,YAAY,CAAC;IAElCC,MAAM,CAACC,qBAAqB,CAAC,MAAM;MAC/BX,aAAa,CAACY,OAAO,CAACH,YAAY,CAAC,EAAEI,KAAK,CAAC,CAAC;IAChD,CAAC,CAAC;EACN,CAAC,EAAE,CAACf,cAAc,EAAEF,WAAW,EAAEC,UAAU,EAAEG,aAAa,CAAC,CAAC;EAE5D,MAAMc,kBAAkB,GAAGtB,WAAW,CACjCuB,KAAK,IAAK;IACP,IAAI,CAACnB,WAAW,IAAIC,UAAU,CAACmB,MAAM,KAAK,CAAC,EAAE;MACzC;IACJ;IAEA,IAAID,KAAK,CAACE,GAAG,KAAK,WAAW,IAAIF,KAAK,CAACE,GAAG,KAAK,SAAS,EAAE;MACtDF,KAAK,CAACG,cAAc,CAAC,CAAC;MAEtB,MAAMC,SAAS,GAAGJ,KAAK,CAACE,GAAG,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;MACpD,MAAMG,SAAS,GACX,CAAChB,iBAAiB,GAAGe,SAAS,GAAGtB,UAAU,CAACmB,MAAM,IAAInB,UAAU,CAACmB,MAAM;MAE3EX,oBAAoB,CAACe,SAAS,CAAC;MAC/BpB,aAAa,CAACY,OAAO,CAACQ,SAAS,CAAC,EAAEP,KAAK,CAAC,CAAC;MACzC;IACJ;IAEA,IAAIE,KAAK,CAACE,GAAG,KAAK,OAAO,IAAIF,KAAK,CAACE,GAAG,KAAK,GAAG,EAAE;MAC5CF,KAAK,CAACG,cAAc,CAAC,CAAC;MAEtB,MAAMG,QAAQ,GAAGxB,UAAU,CAACO,iBAAiB,CAAC;MAE9C,IAAIiB,QAAQ,EAAE;QACVlB,iBAAiB,CAACkB,QAAQ,CAACb,EAAE,EAAEc,IAAI,CAACC,GAAG,CAAC,CAAC,EAAExB,eAAe,GAAG,CAAC,CAAC,CAAC;MACpE;MAEA;IACJ;IAEA,IAAIgB,KAAK,CAACE,GAAG,KAAK,QAAQ,IAAIF,KAAK,CAACE,GAAG,KAAK,WAAW,IAAIF,KAAK,CAACE,GAAG,KAAK,KAAK,EAAE;MAC5EF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBjB,QAAQ,CAACW,OAAO,EAAEY,IAAI,CAAC,CAAC;MACxBtB,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CACIA,UAAU,EACVE,iBAAiB,EACjBR,WAAW,EACXO,iBAAiB,EACjBH,aAAa,EACbH,UAAU,EACVI,QAAQ,EACRF,eAAe,CAEvB,CAAC;EAED,OAAO;IAAEe;EAAmB,CAAC;AACjC,CAAC","ignoreList":[]}

package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+export const useSliderButtonThumbKeyboard = ({
+  currentId,
+  currentIndex,
+  shownItemsCount,
+  items,
+  onSelectThumbItem
+}) => {
+  const handleThumbKeyDown = useCallback(event => {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      const direction = event.key === 'ArrowRight' ? 1 : -1;
+      const maxVisibleIndex = Math.max(0, shownItemsCount - 1);
+      const nextIndex = Math.min(maxVisibleIndex, Math.max(0, currentIndex + direction));
+      if (nextIndex === currentIndex) {
+        return;
+      }
+      const hasMoreItems = items.length > shownItemsCount;
+      const nextId = hasMoreItems && nextIndex === shownItemsCount - 1 ? 'more' : items[nextIndex]?.id;
+      if (nextId) {
+        onSelectThumbItem(nextId, nextIndex);
+      }
+      return;
+    }
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    const fallbackId = currentId || items[currentIndex]?.id || items[0]?.id;
+    if (fallbackId) {
+      onSelectThumbItem(fallbackId, currentIndex);
+    }
+  }, [currentId, currentIndex, items, onSelectThumbItem, shownItemsCount]);
+  return {
+    handleThumbKeyDown
+  };
+};
+//# sourceMappingURL=useSliderButtonThumbKeyboard.js.map

package/lib/esm/components/slider-button/useSliderButtonThumbKeyboard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useSliderButtonThumbKeyboard.js","names":["useCallback","useSliderButtonThumbKeyboard","currentId","currentIndex","shownItemsCount","items","onSelectThumbItem","handleThumbKeyDown","event","key","preventDefault","direction","maxVisibleIndex","Math","max","nextIndex","min","hasMoreItems","length","nextId","id","fallbackId"],"sources":["../../../../src/components/slider-button/useSliderButtonThumbKeyboard.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { KeyboardEventHandler } from 'react';\nimport type { SliderButtonItem } from '../../types/slider-button';\n\ntype UseSliderButtonThumbKeyboardProps = {\n currentId: string;\n currentIndex: number;\n shownItemsCount: number;\n items: SliderButtonItem[];\n onSelectThumbItem: (id: string, index: number) => void;\n};\n\nexport const useSliderButtonThumbKeyboard = ({\n currentId,\n currentIndex,\n shownItemsCount,\n items,\n onSelectThumbItem,\n}: UseSliderButtonThumbKeyboardProps) => {\n const handleThumbKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n (event) => {\n if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n event.preventDefault();\n\n const direction = event.key === 'ArrowRight' ? 1 : -1;\n const maxVisibleIndex = Math.max(0, shownItemsCount - 1);\n const nextIndex = Math.min(maxVisibleIndex, Math.max(0, currentIndex + direction));\n\n if (nextIndex === currentIndex) {\n return;\n }\n\n const hasMoreItems = items.length > shownItemsCount;\n const nextId =\n hasMoreItems && nextIndex === shownItemsCount - 1\n ? 'more'\n : items[nextIndex]?.id;\n\n if (nextId) {\n onSelectThumbItem(nextId, nextIndex);\n }\n\n return;\n }\n\n if (event.key !== 'Enter' && event.key !== ' ') {\n return;\n }\n\n event.preventDefault();\n\n const fallbackId = currentId || items[currentIndex]?.id || items[0]?.id;\n\n if (fallbackId) {\n onSelectThumbItem(fallbackId, currentIndex);\n }\n },\n [currentId, currentIndex, items, onSelectThumbItem, shownItemsCount],\n );\n\n return { handleThumbKeyDown };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AAYnC,OAAO,MAAMC,4BAA4B,GAAGA,CAAC;EACzCC,SAAS;EACTC,YAAY;EACZC,eAAe;EACfC,KAAK;EACLC;AAC+B,CAAC,KAAK;EACrC,MAAMC,kBAAkB,GAAGP,WAAW,CACjCQ,KAAK,IAAK;IACP,IAAIA,KAAK,CAACC,GAAG,KAAK,WAAW,IAAID,KAAK,CAACC,GAAG,KAAK,YAAY,EAAE;MACzDD,KAAK,CAACE,cAAc,CAAC,CAAC;MAEtB,MAAMC,SAAS,GAAGH,KAAK,CAACC,GAAG,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC;MACrD,MAAMG,eAAe,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,eAAe,GAAG,CAAC,CAAC;MACxD,MAAMW,SAAS,GAAGF,IAAI,CAACG,GAAG,CAACJ,eAAe,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEX,YAAY,GAAGQ,SAAS,CAAC,CAAC;MAElF,IAAII,SAAS,KAAKZ,YAAY,EAAE;QAC5B;MACJ;MAEA,MAAMc,YAAY,GAAGZ,KAAK,CAACa,MAAM,GAAGd,eAAe;MACnD,MAAMe,MAAM,GACRF,YAAY,IAAIF,SAAS,KAAKX,eAAe,GAAG,CAAC,GAC3C,MAAM,GACNC,KAAK,CAACU,SAAS,CAAC,EAAEK,EAAE;MAE9B,IAAID,MAAM,EAAE;QACRb,iBAAiB,CAACa,MAAM,EAAEJ,SAAS,CAAC;MACxC;MAEA;IACJ;IAEA,IAAIP,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;MAC5C;IACJ;IAEAD,KAAK,CAACE,cAAc,CAAC,CAAC;IAEtB,MAAMW,UAAU,GAAGnB,SAAS,IAAIG,KAAK,CAACF,YAAY,CAAC,EAAEiB,EAAE,IAAIf,KAAK,CAAC,CAAC,CAAC,EAAEe,EAAE;IAEvE,IAAIC,UAAU,EAAE;MACZf,iBAAiB,CAACe,UAAU,EAAElB,YAAY,CAAC;IAC/C;EACJ,CAAC,EACD,CAACD,SAAS,EAAEC,YAAY,EAAEE,KAAK,EAAEC,iBAAiB,EAAEF,eAAe,CACvE,CAAC;EAED,OAAO;IAAEG;EAAmB,CAAC;AACjC,CAAC","ignoreList":[]}

package/lib/esm/components/tag-input/TagInput.js CHANGED Viewed

@@ -3,9 +3,10 @@ import { useTheme } from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import Badge from '../badge/Badge';
 import Icon from '../icon/Icon';
-import { StyledTagInput, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
+import { StyledTagInput, StyledTagInputTagFocusWrapper, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 import { useCursorRepaint } from '../../hooks/resize';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const TagInput = /*#__PURE__*/forwardRef(({
   leftElement,
   onAdd,
@@ -15,6 +16,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
   onRemove,
   placeholder,
   shouldAllowMultiple = true,
+  shouldEnableKeyboardHighlighting,
   shouldPreventEnter,
   tags
 }, ref) => {
@@ -28,13 +30,78 @@ const TagInput = /*#__PURE__*/forwardRef(({
     setCurrentValue('');
   };
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  const shouldShowTagHighlighting = shouldShowKeyboardHighlighting && typeof selectedId === 'string';
   useImperativeHandle(ref, () => ({
     blur: () => inputRef.current?.blur(),
     getUnsavedTagText: currentValue !== '' ? currentValue : undefined,
     resetValue: handleResetValue
   }), [currentValue]);
+  const handleRemoveTag = useCallback((id, currentTags) => {
+    const removedTagIndex = currentTags.findIndex(tag => tag.id === id);
+    if (typeof onRemove === 'function') {
+      onRemove(id);
+    }
+    if (removedTagIndex < 0) {
+      setSelectedId(undefined);
+      return;
+    }
+    setSelectedId(currentTags[removedTagIndex + 1]?.id ?? currentTags[removedTagIndex - 1]?.id);
+  }, [onRemove]);
   const handleKeyDown = useCallback(event => {
-    if (event.key === 'Enter' && !shouldPreventEnter) {
+    const visibleTags = shouldAllowMultiple ? tags ?? [] : (tags ?? []).slice(0, 1);
+    const selectedTagIndex = visibleTags.findIndex(tag => tag.id === selectedId);
+    const selectedTag = selectedTagIndex >= 0 ? visibleTags[selectedTagIndex] : undefined;
+    const isSpaceKey = event.key === ' ';
+    const isEnterKey = event.key === 'Enter';
+    const isDeleteKey = event.key === 'Delete';
+    if (currentValue === '' && visibleTags.length > 0) {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        if (!selectedId) {
+          setSelectedId(visibleTags[visibleTags.length - 1]?.id);
+          return;
+        }
+        if (selectedTagIndex <= 0) {
+          setSelectedId(undefined);
+          return;
+        }
+        setSelectedId(visibleTags[selectedTagIndex - 1]?.id);
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (!selectedId || selectedTagIndex < 0) {
+          return;
+        }
+        if (selectedTagIndex >= visibleTags.length - 1) {
+          setSelectedId(undefined);
+          return;
+        }
+        setSelectedId(visibleTags[selectedTagIndex + 1]?.id);
+        return;
+      }
+      if (event.key === 'Home') {
+        event.preventDefault();
+        setSelectedId(visibleTags[0]?.id);
+        return;
+      }
+      if (event.key === 'End') {
+        event.preventDefault();
+        setSelectedId(visibleTags[visibleTags.length - 1]?.id);
+        return;
+      }
+      if (isEnterKey || isSpaceKey || event.key === 'Backspace' || isDeleteKey) {
+        event.preventDefault();
+        if (!selectedTag) {
+          setSelectedId(visibleTags[visibleTags.length - 1]?.id);
+          return;
+        }
+        handleRemoveTag(selectedTag.id, visibleTags);
+        return;
+      }
+    }
+    if (isEnterKey && !shouldPreventEnter) {
       setCurrentValue(prevValue => {
         if (!prevValue) {
           return '';
@@ -61,28 +128,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
         return '';
       });
     }
-    if (event.key === 'Backspace' && currentValue === '') {
-      if (!selectedId) {
-        if (!tags) {
-          return;
-        }
-        const newSelectedId = tags[tags.length - 1]?.id;
-        setSelectedId(newSelectedId);
-        return;
-      }
-      if (!tags) {
-        return;
-      }
-      const removedId = tags[tags.length - 1]?.id;
-      if (!removedId) {
-        return;
-      }
-      if (typeof onRemove === 'function') {
-        onRemove(removedId);
-      }
-      setSelectedId(undefined);
-    }
-  }, [currentValue, onAdd, onRemove, selectedId, shouldAllowMultiple, shouldPreventEnter, tags]);
+  }, [currentValue, onAdd, handleRemoveTag, selectedId, shouldAllowMultiple, shouldPreventEnter, tags]);
   const handleChange = useCallback(event => {
     setCurrentValue(event.target.value);
     if (typeof onChange === 'function') {
@@ -93,10 +139,8 @@ const TagInput = /*#__PURE__*/forwardRef(({
     }
   }, [onChange]);
   const handleIconClick = useCallback(id => {
-    if (typeof onRemove === 'function') {
-      onRemove(id);
-    }
-  }, [onRemove]);
+    handleRemoveTag(id, shouldAllowMultiple ? tags ?? [] : (tags ?? []).slice(0, 1));
+  }, [handleRemoveTag, shouldAllowMultiple, tags]);
   const content = useMemo(() => {
     const items = [];
     if (!tags) {
@@ -107,23 +151,30 @@ const TagInput = /*#__PURE__*/forwardRef(({
       id,
       rightElement
     }) => {
-      items.push(/*#__PURE__*/React.createElement(Badge, {
-        key: `tag-input-${id}`,
-        backgroundColor: id === selectedId ? theme['206'] ?? undefined : undefined
+      const isSelected = id === selectedId;
+      items.push(/*#__PURE__*/React.createElement(StyledTagInputTagFocusWrapper, {
+        $isSelected: isSelected,
+        $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+        key: `tag-input-${id}`
+      }, /*#__PURE__*/React.createElement(Badge, {
+        backgroundColor: isSelected ? theme['206'] ?? undefined : undefined
       }, /*#__PURE__*/React.createElement(StyledTagInputTagWrapper, null, /*#__PURE__*/React.createElement(StyledTagInputTagWrapperText, null, text), rightElement, /*#__PURE__*/React.createElement(Icon, {
         icons: ['ts-wrong'],
+        shouldEnableKeyboardHighlighting: false,
         onClick: event => {
           event.preventDefault();
           event.stopPropagation();
           handleIconClick(id);
         }
-      }))));
+      })))));
     });
     return items;
-  }, [tags, shouldAllowMultiple, selectedId, theme, handleIconClick]);
+  }, [tags, shouldAllowMultiple, selectedId, shouldShowKeyboardHighlighting, theme, handleIconClick]);
   const shouldShowInput = useMemo(() => shouldAllowMultiple || (tags?.length ?? 0) < 1, [tags?.length, shouldAllowMultiple]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, {
-    $shouldChangeColor: shouldChangeColor
+    $shouldChangeColor: shouldChangeColor,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    $shouldShowTagHighlighting: shouldShowTagHighlighting
   }, leftElement && /*#__PURE__*/React.createElement(StyledTagInputIconWrapper, null, leftElement), content, shouldShowInput && /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
     onBlur: onBlur,
     onChange: handleChange,
@@ -132,7 +183,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
     placeholder: tags && tags.length > 0 ? undefined : placeholder,
     ref: inputRef,
     value: currentValue
-  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, tags]);
+  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, shouldShowKeyboardHighlighting, shouldShowTagHighlighting, tags]);
 });
 export default TagInput;
 //# sourceMappingURL=TagInput.js.map