@chayns-components/core 5.3.9 → 5.3.11-alpha.0

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

@@ -15,7 +15,10 @@ const AccordionGroupContext = exports.AccordionGroupContext = /*#__PURE__*/_reac
   setOpenAccordionUuid: undefined,
   updateOpenAccordionUuid: undefined,
   accordionUuids: undefined,
-  updateAccordionUuids: undefined,
+  registerAccordionUuid: undefined,
+  unregisterAccordionUuid: undefined,
+  activeAccordionUuid: undefined,
+  updateActiveAccordionUuid: undefined,
   accordionGroupUuid: undefined
 });
 AccordionGroupContext.displayName = 'AccordionGroupContext';
@@ -27,13 +30,10 @@ const AccordionGroup = ({
 }) => {
   const [openAccordionUuid, setOpenAccordionUuid] = (0, _react2.useState)(undefined);
   const [accordionUuids, setAccordionUuids] = (0, _react2.useState)();
+  const [activeAccordionUuid, setActiveAccordionUuid] = (0, _react2.useState)(undefined);
   const accordionGroupId = (0, _uuid.useUuid)();
   const isInitialRenderRef = (0, _react2.useRef)(true);
-  const updateAccordionUuids = (0, _react2.useCallback)(uuids => {
-    setAccordionUuids(uuids);
-  }, []);
   const areaProvider = (0, _react2.useContext)(_AreaContextProvider.AreaContext);
-  const childrenCount = _react2.default.Children.count(children);
   const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;
   const updateOpenAccordionUuid = (0, _react2.useCallback)((uuid, {
     shouldOnlyOpen
@@ -45,19 +45,33 @@ const AccordionGroup = ({
       return uuid;
     });
   }, [setOpenAccordionUuid]);
-  (0, _react2.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 = (0, _react2.useCallback)(uuids => {
+    if (typeof document === 'undefined') return uuids;
+    const domOrderedUuids = Array.from(document.querySelectorAll(`[data-uuid^="${accordionGroupId}---"]`)).map(element => {
+      var _element$getAttribute;
+      return (_element$getAttribute = element.getAttribute('data-uuid')) === null || _element$getAttribute === void 0 ? void 0 : _element$getAttribute.split('---')[1];
+    }).filter(uuid => Boolean(uuid));
+    return domOrderedUuids.filter(uuid => uuids.includes(uuid));
+  }, [accordionGroupId]);
+  const registerAccordionUuid = (0, _react2.useCallback)(uuid => {
+    setAccordionUuids((currentAccordionUuids = []) => {
+      const nextAccordionUuids = currentAccordionUuids.includes(uuid) ? currentAccordionUuids : [...currentAccordionUuids, uuid];
+      return sortAccordionUuidsByDom(nextAccordionUuids);
     });
-    updateAccordionUuids(result);
-  }, [accordionGroupId, childrenCount, updateAccordionUuids]);
+  }, [sortAccordionUuidsByDom]);
+  const unregisterAccordionUuid = (0, _react2.useCallback)(uuid => {
+    setAccordionUuids((currentAccordionUuids = []) => currentAccordionUuids.filter(currentUuid => currentUuid !== uuid));
+  }, []);
+  const updateActiveAccordionUuid = (0, _react2.useCallback)(uuid => {
+    setActiveAccordionUuid(uuid);
+  }, []);
+  (0, _react2.useEffect)(() => {
+    if (!(accordionUuids !== null && accordionUuids !== void 0 && accordionUuids.length)) {
+      setActiveAccordionUuid(undefined);
+      return;
+    }
+    setActiveAccordionUuid(currentActiveAccordionUuid => currentActiveAccordionUuid && accordionUuids.includes(currentActiveAccordionUuid) ? currentActiveAccordionUuid : undefined);
+  }, [accordionUuids]);
   (0, _react2.useEffect)(() => {
     if (isInitialRenderRef.current) {
       isInitialRenderRef.current = false;
@@ -74,10 +88,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__*/_react2.default.createElement(AccordionGroupContext.Provider, {
     value: providerValue
   }, /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionGroup.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_AreaContextProvider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionGroupContext","exports","React","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","useState","setAccordionUuids","accordionGroupId","useUuid","isInitialRenderRef","useRef","useCallback","uuids","areaProvider","useContext","AreaContext","childrenCount","Children","count","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","currentOpenAccordionUuid","useEffect","elements","document","querySelectorAll","elementUuids","Array","from","map","el","getAttribute","result","forEach","elementUuid","groupUuid","accordionUuid","split","push","current","providerValue","useMemo","createElement","Provider","value","MotionConfig","transition","type","AnimatePresence","initial","_default"],"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":["_react","require","_react2","_interopRequireWildcard","_uuid","_AreaContextProvider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionGroupContext","exports","React","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","registerAccordionUuid","unregisterAccordionUuid","activeAccordionUuid","updateActiveAccordionUuid","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","useState","setAccordionUuids","setActiveAccordionUuid","accordionGroupId","useUuid","isInitialRenderRef","useRef","areaProvider","useContext","AreaContext","shouldWrap","shouldChangeColor","useCallback","uuid","shouldOnlyOpen","currentOpenAccordionUuid","sortAccordionUuidsByDom","uuids","document","domOrderedUuids","Array","from","querySelectorAll","map","element","_element$getAttribute","getAttribute","split","filter","Boolean","includes","currentAccordionUuids","nextAccordionUuids","currentUuid","useEffect","length","currentActiveAccordionUuid","current","providerValue","useMemo","createElement","Provider","value","MotionConfig","transition","type","AnimatePresence","initial","_default"],"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/cjs/components/accordion/accordion-head/AccordionHead.js

@@ -37,7 +37,8 @@ const AccordionHead = ({
   uuid,
   titleInputProps,
   onTitleInputChange,
-  titleColor
+  titleColor,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [headHeight, setHeadHeight] = (0, _react2.useState)({
     closed: isWrapped ? 40 : 32,
@@ -145,7 +146,8 @@ const AccordionHead = ({
   }, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledTitleInputWrapper, null, /*#__PURE__*/_react2.default.createElement(_Input.default
   /* eslint-disable-next-line react/jsx-props-no-spreading */, _extends({}, titleInputProps, {
     value: title,
-    onChange: onTitleInputChange
+    onChange: onTitleInputChange,
+    shouldEnableKeyboardHighlighting: (titleInputProps === null || titleInputProps === void 0 ? void 0 : titleInputProps.shouldEnableKeyboardHighlighting) ?? shouldEnableKeyboardHighlighting
   })))) : /*#__PURE__*/_react2.default.createElement(_react.LayoutGroup, {
     key: `accordionHeadLayoutGroup--${uuid}`
   }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
@@ -223,7 +225,8 @@ const AccordionHead = ({
     onActiveChange: isActive => setIsSearchActive(isActive),
     placeholder: searchPlaceholder,
     size: _Input.InputSize.Small,
-    value: internalSearchValue
+    value: internalSearchValue,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })), rightElement && /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionRightElementWrapper, {
     animate: {
       opacity: 1

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","_Icon2","_icon","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","isSearchActive","setIsSearchActive","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","window","setTimeout","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","color","iconColor","headline","internalIcon","getIsExpandableIcon","accordionIcon","StyledUnicodeIcon","className","iconStyle","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","transition","duration","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","StyledTitleInputWrapper","onChange","LayoutGroup","AnimatePresence","mode","StyledMotionTitleWrapper","style","display","alignItems","gap","scale","exit","transitionEnd","StyledMotionTitle","$isOpen","$color","$hasSearch","StyledMotionTitleElementWrapper","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","onActiveChange","isActive","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"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":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","_Icon2","_icon","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","shouldEnableKeyboardHighlighting","headHeight","setHeadHeight","useState","closed","open","isSearchActive","setIsSearchActive","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","window","setTimeout","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","color","iconColor","headline","internalIcon","getIsExpandableIcon","accordionIcon","StyledUnicodeIcon","className","iconStyle","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","transition","duration","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","StyledTitleInputWrapper","onChange","LayoutGroup","AnimatePresence","mode","StyledMotionTitleWrapper","style","display","alignItems","gap","scale","exit","transitionEnd","StyledMotionTitle","$isOpen","$color","$hasSearch","StyledMotionTitleElementWrapper","StyledRightWrapper","$isSearchActive","StyledMotionSearchWrapper","onActiveChange","isActive","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"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/cjs/components/accordion/accordion-head/AccordionHead.styles.js

@@ -15,6 +15,12 @@ const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _style
     display: flex;
     overflow: hidden;
     padding: 4px 0;
+
+    &:focus-within {
+        overflow: visible;
+        position: relative;
+        z-index: 1;
+    }
 `;
 const StyledMotionIconWrapper = exports.StyledMotionIconWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
@@ -38,6 +44,10 @@ const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _sty
     overflow: hidden;
     margin-right: 10px;
 
+    &:focus-within {
+        overflow: visible;
+    }
+
     ${({
   $isWrapped
 }) => $isWrapped && (0, _styledComponents.css)`
@@ -101,6 +111,10 @@ const StyledRightWrapper = exports.StyledRightWrapper = _styledComponents.defaul
     margin-right: 5px;
     overflow: hidden;
     position: relative;
+
+    &:focus-within {
+        overflow: visible;
+    }
 `;
 const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;

package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","$isWrapped","css","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":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","$isWrapped","css","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/cjs/components/amount-control/AmountControl.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = require("motion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _amountControl = require("../../utils/amountControl");
+var _useKeyboardFocusHighlighting = require("../../hooks/useKeyboardFocusHighlighting");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _AmountControl = require("./AmountControl.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,15 +21,18 @@ const AmountControl = ({
   maxAmount,
   minAmount = 0,
   onChange,
+  shouldEnableKeyboardHighlighting,
   shouldForceLabel = false,
   shouldShowAddIconOnMinAmount = false,
   shouldShowIcon = true,
   shouldShowWideInput = false,
   step: stepProp = 1
 }) => {
+  const shouldShowKeyboardHighlighting = (0, _useKeyboardFocusHighlighting.useKeyboardFocusHighlighting)(shouldEnableKeyboardHighlighting && !isDisabled);
   const [amountValue, setAmountValue] = (0, _react2.useState)(minAmount);
   const [inputValue, setInputValue] = (0, _react2.useState)(minAmount.toString());
   const [displayState, setDisplayState] = (0, _react2.useState)('default');
+  const [isEditing, setIsEditing] = (0, _react2.useState)(false);
   const step = (0, _react2.useMemo)(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = (0, _react2.useRef)(null);
 
@@ -110,6 +114,9 @@ const AmountControl = ({
     }).toString());
   }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = (0, _react2.useCallback)(() => {
+    if (isDisabled) {
+      return;
+    }
     if (amountValue !== minAmount) {
       return;
     }
@@ -118,17 +125,17 @@ const AmountControl = ({
     }
     setAmountValue(minAmount + step);
     setInputValue((minAmount + step).toString());
-  }, [amountValue, minAmount, onChange, step]);
-  const handleDeleteIconClick = (0, _react2.useCallback)(() => {
-    if (inputValue === '0') {
-      window.setTimeout(() => {
-        var _inputRef$current;
-        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-      }, 500);
-    } else {
-      handleAmountRemove();
+  }, [amountValue, isDisabled, minAmount, onChange, step]);
+  const handlePseudoInputClick = (0, _react2.useCallback)(() => {
+    if (isDisabled) {
+      return;
     }
-  }, [handleAmountRemove, inputValue]);
+    setIsEditing(true);
+    window.requestAnimationFrame(() => {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+    });
+  }, [isDisabled]);
   const handleInputBlur = (0, _react2.useCallback)(() => {
     const checkedValue = (0, _amountControl.checkForValidAmount)({
       minAmount,
@@ -137,6 +144,7 @@ const AmountControl = ({
     });
     setAmountValue(checkedValue);
     setInputValue(checkedValue.toString());
+    setIsEditing(false);
     if (typeof onChange === 'function') {
       onChange(checkedValue);
     }
@@ -159,12 +167,14 @@ const AmountControl = ({
   if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {
     inputLabel = label;
   }
+  const shouldShowPseudoInput = !isEditing && (inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label);
   return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControl, {
     onClick: handleFirstAmount,
     $isDisabled: isDisabled
   }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, ['normal'].includes(displayState) && /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     key: "left_button",
     initial: {
       width: 0,
@@ -186,14 +196,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__*/_react2.default.createElement(_Icon.default, {
     icons: ['fa fa-minus'],
     size: 14,
     color: "white"
-  }))), /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledInputWrapper, null, displayState === 'maxAmount' || inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label ? /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControlPseudoInput, {
-    onClick: handleDeleteIconClick,
+  }))), /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledInputWrapper, null, shouldShowPseudoInput ? /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControlPseudoInput, {
+    onClick: handlePseudoInputClick,
     $shouldShowWideInput: shouldShowWideInput,
     $shouldShowRightIcon: !['maxAmount'].includes(displayState)
   }, inputLabel) : /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControlInput, {
@@ -202,12 +212,16 @@ const AmountControl = ({
     $shouldShowIcon: shouldShowIcon,
     $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
+    disabled: isDisabled,
+    onFocus: () => setIsEditing(true),
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     value: inputLabel
   })), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     key: "right_button",
     initial: {
       width: 0,
@@ -230,13 +244,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__*/_react2.default.createElement(_Icon.default, {
     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';
 var _default = exports.default = AmountControl;