@postenbring/hedwig-react 0.0.70 → 0.0.72

package/dist/table/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table/index.ts
+var table_exports = {};
+__export(table_exports, {
+  Table: () => Table
+});
+module.exports = __toCommonJS(table_exports);
+
+// src/table/table.tsx
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Table = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
+    const descriptionId = (0, import_react.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "table",
+        __spreadProps(__spreadValues({
+          "aria-describedby": description ? descriptionId : void 0,
+          ref,
+          className: (0, import_typed_classname.clsx)(
+            "hds-table",
+            {
+              "hds-table--compressed": size === "compressed",
+              "hds-table--mobile-compressed": size === "mobile-compressed"
+            },
+            className
+          )
+        }, rest), {
+          children: [
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { children: caption }) : null,
+            children
+          ]
+        })
+      ),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_typed_classname.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+    ] });
+  }
+);
+Table.displayName = "Table";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table
+});
+//# sourceMappingURL=index.js.map

package/dist/table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/index.ts","../../src/table/table.tsx"],"sourcesContent":["export { Table } from \"./table\";\nexport type * from \"./table\";\n","import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, useId } from \"react\";\n\ninterface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  className?: string;\n\n  /**\n   * Size of the table\n   *\n   * Use `compressed` for a more compact table, or `mobile-compressed` for a compact table on mobile screens only.\n   */\n  size?: \"default\" | \"compressed\" | \"mobile-compressed\";\n\n  /**\n   * The table caption\n   *\n   * You can also set this by passing `<caption>` as a first child of the table\n   */\n  caption?: React.ReactNode;\n\n  /**\n   * Optional description of the table displayed underneath the table\n   *\n   * Ensures the `aria-describedby` attribute is set on the table, making it accessible for screen readers.\n   */\n  description?: React.ReactNode;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  ({ children, className, size, caption, description, ...rest }, ref) => {\n    const descriptionId = useId();\n    return (\n      <>\n        <table\n          aria-describedby={description ? descriptionId : undefined}\n          ref={ref}\n          className={clsx(\n            \"hds-table\",\n            {\n              \"hds-table--compressed\": size === \"compressed\",\n              \"hds-table--mobile-compressed\": size === \"mobile-compressed\",\n            },\n            className as undefined,\n          )}\n          {...rest}\n        >\n          {caption ? <caption>{caption}</caption> : null}\n          {children}\n        </table>\n        {description ? (\n          <p className={clsx(\"hds-table-description\")} id={descriptionId}>\n            {description}\n          </p>\n        ) : null}\n      </>\n    );\n  },\n);\nTable.displayName = \"Table\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,6BAAqB;AACrB,mBAAkC;AA+B5B;AAJC,IAAM,YAAQ;AAAA,EACnB,CAAC,IAA8D,QAAQ;AAAtE,iBAAE,YAAU,WAAW,MAAM,SAAS,YA7BzC,IA6BG,IAAsD,iBAAtD,IAAsD,CAApD,YAAU,aAAW,QAAM,WAAS;AACrC,UAAM,oBAAgB,oBAAM;AAC5B,WACE,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,oBAAkB,cAAc,gBAAgB;AAAA,UAChD;AAAA,UACA,eAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,yBAAyB,SAAS;AAAA,cAClC,gCAAgC,SAAS;AAAA,YAC3C;AAAA,YACA;AAAA,UACF;AAAA,WACI,OAXL;AAAA,UAaE;AAAA,sBAAU,4CAAC,aAAS,mBAAQ,IAAa;AAAA,YACzC;AAAA;AAAA;AAAA,MACH;AAAA,MACC,cACC,4CAAC,OAAE,eAAW,6BAAK,uBAAuB,GAAG,IAAI,eAC9C,uBACH,IACE;AAAA,OACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}

package/dist/table/index.mjs

@@ -0,0 +1,9 @@
+import "../chunk-3LYJRAOC.mjs";
+import {
+  Table
+} from "../chunk-EMI7NAO2.mjs";
+import "../chunk-R4SQKVDQ.mjs";
+export {
+  Table
+};
+//# sourceMappingURL=index.mjs.map

