npm - @chayns-components/core - Versions diffs - 5.0.0-beta.997 → 5.0.0 - Mend

@chayns-components/core 5.0.0-beta.997 → 5.0.0

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

Files changed (961) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","useEffect","handleOnSearchChance","event","target","value","titleElementChildrenSize","useElementSize","shouldUseChildElement","shouldPreventRightElementClick","useMemo","getElementClickEvent","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$color","$hasSearch","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","StyledMotionSearchWrapper","placeholder","size","InputSize","Small","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n MouseEventHandler,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n StyledAccordionIcon,\n StyledMotionAccordionHead,\n StyledMotionContentWrapper,\n StyledMotionIconWrapper,\n StyledMotionRightElementWrapper,\n StyledMotionSearchWrapper,\n StyledMotionTitle,\n StyledMotionTitleElementWrapper,\n StyledMotionTitleWrapper,\n StyledRightWrapper,\n} from './AccordionHead.styles';\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};\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 uuid,\n titleInputProps,\n onTitleInputChange,\n titleColor,\n}) => {\n const [headHeight, setHeadHeight] = useState<HeadHeight>({\n closed: isWrapped ? 40 : 33,\n open: isWrapped ? 40 : 33,\n });\n\n const theme = useTheme();\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 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 setHeadHeight(\n getAccordionHeadHeight({\n isWrapped,\n title,\n width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n hasSearch: typeof onSearchChange === 'function',\n }),\n );\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 />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n theme.accordionIcon !== 110 &&\n theme.accordionIcon !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, theme, isFixed]);\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 >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen \|\| isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\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 <Input {...titleInputProps} value={title} onChange={onTitleInputChange} />\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n <AnimatePresence\n initial={false}\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitle\n animate={{ scale: 1 }}\n initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n exit={{ opacity: 0 }}\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n transition={{\n opacity: {\n duration: 0,\n },\n }}\n key={\n isOpen && !isWrapped\n ? `accordionHeadTitleBig--${uuid}`\n : `accordionHeadTitle--${uuid}`\n }\n >\n {title}\n </StyledMotionTitle>\n </AnimatePresence>\n </StyledMotionTitleWrapper>\n {titleElement && (\n <StyledMotionTitleElementWrapper\n layout\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' \|\| rightElement) && (\n <StyledRightWrapper>\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 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":[]}
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","internalIconStyle","iconStyle","StyledUnicodeIcon","className","$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 const internalIconStyle = theme?.iconStyle ? theme.iconStyle : 'fa-regular';\n\n return <StyledUnicodeIcon className={internalIconStyle} $icon={internalIcon} />;\n }, [icon, isFixed, theme.accordionIcon, theme.headline, theme.iconColor, theme.iconStyle]);\n\n let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n accordionHeadHeight = titleElementChildrenSize.height + 8;\n }\n\n return (\n <StyledMotionAccordionHead\n animate={{ height: accordionHeadHeight }}\n className=\"beta-chayns-accordion-head\"\n initial={false}\n key={`accordionHead--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <StyledMotionIconWrapper\n animate={{ rotate: (isOpen \|\| isFixed) && shouldRotateIcon ? 90 : 0 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n key={`accordionHeadIcon--${uuid}`}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {iconElement}\n </StyledMotionIconWrapper>\n <StyledMotionContentWrapper\n animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n initial={false}\n onClick={!isFixed ? onClick : undefined}\n ref={titleWrapperRef}\n $isWrapped={isWrapped}\n key={`accordionHeadContentWrapper--${uuid}`}\n >\n {typeof onTitleInputChange === 'function' ? (\n // eslint-disable-next-line react/jsx-no-constructed-context-values\n <AreaContext.Provider value={{ shouldChangeColor: true }}>\n <StyledTitleInputWrapper>\n <Input\n /* eslint-disable-next-line react/jsx-props-no-spreading */\n {...titleInputProps}\n value={title}\n onChange={onTitleInputChange}\n />\n </StyledTitleInputWrapper>\n </AreaContext.Provider>\n ) : (\n <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n <AnimatePresence\n initial={false}\n mode=\"sync\"\n key={`accordionHeadTitleWrapper--${uuid}`}\n >\n <StyledMotionTitleWrapper\n key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n style={{\n display: 'flex',\n alignItems: 'center',\n gap: '12px',\n width: typeof title !== 'string' ? '100%' : undefined,\n }}\n initial={\n !shouldSkipAnimation\n ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n : false\n }\n exit={\n shouldSkipAnimation\n ? {\n opacity: 0,\n transition: { duration: 0 },\n transitionEnd: { display: 'none' },\n }\n : { scale: 1, opacity: 0 }\n }\n animate={{ scale: 1, opacity: 1 }}\n transition={{\n duration: shouldSkipAnimation ? 0 : 0.25,\n opacity: { duration: 0 },\n }}\n >\n {title && (\n <StyledMotionTitle\n $isOpen={isOpen}\n $isWrapped={isWrapped}\n $color={titleColor}\n $hasSearch={typeof onSearchChange === 'function'}\n animate={{\n fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem',\n }}\n initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n {title}\n </StyledMotionTitle>\n )}\n\n {titleElement && (\n <StyledMotionTitleElementWrapper\n key={`accordionTitleElement--${uuid}`}\n ref={titleElementWrapperRef}\n >\n {titleElement}\n </StyledMotionTitleElementWrapper>\n )}\n </StyledMotionTitleWrapper>\n </AnimatePresence>\n </LayoutGroup>\n )}\n </StyledMotionContentWrapper>\n {(typeof onSearchChange === 'function' \|\| rightElement) && (\n <StyledRightWrapper $isSearchActive={isSearchActive}>\n <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n {typeof onSearchChange === 'function' && isOpen && (\n <StyledMotionSearchWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`searchWrapper--${uuid}`}\n >\n <SearchInput\n onChange={handleOnSearchChance}\n onActiveChange={(isActive) => setIsSearchActive(isActive)}\n placeholder={searchPlaceholder}\n size={InputSize.Small}\n value={internalSearchValue}\n />\n </StyledMotionSearchWrapper>\n )}\n {rightElement && (\n <StyledMotionRightElementWrapper\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0 }}\n key={`rightElementWrapper--${uuid}`}\n onClick={\n !isFixed && !shouldPreventRightElementClick\n ? onClick\n : undefined\n }\n >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionSearchWrapper = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = exports.StyledAccordionIcon = void 0;
-var _framerMotion = require("framer-motion");
+exports.StyledTitleInputWrapper = exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionSearchWrapper = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = void 0;
+var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)`
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
     color: ${({
   theme
@@ -17,37 +16,22 @@ const StyledMotionAccordionHead = exports.StyledMotionAccordionHead = (0, _style
     overflow: hidden;
     padding: 4px 0;
 `;
