@postenbring/hedwig-react 0.0.61 → 0.0.63

package/dist/index-no-css.mjs

@@ -131,7 +131,7 @@ import "./chunk-V3PAFMK5.mjs";
 import "./chunk-MSFHJVHD.mjs";
 import {
   ShowMoreButton
-} from "./chunk-W47NV442.mjs";
+} from "./chunk-ZDPU3N54.mjs";
 import "./chunk-JTZPQHKD.mjs";
 import {
   Skeleton
@@ -139,7 +139,7 @@ import {
 import "./chunk-TJH5QJMS.mjs";
 import {
   StepIndicator
-} from "./chunk-NIRIPLQ5.mjs";
+} from "./chunk-5UJ3LEKK.mjs";
 import "./chunk-JKCVB5TR.mjs";
 import {
   StyledHtml
@@ -148,7 +148,7 @@ import "./chunk-33JD5XDW.mjs";
 import "./chunk-DZNH5JHY.mjs";
 import {
   AutoAnimateHeight
-} from "./chunk-2LKUHKL4.mjs";
+} from "./chunk-Q6REETZD.mjs";
 import "./chunk-R4SQKVDQ.mjs";
 export {
   AccordionComponent as Accordion,

package/dist/index.js

@@ -1517,6 +1517,7 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
       "animationDuration",
       "animationEasing"
     ]);
