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

@chayns-components/core 5.4.6-alpha.0 → 5.4.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 (472) hide show

package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionGroup.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionGroupContext","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","registerAccordionUuid","unregisterAccordionUuid","activeAccordionUuid","updateActiveAccordionUuid","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","setAccordionUuids","setActiveAccordionUuid","accordionGroupId","isInitialRenderRef","areaProvider","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","currentOpenAccordionUuid","sortAccordionUuidsByDom","uuids","document","domOrderedUuids","Array","from","querySelectorAll","map","element","getAttribute","split","filter","Boolean","includes","currentAccordionUuids","nextAccordionUuids","currentUuid","length","currentActiveAccordionUuid","current","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n Dispatch,\n FC,\n ReactNode,\n SetStateAction,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateActiveAccordionUuid = (uuid?: string) => void;\ntype IRegisterAccordionUuid = (uuid: string) => void;\ntype IUnregisterAccordionUuid = (uuid: string) => void;\n\ninterface IAccordionGroupContext {\n isWrapped?: boolean;\n openAccordionUuid?: string;\n setOpenAccordionUuid?: Dispatch<SetStateAction<string \| undefined>>;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n accordionUuids?: string[];\n registerAccordionUuid?: IRegisterAccordionUuid;\n unregisterAccordionUuid?: IUnregisterAccordionUuid;\n activeAccordionUuid?: string;\n updateActiveAccordionUuid?: IUpdateActiveAccordionUuid;\n accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n isWrapped: undefined,\n openAccordionUuid: undefined,\n setOpenAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n accordionUuids: undefined,\n registerAccordionUuid: undefined,\n unregisterAccordionUuid: undefined,\n activeAccordionUuid: undefined,\n updateActiveAccordionUuid: undefined,\n accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /*\n The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\n /\n children: ReactNode;\n /\n This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n /\n isWrapped?: boolean;\n /\n Function that is executed when all accordions in group are closed.\n /\n onClose?: VoidFunction;\n /\n Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n const [accordionUuids, setAccordionUuids] = useState<string[]>();\n const [activeAccordionUuid, setActiveAccordionUuid] =\n useState<IAccordionGroupContext['activeAccordionUuid']>(undefined);\n\n const accordionGroupId = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const areaProvider = useContext(AreaContext);\n\n const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid],\n );\n\n const sortAccordionUuidsByDom = useCallback(\n (uuids: string[]) => {\n if (typeof document === 'undefined') return uuids;\n\n const domOrderedUuids = Array.from(\n document.querySelectorAll<HTMLElement>(`[data-uuid^=\"${accordionGroupId}---\"]`),\n )\n .map((element) => element.getAttribute('data-uuid')?.split('---')[1])\n .filter((uuid): uuid is string => Boolean(uuid));\n\n return domOrderedUuids.filter((uuid) => uuids.includes(uuid));\n },\n [accordionGroupId],\n );\n\n const registerAccordionUuid = useCallback<IRegisterAccordionUuid>(\n (uuid) => {\n setAccordionUuids((currentAccordionUuids = []) => {\n const nextAccordionUuids = currentAccordionUuids.includes(uuid)\n ? currentAccordionUuids\n : [...currentAccordionUuids, uuid];\n\n return sortAccordionUuidsByDom(nextAccordionUuids);\n });\n },\n [sortAccordionUuidsByDom],\n );\n\n const unregisterAccordionUuid = useCallback<IUnregisterAccordionUuid>((uuid) => {\n setAccordionUuids((currentAccordionUuids = []) =>\n currentAccordionUuids.filter((currentUuid) => currentUuid !== uuid),\n );\n }, []);\n\n const updateActiveAccordionUuid = useCallback<IUpdateActiveAccordionUuid>((uuid) => {\n setActiveAccordionUuid(uuid);\n }, []);\n\n useEffect(() => {\n if (!accordionUuids?.length) {\n setActiveAccordionUuid(undefined);\n return;\n }\n\n setActiveAccordionUuid((currentActiveAccordionUuid) =>\n currentActiveAccordionUuid && accordionUuids.includes(currentActiveAccordionUuid)\n ? currentActiveAccordionUuid\n : undefined,\n );\n }, [accordionUuids]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n isWrapped: shouldWrap,\n openAccordionUuid,\n setOpenAccordionUuid,\n updateOpenAccordionUuid,\n accordionUuids,\n registerAccordionUuid,\n unregisterAccordionUuid,\n activeAccordionUuid,\n updateActiveAccordionUuid,\n accordionGroupUuid: accordionGroupId,\n }),\n [\n accordionGroupId,\n accordionUuids,\n shouldWrap,\n openAccordionUuid,\n registerAccordionUuid,\n unregisterAccordionUuid,\n updateOpenAccordionUuid,\n activeAccordionUuid,\n updateActiveAccordionUuid,\n ],\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AccordionGroup.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionGroupContext","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","setAccordionUuids","accordionGroupId","isInitialRenderRef","uuids","areaProvider","childrenCount","Children","count","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","currentOpenAccordionUuid","elements","document","querySelectorAll","elementUuids","Array","from","map","el","getAttribute","result","forEach","elementUuid","groupUuid","accordionUuid","split","push","current","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n Dispatch,\n FC,\n ReactNode,\n SetStateAction,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n isWrapped?: boolean;\n openAccordionUuid?: string;\n setOpenAccordionUuid?: Dispatch<SetStateAction<string \| undefined>>;\n updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n accordionUuids?: string[];\n updateAccordionUuids?: IUpdateAccordionUuids;\n accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n isWrapped: undefined,\n openAccordionUuid: undefined,\n setOpenAccordionUuid: undefined,\n updateOpenAccordionUuid: undefined,\n accordionUuids: undefined,\n updateAccordionUuids: undefined,\n accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n /*\n The Accordions that should be grouped. Accordions with the same group are\n * automatically closed when an `Accordion` of the group is opened.\n /\n children: ReactNode;\n /\n This value must be set for nested AccordionGroup components. This adjusts the style of\n * the head and the padding of the content accordions.\n /\n isWrapped?: boolean;\n /\n Function that is executed when all accordions in group are closed.\n /\n onClose?: VoidFunction;\n /\n Function that is executed when any accordion in group will be opened.\n */\n onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n const [openAccordionUuid, setOpenAccordionUuid] =\n useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n const accordionGroupId = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const updateAccordionUuids = useCallback((uuids: string[]) => {\n setAccordionUuids(uuids);\n }, []);\n\n const areaProvider = useContext(AreaContext);\n\n const childrenCount = React.Children.count(children);\n\n const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;\n\n const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n (uuid, { shouldOnlyOpen } = {}) => {\n setOpenAccordionUuid((currentOpenAccordionUuid) => {\n if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n return undefined;\n }\n\n return uuid;\n });\n },\n [setOpenAccordionUuid],\n );\n\n useEffect(() => {\n if (childrenCount === 0) return;\n\n const elements = document.querySelectorAll('[data-uuid]');\n const elementUuids = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n const result: string[] = [];\n\n elementUuids.forEach((elementUuid) => {\n const [groupUuid, accordionUuid] = (elementUuid ?? '').split('---');\n\n if (groupUuid === accordionGroupId && typeof accordionUuid === 'string') {\n result.push(accordionUuid);\n }\n });\n\n updateAccordionUuids(result);\n }, [accordionGroupId, childrenCount, updateAccordionUuids]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (typeof openAccordionUuid === 'string') {\n if (typeof onOpen === 'function') {\n onOpen();\n }\n } else if (typeof onClose === 'function') {\n onClose();\n }\n }, [onClose, onOpen, openAccordionUuid]);\n\n const providerValue = useMemo<IAccordionGroupContext>(\n () => ({\n isWrapped: shouldWrap,\n openAccordionUuid,\n setOpenAccordionUuid,\n updateOpenAccordionUuid,\n updateAccordionUuids,\n accordionUuids,\n accordionGroupUuid: accordionGroupId,\n }),\n [\n accordionGroupId,\n accordionUuids,\n shouldWrap,\n openAccordionUuid,\n updateAccordionUuids,\n updateOpenAccordionUuid,\n ],\n );\n\n return (\n <AccordionGroupContext.Provider value={providerValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AnimatePresence initial={false}>{children}</AnimatePresence>\n </MotionConfig>\n </AccordionGroupContext.Provider>\n );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.js CHANGED Viewed

@@ -29,8 +29,7 @@ const AccordionHead = ({
   uuid,
   titleInputProps,
   onTitleInputChange,
-  titleColor,
-  shouldEnableKeyboardHighlighting
+  titleColor
 }) => {
   const [headHeight, setHeadHeight] = useState({
     closed: isWrapped ? 40 : 32,
@@ -137,8 +136,7 @@ const AccordionHead = ({
   }, /*#__PURE__*/React.createElement(StyledTitleInputWrapper, null, /*#__PURE__*/React.createElement(Input
   /* eslint-disable-next-line react/jsx-props-no-spreading */, _extends({}, titleInputProps, {
     value: title,
-    onChange: onTitleInputChange,
-    shouldEnableKeyboardHighlighting: titleInputProps?.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
+    onChange: onTitleInputChange
   })))) : /*#__PURE__*/React.createElement(LayoutGroup, {
     key: `accordionHeadLayoutGroup--${uuid}`
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
@@ -216,8 +214,7 @@ const AccordionHead = ({
     onActiveChange: isActive => setIsSearchActive(isActive),
     placeholder: searchPlaceholder,
     size: InputSize.Small,
-    value: internalSearchValue,
-    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
+    value: internalSearchValue
   })), rightElement && /*#__PURE__*/React.createElement(StyledMotionRightElementWrapper, {
     animate: {
       opacity: 1

package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","StyledTitleInputWrapper","StyledUnicodeIcon","getIsExpandableIcon","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","shouldEnableKeyboardHighlighting","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","color","iconColor","headline","internalIcon","accordionIcon","className","iconStyle","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","mode","style","display","alignItems","gap","scale","exit","transitionEnd","$isOpen","$color","$hasSearch","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n type CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { type InputProps, InputSize } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n StyledTitleInputWrapper,\n} from './AccordionHead.styles';\nimport { StyledUnicodeIcon } from '../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../utils/icon';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title?: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n shouldSkipAnimation?: boolean;\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n shouldSkipAnimation,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n shouldEnableKeyboardHighlighting,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 42,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n useEffect(() => {\n if (typeof onSearchChange === 'function' && !isOpen) {\n setIsSearchActive(false);\n }\n }, [isOpen, onSearchChange]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon \|\| isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n color={theme.iconColor \|\| theme.headline}\n />\n );\n }\n\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n return (\n <StyledUnicodeIcon className={theme.iconStyle ?? 'fa-regular'} $icon={internalIcon} />\n );\n }, [icon, isFixed, theme.accordionIcon, theme.headline, theme.iconColor, theme.iconStyle]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen \|\| isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n <StyledTitleInputWrapper>\n <Input\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...titleInputProps}\n value={title}\n onChange={onTitleInputChange}\n shouldEnableKeyboardHighlighting={\n titleInputProps?.shouldEnableKeyboardHighlighting ??\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledTitleInputWrapper>\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitleWrapper\n key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '12px',\n width: typeof title !== 'string' ? '100%' : undefined,\n }}\n initial={\n !shouldSkipAnimation\n ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n : false\n }\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { scale: 1, opacity: 0 }\n }\n animate={{ scale: 1, opacity: 1 }}\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n >\n {title && (\n <StyledMotionTitle\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n animate={{\n fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem',\n }}\n initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {title}\n </StyledMotionTitle>\n )}\n\n {titleElement && (\n <StyledMotionTitleElementWrapper\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </StyledMotionTitleWrapper>\n </AnimatePresence>\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' \|\| rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n shouldEnableKeyboardHighlighting={\n shouldEnableKeyboardHighlighting\n }\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","StyledTitleInputWrapper","StyledUnicodeIcon","getIsExpandableIcon","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","color","iconColor","headline","internalIcon","accordionIcon","className","iconStyle","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","mode","style","display","alignItems","gap","scale","exit","transitionEnd","$isOpen","$color","$hasSearch","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n type CSSProperties,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { type InputProps, InputSize } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n StyledTitleInputWrapper,\n} from './AccordionHead.styles';\nimport { StyledUnicodeIcon } from '../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../utils/icon';\n\nexport type AccordionHeadProps = {\n icon?: string;\n isOpen: boolean;\n isFixed: boolean;\n isTitleGreyed: boolean;\n isWrapped: boolean;\n onClick: MouseEventHandler<HTMLDivElement>;\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n rightElement?: ReactNode;\n searchPlaceholder?: string;\n searchValue?: string;\n shouldRotateIcon?: boolean;\n title?: string;\n titleElement?: ReactNode;\n uuid: string;\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n titleInputProps?: InputProps;\n titleColor?: CSSProperties['color'];\n shouldSkipAnimation?: boolean;\n};\n\ninterface HeadHeight {\n closed: number;\n open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n icon,\n isOpen,\n isFixed,\n isTitleGreyed,\n isWrapped,\n onClick,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldRotateIcon,\n title,\n titleElement,\n shouldSkipAnimation,\n uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 32,\n open: isWrapped ? 40 : 42,\n });\n\n const [isSearchActive, setIsSearchActive] = useState(false);\n\n const theme = useTheme() as Theme;\n\n const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n useEffect(() => {\n setInternalSearchValue(searchValue);\n }, [searchValue]);\n\n useEffect(() => {\n if (typeof onSearchChange === 'function' && !isOpen) {\n setIsSearchActive(false);\n }\n }, [isOpen, onSearchChange]);\n\n const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n setInternalSearchValue(event.target.value);\n if (typeof onSearchChange === 'function') {\n onSearchChange(event);\n }\n };\n\n const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n shouldUseChildElement: true,\n });\n\n const shouldPreventRightElementClick = useMemo(\n () => getElementClickEvent(rightElement),\n [rightElement],\n );\n\n useEffect(() => {\n if (typeof onTitleInputChange === 'function') {\n setHeadHeight({ closed: 50, open: 50 });\n } else {\n // The timeout is needed because the width is incorrect on the first render\n window.setTimeout(() => {\n setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: titleWrapperRef.current?.clientWidth ?? 0,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\n }, 1);\n }\n // The fontSize need to be included to trigger a new calculation.\n // After the size is increased, the Title is cut at the bottom.\n }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n const iconElement = useMemo(() => {\n if (icon \|\| isFixed) {\n return (\n <Icon\n icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n color={theme.iconColor \|\| theme.headline}\n />\n );\n }\n\n const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n return (\n <StyledUnicodeIcon className={theme.iconStyle ?? 'fa-regular'} $icon={internalIcon} />\n );\n }, [icon, isFixed, theme.accordionIcon, theme.headline, theme.iconColor, theme.iconStyle]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen \|\| isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n <StyledTitleInputWrapper>\n <Input\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...titleInputProps}\n value={title}\n onChange={onTitleInputChange}\n />\n </StyledTitleInputWrapper>\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitleWrapper\n key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '12px',\n width: typeof title !== 'string' ? '100%' : undefined,\n }}\n initial={\n !shouldSkipAnimation\n ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n : false\n }\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { scale: 1, opacity: 0 }\n }\n animate={{ scale: 1, opacity: 1 }}\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n >\n {title && (\n <StyledMotionTitle\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n animate={{\n fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem',\n }}\n initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {title}\n </StyledMotionTitle>\n )}\n\n {titleElement && (\n <StyledMotionTitleElementWrapper\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </StyledMotionTitleWrapper>\n </AnimatePresence>\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' \|\| rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js CHANGED Viewed

@@ -8,12 +8,6 @@ export const StyledMotionAccordionHead = styled(motion.div)`
     display: flex;
     overflow: hidden;
     padding: 4px 0;
-    &:focus-within {
-        overflow: visible;
-        position: relative;
-        z-index: 1;
-    }
 `;
 export const StyledMotionIconWrapper = styled(motion.div)`
     align-items: center;
@@ -37,10 +31,6 @@ export const StyledMotionContentWrapper = styled(motion.div)`
     overflow: hidden;
     margin-right: 10px;
-    &:focus-within {
-        overflow: visible;
-    }
     ${({
   $isWrapped
 }) => $isWrapped && css`
@@ -104,10 +94,6 @@ export const StyledRightWrapper = styled.div`
     margin-right: 5px;
     overflow: hidden;
     position: relative;
-    &:focus-within {
-        overflow: visible;
-    }
 `;
 export const StyledMotionSearchWrapper = styled(motion.div)`
     align-items: center;

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledTitleInputWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n~~\n &:focus-within {\n overflow: visible;\n position: relative;\n z-index: 1;\n }\n~~`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ~~&:focus-within {\n overflow: visible;\n }\n\n~~ ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\nexport const StyledTitleInputWrapper = styled.div`\n width: 100%;\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped \|\| $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n~~\n &:focus-within {\n overflow: visible;\n }\n~~`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA,aAAa,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtE;AACA;AACA;AACA~~;AACA;AACA;AACA;AACA;AACA;AACA~~,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACzD;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA;AACA~~;AACA;AACA;AACA;AACA~~,MAAM,CAAC;EAAEE;AAAW,CAAC,KACbA,UAAU,IACVR,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMS,wBAAwB,GAAGV,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,uBAAuB,GAAGX,MAAM,CAACG,GAAG;AACjD;AACA,CAAC;AASD,OAAO,MAAMS,iBAAiB,GAAGZ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAyB;AAC3E,iBAAiB,CAAC;EAAEU,OAAO;EAAEJ;AAAW,CAAC,KAAMI,OAAO,IAAI,CAACJ,UAAU,GAAG,QAAQ,GAAGK,SAAU;AAC7F,mBAAmB,CAAC;EAAED,OAAO;EAAEJ;AAAW,CAAC,KAAMI,OAAO,IAAIJ,UAAU,GAAG,GAAG,GAAG,QAAS;AACxF;AACA,cAAc,CAAC;EAAEA,UAAU;EAAEM;AAAW,CAAC,KAAMN,UAAU,IAAIM,UAAU,GAAG,MAAM,GAAGD,SAAU;AAC7F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEE,MAAM;EAAEZ;AAA8B,CAAC,KAAKY,MAAM,IAAIZ,KAAK,CAACC,IAAI;AAChF,mBAAmB,CAAC;EAAEQ,OAAO;EAAEJ,UAAU;EAAEM;AAAW,CAAC,KAC/CF,OAAO,IAAI,CAACJ,UAAU,IAAI,CAACM,UAAU,GAAG,QAAQ,GAAG,QAAQ;AACnE;AACA;AACA;AACA,MAAM,CAAC;EAAEN;AAAW,CAAC,KACbA,UAAU,IACVR,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMgB,+BAA+B,GAAGjB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACjE;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,kBAAkB,GAAGlB,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA~~;AACA;AACA;AACA;AACA~~,CAAC;AAED,OAAO,MAAMgB,yBAAyB,GAAGnB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,+BAA+B,GAAGpB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACjE;AACA;AACA;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA,CAAC;AAMD,OAAO,MAAMc,sBAAsB,GAAGrB,MAAM,CAACD,MAAM,CAACuB,KAAK,CAA8B;AACvF;AACA;AACA;AACA,UAAU,CAAC;EAAElB;AAAmC,CAAC,KAAKA,KAAK,CAAC,cAAc,CAAC;AAC3E;AACA;AACA,aAAa,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA,eAAe,CAAC;EAAEkB;AAAS,CAAC,KAAMA,QAAQ,GAAG,kBAAkB,GAAG,SAAU;AAC5E,CAAC;AAED,OAAO,MAAMC,iCAAiC,GAAGxB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledTitleInputWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n align-items: center;\n color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n display: flex;\n overflow: hidden;\n padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n align-self: flex-start;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n display: flex;\n flex: 1 1 auto;\n height: 100%;\n overflow: hidden;\n margin-right: 10px;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-items: center;\n `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\n`;\n\nexport const StyledTitleInputWrapper = styled.div`\n width: 100%;\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n $isOpen: boolean;\n $isWrapped: boolean;\n $color?: CSSProperties['color'];\n $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n grid-area: header;\n height: ${({ $isWrapped, $hasSearch }) => ($isWrapped \|\| $hasSearch ? '100%' : undefined)};\n overflow: hidden;\n text-overflow: ellipsis;\n transform-origin: top left;\n user-select: none;\n color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n will-change: unset !important;\n\n ${({ $isWrapped }) =>\n $isWrapped &&\n css`\n align-content: center;\n `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n display: flex;\n flex: 0 0 auto;\n gap: 8px;\n margin-right: 5px;\n overflow: hidden;\n position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n align-items: center;\n justify-content: end;\n position: relative;\n display: flex;\n width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n\n will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n background-color: transparent;\n border: 1px solid transparent;\n border-bottom-color: rgba(\n ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n 0.45\n );\n color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n grid-area: header;\n padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AAErC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA,aAAa,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGN,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACzD;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACD,MAAM,CAACI,GAAG,CAAkC;AAC7F;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEE;AAAW,CAAC,KACbA,UAAU,IACVR,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMS,wBAAwB,GAAGV,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMQ,uBAAuB,GAAGX,MAAM,CAACG,GAAG;AACjD;AACA,CAAC;AASD,OAAO,MAAMS,iBAAiB,GAAGZ,MAAM,CAACD,MAAM,CAACI,GAAG,CAAyB;AAC3E,iBAAiB,CAAC;EAAEU,OAAO;EAAEJ;AAAW,CAAC,KAAMI,OAAO,IAAI,CAACJ,UAAU,GAAG,QAAQ,GAAGK,SAAU;AAC7F,mBAAmB,CAAC;EAAED,OAAO;EAAEJ;AAAW,CAAC,KAAMI,OAAO,IAAIJ,UAAU,GAAG,GAAG,GAAG,QAAS;AACxF;AACA,cAAc,CAAC;EAAEA,UAAU;EAAEM;AAAW,CAAC,KAAMN,UAAU,IAAIM,UAAU,GAAG,MAAM,GAAGD,SAAU;AAC7F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEE,MAAM;EAAEZ;AAA8B,CAAC,KAAKY,MAAM,IAAIZ,KAAK,CAACC,IAAI;AAChF,mBAAmB,CAAC;EAAEQ,OAAO;EAAEJ,UAAU;EAAEM;AAAW,CAAC,KAC/CF,OAAO,IAAI,CAACJ,UAAU,IAAI,CAACM,UAAU,GAAG,QAAQ,GAAG,QAAQ;AACnE;AACA;AACA;AACA,MAAM,CAAC;EAAEN;AAAW,CAAC,KACbA,UAAU,IACVR,GAAG;AACX;AACA,SAAS;AACT,CAAC;AAED,OAAO,MAAMgB,+BAA+B,GAAGjB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACjE;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMe,kBAAkB,GAAGlB,MAAM,CAACG,GAA4B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,yBAAyB,GAAGnB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,+BAA+B,GAAGpB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACjE;AACA;AACA;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA,CAAC;AAMD,OAAO,MAAMc,sBAAsB,GAAGrB,MAAM,CAACD,MAAM,CAACuB,KAAK,CAA8B;AACvF;AACA;AACA;AACA,UAAU,CAAC;EAAElB;AAAmC,CAAC,KAAKA,KAAK,CAAC,cAAc,CAAC;AAC3E;AACA;AACA,aAAa,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA,eAAe,CAAC;EAAEkB;AAAS,CAAC,KAAMA,QAAQ,GAAG,kBAAkB,GAAG,SAAU;AAC5E,CAAC;AAED,OAAO,MAAMC,iCAAiC,GAAGxB,MAAM,CAACD,MAAM,CAACI,GAAG,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { AnimatePresence } from 'motion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { checkForValidAmount } from '../../utils/amountControl';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledAmountControl, StyledAmountControlInput, StyledAmountControlPseudoInput, StyledInputWrapper, StyledMotionAmountControlButton } from './AmountControl.styles';
 const AmountControl = ({
@@ -13,18 +12,15 @@ const AmountControl = ({
   maxAmount,
   minAmount = 0,
   onChange,
-  shouldEnableKeyboardHighlighting,
   shouldForceLabel = false,
   shouldShowAddIconOnMinAmount = false,
   shouldShowIcon = true,
   shouldShowWideInput = false,
   step: stepProp = 1
 }) => {
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const [amountValue, setAmountValue] = useState(minAmount);
   const [inputValue, setInputValue] = useState(minAmount.toString());
   const [displayState, setDisplayState] = useState('default');
-  const [isEditing, setIsEditing] = useState(false);
   const step = useMemo(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = useRef(null);
@@ -106,9 +102,6 @@ const AmountControl = ({
     }).toString());
   }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = useCallback(() => {
-    if (isDisabled) {
-      return;
-    }
     if (amountValue !== minAmount) {
       return;
     }
@@ -117,16 +110,16 @@ const AmountControl = ({
     }
     setAmountValue(minAmount + step);
     setInputValue((minAmount + step).toString());
-  }, [amountValue, isDisabled, minAmount, onChange, step]);
-  const handlePseudoInputClick = useCallback(() => {
-    if (isDisabled) {
-      return;
+  }, [amountValue, minAmount, onChange, step]);
+  const handleDeleteIconClick = useCallback(() => {
+    if (inputValue === '0') {
+      window.setTimeout(() => {
+        inputRef.current?.focus();
+      }, 500);
+    } else {
+      handleAmountRemove();
     }
-    setIsEditing(true);
-    window.requestAnimationFrame(() => {
-      inputRef.current?.focus();
-    });
-  }, [isDisabled]);
+  }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
     const checkedValue = checkForValidAmount({
       minAmount,
@@ -135,7 +128,6 @@ const AmountControl = ({
     });
     setAmountValue(checkedValue);
     setInputValue(checkedValue.toString());
-    setIsEditing(false);
     if (typeof onChange === 'function') {
       onChange(checkedValue);
     }
@@ -158,14 +150,12 @@ const AmountControl = ({
   if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {
     inputLabel = label;
   }
-  const shouldShowPseudoInput = !isEditing && (inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
     onClick: handleFirstAmount,
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, ['normal'].includes(displayState) && /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     key: "left_button",
     initial: {
       width: 0,
@@ -187,14 +177,14 @@ const AmountControl = ({
       type: 'tween'
     },
     onClick: handleAmountRemove,
-    disabled: isDisabled || amountValue !== 0 && amountValue <= minAmount,
-    $isDisabled: isDisabled || amountValue !== 0 && amountValue <= minAmount
+    disabled: amountValue !== 0 && amountValue <= minAmount,
+    $isDisabled: amountValue !== 0 && amountValue <= minAmount
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-minus'],
     size: 14,
     color: "white"
-  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, shouldShowPseudoInput ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
-    onClick: handlePseudoInputClick,
+  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, displayState === 'maxAmount' || inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
+    onClick: handleDeleteIconClick,
     $shouldShowWideInput: shouldShowWideInput,
     $shouldShowRightIcon: !['maxAmount'].includes(displayState)
   }, inputLabel) : /*#__PURE__*/React.createElement(StyledAmountControlInput, {
@@ -203,16 +193,12 @@ const AmountControl = ({
     $shouldShowIcon: shouldShowIcon,
     $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    disabled: isDisabled,
-    onFocus: () => setIsEditing(true),
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     value: inputLabel
   })), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     key: "right_button",
     initial: {
       width: 0,
@@ -235,13 +221,13 @@ const AmountControl = ({
     },
     $color: displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined,
     onClick: displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd,
-    disabled: isDisabled || (maxAmount ? amountValue >= maxAmount : false),
-    $isDisabled: isDisabled || (maxAmount ? amountValue >= maxAmount : false)
+    disabled: maxAmount ? amountValue >= maxAmount : false,
+    $isDisabled: maxAmount ? amountValue >= maxAmount : false
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: !['normal'].includes(displayState) && icon ? [displayState === 'maxAmount' ? 'fa fa-check' : icon] : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus'],
     size: 14,
     color: iconColor ?? 'white'
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleFirstAmount, handleInputBlur, handleInputChange, handlePseudoInputClick, hasFocus, icon, iconColor, inputLabel, isDisabled, maxAmount, minAmount, shouldShowIcon, shouldShowKeyboardHighlighting, shouldShowPseudoInput, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, icon, iconColor, inputLabel, inputValue, isDisabled, label, maxAmount, minAmount, shouldForceLabel, shouldShowIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

package/lib/esm/components/amount-control/AmountControl.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","useKeyboardFocusHighlighting","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldEnableKeyboardHighlighting","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","shouldShowKeyboardHighlighting","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","isEditing","setIsEditing","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handlePseudoInputClick","window","requestAnimationFrame","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","shouldShowPseudoInput","createElement","onClick","$isDisabled","initial","includes","$shouldShowKeyboardHighlighting","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'normal' \| 'maxAmount' \| 'minAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n Whether the control should be disabled\n /\n isDisabled?: boolean;\n /\n A Text that should be displayed if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n /\n maxAmount?: number;\n /\n The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Enables keyboard-only focus highlighting. The highlighting is only visible while the\n * user navigates with the keyboard and is reset on mouse movement or click.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Whether the label should be displayed even if an amount is selected.\n /\n shouldForceLabel?: boolean;\n /\n Whether the \"add\"-icon should be displayed if the minAmount is reached.\n /\n shouldShowAddIconOnMinAmount?: boolean;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n /\n Defines the amount that will change when adjusted\n /\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldEnableKeyboardHighlighting,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !isDisabled,\n );\n\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n const [isEditing, setIsEditing] = useState(false);\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, isDisabled, minAmount, onChange, step]);\n\n const handlePseudoInputClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n setIsEditing(true);\n\n window.requestAnimationFrame(() => {\n inputRef.current?.focus();\n });\n }, [isDisabled]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n setIsEditing(false);\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' \|\| shouldForceLabel)) {\n inputLabel = label;\n }\n\n const shouldShowPseudoInput =\n !isEditing &&\n (inputValue === '0' \|\|\n (shouldForceLabel && typeof label === 'string') \|\|\n inputLabel === label);\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={isDisabled \|\| (amountValue !== 0 && amountValue <= minAmount)}\n $isDisabled={\n isDisabled \|\| (amountValue !== 0 && amountValue <= minAmount)\n }\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {shouldShowPseudoInput ? (\n <StyledAmountControlPseudoInput\n onClick={handlePseudoInputClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n disabled={isDisabled}\n onFocus={() => setIsEditing(true)}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={isDisabled \|\| (maxAmount ? amountValue >= maxAmount : false)}\n $isDisabled={isDisabled \|\| (maxAmount ? amountValue >= maxAmount : false)}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n handlePseudoInputClick,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n isDisabled,\n maxAmount,\n minAmount,\n shouldShowIcon,\n shouldShowKeyboardHighlighting,\n shouldShowPseudoInput,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","onClick","$isDisabled","initial","includes","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n ChangeEvent,\n FC,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\n StyledInputWrapper,\n StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' \| 'normal' \| 'maxAmount' \| 'minAmount';\n\nexport type AmountControlProps = {\n /*\n The amount that should be displayed.\n /\n amount?: number;\n /\n The icon that should be displayed if no amount is selected.\n /\n icon?: string;\n /\n The color of the icon.\n /\n iconColor?: string;\n /\n Whether the control should be disabled\n /\n isDisabled?: boolean;\n /\n A Text that should be displayed if no amount is selected;\n /\n label?: string;\n /\n The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n /\n maxAmount?: number;\n /\n The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the label should be displayed even if an amount is selected.\n /\n shouldForceLabel?: boolean;\n /\n Whether the \"add\"-icon should be displayed if the minAmount is reached.\n /\n shouldShowAddIconOnMinAmount?: boolean;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n /\n Defines the amount that will change when adjusted\n /\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n iconColor,\n isDisabled = false,\n label,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldForceLabel = false,\n shouldShowAddIconOnMinAmount = false,\n shouldShowIcon = true,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n setDisplayState('minAmount');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n /\n Function that sets the amountValue to the amount\n /\n useEffect(() => {\n if (typeof amount !== 'number') {\n return;\n }\n\n setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n }, [amount, maxAmount, minAmount]);\n\n const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n let inputLabel = inputValue;\n\n if (typeof label === 'string' && (displayState === 'default' \|\| shouldForceLabel)) {\n inputLabel = label;\n }\n\n return useMemo(\n () => (\n <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n <AnimatePresence initial={false}>\n {['normal'].includes(displayState) && (\n <StyledMotionAmountControlButton\n key=\"left_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n onClick={handleAmountRemove}\n disabled={amountValue !== 0 && amountValue <= minAmount}\n $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n >\n <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n </StyledMotionAmountControlButton>\n )}\n </AnimatePresence>\n <StyledInputWrapper>\n {displayState === 'maxAmount' \|\|\n inputValue === '0' \|\|\n (shouldForceLabel && typeof label === 'string') \|\|\n inputLabel === label ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n >\n {inputLabel}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={inputLabel}\n />\n )}\n </StyledInputWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionAmountControlButton\n key=\"right_button\"\n initial={{ width: 0, opacity: 0, padding: 0 }}\n animate={{\n width: 40,\n opacity: 1,\n padding: 0,\n }}\n exit={{ width: 0, opacity: 0, padding: 0 }}\n transition={{ duration: 0.2, type: 'tween' }}\n $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n onClick={\n displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n }\n disabled={maxAmount ? amountValue >= maxAmount : false}\n $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n >\n <Icon\n icons={\n !['normal'].includes(displayState) && icon\n ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n }\n size={14}\n color={iconColor ?? 'white'}\n />\n </StyledMotionAmountControlButton>\n </AnimatePresence>\n </StyledAmountControl>\n ),\n [\n amountValue,\n displayState,\n handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n icon,\n iconColor,\n inputLabel,\n inputValue,\n isDisabled,\n label,\n maxAmount,\n minAmount,\n shouldForceLabel,\n shouldShowIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledAmountControl = styled.div`
     background-color: ${({
   theme
@@ -8,6 +7,7 @@ export const StyledAmountControl = styled.div`
     display: flex;
     width: fit-content;
     border-radius: 3px;
+    overflow: hidden;
     transition: opacity 0.2s ease;
     height: 28px;
@@ -36,14 +36,6 @@ export const StyledAmountControlInput = styled.input`
   $hasFocus
 }) => $hasFocus ? 'text' : 'pointer'};
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
     ${({
   $displayState
 }) => $displayState === 'maxAmount' && css`
@@ -90,17 +82,9 @@ export const StyledMotionAmountControlButton = styled(motion.button)`
 }) => $color ?? theme['408']};
     display: flex;
     justify-content: center;
-    //overflow: hidden;
+    overflow: hidden;
     transition: background-color 0.2s ease-in-out;
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `};
     ${({
   $isDisabled
 }) => $isDisabled && css`

package/lib/esm/components/amount-control/AmountControl.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","~~keyboardFocusHighlightingRingCss","~~StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$~~shouldShowKeyboardHighlighting","$~~displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.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';\nimport~~ type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n transition: opacity 0.2s ease;\n height: 28px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n $hasFocus: boolean;\n $shouldShowWideInput: boolean;\n ~~$shouldShowKeyboardHighlighting?: boolean;\n~~}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n text-align: center;\n cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n ${({ $shouldShowKeyboardHighlighting }) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `}\n\n ${({ $displayState }) =>\n $displayState === 'maxAmount' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n $shouldShowWideInput: boolean;\n $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n padding: 1px 8px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n $color?: string;\n ~~$shouldShowKeyboardHighlighting?: boolean;\n~~}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n align-items: center;\n background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n $color ?? theme['408']};\n display: flex;\n justify-content: center;\n //overflow: hidden;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowKeyboardHighlighting }: StyledAmountControlButtonProps) =>\n $shouldShowKeyboardHighlighting &&\n css`\n &:focus-visible {\n ${keyboardFocusHighlightingRingCss}\n }\n `};\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;~~AAE~~/C,~~SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,~~OAAO,MAAMC,mBAAmB,~~GAAGH~~,MAAM,~~CAACI~~,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,~~IACXL~~,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;~~AAUD~~,OAAO,~~MAAMM~~,kBAAkB,~~GAAGP~~,MAAM,~~CAACI~~,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,~~GAAGR~~,MAAM,~~CAACS~~,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;~~AAAgC,CAAC,KAClCA,+BAA+B,IAC/BX,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;~~AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,~~IAC7BZ~~,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;~~EAAEY~~,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,~~IAChBb~~,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,~~MAAMc~~,8BAA8B,~~GAAGf~~,MAAM,~~CAACI~~,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;~~EAAEM~~;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;~~AAQD~~,OAAO,MAAMC,+BAA+B,~~GAAGjB~~,MAAM,CACjDD,MAAM,~~CAACmB~~,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;~~EAAEb~~,KAAK;~~EAAEc~~;AAAuC,CAAC,KAClEA,MAAM,~~IAAId~~,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;~~EAAEO~~;~~AAAgE,CAAC,KAClEA,+BAA+B,IAC/BX,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEI;~~AAAY,CAAC,KACdA,WAAW,~~IACXL~~,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n display: flex;\n width: fit-content;\n border-radius: 3px;\n overflow: hidden;\n transition: opacity 0.2s ease;\n height: 28px;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n $displayState: DisplayState;\n $shouldShowIcon: boolean;\n $hasFocus: boolean;\n $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n text-align: center;\n cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n ${({ $displayState }) =>\n $displayState === 'maxAmount' &&\n css`\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n `}\n ${({ $displayState, $shouldShowIcon }) =>\n $displayState === 'default' &&\n !$shouldShowIcon &&\n css`\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n $shouldShowWideInput: boolean;\n $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n background-color: rgba(255, 255, 255, 0.2);\n color: white;\n border: none;\n height: 28px;\n min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n padding: 1px 8px;\n text-align: center;\n cursor: pointer;\n user-select: none;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n $isDisabled: boolean;\n $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n motion.button,\n)<StyledAmountControlButtonProps>`\n align-items: center;\n background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n $color ?? theme['408']};\n display: flex;\n justify-content: center;\n overflow: hidden;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AASD,OAAO,MAAMK,kBAAkB,GAAGN,MAAM,CAACG,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGP,MAAM,CAACQ,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BV,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEU,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBX,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMY,8BAA8B,GAAGb,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEK;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEZ,KAAK;EAAEa;AAAuC,CAAC,KAClEA,MAAM,IAAIb,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}