@chayns-components/core 5.0.0-beta.860 → 5.0.0-beta.861
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.
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +1 -0
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +6 -0
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +1 -0
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +27 -18
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +4 -3
- package/package.json +2 -2
|
@@ -119,6 +119,7 @@ const AccordionHead = ({
|
|
|
119
119
|
initial: false,
|
|
120
120
|
onClick: !isFixed && tmp ? onClick : undefined,
|
|
121
121
|
ref: titleWrapperRef,
|
|
122
|
+
$isWrapped: isWrapped,
|
|
122
123
|
key: `accordionHeadContentWrapper--${uuid}`
|
|
123
124
|
}, typeof onTitleInputChange === 'function' ?
|
|
124
125
|
/*#__PURE__*/
|
|
@@ -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","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","useMemo","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","tmp","setTmp","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","AreaContext","Provider","shouldChangeColor","onFocus","onBlur","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$isWrapped","$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 } 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 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 const [tmp, setTmp] = useState(true);\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 && tmp ? onClick : undefined}\n ref={titleWrapperRef}\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\n {...titleInputProps}\n value={title}\n onFocus={(event) => {\n setTmp(false);\n\n if (titleInputProps?.onFocus) {\n titleInputProps.onFocus(event);\n }\n }}\n onBlur={(event) => {\n setTmp(true);\n\n if (titleInputProps?.onBlur) {\n titleInputProps.onBlur(event);\n }\n }}\n onChange={onTitleInputChange}\n />\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 >\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":["_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","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","hasSearch","fontSize","iconElement","useMemo","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","tmp","setTmp","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onFocus","onBlur","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 } 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 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 const [tmp, setTmp] = useState(true);\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 && tmp ? 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\n {...titleInputProps}\n value={title}\n onFocus={(event) => {\n setTmp(false);\n\n if (titleInputProps?.onFocus) {\n titleInputProps.onFocus(event);\n }\n }}\n onBlur={(event) => {\n setTmp(true);\n\n if (titleInputProps?.onBlur) {\n titleInputProps.onBlur(event);\n }\n }}\n onChange={onTitleInputChange}\n />\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 >\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":[]}
|
|
@@ -53,6 +53,12 @@ const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _sty
|
|
|
53
53
|
height: 100%;
|
|
54
54
|
overflow: hidden;
|
|
55
55
|
margin-right: 10px;
|
|
56
|
+
|
|
57
|
+
${({
|
|
58
|
+
$isWrapped
|
|
59
|
+
}) => $isWrapped && (0, _styledComponents.css)`
|
|
60
|
+
align-items: center;
|
|
61
|
+
`}
|
|
56
62
|
`;
|
|
57
63
|
const StyledMotionTitleWrapper = exports.StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
|
|
58
64
|
display: grid;
|
|
@@ -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","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","
|
|
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 margin-left: 8px;\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 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":"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","ignoreList":[]}
|
|
@@ -110,6 +110,7 @@ const AccordionHead = _ref => {
|
|
|
110
110
|
initial: false,
|
|
111
111
|
onClick: !isFixed && tmp ? onClick : undefined,
|
|
112
112
|
ref: titleWrapperRef,
|
|
113
|
+
$isWrapped: isWrapped,
|
|
113
114
|
key: `accordionHeadContentWrapper--${uuid}`
|
|
114
115
|
}, typeof onTitleInputChange === 'function' ?
|
|
115
116
|
/*#__PURE__*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","Provider","shouldChangeColor","_extends","onFocus","onBlur","onChange","scale","exit","$isOpen","$isWrapped","$color","$hasSearch","transition","duration","layout","placeholder","size","Small","displayName"],"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 } 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 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 const [tmp, setTmp] = useState(true);\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 && tmp ? onClick : undefined}\n ref={titleWrapperRef}\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\n {...titleInputProps}\n value={title}\n onFocus={(event) => {\n setTmp(false);\n\n if (titleInputProps?.onFocus) {\n titleInputProps.onFocus(event);\n }\n }}\n onBlur={(event) => {\n setTmp(true);\n\n if (titleInputProps?.onBlur) {\n titleInputProps.onBlur(event);\n }\n }}\n onChange={onTitleInputChange}\n />\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 >\n {rightElement}\n </StyledMotionRightElementWrapper>\n )}\n </AnimatePresence>\n </StyledRightWrapper>\n )}\n </StyledMotionAccordionHead>\n );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","tmp","setTmp","animate","initial","key","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onFocus","onBlur","onChange","scale","exit","$isOpen","$color","$hasSearch","transition","duration","layout","placeholder","size","Small","displayName"],"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 } 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 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 const [tmp, setTmp] = useState(true);\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 && tmp ? 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\n {...titleInputProps}\n value={title}\n onFocus={(event) => {\n setTmp(false);\n\n if (titleInputProps?.onFocus) {\n titleInputProps.onFocus(event);\n }\n }}\n onBlur={(event) => {\n setTmp(true);\n\n if (titleInputProps?.onBlur) {\n titleInputProps.onBlur(event);\n }\n }}\n onChange={onTitleInputChange}\n />\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 >\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":[]}
|
|
@@ -60,6 +60,15 @@ export const StyledMotionContentWrapper = styled(motion.div)`
|
|
|
60
60
|
height: 100%;
|
|
61
61
|
overflow: hidden;
|
|
62
62
|
margin-right: 10px;
|
|
63
|
+
|
|
64
|
+
${_ref6 => {
|
|
65
|
+
let {
|
|
66
|
+
$isWrapped
|
|
67
|
+
} = _ref6;
|
|
68
|
+
return $isWrapped && css`
|
|
69
|
+
align-items: center;
|
|
70
|
+
`;
|
|
71
|
+
}}
|
|
63
72
|
`;
|
|
64
73
|
export const StyledMotionTitleWrapper = styled(motion.div)`
|
|
65
74
|
display: grid;
|
|
@@ -67,54 +76,54 @@ export const StyledMotionTitleWrapper = styled(motion.div)`
|
|
|
67
76
|
grid-template-areas: 'header';
|
|
68
77
|
`;
|
|
69
78
|
export const StyledMotionTitle = styled(motion.div)`
|
|
70
|
-
font-size: ${
|
|
79
|
+
font-size: ${_ref7 => {
|
|
71
80
|
let {
|
|
72
81
|
$isOpen,
|
|
73
82
|
$isWrapped
|
|
74
|
-
} =
|
|
83
|
+
} = _ref7;
|
|
75
84
|
return $isOpen && !$isWrapped ? '1.3rem' : undefined;
|
|
76
85
|
}};
|
|
77
|
-
font-weight: ${
|
|
86
|
+
font-weight: ${_ref8 => {
|
|
78
87
|
let {
|
|
79
88
|
$isOpen,
|
|
80
89
|
$isWrapped
|
|
81
|
-
} =
|
|
90
|
+
} = _ref8;
|
|
82
91
|
return $isOpen && $isWrapped ? 700 : 'normal';
|
|
83
92
|
}};
|
|
84
93
|
grid-area: header;
|
|
85
|
-
height: ${
|
|
94
|
+
height: ${_ref9 => {
|
|
86
95
|
let {
|
|
87
96
|
$isWrapped,
|
|
88
97
|
$hasSearch
|
|
89
|
-
} =
|
|
98
|
+
} = _ref9;
|
|
90
99
|
return $isWrapped || $hasSearch ? '100%' : undefined;
|
|
91
100
|
}};
|
|
92
101
|
overflow: hidden;
|
|
93
102
|
text-overflow: ellipsis;
|
|
94
103
|
transform-origin: top left;
|
|
95
104
|
user-select: none;
|
|
96
|
-
color: ${
|
|
105
|
+
color: ${_ref10 => {
|
|
97
106
|
let {
|
|
98
107
|
$color,
|
|
99
108
|
theme
|
|
100
|
-
} =
|
|
109
|
+
} = _ref10;
|
|
101
110
|
return $color ?? theme.text;
|
|
102
111
|
}};
|
|
103
|
-
white-space: ${
|
|
112
|
+
white-space: ${_ref11 => {
|
|
104
113
|
let {
|
|
105
114
|
$isOpen,
|
|
106
115
|
$isWrapped,
|
|
107
116
|
$hasSearch
|
|
108
|
-
} =
|
|
117
|
+
} = _ref11;
|
|
109
118
|
return $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap';
|
|
110
119
|
}};
|
|
111
120
|
|
|
112
121
|
will-change: unset !important;
|
|
113
122
|
|
|
114
|
-
${
|
|
123
|
+
${_ref12 => {
|
|
115
124
|
let {
|
|
116
125
|
$isWrapped
|
|
117
|
-
} =
|
|
126
|
+
} = _ref12;
|
|
118
127
|
return $isWrapped && css`
|
|
119
128
|
align-content: center;
|
|
120
129
|
`;
|
|
@@ -147,25 +156,25 @@ export const StyledMotionRightInput = styled(motion.input)`
|
|
|
147
156
|
background-color: transparent;
|
|
148
157
|
border: 1px solid transparent;
|
|
149
158
|
border-bottom-color: rgba(
|
|
150
|
-
${
|
|
159
|
+
${_ref13 => {
|
|
151
160
|
let {
|
|
152
161
|
theme
|
|
153
|
-
} =
|
|
162
|
+
} = _ref13;
|
|
154
163
|
return theme['headline-rgb'];
|
|
155
164
|
}},
|
|
156
165
|
0.45
|
|
157
166
|
);
|
|
158
|
-
color: ${
|
|
167
|
+
color: ${_ref14 => {
|
|
159
168
|
let {
|
|
160
169
|
theme
|
|
161
|
-
} =
|
|
170
|
+
} = _ref14;
|
|
162
171
|
return theme.text;
|
|
163
172
|
}};
|
|
164
173
|
grid-area: header;
|
|
165
|
-
padding: ${
|
|
174
|
+
padding: ${_ref15 => {
|
|
166
175
|
let {
|
|
167
176
|
$hasIcon
|
|
168
|
-
} =
|
|
177
|
+
} = _ref15;
|
|
169
178
|
return $hasIcon ? '5px 23px 5px 1px' : '5px 1px';
|
|
170
179
|
}};
|
|
171
180
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","
|
|
1
|
+
{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","i","_ref3","headline","_ref4","$icon","StyledMotionContentWrapper","_ref5","_ref6","$isWrapped","StyledMotionTitleWrapper","StyledMotionTitle","_ref7","$isOpen","undefined","_ref8","_ref9","$hasSearch","_ref10","$color","_ref11","_ref12","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref13","_ref14","_ref15","$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 margin-left: 8px;\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 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":"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","ignoreList":[]}
|
|
@@ -536,6 +536,9 @@ type StyledAccordionIconProps = WithTheme<{
|
|
|
536
536
|
$icon: string;
|
|
537
537
|
}>;
|
|
538
538
|
export declare const StyledAccordionIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledAccordionIconProps>> & string;
|
|
539
|
+
type StyledMotionContentWrapperProps = WithTheme<{
|
|
540
|
+
$isWrapped: boolean;
|
|
541
|
+
}>;
|
|
539
542
|
export declare const StyledMotionContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
|
|
540
543
|
slot?: string | undefined;
|
|
541
544
|
title?: string | undefined;
|
|
@@ -799,9 +802,7 @@ export declare const StyledMotionContentWrapper: import("styled-components/dist/
|
|
|
799
802
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
800
803
|
} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
801
804
|
ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
802
|
-
}, {
|
|
803
|
-
theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
|
|
804
|
-
}>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
805
|
+
}, StyledMotionContentWrapperProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
|
|
805
806
|
export declare const StyledMotionTitleWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
|
|
806
807
|
slot?: string | undefined;
|
|
807
808
|
title?: string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.861",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "251546957d985a229d96625e22bc23f8b0add178"
|
|
91
91
|
}
|