+    const timeoutRef = (0, import_react24.useRef)(null);
     const measurementRef = (0, import_react24.useRef)(null);
     const [height, setHeight] = (0, import_react24.useState)(void 0);
     const [clonedChildren, setClonedChildren] = (0, import_react24.useState)(
@@ -1525,13 +1526,18 @@ var AutoAnimateHeight = (0, import_react24.forwardRef)(
     (0, import_react24.useEffect)(() => {
       if (measurementRef.current) {
         const { height: newHeight } = measurementRef.current.getBoundingClientRect();
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
         if (newHeight < (height != null ? height : 0)) {
-          (0, import_react_dom.flushSync)(() => {
-            setHeight(newHeight);
-          });
           setTimeout(() => {
-            setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
-          }, animationDurationToValue[animationDuration]);
+            (0, import_react_dom.flushSync)(() => {
+              setHeight(newHeight);
+            });
+            timeoutRef.current = setTimeout(() => {
+              setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
+            }, animationDurationToValue[animationDuration]);
+          });
         } else {
           setHeight(newHeight);
           setClonedChildren((0, import_react24.cloneElement)(/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children }), {}));
@@ -1573,34 +1579,39 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
 
 // src/show-more/show-more.tsx
 var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
+var import_react25 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-function ShowMoreButton(_a) {
-  var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    "button",
-    __spreadProps(__spreadValues({
-      className: (0, import_typed_classname27.clsx)(
-        "hds-show-more",
-        variant === "show-more-show-less" && "hds-show-more--show-less",
-        className
-      ),
-      "data-state": expanded ? "expanded" : void 0,
-      type: "button"
-    }, rest), {
-      children: [
-        text,
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname27.clsx)("hds-show-more__icon") })
-      ]
-    })
-  );
-}
+var ShowMoreButton = (0, import_react25.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname27.clsx)(
+          "hds-show-more",
+          variant === "show-more-show-less" && "hds-show-more--show-less",
+          className
+        ),
+        "data-state": expanded ? "expanded" : void 0,
+        type: "button"
+      }, rest), {
+        children: [
+          text,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname27.clsx)("hds-show-more__icon") })
+        ]
+      })
+    );
+  }
+);
+ShowMoreButton.displayName = "ShowMoreButton";
 
 // src/skeleton/skeleton.tsx
 var React11 = require("react");
 var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Skeleton = (0, import_react25.forwardRef)(
+var Skeleton = (0, import_react26.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -1620,41 +1631,54 @@ Skeleton.displayName = "Skeleton";
 
 // src/step-indicator/step-indicator.tsx
 var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
+var import_react27 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function StepIndicator(_a) {
-  var _b = _a, {
-    activeStep,
-    totalSteps,
-    className,
-    label,
-    lang = "en",
-    title,
-    titleAs: TitleComponent
-  } = _b, rest = __objRest(_b, [
-    "activeStep",
-    "totalSteps",
-    "className",
-    "label",
-    "lang",
-    "title",
-    "titleAs"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname29.clsx)("hds-step-indicator", className), lang }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__header"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+var StepIndicator = (0, import_react27.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      activeStep,
+      totalSteps,
+      className,
+      label,
+      lang = "en",
+      title,
+      titleAs: TitleComponent
+    } = _b, rest = __objRest(_b, [
+      "activeStep",
+      "totalSteps",
+      "className",
+      "label",
+      "lang",
+      "title",
+      "titleAs"
+    ]);
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "div",
-      {
-        className: (0, import_typed_classname29.clsx)("hds-step-indicator__step"),
-        "data-state": getStepState(i + 1, activeStep)
-      },
-      i
-    )) }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TitleComponent, { className: (0, import_typed_classname29.clsx)("hds-step-indicator__title"), children: title }) : null
-  ] }));
-}
+      __spreadProps(__spreadValues({
+        ref,
+        className: (0, import_typed_classname29.clsx)("hds-step-indicator", className),
+        lang
+      }, rest), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__header"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            "div",
+            {
+              className: (0, import_typed_classname29.clsx)("hds-step-indicator__step"),
+              "data-state": getStepState(i + 1, activeStep)
+            },
+            i
+          )) }),
+          title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TitleComponent, { className: (0, import_typed_classname29.clsx)("hds-step-indicator__title"), children: title }) : null
+        ]
+      })
+    );
+  }
+);
+StepIndicator.displayName = "StepIndicator";
 var stepLabelTranslations = {
   no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
   en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
@@ -1672,10 +1696,10 @@ function getStepState(renderedStep, activeStep) {
 }
 
 // src/styled-html/styled-html.tsx
-var import_react26 = require("react");
+var import_react28 = require("react");
 var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var StyledHtml = (0, import_react26.forwardRef)(
+var StyledHtml = (0, import_react28.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -1697,12 +1721,12 @@ var StyledHtml = (0, import_react26.forwardRef)(
 StyledHtml.displayName = "StyledHtml";
 
 // src/tabs/tabs.tsx
-var import_react28 = require("react");
+var import_react30 = require("react");
 var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
 
 // src/tabs/context.ts
-var import_react27 = require("react");
-var TabsContext = (0, import_react27.createContext)({
+var import_react29 = require("react");
+var TabsContext = (0, import_react29.createContext)({
   mounted: false,
   activeTabId: void 0,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
@@ -1712,10 +1736,10 @@ var TabsContext = (0, import_react27.createContext)({
 
 // src/tabs/tabs.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Tabs = (0, import_react28.forwardRef)(
+var Tabs = (0, import_react30.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
-    const [activeTabId, setActiveTabId] = (0, import_react28.useState)(defaultTab);
+    const [activeTabId, setActiveTabId] = (0, import_react30.useState)(defaultTab);
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       TabsContext.Provider,
       {
@@ -1728,12 +1752,12 @@ var Tabs = (0, import_react28.forwardRef)(
 Tabs.displayName = "Tabs";
 
 // src/tabs/tabs-list.tsx
-var import_react29 = require("react");
+var import_react31 = require("react");
 var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function TabsList(_a) {
   var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
-  const tabsListRef = (0, import_react29.useRef)(null);
+  const tabsListRef = (0, import_react31.useRef)(null);
   const { width: tabsWidth } = useResize(tabsListRef);
   const { innerWidth } = window;
   const wideEnough = innerWidth >= tabsWidth;
@@ -1758,10 +1782,10 @@ function TabsList(_a) {
   );
 }
 TabsList.displayName = "Tabs.List";
-var Tab = (0, import_react29.forwardRef)(
+var Tab = (0, import_react31.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
-    const context = (0, import_react29.useContext)(TabsContext);
+    const context = (0, import_react31.useContext)(TabsContext);
     if (!context.mounted) {
       throw new Error("Context required. Did you use <TabContent/> outside of <Tabs/>?");
     }
@@ -1791,7 +1815,7 @@ var Tab = (0, import_react29.forwardRef)(
 Tab.displayName = "Tabs.Tab";
 
 // src/tabs/tabs-content.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function TabsContents(_a) {
@@ -1799,10 +1823,10 @@ function TabsContents(_a) {
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-tabs--contents") }, rest), { children }));
 }
 TabsContents.displayName = "Tabs.Contents";
-var TabsContent = (0, import_react30.forwardRef)(
+var TabsContent = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
-    const context = (0, import_react30.useContext)(TabsContext);
+    const context = (0, import_react32.useContext)(TabsContext);
     if (!context.mounted) {
       throw new Error("Context required. Did you use <Tabs.Content /> outside of <Tabs/>?");
     }
@@ -1822,7 +1846,7 @@ TabsComponent.Contents = TabsContents;
 TabsComponent.Content = TabsContent;
 
 // src/text/text.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var defaultHTMLTag = {
@@ -1840,7 +1864,7 @@ var defaultHTMLTag = {
   caption: "p",
   "caption-title": "p"
 };
-var Text = (0, import_react31.forwardRef)(
+var Text = (0, import_react33.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       as,
@@ -1916,10 +1940,10 @@ function textVariant(variant, displayName) {
 }
 
 // src/warning-banner/warning-banner.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var WarningBanner = (0, import_react32.forwardRef)(
+var WarningBanner = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
     const expandable = !!description;
@@ -1930,7 +1954,7 @@ var WarningBanner = (0, import_react32.forwardRef)(
   }
 );
 WarningBanner.displayName = "WarningBanner";
-var WarningBannerTitle = (0, import_react32.forwardRef)(
+var WarningBannerTitle = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant,
@@ -1943,7 +1967,7 @@ var WarningBannerTitle = (0, import_react32.forwardRef)(
       "children",
       "className"
     ]);
-    const [open, setOpen] = (0, import_react32.useState)(false);
+    const [open, setOpen] = (0, import_react34.useState)(false);
     if (variant === "expandable") {
       return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Component,
@@ -1976,7 +2000,7 @@ var WarningBannerTitle = (0, import_react32.forwardRef)(
   }
 );
 WarningBannerTitle.displayName = "WarningBannerTitle";
-var WarningBannerDescription = (0, import_react32.forwardRef)(
+var WarningBannerDescription = (0, import_react34.forwardRef)(
   (_a, ref) => {
     var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(