@postenbring/hedwig-react 0.0.61 → 0.0.63
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/_tsup-dts-rollup.d.mts +2 -2
- package/dist/_tsup-dts-rollup.d.ts +2 -2
- package/dist/chunk-5UJ3LEKK.mjs +76 -0
- package/dist/chunk-5UJ3LEKK.mjs.map +1 -0
- package/dist/{chunk-2LKUHKL4.mjs → chunk-Q6REETZD.mjs} +12 -6
- package/dist/chunk-Q6REETZD.mjs.map +1 -0
- package/dist/chunk-ZDPU3N54.mjs +39 -0
- package/dist/chunk-ZDPU3N54.mjs.map +1 -0
- package/dist/index-no-css.js +105 -81
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +3 -3
- package/dist/index.js +105 -81
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/show-more/index.js +36 -25
- package/dist/show-more/index.js.map +1 -1
- package/dist/show-more/index.mjs +2 -2
- package/dist/show-more/show-more.d.mts +1 -1
- package/dist/show-more/show-more.d.ts +1 -1
- package/dist/show-more/show-more.js +25 -20
- package/dist/show-more/show-more.js.map +1 -1
- package/dist/show-more/show-more.mjs +1 -1
- package/dist/step-indicator/index.js +46 -33
- package/dist/step-indicator/index.js.map +1 -1
- package/dist/step-indicator/index.mjs +1 -1
- package/dist/step-indicator/step-indicator.js +46 -33
- package/dist/step-indicator/step-indicator.js.map +1 -1
- package/dist/step-indicator/step-indicator.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 +3 -3
- package/dist/chunk-2LKUHKL4.mjs.map +0 -1
- package/dist/chunk-NIRIPLQ5.mjs +0 -63
- package/dist/chunk-NIRIPLQ5.mjs.map +0 -1
- package/dist/chunk-W47NV442.mjs +0 -34
- package/dist/chunk-W47NV442.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -131,7 +131,7 @@ import "./chunk-V3PAFMK5.mjs";
|
|
|
131
131
|
import "./chunk-MSFHJVHD.mjs";
|
|
132
132
|
import {
|
|
133
133
|
ShowMoreButton
|
|
134
|
-
} from "./chunk-
|
|
134
|
+
} from "./chunk-ZDPU3N54.mjs";
|
|
135
135
|
import "./chunk-JTZPQHKD.mjs";
|
|
136
136
|
import {
|
|
137
137
|
Skeleton
|
|
@@ -139,7 +139,7 @@ import {
|
|
|
139
139
|
import "./chunk-TJH5QJMS.mjs";
|
|
140
140
|
import {
|
|
141
141
|
StepIndicator
|
|
142
|
-
} from "./chunk-
|
|
142
|
+
} from "./chunk-5UJ3LEKK.mjs";
|
|
143
143
|
import "./chunk-JKCVB5TR.mjs";
|
|
144
144
|
import {
|
|
145
145
|
StyledHtml
|
|
@@ -148,7 +148,7 @@ import "./chunk-33JD5XDW.mjs";
|
|
|
148
148
|
import "./chunk-DZNH5JHY.mjs";
|
|
149
149
|
import {
|
|
150
150
|
AutoAnimateHeight
|
|
151
|
-
} from "./chunk-
|
|
151
|
+
} from "./chunk-Q6REETZD.mjs";
|
|
152
152
|
import "./chunk-R4SQKVDQ.mjs";
|
|
153
153
|
|
|
154
154
|
// src/index.tsx
|
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 }), {}));
|
|
@@ -134,27 +140,32 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
|
|
|
134
140
|
|
|
135
141
|
// src/show-more/show-more.tsx
|
|
136
142
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
143
|
+
var import_react2 = require("react");
|
|
137
144
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
}
|
|
145
|
+
var ShowMoreButton = (0, import_react2.forwardRef)(
|
|
146
|
+
(_a, ref) => {
|
|
147
|
+
var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
|
|
148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
149
|
+
"button",
|
|
150
|
+
__spreadProps(__spreadValues({
|
|
151
|
+
ref,
|
|
152
|
+
className: (0, import_typed_classname.clsx)(
|
|
153
|
+
"hds-show-more",
|
|
154
|
+
variant === "show-more-show-less" && "hds-show-more--show-less",
|
|
155
|
+
className
|
|
156
|
+
),
|
|
157
|
+
"data-state": expanded ? "expanded" : void 0,
|
|
158
|
+
type: "button"
|
|
159
|
+
}, rest), {
|
|
160
|
+
children: [
|
|
161
|
+
text,
|
|
162
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-show-more__icon") })
|
|
163
|
+
]
|
|
164
|
+
})
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
ShowMoreButton.displayName = "ShowMoreButton";
|
|
158
169
|
// Annotate the CommonJS export names for ESM import in node:
|
|
159
170
|
0 && (module.exports = {
|
|
160
171
|
AutoAnimateHeight,
|
|
@@ -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\";\nimport { forwardRef } from \"react\";\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 const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n ({ text, variant, expanded, className, ...rest }, ref) => {\n return (\n <button\n ref={ref}\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);\nShowMoreButton.displayName = \"ShowMoreButton\";\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;AACrB,IAAAA,gBAA2B;AAgDrB,IAAAC,sBAAA;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA/C9B,IA+CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,6CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":["import_react","import_jsx_runtime"]}
|
package/dist/show-more/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "../chunk-MSFHJVHD.mjs";
|
|
2
2
|
import {
|
|
3
3
|
ShowMoreButton
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-ZDPU3N54.mjs";
|
|
5
5
|
import {
|
|
6
6
|
AutoAnimateHeight
|
|
7
|
-
} from "../chunk-
|
|
7
|
+
} from "../chunk-Q6REETZD.mjs";
|
|
8
8
|
import "../chunk-R4SQKVDQ.mjs";
|
|
9
9
|
export {
|
|
10
10
|
AutoAnimateHeight,
|
|
@@ -53,27 +53,32 @@ __export(show_more_exports, {
|
|
|
53
53
|
});
|
|
54
54
|
module.exports = __toCommonJS(show_more_exports);
|
|
55
55
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
56
|
+
var import_react = require("react");
|
|
56
57
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
58
|
+
var ShowMoreButton = (0, import_react.forwardRef)(
|
|
59
|
+
(_a, ref) => {
|
|
60
|
+
var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
|
|
61
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
62
|
+
"button",
|
|
63
|
+
__spreadProps(__spreadValues({
|
|
64
|
+
ref,
|
|
65
|
+
className: (0, import_typed_classname.clsx)(
|
|
66
|
+
"hds-show-more",
|
|
67
|
+
variant === "show-more-show-less" && "hds-show-more--show-less",
|
|
68
|
+
className
|
|
69
|
+
),
|
|
70
|
+
"data-state": expanded ? "expanded" : void 0,
|
|
71
|
+
type: "button"
|
|
72
|
+
}, rest), {
|
|
73
|
+
children: [
|
|
74
|
+
text,
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-show-more__icon") })
|
|
76
|
+
]
|
|
77
|
+
})
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
ShowMoreButton.displayName = "ShowMoreButton";
|
|
77
82
|
// Annotate the CommonJS export names for ESM import in node:
|
|
78
83
|
0 && (module.exports = {
|
|
79
84
|
ShowMoreButton
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/show-more/show-more.tsx"],"sourcesContent":["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
|
|
1
|
+
{"version":3,"sources":["../../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\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 const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n ({ text, variant, expanded, className, ...rest }, ref) => {\n return (\n <button\n ref={ref}\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);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,mBAA2B;AAgDrB;AAHC,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA/C9B,IA+CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,4CAAC,UAAK,eAAW,6BAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}
|
|
@@ -55,41 +55,54 @@ module.exports = __toCommonJS(step_indicator_exports);
|
|
|
55
55
|
|
|
56
56
|
// src/step-indicator/step-indicator.tsx
|
|
57
57
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
58
|
+
var import_react = require("react");
|
|
58
59
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
79
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
|
|
80
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
81
|
-
] }),
|
|
82
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
60
|
+
var StepIndicator = (0, import_react.forwardRef)(
|
|
61
|
+
(_a, ref) => {
|
|
62
|
+
var _b = _a, {
|
|
63
|
+
activeStep,
|
|
64
|
+
totalSteps,
|
|
65
|
+
className,
|
|
66
|
+
label,
|
|
67
|
+
lang = "en",
|
|
68
|
+
title,
|
|
69
|
+
titleAs: TitleComponent
|
|
70
|
+
} = _b, rest = __objRest(_b, [
|
|
71
|
+
"activeStep",
|
|
72
|
+
"totalSteps",
|
|
73
|
+
"className",
|
|
74
|
+
"label",
|
|
75
|
+
"lang",
|
|
76
|
+
"title",
|
|
77
|
+
"titleAs"
|
|
78
|
+
]);
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
83
80
|
"div",
|
|
84
|
-
{
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
81
|
+
__spreadProps(__spreadValues({
|
|
82
|
+
ref,
|
|
83
|
+
className: (0, import_typed_classname.clsx)("hds-step-indicator", className),
|
|
84
|
+
lang
|
|
85
|
+
}, rest), {
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__header"), children: [
|
|
88
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
90
|
+
] }),
|
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
className: (0, import_typed_classname.clsx)("hds-step-indicator__step"),
|
|
95
|
+
"data-state": getStepState(i + 1, activeStep)
|
|
96
|
+
},
|
|
97
|
+
i
|
|
98
|
+
)) }),
|
|
99
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleComponent, { className: (0, import_typed_classname.clsx)("hds-step-indicator__title"), children: title }) : null
|
|
100
|
+
]
|
|
101
|
+
})
|
|
102
|
+
);
|
|
103
|
+
}
|
|
104
|
+
);
|
|
105
|
+
StepIndicator.displayName = "StepIndicator";
|
|
93
106
|
var stepLabelTranslations = {
|
|
94
107
|
no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
|
|
95
108
|
en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/step-indicator/index.ts","../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["export { StepIndicator } from \"./step-indicator\";\nexport type * from \"./step-indicator\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\ntype TitleProps =\n | {\n /**\n * Optional title of the active step to be shown underneath the step indicator\n *\n * Use `titleAs` to set the correct heading level\n */\n title: React.ReactNode;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n }\n | {\n title?: undefined;\n titleAs?: undefined;\n };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n * 1-indexed number of the active step\n */\n activeStep: number;\n\n /**\n * 1-indexed number of steps\n */\n totalSteps: number;\n\n /**\n * Label on the left side above the steps\n */\n label: React.ReactNode;\n\n /**\n * Language for the \"step x of y\" label, default is \"en\"\n */\n lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport
|
|
1
|
+
{"version":3,"sources":["../../src/step-indicator/index.ts","../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["export { StepIndicator } from \"./step-indicator\";\nexport type * from \"./step-indicator\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype TitleProps =\n | {\n /**\n * Optional title of the active step to be shown underneath the step indicator\n *\n * Use `titleAs` to set the correct heading level\n */\n title: React.ReactNode;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n }\n | {\n title?: undefined;\n titleAs?: undefined;\n };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n * 1-indexed number of the active step\n */\n activeStep: number;\n\n /**\n * 1-indexed number of steps\n */\n totalSteps: number;\n\n /**\n * Label on the left side above the steps\n */\n label: React.ReactNode;\n\n /**\n * Language for the \"step x of y\" label, default is \"en\"\n */\n lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(\n (\n {\n activeStep,\n totalSteps,\n className,\n label,\n lang = \"en\",\n title,\n titleAs: TitleComponent,\n ...rest\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\"hds-step-indicator\", className as undefined)}\n lang={lang}\n {...rest}\n >\n <div className={clsx(\"hds-step-indicator__header\")}>\n <span className={clsx(\"hds-step-indicator__left-label\")}>{label}</span>\n <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>\n </div>\n\n <div className={clsx(\"hds-step-indicator__steps\")}>\n {Array.from({ length: totalSteps }, (_, i) => (\n <div\n className={clsx(\"hds-step-indicator__step\")}\n data-state={getStepState(i + 1, activeStep)}\n key={i}\n />\n ))}\n </div>\n\n {title ? (\n <TitleComponent className={clsx(\"hds-step-indicator__title\")}>{title}</TitleComponent>\n ) : null}\n </div>\n );\n },\n);\nStepIndicator.displayName = \"StepIndicator\";\n\n/**\n * Translated texts for the `step x of y` label.\n */\nconst stepLabelTranslations: Record<\n \"no\" | \"en\" | \"da\" | \"sv\",\n (activeStep: number, totalSteps: number) => string\n> = {\n no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,\n da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,\n sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n};\n\n/**\n * Determine the state of a step.\n * 1-indexed\n */\nfunction getStepState(renderedStep: number, activeStep: number) {\n if (renderedStep < activeStep) {\n return \"previous\";\n }\n if (renderedStep === activeStep) {\n return \"active\";\n }\n return \"next\";\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AACrB,mBAA2B;AAiEnB;AArBD,IAAM,oBAAgB;AAAA,EAC3B,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,IAtDf,IA+CI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,uDAAC,SAAI,eAAW,6BAAK,4BAA4B,GAC/C;AAAA,wDAAC,UAAK,eAAW,6BAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,4CAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,4CAAC,SAAI,eAAW,6BAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,6BAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,4CAAC,kBAAe,eAAW,6BAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAK5B,IAAM,wBAGF;AAAA,EACF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AACrF;AAMA,SAAS,aAAa,cAAsB,YAAoB;AAC9D,MAAI,eAAe,YAAY;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}
|
|
@@ -53,41 +53,54 @@ __export(step_indicator_exports, {
|
|
|
53
53
|
});
|
|
54
54
|
module.exports = __toCommonJS(step_indicator_exports);
|
|
55
55
|
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
56
|
+
var import_react = require("react");
|
|
56
57
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
77
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
|
|
78
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
79
|
-
] }),
|
|
80
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
58
|
+
var StepIndicator = (0, import_react.forwardRef)(
|
|
59
|
+
(_a, ref) => {
|
|
60
|
+
var _b = _a, {
|
|
61
|
+
activeStep,
|
|
62
|
+
totalSteps,
|
|
63
|
+
className,
|
|
64
|
+
label,
|
|
65
|
+
lang = "en",
|
|
66
|
+
title,
|
|
67
|
+
titleAs: TitleComponent
|
|
68
|
+
} = _b, rest = __objRest(_b, [
|
|
69
|
+
"activeStep",
|
|
70
|
+
"totalSteps",
|
|
71
|
+
"className",
|
|
72
|
+
"label",
|
|
73
|
+
"lang",
|
|
74
|
+
"title",
|
|
75
|
+
"titleAs"
|
|
76
|
+
]);
|
|
77
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
81
78
|
"div",
|
|
82
|
-
{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
79
|
+
__spreadProps(__spreadValues({
|
|
80
|
+
ref,
|
|
81
|
+
className: (0, import_typed_classname.clsx)("hds-step-indicator", className),
|
|
82
|
+
lang
|
|
83
|
+
}, rest), {
|
|
84
|
+
children: [
|
|
85
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__header"), children: [
|
|
86
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_typed_classname.clsx)("hds-step-indicator__left-label"), children: label }),
|
|
87
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
88
|
+
] }),
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_typed_classname.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
className: (0, import_typed_classname.clsx)("hds-step-indicator__step"),
|
|
93
|
+
"data-state": getStepState(i + 1, activeStep)
|
|
94
|
+
},
|
|
95
|
+
i
|
|
96
|
+
)) }),
|
|
97
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleComponent, { className: (0, import_typed_classname.clsx)("hds-step-indicator__title"), children: title }) : null
|
|
98
|
+
]
|
|
99
|
+
})
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
StepIndicator.displayName = "StepIndicator";
|
|
91
104
|
var stepLabelTranslations = {
|
|
92
105
|
no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
|
|
93
106
|
en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\ntype TitleProps =\n | {\n /**\n * Optional title of the active step to be shown underneath the step indicator\n *\n * Use `titleAs` to set the correct heading level\n */\n title: React.ReactNode;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n }\n | {\n title?: undefined;\n titleAs?: undefined;\n };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n * 1-indexed number of the active step\n */\n activeStep: number;\n\n /**\n * 1-indexed number of steps\n */\n totalSteps: number;\n\n /**\n * Label on the left side above the steps\n */\n label: React.ReactNode;\n\n /**\n * Language for the \"step x of y\" label, default is \"en\"\n */\n lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport
|
|
1
|
+
{"version":3,"sources":["../../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype TitleProps =\n | {\n /**\n * Optional title of the active step to be shown underneath the step indicator\n *\n * Use `titleAs` to set the correct heading level\n */\n title: React.ReactNode;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n }\n | {\n title?: undefined;\n titleAs?: undefined;\n };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n * 1-indexed number of the active step\n */\n activeStep: number;\n\n /**\n * 1-indexed number of steps\n */\n totalSteps: number;\n\n /**\n * Label on the left side above the steps\n */\n label: React.ReactNode;\n\n /**\n * Language for the \"step x of y\" label, default is \"en\"\n */\n lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(\n (\n {\n activeStep,\n totalSteps,\n className,\n label,\n lang = \"en\",\n title,\n titleAs: TitleComponent,\n ...rest\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\"hds-step-indicator\", className as undefined)}\n lang={lang}\n {...rest}\n >\n <div className={clsx(\"hds-step-indicator__header\")}>\n <span className={clsx(\"hds-step-indicator__left-label\")}>{label}</span>\n <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>\n </div>\n\n <div className={clsx(\"hds-step-indicator__steps\")}>\n {Array.from({ length: totalSteps }, (_, i) => (\n <div\n className={clsx(\"hds-step-indicator__step\")}\n data-state={getStepState(i + 1, activeStep)}\n key={i}\n />\n ))}\n </div>\n\n {title ? (\n <TitleComponent className={clsx(\"hds-step-indicator__title\")}>{title}</TitleComponent>\n ) : null}\n </div>\n );\n },\n);\nStepIndicator.displayName = \"StepIndicator\";\n\n/**\n * Translated texts for the `step x of y` label.\n */\nconst stepLabelTranslations: Record<\n \"no\" | \"en\" | \"da\" | \"sv\",\n (activeStep: number, totalSteps: number) => string\n> = {\n no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,\n da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,\n sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n};\n\n/**\n * Determine the state of a step.\n * 1-indexed\n */\nfunction getStepState(renderedStep: number, activeStep: number) {\n if (renderedStep < activeStep) {\n return \"previous\";\n }\n if (renderedStep === activeStep) {\n return \"active\";\n }\n return \"next\";\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,mBAA2B;AAiEnB;AArBD,IAAM,oBAAgB;AAAA,EAC3B,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,IAtDf,IA+CI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,uDAAC,SAAI,eAAW,6BAAK,4BAA4B,GAC/C;AAAA,wDAAC,UAAK,eAAW,6BAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,4CAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,4CAAC,SAAI,eAAW,6BAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW,6BAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,4CAAC,kBAAe,eAAW,6BAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAK5B,IAAM,wBAGF;AAAA,EACF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AACrF;AAMA,SAAS,aAAa,cAAsB,YAAoB;AAC9D,MAAI,eAAe,YAAY;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}
|
|
@@ -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 }), {}));
|