@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface TooltipProps {
     /** Ordet som skal ha en tilhørende tooltip */
     children: string;

package/components/Tooltip/TooltipWord/TooltipWord.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface TooltipWordProps {
     /** Ordet som skal ha en tilhørende tooltip */
     children: string;

package/components/Tooltip/TooltipWord/index.d.ts

@@ -1,3 +1,3 @@
-import TooltipWord from './TooltipWord';
+import { default as TooltipWord } from './TooltipWord';
 export * from './TooltipWord';
 export default TooltipWord;

package/components/Tooltip/TooltipWord/index.js

@@ -1,5 +1,5 @@
-import { T as r } from "../../../TooltipWord.js";
+import { T as TooltipWord } from "../../../TooltipWord.js";
 export {
-  r as default
+  TooltipWord as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
-import Tooltip from './Tooltip';
+import { default as Tooltip } from './Tooltip';
 export * from './Tooltip';
 export default Tooltip;

package/components/Tooltip/index.js

@@ -1,57 +1,90 @@
-import { jsxs as m, Fragment as w, jsx as c } from "react/jsx-runtime";
-import O, { useRef as y, useContext as C, useEffect as u, useState as D } from "react";
-import { T as b } from "../../TooltipWord.js";
-import { useDelayedState as B } from "../../hooks/useDelayedState.js";
-import { useUuid as E } from "../../hooks/useUuid.js";
-import { H as v } from "../../HelpBubble.js";
-const x = 200, g = ({ children: p, description: s, testId: i }) => {
-  const t = E(), a = y(null), { currentTooltip: n, setCurrentTooltip: r } = C(h), [{ showTooltip: l, keepOpen: T }, k, o] = B(
-    { showTooltip: !1, keepOpen: !1 },
-    x
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { useRef, useContext, useEffect, useState } from "react";
+import { T as TooltipWord } from "../../TooltipWord.js";
+import { useDelayedState } from "../../hooks/useDelayedState.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { H as HelpBubble } from "../../HelpBubble.js";
+const HOVER_DELAY_MS = 200;
+const Tooltip = ({ children, description, testId }) => {
+  const helpBubbleId = useUuid();
+  const wordRef = useRef(null);
+  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);
+  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(
+    { showTooltip: false, keepOpen: false },
+    HOVER_DELAY_MS
   );
-  u(() => {
-    r && r(l ? t : void 0);
-  }, [l]), u(() => {
-    n !== t && typeof n < "u" && o((e) => ({ showTooltip: !1, keepOpen: e.keepOpen }));
-  }, [n]);
-  const d = () => {
-    l || o({ showTooltip: !1, keepOpen: !1 });
+  useEffect(() => {
+    if (!setCurrentTooltip) {
+      return;
+    }
+    if (showTooltip) {
+      setCurrentTooltip(helpBubbleId);
+    } else {
+      setCurrentTooltip(void 0);
+    }
+  }, [showTooltip]);
+  useEffect(() => {
+    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== "undefined") {
+      setShowTooltip((prevState) => ({ showTooltip: false, keepOpen: prevState.keepOpen }));
+    }
+  }, [currentTooltip]);
+  const handleDocumentClick = () => {
+    if (!showTooltip) {
+      setShowTooltip({ showTooltip: false, keepOpen: false });
+    }
   };
-  return u(() => (document.addEventListener("mouseup", d), () => {
-    document.removeEventListener("mouseup", d);
-  }), []), /* @__PURE__ */ m(w, { children: [
-    /* @__PURE__ */ c(
-      b,
+  useEffect(() => {
+    document.addEventListener("mouseup", handleDocumentClick);
+    return () => {
+      document.removeEventListener("mouseup", handleDocumentClick);
+    };
+  }, []);
+  const handleTooltipClick = () => {
+    setShowTooltip((prevState) => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));
+  };
+  const handleFocus = () => {
+    if (!currentTooltip) {
+      setShowTooltipDelayed((prevState) => ({ showTooltip: true, keepOpen: prevState.keepOpen }));
+    }
+  };
+  const handleBlur = () => {
+    setShowTooltip((prevState) => ({ showTooltip: false, keepOpen: prevState.keepOpen }));
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      setShowTooltip((prevState) => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));
+    }
+    if (e.key === "Escape") {
+      setShowTooltip({ showTooltip: false, keepOpen: false });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipWord,
       {
-        ref: a,
-        onClick: () => {
-          o((e) => ({ showTooltip: !e.showTooltip, keepOpen: !e.keepOpen }));
-        },
-        onFocus: () => {
-          n || k((e) => ({ showTooltip: !0, keepOpen: e.keepOpen }));
-        },
-        onBlur: () => {
-          o((e) => ({ showTooltip: !1, keepOpen: e.keepOpen }));
-        },
-        onKeyDown: (e) => {
-          e.key === "Enter" && o((f) => ({ showTooltip: !f.showTooltip, keepOpen: !f.keepOpen })), e.key === "Escape" && o({ showTooltip: !1, keepOpen: !1 });
-        },
-        ariaDescribedById: t,
-        testId: i,
-        children: p
+        ref: wordRef,
+        onClick: handleTooltipClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        ariaDescribedById: helpBubbleId,
+        testId,
+        children
       }
     ),
-    /* @__PURE__ */ c(v, { helpBubbleId: t, controllerRef: a, role: "tooltip", showBubble: l || T, children: s })
+    /* @__PURE__ */ jsx(HelpBubble, { helpBubbleId, controllerRef: wordRef, role: "tooltip", showBubble: showTooltip || keepOpen, children: description })
   ] });
-}, h = O.createContext({
+};
+const TooltipOpenContext = React.createContext({
   currentTooltip: void 0
-}), A = ({ children: p }) => {
-  const [s, i] = D();
-  return /* @__PURE__ */ c(h.Provider, { value: { currentTooltip: s, setCurrentTooltip: i }, children: p });
+});
+const TooltipOpenProvider = ({ children }) => {
+  const [currentTooltip, setCurrentTooltip] = useState();
+  return /* @__PURE__ */ jsx(TooltipOpenContext.Provider, { value: { currentTooltip, setCurrentTooltip }, children });
 };
 export {
-  g as Tooltip,
-  A as TooltipOpenProvider,
-  g as default
+  Tooltip,
+  TooltipOpenProvider,
+  Tooltip as default
 };
 //# sourceMappingURL=index.js.map

package/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n  children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","jsxs","Fragment","jsx","TooltipWord","HelpBubble","React","TooltipOpenProvider","useState"],"mappings":";;;;;;AAOA,MAAMA,IAAiB,KAWVC,IAAkC,CAAC,EAAE,UAAAC,GAAU,aAAAC,GAAa,QAAAC,QAAa;AACpF,QAAMC,IAAeC,KACfC,IAAUC,EAA0B,IAAI,GACxC,EAAE,gBAAAC,GAAgB,mBAAAC,EAAkB,IAAIC,EAAWC,CAAkB,GACrE,CAAC,EAAE,aAAAC,GAAa,UAAAC,EAAY,GAAAC,GAAuBC,CAAc,IAAIC;AAAA,IACzE,EAAE,aAAa,IAAO,UAAU,GAAM;AAAA,IACtCjB;AAAA,EAAA;AAGF,EAAAkB,EAAU,MAAM;AACd,IAAKR,KAIHA,EADEG,IACgBR,IAEA,MAFY;AAAA,EAGhC,GACC,CAACQ,CAAW,CAAC,GAEhBK,EAAU,MAAM;AACd,IAAIT,MAAmBJ,KAAgB,OAAOI,IAAmB,OAC/DO,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,EACpF,GACC,CAACV,CAAc,CAAC;AAEnB,QAAMW,IAAsB,MAAY;AACtC,IAAKP,KACHG,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,EACxD;AAGF,SAAAE,EAAU,OACC,SAAA,iBAAiB,WAAWE,CAAmB,GACjD,MAAY;AACR,aAAA,oBAAoB,WAAWA,CAAmB;AAAA,EAAA,IAE5D,CAAE,CAAA,GA2BD,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKjB;AAAA,QACL,SA3BqB,MAAY;AACtB,UAAAS,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW;AAAA,QAAA;AAAA,QA2BhG,SAxBc,MAAY;AAC9B,UAAKV,KACHM,EAAsB,QAAc,EAAE,aAAa,IAAM,UAAUI,EAAU,SAAW,EAAA;AAAA,QAC1F;AAAA,QAsBI,QAnBa,MAAY;AAC7B,UAAAH,EAAe,QAAc,EAAE,aAAa,IAAO,UAAUG,EAAU,SAAW,EAAA;AAAA,QAAA;AAAA,QAmB9E,WAhBgB,CAAC,MAAkD;AACnE,UAAA,EAAE,QAAQ,WACGH,EAAA,CAAAG,OAAc,EAAE,aAAa,CAACA,EAAU,aAAa,UAAU,CAACA,EAAU,SAAA,EAAW,GAElG,EAAE,QAAQ,YACZH,EAAe,EAAE,aAAa,IAAO,UAAU,GAAO,CAAA;AAAA,QACxD;AAAA,QAWI,mBAAmBX;AAAA,QACnB,QAAAD;AAAA,QAEC,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,IACA,gBAAAqB,EAACE,GAAW,EAAA,cAAApB,GAA4B,eAAeE,GAAS,MAAK,WAAU,YAAYM,KAAeC,GACvG,UACHX,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,GAOMS,IAAqBc,EAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC,GAMYC,IAA0D,CAAC,EAAE,UAAAzB,QAAe;AACvF,QAAM,CAACO,GAAgBC,CAAiB,IAAIkB,EAAiB;AAEtD,SAAA,gBAAAL,EAACX,EAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAAH,GAAgB,mBAAAC,EAAkB,GAAI,UAAAR,EAAS,CAAA;AAC9F;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n  children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,iBAAiB;AAWhB,MAAM,UAAkC,CAAC,EAAE,UAAU,aAAa,aAAa;AACpF,QAAM,eAAe,QAAQ;AACvB,QAAA,UAAU,OAA0B,IAAI;AAC9C,QAAM,EAAE,gBAAgB,sBAAsB,WAAW,kBAAkB;AAC3E,QAAM,CAAC,EAAE,aAAa,SAAY,GAAA,uBAAuB,cAAc,IAAI;AAAA,IACzE,EAAE,aAAa,OAAO,UAAU,MAAM;AAAA,IACtC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB;AACtB;AAAA,IAAA;AAEF,QAAI,aAAa;AACf,wBAAkB,YAAY;AAAA,IAAA,OACzB;AACL,wBAAkB,MAAS;AAAA,IAAA;AAAA,EAC7B,GACC,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,mBAAmB,gBAAgB,OAAO,mBAAmB,aAAa;AAC5E,qBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EACpF,GACC,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAsB,MAAY;AACtC,QAAI,CAAC,aAAa;AAChB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,YAAU,MAAM;AACL,aAAA,iBAAiB,WAAW,mBAAmB;AACxD,WAAO,MAAY;AACR,eAAA,oBAAoB,WAAW,mBAAmB;AAAA,IAC7D;AAAA,EACF,GAAG,EAAE;AAEL,QAAM,qBAAqB,MAAY;AACtB,mBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,EACtG;AAEA,QAAM,cAAc,MAAY;AAC9B,QAAI,CAAC,gBAAgB;AACnB,4BAAsB,gBAAc,EAAE,aAAa,MAAM,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EAE5F;AAEA,QAAM,aAAa,MAAY;AAC7B,mBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,EACpF;AAEM,QAAA,gBAAgB,CAAC,MAAkD;AACnE,QAAA,EAAE,QAAQ,SAAS;AACN,qBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,IAAA;AAElG,QAAA,EAAE,QAAQ,UAAU;AACtB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,YAAW,EAAA,cAA4B,eAAe,SAAS,MAAK,WAAU,YAAY,eAAe,UACvG,UACH,YAAA,CAAA;AAAA,EAAA,GACF;AAEJ;AAOA,MAAM,qBAAqB,MAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC;AAMM,MAAM,sBAA0D,CAAC,EAAE,eAAe;AACvF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB;AAEtD,SAAA,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAgB,qBAAsB,UAAS;AAC9F;"}

package/components/Trigger/HelpSign.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SvgPathProps } from '../Icon';
 declare const HelpSign: React.FC<SvgPathProps>;
 export default HelpSign;

package/components/Trigger/InfoSignStroke.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SvgPathProps } from '../Icon';
 declare const InfoSignStroke: React.FC<SvgPathProps>;
 export default InfoSignStroke;

package/components/Trigger/Trigger.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TriggerTags = 'button' | 'span';
 export type TriggerVariant = 'help';
 export type TriggerSize = 'medium' | 'large';

package/components/Trigger/index.d.ts

@@ -1,3 +1,3 @@
-import Trigger from './Trigger';
+import { default as Trigger } from './Trigger';
 export * from './Trigger';
 export default Trigger;

package/components/Trigger/index.js

@@ -1,5 +1,5 @@
-import { T as a } from "../../Trigger.js";
+import { T as Trigger } from "../../Trigger.js";
 export {
-  a as default
+  Trigger as default
 };
 //# sourceMappingURL=index.js.map

package/components/Validation/ErrorList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ValidationErrors } from './types';
 interface ErrorListProps {
     errors: ValidationErrors;

package/components/Validation/ErrorListItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ErrorDetails } from './types';
 interface ErrorElementProps {
     name: string;

package/components/Validation/Validation.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ValidationErrors } from './types';
 import { FormSize } from '../../constants';
 interface ValidationProps {

package/components/Validation/ValidationSummary.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ValidationErrors } from './types';
 import { TitleTags } from '../Title';
 interface ValidationSummaryProps {

package/components/Validation/index.d.ts

@@ -1,3 +1,3 @@
-import Validation from './Validation';
+import { default as Validation } from './Validation';
 export * from './Validation';
 export default Validation;

package/components/Validation/index.js

@@ -1,57 +1,81 @@
-import { jsx as o, Fragment as f, jsxs as c } from "react/jsx-runtime";
-import m from "react";
-import T from "classnames";
-import { A as C } from "../../AnchorLink.js";
-import { L as u } from "../../List.js";
-import { useUuid as y } from "../../hooks/useUuid.js";
-import { T as h } from "../../Title.js";
-import d from "./styles.module.scss";
-import { AnalyticsId as g } from "../../constants.js";
-import { isComponent as s, isComponentWithDisplayName as l } from "../../utils/component.js";
-import { C as k } from "../../Checkbox.js";
-import { F as v } from "../../FormGroup.js";
-import { I as E } from "../../Input.js";
-import { R as I } from "../../RadioButton.js";
-import { S as N } from "../../Select.js";
-import { S as b } from "../../Slider.js";
-import { T as _ } from "../../Textarea.js";
-const x = (r) => {
-  const i = (e, t) => {
-    e == null || e.preventDefault(), t != null && t.focus && (t == null || t.focus());
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { A as AnchorLink } from "../../AnchorLink.js";
+import { L as List } from "../../List.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { T as Title } from "../../Title.js";
+import styles from "./styles.module.scss";
+import { AnalyticsId } from "../../constants.js";
+import { isComponent, isComponentWithDisplayName } from "../../utils/component.js";
+import { C as Checkbox } from "../../Checkbox.js";
+import { F as FormGroup } from "../../FormGroup.js";
+import { I as Input } from "../../Input.js";
+import { R as RadioButton } from "../../RadioButton.js";
+import { S as Select } from "../../Select.js";
+import { S as Slider } from "../../Slider.js";
+import { T as Textarea } from "../../Textarea.js";
+const ErrorListItem = (props) => {
+  const handleClick = (event, element) => {
+    event == null ? void 0 : event.preventDefault();
+    (element == null ? void 0 : element.focus) && (element == null ? void 0 : element.focus());
   };
-  return r.error.ref ? /* @__PURE__ */ o(C, { href: `#${r.name}`, onClick: (e) => i(e, r.error.ref), children: r.error.message }) : /* @__PURE__ */ o(f, { children: r.error.message });
-}, D = (r) => /* @__PURE__ */ o(u, { children: Object.entries(r.errors).map(([i, e]) => /* @__PURE__ */ o(u.Item, { children: /* @__PURE__ */ o(x, { name: i, error: e }) }, i)) }), F = (r) => {
-  const { errorTitleHtmlMarkup: i = "h2" } = r, e = y(), t = !!r.errors && Object.entries(r.errors).length > 0, n = T(d.validation__summary, t && d["validation__summary--visible"]);
-  return /* @__PURE__ */ c(
+  if (props.error.ref) {
+    return /* @__PURE__ */ jsx(AnchorLink, { href: `#${props.name}`, onClick: (e) => handleClick(e, props.error.ref), children: props.error.message });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.error.message });
+};
+const ErrorList = (props) => /* @__PURE__ */ jsx(List, { children: Object.entries(props.errors).map(([name, error]) => /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(ErrorListItem, { name, error }) }, name)) });
+const ValidationSummary = (props) => {
+  const { errorTitleHtmlMarkup = "h2" } = props;
+  const titleId = useUuid();
+  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;
+  const summaryClasses = classNames(styles["validation__summary"], hasErrors && styles["validation__summary--visible"]);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "alert",
       "aria-live": "polite",
       "aria-relevant": "all",
-      "aria-labelledby": t && r.errorTitle ? e : void 0,
-      className: n,
+      "aria-labelledby": hasErrors && props.errorTitle ? titleId : void 0,
+      className: summaryClasses,
       children: [
-        t && /* @__PURE__ */ c(f, { children: [
-          r.errorTitle && /* @__PURE__ */ o(h, { appearance: "title4", id: e, htmlMarkup: i, margin: { marginTop: 0, marginBottom: 1 }, children: r.errorTitle }),
-          /* @__PURE__ */ o(D, { errors: r.errors })
+        hasErrors && /* @__PURE__ */ jsxs(Fragment, { children: [
+          props.errorTitle && /* @__PURE__ */ jsx(Title, { appearance: "title4", id: titleId, htmlMarkup: errorTitleHtmlMarkup, margin: { marginTop: 0, marginBottom: 1 }, children: props.errorTitle }),
+          /* @__PURE__ */ jsx(ErrorList, { errors: props.errors })
         ] }),
-        r.children
+        props.children
       ]
     }
   );
-}, L = m.forwardRef((r, i) => {
-  const e = d["validation__error-wrapper"], t = (a) => m.cloneElement(a, {
-    ...a.props,
-    errorWrapperClassName: e
-  }), n = (a) => s(a, v) || s(a, k) || s(a, I) || s(a, _) || s(a, E) || s(a, N) || s(a, b) || l(a, "DateTimePickerWrapper") || l(a, "DatePicker") || l(a, "DateTime") ? t(a) : m.isValidElement(a) && a.type === m.Fragment ? m.Children.map(a.props.children, (p) => n(p)) : a;
-  return /* @__PURE__ */ c(f, { children: [
-    /* @__PURE__ */ o("div", { "data-testid": r.testId, "data-analyticsid": g.Validation, className: r.className, ref: i, children: m.Children.map(r.children, (a) => n(a)) }),
-    /* @__PURE__ */ o(F, { errorTitle: r.errorTitle, errors: r.errors })
+};
+const Validation = React.forwardRef((props, ref) => {
+  const validationErrorClass = styles["validation__error-wrapper"];
+  const cloneFormElement = (child) => {
+    return React.cloneElement(child, {
+      ...child.props,
+      errorWrapperClassName: validationErrorClass
+    });
+  };
+  const renderChild = (child) => {
+    if (isComponent(child, FormGroup) || isComponent(child, Checkbox) || isComponent(child, RadioButton) || isComponent(child, Textarea) || isComponent(child, Input) || isComponent(child, Select) || isComponent(child, Slider) || isComponentWithDisplayName(child, "DateTimePickerWrapper") || isComponentWithDisplayName(child, "DatePicker") || isComponentWithDisplayName(child, "DateTime")) {
+      return cloneFormElement(child);
+    }
+    if (React.isValidElement(child) && child.type === React.Fragment) {
+      return React.Children.map(child.props.children, (child2) => {
+        return renderChild(child2);
+      });
+    }
+    return child;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { "data-testid": props.testId, "data-analyticsid": AnalyticsId.Validation, className: props.className, ref, children: React.Children.map(props.children, (child) => renderChild(child)) }),
+    /* @__PURE__ */ jsx(ValidationSummary, { errorTitle: props.errorTitle, errors: props.errors })
   ] });
 });
-L.displayName = "Validation";
+Validation.displayName = "Validation";
 export {
-  L as Validation,
-  L as default
+  Validation,
+  Validation as default
 };
 //# sourceMappingURL=index.js.map

package/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'alert'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["ErrorListItem","props","handleClick","event","element","AnchorLink","jsx","Fragment","ErrorList","List","name","error","ValidationSummary","errorTitleHtmlMarkup","titleId","useUuid","hasErrors","summaryClasses","classNames","styles","jsxs","Title","Validation","React","ref","validationErrorClass","cloneFormElement","child","renderChild","isComponent","FormGroup","Checkbox","RadioButton","Textarea","Input","Select","Slider","isComponentWithDisplayName","AnalyticsId"],"mappings":";;;;;;;;;;;;;;;;;AAUA,MAAMA,IAA6C,CAASC,MAAA;AACpD,QAAAC,IAAc,CAACC,GAAgCC,MAAqC;AACxF,IAAAD,KAAA,QAAAA,EAAO,kBACEC,KAAA,QAAAA,EAAA,UAASA,KAAA,QAAAA,EAAS;AAAA,EAAM;AAG/B,SAAAH,EAAM,MAAM,wBAEXI,GAAW,EAAA,MAAM,IAAIJ,EAAM,IAAI,IAAI,SAAS,CAAC,MAAYC,EAAY,GAAGD,EAAM,MAAM,GAAG,GACrF,UAAAA,EAAM,MAAM,QACf,CAAA,IAIG,gBAAAK,EAAAC,GAAA,EAAG,UAAMN,EAAA,MAAM,QAAQ,CAAA;AAChC,GCfMO,IAAsC,CAC1CP,MAAA,gBAAAK,EAACG,GACE,EAAA,UAAA,OAAO,QAAQR,EAAM,MAAM,EAAE,IAAI,CAAC,CAACS,GAAMC,CAAK,MAC7C,gBAAAL,EAACG,EAAK,MAAL,EACC,UAAA,gBAAAH,EAACN,GAAc,EAAA,MAAAU,GAAY,OAAAC,EAAc,CAAA,EAAA,GAD3BD,CAEhB,CACD,EACH,CAAA,GCKIE,IAAsD,CAASX,MAAA;AAC7D,QAAA,EAAE,sBAAAY,IAAuB,KAAS,IAAAZ,GAClCa,IAAUC,KAEVC,IAAY,CAAC,CAACf,EAAM,UAAU,OAAO,QAAQA,EAAM,MAAM,EAAE,SAAS,GAEpEgB,IAAiBC,EAAWC,EAAO,qBAAwBH,KAAaG,EAAO,8BAA8B,CAAC;AAGlH,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,mBAAiBJ,KAAaf,EAAM,aAAaa,IAAU;AAAA,MAC3D,WAAWG;AAAA,MAEV,UAAA;AAAA,QAAAD,KAEI,gBAAAI,EAAAb,GAAA,EAAA,UAAA;AAAA,UAAAN,EAAM,cACJ,gBAAAK,EAAAe,GAAA,EAAM,YAAW,UAAS,IAAIP,GAAS,YAAYD,GAAsB,QAAQ,EAAE,WAAW,GAAG,cAAc,EAAE,GAC/G,YAAM,YACT;AAAA,UAED,gBAAAP,EAAAE,GAAA,EAAU,QAAQP,EAAM,OAAS,CAAA;AAAA,QAAA,GACpC;AAAA,QAEDA,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,GCnBaqB,IAAaC,EAAM,WAAW,CAACtB,GAAwBuB,MAA4C;AACxG,QAAAC,IAAuBN,EAAO,2BAA2B,GAEzDO,IAAmB,CAAuCC,MACvDJ,EAAM,aAAaI,GAAO;AAAA,IAC/B,GAAGA,EAAM;AAAA,IACT,uBAAuBF;AAAA,EAAA,CACxB,GAGGG,IAAc,CAACD,MAEjBE,EAA4BF,GAAOG,CAAS,KAC5CD,EAA2BF,GAAOI,CAAQ,KAC1CF,EAA8BF,GAAOK,CAAW,KAChDH,EAA2BF,GAAOM,CAAQ,KAC1CJ,EAAwBF,GAAOO,CAAK,KACpCL,EAAyBF,GAAOQ,CAAM,KACtCN,EAAyBF,GAAOS,CAAM,KACtCC,EAAuDV,GAAO,uBAAuB,KACrFU,EAAuDV,GAAO,YAAY,KAC1EU,EAAuDV,GAAO,UAAU,IAEjED,EAA6CC,CAAK,IAEvDJ,EAAM,eAAeI,CAAK,KAAKA,EAAM,SAASJ,EAAM,WAC/CA,EAAM,SAAS,IAAII,EAAM,MAAM,UAAU,CAACA,MACxCC,EAAYD,CAAK,CACzB,IAGIA;AAGT,SAEI,gBAAAP,EAAAb,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAD,EAAA,OAAA,EAAI,eAAaL,EAAM,QAAQ,oBAAkBqC,EAAY,YAAY,WAAWrC,EAAM,WAAW,KAAAuB,GACnG,UAAMD,EAAA,SAAS,IAAItB,EAAM,UAAU,CAAC0B,MAA2BC,EAAYD,CAAK,CAAC,EACpF,CAAA;AAAA,sBACCf,GAAkB,EAAA,YAAYX,EAAM,YAAY,QAAQA,EAAM,QAAQ;AAAA,EACzE,EAAA,CAAA;AAEJ,CAAC;AAEDqB,EAAW,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'alert'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["child"],"mappings":"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"}

package/constants.js

@@ -1,13 +1,116 @@
-var e = /* @__PURE__ */ ((r) => (r[r.XXSmall = 24] = "XXSmall", r[r.XSmall = 38] = "XSmall", r[r.Small = 48] = "Small", r[r.Medium = 64] = "Medium", r[r.Large = 80] = "Large", r[r.XLarge = 130] = "XLarge", r))(e || {}), o = /* @__PURE__ */ ((r) => (r[r.Modal = 13e5] = "Modal", r[r.PopOver = 11e3] = "PopOver", r[r.ExpanderTrigger = 1e4] = "ExpanderTrigger", r[r.OverlayScreen = 9999] = "OverlayScreen", r[r.LightBoxButtons = 1e3] = "LightBoxButtons", r))(o || {});
-const u = 12;
-var p = /* @__PURE__ */ ((r) => (r.onwhite = "onwhite", r.ongrey = "ongrey", r.onblueberry = "onblueberry", r.ondark = "ondark", r.oninvalid = "oninvalid", r))(p || {}), a = /* @__PURE__ */ ((r) => (r.medium = "medium", r.large = "large", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.AnchorLink = "anchor-link", r.Avatar = "avatar", r.Badge = "badge", r.Button = "button", r.Checkbox = "checkbox", r.Chip = "chip", r.Close = "close", r.DictionaryTrigger = "dictionary-trigger", r.Dropdown = "dropdown", r.Duolist = "duolist", r.EmptyState = "empty-state", r.Expander = "expander", r.ExpanderHierarchy = "expander-hierarchy", r.ExpanderHierarchyExpander = "expander-hierarchy-expander", r.ExpanderList = "expander-list", r.ExpanderListExpander = "expander-list-expander", r.EyebrowHeader = "eyebrow-header", r.FormGroup = "form-group", r.FormLayout = "form-layout", r.HelpBubble = "help-bubble", r.HelpQuestion = "help-question", r.HighlightPanel = "highlight-panel", r.Icon = "icon", r.Illustration = "Illustration", r.Input = "input", r.Label = "label", r.Link = "link", r.LinkList = "link-list", r.List = "list", r.Loader = "loader", r.Logo = "logo", r.Modal = "modal", r.NotificationPanel = "notification-panel", r.Panel = "panel", r.PanelList = "panel-list", r.PopMenu = "pop-menu", r.PopOver = "pop-over", r.Portal = "portal", r.PromoPanel = "promo-panel", r.RadioButton = "radio-button", r.Select = "select", r.SharingStatus = "sharing-status", r.Slider = "slider", r.Spacer = "spacer", r.StatusDot = "status-dot", r.Step = "step", r.StepButtons = "step-buttons", r.Stepper = "stepper", r.Sublabel = "sublabel", r.Table = "table", r.Tag = "tag", r.TagList = "tag-list", r.Textarea = "textarea", r.Tile = "tile", r.Title = "title", r.Toggle = "toggle", r.Tooltip = "tooltip", r.Trigger = "trigger", r.Validation = "validation", r))(t || {}), g = /* @__PURE__ */ ((r) => (r.Enter = "Enter", r.Escape = "Escape", r.ArrowDown = "ArrowDown", r.ArrowUp = "ArrowUp", r.ArrowRight = "ArrowRight", r.ArrowLeft = "ArrowLeft", r.Home = "Home", r.End = "End", r.Space = " ", r.Tab = "Tab", r))(g || {});
+var IconSize = /* @__PURE__ */ ((IconSize2) => {
+  IconSize2[IconSize2["XXSmall"] = 24] = "XXSmall";
+  IconSize2[IconSize2["XSmall"] = 38] = "XSmall";
+  IconSize2[IconSize2["Small"] = 48] = "Small";
+  IconSize2[IconSize2["Medium"] = 64] = "Medium";
+  IconSize2[IconSize2["Large"] = 80] = "Large";
+  IconSize2[IconSize2["XLarge"] = 130] = "XLarge";
+  return IconSize2;
+})(IconSize || {});
+var ZIndex = /* @__PURE__ */ ((ZIndex2) => {
+  ZIndex2[ZIndex2["Modal"] = 13e5] = "Modal";
+  ZIndex2[ZIndex2["PopOver"] = 11e3] = "PopOver";
+  ZIndex2[ZIndex2["ExpanderTrigger"] = 1e4] = "ExpanderTrigger";
+  ZIndex2[ZIndex2["OverlayScreen"] = 9999] = "OverlayScreen";
+  ZIndex2[ZIndex2["LightBoxButtons"] = 1e3] = "LightBoxButtons";
+  return ZIndex2;
+})(ZIndex || {});
+const AVERAGE_CHARACTER_WIDTH_PX = 12;
+var FormOnColor = /* @__PURE__ */ ((FormOnColor2) => {
+  FormOnColor2["onwhite"] = "onwhite";
+  FormOnColor2["ongrey"] = "ongrey";
+  FormOnColor2["onblueberry"] = "onblueberry";
+  FormOnColor2["ondark"] = "ondark";
+  FormOnColor2["oninvalid"] = "oninvalid";
+  return FormOnColor2;
+})(FormOnColor || {});
+var FormSize = /* @__PURE__ */ ((FormSize2) => {
+  FormSize2["medium"] = "medium";
+  FormSize2["large"] = "large";
+  return FormSize2;
+})(FormSize || {});
+var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
+  AnalyticsId2["AnchorLink"] = "anchor-link";
+  AnalyticsId2["Avatar"] = "avatar";
+  AnalyticsId2["Badge"] = "badge";
+  AnalyticsId2["Button"] = "button";
+  AnalyticsId2["Checkbox"] = "checkbox";
+  AnalyticsId2["Chip"] = "chip";
+  AnalyticsId2["Close"] = "close";
+  AnalyticsId2["DictionaryTrigger"] = "dictionary-trigger";
+  AnalyticsId2["Dropdown"] = "dropdown";
+  AnalyticsId2["Duolist"] = "duolist";
+  AnalyticsId2["EmptyState"] = "empty-state";
+  AnalyticsId2["Expander"] = "expander";
+  AnalyticsId2["ExpanderHierarchy"] = "expander-hierarchy";
+  AnalyticsId2["ExpanderHierarchyExpander"] = "expander-hierarchy-expander";
+  AnalyticsId2["ExpanderList"] = "expander-list";
+  AnalyticsId2["ExpanderListExpander"] = "expander-list-expander";
+  AnalyticsId2["EyebrowHeader"] = "eyebrow-header";
+  AnalyticsId2["FormGroup"] = "form-group";
+  AnalyticsId2["FormLayout"] = "form-layout";
+  AnalyticsId2["HelpBubble"] = "help-bubble";
+  AnalyticsId2["HelpQuestion"] = "help-question";
+  AnalyticsId2["HighlightPanel"] = "highlight-panel";
+  AnalyticsId2["Icon"] = "icon";
+  AnalyticsId2["Illustration"] = "Illustration";
+  AnalyticsId2["Input"] = "input";
+  AnalyticsId2["Label"] = "label";
+  AnalyticsId2["Link"] = "link";
+  AnalyticsId2["LinkList"] = "link-list";
+  AnalyticsId2["List"] = "list";
+  AnalyticsId2["Loader"] = "loader";
+  AnalyticsId2["Logo"] = "logo";
+  AnalyticsId2["Modal"] = "modal";
+  AnalyticsId2["NotificationPanel"] = "notification-panel";
+  AnalyticsId2["Panel"] = "panel";
+  AnalyticsId2["PanelList"] = "panel-list";
+  AnalyticsId2["PopMenu"] = "pop-menu";
+  AnalyticsId2["PopOver"] = "pop-over";
+  AnalyticsId2["Portal"] = "portal";
+  AnalyticsId2["PromoPanel"] = "promo-panel";
+  AnalyticsId2["RadioButton"] = "radio-button";
+  AnalyticsId2["Select"] = "select";
+  AnalyticsId2["SharingStatus"] = "sharing-status";
+  AnalyticsId2["Slider"] = "slider";
+  AnalyticsId2["Spacer"] = "spacer";
+  AnalyticsId2["StatusDot"] = "status-dot";
+  AnalyticsId2["Step"] = "step";
+  AnalyticsId2["StepButtons"] = "step-buttons";
+  AnalyticsId2["Stepper"] = "stepper";
+  AnalyticsId2["Sublabel"] = "sublabel";
+  AnalyticsId2["Table"] = "table";
+  AnalyticsId2["Tag"] = "tag";
+  AnalyticsId2["TagList"] = "tag-list";
+  AnalyticsId2["Textarea"] = "textarea";
+  AnalyticsId2["Tile"] = "tile";
+  AnalyticsId2["Title"] = "title";
+  AnalyticsId2["Toggle"] = "toggle";
+  AnalyticsId2["Tooltip"] = "tooltip";
+  AnalyticsId2["Trigger"] = "trigger";
+  AnalyticsId2["Validation"] = "validation";
+  return AnalyticsId2;
+})(AnalyticsId || {});
+var KeyboardEventKey = /* @__PURE__ */ ((KeyboardEventKey2) => {
+  KeyboardEventKey2["Enter"] = "Enter";
+  KeyboardEventKey2["Escape"] = "Escape";
+  KeyboardEventKey2["ArrowDown"] = "ArrowDown";
+  KeyboardEventKey2["ArrowUp"] = "ArrowUp";
+  KeyboardEventKey2["ArrowRight"] = "ArrowRight";
+  KeyboardEventKey2["ArrowLeft"] = "ArrowLeft";
+  KeyboardEventKey2["Home"] = "Home";
+  KeyboardEventKey2["End"] = "End";
+  KeyboardEventKey2["Space"] = " ";
+  KeyboardEventKey2["Tab"] = "Tab";
+  return KeyboardEventKey2;
+})(KeyboardEventKey || {});
 export {
-  u as AVERAGE_CHARACTER_WIDTH_PX,
-  t as AnalyticsId,
-  p as FormOnColor,
-  a as FormSize,
-  e as IconSize,
-  g as KeyboardEventKey,
-  o as ZIndex
+  AVERAGE_CHARACTER_WIDTH_PX,
+  AnalyticsId,
+  FormOnColor,
+  FormSize,
+  IconSize,
+  KeyboardEventKey,
+  ZIndex
 };
 //# sourceMappingURL=constants.js.map