-const StyledMotionIconWrapper = exports.StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionIconWrapper = exports.StyledMotionIconWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
     cursor: ${({
   onClick
-}) => typeof onClick === 'function' ? 'pointer' : 'default'};
+}) => typeof onClick === 'function' ? 'pointer' : 'inherit'};
     display: flex;
     flex: 0 0 auto;
     height: 25px;
     justify-content: center;
     width: 25px;
 `;
-const StyledAccordionIcon = exports.StyledAccordionIcon = _styledComponents.default.i`
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    color: ${({
-  theme
-}) => theme.headline};
-    &:before {
-        content: ${({
-  $icon
-}) => `"\\${$icon}"`};
-        font-family: 'Font Awesome 6 Pro', Fontawesome !important;
-    }
-`;
-const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-self: flex-start;
     cursor: ${({
   onClick
-}) => typeof onClick === 'function' ? 'pointer' : 'default'};
+}) => typeof onClick === 'function' ? 'pointer' : 'inherit'};
     display: flex;
     flex: 1 1 auto;
     height: 100%;
@@ -60,12 +44,15 @@ const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _sty
             align-items: center;
         `}
 `;
-const StyledMotionTitleWrapper = exports.StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionTitleWrapper = exports.StyledMotionTitleWrapper = (0, _styledComponents.default)(_react.motion.div)`
     display: grid;
     flex: 0 1 auto;
     grid-template-areas: 'header';
 `;
-const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledTitleInputWrapper = exports.StyledTitleInputWrapper = _styledComponents.default.div`
+    width: 100%;
+`;
+const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.default)(_react.motion.div)`
     font-size: ${({
   $isOpen,
   $isWrapped
@@ -101,11 +88,10 @@ const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.defa
             align-content: center;
         `}
 `;
-const StyledMotionTitleElementWrapper = exports.StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionTitleElementWrapper = exports.StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
     display: flex;
     flex: 1 1 auto;
-    margin-left: 8px;
     min-width: 0;
 `;
 const StyledRightWrapper = exports.StyledRightWrapper = _styledComponents.default.div`
@@ -116,21 +102,24 @@ const StyledRightWrapper = exports.StyledRightWrapper = _styledComponents.defaul
     overflow: hidden;
     position: relative;
 `;
-const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
+    justify-content: end;
+    position: relative;
     display: flex;
+    width: 100%;
 `;
-const StyledMotionRightElementWrapper = exports.StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionRightElementWrapper = exports.StyledMotionRightElementWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
     display: flex;
     cursor: ${({
   onClick
-}) => typeof onClick === 'function' ? 'pointer' : 'default'};
+}) => typeof onClick === 'function' ? 'pointer' : 'inherit'};
     will-change: unset !important;
 `;
-const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)`
+const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledComponents.default)(_react.motion.input)`
     background-color: transparent;
     border: 1px solid transparent;
     border-bottom-color: rgba(
@@ -147,7 +136,7 @@ const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledCompo
   $hasIcon
 }) => $hasIcon ? '5px 23px 5px 1px' : '5px 1px'};
 `;
