@helsenorge/designsystem-react 5.4.0 → 6.0.0-beta.10

package/components/NotificationPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/DetailButton/DetailButton.tsx","../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../../constants';\nimport { useUuid } from '../../../hooks/useUuid';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../../utils/accessibility';\nimport Button, { ButtonProps } from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nimport styles from './styles.module.scss';\n\ntype Props = {\n  content: React.ReactNode;\n  buttonClosedText: string;\n  buttonText: string;\n  expanderOpenFromStart: boolean;\n};\nexport const DetailButton: React.FC<Props> = ({ content, buttonText, buttonClosedText, expanderOpenFromStart }: Props): JSX.Element => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanderOpenFromStart);\n  const activeButtonText = isExpanded ? buttonText : buttonClosedText;\n\n  const buttonTextId = useUuid();\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: activeButtonText,\n    id: buttonTextId,\n    prefer: 'label',\n  });\n\n  const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n    onClick: () => setIsExpanded(!isExpanded),\n    variant: 'borderless',\n    className: classNames(styles['notification-panel__detail'], styles['notification-panel__detail-button']),\n    'aria-expanded': isExpanded,\n    ...ariaLabelAttributes,\n  };\n\n  return (\n    <div className={styles['notification-panel__detail-section']}>\n      <div className={styles['notification-panel__detail-section__button--wrapper']}>\n        <Button testId=\"expand\" data-analyticsid={AnalyticsId.Expander} {...commonProps}>\n          {activeButtonText}\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      </div>\n      {isExpanded && <div className={classNames(styles['notification-panel__detail-section__content'])}>{content}</div>}\n    </div>\n  );\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { DetailButton } from './DetailButton/DetailButton';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport CheckFill from '../Icons/CheckFill';\nimport ErrorSignFill from '../Icons/ErrorSignFill';\nimport InfoSignFill from '../Icons/InfoSignFill';\nimport TriangleX from '../Icons/TriangleX';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\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  /** 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' | 'variant'> & {\n  children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, children }) => {\n  if (fluid) {\n    const fluidClasses = classNames(styles['fluid-wrapper'], { [styles[`fluid-wrapper--${variant}`]]: variant });\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    fluid = false,\n    size,\n    className,\n    labelId,\n    role,\n    testId,\n  } = props;\n  const uuid = useUuid(labelId);\n  const variantToIconMap = {\n    info: (\n      <Icon\n        svgIcon={InfoSignFill}\n        color={palette.blueberry700}\n        hoverColor={palette.blueberry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    warn: (\n      <Icon\n        svgIcon={ErrorSignFill}\n        color={palette.banana700}\n        hoverColor={palette.banana700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    alert: (\n      <Icon\n        svgIcon={TriangleX}\n        color={palette.cherry700}\n        hoverColor={palette.cherry700}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n    success: (\n      <Icon\n        svgIcon={CheckFill}\n        color={palette.kiwi900}\n        hoverColor={palette.kiwi900}\n        size={compactVariant ? IconSize.XSmall : IconSize.Small}\n      />\n    ),\n  };\n  const renderContent = (): JSX.Element => {\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__compact--basic']]: compactVariant === 'basic',\n    });\n    const childrenClasses = classNames(styles['notification-panel__children'], {\n      [styles['notification-panel__label-and-content--spacing']]: label,\n    });\n\n    return (\n      <div className={contentClasses} id={!label ? uuid : undefined}>\n        {label && (\n          <h1 className={labelClasses} id={uuid}>\n            {label}\n          </h1>\n        )}\n        {children && !compactVariant && <div className={childrenClasses}>{children}</div>}\n        {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n          <DetailButton\n            expanderOpenFromStart={expanderOpenFromStart}\n            content={expanderChildren}\n            buttonText={expanderButtonText}\n            buttonClosedText={expanderButtonClosedText}\n          />\n        )}\n      </div>\n    );\n  };\n\n  const notificationPanelClasses = classNames(\n    styles['notification-panel'],\n    styles[`notification-panel--${variant}`],\n    {\n      [styles[`notification-panel--${size}`]]: !!size,\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--has-children']]: !!children,\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 === 'alert' && 'alert') || undefined;\n  const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: uuid }) : undefined;\n\n  return (\n    <FluidWrapper fluid={fluid} variant={variant}>\n      <div\n        ref={ref}\n        role={ariaRole}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.NotificationPanel}\n        className={notificationPanelClasses}\n        {...ariaLabelAttributes}\n      >\n        <span className={styles['notification-panel__icon']}>{variantToIconMap[variant]}</span>\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":["DetailButton","content","buttonText","buttonClosedText","expanderOpenFromStart","isExpanded","setIsExpanded","useState","activeButtonText","buttonTextId","useUuid","ariaLabelAttributes","getAriaLabelAttributes","commonProps","classNames","styles","React","Button","AnalyticsId","Icon","ChevronUp","ChevronDown","FluidWrapper","fluid","variant","children","fluidClasses","NotificationPanel","props","ref","dismissable","onClick","expanderChildren","expanderButtonText","expanderButtonClosedText","compactVariant","label","size","className","labelId","role","testId","uuid","variantToIconMap","InfoSignFill","palette","IconSize","ErrorSignFill","TriangleX","CheckFill","renderContent","contentClasses","labelClasses","childrenClasses","notificationPanelClasses","ariaRole","Close","getColor","NotificationPanel$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Panel/Panel.js

@@ -0,0 +1,191 @@
+import t from "react";
+import r from "classnames";
+import { AnalyticsId as oe, IconSize as S } from "../../constants.js";
+import { useExpand as se } from "../../hooks/useExpand.js";
+import { useUuid as H } from "../../hooks/useUuid.js";
+import { palette as W } from "../../theme/palette.js";
+import { getAriaLabelAttributes as ce } from "../../utils/accessibility.js";
+import ie from "../Badge/Badge.js";
+import X from "../Button/Button.js";
+import { Icon as C } from "../Icon/Icon.js";
+import me from "../Icons/AlertSignFill.js";
+import ue from "../Icons/ArrowRight.js";
+import de from "../Icons/Calendar.js";
+import pe from "../Icons/ChevronDown.js";
+import _e from "../Icons/ChevronUp.js";
+import Ee from "../Icons/Pencil.js";
+import fe from "../Icons/Watch.js";
+import ye from "../Title/Title.js";
+import e from "./styles.module.scss";
+var ve = /* @__PURE__ */ ((a) => (a.normal = "normal", a.new = "new", a.error = "error", a.draft = "draft", a))(ve || {}), be = /* @__PURE__ */ ((a) => (a.fill = "fill", a.white = "white", a.stroke = "stroke", a.line = "line", a))(be || {}), Ce = /* @__PURE__ */ ((a) => (a.layout1 = "layout1", a.layout2 = "layout2", a.layout3a = "layout3a", a.layout3b = "layout3b", a.layout3c = "layout3c", a))(Ce || {});
+const L = ({ status: a, statusMessage: n }) => {
+  const m = () => a === "error" ? { color: W.cherry500, svgIcon: me } : { color: W.black, svgIcon: Ee }, s = r(e["status-message"], {
+    [e["status-message--new"]]: a === "new"
+    /* new */
+  });
+  return (a === "error" || a === "draft") && n ? /* @__PURE__ */ t.createElement("div", { className: s, "data-testid": "display-status" }, /* @__PURE__ */ t.createElement(C, { ...m(), size: S.XSmall }), " ", /* @__PURE__ */ t.createElement("span", null, n)) : null;
+}, M = ({ children: a }) => typeof a > "u" ? null : /* @__PURE__ */ t.createElement("div", { className: e["header-container"] }, a), Ne = ({ date: a, time: n }) => a || n ? /* @__PURE__ */ t.createElement("div", { className: e["datetime-container"], "data-testid": "datetime" }, a && /* @__PURE__ */ t.createElement("div", { className: e["datetime-container__icon"] }, /* @__PURE__ */ t.createElement(C, { svgIcon: de, size: S.XSmall }), /* @__PURE__ */ t.createElement("span", null, a)), n && /* @__PURE__ */ t.createElement("div", { className: e["datetime-container__icon"] }, /* @__PURE__ */ t.createElement(C, { svgIcon: fe, size: S.XSmall }), /* @__PURE__ */ t.createElement("span", null, n))) : null, he = ({
+  contentA: a,
+  contentB: n,
+  contentHeader: m,
+  ctaContainer: s,
+  icon: l,
+  status: c,
+  statusMessage: d,
+  titleElement: p
+}) => {
+  const i = r(e["panel__layout-1"], {
+    [e["panel__layout-1--with-icon"]]: l
+  }), o = r(e.panel__icon, e["panel__icon--layout-1"], {
+    [e["panel__icon--no-content"]]: !a && !n
+  });
+  return /* @__PURE__ */ t.createElement("div", { className: i }, /* @__PURE__ */ t.createElement(L, { status: c, statusMessage: d }), /* @__PURE__ */ t.createElement(M, null, m), l && /* @__PURE__ */ t.createElement("div", { className: o }, l), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-1__content-a"] }, p, a), n && /* @__PURE__ */ t.createElement("div", null, n), s);
+}, we = ({
+  contentA: a,
+  contentB: n,
+  contentHeader: m,
+  ctaContainer: s,
+  icon: l,
+  status: c,
+  statusMessage: d,
+  titleElement: p
+}) => {
+  const i = r(e["panel__layout-2"], {
+    [e["panel__layout-2--with-icon"]]: l
+  }), o = r(e.panel__icon, e["panel__icon--layout-2"], {
+    [e["panel__icon--no-content"]]: !a && !n
+  }), y = e["panel__layout-2__last-column"];
+  return /* @__PURE__ */ t.createElement("div", { className: i }, /* @__PURE__ */ t.createElement(L, { status: c, statusMessage: d }), /* @__PURE__ */ t.createElement(M, null, m), l && /* @__PURE__ */ t.createElement("div", { className: o }, l), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-2__content-a"] }, p, a), n && /* @__PURE__ */ t.createElement("div", { className: y }, n), s && /* @__PURE__ */ t.createElement("div", { className: y }, s));
+}, Ie = ({
+  contentA: a,
+  contentB: n,
+  contentHeader: m,
+  ctaContainer: s,
+  icon: l,
+  layout: c,
+  status: d,
+  statusMessage: p,
+  titleElement: i
+}) => {
+  const o = r(e["panel__layout-3"], {
+    [e["panel__layout-3--with-icon"]]: l,
+    [e["panel__layout-3--a"]]: c === "layout3a",
+    [e["panel__layout-3--b"]]: c === "layout3b",
+    [e["panel__layout-3--c"]]: c === "layout3c"
+    /* layout3c */
+  }), y = r(e.panel__icon, e["panel__icon--layout-3"], {
+    [e["panel__icon--no-content"]]: !a && !n
+  });
+  return /* @__PURE__ */ t.createElement("div", { className: o }, /* @__PURE__ */ t.createElement(L, { status: d, statusMessage: p }), /* @__PURE__ */ t.createElement(M, null, m), l && /* @__PURE__ */ t.createElement("div", { className: y }, l), /* @__PURE__ */ t.createElement("div", null, i, a), /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column"] }, n && /* @__PURE__ */ t.createElement("div", { className: e["panel__layout-3__last-column__content-b"] }, n), s));
+}, ge = t.forwardRef(function(n, m) {
+  const {
+    buttonAriaLabel: s,
+    buttonAriaLabelledById: l,
+    buttonText: c = "Se detaljer",
+    buttonTextClose: d = "Skjul detaljer",
+    buttonHtmlMarkup: p = "a",
+    buttonOnClick: i,
+    children: o,
+    className: y,
+    containerAsButton: w = !1,
+    contentA: $,
+    contentB: z,
+    contentHeader: F,
+    date: B,
+    expanded: U = !1,
+    focusable: O = !1,
+    icon: I,
+    layout: v = "layout2",
+    noTopBorder: P,
+    onExpand: D,
+    renderChildrenWhenClosed: q = !1,
+    status: _ = "normal",
+    statusMessage: g,
+    target: G = "_self",
+    testId: J,
+    time: R,
+    title: x,
+    titleHtmlMarkup: K = "h2",
+    url: k,
+    variant: E = "fill"
+    /* fill */
+  } = n, [f, Q] = se(U, D), T = H(), N = H(), j = g && _ === "new", h = typeof z > "u", Y = v === "layout1" || h, Z = !h && v === "layout2", V = !h && (v === "layout3a" || v === "layout3b" || v === "layout3c"), ee = r(e["panel-wrapper"], y), te = r(e.panel, {
+    [e["panel--fill"]]: E === "fill",
+    [e["panel--stroke"]]: E === "stroke",
+    [e["panel--white"]]: E === "white",
+    [e["panel--line"]]: E === "line",
+    [e["panel--no-top-border"]]: E === "line" && P,
+    [e["panel--selected"]]: f,
+    [e["panel--new"]]: _ === "new",
+    [e["panel--draft"]]: _ === "draft",
+    [e["panel--error"]]: _ === "error",
+    [e["panel--status"]]: _ && _ !== "normal",
+    [e["panel--with-icon"]]: I,
+    [e["panel--button"]]: w,
+    [e["panel--clickable"]]: o || k || D || i || w
+  }), ae = () => {
+    const u = o || k || i, b = r(e["panel__btn-container"], {
+      [e["panel__btn-container--no-content-b"]]: h,
+      [e["panel__btn-container--no-button"]]: !u
+    });
+    return (u || B || R) && /* @__PURE__ */ t.createElement("div", { className: b }, /* @__PURE__ */ t.createElement(Ne, { date: B, time: R }), u && /* @__PURE__ */ t.createElement("div", { className: e["panel__details-btn"] }, ne()));
+  }, ne = () => {
+    const u = ce({
+      label: s,
+      id: l && `${N} ${l}` || x && T && `${N} ${T}`,
+      prefer: "label"
+    }), b = {
+      onClick: i || (() => Q(!f)),
+      className: w ? e.panel__expand : void 0,
+      variant: "borderless",
+      ellipsis: !0,
+      ...u
+    };
+    return o ? /* @__PURE__ */ t.createElement(X, { testId: "expand", "aria-expanded": f, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, f ? d : c), /* @__PURE__ */ t.createElement(C, { svgIcon: f ? _e : pe })) : /* @__PURE__ */ t.createElement(X, { testId: "url", htmlMarkup: p, href: k, target: G, ...b }, /* @__PURE__ */ t.createElement("span", { id: N }, c), /* @__PURE__ */ t.createElement(C, { svgIcon: ue }));
+  }, le = () => {
+    if (!o || !q && !f)
+      return null;
+    const u = r(e["panel-details"], {
+      [e["panel-details--open"]]: f,
+      [e["panel-details--line"]]: E === "line",
+      [e["panel-details--white"]]: E === "white",
+      [e["panel-details--with-icon"]]: I
+    });
+    return /* @__PURE__ */ t.createElement("div", { className: u, "data-testid": "panel-details" }, /* @__PURE__ */ t.createElement("div", null, o));
+  }, re = () => {
+    const u = r(e["title-container"], {
+      [e["title-container--no-content-a"]]: !$
+    }), b = r(e["title-container__title"], {
+      [e["title-container__title--badge"]]: j
+    });
+    return x && /* @__PURE__ */ t.createElement("div", { className: u }, /* @__PURE__ */ t.createElement(ye, { appearance: "title3", htmlMarkup: K, id: T, className: b }, x), j && /* @__PURE__ */ t.createElement("div", { className: e.panel__badge }, /* @__PURE__ */ t.createElement(ie, { color: "blueberry", testId: "badge-status" }, g)));
+  }, A = {
+    contentA: $,
+    contentB: z,
+    contentHeader: F,
+    ctaContainer: ae(),
+    icon: I,
+    status: _,
+    statusMessage: g,
+    titleElement: re()
+  };
+  return /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      tabIndex: O ? -1 : void 0,
+      ref: m,
+      "data-testid": J,
+      className: ee,
+      "data-analyticsid": oe.Panel
+    },
+    /* @__PURE__ */ t.createElement("div", { className: te }, Y && /* @__PURE__ */ t.createElement(he, { ...A }), Z && /* @__PURE__ */ t.createElement(we, { ...A }), V && /* @__PURE__ */ t.createElement(Ie, { ...A, layout: v })),
+    le()
+  );
+}), Pe = ge;
+export {
+  Ce as PanelLayout,
+  ve as PanelStatus,
+  be as PanelVariant,
+  Pe as default
+};
+//# sourceMappingURL=Panel.js.map

package/components/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icon';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content */\n  contentB?: React.ReactNode | string;\n  /** Content for a container that renders above A and B regardless of layout */\n  contentHeader?: React.ReactNode;\n  /** Container acts as a button, clicking anywhere triggers a panel button click */\n  containerAsButton?: boolean;\n  /** Panel children */\n  children?: React.ReactNode;\n  /** Displays date with icon */\n  date?: string;\n  /** Expands or collapses the panel */\n  expanded?: boolean;\n  /** Whether the panel can be focused */\n  focusable?: boolean;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when the panel button is clicked */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Layout of the panel */\n  layout?: keyof typeof PanelLayout;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Called when the panel is opened/closed */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Displays a status on the left side: default normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Sets the data-testid attribute for testing purposes */\n  testId?: string;\n  /** Displays time with icon */\n  time?: string;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2 */\n  titleHtmlMarkup?: TitleTags;\n  /** Changes the visual representation of the panel */\n  variant?: keyof typeof PanelVariant;\n  /** URL to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** @deprecated Has no effect anymore due to accessibility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n}\n\nexport interface LayoutProps\n  extends Pick<PanelProps, 'contentA' | 'contentB' | 'contentHeader' | 'icon' | 'layout' | 'status' | 'statusMessage'> {\n  ctaContainer?: React.ReactNode;\n  titleElement: React.ReactNode;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PreContainer: React.FC<{ children?: React.ReactNode }> = ({ children }) => {\n  if (typeof children === 'undefined') return null;\n  return <div className={panelStyles['header-container']}>{children}</div>;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst PanelLayout1: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-1'], {\n    [panelStyles['panel__layout-1--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-1'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-1__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div>{contentB}</div>}\n      {ctaContainer}\n    </div>\n  );\n};\n\nconst PanelLayout2: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const panelLayoutClasses = classNames(panelStyles['panel__layout-2'], {\n    [panelStyles['panel__layout-2--with-icon']]: icon,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-2'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n  const lastColumnClass = panelStyles['panel__layout-2__last-column'];\n\n  return (\n    <div className={panelLayoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div className={panelStyles['panel__layout-2__content-a']}>\n        {titleElement}\n        {contentA}\n      </div>\n      {contentB && <div className={lastColumnClass}>{contentB}</div>}\n      {ctaContainer && <div className={lastColumnClass}>{ctaContainer}</div>}\n    </div>\n  );\n};\n\nconst PanelLayout3: React.FC<LayoutProps> = ({\n  contentA,\n  contentB,\n  contentHeader,\n  ctaContainer,\n  icon,\n  layout,\n  status,\n  statusMessage,\n  titleElement,\n}) => {\n  const layoutClasses = classNames(panelStyles['panel__layout-3'], {\n    [panelStyles['panel__layout-3--with-icon']]: icon,\n    [panelStyles['panel__layout-3--a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel__layout-3--b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel__layout-3--c']]: layout === PanelLayout.layout3c,\n  });\n  const iconClasses = classNames(panelStyles.panel__icon, panelStyles['panel__icon--layout-3'], {\n    [panelStyles['panel__icon--no-content']]: !contentA && !contentB,\n  });\n\n  return (\n    <div className={layoutClasses}>\n      <StatusText status={status} statusMessage={statusMessage} />\n      <PreContainer>{contentHeader}</PreContainer>\n      {icon && <div className={iconClasses}>{icon}</div>}\n      <div>\n        {titleElement}\n        {contentA}\n      </div>\n      <div className={panelStyles['panel__layout-3__last-column']}>\n        {contentB && <div className={panelStyles['panel__layout-3__last-column__content-b']}>{contentB}</div>}\n        {ctaContainer}\n      </div>\n    </div>\n  );\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    buttonAriaLabel,\n    buttonAriaLabelledById,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonHtmlMarkup = 'a',\n    buttonOnClick,\n    children,\n    className,\n    containerAsButton = false,\n    contentA,\n    contentB,\n    contentHeader,\n    date,\n    expanded = false,\n    focusable = false,\n    icon,\n    layout = PanelLayout.layout2,\n    noTopBorder,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    status = PanelStatus.normal,\n    statusMessage,\n    target = '_self',\n    testId,\n    time,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    variant = PanelVariant.fill,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n  const noContentB = typeof contentB === 'undefined';\n  const layout1 = layout === 'layout1' || noContentB;\n  const layout2 = !noContentB && layout === 'layout2';\n  const layout3 = !noContentB && (layout === 'layout3a' || layout === 'layout3b' || layout === 'layout3c');\n  const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const renderCTAContainer = () => {\n    const hasButton = children || url || buttonOnClick;\n    const btnContainerClasses = classNames(panelStyles['panel__btn-container'], {\n      [panelStyles['panel__btn-container--no-content-b']]: noContentB,\n      [panelStyles['panel__btn-container--no-button']]: !hasButton,\n    });\n\n    return (\n      (hasButton || date || time) && (\n        <div className={btnContainerClasses}>\n          {<DateTime date={date} time={time} />}\n          {hasButton && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n        </div>\n      )\n    );\n  };\n\n  const renderDetailsButton = (): React.ReactNode => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const renderContent = (): React.ReactNode | null => {\n    if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  const renderTitle = () => {\n    const titleContainerClasses = classNames(panelStyles['title-container'], {\n      [panelStyles['title-container--no-content-a']]: !contentA,\n    });\n    const titleClasses = classNames(panelStyles['title-container__title'], {\n      [panelStyles['title-container__title--badge']]: hasBadge,\n    });\n\n    return (\n      title && (\n        <div className={titleContainerClasses}>\n          <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n            {title}\n          </Title>\n          {hasBadge && (\n            <div className={panelStyles.panel__badge}>\n              <Badge color=\"blueberry\" testId=\"badge-status\">\n                {statusMessage}\n              </Badge>\n            </div>\n          )}\n        </div>\n      )\n    );\n  };\n\n  const layoutProps: LayoutProps = {\n    contentA: contentA,\n    contentB: contentB,\n    contentHeader: contentHeader,\n    ctaContainer: renderCTAContainer(),\n    icon: icon,\n    status: status,\n    statusMessage: statusMessage,\n    titleElement: renderTitle(),\n  };\n\n  return (\n    <div\n      // eslint-disable-next-line no-constant-condition\n      tabIndex={focusable ? -1 : undefined}\n      ref={ref}\n      data-testid={testId}\n      className={panelWrapperClasses}\n      data-analyticsid={AnalyticsId.Panel}\n    >\n      <div className={panelClasses}>\n        {layout1 && <PanelLayout1 {...layoutProps} />}\n        {layout2 && <PanelLayout2 {...layoutProps} />}\n        {layout3 && <PanelLayout3 {...layoutProps} layout={layout} />}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","PreContainer","children","DateTime","date","time","Calendar","Watch","PanelLayout1","contentA","contentB","contentHeader","ctaContainer","icon","titleElement","panelLayoutClasses","iconClasses","PanelLayout2","lastColumnClass","PanelLayout3","layout","layoutClasses","Panel","props","ref","buttonAriaLabel","buttonAriaLabelledById","buttonText","buttonTextClose","buttonHtmlMarkup","buttonOnClick","className","containerAsButton","expanded","focusable","noTopBorder","onExpand","renderChildrenWhenClosed","target","testId","title","titleHtmlMarkup","url","variant","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","noContentB","layout1","layout2","layout3","panelWrapperClasses","panelClasses","renderCTAContainer","hasButton","btnContainerClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","renderContent","panelDetailsClasses","renderTitle","titleContainerClasses","titleClasses","Title","Badge","layoutProps","AnalyticsId","Panel$1"],"mappings":"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"}

package/components/Panel/index.js

@@ -1,2 +1,9 @@
-import{P as o}from"../../Panel.js";import{c as J,a as K,b as M}from"../../Panel.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"./styles.module.scss";export{J as PanelLayout,K as PanelStatus,M as PanelVariant,o as default};
+import t from "./Panel.js";
+import { PanelLayout as r, PanelStatus as l, PanelVariant as n } from "./Panel.js";
+export {
+  r as PanelLayout,
+  l as PanelStatus,
+  n as PanelVariant,
+  t as default
+};
 //# sourceMappingURL=index.js.map

package/components/Panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/PanelList/PanelList.js

@@ -0,0 +1,17 @@
+import a from "react";
+import p from "classnames";
+import { AnalyticsId as f } from "../../constants.js";
+import P, { PanelVariant as l } from "../Panel/Panel.js";
+import r from "./styles.module.scss";
+const y = (t) => a.isValidElement(t) && t.type === P, N = a.forwardRef(function(o, i) {
+  const { testId: m, children: d, variant: n = l.fill } = o, c = (e, s) => a.cloneElement(e, {
+    variant: n,
+    noTopBorder: n === l.line && !s,
+    className: p(e.props.className, n !== l.line && r["panel-list__panel"])
+  });
+  return /* @__PURE__ */ a.createElement("div", { ref: i, "data-testid": m, className: r["panel-list"], "data-analyticsid": f.PanelList }, a.Children.map(d, (e, s) => y(e) ? c(e, s === 0) : e));
+}), w = N;
+export {
+  w as default
+};
+//# sourceMappingURL=PanelList.js.map

package/components/PanelList/PanelList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelList.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\ninterface 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} className={styles['panel-list']} 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","AnalyticsId","child","index","PanelList$1"],"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;AAEH,SACG,gBAAAb,EAAA,cAAA,OAAA,EAAI,KAAAI,GAAU,eAAaC,GAAQ,WAAWQ,EAAO,YAAY,GAAG,oBAAkBC,EAAY,UAAA,GAChGd,EAAM,SAAS,IAAIM,GAAU,CAACS,GAAOC,MAAWlB,EAAiBiB,CAAK,IAAIN,EAAYM,GAAOC,MAAU,CAAC,IAAID,CAAM,CACrH;AAEJ,CAAC,GAEDE,IAAef;"}

package/components/PanelList/index.js

@@ -1,2 +1,5 @@
-import r from"react";import c from"classnames";import{AnalyticsId as f}from"../../constants.js";import{b as p,P}from"../../Panel.js";import a from"./styles.module.scss";import"../../hooks/useExpand.js";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../utils/accessibility.js";import"../../Badge.js";import"../Badge/styles.module.scss";import"../../Button.js";import"../Icons/Icon.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/Calendar.js";import"../Icons/ChevronDown.js";import"../Icons/ChevronUp.js";import"../Icons/Pencil.js";import"../Icons/Watch.js";import"../../Title.js";import"../Title/styles.module.scss";import"../Panel/styles.module.scss";const y=o=>r.isValidElement(o)&&o.type===P,N=r.forwardRef(function(e,n){const{testId:s,children:l,variant:i=p.fill}=e,d=(t,m)=>r.cloneElement(t,{variant:i,noTopBorder:i===p.line&&!m,className:c(t.props.className,i!==p.line&&a["panel-list__panel"])});return r.createElement("div",{ref:n,"data-testid":s,className:a["panel-list"],"data-analyticsid":f.PanelList},r.Children.map(l,(t,m)=>y(t)?d(t,m===0):t))}),tt=N;export{tt as default};
+import a from "./PanelList.js";
+export {
+  a 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\ninterface 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} className={styles['panel-list']} 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","AnalyticsId","child","index","PanelList$1"],"mappings":"kpCAkBA,MAAMA,EAAoBC,GACxBC,EAAM,eAA2BD,CAAO,GAAMA,EAA+B,OAASE,EAElFC,EAAYF,EAAM,WAAW,SAA2BG,EAAuBC,EAAyC,CAC5H,KAAM,CAAE,OAAAC,EAAQ,SAAAC,EAAU,QAAAC,EAAUC,EAAa,IAAS,EAAAL,EAEpDM,EAAc,CAACC,EAAuCC,IAC1DX,EAAM,aAAaU,EAAO,CACxB,QAAAH,EACA,YAAaA,IAAYC,EAAa,MAAQ,CAACG,EAC/C,UAAWC,EAAWF,EAAM,MAAM,UAAWH,IAAYC,EAAa,MAAQK,EAAO,mBAAmB,CAAC,CAAA,CAC1G,EAEH,OACGb,EAAA,cAAA,MAAA,CAAI,IAAAI,EAAU,cAAaC,EAAQ,UAAWQ,EAAO,YAAY,EAAG,mBAAkBC,EAAY,SAAA,EAChGd,EAAM,SAAS,IAAIM,EAAU,CAACS,EAAOC,IAAWlB,EAAiBiB,CAAK,EAAIN,EAAYM,EAAOC,IAAU,CAAC,EAAID,CAAM,CACrH,CAEJ,CAAC,EAEDE,GAAef"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/PopMenu/PopMenu.js

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

package/components/PopMenu/PopMenu.js.map

@@ -0,0 +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 } 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 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          {children}\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?: React.MouseEvent<HTMLElement, MouseEvent>) => 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?: React.MouseEvent<HTMLElement, MouseEvent>) => 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","renderChildren","isComponent","LinkList","React","PopOver","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":";;;;;;;;;;;;;;;AAmBY,IAAAA,sBAAAA,OACVA,EAAA,UAAU,YACVA,EAAA,SAAS,WACTA,EAAA,cAAc,gBAHJA,IAAAA,KAAA,CAAA,CAAA;AA2BC,MAAAC,IAAkC,CAACC,MAAwB;AAChE,QAAAC,IAAWC,EAA0B,IAAI,GACzCC,IAAUD,EAA0B,IAAI,GACxCE,IAAaF,EAAuB,IAAI,GACxC,CAACG,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,EACE,IAAAhB,GACEiB,IAAgBC,EAAWC,EAAO,iBAAiB,GAAG;AAAA,IAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,GAAGA;AAAA,EAAA,CACjD,GAEKM,IADaC,MACSC,EAAY;AACxC,EAAAC,EAAgBnB,GAAY,MAAME,EAAU,CAACD,CAAM,CAAC;AACpD,QAAM,EAAE,WAAWmB,EAAoB,IAAIC,EAAStB,CAAO,GACrDuB,IAAiBN,IAASO,EAAS,SAASA,EAAS,OAErDC,IAAiB,MAAM;AACvB,QAAAC,EAA2BrB,GAAUsB,CAAQ;AAE7C,aAAA,gBAAAC,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,QAAQnB;AAAA,UACR,WAAWK,EAAWC,EAAO,oBAAoB,GAAGV,CAAgB;AAAA,UACpE,gBAAgBU,EAAO,0BAA0B;AAAA,UACjD,eAAelB;AAAA,UACf,YAAAG;AAAA,QAAA;AAAA,QAECI;AAAA,MAAA;AAAA,EAGP,GAGIyB,IAAgB,CAAC5B,GAAiB6B,MAAwD;AAC9F,IAAAA,KAAKA,EAAE,mBACP5B,EAAUD,CAAM;AAAA,EAAA,GAGZ8B,IACJ,gBAAAJ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK5B;AAAA,MACL,eAAaQ;AAAA,MACb,WAAWM;AAAA,MACX,cAAYF,KAAuB;AAAA,MACnC,SAAS,CAACmB,MAAkDD,EAAc,IAAMC,CAAC;AAAA,MACjF,MAAK;AAAA,IAAA;AAAA,IAEJ,gBAAAH,EAAA,cAAAK,GAAA,EAAK,SAASC,GAAc,WAAU,QAAO,OAAOC,EAAS,OAAO,GAAG,MAAMZ,GAAgB,WAAWF,GAAqB;AAAA,EAAA,GAI5He,IACJ,gBAAAR,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAWxB;AAAA,MACX,OAAM;AAAA,MACN,WAAWC;AAAA,MACX,QAAQL;AAAA,MACR,KAAKX;AAAA,MACL,SAAS,CAACiC,MAAkDD,EAAc,IAAOC,CAAC;AAAA,MAClF,OAAOd;AAAA,IAAA;AAAA,EAAA;AAIX,yCACG,OAAI,EAAA,WAAWF,EAAWC,EAAO,iBAAiB,GAAGT,CAAgB,GAAG,oBAAkB+B,EAAY,WACnGpC,IAAsBkC,IAAbJ,GACV9B,KAAUuB,GACb;AAEJ,GAEAc,KAAe3C;"}

