@helsenorge/designsystem-react 7.3.0 → 7.4.0

package/components/PopMenu/PopMenu.js

@@ -1,89 +1,89 @@
-import o, { useRef as a, useState as A } from "react";
-import p from "classnames";
-import { IconSize as k, AnalyticsId as M } from "../../constants.js";
-import { useBreakpoint as P } from "../../hooks/useBreakpoint.js";
-import { useHover as T } from "../../hooks/useHover.js";
-import { useOutsideEvent as $ } from "../../hooks/useOutsideEvent.js";
-import { getColor as x } from "../../theme/currys/color.js";
-import { breakpoints as D } from "../../theme/grid.js";
-import { isComponent as v } from "../../utils/component.js";
-import G from "../Close/Close.js";
-import { Icon as W } from "../Icon/Icon.js";
-import X from "../Icons/VerticalDots.js";
-import I from "../LinkList/LinkList.js";
-import j from "../PopOver/PopOver.js";
-import r from "../PopMenu/styles.module.scss";
-var q = /* @__PURE__ */ ((n) => (n.onWhite = "on-white", n.onGray = "on-gray", n.onBlueberry = "on-blueberry", n))(q || {});
-const F = (n) => {
-  const m = a(null), i = a(null), c = a(null), [s, l] = A(!1), {
-    children: u,
-    popOverClassName: B,
+import e, { useRef as p, useState as G } from "react";
+import u from "classnames";
+import { IconSize as m, AnalyticsId as W } from "../../constants.js";
+import { useBreakpoint as j } from "../../hooks/useBreakpoint.js";
+import { useHover as q } from "../../hooks/useHover.js";
+import { useOutsideEvent as F } from "../../hooks/useOutsideEvent.js";
+import { getColor as E } from "../../theme/currys/color.js";
+import { breakpoints as J } from "../../theme/grid.js";
+import { isComponent as y } from "../../utils/component.js";
+import { Icon as f } from "../Icon/Icon.js";
+import K from "../Icons/VerticalDots.js";
+import Q from "../Icons/X.js";
+import U from "../LazyIcon/LazyIcon.js";
+import h from "../LinkList/LinkList.js";
+import V from "../PopOver/PopOver.js";
+import l from "../PopMenu/styles.module.scss";
+var Y = /* @__PURE__ */ ((o) => (o.onWhite = "on-white", o.onGray = "on-gray", o.onBlueberry = "on-blueberry", o))(Y || {}), Z = /* @__PURE__ */ ((o) => (o.right = "right", o.left = "left", o))(Z || {});
+const ee = (o) => {
+  const d = p(null), v = p(null), B = p(null), b = p(null), [r, c] = G(!1), {
+    children: g,
+    popOverClassName: O,
     popMenuClassName: N,
-    openButtonTestId: y,
-    closeButtonTestId: E,
-    popOverTestId: O,
-    popMenuVariant: f = "on-white",
-    openButtonAriaLabel: h,
-    closeButtonAriaLabel: L
-  } = n, d = p(r["pop-menu-button"], {
-    [r[`pop-menu-button--${f}`]]: f
-  }), b = P() < D.md;
-  $(c, () => l(!s));
-  const { isHovered: R } = T(i), S = b ? k.XSmall : k.Small, _ = (e) => {
-    l(!1), e && e();
-  }, g = () => {
-    if (v(u, I))
-      return /* @__PURE__ */ o.createElement(
-        j,
+    openButtonTestId: z,
+    closeButtonTestId: H,
+    popOverTestId: R,
+    popMenuVariant: C = "on-white",
+    openButtonAriaLabel: S,
+    closeButtonAriaLabel: _,
+    svgIcon: n,
+    labelText: a,
+    labelTextPosition: I = "right"
+    /* right */
+  } = o, L = u(l["pop-menu-button"], {
+    [l[`pop-menu-button--${C}`]]: C
+  }), T = j() < J.md;
+  F(b, () => {
+    c(!1);
+  });
+  const { isHovered: i } = q(d), k = T ? m.XSmall : m.Small, w = (t) => {
+    c(!1), t && t();
+  }, x = () => {
+    if (y(g, h))
+      return /* @__PURE__ */ e.createElement(
+        V,
         {
-          testId: O,
-          className: p(r["pop-menu__pop-over"], B),
-          arrowClassName: r["pop-menu__pop-over-arrow"],
-          controllerRef: m,
-          popOverRef: c
+          testId: R,
+          className: u(l["pop-menu__pop-over"], O),
+          arrowClassName: l["pop-menu__pop-over-arrow"],
+          controllerRef: v,
+          popOverRef: B
         },
-        o.Children.map(
-          u,
-          (e) => o.cloneElement(e, {
-            children: o.Children.map(
-              e.props.children,
-              (t) => v(t, I.Link) ? o.cloneElement(t, {
-                onClick: (z) => _(() => t.props.onClick && t.props.onClick(z))
-              }) : t
+        e.Children.map(
+          g,
+          (t) => e.cloneElement(t, {
+            children: e.Children.map(
+              t.props.children,
+              (s) => y(s, h.Link) ? e.cloneElement(s, {
+                onClick: (D) => w(() => s.props.onClick && s.props.onClick(D))
+              }) : s
             )
           })
         )
       );
-  }, C = (e, t) => {
-    t && t.stopPropagation(), l(e);
-  }, w = /* @__PURE__ */ o.createElement(
+  }, X = (t) => {
+    t && t.stopPropagation(), c(!r);
+  }, A = n && typeof n == "string" ? /* @__PURE__ */ e.createElement(U, { iconName: n, size: m.XSmall, isHovered: i }) : n && /* @__PURE__ */ e.createElement(f, { svgIcon: n, size: m.XSmall, isHovered: i }), M = n ? A : /* @__PURE__ */ e.createElement(f, { svgIcon: n ?? K, color: E("black"), size: k, isHovered: i }), P = /* @__PURE__ */ e.createElement(f, { svgIcon: Q, color: E("black"), size: k, isHovered: i }), $ = /* @__PURE__ */ e.createElement(
     "button",
     {
-      ref: i,
-      "data-testid": y,
-      className: d,
-      "aria-label": h || "Se mer",
-      onClick: (e) => C(!0, e),
+      ref: d,
+      "data-testid": r ? H : z,
+      className: L,
+      "aria-label": r ? _ : S,
+      "aria-expanded": r,
+      onClick: X,
       type: "button"
     },
-    /* @__PURE__ */ o.createElement(W, { svgIcon: X, className: "test", color: x("black"), size: S, isHovered: R })
-  ), H = /* @__PURE__ */ o.createElement(
-    G,
-    {
-      ariaLabel: L,
-      color: "black",
-      className: d,
-      testId: E,
-      ref: m,
-      onClick: (e) => C(!1, e),
-      small: b
-    }
+    a && I == "left" && /* @__PURE__ */ e.createElement("span", null, a),
+    /* @__PURE__ */ e.createElement("div", { ref: v }, r ? P : M),
+    a && I == "right" && /* @__PURE__ */ e.createElement("span", null, a)
   );
-  return /* @__PURE__ */ o.createElement("div", { className: p(r["pop-menu-button"], N), "data-analyticsid": M.PopMenu }, s ? H : w, s && g());
-}, me = F;
+  return /* @__PURE__ */ e.createElement("div", { ref: b, className: u(l["pop-menu-button"], N), "data-analyticsid": W.PopMenu }, $, r && x());
+}, Ce = ee;
 export {
-  F as PopMenu,
-  q as PopMenuVariant,
-  me as default
+  ee as PopMenu,
+  Z as PopMenuLabelPosition,
+  Y as PopMenuVariant,
+  Ce as default
 };
 //# sourceMappingURL=PopMenu.js.map

package/components/PopMenu/PopMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const closeRef = useRef<HTMLButtonElement>(null);\n  const openRef = useRef<HTMLButtonElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n  useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n  const { isHovered: openButtonIsHovered } = useHover(openRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={closeRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(isOpen);\n  };\n\n  const openButton = (\n    <button\n      ref={openRef}\n      data-testid={openButtonTestId}\n      className={buttonClasses}\n      aria-label={openButtonAriaLabel || 'Se mer'}\n      onClick={(e): void => handleOnClick(true, e)}\n      type=\"button\"\n    >\n      <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n    </button>\n  );\n\n  const closeButton = (\n    <Close\n      ariaLabel={closeButtonAriaLabel}\n      color=\"black\"\n      className={buttonClasses}\n      testId={closeButtonTestId}\n      ref={closeRef}\n      onClick={(e): void => handleOnClick(false, e)}\n      small={mobile}\n    />\n  );\n\n  return (\n    <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {!isOpen ? openButton : closeButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"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"}
+{"version":3,"file":"PopMenu.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const breakpoint = useBreakpoint();\n  const mobile = breakpoint < breakpoints.md;\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = () => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","PopMenu","props","triggerButtonRef","useRef","iconRef","popOverRef","outerRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","svgIcon","labelText","labelTextPosition","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","triggerButtonIsHovered","useHover","mobileIconSize","IconSize","handleClick","cb","renderChildren","isComponent","LinkList","React","PopOver","child","event","toggleOpenOnClick","e","iconComponent","LazyIcon","Icon","openIcon","VerticalDots","getColor","closeIcon","X","triggerButton","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;;AAqBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAgCC,MAAAC,KAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAmBC,EAA0B,IAAI,GACjDC,IAAUD,EAAuB,IAAI,GACrCE,IAAaF,EAAuB,IAAI,GACxCG,IAAWH,EAAuB,IAAI,GACtC,CAACI,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC;AAAA,IACJ,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,qBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA;AAAA,EAClB,IAAApB,GACEqB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBR,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKS,IADaC,MACSC,EAAY;AAExC,EAAAC,EAAgBtB,GAAU,MAAM;AAC9B,IAAAE,EAAU,EAAK;AAAA,EAAA,CAChB;AAED,QAAM,EAAE,WAAWqB,EAAuB,IAAIC,EAAS5B,CAAgB,GACjE6B,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAc,CAACC,MAA0B;AAC7C,IAAA1B,EAAU,EAAK,GACf0B,KAAMA,EAAG;AAAA,EAAA,GAGLC,IAAiB,MAAM;AACvB,QAAAC,EAA2B1B,GAAU2B,CAAQ;AAE7C,aAAAC,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQxB;AAAA,UACR,WAAWQ,EAAWC,EAAO,oBAAoB,GAAGb,CAAgB;AAAA,UACpE,gBAAgBa,EAAO,0BAA0B;AAAA,UACjD,eAAepB;AAAA,UACf,YAAAC;AAAA,QAAA;AAAA,QAECiC,EAAM,SAAS;AAAA,UAAI5B;AAAA,UAAU,CAAA8B,MAC5BF,EAAM,aAAaE,GAAO;AAAA,YACxB,UAAUF,EAAM,SAAS;AAAA,cAAIE,EAAM,MAAM;AAAA,cAAU,CAAAA,MACjDJ,EAAuBI,GAAOH,EAAS,IAAI,IACvCC,EAAM,aAAaE,GAAO;AAAA,gBACxB,SAAS,CAACC,MACRR,EAAY,MAAMO,EAAM,MAAM,WAAWA,EAAM,MAAM,QAAQC,CAAK,CAAC;AAAA,cACtE,CAAA,IACDD;AAAAA,YACN;AAAA,UAAA,CACD;AAAA,QACH;AAAA,MAAA;AAAA,EAGN,GAGIE,IAAoB,CAACC,MAAwD;AACjF,IAAAA,KAAKA,EAAE,mBACPnC,EAAU,CAACD,CAAM;AAAA,EAAA,GAGbqC,IACJzB,KAAW,OAAOA,KAAY,WAC3BmB,gBAAAA,EAAA,cAAAO,GAAA,EAAS,UAAU1B,GAAS,MAAMa,EAAS,QAAQ,WAAWH,EAAwB,CAAA,IAEvFV,KAAYmB,gBAAAA,EAAA,cAAAQ,GAAA,EAAK,SAAA3B,GAAkB,MAAMa,EAAS,QAAQ,WAAWH,EAAwB,CAAA,GAG3FkB,IAAW5B,IACfyB,IAEAN,gBAAAA,EAAA,cAACQ,KAAK,SAAS3B,KAAW6B,GAAc,OAAOC,EAAS,OAAO,GAAG,MAAMlB,GAAgB,WAAWF,EAAwB,CAAA,GAGvHqB,IAAYZ,gBAAAA,EAAA,cAACQ,GAAK,EAAA,SAASK,GAAG,OAAOF,EAAS,OAAO,GAAG,MAAMlB,GAAgB,WAAWF,EAAwB,CAAA,GAEjHuB,IACJd,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKpC;AAAA,MACL,eAAaK,IAASO,IAAoBD;AAAA,MAC1C,WAAWS;AAAA,MACX,cAAYf,IAASW,IAAuBD;AAAA,MAC5C,iBAAeV;AAAA,MACf,SAASmC;AAAA,MACT,MAAK;AAAA,IAAA;AAAA,IAEJtB,KAAaC,KAAqB,UAA6BiB,gBAAAA,EAAA,cAAC,cAAMlB,CAAU;AAAA,oCAC/E,OAAI,EAAA,KAAKhB,KAAUG,IAAS2C,IAAYH,CAAS;AAAA,IAClD3B,KAAaC,KAAqB,WAA8BiB,gBAAAA,EAAA,cAAC,cAAMlB,CAAU;AAAA,EAAA;AAItF,yCACG,OAAI,EAAA,KAAKd,GAAU,WAAWiB,EAAWC,EAAO,iBAAiB,GAAGZ,CAAgB,GAAG,oBAAkByC,EAAY,WACnHD,GACA7C,KAAU4B,GACb;AAEJ,GAEAmB,KAAetD;"}

package/components/PopMenu/PopMenu.stories.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StoryObj } from '@storybook/react';
-import { PopMenuVariant } from './PopMenu';
+import { PopMenuLabelPosition, PopMenuVariant } from './PopMenu';
 declare const meta: {
     title: string;
     component: React.FC<import("./PopMenu").PopMenuProps>;
@@ -24,10 +24,16 @@ declare const meta: {
             control: string;
             options: typeof PopMenuVariant;
         };
+        labelTextPosition: {
+            control: string;
+            options: typeof PopMenuLabelPosition;
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const CustomIcon: Story;
+export declare const WithLabel: Story;
 export declare const HorizontalScroll: Story;
 export declare const CenteredOverflow: Story;

package/components/PopMenu/index.js

@@ -1,7 +1,8 @@
 import e from "./PopMenu.js";
-import { PopMenu as t, PopMenuVariant as a } from "./PopMenu.js";
+import { PopMenu as r, PopMenuLabelPosition as t, PopMenuVariant as a } from "./PopMenu.js";
 export {
-  t as PopMenu,
+  r as PopMenu,
+  t as PopMenuLabelPosition,
   a as PopMenuVariant,
   e as default
 };

package/components/PopMenu/styles.module.scss

@@ -11,7 +11,7 @@
   justify-content: center;
   align-items: center;
   height: 3rem;
-  width: 3rem;
+  min-width: 3rem;
 
   &:focus {
     border: 0.1875rem solid $black;

package/components/PopOver/PopOver.js

@@ -1,5 +1,5 @@
-import t, { useRef as v, useState as A, useEffect as B } from "react";
-import b from "classnames";
+import r, { useRef as w, useState as A, useEffect as B } from "react";
+import y from "classnames";
 import { getVerticalPosition as F, getBubbleStyle as L, getArrowStyle as T } from "./utils.js";
 import { ZIndex as V, AnalyticsId as Z } from "../../constants.js";
 import { useInterval as $ } from "../../hooks/useInterval.js";
@@ -7,51 +7,51 @@ import { useIsVisible as j } from "../../hooks/useIsVisible.js";
 import { useLayoutEvent as k } from "../../hooks/useLayoutEvent.js";
 import { useSize as q } from "../../hooks/useSize.js";
 import { mergeRefs as D } from "../../utils/refs.js";
-import r from "../PopOver/styles.module.scss";
-var G = /* @__PURE__ */ ((e) => (e.positionautomatic = "positionautomatic", e.positionbelow = "positionbelow", e.positionabove = "positionabove", e))(G || {});
-const d = t.forwardRef((e, w) => {
+import t from "../PopOver/styles.module.scss";
+var G = /* @__PURE__ */ ((o) => (o.positionautomatic = "positionautomatic", o.positionbelow = "positionbelow", o.positionabove = "positionabove", o))(G || {});
+const S = r.forwardRef((o, _) => {
   const {
-    id: y,
-    children: S,
+    id: R,
+    children: g,
     controllerRef: n,
-    popOverRef: R,
-    show: _ = !1,
-    className: g = "",
-    variant: p = "positionautomatic",
-    role: c,
-    testId: z,
-    arrowClassName: C,
-    zIndex: m = V.PopOver
-  } = e, u = R || v(null), I = v(null), s = q(u), [o, N] = A(), E = j(n, 0), l = () => {
-    var f;
-    N((f = n.current) == null ? void 0 : f.getBoundingClientRect());
+    popOverRef: z,
+    show: p = !1,
+    className: C = "",
+    variant: c = "positionautomatic",
+    role: m,
+    testId: I,
+    arrowClassName: N,
+    zIndex: u = V.PopOver
+  } = o, f = z || w(null), E = w(null), s = q(f), [e, O] = A(), v = j(n, 0), l = () => {
+    var d;
+    O((d = n.current) == null ? void 0 : d.getBoundingClientRect());
   };
   $(l, 500), k(l, ["scroll", "resize"], 10), B(() => {
     l();
   }, []);
-  const O = c === "tooltip", P = b(r.popover, { [r["popover--visible"]]: O ? _ : E }, g), i = o && s && F(o, s, p), x = b(r.popover__arrow, C, {
-    [r["popover__arrow--over"]]: i === "positionbelow",
-    [r["popover__arrow--under"]]: i === "positionabove"
-    /* positionabove */
-  }), a = o && s && L(o, s, p), h = a && o && i && T(a, o, i);
-  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  const b = m === "tooltip", P = y(t.popover, { [t["popover--visible"]]: b ? p : v }, C), i = e && s && F(e, s, c), x = y(t.popover__arrow, N, {
+    [t["popover__arrow--over"]]: i === "positionbelow",
+    [t["popover__arrow--under"]]: i === "positionabove",
+    [t["popover__arrow--visible"]]: b ? p : v
+  }), a = e && s && L(e, s, c), h = a && e && i && T(a, e, i);
+  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
     "div",
     {
-      id: y,
-      ref: D([w, u]),
+      id: R,
+      ref: D([_, f]),
       className: P,
-      style: { ...a, zIndex: m },
-      "data-testid": z,
+      style: { ...a, zIndex: u },
+      "data-testid": I,
       "data-analyticsid": Z.PopOver,
-      role: c
+      role: m
     },
-    S
-  ), /* @__PURE__ */ t.createElement("div", { ref: I, className: x, style: { ...h, zIndex: m } }));
+    g
+  ), /* @__PURE__ */ r.createElement("div", { ref: E, className: x, style: { ...h, zIndex: u } }));
 });
-d.displayName = "PopOver";
-const oe = d;
+S.displayName = "PopOver";
+const eo = S;
 export {
   G as PopOverVariant,
-  oe as default
+  eo as default
 };
 //# sourceMappingURL=PopOver.js.map

package/components/PopOver/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,GAEKG,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;AAEtB,MAAA4C,KAAe5C;"}
+{"version":3,"file":"PopOver.js","sources":["../../../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant","PopOver","React","props","ref","id","children","controllerRef","popOverRef","show","className","variant","role","testId","arrowClassName","zIndex","ZIndex","bubbleRef","useRef","arrowRef","bubbleSize","useSize","controllerSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","popOverClasses","classNames","styles","verticalPosition","getVerticalPosition","arrowClasses","bubbleStyle","getBubbleStyle","arrowStyle","getArrowStyle","mergeRefs","AnalyticsId","PopOver$1"],"mappings":";;;;;;;;;;AAcY,IAAAA,sBAAAA,OACVA,EAAA,oBAAoB,qBACpBA,EAAA,gBAAgB,iBAChBA,EAAA,gBAAgB,iBAHNA,IAAAA,KAAA,CAAA,CAAA;AAiCZ,MAAMC,IAAUC,EAAM,WAAyD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAC,IAASC,EAAO;AAAA,EACd,IAAAb,GAEEc,IAAYT,KAAcU,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAanB,GAAe,CAAC,GAEnDoB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAArB,EAAc,YAAd,gBAAAqB,EAAuB,uBAAuB;AAAA,EAAA;AAGlE,EAAAC,EAAYF,GAAsB,GAAG,GACrCG,EAAeH,GAAsB,CAAC,UAAU,QAAQ,GAAG,EAAE,GAE7DI,EAAU,MAAM;AACO,IAAAJ;EACvB,GAAG,CAAE,CAAA;AAEL,QAAMK,IAAYpB,MAAS,WAErBqB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYvB,IAAOgB,KAAuBf,CAAS,GAC/H0B,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYT,CAAO,GAC1G2B,IAAeJ,EAAWC,EAAO,gBAAgBrB,GAAgB;AAAA,IACrE,CAACqB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA,IACxD,CAACD,EAAO,yBAAyB,CAAC,GAAGH,IAAYvB,IAAOgB;AAAA,EAAA,CACzD,GAEKc,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYT,CAAO,GAChG8B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEIlC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKsC,EAAU,CAACvC,GAAKa,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAO,EAAE,GAAGM,GAAa,QAAAxB,EAAO;AAAA,MAChC,eAAaF;AAAA,MACb,oBAAkB+B,EAAY;AAAA,MAC9B,MAAAhC;AAAA,IAAA;AAAA,IAECN;AAAA,EAEH,GAAAJ,gBAAAA,EAAA,cAAC,OAAI,EAAA,KAAKiB,GAAU,WAAWmB,GAAc,OAAO,EAAE,GAAGG,GAAY,QAAA1B,KAAU,CACjF;AAEJ,CAAC;AAEDd,EAAQ,cAAc;AAEtB,MAAA4C,KAAe5C;"}

package/components/PopOver/styles.module.scss

@@ -22,10 +22,6 @@
 
   &--visible {
     visibility: visible;
-
-    & + #{$popover}__arrow {
-      visibility: visible;
-    }
   }
 
   border: getSpacer(4xs) solid $plum600;
@@ -46,6 +42,7 @@
     border-style: solid;
     border-color: transparent;
     z-index: 3;
+    visibility: hidden;
 
     &--over {
       border-width: 0.625rem;
@@ -60,9 +57,9 @@
       filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
       filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
     }
-  }
 
-  & + &__arrow {
-    visibility: hidden;
+    &--visible {
+      visibility: visible;
+    }
   }
 }

package/components/PopOver/styles.module.scss.d.ts

@@ -6,6 +6,7 @@ export type Styles = {
   popover__arrow: string;
   'popover__arrow--over': string;
   'popover__arrow--under': string;
+  'popover__arrow--visible': string;
   'popover--visible': string;
 };
 

package/components/PromoPanel/PromoPanel.stories.d.ts

@@ -15,6 +15,7 @@ declare const meta: {
         title: string;
         children: string;
         href: string;
+        target: "_parent";
         color: "neutral";
         illustration: "Doctor";
     };

package/components/RadioButton/RadioButton.js

@@ -1,13 +1,14 @@
-import p, { useState as D } from "react";
+import p, { useState as q } from "react";
 import l from "classnames";
 import { FormMode as i, FormSize as W, AnalyticsId as $ } from "../../constants.js";
 import { usePseudoClasses as G } from "../../hooks/usePseudoClasses.js";
 import { useUuid as H } from "../../hooks/useUuid.js";
-import { isMutableRefObject as J, mergeRefs as K } from "../../utils/refs.js";
-import { uuid as Q } from "../../utils/uuid.js";
-import { getLabelText as V, renderLabelAsParent as X } from "../Label/Label.js";
+import { getAriaDescribedBy as J } from "../../utils/accessibility.js";
+import { isMutableRefObject as K, mergeRefs as Q } from "../../utils/refs.js";
+import { uuid as V } from "../../utils/uuid.js";
+import { getLabelText as X, renderLabelAsParent as Y } from "../Label/Label.js";
 import e from "../RadioButton/styles.module.scss";
-const ie = (s, o, a, b) => {
+const se = (s, o, a, b) => {
   const n = o === "oninvalid", r = s === b;
   return l({
     [e["radio-button-label__large--on-grey"]]: a && o === "ongrey" && !r,
@@ -22,26 +23,26 @@ const ie = (s, o, a, b) => {
     onChange: n,
     disabled: r,
     label: f,
-    inputId: _ = Q(),
+    inputId: _ = V(),
     mode: d = i.onwhite,
     name: w = _,
-    size: R,
+    size: B,
     errorText: u,
-    error: k = !!u,
-    errorTextId: B,
-    value: N = V(f),
+    error: R = !!u,
+    errorTextId: k,
+    value: N = X(f),
     testId: L,
     required: x,
     labelClassNames: I,
     ...S
-  } = s, g = k || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, t = R === W.large, [j, E] = D(b), { refObject: F, isFocused: c } = G(J(o) ? o : null), z = K([o, F]), C = H(B), A = l(e["radio-button-wrapper"], {
+  } = s, g = R || d === i.oninvalid, y = d === i.ondark, h = d === i.onblueberry, T = d === i.oninvalid, t = B === W.large, [A, E] = q(b), { refObject: F, isFocused: c } = G(K(o) ? o : null), j = Q([o, F]), C = H(k), z = l(e["radio-button-wrapper"], {
     [e["radio-button-wrapper--with-error"]]: u,
     [e["radio-button-wrapper__large"]]: t,
     [e["radio-button-wrapper__large--focused"]]: t && c,
-    [e["radio-button-wrapper__large--selected"]]: t && j && c,
+    [e["radio-button-wrapper__large--selected"]]: t && A && c,
     [e["radio-button-wrapper__large--invalid"]]: t && T && c,
     [e["radio-button-wrapper__large--on-blueberry"]]: t && h && c
-  }), M = l(
+  }), D = l(
     e["radio-button-label"],
     {
       [e["radio-button-label--disabled"]]: r,
@@ -51,7 +52,7 @@ const ie = (s, o, a, b) => {
       [e["radio-button-label__large--disabled"]]: t && r
     },
     I
-  ), O = l(
+  ), M = l(
     e["radio-button"],
     {
       [e["radio-button--on-dark"]]: y,
@@ -63,41 +64,41 @@ const ie = (s, o, a, b) => {
       [e["radio-button__large--invalid"]]: t && g
     },
     a
-  ), P = l(e["radio-button-errors"]), U = (m) => {
+  ), O = l(e["radio-button-errors"]), P = (m) => {
     E(m.target.checked), n && n(m);
-  }, q = () => /* @__PURE__ */ p.createElement(
+  }, U = () => /* @__PURE__ */ p.createElement(
     "input",
     {
       id: _,
       name: w,
-      className: O,
+      className: M,
       type: "radio",
       disabled: r,
       value: N,
-      ref: z,
+      ref: j,
       defaultChecked: b,
-      "aria-describedby": [s["aria-describedby"] || "", C].join(" "),
+      "aria-describedby": J(s, C),
       required: x,
       ...S,
-      onChange: (m) => U(m)
+      onChange: (m) => P(m)
     }
   );
-  return /* @__PURE__ */ p.createElement("div", { "data-testid": L, "data-analyticsid": $.RadioButton, className: A }, u && /* @__PURE__ */ p.createElement("p", { className: P, id: C }, u), X(
+  return /* @__PURE__ */ p.createElement("div", { "data-testid": L, "data-analyticsid": $.RadioButton, className: z }, u && /* @__PURE__ */ p.createElement("p", { className: O, id: C }, u), Y(
     f,
-    q(),
+    U(),
     _,
     d,
-    M,
+    D,
     void 0,
     e["radiobutton-sublabel-wrapper"],
     t
   ));
 });
 v.displayName = "RadioButton";
-const le = v;
+const be = v;
 export {
   v as RadioButton,
-  le as default,
-  ie as getRadioLabelClasses
+  be as default,
+  se as getRadioLabelClasses
 };
 //# sourceMappingURL=RadioButton.js.map

package/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (radioId: string, mode: FormMode, large: boolean, checkedRadioId?: string): string | undefined => {\n  const onCherry = mode === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && mode === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: mode === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onCherry = mode === FormMode.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>(defaultChecked);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    onChange && onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      {...rest}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        radioButtonLabelClasses,\n        undefined,\n        radioButtonStyles['radiobutton-sublabel-wrapper'],\n        isLarge\n      )}\n    </div>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["getRadioLabelClasses","radioId","mode","large","checkedRadioId","onCherry","checked","classNames","radioButtonStyles","RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","labelClassNames","rest","invalid","onDark","onBlueberry","isLarge","FormSize","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","errorTextUuid","useUuid","radioButtonWrapperClasses","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","getAriaDescribedBy","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}