-const StyledMotionRightInputIconWrapper = exports.StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionRightInputIconWrapper = exports.StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_react.motion.div)`
     align-items: center;
     display: flex;
     height: 100%;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AccordionHead.styles.js","names":["~~_framerMotion~~","require","_styledComponents","_interopRequireWildcard","~~_getRequireWildcardCache~~","e","WeakMap","r","t","__esModule","~~default~~","~~has~~","~~get~~","~~n","~~__proto__","a","~~Object~~","~~defineProperty~~","~~getOwnPropertyDescriptor~~","u","~~hasOwnProperty~~","~~call~~","i","~~set~~","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","~~StyledAccordionIcon","headline","$icon","~~StyledMotionContentWrapper","$isWrapped","css","StyledMotionTitleWrapper","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 '~~framer-~~motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type {~~\n FramerMotionBugFix,\n~~ WithTheme~~,\n~~} 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)~~<FramerMotionBugFix>`\~~n align-items: center;\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : '~~default~~')};\n display: flex;\n flex: 0 0 auto;\n height: 25px;\n justify-content: center;\n width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ $icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n align-items: center;\n justify-content: center;\n display: flex;\n color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n &:before {\n content: ${({ $icon }) => `\"\\\\${$icon}\"`};\n font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n }\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' : '~~default~~')};\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)~~<FramerMotionBugFix>`\~~n display: grid;\n flex: 0 1 auto;\n grid-template-areas: 'header';\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)~~<FramerMotionBugFix>`\~~n align-items: center;\n display: flex;\n flex: 1 1 auto;\n ~~margin~~-~~left~~: ~~8px~~;\n ~~min-width~~: 0;\n~~`;\~~n\nexport const StyledRightWrapper = styled.div`\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)~~<FramerMotionBugFix>`\~~n align-items: center;\n display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)~~<FramerMotionBugFix>`\~~n align-items: center;\n display: flex;\n\n cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : '~~default~~')};\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)~~<FramerMotionBugFix>`\~~n align-items: center;\n display: flex;\n height: 100%;\n justify-content: center;\n position: absolute;\n right: 4px;\n top: 0;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,~~aAAA~~,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,~~SAAAG~~,~~yBAAAC~~,CAAA,6BAAAC,OAAA,~~mBAAAC~~,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAF~~,~~wBAAA~~,YAAAA,CAAAC,CAAA,~~WAAAA~~,CAAA,~~GAAAG~~,CAAA,~~GAAAD~~,CAAA,~~KAAAF~~,CAAA~~;AAAA~~,~~SAAAF~~,~~wBAAAE~~,CAAA,~~EAAAE~~,CAAA,~~SAAAA~~,CAAA,~~IAAAF~~,CAAA,~~IAAAA~~,~~CAAA~~,~~CAAAI~~,~~UAAA~~,~~SAAAJ~~,CAAA,~~eAAAA~~,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,~~WAAAK~~,~~OAAA~~,~~EAAAL~~,CAAA,~~QAAAG~~,CAAA,~~GAAAJ~~,~~wBAAA,CAAAG,~~CAAA,~~OAAAC~~,CAAA,~~IAAAA~~,CAAA,~~CAAAG~~,GAAA,~~CAAAN~~,CAAA,~~UAAAG~~,CAAA,~~CAAAI~~,GAAA,~~CAAAP~~,CAAA,~~OAAAQ~~,CAAA,~~KAAAC~~,~~SAAA~~,~~UAAAC~~,CAAA,~~GAAAC~~,~~MAAA~~,~~CAAAC~~,~~cAAA~~,IAAAD,~~MAAA,CAAAE,wBAAA,WAAAC,~~CAAA,~~IAAAd~~,CAAA,~~oBAAAc~~,~~CAAA,OAAAC,~~cAAA,CAAAC,IAAA,~~CAAAhB~~,CAAA,~~EAAAc~~,CAAA,~~SAAAG~~,CAAA,~~GAAAP~~,CAAA,~~GAAAC~~,MAAA,CAAAE,wBAAA,~~CAAAb~~,CAAA,~~EAAAc~~,CAAA,~~UAAAG~~,CAAA,~~KAAAA~~,~~CAAA,CAAAV,~~GAAA,~~IAAAU~~,CAAA,~~CAAAC~~,GAAA,IAAAP,~~MAAA,CAAAC,cAAA,CAAAJ,~~CAAA,~~EAAAM~~,CAAA,~~EAAAG~~,CAAA,~~IAAAT~~,CAAA,~~CAAAM~~,CAAA,~~IAAAd~~,CAAA,~~CAAAc~~,CAAA,~~YAAAN~~,CAAA,~~CAAAH~~,~~OAAA,GAAAL,~~CAAA,~~EAAAG~~,CAAA,~~IAAAA~~,CAAA~~,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA~~;~~AAQzC~~,~~MAAMW~~,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,CAAiC;AAC3F;AACA,aAAa,CAAC;EAAEC;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACtE;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAN,OAAA,CAAAM,uBAAA,GAAG,IAAAL,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,~~CAAqB~~;~~AAC7E~~;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,~~mBAAmB~~,GAAAR,OAAA,CAAAQ,mBAAA,GAAGP,yBAAM,CAACJ,CAA2B;AACrE;AACA;AACA;AACA,aAAa,CAAC;EAAEO;AAAgC,CAAC,KAAKA,KAAK,CAACK,QAAQ;AACpE;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAM,CAAC,KAAK,MAAMA,KAAK,GAAG;AAChD;AACA;AACA,CAAC;AAIM,MAAMC,0BAA0B,GAAAX,OAAA,CAAAW,0BAAA,GAAG,~~IAAAV~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,CAAkC;AAC7F;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;~~EAAEK~~;AAAW,CAAC,KACbA,UAAU,IACV,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,MAAMC,wBAAwB,~~GAAAd~~,OAAA,~~CAAAc~~,wBAAA,GAAG,~~IAAAb~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,~~CAAqB~~;~~AAC9E~~;AACA;AACA;AACA,CAAC;AASM,~~MAAMY~~,iBAAiB,~~GAAAf~~,OAAA,~~CAAAe~~,iBAAA,GAAG,~~IAAAd~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,CAAyB;AAC3E,iBAAiB,CAAC;~~EAAEa~~,OAAO;~~EAAEJ~~;AAAW,CAAC,~~KAAMI~~,OAAO,IAAI,~~CAACJ~~,UAAU,GAAG,QAAQ,~~GAAGK~~,SAAU;AAC7F,mBAAmB,CAAC;EAAED,OAAO;~~EAAEJ~~;AAAW,CAAC,~~KAAMI~~,OAAO,~~IAAIJ~~,UAAU,GAAG,GAAG,GAAG,QAAS;AACxF;AACA,cAAc,CAAC;EAAEA,UAAU;~~EAAEM~~;AAAW,CAAC,~~KAAMN~~,UAAU,~~IAAIM~~,UAAU,GAAG,MAAM,GAAGD,SAAU;AAC7F;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEE,MAAM;~~EAAEf~~;AAA8B,CAAC,~~KAAKe~~,MAAM,~~IAAIf~~,KAAK,CAACC,IAAI;AAChF,mBAAmB,CAAC;~~EAAEW~~,OAAO;~~EAAEJ~~,UAAU;~~EAAEM~~;AAAW,CAAC,KAC/CF,OAAO,IAAI,~~CAACJ~~,UAAU,IAAI,~~CAACM~~,UAAU,GAAG,QAAQ,GAAG,QAAQ;AACnE;AACA;AACA;AACA,MAAM,CAAC;~~EAAEN~~;AAAW,CAAC,KACbA,UAAU,IACV,IAAAC,qBAAG;AACX;AACA,SAAS;AACT,CAAC;AAEM,~~MAAMO~~,+BAA+B,~~GAAApB~~,OAAA,~~CAAAoB~~,+BAAA,GAAG,~~IAAAnB~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,~~CAAqB~~;~~AACrF~~;AACA;AACA;AACA;AACA~~;AACA~~,CAAC;~~AAEM~~,~~MAAMkB~~,kBAAkB,~~GAAArB~~,OAAA,~~CAAAqB~~,kBAAA,~~GAAGpB~~,yBAAM,CAACE,~~GAAG~~;~~AAC5C~~;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,~~MAAMmB~~,yBAAyB,~~GAAAtB~~,OAAA,~~CAAAsB~~,yBAAA,GAAG,~~IAAArB~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,~~CAAqB~~;~~AAC/E~~;AACA;AACA,CAAC;AAEM,~~MAAMoB~~,+BAA+B,~~GAAAvB~~,OAAA,~~CAAAuB~~,+BAAA,GAAG,~~IAAAtB~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,~~CAAqB~~;~~AACrF~~;AACA;AACA;AACA,cAAc,CAAC;EAAEI;AAAQ,CAAC,KAAM,OAAOA,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;AACtF;AACA;AACA,CAAC;AAMM,~~MAAMiB~~,sBAAsB,~~GAAAxB~~,OAAA,~~CAAAwB~~,sBAAA,GAAG,~~IAAAvB~~,yBAAM,EAACC,~~oBAAM~~,~~CAACuB~~,KAAK,CAA8B;AACvF;AACA;AACA;AACA,UAAU,CAAC;~~EAAErB~~;AAAmC,CAAC,KAAKA,KAAK,CAAC,cAAc,CAAC;AAC3E;AACA;AACA,aAAa,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA,eAAe,CAAC;~~EAAEqB~~;AAAS,CAAC,KAAMA,QAAQ,GAAG,kBAAkB,GAAG,SAAU;AAC5E,CAAC;AAEM,MAAMC,iCAAiC,~~GAAA3B~~,OAAA,~~CAAA2B~~,iCAAA,GAAG,~~IAAA1B~~,yBAAM,EAACC,~~oBAAM~~,CAACC,GAAG,~~CAAqB~~;~~AACvF~~;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
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":[]}

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

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _amountControl = require("../../utils/amountControl");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _AmountControl = require("./AmountControl.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const AmountControl = ({
   amount,
   icon,
@@ -21,25 +20,23 @@ const AmountControl = ({
   maxAmount,
   minAmount = 0,
   onChange,
+  shouldForceLabel = false,
   shouldShowAddIconOnMinAmount = false,
   shouldShowIcon = true,
   shouldShowWideInput = false,
   step: stepProp = 1
 }) => {
-  const [amountValue, setAmountValue] = (0, _react.useState)(minAmount);
-  const [inputValue, setInputValue] = (0, _react.useState)(minAmount.toString());
-  const [displayState, setDisplayState] = (0, _react.useState)('default');
-  const step = (0, _react.useMemo)(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
-  const inputRef = (0, _react.useRef)(null);
+  const [amountValue, setAmountValue] = (0, _react2.useState)(minAmount);
+  const [inputValue, setInputValue] = (0, _react2.useState)(minAmount.toString());
+  const [displayState, setDisplayState] = (0, _react2.useState)('default');
+  const step = (0, _react2.useMemo)(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
+  const inputRef = (0, _react2.useRef)(null);
   /**
    * This function controls the displayState
    */
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     switch (true) {
-      case maxAmount === 1 && amountValue === 1:
-        setDisplayState('delete');
-        return;
       case maxAmount && amountValue >= maxAmount:
         setDisplayState('maxAmount');
         return;
@@ -53,13 +50,13 @@ const AmountControl = ({
         setDisplayState('default');
     }
   }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);
-  const hasFocus = (0, _react.useMemo)(() => displayState !== 'default', [displayState]);
+  const hasFocus = (0, _react2.useMemo)(() => displayState !== 'default', [displayState]);
   /**
    * Function that sets the amountValue to the amount
    */
-  (0, _react.useEffect)(() => {
-    if (typeof amount !== "number") {
+  (0, _react2.useEffect)(() => {
+    if (typeof amount !== 'number') {
       return;
     }
     setAmountValue((0, _amountControl.checkForValidAmount)({
@@ -73,7 +70,7 @@ const AmountControl = ({
       minAmount
     }).toString());
   }, [amount, maxAmount, minAmount]);
-  const handleAmountAdd = (0, _react.useCallback)(() => {
+  const handleAmountAdd = (0, _react2.useCallback)(() => {
     setAmountValue(prevState => {
       const newAmount = (0, _amountControl.checkForValidAmount)({
         amount: prevState + step,
@@ -91,7 +88,7 @@ const AmountControl = ({
       maxAmount
     }).toString());
   }, [amount, maxAmount, minAmount, onChange, step]);
-  const handleAmountRemove = (0, _react.useCallback)(() => {
+  const handleAmountRemove = (0, _react2.useCallback)(() => {
     if (displayState === 'default') {
       return;
     }
@@ -112,7 +109,7 @@ const AmountControl = ({
       maxAmount
     }).toString());
   }, [displayState, maxAmount, minAmount, onChange, step]);
-  const handleFirstAmount = (0, _react.useCallback)(() => {
+  const handleFirstAmount = (0, _react2.useCallback)(() => {
     if (amountValue !== minAmount) {
       return;
     }
@@ -122,7 +119,7 @@ const AmountControl = ({
     setAmountValue(minAmount + step);
     setInputValue((minAmount + step).toString());
   }, [amountValue, minAmount, onChange, step]);
-  const handleDeleteIconClick = (0, _react.useCallback)(() => {
+  const handleDeleteIconClick = (0, _react2.useCallback)(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
         var _inputRef$current;
@@ -132,7 +129,7 @@ const AmountControl = ({
       handleAmountRemove();
     }
   }, [handleAmountRemove, inputValue]);
-  const handleInputBlur = (0, _react.useCallback)(() => {
+  const handleInputBlur = (0, _react2.useCallback)(() => {
     const checkedValue = (0, _amountControl.checkForValidAmount)({
       minAmount,
       maxAmount,
@@ -147,7 +144,7 @@ const AmountControl = ({
       setInputValue(minAmount.toString());
     }
   }, [inputValue, maxAmount, minAmount, onChange, step]);
-  const handleInputChange = (0, _react.useCallback)(event => {
+  const handleInputChange = (0, _react2.useCallback)(event => {
     const {
       value
     } = event.target;
@@ -158,65 +155,24 @@ const AmountControl = ({
     }
     setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
   }, [minAmount]);
-  const leftIcon = (0, _react.useMemo)(() => {
-    let item = null;
-    switch (displayState) {
-      case 'default':
-        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          icons: [icon ?? 'fa fa-cart-shopping'],
-          size: 15,
-          color: iconColor
-        });
-        break;
-      case 'delete':
-        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          icons: ['fa ts-check'],
-          size: 20,
-          color: "white"
-        });
-        break;
-      case 'normal':
-        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          icons: ['fa fa-minus'],
-          size: 15,
-          color: "red"
-        });
-        break;
-      case 'maxAmount':
-        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          icons: ['fa fa-minus'],
-          size: 15,
-          color: "red"
-        });
-        break;
-      default:
-        break;
-    }
-    return item;
-  }, [displayState, icon, iconColor]);
-  const shouldShowLeftIcon = (0, _react.useMemo)(() => {
-    if (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {
-      return false;
-    }
-    if (shouldShowIcon) {
-      return true;
-    }
-    return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);
-  }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControl, {
+  let inputLabel = inputValue;
+  if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {
+    inputLabel = label;
+  }
+  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControl, {
     onClick: handleFirstAmount,
     $isDisabled: isDisabled
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
-  }, shouldShowLeftIcon && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
-    key: "right_button",
+  }, ['normal'].includes(displayState) && /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    key: "left_button",
     initial: {
       width: 0,
       opacity: 0,
       padding: 0
     },
     animate: {
-      width: displayState === 'normal' || displayState === 'maxAmount' ? 40 : 28,
+      width: 40,
       opacity: 1,
       padding: 0
     },
@@ -225,19 +181,22 @@ const AmountControl = ({
       opacity: 0,
       padding: 0
     },
-    $isWide: displayState === 'normal' || displayState === 'maxAmount',
     transition: {
       duration: 0.2,
       type: 'tween'
     },
     onClick: handleAmountRemove,
-    $color: displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined,
     disabled: amountValue !== 0 && amountValue <= minAmount,
     $isDisabled: amountValue !== 0 && amountValue <= minAmount
-  }, leftIcon)), displayState === 'delete' || inputValue === '0' ? /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlPseudoInput, {
+  }, /*#__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,
-    $shouldShowWideInput: shouldShowWideInput
-  }, displayState === 'default' && label ? label : inputValue) : /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
+    $shouldShowWideInput: shouldShowWideInput,
+    $shouldShowRightIcon: !['maxAmount'].includes(displayState)
+  }, inputLabel) : /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledAmountControlInput, {
     ref: inputRef,
     $displayState: displayState,
     $shouldShowIcon: shouldShowIcon,
@@ -245,10 +204,10 @@ const AmountControl = ({
     $hasFocus: hasFocus,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
-    value: displayState === 'default' && label ? label : inputValue
-  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    value: inputLabel
+  })), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
-  }, (displayState === 'normal' || displayState === 'minAmount') && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+  }, /*#__PURE__*/_react2.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
     key: "right_button",
     initial: {
       width: 0,
@@ -269,15 +228,15 @@ const AmountControl = ({
       duration: 0.2,
       type: 'tween'
     },
-    onClick: handleAmountAdd,
-    $isWide: true,
+    $color: displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined,
+    onClick: displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd,
     disabled: maxAmount ? amountValue >= maxAmount : false,
     $isDisabled: maxAmount ? amountValue >= maxAmount : false
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icons: ['fa fa-plus'],
-    size: 15,
-    color: "green"
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, isDisabled, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  }, /*#__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]);
 };
 AmountControl.displayName = 'AmountControl';
 var _default = exports.default = AmountControl;