@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/NotificationPanel/index.js

@@ -1,101 +1,112 @@
-import { jsx as i, jsxs as h } from "react/jsx-runtime";
-import C from "react";
-import l from "classnames";
-import { AnalyticsId as j, IconSize as N } from "../../constants.js";
-import { useUuid as F } from "../../hooks/useUuid.js";
-import { getColor as V } from "../../theme/currys/color.js";
-import { getAriaLabelAttributes as $ } from "../../utils/accessibility.js";
-import { N as H } from "../../NotificationBadge.js";
-import { C as M } from "../../Close.js";
-import { E as U } from "../../Expander.js";
-import a from "./styles.module.scss";
-const W = ({ fluid: s, children: c }) => {
-  if (s) {
-    const e = l(a["fluid-wrapper"]);
-    return /* @__PURE__ */ i("div", { className: e, children: c });
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getColor } from "../../theme/currys/color.js";
+import { getAriaLabelAttributes } from "../../utils/accessibility.js";
+import { N as NotificationBadge } from "../../NotificationBadge.js";
+import { C as Close } from "../../Close.js";
+import { E as Expander } from "../../Expander.js";
+import styles from "./styles.module.scss";
+const FluidWrapper = ({ fluid, children }) => {
+  if (fluid) {
+    const fluidClasses = classNames(styles["fluid-wrapper"]);
+    return /* @__PURE__ */ jsx("div", { className: fluidClasses, children });
   }
-  return c;
-}, na = C.forwardRef((s, c) => {
+  return children;
+};
+const NotificationPanel = React.forwardRef((props, ref) => {
   const {
-    children: e,
-    variant: r = "info",
-    dismissable: p = !1,
-    onClick: v,
-    expanderChildren: o,
-    expanderButtonText: f,
-    expanderButtonClosedText: m,
-    expanderOpenFromStart: I = !1,
-    compactVariant: n,
-    label: t,
-    labelHtmlMarkup: S = "h1",
-    fluid: g = !1,
-    size: u,
-    className: w,
-    labelId: A,
-    role: B,
-    testId: E
-  } = s, d = F(A), L = () => {
-    const b = n === "outline", z = l(a["notification-panel__content"]), O = l(a["notification-panel__label"], {
-      [a["notification-panel__label--no-content"]]: !e && !o,
-      [a["notification-panel__label--compact"]]: !!n,
-      [a["notification-panel__label--outline"]]: b
-    }), P = l(a["notification-panel__children"], {
-      [a["notification-panel__children--with-label"]]: t,
-      [a["notification-panel__children--expander-no-label"]]: o && !t,
-      [a["notification-panel__children--outline"]]: b
-    }), R = S, [x, T] = C.useState(I);
-    return /* @__PURE__ */ h("div", { className: z, id: t ? void 0 : d, children: [
-      t && /* @__PURE__ */ i(R, { className: O, id: d, children: t }),
-      e && /* @__PURE__ */ i("div", { className: P, children: e }),
-      o && f && m && !n && /* @__PURE__ */ i(
-        U,
+    children,
+    variant = "info",
+    dismissable = false,
+    onClick,
+    expanderChildren,
+    expanderButtonText,
+    expanderButtonClosedText,
+    expanderOpenFromStart = false,
+    compactVariant,
+    label,
+    labelHtmlMarkup = "h1",
+    fluid = false,
+    size,
+    className,
+    labelId,
+    role,
+    testId
+  } = props;
+  const uuid = useUuid(labelId);
+  const renderContent = () => {
+    const outlineVariant = compactVariant === "outline";
+    const contentClasses = classNames(styles["notification-panel__content"]);
+    const labelClasses = classNames(styles["notification-panel__label"], {
+      [styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
+      [styles["notification-panel__label--compact"]]: !!compactVariant,
+      [styles["notification-panel__label--outline"]]: outlineVariant
+    });
+    const childrenClasses = classNames(styles["notification-panel__children"], {
+      [styles["notification-panel__children--with-label"]]: label,
+      [styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
+      [styles["notification-panel__children--outline"]]: outlineVariant
+    });
+    const CustomTag = labelHtmlMarkup;
+    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);
+    return /* @__PURE__ */ jsxs("div", { className: contentClasses, id: !label ? uuid : void 0, children: [
+      label && /* @__PURE__ */ jsx(CustomTag, { className: labelClasses, id: uuid, children: label }),
+      children && /* @__PURE__ */ jsx("div", { className: childrenClasses, children }),
+      expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && /* @__PURE__ */ jsx(
+        Expander,
         {
-          title: x ? f : m,
-          onExpand: T,
-          expanded: x,
+          title: expanderOpen ? expanderButtonText : expanderButtonClosedText,
+          onExpand: setExpanderOpen,
+          expanded: expanderOpen,
           testId: "expand",
-          children: o
+          children: expanderChildren
         }
       )
     ] });
-  }, k = l(
-    a["notification-panel"],
-    a[`notification-panel--${r}`],
-    u && a[`notification-panel--${u}`],
+  };
+  const notificationPanelClasses = classNames(
+    styles["notification-panel"],
+    styles[`notification-panel--${variant}`],
+    size && styles[`notification-panel--${size}`],
     {
-      [a["notification-panel--compact"]]: !!n,
-      [a["notification-panel--compact--basic"]]: n === "basic",
-      [a["notification-panel--compact--outline"]]: n === "outline",
-      [a["notification-panel--with-content"]]: o || t && e,
-      [a["notification-panel--dismissable"]]: p
+      [styles["notification-panel--compact"]]: !!compactVariant,
+      [styles["notification-panel--compact--basic"]]: compactVariant === "basic",
+      [styles["notification-panel--compact--outline"]]: compactVariant === "outline",
+      [styles["notification-panel--with-content"]]: expanderChildren || label && children,
+      [styles["notification-panel--dismissable"]]: dismissable
     },
-    w
-  ), _ = B || r === "error" && "alert" || void 0, y = _ ? $({ label: t, id: d }) : void 0;
-  return /* @__PURE__ */ i(W, { fluid: g, children: /* @__PURE__ */ h(
+    className
+  );
+  const ariaRole = role || variant === "error" && "alert" || void 0;
+  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : void 0;
+  return /* @__PURE__ */ jsx(FluidWrapper, { fluid, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: c,
-      role: _,
-      "data-testid": E,
-      "data-analyticsid": j.NotificationPanel,
-      className: k,
-      ...y,
+      ref,
+      role: ariaRole,
+      "data-testid": testId,
+      "data-analyticsid": AnalyticsId.NotificationPanel,
+      className: notificationPanelClasses,
+      ...ariaLabelAttributes,
       children: [
-        /* @__PURE__ */ i(
-          H,
+        /* @__PURE__ */ jsx(
+          NotificationBadge,
           {
-            variant: r,
-            size: n ? N.XSmall : N.Small,
-            className: a["notification-panel__icon"]
+            variant,
+            size: compactVariant ? IconSize.XSmall : IconSize.Small,
+            className: styles["notification-panel__icon"]
           }
         ),
-        p && /* @__PURE__ */ i("span", { className: a["notification-panel__close"], children: /* @__PURE__ */ i(M, { ariaLabel: s.ariaLabelCloseBtn, onClick: v, color: V("black") }) }),
-        L()
+        dismissable && /* @__PURE__ */ jsx("span", { className: styles["notification-panel__close"], children: /* @__PURE__ */ jsx(Close, { ariaLabel: props.ariaLabelCloseBtn, onClick, color: getColor("black") }) }),
+        renderContent()
       ]
     }
   ) });
 });
 export {
-  na as default
+  NotificationPanel as default
 };
 //# sourceMappingURL=index.js.map

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":["FluidWrapper","fluid","children","fluidClasses","classNames","styles","jsx","NotificationPanel","React","props","ref","variant","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","expanderOpenFromStart","compactVariant","label","labelHtmlMarkup","size","className","labelId","role","testId","uuid","useUuid","renderContent","outlineVariant","contentClasses","labelClasses","childrenClasses","CustomTag","expanderOpen","setExpanderOpen","jsxs","Expander","notificationPanelClasses","ariaRole","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","NotificationBadge","IconSize","Close","getColor"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds inner child elements. */\n  children?: React.ReactNode;\n  /** Adds inner expander elements. */\n  expanderChildren?: React.ReactNode;\n  /** Text for expanderButton. */\n  expanderButtonText?: string;\n  /** Text for expanderButton when closed. */\n  expanderButtonClosedText?: string;\n  /** Makes expander be open from start. */\n  expanderOpenFromStart?: boolean;\n  /** Changes the visual representation of the notification panel. */\n  variant?: NotificationPanelVariants;\n  /** Makes the panel more compact. Available in basic and outline. */\n  compactVariant?: NotificationCompactVariants;\n  /** Sets a fixed size for the content container. */\n  size?: NotificationPanelSizes;\n  /** Used in combination with dismissiable property to close the notification panel. */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Toggles the close button in the top right corner. */\n  dismissable?: boolean;\n  /** Enables a fluid outer container that spans the entire width of parent. */\n  fluid?: boolean;\n  /** Sets a label for the notification panel. */\n  label?: string;\n  /** Changes the underlying element of the label. */\n  labelHtmlMarkup?: LabelTags;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Custom id for the label */\n  labelId?: string;\n  /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n  role?: 'region' | 'alert';\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper']);\n\n    return <div className={fluidClasses}>{children}</div>;\n  }\n  return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n  const {\n    children,\n    variant = 'info',\n    dismissable = false,\n    onClick,\n    expanderChildren,\n    expanderButtonText,\n    expanderButtonClosedText,\n    expanderOpenFromStart = false,\n    compactVariant,\n    label,\n    labelHtmlMarkup = 'h1',\n    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const renderContent = (): JSX.Element => {\n    const outlineVariant = compactVariant === 'outline';\n    const contentClasses = classNames(styles['notification-panel__content']);\n    const labelClasses = classNames(styles['notification-panel__label'], {\n      [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n      [styles['notification-panel__label--compact']]: !!compactVariant,\n      [styles['notification-panel__label--outline']]: outlineVariant,\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__children--with-label']]: label,\n      [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n      [styles['notification-panel__children--outline']]: outlineVariant,\n    });\n    const CustomTag = labelHtmlMarkup;\n\n    const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <CustomTag className={labelClasses} id={uuid}>\n            {label}\n          </CustomTag>\n        )}\n        {children && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <Expander\n            title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n            onExpand={setExpanderOpen}\n            expanded={expanderOpen}\n            testId=\"expand\"\n          >\n            {expanderChildren}\n          </Expander>\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    size && styles[`notification-panel--${size}`],\n    {\n      [styles['notification-panel--compact']]: !!compactVariant,\n      [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n      [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n      [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n      [styles['notification-panel--dismissable']]: dismissable,\n    },\n    className\n  );\n\n  const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <NotificationBadge\n          variant={variant}\n          size={compactVariant ? IconSize.XSmall : IconSize.Small}\n          className={styles['notification-panel__icon']}\n        />\n        {dismissable && (\n          <span className={styles['notification-panel__close']}>\n            <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color={getColor('black')} />\n          </span>\n        )}\n        {renderContent()}\n      </div>\n    </FluidWrapper>\n  );\n});\n\nexport default NotificationPanel;\n"],"names":[],"mappings":"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"}

package/components/Panel/Panel.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { AnchorTarget } from '../../constants';
 import { ButtonProps, ButtonTags } from '../Button';
 import { TitleTags } from '../Title';

package/components/Panel/index.d.ts

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

package/components/Panel/index.js

@@ -1,9 +1,9 @@
-import { P as t } from "../../Panel.js";
-import { c as r, a as s, b as l } from "../../Panel.js";
+import { P as Panel } from "../../Panel.js";
+import { c, a, b } from "../../Panel.js";
 export {
-  r as PanelLayout,
-  s as PanelStatus,
-  l as PanelVariant,
-  t as default
+  c as PanelLayout,
+  a as PanelStatus,
+  b as PanelVariant,
+  Panel as default
 };
 //# sourceMappingURL=index.js.map

package/components/PanelList/PanelList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { PanelVariant } from '../Panel';
 export interface PanelListProps {
     /** Panels to render inside the PanelList */

package/components/PanelList/index.d.ts

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

package/components/PanelList/index.js

@@ -1,18 +1,20 @@
-import { jsx as p } from "react/jsx-runtime";
-import e from "react";
-import c from "classnames";
-import { AnalyticsId as f } from "../../constants.js";
-import { b as o, P } from "../../Panel.js";
-import y from "./styles.module.scss";
-const u = (t) => e.isValidElement(t) && t.type === P, C = e.forwardRef(function(s, i) {
-  const { testId: l, children: m, variant: n = o.fill } = s, d = (a, r) => e.cloneElement(a, {
-    variant: n,
-    noTopBorder: n === o.line && !r,
-    className: c(a.props.className, n !== o.line && y["panel-list__panel"])
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "../../constants.js";
+import { b as PanelVariant, P as Panel } from "../../Panel.js";
+import styles from "./styles.module.scss";
+const isPanelComponent = (element) => React.isValidElement(element) && element.type === Panel;
+const PanelList = React.forwardRef(function BadgeForwardedRef(props, ref) {
+  const { testId, children, variant = PanelVariant.fill } = props;
+  const renderPanel = (panel, firstChild) => React.cloneElement(panel, {
+    variant,
+    noTopBorder: variant === PanelVariant.line && !firstChild,
+    className: classNames(panel.props.className, variant !== PanelVariant.line && styles["panel-list__panel"])
   });
-  return /* @__PURE__ */ p("div", { ref: i, "data-testid": l, "data-analyticsid": f.PanelList, children: e.Children.map(m, (a, r) => u(a) ? d(a, r === 0) : a) });
+  return /* @__PURE__ */ jsx("div", { ref, "data-testid": testId, "data-analyticsid": AnalyticsId.PanelList, children: React.Children.map(children, (child, index) => isPanelComponent(child) ? renderPanel(child, index === 0) : child) });
 });
 export {
-  C as default
+  PanelList as default
 };
 //# sourceMappingURL=index.js.map

package/components/PanelList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":["isPanelComponent","element","React","Panel","PanelList","props","ref","testId","children","variant","PanelVariant","renderPanel","panel","firstChild","classNames","styles","jsx","AnalyticsId","child","index"],"mappings":";;;;;;AAkBA,MAAMA,IAAmB,CAACC,MACxBC,EAAM,eAA2BD,CAAO,KAAMA,EAA+B,SAASE,GAElFC,IAAYF,EAAM,WAAW,SAA2BG,GAAuBC,GAAyC;AAC5H,QAAM,EAAE,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,IAAUC,EAAa,KAAS,IAAAL,GAEpDM,IAAc,CAACC,GAAuCC,MAC1DX,EAAM,aAAaU,GAAO;AAAA,IACxB,SAAAH;AAAA,IACA,aAAaA,MAAYC,EAAa,QAAQ,CAACG;AAAA,IAC/C,WAAWC,EAAWF,EAAM,MAAM,WAAWH,MAAYC,EAAa,QAAQK,EAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAA,gBAAAC,EAAC,OAAI,EAAA,KAAAV,GAAU,eAAaC,GAAQ,oBAAkBU,EAAY,WAC/D,UAAMf,EAAA,SAAS,IAAIM,GAAU,CAACU,GAAOC,MAAWnB,EAAiBkB,CAAK,IAAIP,EAAYO,GAAOC,MAAU,CAAC,IAAID,CAAM,EACrH,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PanelList/PanelList.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport Panel, { PanelProps, PanelVariant } from '../Panel';\n\nimport styles from './styles.module.scss';\n\nexport interface PanelListProps {\n  /** Panels to render inside the PanelList */\n  children?: React.ReactNode;\n  /** Changes the visual representation of the panel. Default: fill */\n  variant?: keyof typeof PanelVariant;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst isPanelComponent = (element: {} | null | undefined): element is React.ReactElement<PanelProps> =>\n  React.isValidElement<PanelProps>(element) && (element as React.ReactElement).type === Panel;\n\nconst PanelList = React.forwardRef(function BadgeForwardedRef(props: PanelListProps, ref: React.ForwardedRef<HTMLDivElement>) {\n  const { testId, children, variant = PanelVariant.fill } = props;\n\n  const renderPanel = (panel: React.ReactElement<PanelProps>, firstChild: boolean) =>\n    React.cloneElement(panel, {\n      variant: variant,\n      noTopBorder: variant === PanelVariant.line && !firstChild,\n      className: classNames(panel.props.className, variant !== PanelVariant.line && styles['panel-list__panel']),\n    });\n\n  return (\n    <div ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.PanelList}>\n      {React.Children.map(children, (child, index) => (isPanelComponent(child) ? renderPanel(child, index === 0) : child))}\n    </div>\n  );\n});\n\nexport default PanelList;\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,mBAAmB,CAAC,YACxB,MAAM,eAA2B,OAAO,KAAM,QAA+B,SAAS;AAExF,MAAM,YAAY,MAAM,WAAW,SAAS,kBAAkB,OAAuB,KAAyC;AAC5H,QAAM,EAAE,QAAQ,UAAU,UAAU,aAAa,SAAS;AAE1D,QAAM,cAAc,CAAC,OAAuC,eAC1D,MAAM,aAAa,OAAO;AAAA,IACxB;AAAA,IACA,aAAa,YAAY,aAAa,QAAQ,CAAC;AAAA,IAC/C,WAAW,WAAW,MAAM,MAAM,WAAW,YAAY,aAAa,QAAQ,OAAO,mBAAmB,CAAC;AAAA,EAAA,CAC1G;AAGD,SAAA,oBAAC,OAAI,EAAA,KAAU,eAAa,QAAQ,oBAAkB,YAAY,WAC/D,UAAM,MAAA,SAAS,IAAI,UAAU,CAAC,OAAO,UAAW,iBAAiB,KAAK,IAAI,YAAY,OAAO,UAAU,CAAC,IAAI,KAAM,EACrH,CAAA;AAEJ,CAAC;"}

package/components/PopMenu/PopMenu.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
 import { LinkListProps } from '../LinkList';

package/components/PopMenu/PopMenu.test.d.ts

@@ -1 +0,0 @@
-import '../../__mocks__/useOutsideEvent';

package/components/PopMenu/index.d.ts

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

package/components/PopMenu/index.js

@@ -1,95 +1,124 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import p, { useRef as m, useState as $ } from "react";
-import f from "classnames";
-import { IconSize as c, AnalyticsId as q } from "../../constants.js";
-import { useBreakpoint as F } from "../../hooks/useBreakpoint.js";
-import { useHover as J } from "../../hooks/useHover.js";
-import { useOutsideEvent as K } from "../../hooks/useOutsideEvent.js";
-import { getColor as B } from "../../theme/currys/color.js";
-import { breakpoints as Q } from "../../theme/grid.js";
-import { isComponent as O } from "../../utils/component.js";
-import { I as d } from "../../Icon.js";
-import U from "../Icons/VerticalDots.js";
-import V from "../Icons/X.js";
-import { L as Y } from "../../LazyIcon.js";
-import { L as N } from "../../LinkList.js";
-import { a as Z } from "../../PopOver.js";
-import i from "./styles.module.scss";
-var oo = /* @__PURE__ */ ((o) => (o.onWhite = "on-white", o.onGray = "on-gray", o.onBlueberry = "on-blueberry", o))(oo || {}), eo = /* @__PURE__ */ ((o) => (o.right = "right", o.left = "left", o))(eo || {});
-const ko = (o) => {
-  const v = m(null), b = m(null), z = m(null), g = m(null), [n, u] = $(!1), {
-    children: I,
-    popOverClassName: H,
-    popMenuClassName: L,
-    openButtonTestId: R,
-    closeButtonTestId: S,
-    popOverTestId: x,
-    popMenuVariant: C = "on-white",
-    openButtonAriaLabel: T,
-    closeButtonAriaLabel: w,
-    svgIcon: r,
-    labelText: l,
-    labelTextPosition: h = "right"
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState } from "react";
+import classNames from "classnames";
+import { IconSize, AnalyticsId } from "../../constants.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
+import { useHover } from "../../hooks/useHover.js";
+import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
+import { getColor } from "../../theme/currys/color.js";
+import { breakpoints } from "../../theme/grid.js";
+import { isComponent } from "../../utils/component.js";
+import { I as Icon } from "../../Icon.js";
+import VerticalDots from "../Icons/VerticalDots.js";
+import X from "../Icons/X.js";
+import { L as LazyIcon } from "../../LazyIcon.js";
+import { L as LinkList } from "../../LinkList.js";
+import { a as PopOver } from "../../PopOver.js";
+import styles from "./styles.module.scss";
+var PopMenuVariant = /* @__PURE__ */ ((PopMenuVariant2) => {
+  PopMenuVariant2["onWhite"] = "on-white";
+  PopMenuVariant2["onGray"] = "on-gray";
+  PopMenuVariant2["onBlueberry"] = "on-blueberry";
+  return PopMenuVariant2;
+})(PopMenuVariant || {});
+var PopMenuLabelPosition = /* @__PURE__ */ ((PopMenuLabelPosition2) => {
+  PopMenuLabelPosition2["right"] = "right";
+  PopMenuLabelPosition2["left"] = "left";
+  return PopMenuLabelPosition2;
+})(PopMenuLabelPosition || {});
+const PopMenu = (props) => {
+  const triggerButtonRef = useRef(null);
+  const iconRef = useRef(null);
+  const popOverRef = useRef(null);
+  const outerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const {
+    children,
+    popOverClassName,
+    popMenuClassName,
+    openButtonTestId,
+    closeButtonTestId,
+    popOverTestId,
+    popMenuVariant = "on-white",
+    openButtonAriaLabel,
+    closeButtonAriaLabel,
+    svgIcon,
+    labelText,
+    labelTextPosition = "right"
     /* right */
-  } = o, X = f(i["pop-menu-button"], {
-    [i[`pop-menu-button--${C}`]]: C
-  }), _ = F() < Q.md;
-  K(g, () => {
-    u(!1);
+  } = props;
+  const buttonClasses = classNames(styles["pop-menu-button"], {
+    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant
   });
-  const { isHovered: a } = J(v), k = _ ? c.XSmall : c.Small, A = (e) => {
-    u(!1), e && e();
-  }, E = () => {
-    if (O(I, N))
-      return /* @__PURE__ */ t(
-        Z,
+  const breakpoint = useBreakpoint();
+  const mobile = breakpoint < breakpoints.md;
+  useOutsideEvent(outerRef, () => {
+    setIsOpen(false);
+  });
+  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);
+  const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;
+  const handleClick = (cb) => {
+    setIsOpen(false);
+    cb && cb();
+  };
+  const renderChildren = () => {
+    if (isComponent(children, LinkList)) {
+      return /* @__PURE__ */ jsx(
+        PopOver,
         {
-          testId: x,
-          className: f(i["pop-menu__pop-over"], H),
-          arrowClassName: i["pop-menu__pop-over-arrow"],
-          controllerRef: b,
-          popOverRef: z,
-          children: p.Children.map(
-            I,
-            (e) => p.cloneElement(e, {
-              children: p.Children.map(
-                e.props.children,
-                (s) => O(s, N.Link) ? p.cloneElement(s, {
-                  onClick: (W) => A(() => s.props.onClick && s.props.onClick(W))
-                }) : s
+          testId: popOverTestId,
+          className: classNames(styles["pop-menu__pop-over"], popOverClassName),
+          arrowClassName: styles["pop-menu__pop-over-arrow"],
+          controllerRef: iconRef,
+          popOverRef,
+          children: React.Children.map(
+            children,
+            (child) => React.cloneElement(child, {
+              children: React.Children.map(
+                child.props.children,
+                (child2) => isComponent(child2, LinkList.Link) ? React.cloneElement(child2, {
+                  onClick: (event) => handleClick(() => child2.props.onClick && child2.props.onClick(event))
+                }) : child2
               )
             })
           )
         }
       );
-  }, j = (e) => {
-    e && e.stopPropagation(), u(!n);
-  }, D = r && typeof r == "string" ? /* @__PURE__ */ t(Y, { iconName: r, size: c.XSmall, isHovered: a }) : r && /* @__PURE__ */ t(d, { svgIcon: r, size: c.XSmall, isHovered: a }), G = r ? D : /* @__PURE__ */ t(d, { svgIcon: r ?? U, color: B("black"), size: k, isHovered: a }), M = /* @__PURE__ */ t(d, { svgIcon: V, color: B("black"), size: k, isHovered: a }), P = /* @__PURE__ */ y(
+    }
+  };
+  const toggleOpenOnClick = (e) => {
+    e && e.stopPropagation();
+    setIsOpen(!isOpen);
+  };
+  const iconComponent = svgIcon && typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: svgIcon, size: IconSize.XSmall, isHovered: triggerButtonIsHovered }) : svgIcon && /* @__PURE__ */ jsx(Icon, { svgIcon, size: IconSize.XSmall, isHovered: triggerButtonIsHovered });
+  const openIcon = svgIcon ? iconComponent : /* @__PURE__ */ jsx(Icon, { svgIcon: svgIcon ?? VerticalDots, color: getColor("black"), size: mobileIconSize, isHovered: triggerButtonIsHovered });
+  const closeIcon = /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: getColor("black"), size: mobileIconSize, isHovered: triggerButtonIsHovered });
+  const triggerButton = /* @__PURE__ */ jsxs(
     "button",
     {
-      ref: v,
-      "data-testid": n ? S : R,
-      className: X,
-      "aria-label": n ? w : T,
-      "aria-expanded": n,
-      onClick: j,
+      ref: triggerButtonRef,
+      "data-testid": isOpen ? closeButtonTestId : openButtonTestId,
+      className: buttonClasses,
+      "aria-label": isOpen ? closeButtonAriaLabel : openButtonAriaLabel,
+      "aria-expanded": isOpen,
+      onClick: toggleOpenOnClick,
       type: "button",
       children: [
-        l && h == "left" && /* @__PURE__ */ t("span", { children: l }),
-        /* @__PURE__ */ t("div", { ref: b, children: n ? M : G }),
-        l && h == "right" && /* @__PURE__ */ t("span", { children: l })
+        labelText && labelTextPosition == "left" && /* @__PURE__ */ jsx("span", { children: labelText }),
+        /* @__PURE__ */ jsx("div", { ref: iconRef, children: isOpen ? closeIcon : openIcon }),
+        labelText && labelTextPosition == "right" && /* @__PURE__ */ jsx("span", { children: labelText })
       ]
     }
   );
-  return /* @__PURE__ */ y("div", { ref: g, className: f(i["pop-menu-button"], L), "data-analyticsid": q.PopMenu, children: [
-    P,
-    n && E()
+  return /* @__PURE__ */ jsxs("div", { ref: outerRef, className: classNames(styles["pop-menu-button"], popMenuClassName), "data-analyticsid": AnalyticsId.PopMenu, children: [
+    triggerButton,
+    isOpen && renderChildren()
   ] });
 };
 export {
-  ko as PopMenu,
-  eo as PopMenuLabelPosition,
-  oo as PopMenuVariant,
-  ko as default
+  PopMenu,
+  PopMenuLabelPosition,
+  PopMenuVariant,
+  PopMenu as default
 };
 //# sourceMappingURL=index.js.map