@chayns-components/core 5.0.0-beta.1210 → 5.0.0-beta.1213
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.js +9 -1
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.js +23 -11
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +1 -0
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +10 -2
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/hooks/ref.js +10 -1
- package/lib/cjs/hooks/ref.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.js +9 -1
- package/lib/esm/components/accordion/Accordion.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.js +23 -11
- package/lib/esm/components/accordion/accordion-body/AccordionBody.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +1 -0
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +10 -2
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/hooks/ref.js +9 -1
- package/lib/esm/hooks/ref.js.map +1 -1
- package/lib/types/components/accordion/accordion-body/AccordionBody.d.ts +4 -0
- package/lib/types/components/accordion/accordion-head/AccordionHead.d.ts +1 -0
- package/lib/types/hooks/ref.d.ts +2 -1
- package/package.json +2 -2
|
@@ -13,6 +13,7 @@ var _AccordionGroup = require("./accordion-group/AccordionGroup");
|
|
|
13
13
|
var _AccordionHead = _interopRequireDefault(require("./accordion-head/AccordionHead"));
|
|
14
14
|
var _AccordionContextProvider = require("./accordion-provider/AccordionContextProvider");
|
|
15
15
|
var _Accordion = require("./Accordion.styles");
|
|
16
|
+
var _ref = require("../../hooks/ref");
|
|
16
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
18
|
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); }
|
|
18
19
|
const AccordionContext = exports.AccordionContext = /*#__PURE__*/_react2.default.createContext({
|
|
@@ -67,6 +68,8 @@ const Accordion = ({
|
|
|
67
68
|
const isInitialRenderRef = (0, _react2.useRef)(true);
|
|
68
69
|
const isInGroup = typeof updateOpenAccordionUuid === 'function';
|
|
69
70
|
const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
|
|
71
|
+
const initialRenderSkipRef = (0, _ref.useInitialRenderRef)(true);
|
|
72
|
+
const shouldSkipAnimation = initialRenderSkipRef.current && isDefaultOpen;
|
|
70
73
|
const isOpenRef = (0, _react2.useRef)(isOpen);
|
|
71
74
|
const onCloseRef = (0, _react2.useRef)(onClose);
|
|
72
75
|
const onOpenRef = (0, _react2.useRef)(onOpen);
|
|
@@ -156,7 +159,10 @@ const Accordion = ({
|
|
|
156
159
|
$shouldHideBackground: shouldHideBackground,
|
|
157
160
|
$shouldHideBottomLine: shouldHideBottomLine,
|
|
158
161
|
onMouseEnter: onHoverStart,
|
|
159
|
-
onMouseLeave: onHoverEnd
|
|
162
|
+
onMouseLeave: onHoverEnd,
|
|
163
|
+
transition: {
|
|
164
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
165
|
+
}
|
|
160
166
|
}, /*#__PURE__*/_react2.default.createElement(AccordionContext.Provider, {
|
|
161
167
|
value: accordionContextProviderValue
|
|
162
168
|
}, /*#__PURE__*/_react2.default.createElement(_react.MotionConfig, {
|
|
@@ -167,6 +173,7 @@ const Accordion = ({
|
|
|
167
173
|
uuid: uuid,
|
|
168
174
|
icon: icon,
|
|
169
175
|
isOpen: isOpen,
|
|
176
|
+
shouldSkipAnimation: shouldSkipAnimation,
|
|
170
177
|
isFixed: isFixed,
|
|
171
178
|
isTitleGreyed: isTitleGreyed || isDisabled,
|
|
172
179
|
isWrapped: isWrapped === true,
|
|
@@ -184,6 +191,7 @@ const Accordion = ({
|
|
|
184
191
|
}), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
185
192
|
initial: false
|
|
186
193
|
}, (isOpen || shouldRenderClosed) && /*#__PURE__*/_react2.default.createElement(_AccordionBody.default, {
|
|
194
|
+
shouldSkipAnimation: shouldSkipAnimation,
|
|
187
195
|
maxHeight: bodyMaxHeight,
|
|
188
196
|
onScroll: onBodyScroll,
|
|
189
197
|
onAnimationComplete: onBodyAnimationComplete,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionContext","exports","React","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","useMemo","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","StyledMotionAccordion","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","maxHeight","onScroll","onAnimationComplete","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(\n () => ({ shouldChangeColor: !shouldHideBackground }),\n [shouldHideBackground],\n );\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["_react","require","_react2","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","_ref","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionContext","exports","React","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","useMemo","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","initialRenderSkipRef","useInitialRenderRef","shouldSkipAnimation","current","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","useEffect","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","StyledMotionAccordion","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","transition","duration","Provider","value","MotionConfig","type","onClick","AnimatePresence","maxHeight","onScroll","onAnimationComplete","shouldHideBody","AreaContext","displayName","_default"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\nimport { useInitialRenderRef } from '../../hooks/ref';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const initialRenderSkipRef = useInitialRenderRef(true);\n\n const shouldSkipAnimation = initialRenderSkipRef.current && isDefaultOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(\n () => ({ shouldChangeColor: !shouldHideBackground }),\n [shouldHideBackground],\n );\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n shouldSkipAnimation={shouldSkipAnimation}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n shouldSkipAnimation={shouldSkipAnimation}\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -14,6 +14,7 @@ const AccordionBody = ({
|
|
|
14
14
|
maxHeight,
|
|
15
15
|
onScroll,
|
|
16
16
|
shouldHideBody,
|
|
17
|
+
shouldSkipAnimation,
|
|
17
18
|
onAnimationComplete
|
|
18
19
|
}) => {
|
|
19
20
|
const {
|
|
@@ -23,28 +24,39 @@ const AccordionBody = ({
|
|
|
23
24
|
openAccordionUuid: undefined
|
|
24
25
|
}), []);
|
|
25
26
|
return /*#__PURE__*/_react.default.createElement(_AccordionBody.StyledMotionAccordionBody, {
|
|
27
|
+
initial: shouldSkipAnimation ? {
|
|
28
|
+
height: 'auto',
|
|
29
|
+
opacity: 1
|
|
30
|
+
} : {
|
|
31
|
+
height: 0,
|
|
32
|
+
opacity: 0
|
|
33
|
+
},
|
|
26
34
|
animate: {
|
|
27
|
-
height: shouldHideBody ?
|
|
35
|
+
height: shouldHideBody ? 0 : 'auto',
|
|
28
36
|
opacity: shouldHideBody ? 0 : 1
|
|
29
37
|
},
|
|
30
|
-
className: "beta-chayns-accordion-body",
|
|
31
38
|
exit: {
|
|
32
39
|
height: 0,
|
|
33
40
|
opacity: 0
|
|
34
41
|
},
|
|
35
|
-
|
|
36
|
-
height:
|
|
37
|
-
|
|
42
|
+
transition: {
|
|
43
|
+
height: shouldSkipAnimation ? {
|
|
44
|
+
duration: 0,
|
|
45
|
+
ease: 'linear'
|
|
46
|
+
} : {
|
|
47
|
+
duration: 0.25
|
|
48
|
+
},
|
|
49
|
+
opacity: shouldSkipAnimation ? {
|
|
50
|
+
duration: 0
|
|
51
|
+
} : {
|
|
52
|
+
duration: 0.25
|
|
53
|
+
}
|
|
38
54
|
},
|
|
55
|
+
className: "beta-chayns-accordion-body",
|
|
39
56
|
$maxHeight: maxHeight,
|
|
40
57
|
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
|
|
41
58
|
onAnimationComplete: onAnimationComplete,
|
|
42
|
-
onScroll: onScroll
|
|
43
|
-
transition: {
|
|
44
|
-
opacity: {
|
|
45
|
-
duration: 0.25
|
|
46
|
-
}
|
|
47
|
-
}
|
|
59
|
+
onScroll: onScroll
|
|
48
60
|
}, /*#__PURE__*/_react.default.createElement(_AccordionGroup.AccordionGroupContext.Provider, {
|
|
49
61
|
value: AccordionGroupContextProviderValue
|
|
50
62
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AccordionGroup","_AccordionBody","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionBody","children","maxHeight","onScroll","shouldHideBody","onAnimationComplete","browser","getDevice","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","
|
|
1
|
+
{"version":3,"file":"AccordionBody.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AccordionGroup","_AccordionBody","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionBody","children","maxHeight","onScroll","shouldHideBody","shouldSkipAnimation","onAnimationComplete","browser","getDevice","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","initial","height","opacity","animate","exit","transition","duration","ease","className","$maxHeight","$browser","name","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport { BrowserName } from '../../../types/chayns';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * The elements that should be shown inside the body.\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the body should be shown.\n */\n shouldHideBody: boolean;\n /**\n * Whether the animation should be skipped.\n */\n shouldSkipAnimation?: boolean;\n\n onAnimationComplete?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldHideBody,\n shouldSkipAnimation,\n onAnimationComplete,\n}) => {\n const { browser } = getDevice();\n\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n [],\n );\n\n return (\n <StyledMotionAccordionBody\n initial={\n shouldSkipAnimation ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 }\n }\n animate={{ height: shouldHideBody ? 0 : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n exit={{ height: 0, opacity: 0 }}\n transition={{\n height: shouldSkipAnimation ? { duration: 0, ease: 'linear' } : { duration: 0.25 },\n opacity: shouldSkipAnimation ? { duration: 0 } : { duration: 0.25 },\n }}\n className=\"beta-chayns-accordion-body\"\n $maxHeight={maxHeight}\n $browser={browser?.name as BrowserName}\n onAnimationComplete={onAnimationComplete}\n onScroll={onScroll}\n >\n <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n {children}\n </AccordionGroupContext.Provider>\n </StyledMotionAccordionBody>\n );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,6 +9,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
9
9
|
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); }
|
|
10
10
|
const StyledMotionAccordionBody = exports.StyledMotionAccordionBody = (0, _styledComponents.default)(_react.motion.div)`
|
|
11
11
|
overflow: hidden;
|
|
12
|
+
transition: none !important;
|
|
12
13
|
|
|
13
14
|
${({
|
|
14
15
|
$maxHeight
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.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","StyledMotionAccordionBody","exports","styled","motion","div","$maxHeight","css","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n $maxHeight?: number;\n $browser: BrowserName;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n overflow: hidden;\n\n ${({ $maxHeight }) =>\n typeof $maxHeight === 'number' &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: scroll;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionAccordionBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AASzC,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAiC;AAC3F;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAC,qBAAG;AACX,0BAA0BD,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEE,QAAQ;EAAEC;AAAsC,CAAC,KAClDD,QAAQ,KAAK,SAAS,GAChB,IAAAD,qBAAG;AACjB,0CAA0CE,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAF,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CE,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionBody.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","StyledMotionAccordionBody","exports","styled","motion","div","$maxHeight","css","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n $maxHeight?: number;\n $browser: BrowserName;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n overflow: hidden;\n transition: none !important;\n\n ${({ $maxHeight }) =>\n typeof $maxHeight === 'number' &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: scroll;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionAccordionBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AASzC,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAiC;AAC3F;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAC,qBAAG;AACX,0BAA0BD,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEE,QAAQ;EAAEC;AAAsC,CAAC,KAClDD,QAAQ,KAAK,SAAS,GAChB,IAAAD,qBAAG;AACjB,0CAA0CE,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAF,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CE,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
|
|
@@ -31,6 +31,7 @@ const AccordionHead = ({
|
|
|
31
31
|
shouldRotateIcon,
|
|
32
32
|
title,
|
|
33
33
|
titleElement,
|
|
34
|
+
shouldSkipAnimation,
|
|
34
35
|
uuid,
|
|
35
36
|
titleInputProps,
|
|
36
37
|
onTitleInputChange,
|
|
@@ -112,14 +113,20 @@ const AccordionHead = ({
|
|
|
112
113
|
},
|
|
113
114
|
className: "beta-chayns-accordion-head",
|
|
114
115
|
initial: false,
|
|
115
|
-
key: `accordionHead--${uuid}
|
|
116
|
+
key: `accordionHead--${uuid}`,
|
|
117
|
+
transition: {
|
|
118
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
119
|
+
}
|
|
116
120
|
}, /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionIconWrapper, {
|
|
117
121
|
animate: {
|
|
118
122
|
rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0
|
|
119
123
|
},
|
|
120
124
|
initial: false,
|
|
121
125
|
onClick: !isFixed ? onClick : undefined,
|
|
122
|
-
key: `accordionHeadIcon--${uuid}
|
|
126
|
+
key: `accordionHeadIcon--${uuid}`,
|
|
127
|
+
transition: {
|
|
128
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
129
|
+
}
|
|
123
130
|
}, iconElement), /*#__PURE__*/_react2.default.createElement(_AccordionHead.StyledMotionContentWrapper, {
|
|
124
131
|
animate: {
|
|
125
132
|
opacity: isTitleGreyed ? 0.5 : 1
|
|
@@ -161,6 +168,7 @@ const AccordionHead = ({
|
|
|
161
168
|
$color: titleColor,
|
|
162
169
|
$hasSearch: typeof onSearchChange === 'function',
|
|
163
170
|
transition: {
|
|
171
|
+
duration: shouldSkipAnimation ? 0 : 0.25,
|
|
164
172
|
opacity: {
|
|
165
173
|
duration: 0
|
|
166
174
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","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","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","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","$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 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/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, { 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 : 32,\n open: isWrapped ? 40 : 32,\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 />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : '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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 $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":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["_react","require","_react2","_interopRequireWildcard","_styledComponents","_element","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","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","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","StyledMotionAccordionHead","animate","initial","key","transition","duration","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","$isWrapped","AreaContext","Provider","shouldChangeColor","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$color","$hasSearch","StyledMotionTitleElementWrapper","layout","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 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/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, { 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 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 : 32,\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 />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : '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 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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 duration: shouldSkipAnimation ? 0 : 0.25,\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 $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/hooks/ref.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useCombinedRefs = void 0;
|
|
6
|
+
exports.useInitialRenderRef = exports.useCombinedRefs = void 0;
|
|
7
7
|
var _react = require("react");
|
|
8
8
|
const useCombinedRefs = (...refs) => (0, _react.useCallback)(element => {
|
|
9
9
|
refs.forEach(ref => {
|
|
@@ -16,4 +16,13 @@ const useCombinedRefs = (...refs) => (0, _react.useCallback)(element => {
|
|
|
16
16
|
});
|
|
17
17
|
}, [refs]);
|
|
18
18
|
exports.useCombinedRefs = useCombinedRefs;
|
|
19
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? _react.useLayoutEffect : _react.useEffect;
|
|
20
|
+
const useInitialRenderRef = initialValue => {
|
|
21
|
+
const ref = (0, _react.useRef)(initialValue);
|
|
22
|
+
useIsomorphicLayoutEffect(() => {
|
|
23
|
+
ref.current = false;
|
|
24
|
+
}, []);
|
|
25
|
+
return ref;
|
|
26
|
+
};
|
|
27
|
+
exports.useInitialRenderRef = useInitialRenderRef;
|
|
19
28
|
//# sourceMappingURL=ref.js.map
|
package/lib/cjs/hooks/ref.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ref.js","names":["_react","require","useCombinedRefs","refs","useCallback","element","forEach","ref","current","exports"],"sources":["../../../src/hooks/ref.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ref.js","names":["_react","require","useCombinedRefs","refs","useCallback","element","forEach","ref","current","exports","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useInitialRenderRef","initialValue","useRef"],"sources":["../../../src/hooks/ref.ts"],"sourcesContent":["import {\n MutableRefObject,\n Ref,\n RefCallback,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react';\n\nexport const useCombinedRefs = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n useCallback(\n (element: T) => {\n refs.forEach((ref) => {\n if (!ref) return;\n\n if (typeof ref === 'function') {\n ref(element);\n } else if (typeof ref === 'object' && ref !== null) {\n (ref as MutableRefObject<T | null>).current = element;\n }\n });\n },\n [refs],\n );\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const useInitialRenderRef = (initialValue: boolean) => {\n const ref = useRef<boolean>(initialValue);\n\n useIsomorphicLayoutEffect(() => {\n ref.current = false;\n }, []);\n\n return ref;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAUO,MAAMC,eAAe,GAAGA,CAAI,GAAGC,IAA4B,KAC9D,IAAAC,kBAAW,EACNC,OAAU,IAAK;EACZF,IAAI,CAACG,OAAO,CAAEC,GAAG,IAAK;IAClB,IAAI,CAACA,GAAG,EAAE;IAEV,IAAI,OAAOA,GAAG,KAAK,UAAU,EAAE;MAC3BA,GAAG,CAACF,OAAO,CAAC;IAChB,CAAC,MAAM,IAAI,OAAOE,GAAG,KAAK,QAAQ,IAAIA,GAAG,KAAK,IAAI,EAAE;MAC/CA,GAAG,CAAgCC,OAAO,GAAGH,OAAO;IACzD;EACJ,CAAC,CAAC;AACN,CAAC,EACD,CAACF,IAAI,CACT,CAAC;AAACM,OAAA,CAAAP,eAAA,GAAAA,eAAA;AAEN,MAAMQ,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGC,sBAAe,GAAGC,gBAAS;AAEtF,MAAMC,mBAAmB,GAAIC,YAAqB,IAAK;EAC1D,MAAMR,GAAG,GAAG,IAAAS,aAAM,EAAUD,YAAY,CAAC;EAEzCL,yBAAyB,CAAC,MAAM;IAC5BH,GAAG,CAACC,OAAO,GAAG,KAAK;EACvB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOD,GAAG;AACd,CAAC;AAACE,OAAA,CAAAK,mBAAA,GAAAA,mBAAA","ignoreList":[]}
|
|
@@ -7,6 +7,7 @@ import { AccordionGroupContext } from './accordion-group/AccordionGroup';
|
|
|
7
7
|
import AccordionHead from './accordion-head/AccordionHead';
|
|
8
8
|
import { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';
|
|
9
9
|
import { StyledMotionAccordion } from './Accordion.styles';
|
|
10
|
+
import { useInitialRenderRef } from '../../hooks/ref';
|
|
10
11
|
export const AccordionContext = /*#__PURE__*/React.createContext({
|
|
11
12
|
isWrapped: undefined
|
|
12
13
|
});
|
|
@@ -59,6 +60,8 @@ const Accordion = ({
|
|
|
59
60
|
const isInitialRenderRef = useRef(true);
|
|
60
61
|
const isInGroup = typeof updateOpenAccordionUuid === 'function';
|
|
61
62
|
const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
|
|
63
|
+
const initialRenderSkipRef = useInitialRenderRef(true);
|
|
64
|
+
const shouldSkipAnimation = initialRenderSkipRef.current && isDefaultOpen;
|
|
62
65
|
const isOpenRef = useRef(isOpen);
|
|
63
66
|
const onCloseRef = useRef(onClose);
|
|
64
67
|
const onOpenRef = useRef(onOpen);
|
|
@@ -148,7 +151,10 @@ const Accordion = ({
|
|
|
148
151
|
$shouldHideBackground: shouldHideBackground,
|
|
149
152
|
$shouldHideBottomLine: shouldHideBottomLine,
|
|
150
153
|
onMouseEnter: onHoverStart,
|
|
151
|
-
onMouseLeave: onHoverEnd
|
|
154
|
+
onMouseLeave: onHoverEnd,
|
|
155
|
+
transition: {
|
|
156
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
157
|
+
}
|
|
152
158
|
}, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
|
|
153
159
|
value: accordionContextProviderValue
|
|
154
160
|
}, /*#__PURE__*/React.createElement(MotionConfig, {
|
|
@@ -159,6 +165,7 @@ const Accordion = ({
|
|
|
159
165
|
uuid: uuid,
|
|
160
166
|
icon: icon,
|
|
161
167
|
isOpen: isOpen,
|
|
168
|
+
shouldSkipAnimation: shouldSkipAnimation,
|
|
162
169
|
isFixed: isFixed,
|
|
163
170
|
isTitleGreyed: isTitleGreyed || isDisabled,
|
|
164
171
|
isWrapped: isWrapped === true,
|
|
@@ -176,6 +183,7 @@ const Accordion = ({
|
|
|
176
183
|
}), /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
177
184
|
initial: false
|
|
178
185
|
}, (isOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(AccordionBody, {
|
|
186
|
+
shouldSkipAnimation: shouldSkipAnimation,
|
|
179
187
|
maxHeight: bodyMaxHeight,
|
|
180
188
|
onScroll: onBodyScroll,
|
|
181
189
|
onAnimationComplete: onBodyAnimationComplete,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(\n () => ({ shouldChangeColor: !shouldHideBackground }),\n [shouldHideBackground],\n );\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","useInitialRenderRef","AccordionContext","createContext","isWrapped","undefined","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","initialRenderSkipRef","shouldSkipAnimation","current","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","transition","duration","Provider","value","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n ChangeEventHandler,\n FC,\n ReactNode,\n UIEvent,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type CSSProperties,\n type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledMotionAccordion } from './Accordion.styles';\nimport { useInitialRenderRef } from '../../hooks/ref';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n isWrapped: undefined,\n});\n\nexport type AccordionProps = {\n /**\n * Maximum height of the accordion body element. This automatically makes the content of the\n * body element scrollable.\n */\n bodyMaxHeight?: number;\n /**\n * The content of the accordion body\n */\n children: ReactNode;\n /**\n * The icon that is displayed in front of the title\n */\n icon?: string;\n /**\n * This can be used to automatically expand the Accordion during the first render.\n */\n isDefaultOpen?: boolean;\n /**\n * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n */\n isDisabled?: boolean;\n /**\n * This can be used so that the Accordion cannot be opened or closed.\n * In addition, in this case the icon is exchanged to mark the Accordions.\n */\n isFixed?: boolean;\n /**\n * This can be used to open the Accordion from the outside\n */\n isOpened?: boolean;\n /**\n * This will gray out the title of the Accordion to indicate hidden content, for example.\n */\n isTitleGreyed?: boolean;\n /**\n * Function that is executed when the accordion body will be scrolled\n */\n onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Function that is executed when the accordion will be closed.\n */\n onClose?: VoidFunction;\n /**\n * Function to be executed when the accordion is no longer hovered.\n */\n onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function to be executed when the accordion is hovered.\n */\n onHoverStart?: MouseEventHandler<HTMLDivElement>;\n /**\n * Function that is executed when the accordion will be opened.\n */\n onOpen?: VoidFunction;\n /**\n * Function that is executed when the accordion body is animated\n */\n onBodyAnimationComplete?: VoidFunction;\n /**\n * Function that is executed when the text of the search in the accordion\n * head changes. When this function is given, the search field is displayed\n * in the Accordion Head.\n */\n onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the search in the accordion\n * title changes. When this function is given, the search field is displayed\n * as the Accordion title.\n */\n onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Content to be displayed on the right side in the head of the Accordion\n */\n rightElement?: ReactNode;\n /**\n * The placeholder to be used for the search\n */\n searchPlaceholder?: string;\n /**\n * The value that is displayed inside the search\n */\n searchValue?: string;\n /**\n * This will force the background color of the accordion to be used even if it is closed and not hovered.\n */\n shouldForceBackground?: boolean;\n /**\n * This will hide the background color of the accordion\n */\n shouldHideBackground?: boolean;\n /**\n * Whether the bottom line should be hidden.\n */\n shouldHideBottomLine?: boolean;\n /**\n * This will render the Accordion closed on the first render.\n */\n shouldRenderClosed?: boolean;\n /**\n * Whether the icon should be rotating.\n */\n shouldRotateIcon?: boolean;\n /**\n * Title of the Accordion displayed in the head\n */\n title: string;\n /**\n * Additional elements to be displayed in the header next to the title.\n */\n titleElement?: ReactNode;\n /**\n * The props of the title Input.\n */\n titleInputProps?: InputProps;\n /**\n * The title color.\n */\n titleColor?: CSSProperties['color'];\n};\n\nconst Accordion: FC<AccordionProps> = ({\n bodyMaxHeight,\n children,\n icon,\n isDefaultOpen = false,\n isDisabled = false,\n isFixed = false,\n isOpened,\n isTitleGreyed = false,\n onBodyScroll,\n onClose,\n onHoverEnd,\n onHoverStart,\n onOpen,\n onSearchChange,\n rightElement,\n searchPlaceholder,\n searchValue,\n shouldForceBackground = false,\n shouldHideBackground = false,\n shouldRenderClosed = false,\n shouldRotateIcon = true,\n shouldHideBottomLine = false,\n title,\n titleElement,\n onTitleInputChange,\n titleInputProps,\n titleColor,\n onBodyAnimationComplete,\n}) => {\n const {\n isWrapped: groupIsWrapped,\n openAccordionUuid,\n accordionGroupUuid,\n accordionUuids,\n updateOpenAccordionUuid,\n } = useContext(AccordionGroupContext);\n const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n const isWrapped = useMemo(\n () => groupIsWrapped ?? contextIsWrapped,\n [contextIsWrapped, groupIsWrapped],\n );\n\n const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n const uuid = useUuid();\n\n const isInitialRenderRef = useRef(true);\n\n const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n const initialRenderSkipRef = useInitialRenderRef(true);\n\n const shouldSkipAnimation = initialRenderSkipRef.current && isDefaultOpen;\n\n const isOpenRef = useRef(isOpen);\n const onCloseRef = useRef(onClose);\n const onOpenRef = useRef(onOpen);\n\n const isLastAccordion = useMemo(\n () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n [accordionUuids, uuid],\n );\n\n useEffect(() => {\n isOpenRef.current = isOpen;\n onCloseRef.current = onClose;\n onOpenRef.current = onOpen;\n }, [isOpen, onClose, onOpen]);\n\n const handleHeadClick = useCallback(() => {\n if (isDisabled) {\n return;\n }\n\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isDisabled && isOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid);\n }\n\n setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n }\n }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (isInitialRenderRef.current) {\n isInitialRenderRef.current = false;\n } else if (isOpen) {\n if (typeof onOpenRef.current === 'function') {\n onOpenRef.current();\n }\n } else if (typeof onCloseRef.current === 'function') {\n onCloseRef.current();\n }\n }, [isOpen]);\n\n useEffect(() => {\n if (isDefaultOpen) {\n if (typeof updateOpenAccordionUuid === 'function') {\n updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n } else {\n setIsAccordionOpen(true);\n }\n }\n }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n useEffect(() => {\n if (typeof isOpened === 'boolean') {\n if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n updateOpenAccordionUuid(uuid);\n } else {\n setIsAccordionOpen(isOpened);\n }\n }\n }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n const accordionContextProviderValue = useMemo(\n () => ({ isWrapped: isWrapped === true }),\n [isWrapped],\n );\n\n const areaContextProviderValue = useMemo(\n () => ({ shouldChangeColor: !shouldHideBackground }),\n [shouldHideBackground],\n );\n\n const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n return (\n <StyledMotionAccordion\n animate={{ height: 'auto', opacity: 1 }}\n data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n className=\"beta-chayns-accordion\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n $isOpen={isOpen}\n $shouldShowLines={!isLastAccordion || !isWrapped}\n $isParentWrapped={isParentWrapped}\n $isWrapped={isWrapped}\n $shouldForceBackground={shouldForceBackground}\n $shouldHideBackground={shouldHideBackground}\n $shouldHideBottomLine={shouldHideBottomLine}\n onMouseEnter={onHoverStart}\n onMouseLeave={onHoverEnd}\n transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n >\n <AccordionContext.Provider value={accordionContextProviderValue}>\n <MotionConfig transition={{ type: 'tween' }}>\n <AccordionHead\n uuid={uuid}\n icon={icon}\n isOpen={isOpen}\n shouldSkipAnimation={shouldSkipAnimation}\n isFixed={isFixed}\n isTitleGreyed={isTitleGreyed || isDisabled}\n isWrapped={isWrapped === true}\n onClick={handleHeadClick}\n onSearchChange={onSearchChange}\n rightElement={rightElement}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n shouldRotateIcon={shouldRotateIcon}\n title={title}\n titleElement={titleElement}\n onTitleInputChange={onTitleInputChange}\n titleInputProps={titleInputProps}\n titleColor={titleColor}\n />\n <AnimatePresence initial={false}>\n {(isOpen || shouldRenderClosed) && (\n <AccordionBody\n shouldSkipAnimation={shouldSkipAnimation}\n maxHeight={bodyMaxHeight}\n onScroll={onBodyScroll}\n onAnimationComplete={onBodyAnimationComplete}\n shouldHideBody={shouldRenderClosed && !isOpen}\n >\n <AccordionWrappedContext.Provider\n value={accordionWrappedContextProviderValue}\n >\n <AreaContext.Provider value={areaContextProviderValue}>\n {children}\n </AreaContext.Provider>\n </AccordionWrappedContext.Provider>\n </AccordionBody>\n )}\n </AnimatePresence>\n </MotionConfig>\n </AccordionContext.Provider>\n </StyledMotionAccordion>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,6 +7,7 @@ const AccordionBody = ({
|
|
|
7
7
|
maxHeight,
|
|
8
8
|
onScroll,
|
|
9
9
|
shouldHideBody,
|
|
10
|
+
shouldSkipAnimation,
|
|
10
11
|
onAnimationComplete
|
|
11
12
|
}) => {
|
|
12
13
|
const {
|
|
@@ -16,28 +17,39 @@ const AccordionBody = ({
|
|
|
16
17
|
openAccordionUuid: undefined
|
|
17
18
|
}), []);
|
|
18
19
|
return /*#__PURE__*/React.createElement(StyledMotionAccordionBody, {
|
|
20
|
+
initial: shouldSkipAnimation ? {
|
|
21
|
+
height: 'auto',
|
|
22
|
+
opacity: 1
|
|
23
|
+
} : {
|
|
24
|
+
height: 0,
|
|
25
|
+
opacity: 0
|
|
26
|
+
},
|
|
19
27
|
animate: {
|
|
20
|
-
height: shouldHideBody ?
|
|
28
|
+
height: shouldHideBody ? 0 : 'auto',
|
|
21
29
|
opacity: shouldHideBody ? 0 : 1
|
|
22
30
|
},
|
|
23
|
-
className: "beta-chayns-accordion-body",
|
|
24
31
|
exit: {
|
|
25
32
|
height: 0,
|
|
26
33
|
opacity: 0
|
|
27
34
|
},
|
|
28
|
-
|
|
29
|
-
height:
|
|
30
|
-
|
|
35
|
+
transition: {
|
|
36
|
+
height: shouldSkipAnimation ? {
|
|
37
|
+
duration: 0,
|
|
38
|
+
ease: 'linear'
|
|
39
|
+
} : {
|
|
40
|
+
duration: 0.25
|
|
41
|
+
},
|
|
42
|
+
opacity: shouldSkipAnimation ? {
|
|
43
|
+
duration: 0
|
|
44
|
+
} : {
|
|
45
|
+
duration: 0.25
|
|
46
|
+
}
|
|
31
47
|
},
|
|
48
|
+
className: "beta-chayns-accordion-body",
|
|
32
49
|
$maxHeight: maxHeight,
|
|
33
50
|
$browser: browser?.name,
|
|
34
51
|
onAnimationComplete: onAnimationComplete,
|
|
35
|
-
onScroll: onScroll
|
|
36
|
-
transition: {
|
|
37
|
-
opacity: {
|
|
38
|
-
duration: 0.25
|
|
39
|
-
}
|
|
40
|
-
}
|
|
52
|
+
onScroll: onScroll
|
|
41
53
|
}, /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
|
|
42
54
|
value: AccordionGroupContextProviderValue
|
|
43
55
|
}, children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","children","maxHeight","onScroll","shouldHideBody","onAnimationComplete","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","
|
|
1
|
+
{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","children","maxHeight","onScroll","shouldHideBody","shouldSkipAnimation","onAnimationComplete","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","initial","height","opacity","animate","exit","transition","duration","ease","className","$maxHeight","$browser","name","Provider","value","displayName"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport { BrowserName } from '../../../types/chayns';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n /**\n * The elements that should be shown inside the body.\n */\n children: ReactNode;\n /**\n * Maximum height of the element. This automatically makes the content of the element scrollable.\n */\n maxHeight: AccordionProps['bodyMaxHeight'];\n /**\n * Function that is executed when the element will be scrolled\n */\n onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n /**\n * Whether the body should be shown.\n */\n shouldHideBody: boolean;\n /**\n * Whether the animation should be skipped.\n */\n shouldSkipAnimation?: boolean;\n\n onAnimationComplete?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n children,\n maxHeight,\n onScroll,\n shouldHideBody,\n shouldSkipAnimation,\n onAnimationComplete,\n}) => {\n const { browser } = getDevice();\n\n const AccordionGroupContextProviderValue = useMemo(\n () => ({ openAccordionUuid: undefined }),\n [],\n );\n\n return (\n <StyledMotionAccordionBody\n initial={\n shouldSkipAnimation ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 }\n }\n animate={{ height: shouldHideBody ? 0 : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n exit={{ height: 0, opacity: 0 }}\n transition={{\n height: shouldSkipAnimation ? { duration: 0, ease: 'linear' } : { duration: 0.25 },\n opacity: shouldSkipAnimation ? { duration: 0 } : { duration: 0.25 },\n }}\n className=\"beta-chayns-accordion-body\"\n $maxHeight={maxHeight}\n $browser={browser?.name as BrowserName}\n onAnimationComplete={onAnimationComplete}\n onScroll={onScroll}\n >\n <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n {children}\n </AccordionGroupContext.Provider>\n </StyledMotionAccordionBody>\n );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAA4BC,OAAO,QAAQ,OAAO;AAG9D,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,yBAAyB,QAAQ,wBAAwB;AA2BlE,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC,mBAAmB;EACnBC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAQ,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE/B,MAAMa,kCAAkC,GAAGX,OAAO,CAC9C,OAAO;IAAEY,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACZ,yBAAyB;IACtBa,OAAO,EACHP,mBAAmB,GAAG;MAAEQ,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAC,GAAG;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAClF;IACDC,OAAO,EAAE;MAAEF,MAAM,EAAET,cAAc,GAAG,CAAC,GAAG,MAAM;MAAEU,OAAO,EAAEV,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IAClFY,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,UAAU,EAAE;MACRJ,MAAM,EAAER,mBAAmB,GAAG;QAAEa,QAAQ,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAS,CAAC,GAAG;QAAED,QAAQ,EAAE;MAAK,CAAC;MAClFJ,OAAO,EAAET,mBAAmB,GAAG;QAAEa,QAAQ,EAAE;MAAE,CAAC,GAAG;QAAEA,QAAQ,EAAE;MAAK;IACtE,CAAE;IACFE,SAAS,EAAC,4BAA4B;IACtCC,UAAU,EAAEnB,SAAU;IACtBoB,QAAQ,EAAEf,OAAO,EAAEgB,IAAoB;IACvCjB,mBAAmB,EAAEA,mBAAoB;IACzCH,QAAQ,EAAEA;EAAS,gBAEnBP,KAAA,CAAAe,aAAA,CAACb,qBAAqB,CAAC0B,QAAQ;IAACC,KAAK,EAAEjB;EAAmC,GACrEP,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDD,aAAa,CAAC0B,WAAW,GAAG,eAAe;AAE3C,eAAe1B,aAAa","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","$maxHeight","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n $maxHeight?: number;\n $browser: BrowserName;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n overflow: hidden;\n\n ${({ $maxHeight }) =>\n typeof $maxHeight === 'number' &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: scroll;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionAccordionBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9BH,GAAG;AACX,0BAA0BG,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAAsC,CAAC,KAClDD,QAAQ,KAAK,SAAS,GAChBJ,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","$maxHeight","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n $maxHeight?: number;\n $browser: BrowserName;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n overflow: hidden;\n transition: none !important;\n\n ${({ $maxHeight }) =>\n typeof $maxHeight === 'number' &&\n css`\n max-height: ${$maxHeight}px;\n overflow-y: scroll;\n `}\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledMotionAccordionBodyProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 5px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n }\n `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9BH,GAAG;AACX,0BAA0BG,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAAsC,CAAC,KAClDD,QAAQ,KAAK,SAAS,GAChBJ,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
|
|
@@ -23,6 +23,7 @@ const AccordionHead = ({
|
|
|
23
23
|
shouldRotateIcon,
|
|
24
24
|
title,
|
|
25
25
|
titleElement,
|
|
26
|
+
shouldSkipAnimation,
|
|
26
27
|
uuid,
|
|
27
28
|
titleInputProps,
|
|
28
29
|
onTitleInputChange,
|
|
@@ -103,14 +104,20 @@ const AccordionHead = ({
|
|
|
103
104
|
},
|
|
104
105
|
className: "beta-chayns-accordion-head",
|
|
105
106
|
initial: false,
|
|
106
|
-
key: `accordionHead--${uuid}
|
|
107
|
+
key: `accordionHead--${uuid}`,
|
|
108
|
+
transition: {
|
|
109
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
110
|
+
}
|
|
107
111
|
}, /*#__PURE__*/React.createElement(StyledMotionIconWrapper, {
|
|
108
112
|
animate: {
|
|
109
113
|
rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0
|
|
110
114
|
},
|
|
111
115
|
initial: false,
|
|
112
116
|
onClick: !isFixed ? onClick : undefined,
|
|
113
|
-
key: `accordionHeadIcon--${uuid}
|
|
117
|
+
key: `accordionHeadIcon--${uuid}`,
|
|
118
|
+
transition: {
|
|
119
|
+
duration: shouldSkipAnimation ? 0 : 0.25
|
|
120
|
+
}
|
|
114
121
|
}, iconElement), /*#__PURE__*/React.createElement(StyledMotionContentWrapper, {
|
|
115
122
|
animate: {
|
|
116
123
|
opacity: isTitleGreyed ? 0.5 : 1
|
|
@@ -152,6 +159,7 @@ const AccordionHead = ({
|
|
|
152
159
|
$color: titleColor,
|
|
153
160
|
$hasSearch: typeof onSearchChange === 'function',
|
|
154
161
|
transition: {
|
|
162
|
+
duration: shouldSkipAnimation ? 0 : 0.25,
|
|
155
163
|
opacity: {
|
|
156
164
|
duration: 0
|
|
157
165
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","animate","initial","key","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","scale","exit","$isOpen","$color","$hasSearch","transition","duration","layout","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n 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/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, { 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 : 32,\n open: isWrapped ? 40 : 32,\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 />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : '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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 $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":[]}
|
|
1
|
+
{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledAccordionIcon","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","className","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","scale","exit","$isOpen","$color","$hasSearch","layout","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n ChangeEvent,\n ChangeEventHandler,\n 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/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, { 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 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 : 32,\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 />\n );\n }\n\n let internalIcon = 'f105';\n\n if (\n theme?.accordionIcon &&\n (theme.accordionIcon as unknown as number) !== 110 &&\n (theme.accordionIcon as unknown as number) !== 1110100\n ) {\n internalIcon = (theme.accordionIcon as unknown as number).toString(16);\n }\n\n const internalIconStyle = theme?.iconStyle ? theme.iconStyle : '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 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 {/* eslint-disable-next-line react/jsx-props-no-spreading */}\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 duration: shouldSkipAnimation ? 0 : 0.25,\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 $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":";AAAA,SAASA,eAAe,EAAEC,WAAW,QAAQ,cAAc;AAC3D,OAAOC,KAAK,IAMRC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAEL,OAAO;AACd,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,wBAAwB;AACvD,SAASC,sBAAsB,EAAEC,oBAAoB,QAAQ,0BAA0B;AACvF,SAASC,WAAW,QAAQ,yCAAyC;AAErE,OAAOC,IAAI,MAAM,iBAAiB;AAClC,OAAOC,KAAK,IAAIC,SAAS,QAAyB,mBAAmB;AACrE,OAAOC,WAAW,MAAM,gCAAgC;AACxD,SACIC,mBAAmB,EACnBC,yBAAyB,EACzBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,+BAA+B,EAC/BC,yBAAyB,EACzBC,iBAAiB,EACjBC,+BAA+B,EAC/BC,wBAAwB,EACxBC,kBAAkB,QACf,wBAAwB;AA4B/B,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,IAAI;EACJC,MAAM;EACNC,OAAO;EACPC,aAAa;EACbC,SAAS;EACTC,OAAO;EACPC,cAAc;EACdC,YAAY;EACZC,iBAAiB;EACjBC,WAAW;EACXC,gBAAgB;EAChBC,KAAK;EACLC,YAAY;EACZC,mBAAmB;EACnBC,IAAI;EACJC,eAAe;EACfC,kBAAkB;EAClBC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGxC,QAAQ,CAAa;IACrDyC,MAAM,EAAEhB,SAAS,GAAG,EAAE,GAAG,EAAE;IAC3BiB,IAAI,EAAEjB,SAAS,GAAG,EAAE,GAAG;EAC3B,CAAC,CAAC;EAEF,MAAM,CAACkB,cAAc,EAAEC,iBAAiB,CAAC,GAAG5C,QAAQ,CAAC,KAAK,CAAC;EAE3D,MAAM6C,KAAK,GAAG5C,QAAQ,CAAC,CAAU;EAEjC,MAAM6C,sBAAsB,GAAG/C,MAAM,CAAiB,IAAI,CAAC;EAC3D,MAAMgD,eAAe,GAAGhD,MAAM,CAAiB,IAAI,CAAC;EAEpD,MAAM,CAACiD,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGjD,QAAQ,CAAS,CAAC;EAExEH,SAAS,CAAC,MAAM;IACZoD,sBAAsB,CAACnB,WAAW,CAAC;EACvC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjBjC,SAAS,CAAC,MAAM;IACZ,IAAI,OAAO8B,cAAc,KAAK,UAAU,IAAI,CAACL,MAAM,EAAE;MACjDsB,iBAAiB,CAAC,KAAK,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACtB,MAAM,EAAEK,cAAc,CAAC,CAAC;EAE5B,MAAMuB,oBAAoB,GAAIC,KAAoC,IAAK;IACnEF,sBAAsB,CAACE,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;IAC1C,IAAI,OAAO1B,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACwB,KAAK,CAAC;IACzB;EACJ,CAAC;EAED,MAAMG,wBAAwB,GAAGpD,cAAc,CAAC4C,sBAAsB,EAAE;IACpES,qBAAqB,EAAE;EAC3B,CAAC,CAAC;EAEF,MAAMC,8BAA8B,GAAG1D,OAAO,CAC1C,MAAMM,oBAAoB,CAACwB,YAAY,CAAC,EACxC,CAACA,YAAY,CACjB,CAAC;EAED/B,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOwC,kBAAkB,KAAK,UAAU,EAAE;MAC1CG,aAAa,CAAC;QAAEC,MAAM,EAAE,EAAE;QAAEC,IAAI,EAAE;MAAG,CAAC,CAAC;IAC3C,CAAC,MAAM;MACH;MACAe,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBlB,aAAa,CACTrC,sBAAsB,CAAC;UACnBsB,SAAS;UACTO,KAAK;UACL2B,KAAK,EAAEZ,eAAe,CAACa,OAAO,EAAEC,WAAW,IAAI,CAAC;UAChDC,SAAS,EAAE,OAAOnC,cAAc,KAAK;QACzC,CAAC,CACL,CAAC;MACL,CAAC,EAAE,CAAC,CAAC;IACT;IACA;IACA;EACJ,CAAC,EAAE,CAACF,SAAS,EAAEE,cAAc,EAAEU,kBAAkB,EAAEQ,KAAK,CAACkB,QAAQ,EAAE/B,KAAK,CAAC,CAAC;EAE1E,MAAMgC,WAAW,GAAGlE,OAAO,CAAC,MAAM;IAC9B,IAAIuB,IAAI,IAAIE,OAAO,EAAE;MACjB,oBACI3B,KAAA,CAAAqE,aAAA,CAAC3D,IAAI;QACD4D,KAAK,EAAE,CAAC3C,OAAO,GAAG,uBAAuB,GAAIF,IAAI,IAAI,qBAAsB;MAAE,CAChF,CAAC;IAEV;IAEA,IAAI8C,YAAY,GAAG,MAAM;IAEzB,IACItB,KAAK,EAAEuB,aAAa,IACnBvB,KAAK,CAACuB,aAAa,KAA2B,GAAG,IACjDvB,KAAK,CAACuB,aAAa,KAA2B,OAAO,EACxD;MACED,YAAY,GAAItB,KAAK,CAACuB,aAAa,CAAuBC,QAAQ,CAAC,EAAE,CAAC;IAC1E;IAEA,MAAMC,iBAAiB,GAAGzB,KAAK,EAAE0B,SAAS,GAAG1B,KAAK,CAAC0B,SAAS,GAAG,YAAY;IAE3E,oBAAO3E,KAAA,CAAAqE,aAAA,CAACvD,mBAAmB;MAAC8D,SAAS,EAAEF,iBAAkB;MAACG,KAAK,EAAEN;IAAa,CAAE,CAAC;EACrF,CAAC,EAAE,CAAC9C,IAAI,EAAEwB,KAAK,EAAEtB,OAAO,CAAC,CAAC;EAE1B,IAAImD,mBAAmB,GAAGpD,MAAM,GAAGiB,UAAU,CAACG,IAAI,GAAGH,UAAU,CAACE,MAAM;EAEtE,IAAIa,wBAAwB,IAAIA,wBAAwB,CAACqB,MAAM,GAAGD,mBAAmB,EAAE;IACnF;IACA;IACAA,mBAAmB,GAAGpB,wBAAwB,CAACqB,MAAM,GAAG,CAAC;EAC7D;EAEA,oBACI/E,KAAA,CAAAqE,aAAA,CAACtD,yBAAyB;IACtBiE,OAAO,EAAE;MAAED,MAAM,EAAED;IAAoB,CAAE;IACzCF,SAAS,EAAC,4BAA4B;IACtCK,OAAO,EAAE,KAAM;IACfC,GAAG,EAAE,kBAAkB3C,IAAI,EAAG;IAC9B4C,UAAU,EAAE;MAAEC,QAAQ,EAAE9C,mBAAmB,GAAG,CAAC,GAAG;IAAK;EAAE,gBAEzDtC,KAAA,CAAAqE,aAAA,CAACpD,uBAAuB;IACpB+D,OAAO,EAAE;MAAEK,MAAM,EAAE,CAAC3D,MAAM,IAAIC,OAAO,KAAKQ,gBAAgB,GAAG,EAAE,GAAG;IAAE,CAAE;IACtE8C,OAAO,EAAE,KAAM;IACfnD,OAAO,EAAE,CAACH,OAAO,GAAGG,OAAO,GAAGwD,SAAU;IACxCJ,GAAG,EAAE,sBAAsB3C,IAAI,EAAG;IAClC4C,UAAU,EAAE;MAAEC,QAAQ,EAAE9C,mBAAmB,GAAG,CAAC,GAAG;IAAK;EAAE,GAExD8B,WACoB,CAAC,eAC1BpE,KAAA,CAAAqE,aAAA,CAACrD,0BAA0B;IACvBgE,OAAO,EAAE;MAAEO,OAAO,EAAE3D,aAAa,GAAG,GAAG,GAAG;IAAE,CAAE;IAC9CqD,OAAO,EAAE,KAAM;IACfnD,OAAO,EAAE,CAACH,OAAO,GAAGG,OAAO,GAAGwD,SAAU;IACxCE,GAAG,EAAErC,eAAgB;IACrBsC,UAAU,EAAE5D,SAAU;IACtBqD,GAAG,EAAE,gCAAgC3C,IAAI;EAAG,GAE3C,OAAOE,kBAAkB,KAAK,UAAU;EAAA;EACrC;EACAzC,KAAA,CAAAqE,aAAA,CAAC5D,WAAW,CAACiF,QAAQ;IAACjC,KAAK,EAAE;MAAEkC,iBAAiB,EAAE;IAAK;EAAE,gBAErD3F,KAAA,CAAAqE,aAAA,CAAC1D,KAAK,EAAAiF,QAAA,KAAKpD,eAAe;IAAEiB,KAAK,EAAErB,KAAM;IAACyD,QAAQ,EAAEpD;EAAmB,EAAE,CACvD,CAAC,gBAEvBzC,KAAA,CAAAqE,aAAA,CAACtE,WAAW;IAACmF,GAAG,EAAE,6BAA6B3C,IAAI;EAAG,gBAClDvC,KAAA,CAAAqE,aAAA,CAAC/C,wBAAwB;IAAC4D,GAAG,EAAE,qCAAqC3C,IAAI;EAAG,gBACvEvC,KAAA,CAAAqE,aAAA,CAACvE,eAAe;IACZmF,OAAO,EAAE,KAAM;IACfC,GAAG,EAAE,8BAA8B3C,IAAI;EAAG,gBAE1CvC,KAAA,CAAAqE,aAAA,CAACjD,iBAAiB;IACd4D,OAAO,EAAE;MAAEc,KAAK,EAAE;IAAE,CAAE;IACtBb,OAAO,EAAE;MAAEa,KAAK,EAAEpE,MAAM,IAAI,CAACG,SAAS,GAAG,CAAC,GAAG,GAAG,GAAG;IAAI,CAAE;IACzDkE,IAAI,EAAE;MAAER,OAAO,EAAE;IAAE,CAAE;IACrBS,OAAO,EAAEtE,MAAO;IAChB+D,UAAU,EAAE5D,SAAU;IACtBoE,MAAM,EAAEvD,UAAW;IACnBwD,UAAU,EAAE,OAAOnE,cAAc,KAAK,UAAW;IACjDoD,UAAU,EAAE;MACRC,QAAQ,EAAE9C,mBAAmB,GAAG,CAAC,GAAG,IAAI;MACxCiD,OAAO,EAAE;QACLH,QAAQ,EAAE;MACd;IACJ,CAAE;IACFF,GAAG,EACCxD,MAAM,IAAI,CAACG,SAAS,GACd,0BAA0BU,IAAI,EAAE,GAChC,uBAAuBA,IAAI;EACpC,GAEAH,KACc,CACN,CACK,CAAC,EAC1BC,YAAY,iBACTrC,KAAA,CAAAqE,aAAA,CAAChD,+BAA+B;IAC5B8E,MAAM;IACNjB,GAAG,EAAE,0BAA0B3C,IAAI,EAAG;IACtCiD,GAAG,EAAEtC;EAAuB,GAE3Bb,YAC4B,CAE5B,CAEO,CAAC,EAC5B,CAAC,OAAON,cAAc,KAAK,UAAU,IAAIC,YAAY,kBAClDhC,KAAA,CAAAqE,aAAA,CAAC9C,kBAAkB;IAAC6E,eAAe,EAAErD;EAAe,gBAChD/C,KAAA,CAAAqE,aAAA,CAACvE,eAAe;IAACmF,OAAO,EAAE,KAAM;IAACC,GAAG,EAAE,0BAA0B3C,IAAI;EAAG,GAClE,OAAOR,cAAc,KAAK,UAAU,IAAIL,MAAM,iBAC3C1B,KAAA,CAAAqE,aAAA,CAAClD,yBAAyB;IACtB6D,OAAO,EAAE;MAAEO,OAAO,EAAE;IAAE,CAAE;IACxBQ,IAAI,EAAE;MAAER,OAAO,EAAE;IAAE,CAAE;IACrBN,OAAO,EAAE;MAAEM,OAAO,EAAE;IAAE,CAAE;IACxBL,GAAG,EAAE,kBAAkB3C,IAAI;EAAG,gBAE9BvC,KAAA,CAAAqE,aAAA,CAACxD,WAAW;IACRgF,QAAQ,EAAEvC,oBAAqB;IAC/B+C,cAAc,EAAGC,QAAQ,IAAKtD,iBAAiB,CAACsD,QAAQ,CAAE;IAC1DC,WAAW,EAAEtE,iBAAkB;IAC/BuE,IAAI,EAAE5F,SAAS,CAAC6F,KAAM;IACtBhD,KAAK,EAAEL;EAAoB,CAC9B,CACsB,CAC9B,EACApB,YAAY,iBACThC,KAAA,CAAAqE,aAAA,CAACnD,+BAA+B;IAC5B8D,OAAO,EAAE;MAAEO,OAAO,EAAE;IAAE,CAAE;IACxBQ,IAAI,EAAE;MAAER,OAAO,EAAE;IAAE,CAAE;IACrBN,OAAO,EAAE;MAAEM,OAAO,EAAE;IAAE,CAAE;IACxBL,GAAG,EAAE,wBAAwB3C,IAAI,EAAG;IACpCT,OAAO,EACH,CAACH,OAAO,IAAI,CAACiC,8BAA8B,GACrC9B,OAAO,GACPwD;EACT,GAEAtD,YAC4B,CAExB,CACD,CAED,CAAC;AAEpC,CAAC;AAEDR,aAAa,CAACkF,WAAW,GAAG,eAAe;AAE3C,eAAelF,aAAa","ignoreList":[]}
|
package/lib/esm/hooks/ref.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
1
|
+
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
|
2
2
|
export const useCombinedRefs = (...refs) => useCallback(element => {
|
|
3
3
|
refs.forEach(ref => {
|
|
4
4
|
if (!ref) return;
|
|
@@ -9,4 +9,12 @@ export const useCombinedRefs = (...refs) => useCallback(element => {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
}, [refs]);
|
|
12
|
+
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
13
|
+
export const useInitialRenderRef = initialValue => {
|
|
14
|
+
const ref = useRef(initialValue);
|
|
15
|
+
useIsomorphicLayoutEffect(() => {
|
|
16
|
+
ref.current = false;
|
|
17
|
+
}, []);
|
|
18
|
+
return ref;
|
|
19
|
+
};
|
|
12
20
|
//# sourceMappingURL=ref.js.map
|
package/lib/esm/hooks/ref.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ref.js","names":["useCallback","useCombinedRefs","refs","element","forEach","ref","current"],"sources":["../../../src/hooks/ref.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ref.js","names":["useCallback","useEffect","useLayoutEffect","useRef","useCombinedRefs","refs","element","forEach","ref","current","useIsomorphicLayoutEffect","window","useInitialRenderRef","initialValue"],"sources":["../../../src/hooks/ref.ts"],"sourcesContent":["import {\n MutableRefObject,\n Ref,\n RefCallback,\n useCallback,\n useEffect,\n useLayoutEffect,\n useRef,\n} from 'react';\n\nexport const useCombinedRefs = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> =>\n useCallback(\n (element: T) => {\n refs.forEach((ref) => {\n if (!ref) return;\n\n if (typeof ref === 'function') {\n ref(element);\n } else if (typeof ref === 'object' && ref !== null) {\n (ref as MutableRefObject<T | null>).current = element;\n }\n });\n },\n [refs],\n );\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const useInitialRenderRef = (initialValue: boolean) => {\n const ref = useRef<boolean>(initialValue);\n\n useIsomorphicLayoutEffect(() => {\n ref.current = false;\n }, []);\n\n return ref;\n};\n"],"mappings":"AAAA,SAIIA,WAAW,EACXC,SAAS,EACTC,eAAe,EACfC,MAAM,QACH,OAAO;AAEd,OAAO,MAAMC,eAAe,GAAGA,CAAI,GAAGC,IAA4B,KAC9DL,WAAW,CACNM,OAAU,IAAK;EACZD,IAAI,CAACE,OAAO,CAAEC,GAAG,IAAK;IAClB,IAAI,CAACA,GAAG,EAAE;IAEV,IAAI,OAAOA,GAAG,KAAK,UAAU,EAAE;MAC3BA,GAAG,CAACF,OAAO,CAAC;IAChB,CAAC,MAAM,IAAI,OAAOE,GAAG,KAAK,QAAQ,IAAIA,GAAG,KAAK,IAAI,EAAE;MAC/CA,GAAG,CAAgCC,OAAO,GAAGH,OAAO;IACzD;EACJ,CAAC,CAAC;AACN,CAAC,EACD,CAACD,IAAI,CACT,CAAC;AAEL,MAAMK,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGT,eAAe,GAAGD,SAAS;AAE7F,OAAO,MAAMW,mBAAmB,GAAIC,YAAqB,IAAK;EAC1D,MAAML,GAAG,GAAGL,MAAM,CAAUU,YAAY,CAAC;EAEzCH,yBAAyB,CAAC,MAAM;IAC5BF,GAAG,CAACC,OAAO,GAAG,KAAK;EACvB,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOD,GAAG;AACd,CAAC","ignoreList":[]}
|
|
@@ -17,6 +17,10 @@ export type AccordionBodyProps = {
|
|
|
17
17
|
* Whether the body should be shown.
|
|
18
18
|
*/
|
|
19
19
|
shouldHideBody: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Whether the animation should be skipped.
|
|
22
|
+
*/
|
|
23
|
+
shouldSkipAnimation?: boolean;
|
|
20
24
|
onAnimationComplete?: VoidFunction;
|
|
21
25
|
};
|
|
22
26
|
declare const AccordionBody: FC<AccordionBodyProps>;
|
|
@@ -18,6 +18,7 @@ export type AccordionHeadProps = {
|
|
|
18
18
|
onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;
|
|
19
19
|
titleInputProps?: InputProps;
|
|
20
20
|
titleColor?: CSSProperties['color'];
|
|
21
|
+
shouldSkipAnimation?: boolean;
|
|
21
22
|
};
|
|
22
23
|
declare const AccordionHead: FC<AccordionHeadProps>;
|
|
23
24
|
export default AccordionHead;
|
package/lib/types/hooks/ref.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import { Ref, RefCallback } from 'react';
|
|
1
|
+
import { MutableRefObject, Ref, RefCallback } from 'react';
|
|
2
2
|
export declare const useCombinedRefs: <T>(...refs: (Ref<T> | undefined)[]) => RefCallback<T>;
|
|
3
|
+
export declare const useInitialRenderRef: (initialValue: boolean) => MutableRefObject<boolean>;
|
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.1213",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "015ddeff93e059bf701c2cf6a027a91bad3ae926"
|
|
89
89
|
}
|