npm - @chayns-components/core - Versions diffs - 5.5.51 → 5.5.53 - Mend

@chayns-components/core 5.5.51 → 5.5.53

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

Files changed (31) hide show

package/lib/esm/hooks/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","names":["React","Children","cloneElement","isValidElement","useEffect","useRef","useState","isSameRect","a","b","width","height","x","y","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","target","current","parentElement","firstElementChild","undefined","frameId","updateSize","nextSize","window","cancelAnimationFrame","requestAnimationFrame","currentSize","getBoundingClientRect","observer","ResizeObserver","entry","contentRect","observe","disconnect","cloneWithTabIndex","node","element","type","Fragment","children","map","props","displayName","createElement","tabIndex","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","useMeasuredClone","shouldPreventTextWrapping","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","userSelect","zIndex","visibility","inert","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute","useIsInsideDialog","isInsideDialog","setIsInsideDialog","closest"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nconst isSameRect = (a?: DOMRectReadOnly, b?: DOMRectReadOnly) => {\n if (!a \|\| !b) return false;\n\n return a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;\n};\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target: HTMLElement \| null = ref.current;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement ?? null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement \| null;\n }\n\n if (!target) return undefined;\n\n let frameId: number \| undefined;\n\n const updateSize = (nextSize: DOMRectReadOnly) => {\n if (frameId) {\n window.cancelAnimationFrame(frameId);\n }\n\n frameId = window.requestAnimationFrame(() => {\n setSize((currentSize) =>\n isSameRect(currentSize, nextSize) ? currentSize : nextSize,\n );\n });\n };\n\n updateSize(target.getBoundingClientRect());\n\n const observer = new ResizeObserver(([entry]) => {\n if (!entry \|\| entry.target !== target) return;\n\n updateSize(entry.contentRect);\n });\n\n observer.observe(target);\n\n return () => {\n if (frameId) {\n window.cancelAnimationFrame(frameId);\n }\n\n observer.disconnect();\n };\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst cloneWithTabIndex = (node: ReactNode): ReactNode => {\n if (!isValidElement(node)) return node;\n\n const element = node as ReactElement;\n\n if (element.type === React.Fragment) {\n const children = Children.map(element.props.children, cloneWithTabIndex);\n\n return cloneElement(element, {\n ...element.props,\n children,\n });\n }\n\n const children = element.props.children\n ? Children.map(element.props.children, cloneWithTabIndex)\n : element.props.children;\n\n if ((element.type as any).displayName === 'Button') {\n return (\n // eslint-disable-next-line react/button-has-type\n <button tabIndex={-1}>{children}</button>\n );\n }\n\n return cloneElement(element, {\n ...element.props,\n tabIndex: -1,\n children,\n });\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<never>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n if (typeof content === 'string') {\n return (\n <span tabIndex={-1} data-measured-clone>\n {content}\n </span>\n );\n }\n\n if (isValidElement(content)) {\n return cloneWithTabIndex(\n cloneElement(content, {\n ...preventEvents,\n 'data-measured-clone': true,\n }),\n );\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n shouldPreventTextWrapping?: boolean;\n}\n\nexport const useMeasuredClone = ({\n content,\n shouldPreventTextWrapping = true,\n}: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n\n setSize({ width: width + (shouldPreventTextWrapping ? 10 : 0), height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, [shouldPreventTextWrapping]);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n userSelect: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n inert=\"true\"\n tabIndex={-1}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T \| null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement \| null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n\nexport const useIsInsideDialog = <T extends HTMLElement>(ref: MutableRefObject<T \| null>) => {\n const [isInsideDialog, setIsInsideDialog] = useState(false);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n setIsInsideDialog(ref.current.closest('.dialog-inner') !== null);\n }, [ref]);\n\n return isInsideDialog;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"element.js","names":["React","Children","cloneElement","isValidElement","useEffect","useRef","useState","isSameRect","a","b","width","height","x","y","useElementSize","ref","shouldUseChildElement","shouldUseParentElement","size","setSize","target","current","parentElement","firstElementChild","undefined","frameId","updateSize","nextSize","window","cancelAnimationFrame","requestAnimationFrame","currentSize","getBoundingClientRect","observer","ResizeObserver","entry","contentRect","observe","disconnect","cloneWithTabIndex","node","element","type","Fragment","children","map","props","displayName","createElement","tabIndex","getClonedElement","content","preventEvents","onClick","e","stopPropagation","onMouseDown","onMouseUp","onKeyDown","onKeyUp","onFocus","onBlur","useMeasuredClone","shouldPreventTextWrapping","clonedElement","measure","offsetWidth","offsetHeight","measuredElement","style","position","opacity","pointerEvents","userSelect","zIndex","visibility","inert","useIsMeasuredClone","isClone","setIsClone","el","hasAttribute","useIsInsideDialog","isInsideDialog","setIsInsideDialog","closest"],"sources":["../../../src/hooks/element.tsx"],"sourcesContent":["import React, {\n Children,\n cloneElement,\n HTMLAttributes,\n isValidElement,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\ninterface UseElementSizeOptions {\n shouldUseChildElement?: boolean;\n shouldUseParentElement?: boolean;\n}\n\nconst isSameRect = (a?: DOMRectReadOnly, b?: DOMRectReadOnly) => {\n if (!a \|\| !b) return false;\n\n return a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;\n};\n\nexport const useElementSize = (\n ref: MutableRefObject<HTMLDivElement \| HTMLLabelElement \| null>,\n { shouldUseChildElement = false, shouldUseParentElement = false }: UseElementSizeOptions = {},\n): DOMRectReadOnly \| undefined => {\n const [size, setSize] = useState<DOMRectReadOnly>();\n\n useEffect(() => {\n let target: HTMLElement \| null = ref.current;\n\n if (shouldUseParentElement) {\n target = ref.current?.parentElement ?? null;\n }\n\n if (shouldUseChildElement) {\n target = ref.current?.firstElementChild as HTMLElement \| null;\n }\n\n if (!target) return undefined;\n\n let frameId: number \| undefined;\n\n const updateSize = (nextSize: DOMRectReadOnly) => {\n if (frameId) {\n window.cancelAnimationFrame(frameId);\n }\n\n frameId = window.requestAnimationFrame(() => {\n setSize((currentSize) =>\n isSameRect(currentSize, nextSize) ? currentSize : nextSize,\n );\n });\n };\n\n updateSize(target.getBoundingClientRect());\n\n const observer = new ResizeObserver(([entry]) => {\n if (!entry \|\| entry.target !== target) return;\n\n updateSize(entry.contentRect);\n });\n\n observer.observe(target);\n\n return () => {\n if (frameId) {\n window.cancelAnimationFrame(frameId);\n }\n\n observer.disconnect();\n };\n }, [ref, shouldUseChildElement, shouldUseParentElement]);\n\n return size;\n};\n\nconst cloneWithTabIndex = (node: ReactNode): ReactNode => {\n if (!isValidElement(node)) return node;\n\n const element = node as ReactElement;\n\n if (element.type === React.Fragment) {\n const children = Children.map(element.props.children, cloneWithTabIndex);\n\n return cloneElement(element, {\n ...element.props,\n children,\n });\n }\n\n const children = element.props.children\n ? Children.map(element.props.children, cloneWithTabIndex)\n : element.props.children;\n\n if ((element.type as any).displayName === 'Button') {\n return (\n // eslint-disable-next-line react/button-has-type\n <button tabIndex={-1}>{children}</button>\n );\n }\n\n return cloneElement(element, {\n ...element.props,\n tabIndex: -1,\n children,\n });\n};\n\nconst getClonedElement = (content: ReactNode) => {\n const preventEvents: Partial<HTMLAttributes<never>> = {\n onClick: (e) => e.stopPropagation(),\n onMouseDown: (e) => e.stopPropagation(),\n onMouseUp: (e) => e.stopPropagation(),\n onKeyDown: (e) => e.stopPropagation(),\n onKeyUp: (e) => e.stopPropagation(),\n onFocus: (e) => e.stopPropagation(),\n onBlur: (e) => e.stopPropagation(),\n };\n\n if (typeof content === 'string') {\n return (\n <span tabIndex={-1} data-measured-clone>\n {content}\n </span>\n );\n }\n\n if (isValidElement(content)) {\n return cloneWithTabIndex(\n cloneElement(content, {\n ...preventEvents,\n 'data-measured-clone': true,\n }),\n );\n }\n\n return content;\n};\n\ninterface UseMeasuredCloneOptions {\n content: ReactNode;\n shouldPreventTextWrapping?: boolean;\n}\n\nexport const useMeasuredClone = ({\n content,\n shouldPreventTextWrapping = true,\n}: UseMeasuredCloneOptions) => {\n const ref = useRef<HTMLDivElement>(null);\n\n const [size, setSize] = useState({ width: 0, height: 0 });\n\n const clonedElement = getClonedElement(content);\n\n useEffect(() => {\n const measure = () => {\n if (!ref.current) return;\n\n const { offsetWidth: width, offsetHeight: height } = ref.current;\n\n setSize({ width: width + (shouldPreventTextWrapping ? 10 : 0), height });\n };\n\n measure();\n\n const observer = new ResizeObserver(measure);\n\n if (ref.current) observer.observe(ref.current);\n\n return () => observer.disconnect();\n }, [shouldPreventTextWrapping]);\n\n const measuredElement = (\n <div\n data-measured-clone=\"true\"\n ref={ref}\n style={{\n position: 'fixed',\n opacity: 0,\n pointerEvents: 'none',\n userSelect: 'none',\n zIndex: -1,\n height: 'auto',\n width: 'auto',\n visibility: 'hidden',\n }}\n inert={true}\n tabIndex={-1}\n >\n {clonedElement}\n </div>\n );\n\n return {\n measuredElement,\n width: size.width,\n height: size.height,\n };\n};\n\nexport const useIsMeasuredClone = <T extends HTMLElement>() => {\n const ref = useRef<T \| null>(null);\n\n const [isClone, setIsClone] = useState(false);\n\n useEffect(() => {\n if (!ref.current) return;\n\n let el: HTMLElement \| null = ref.current;\n\n while (el) {\n if (el.hasAttribute('data-measured-clone')) {\n setIsClone(true);\n\n return;\n }\n\n el = el.parentElement;\n }\n\n setIsClone(false);\n }, []);\n\n return [isClone, ref] as const;\n};\n\nexport const useIsInsideDialog = <T extends HTMLElement>(ref: MutableRefObject<T \| null>) => {\n const [isInsideDialog, setIsInsideDialog] = useState(false);\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n setIsInsideDialog(ref.current.closest('.dialog-inner') !== null);\n }, [ref]);\n\n return isInsideDialog;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/list/list-item/ListItem.d.ts CHANGED Viewed

@@ -119,10 +119,27 @@ export type ListItemProps = {
      * Whether the image should be opened on click.
      */
     shouldOpenImageOnClick?: boolean;
+    /**
+     * Whether the framer-motion layout projection (`layout="position"`) should be
+     * enabled. This animates the `ListItem` smoothly into its new position when
+     * sibling items are reordered, expanded or resized.
+     *
+     * This is opt-in and disabled by default, because framer-motions layout
+     * projection is viewport-global: every layout change anywhere in the document
+     * (window resize, height animation, ...) forces a re-measurement of **all**
+     * layout-projection nodes via `getBoundingClientRect`. In lists with many
+     * `ListItem`s this scales linearly and causes noticeable layout thrash. The
+     * enter/exit height/opacity animation is unaffected and stays enabled.
+     */
+    shouldAnimateLayout?: boolean;
     /**
      * Whether the layout animation should be prevented. This is useful when the
      * `ListItem` is used in a list with a lot of items and the layout animation
      * is not desired.
+     *
+     * @deprecated The layout projection is now disabled by default. Use
+     * `shouldAnimateLayout` to opt into it instead. When set to `true`, this
+     * prop keeps forcing the layout projection off.
      */
     shouldPreventLayoutAnimation?: boolean;
     /**

package/lib/types/components/list/list-item/list-item-head/ListItemHead.d.ts CHANGED Viewed

@@ -26,6 +26,7 @@ type ListItemHeadProps = {
     shouldForceHover?: boolean;
     setShouldEnableTooltip: (value: boolean) => void;
     shouldDisableAnimation?: boolean;
+    shouldAnimateLayout?: boolean;
     cornerElement?: ReactNode;
     onTitleWidthChange: (titleWidth: number, titleMaxWidth: number) => void;
     onImageError?: (event: SyntheticEvent<HTMLImageElement, Event>, index: number) => void;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.5.51",
+    "version": "5.5.53",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -93,5 +93,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5a52e13c899d061e982e5c39da6c2bc24de0c862"
+    "gitHead": "c4c4ef585202346a5c6aa850c442843d851c4dd6"
 }