@postenbring/hedwig-react 0.0.61 → 0.0.62
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/dist/{chunk-2LKUHKL4.mjs → chunk-Q6REETZD.mjs} +12 -6
- package/dist/chunk-Q6REETZD.mjs.map +1 -0
- package/dist/index-no-css.js +11 -5
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +1 -1
- package/dist/index.js +11 -5
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/show-more/index.js +11 -5
- package/dist/show-more/index.js.map +1 -1
- package/dist/show-more/index.mjs +1 -1
- package/dist/utilities/auto-animate-height.js +11 -5
- package/dist/utilities/auto-animate-height.js.map +1 -1
- package/dist/utilities/auto-animate-height.mjs +1 -1
- package/dist/utilities/index.js +11 -5
- package/dist/utilities/index.js.map +1 -1
- package/dist/utilities/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-2LKUHKL4.mjs.map +0 -1
package/dist/index.mjs
CHANGED
package/dist/show-more/index.js
CHANGED
|
@@ -78,6 +78,7 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
|
|
|
78
78
|
"animationDuration",
|
|
79
79
|
"animationEasing"
|
|
80
80
|
]);
|
|
81
|
+
const timeoutRef = (0, import_react.useRef)(null);
|
|
81
82
|
const measurementRef = (0, import_react.useRef)(null);
|
|
82
83
|
const [height, setHeight] = (0, import_react.useState)(void 0);
|
|
83
84
|
const [clonedChildren, setClonedChildren] = (0, import_react.useState)(
|
|
@@ -86,13 +87,18 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
|
|
|
86
87
|
(0, import_react.useEffect)(() => {
|
|
87
88
|
if (measurementRef.current) {
|
|
88
89
|
const { height: newHeight } = measurementRef.current.getBoundingClientRect();
|
|
90
|
+
if (timeoutRef.current) {
|
|
91
|
+
clearTimeout(timeoutRef.current);
|
|
92
|
+
}
|
|
89
93
|
if (newHeight < (height != null ? height : 0)) {
|
|
90
|
-
(0, import_react_dom.flushSync)(() => {
|
|
91
|
-
setHeight(newHeight);
|
|
92
|
-
});
|
|
93
94
|
setTimeout(() => {
|
|
94
|
-
|
|
95
|
-
|
|
95
|
+
(0, import_react_dom.flushSync)(() => {
|
|
96
|
+
setHeight(newHeight);
|
|
97
|
+
});
|
|
98
|
+
timeoutRef.current = setTimeout(() => {
|
|
99
|
+
setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
|
|
100
|
+
}, animationDurationToValue[animationDuration]);
|
|
101
|
+
});
|
|
96
102
|
} else {
|
|
97
103
|
setHeight(newHeight);
|
|
98
104
|
setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/show-more/index.ts","../../src/utilities/auto-animate-height.tsx","../../src/show-more/show-more.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"../utilities/auto-animate-height\";\nexport type * from \"../utilities/auto-animate-height\";\n\nexport { ShowMoreButton } from \"./show-more\";\nexport type * from \"./show-more\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n flushSync(() => {\n
|
|
1
|
+
{"version":3,"sources":["../../src/show-more/index.ts","../../src/utilities/auto-animate-height.tsx","../../src/show-more/show-more.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"../utilities/auto-animate-height\";\nexport type * from \"../utilities/auto-animate-height\";\n\nexport { ShowMoreButton } from \"./show-more\";\nexport type * from \"./show-more\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n setTimeout(() => {\n flushSync(() => {\n setHeight(newHeight);\n });\n timeoutRef.current = setTimeout(() => {\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }, animationDurationToValue[animationDuration]);\n });\n } else {\n setHeight(newHeight);\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, [children]);\n\n return (\n <Component\n ref={ref}\n style={{\n overflow: \"hidden\",\n height,\n transitionProperty: \"height\",\n transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n ...style,\n }}\n {...rest}\n >\n <div\n aria-hidden\n ref={measurementRef}\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n }}\n >\n {children}\n </div>\n {clonedChildren}\n </Component>\n );\n },\n );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\ntype Variant =\n | {\n variant?: \"show-more\";\n expanded?: never;\n }\n | {\n variant: \"show-more-show-less\";\n expanded: boolean;\n };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * **Example**\n *\n * ```tsx\n * function Content() {\n * const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n * function onShowMoreItems() {\n * fetchMoreItems();\n * }\n * return (\n * <>\n * <ul>\n * {items.map((item) => (\n * <li key={item.id}>{item.text}</li>\n * ))}\n * </ul>\n * {moreItemsAvailable ?\n * <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n * null\n * }\n * </>\n * )\n * }\n * ```\n */\nexport function ShowMoreButton({ text, variant, expanded, className, ...rest }: ShowMoreProps) {\n return (\n <button\n className={clsx(\n \"hds-show-more\",\n variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n className as undefined,\n )}\n data-state={expanded ? \"expanded\" : undefined}\n type=\"button\"\n {...rest}\n >\n {text}\n <span className={clsx(\"hds-show-more__icon\")} />\n </button>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsE;AACtE,uBAA0B;AAoDL;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,wBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAa,qBAA8B,IAAI;AACrD,UAAM,qBAAiB,qBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,gCAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,4CAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,oCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,gCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;;;AC7GhC,6BAAqB;AA+CjB,IAAAA,sBAAA;AAFG,SAAS,eAAe,IAAgE;AAAhE,eAAE,QAAM,SAAS,UAAU,UA7C1D,IA6C+B,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AACxD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,YAAY,yBAAyB;AAAA,QACrC;AAAA,MACF;AAAA,MACA,cAAY,WAAW,aAAa;AAAA,MACpC,MAAK;AAAA,OACD,OARL;AAAA,MAUE;AAAA;AAAA,QACD,6CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,EAChD;AAEJ;","names":["import_jsx_runtime"]}
|
package/dist/show-more/index.mjs
CHANGED
|
@@ -75,6 +75,7 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
|
|
|
75
75
|
"animationDuration",
|
|
76
76
|
"animationEasing"
|
|
77
77
|
]);
|
|
78
|
+
const timeoutRef = (0, import_react.useRef)(null);
|
|
78
79
|
const measurementRef = (0, import_react.useRef)(null);
|
|
79
80
|
const [height, setHeight] = (0, import_react.useState)(void 0);
|
|
80
81
|
const [clonedChildren, setClonedChildren] = (0, import_react.useState)(
|
|
@@ -83,13 +84,18 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
|
|
|
83
84
|
(0, import_react.useEffect)(() => {
|
|
84
85
|
if (measurementRef.current) {
|
|
85
86
|
const { height: newHeight } = measurementRef.current.getBoundingClientRect();
|
|
87
|
+
if (timeoutRef.current) {
|
|
88
|
+
clearTimeout(timeoutRef.current);
|
|
89
|
+
}
|
|
86
90
|
if (newHeight < (height != null ? height : 0)) {
|
|
87
|
-
(0, import_react_dom.flushSync)(() => {
|
|
88
|
-
setHeight(newHeight);
|
|
89
|
-
});
|
|
90
91
|
setTimeout(() => {
|
|
91
|
-
|
|
92
|
-
|
|
92
|
+
(0, import_react_dom.flushSync)(() => {
|
|
93
|
+
setHeight(newHeight);
|
|
94
|
+
});
|
|
95
|
+
timeoutRef.current = setTimeout(() => {
|
|
96
|
+
setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
|
|
97
|
+
}, animationDurationToValue[animationDuration]);
|
|
98
|
+
});
|
|
93
99
|
} else {
|
|
94
100
|
setHeight(newHeight);
|
|
95
101
|
setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n flushSync(() => {\n
|
|
1
|
+
{"version":3,"sources":["../../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n setTimeout(() => {\n flushSync(() => {\n setHeight(newHeight);\n });\n timeoutRef.current = setTimeout(() => {\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }, animationDurationToValue[animationDuration]);\n });\n } else {\n setHeight(newHeight);\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, [children]);\n\n return (\n <Component\n ref={ref}\n style={{\n overflow: \"hidden\",\n height,\n transitionProperty: \"height\",\n transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n ...style,\n }}\n {...rest}\n >\n <div\n aria-hidden\n ref={measurementRef}\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n }}\n >\n {children}\n </div>\n {clonedChildren}\n </Component>\n );\n },\n );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsE;AACtE,uBAA0B;AAoDL;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,wBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAa,qBAA8B,IAAI;AACrD,UAAM,qBAAiB,qBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,gCAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,4CAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,oCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,gCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;","names":[]}
|
package/dist/utilities/index.js
CHANGED
|
@@ -77,6 +77,7 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
|
|
|
77
77
|
"animationDuration",
|
|
78
78
|
"animationEasing"
|
|
79
79
|
]);
|
|
80
|
+
const timeoutRef = (0, import_react.useRef)(null);
|
|
80
81
|
const measurementRef = (0, import_react.useRef)(null);
|
|
81
82
|
const [height, setHeight] = (0, import_react.useState)(void 0);
|
|
82
83
|
const [clonedChildren, setClonedChildren] = (0, import_react.useState)(
|
|
@@ -85,13 +86,18 @@ var AutoAnimateHeight = (0, import_react.forwardRef)(
|
|
|
85
86
|
(0, import_react.useEffect)(() => {
|
|
86
87
|
if (measurementRef.current) {
|
|
87
88
|
const { height: newHeight } = measurementRef.current.getBoundingClientRect();
|
|
89
|
+
if (timeoutRef.current) {
|
|
90
|
+
clearTimeout(timeoutRef.current);
|
|
91
|
+
}
|
|
88
92
|
if (newHeight < (height != null ? height : 0)) {
|
|
89
|
-
(0, import_react_dom.flushSync)(() => {
|
|
90
|
-
setHeight(newHeight);
|
|
91
|
-
});
|
|
92
93
|
setTimeout(() => {
|
|
93
|
-
|
|
94
|
-
|
|
94
|
+
(0, import_react_dom.flushSync)(() => {
|
|
95
|
+
setHeight(newHeight);
|
|
96
|
+
});
|
|
97
|
+
timeoutRef.current = setTimeout(() => {
|
|
98
|
+
setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
|
|
99
|
+
}, animationDurationToValue[animationDuration]);
|
|
100
|
+
});
|
|
95
101
|
} else {
|
|
96
102
|
setHeight(newHeight);
|
|
97
103
|
setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utilities/index.ts","../../src/utilities/auto-animate-height.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"./auto-animate-height\";\nexport type * from \"./auto-animate-height\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n flushSync(() => {\n
|
|
1
|
+
{"version":3,"sources":["../../src/utilities/index.ts","../../src/utilities/auto-animate-height.tsx"],"sourcesContent":["export { AutoAnimateHeight } from \"./auto-animate-height\";\nexport type * from \"./auto-animate-height\";\n","import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const timeoutRef = useRef<NodeJS.Timeout | null>(null);\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n setTimeout(() => {\n flushSync(() => {\n setHeight(newHeight);\n });\n timeoutRef.current = setTimeout(() => {\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }, animationDurationToValue[animationDuration]);\n });\n } else {\n setHeight(newHeight);\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, [children]);\n\n return (\n <Component\n ref={ref}\n style={{\n overflow: \"hidden\",\n height,\n transitionProperty: \"height\",\n transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n ...style,\n }}\n {...rest}\n >\n <div\n aria-hidden\n ref={measurementRef}\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n }}\n >\n {children}\n </div>\n {clonedChildren}\n </Component>\n );\n },\n );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsE;AACtE,uBAA0B;AAoDL;AAjDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,wBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAa,qBAA8B,IAAI;AACrD,UAAM,qBAAiB,qBAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,QAAI,uBAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,MAA0B,UACpE,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,gCAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,WAAW,SAAS;AACtB,uBAAa,WAAW,OAAO;AAAA,QACjC;AACA,YAAI,aAAa,0BAAU,IAAI;AAG7B,qBAAW,MAAM;AACf,4CAAU,MAAM;AACd,wBAAU,SAAS;AAAA,YACrB,CAAC;AACD,uBAAW,UAAU,WAAW,MAAM;AACpC,oCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,YACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,UAChD,CAAC;AAAA,QACH,OAAO;AACL,oBAAU,SAAS;AACnB,gCAAkB,2BAAa,2EAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;","names":[]}
|
package/dist/utilities/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utilities/auto-animate-height.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { OverridableComponent } from \"../utils\";\n\nconst animationDurationToValue = {\n quick: 100,\n normal: 300,\n slow: 700,\n};\n\nexport interface AutoAnimateHeightProps {\n /**\n * Time of the animation, using the hedwig animation tokens\n * quick: 0.1s\n * normal: 0.3s\n * slow: 0.7s\n *\n * default is \"quick\"\n */\n animationDuration?: \"quick\" | \"normal\" | \"slow\";\n\n /**\n * Which hedwig easing function to use, default is \"normal\"\n */\n animationEasing?: \"in\" | \"out\" | \"normal\";\n children: React.ReactNode;\n style?: React.CSSProperties;\n}\n\n/**\n * Helper component to animate the height of the children when they change\n * It's done by rendering two versions of the passed children,\n * one hidden to measure the height and one visible to only changes after the height is measured.\n *\n * **IMPORTANT** Do not pass any components with effects (like data fetching), as they will trigger twice.\n */\nexport const AutoAnimateHeight: OverridableComponent<AutoAnimateHeightProps, HTMLDivElement> =\n forwardRef(\n (\n {\n as: Component = \"div\",\n children,\n style,\n animationDuration = \"quick\",\n animationEasing = \"normal\",\n ...rest\n },\n ref,\n ) => {\n const measurementRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | undefined>(undefined);\n const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n cloneElement(<>{children}</>, {}),\n );\n useEffect(() => {\n if (measurementRef.current) {\n const { height: newHeight } = measurementRef.current.getBoundingClientRect();\n\n if (newHeight < (height ?? 0)) {\n // If the children are shrinking, hold off on replacing until the animation is done\n // This way we don't get a sudden flash of empty content\n flushSync(() => {\n setHeight(newHeight);\n });\n setTimeout(() => {\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }, animationDurationToValue[animationDuration]);\n } else {\n setHeight(newHeight);\n setClonedChildren(cloneElement(<>{children}</>, {}));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, [children]);\n\n return (\n <Component\n ref={ref}\n style={{\n overflow: \"hidden\",\n height,\n transitionProperty: \"height\",\n transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n ...style,\n }}\n {...rest}\n >\n <div\n aria-hidden\n ref={measurementRef}\n style={{\n position: \"absolute\",\n visibility: \"hidden\",\n }}\n >\n {children}\n </div>\n {clonedChildren}\n </Component>\n );\n },\n );\nAutoAnimateHeight.displayName = \"AutoAnimateHeight\";\n"],"mappings":";;;;;;;AAAA,SAAS,cAAc,YAAY,WAAW,QAAQ,gBAAgB;AACtE,SAAS,iBAAiB;AAmDL,wBAwBb,YAxBa;AAhDrB,IAAM,2BAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR;AA4BO,IAAM,oBACX;AAAA,EACE,CACE,IAQA,QACG;AATH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,IA5C1B,IAuCM,IAMK,iBANL,IAMK;AAAA,MALH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,iBAAiB,OAAuB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI,SAA6B,MAAS;AAClE,UAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,MAA0B,MACpE,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC;AAAA,IAClC;AACA,cAAU,MAAM;AACd,UAAI,eAAe,SAAS;AAC1B,cAAM,EAAE,QAAQ,UAAU,IAAI,eAAe,QAAQ,sBAAsB;AAE3E,YAAI,aAAa,0BAAU,IAAI;AAG7B,oBAAU,MAAM;AACd,sBAAU,SAAS;AAAA,UACrB,CAAC;AACD,qBAAW,MAAM;AACf,8BAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,UACrD,GAAG,yBAAyB,iBAAiB,CAAC;AAAA,QAChD,OAAO;AACL,oBAAU,SAAS;AACnB,4BAAkB,aAAa,gCAAG,UAAS,GAAK,CAAC,CAAC,CAAC;AAAA,QACrD;AAAA,MACF;AAAA,IAEF,GAAG,CAAC,QAAQ,CAAC;AAEb,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,UACL,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAVL;AAAA,QAYC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,KAAK;AAAA,cACL,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,cACd;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACF,kBAAkB,cAAc;","names":[]}
|