package/dist/table/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/table/table.d.mts

@@ -0,0 +1 @@
+export { Table_alias_3 as Table } from '../_tsup-dts-rollup';

package/dist/table/table.d.ts

@@ -0,0 +1 @@
+export { Table_alias_3 as Table } from '../_tsup-dts-rollup';

package/dist/table/table.js

@@ -0,0 +1,92 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/table/table.tsx
+var table_exports = {};
+__export(table_exports, {
+  Table: () => Table
+});
+module.exports = __toCommonJS(table_exports);
+var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Table = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children, className, size, caption, description } = _b, rest = __objRest(_b, ["children", "className", "size", "caption", "description"]);
+    const descriptionId = (0, import_react.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "table",
+        __spreadProps(__spreadValues({
+          "aria-describedby": description ? descriptionId : void 0,
+          ref,
+          className: (0, import_typed_classname.clsx)(
+            "hds-table",
+            {
+              "hds-table--compressed": size === "compressed",
+              "hds-table--mobile-compressed": size === "mobile-compressed"
+            },
+            className
+          )
+        }, rest), {
+          children: [
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { children: caption }) : null,
+            children
+          ]
+        })
+      ),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_typed_classname.clsx)("hds-table-description"), id: descriptionId, children: description }) : null
+    ] });
+  }
+);
+Table.displayName = "Table";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Table
+});
+//# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/table.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef, useId } from \"react\";\n\ninterface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  className?: string;\n\n  /**\n   * Size of the table\n   *\n   * Use `compressed` for a more compact table, or `mobile-compressed` for a compact table on mobile screens only.\n   */\n  size?: \"default\" | \"compressed\" | \"mobile-compressed\";\n\n  /**\n   * The table caption\n   *\n   * You can also set this by passing `<caption>` as a first child of the table\n   */\n  caption?: React.ReactNode;\n\n  /**\n   * Optional description of the table displayed underneath the table\n   *\n   * Ensures the `aria-describedby` attribute is set on the table, making it accessible for screen readers.\n   */\n  description?: React.ReactNode;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  ({ children, className, size, caption, description, ...rest }, ref) => {\n    const descriptionId = useId();\n    return (\n      <>\n        <table\n          aria-describedby={description ? descriptionId : undefined}\n          ref={ref}\n          className={clsx(\n            \"hds-table\",\n            {\n              \"hds-table--compressed\": size === \"compressed\",\n              \"hds-table--mobile-compressed\": size === \"mobile-compressed\",\n            },\n            className as undefined,\n          )}\n          {...rest}\n        >\n          {caption ? <caption>{caption}</caption> : null}\n          {children}\n        </table>\n        {description ? (\n          <p className={clsx(\"hds-table-description\")} id={descriptionId}>\n            {description}\n          </p>\n        ) : null}\n      </>\n    );\n  },\n);\nTable.displayName = \"Table\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAqB;AACrB,mBAAkC;AA+B5B;AAJC,IAAM,YAAQ;AAAA,EACnB,CAAC,IAA8D,QAAQ;AAAtE,iBAAE,YAAU,WAAW,MAAM,SAAS,YA7BzC,IA6BG,IAAsD,iBAAtD,IAAsD,CAApD,YAAU,aAAW,QAAM,WAAS;AACrC,UAAM,oBAAgB,oBAAM;AAC5B,WACE,4EACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,oBAAkB,cAAc,gBAAgB;AAAA,UAChD;AAAA,UACA,eAAW;AAAA,YACT;AAAA,YACA;AAAA,cACE,yBAAyB,SAAS;AAAA,cAClC,gCAAgC,SAAS;AAAA,YAC3C;AAAA,YACA;AAAA,UACF;AAAA,WACI,OAXL;AAAA,UAaE;AAAA,sBAAU,4CAAC,aAAS,mBAAQ,IAAa;AAAA,YACzC;AAAA;AAAA;AAAA,MACH;AAAA,MACC,cACC,4CAAC,OAAE,eAAW,6BAAK,uBAAuB,GAAG,IAAI,eAC9C,uBACH,IACE;AAAA,OACN;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;","names":[]}