package/components/PopMenu/index.js

@@ -1,2 +1,8 @@
-import e,{useRef as p,useState as w}from"react";import n from"classnames";import{IconSize as C,AnalyticsId as H}from"../../constants.js";import{useBreakpoint as _}from"../../hooks/useBreakpoint.js";import{useHover as z}from"../../hooks/useHover.js";import{useOutsideEvent as A}from"../../hooks/useOutsideEvent.js";import{getColor as M}from"../../theme/currys/color.js";import{breakpoints as P}from"../../theme/grid.js";import{isComponent as T}from"../../utils/component.js";import{C as $}from"../../Close.js";import{Icon as x}from"../Icons/Icon.js";import D from"../Icons/VerticalDots.js";import{L as G}from"../../LinkList.js";import{a as W}from"../../PopOver.js";import r from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../Icons/ChevronRight.js";import"../../ListHeader.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";import"../LinkList/styles.module.scss";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";var X=(o=>(o.onWhite="on-white",o.onGray="on-gray",o.onBlueberry="on-blueberry",o))(X||{});const j=o=>{const i=p(null),s=p(null),a=p(null),[m,l]=w(!1),{children:c,popOverClassName:I,popMenuClassName:k,openButtonTestId:B,closeButtonTestId:N,popOverTestId:y,popMenuVariant:u="on-white",openButtonAriaLabel:O,closeButtonAriaLabel:h}=o,f=n(r["pop-menu-button"],{[r[`pop-menu-button--${u}`]]:u}),d=_()<P.md;A(a,()=>l(!m));const{isHovered:E}=z(s),L=d?C.XSmall:C.Small,R=()=>{if(T(c,G))return e.createElement(W,{testId:y,className:n(r["pop-menu__pop-over"],I),arrowClassName:r["pop-menu__pop-over-arrow"],controllerRef:i,popOverRef:a},c)},b=(t,v)=>{v&&v.stopPropagation(),l(t)},S=e.createElement("button",{ref:s,"data-testid":B,className:f,"aria-label":O||"Se mer",onClick:t=>b(!0,t),type:"button"},e.createElement(x,{svgIcon:D,className:"test",color:M("black"),size:L,isHovered:E})),g=e.createElement($,{ariaLabel:h,color:"black",className:f,testId:N,ref:i,onClick:t=>b(!1,t),small:d});return e.createElement("div",{className:n(r["pop-menu-button"],k),"data-analyticsid":H.PopMenu},m?g:S,m&&R())},Go=j;export{j as PopMenu,X as PopMenuVariant,Go as default};
+import e from "./PopMenu.js";
+import { PopMenu as t, PopMenuVariant as a } from "./PopMenu.js";
+export {
+  t as PopMenu,
+  a as PopMenuVariant,
+  e as default
+};
 //# sourceMappingURL=index.js.map

