@chayns-components/core 5.4.13 → 5.4.14-alpha.0

package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","$maxHeight"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n    $maxHeight?: number;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n    overflow: hidden;\n    transition: none !important;\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9BH,GAAG;AACX,0BAA0BG,UAAU;AACpC;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","$maxHeight"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n    $maxHeight?: number;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n    /* overflow: clip erlaubt overflow-clip-margin, sodass der Fokusring sichtbar bleibt */\n    overflow: clip;\n    overflow-clip-margin: 4px;\n    transition: none !important;\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAO/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9BH,GAAG;AACX,0BAA0BG,UAAU;AACpC;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/accordion/accordion-group/AccordionGroup.js

@@ -8,7 +8,10 @@ export const AccordionGroupContext = /*#__PURE__*/React.createContext({
   setOpenAccordionUuid: undefined,
   updateOpenAccordionUuid: undefined,
   accordionUuids: undefined,
-  updateAccordionUuids: undefined,
+  registerAccordionUuid: undefined,
+  unregisterAccordionUuid: undefined,
+  activeAccordionUuid: undefined,
+  updateActiveAccordionUuid: undefined,
   accordionGroupUuid: undefined
 });
 AccordionGroupContext.displayName = 'AccordionGroupContext';
@@ -20,13 +23,10 @@ const AccordionGroup = ({
 }) => {
   const [openAccordionUuid, setOpenAccordionUuid] = useState(undefined);
   const [accordionUuids, setAccordionUuids] = useState();
+  const [activeAccordionUuid, setActiveAccordionUuid] = useState(undefined);
   const accordionGroupId = useUuid();
   const isInitialRenderRef = useRef(true);
-  const updateAccordionUuids = useCallback(uuids => {
-    setAccordionUuids(uuids);
-  }, []);
   const areaProvider = useContext(AreaContext);
-  const childrenCount = React.Children.count(children);
   const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;
   const updateOpenAccordionUuid = useCallback((uuid, {
     shouldOnlyOpen
@@ -38,19 +38,30 @@ const AccordionGroup = ({
       return uuid;
     });
   }, [setOpenAccordionUuid]);
-  useEffect(() => {
-    if (childrenCount === 0) return;
-    const elements = document.querySelectorAll('[data-uuid]');
-    const elementUuids = Array.from(elements).map(el => el.getAttribute('data-uuid'));
-    const result = [];
-    elementUuids.forEach(elementUuid => {
-      const [groupUuid, accordionUuid] = (elementUuid ?? '').split('---');
-      if (groupUuid === accordionGroupId && typeof accordionUuid === 'string') {
-        result.push(accordionUuid);
-      }
+  const sortAccordionUuidsByDom = useCallback(uuids => {
+    if (typeof document === 'undefined') return uuids;
+    const domOrderedUuids = Array.from(document.querySelectorAll(`[data-uuid^="${accordionGroupId}---"]`)).map(element => element.getAttribute('data-uuid')?.split('---')[1]).filter(uuid => Boolean(uuid));
+    return domOrderedUuids.filter(uuid => uuids.includes(uuid));
+  }, [accordionGroupId]);
+  const registerAccordionUuid = useCallback(uuid => {
+    setAccordionUuids((currentAccordionUuids = []) => {
+      const nextAccordionUuids = currentAccordionUuids.includes(uuid) ? currentAccordionUuids : [...currentAccordionUuids, uuid];
+      return sortAccordionUuidsByDom(nextAccordionUuids);
     });
-    updateAccordionUuids(result);
-  }, [accordionGroupId, childrenCount, updateAccordionUuids]);
+  }, [sortAccordionUuidsByDom]);
+  const unregisterAccordionUuid = useCallback(uuid => {
+    setAccordionUuids((currentAccordionUuids = []) => currentAccordionUuids.filter(currentUuid => currentUuid !== uuid));
+  }, []);
+  const updateActiveAccordionUuid = useCallback(uuid => {
+    setActiveAccordionUuid(uuid);
+  }, []);
+  useEffect(() => {
+    if (!accordionUuids?.length) {
+      setActiveAccordionUuid(undefined);
+      return;
+    }
+    setActiveAccordionUuid(currentActiveAccordionUuid => currentActiveAccordionUuid && accordionUuids.includes(currentActiveAccordionUuid) ? currentActiveAccordionUuid : undefined);
+  }, [accordionUuids]);
   useEffect(() => {
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
@@ -67,10 +78,13 @@ const AccordionGroup = ({
     openAccordionUuid,
     setOpenAccordionUuid,
     updateOpenAccordionUuid,
-    updateAccordionUuids,
     accordionUuids,
+    registerAccordionUuid,
+    unregisterAccordionUuid,
+    activeAccordionUuid,
+    updateActiveAccordionUuid,
     accordionGroupUuid: accordionGroupId
-  }), [accordionGroupId, accordionUuids, shouldWrap, openAccordionUuid, updateAccordionUuids, updateOpenAccordionUuid]);
+  }), [accordionGroupId, accordionUuids, shouldWrap, openAccordionUuid, registerAccordionUuid, unregisterAccordionUuid, updateOpenAccordionUuid, activeAccordionUuid, updateActiveAccordionUuid]);
   return /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
     value: providerValue
   }, /*#__PURE__*/React.createElement(MotionConfig, {

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

@@ -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","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":[]}
+{"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":[]}

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

@@ -29,7 +29,8 @@ const AccordionHead = ({
   uuid,
   titleInputProps,
   onTitleInputChange,
-  titleColor
+  titleColor,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [headHeight, setHeadHeight] = useState({
     closed: isWrapped ? 40 : 32,
@@ -136,7 +137,8 @@ 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
+    onChange: onTitleInputChange,
+    shouldEnableKeyboardHighlighting: titleInputProps?.shouldEnableKeyboardHighlighting ?? shouldEnableKeyboardHighlighting
   })))) : /*#__PURE__*/React.createElement(LayoutGroup, {
     key: `accordionHeadLayoutGroup--${uuid}`
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
@@ -214,7 +216,8 @@ const AccordionHead = ({
     onActiveChange: isActive => setIsSearchActive(isActive),
     placeholder: searchPlaceholder,
     size: InputSize.Small,
-    value: internalSearchValue
+    value: internalSearchValue,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })), rightElement && /*#__PURE__*/React.createElement(StyledMotionRightElementWrapper, {
     animate: {
       opacity: 1

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

@@ -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","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":[]}
+{"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":[]}

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

@@ -8,6 +8,12 @@ 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;
@@ -31,6 +37,10 @@ export const StyledMotionContentWrapper = styled(motion.div)`
     overflow: hidden;
     margin-right: 10px;
 
+    &:focus-within {
+        overflow: visible;
+    }
+
     ${({
   $isWrapped
 }) => $isWrapped && css`
@@ -94,6 +104,10 @@ 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

@@ -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\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":"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","ignoreList":[]}
+{"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":"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","ignoreList":[]}

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

@@ -1,6 +1,7 @@
 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 = ({
@@ -12,15 +13,18 @@ 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);
 
@@ -102,6 +106,9 @@ const AmountControl = ({
     }).toString());
   }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
     if (amountValue !== minAmount) {
       return;
     }
@@ -110,16 +117,16 @@ const AmountControl = ({
     }
     setAmountValue(minAmount + step);
     setInputValue((minAmount + step).toString());
-  }, [amountValue, minAmount, onChange, step]);
-  const handleDeleteIconClick = useCallback(() => {
-    if (inputValue === '0') {
-      window.setTimeout(() => {
-        inputRef.current?.focus();
-      }, 500);
-    } else {
-      handleAmountRemove();
+  }, [amountValue, isDisabled, minAmount, onChange, step]);
+  const handlePseudoInputClick = useCallback(() => {
+    if (isDisabled) {
+      return;
     }
-  }, [handleAmountRemove, inputValue]);
+    setIsEditing(true);
+    window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  }, [isDisabled]);
   const handleInputBlur = useCallback(() => {
     const checkedValue = checkForValidAmount({
       minAmount,
@@ -128,6 +135,7 @@ const AmountControl = ({
     });
     setAmountValue(checkedValue);
     setInputValue(checkedValue.toString());
+    setIsEditing(false);
     if (typeof onChange === 'function') {
       onChange(checkedValue);
     }
@@ -150,12 +158,14 @@ 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,
@@ -177,14 +187,14 @@ const AmountControl = ({
       type: 'tween'
     },
     onClick: handleAmountRemove,
-    disabled: amountValue !== 0 && amountValue <= minAmount,
-    $isDisabled: amountValue !== 0 && amountValue <= minAmount
+    disabled: isDisabled || amountValue !== 0 && amountValue <= minAmount,
+    $isDisabled: isDisabled || amountValue !== 0 && amountValue <= minAmount
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-minus'],
     size: 14,
     color: "white"
-  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, displayState === 'maxAmount' || inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
-    onClick: handleDeleteIconClick,
+  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, shouldShowPseudoInput ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
+    onClick: handlePseudoInputClick,
     $shouldShowWideInput: shouldShowWideInput,
     $shouldShowRightIcon: !['maxAmount'].includes(displayState)
   }, inputLabel) : /*#__PURE__*/React.createElement(StyledAmountControlInput, {
@@ -193,12 +203,16 @@ 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,
@@ -221,13 +235,13 @@ const AmountControl = ({
     },
     $color: displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined,
     onClick: displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd,
-    disabled: maxAmount ? amountValue >= maxAmount : false,
-    $isDisabled: maxAmount ? amountValue >= maxAmount : false
+    disabled: isDisabled || (maxAmount ? amountValue >= maxAmount : false),
+    $isDisabled: 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, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, icon, iconColor, inputLabel, inputValue, isDisabled, label, maxAmount, minAmount, shouldForceLabel, shouldShowIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleFirstAmount, handleInputBlur, handleInputChange, handlePseudoInputClick, hasFocus, icon, iconColor, inputLabel, isDisabled, maxAmount, minAmount, shouldShowIcon, shouldShowKeyboardHighlighting, shouldShowPseudoInput, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;