package/dist/table/table.mjs

@@ -0,0 +1,8 @@
+import {
+  Table
+} from "../chunk-EMI7NAO2.mjs";
+import "../chunk-R4SQKVDQ.mjs";
+export {
+  Table
+};
+//# sourceMappingURL=table.mjs.map

package/dist/table/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tabs/index.mjs

@@ -1,15 +1,15 @@
 import {
   TabsComponent
-} from "../chunk-ZRFDCZ62.mjs";
-import {
-  TabsContent,
-  TabsContents
-} from "../chunk-UWTGHSWT.mjs";
+} from "../chunk-CSFSJGLY.mjs";
 import {
   TabsList,
   TabsTab
 } from "../chunk-B56JZJOS.mjs";
 import "../chunk-XVFQWVHO.mjs";
+import {
+  TabsContent,
+  TabsContents
+} from "../chunk-UWTGHSWT.mjs";
 import "../chunk-KQITCS3U.mjs";
 import "../chunk-ZL56N4UK.mjs";
 import "../chunk-R4SQKVDQ.mjs";

package/dist/utilities/auto-animate-height.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/utilities/auto-animate-height.tsx
@@ -52,67 +62,109 @@ __export(auto_animate_height_exports, {
   AutoAnimateHeight: () => AutoAnimateHeight
 });
 module.exports = __toCommonJS(auto_animate_height_exports);
+var import_react2 = require("react");
+
+// src/utils.ts
+var React = __toESM(require("react"));
 var import_react = require("react");