package/components/PopMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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 '../Icons';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } 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 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          {children}\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?: React.MouseEvent<HTMLElement, MouseEvent>) => 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?: React.MouseEvent<HTMLElement, MouseEvent>) => 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","renderChildren","isComponent","LinkList","React","PopOver","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"+tDAmBY,IAAAA,GAAAA,IACVA,EAAA,QAAU,WACVA,EAAA,OAAS,UACTA,EAAA,YAAc,eAHJA,IAAAA,GAAA,CAAA,CAAA,EA2BC,MAAAC,EAAmCC,GAAwB,CAChE,MAAAC,EAAWC,EAA0B,IAAI,EACzCC,EAAUD,EAA0B,IAAI,EACxCE,EAAaF,EAAuB,IAAI,EACxC,CAACG,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CACJ,SAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,WACjB,oBAAAC,EACA,qBAAAC,CACE,EAAAhB,EACEiB,EAAgBC,EAAWC,EAAO,iBAAiB,EAAG,CAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,EAAGA,CAAA,CACjD,EAEKM,EADaC,IACSC,EAAY,GACxCC,EAAgBnB,EAAY,IAAME,EAAU,CAACD,CAAM,CAAC,EACpD,KAAM,CAAE,UAAWmB,CAAoB,EAAIC,EAAStB,CAAO,EACrDuB,EAAiBN,EAASO,EAAS,OAASA,EAAS,MAErDC,EAAiB,IAAM,CACvB,GAAAC,EAA2BrB,EAAUsB,CAAQ,EAE7C,OAAAC,EAAA,cAACC,EAAA,CACC,OAAQnB,EACR,UAAWK,EAAWC,EAAO,oBAAoB,EAAGV,CAAgB,EACpE,eAAgBU,EAAO,0BAA0B,EACjD,cAAelB,EACf,WAAAG,CAAA,EAECI,CAAA,CAGP,EAGIyB,EAAgB,CAAC5B,EAAiB6B,IAAwD,CAC9FA,GAAKA,EAAE,kBACP5B,EAAUD,CAAM,CAAA,EAGZ8B,EACJJ,EAAA,cAAC,SAAA,CACC,IAAK5B,EACL,cAAaQ,EACb,UAAWM,EACX,aAAYF,GAAuB,SACnC,QAAUmB,GAAkDD,EAAc,GAAMC,CAAC,EACjF,KAAK,QAAA,EAEJH,EAAA,cAAAK,EAAA,CAAK,QAASC,EAAc,UAAU,OAAO,MAAOC,EAAS,OAAO,EAAG,KAAMZ,EAAgB,UAAWF,EAAqB,CAAA,EAI5He,EACJR,EAAA,cAACS,EAAA,CACC,UAAWxB,EACX,MAAM,QACN,UAAWC,EACX,OAAQL,EACR,IAAKX,EACL,QAAUiC,GAAkDD,EAAc,GAAOC,CAAC,EAClF,MAAOd,CAAA,CAAA,EAIX,uBACG,MAAI,CAAA,UAAWF,EAAWC,EAAO,iBAAiB,EAAGT,CAAgB,EAAG,mBAAkB+B,EAAY,SACnGpC,EAAsBkC,EAAbJ,EACV9B,GAAUuB,GACb,CAEJ,EAEAc,GAAe3C"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/components/PopOver/PopOver.js

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