-var import_react_dom = require("react-dom");
+function useMergeRefs(refs) {
+  return React.useMemo(() => {
+    if (refs.every((ref) => ref === null)) {
+      return null;
+    }
+    return (value) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else if (ref !== null) {
+          ref.current = value;
+        }
+      });
+    };
+  }, refs);
+}
+
+// src/utilities/auto-animate-height.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var animationDurationToValue = {
-  quick: 100,
-  normal: 300,
-  slow: 700
-};
-var AutoAnimateHeight = (0, import_react.forwardRef)(
+var AutoAnimateHeight = (0, import_react2.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as: Component = "div",
       children,
       style,
       animationDuration = "quick",
-      animationEasing = "normal"
+      animationEasing = "normal",
+      onTransitionEnd
     } = _b, rest = __objRest(_b, [
       "as",
       "children",
       "style",
       "animationDuration",
-      "animationEasing"
+      "animationEasing",
+      "onTransitionEnd"
     ]);
-    const timeoutRef = (0, import_react.useRef)(null);
-    const measurementRef = (0, import_react.useRef)(null);
-    const [height, setHeight] = (0, import_react.useState)(void 0);
-    const [clonedChildren, setClonedChildren] = (0, import_react.useState)(
-      () => (0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {})
+    var _a2, _b2;
+    const rootRef = (0, import_react2.useRef)(null);
+    const mergedRef = useMergeRefs([rootRef, ref]);
+    const measurementRef = (0, import_react2.useRef)(null);
+    const [height, setHeight] = (0, import_react2.useState)(
+      void 0
     );
-    (0, import_react.useEffect)(() => {
-      if (measurementRef.current) {
-        const { height: newHeight } = measurementRef.current.getBoundingClientRect();
-        if (timeoutRef.current) {
-          clearTimeout(timeoutRef.current);
-        }
-        if (newHeight < (height != null ? height : 0)) {
-          setTimeout(() => {
-            (0, import_react_dom.flushSync)(() => {
-              setHeight(newHeight);
-            });
-            timeoutRef.current = setTimeout(() => {
-              setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
-            }, animationDurationToValue[animationDuration]);
-          });
-        } else {
-          setHeight(newHeight);
-          setClonedChildren((0, import_react.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {}));
-        }
+    const [clonedChildren, setClonedChildren] = (0, import_react2.useState)(
+      () => (0, import_react2.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {})
+    );
+    (0, import_react2.useEffect)(() => {
+      var _a3;
+      if (!rootRef.current)
+        return;
+      if (!measurementRef.current)
+        return;
+      if (document.body.scrollHeight === 0)
+        return;
+      const currentMeasurement = measurementRef.current;
+      const { height: newHeight } = currentMeasurement.getBoundingClientRect();
+      let previouslyObservedHeight = newHeight;
+      const resizeObserver = new ResizeObserver(() => {
+        const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();
+        if (resizedHeight === previouslyObservedHeight)
+          return;
+        previouslyObservedHeight = resizedHeight;
+        setHeight({ height: resizedHeight, shouldAnimate: false });
+      });
+      resizeObserver.observe(currentMeasurement);
+      setHeight({ height: newHeight, shouldAnimate: true });
+      const nextClonedChildren = (0, import_react2.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children }), {});
+      if (newHeight >= ((_a3 = height == null ? void 0 : height.height) != null ? _a3 : 0)) {
+        setClonedChildren(nextClonedChildren);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+      const currentRoot = rootRef.current;
+      function onTransitionEndHandler(e) {
+        if (e.propertyName !== "height")
+          return;
+        setClonedChildren(nextClonedChildren);
       }
+      currentRoot.addEventListener("transitionend", onTransitionEndHandler);
+      return () => {
+        resizeObserver.disconnect();
+        currentRoot.removeEventListener("transitionend", onTransitionEndHandler);
+      };
     }, [children]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Component,
       __spreadProps(__spreadValues({
-        ref,
+        ref: mergedRef,
+        onTransitionEnd,
         style: __spreadValues({
           position: "relative",
           overflow: "hidden",
-          height,
-          transitionProperty: "height",
+          height: (_b2 = height == null ? void 0 : height.height) != null ? _b2 : (_a2 = measurementRef.current) == null ? void 0 : _a2.getBoundingClientRect().height,
+          transitionProperty: (height == null ? void 0 : height.shouldAnimate) ? "height" : "none",
           transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,
-          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`
+          transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,
+          willChange: "height"
         }, style)
       }, rest), {
         children: [

package/dist/utilities/auto-animate-height.js.map

@@ -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 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            position: \"relative\",\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,UAAU;AAAA,UACV;AAAA,UACA,oBAAoB;AAAA,UACpB,oBAAoB,sCAAsC,iBAAiB;AAAA,UAC3E,0BAA0B,oCAAoC,eAAe;AAAA,WAC1E;AAAA,SAED,OAXL;AAAA,QAaC;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":[]}
+{"version":3,"sources":["../../src/utilities/auto-animate-height.tsx","../../src/utils.ts"],"sourcesContent":["import { cloneElement, forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useMergeRefs, type OverridableComponent } from \"../utils\";\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   * Callback fired when animiation transition ends\n   * Use this to do effects after resizing is done, e.g. scrolling to the element\n   * using `element.scrollIntoView()`\n   */\n  onTransitionEnd?: () => void;\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        onTransitionEnd,\n        ...rest\n      },\n      ref,\n    ) => {\n      const rootRef = useRef<HTMLDivElement>(null);\n      const mergedRef = useMergeRefs([rootRef, ref]);\n      const measurementRef = useRef<HTMLDivElement>(null);\n      const [height, setHeight] = useState<{ height: number; shouldAnimate: boolean } | undefined>(\n        undefined,\n      );\n      const [clonedChildren, setClonedChildren] = useState<React.ReactNode>(() =>\n        cloneElement(<>{children}</>, {}),\n      );\n\n      useEffect(() => {\n        if (!rootRef.current) return;\n        if (!measurementRef.current) return;\n        if (document.body.scrollHeight === 0) return;\n        const currentMeasurement = measurementRef.current;\n        const { height: newHeight } = currentMeasurement.getBoundingClientRect();\n\n        // Listen for resize events on the measurement element\n        // Keep the children in sync with the height\n        // But don't animate it.\n        let previouslyObservedHeight = newHeight;\n        const resizeObserver = new ResizeObserver(() => {\n          const { height: resizedHeight } = currentMeasurement.getBoundingClientRect();\n          if (resizedHeight === previouslyObservedHeight) return;\n          previouslyObservedHeight = resizedHeight;\n          setHeight({ height: resizedHeight, shouldAnimate: false });\n        });\n        resizeObserver.observe(currentMeasurement); // This is cleaned up down below in the return functions\n\n        // Set the new height when children changes\n        setHeight({ height: newHeight, shouldAnimate: true });\n\n        // Update children\n        const nextClonedChildren = cloneElement(<>{children}</>, {});\n\n        // When increasing in height update immediately so the new content is shown during the animation\n        if (newHeight >= (height?.height ?? 0)) {\n          setClonedChildren(nextClonedChildren);\n          return () => {\n            resizeObserver.disconnect();\n          };\n        }\n\n        // When decreasing in height, wait until the animation is done so that we don't get a sudden flash of empty content\n        const currentRoot = rootRef.current;\n        function onTransitionEndHandler(e: TransitionEvent) {\n          if (e.propertyName !== \"height\") return;\n          setClonedChildren(nextClonedChildren);\n        }\n        currentRoot.addEventListener(\"transitionend\", onTransitionEndHandler);\n        return () => {\n          resizeObserver.disconnect();\n          currentRoot.removeEventListener(\"transitionend\", onTransitionEndHandler);\n        };\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n      }, [children]);\n\n      return (\n        <Component\n          ref={mergedRef}\n          onTransitionEnd={onTransitionEnd}\n          style={{\n            position: \"relative\",\n            overflow: \"hidden\",\n            height: height?.height ?? measurementRef.current?.getBoundingClientRect().height,\n            transitionProperty: height?.shouldAnimate ? \"height\" : \"none\",\n            transitionDuration: `var(--hds-micro-animation-duration-${animationDuration})`,\n            transitionTimingFunction: `var(--hds-micro-animation-easing-${animationEasing})`,\n            willChange: \"height\",\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 type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n  (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n  <As extends ElementType>(\n    props: {\n      /** Override html element */\n      as?: As;\n    } & ComponentProps &\n      Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n  ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n  refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n  return React.useMemo(() => {\n    if (refs.every((ref) => ref === null)) {\n      return null;\n    }\n\n    return (value) => {\n      refs.forEach((ref) => {\n        if (typeof ref === \"function\") {\n          ref(value);\n        } else if (ref !== null) {\n          (ref as React.MutableRefObject<Instance | null>).current = value;\n        }\n      });\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n  ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n  const handleResize = useCallback(() => {\n    if (ref?.current !== null) {\n      setWidth(ref?.current?.offsetWidth ?? 0);\n      setHeight(ref?.current?.offsetHeight ?? 0);\n    }\n  }, [ref]);\n  useEffect(() => {\n    window.addEventListener(\"load\", handleResize);\n    window.addEventListener(\"resize\", handleResize);\n    return () => {\n      window.removeEventListener(\"load\", handleResize);\n      window.removeEventListener(\"resize\", handleResize);\n    };\n  }, [ref, handleResize]);\n  useEffect(() => {\n    handleResize();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n  }, []);\n  return { width, height };\n}\n\nfunction subscribe() {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n  return () => {};\n}\n\nexport function useHydrated() {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => true,\n    () => false,\n  );\n}\n"],"mappings":"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","names":["import_react","_a","_b"]}

package/dist/utilities/auto-animate-height.mjs

@@ -1,6 +1,7 @@
 import {
   AutoAnimateHeight
-} from "../chunk-AKYK3XFN.mjs";
+} from "../chunk-HSIL53A5.mjs";
+import "../chunk-ZL56N4UK.mjs";
 import "../chunk-R4SQKVDQ.mjs";
 export {
   AutoAnimateHeight