package/components/PopOver/PopOver.js.map

@@ -0,0 +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 } 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}\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  } = 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}\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} />\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","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;AA+BZ,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,EACE,IAAAX,GAEEY,IAAYP,KAAcQ,EAAuB,IAAI,GACrDC,IAAWD,EAAuB,IAAI,GACtCE,IAAaC,EAAQJ,CAAS,GAC9B,CAACK,GAAgBC,CAAiB,IAAIC,EAAkB,GACxDC,IAAsBC,EAAajB,GAAe,CAAC,GAEnDkB,IAAuB,MAAY;;AACrB,IAAAJ,GAAAK,IAAAnB,EAAc,YAAd,gBAAAmB,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,IAAYlB,MAAS,WAErBmB,IAAiBC,EAAWC,EAAO,SAAS,EAAE,CAACA,EAAO,kBAAkB,CAAC,GAAGH,IAAYrB,IAAOc,KAAuBb,CAAS,GAC/HwB,IAAmBd,KAAkBF,KAAciB,EAAoBf,GAAgBF,GAAYP,CAAO,GAC1GyB,IAAeJ,EAAWC,EAAO,gBAAgBnB,GAAgB;AAAA,IACrE,CAACmB,EAAO,sBAAsB,CAAC,GAAGC,MAAqB;AAAA,IACvD,CAACD,EAAO,uBAAuB,CAAC,GAAGC,MAAqB;AAAA;AAAA,EAAA,CACzD,GAEKG,IAAcjB,KAAkBF,KAAcoB,EAAelB,GAAgBF,GAAYP,CAAO,GAChG4B,IAAaF,KAAejB,KAAkBc,KAAoBM,EAAcH,GAAajB,GAAgBc,CAAgB;AAEnI,SAEI,gBAAAhC,EAAA,cAAAA,EAAA,UAAA,MAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAG;AAAA,MACA,KAAKoC,EAAU,CAACrC,GAAKW,CAAS,CAAC;AAAA,MAC/B,WAAWgB;AAAA,MACX,OAAOM;AAAA,MACP,eAAaxB;AAAA,MACb,oBAAkB6B,EAAY;AAAA,MAC9B,MAAA9B;AAAA,IAAA;AAAA,IAECN;AAAA,EACH,mCACC,OAAI,EAAA,KAAKW,GAAU,WAAWmB,GAAc,OAAOG,EAAA,CAAY,CAClE;AAEJ,CAAC;AAEDtC,EAAQ,cAAc;AAEtB,MAAA0C,IAAe1C;"}

package/components/PopOver/index.js

@@ -1,2 +1,7 @@
-import{a as o}from"../../PopOver.js";import{P as l}from"../../PopOver.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"./styles.module.scss";export{l as PopOverVariant,o as default};
+import o from "./PopOver.js";
+import { PopOverVariant as t } from "./PopOver.js";
+export {
+  t as PopOverVariant,
+  o as default
+};
 //# sourceMappingURL=index.js.map

package/components/PopOver/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}