@helsenorge/designsystem-react 11.3.0 → 12.0.0-beta.0

package/components/HelpTriggerInline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpTriggerInline/HelpTriggerInline.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { HelpTriggerIconInternal, HelpTriggerWeights } from '../HelpTriggerIcon';\n\nimport styles from './styles.module.scss';\n\nexport interface HelpTriggerInlineProps\n  extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /** Sets the text content of the HelpTriggerInline. */\n  children: string;\n  /**\n   * Sets the colors of the help trigger. Default: normal.\n   */\n  weight?: HelpTriggerWeights;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst HelpTriggerInline = React.forwardRef<HTMLButtonElement, HelpTriggerInlineProps>(\n  ({ ariaLabel, ariaLabelledById, children, className, testId, weight = 'normal', ...rest }, ref) => {\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n    const helpTriggerInlineStyles = classNames(styles['help-trigger-inline'], className);\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpTriggerInline}\n        className={helpTriggerInlineStyles}\n        ref={ref}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        <span className={styles['help-trigger-inline__text']}>{children}</span>\n        <HelpTriggerIconInternal weight={weight} size={'inherit'} htmlMarkup={'span'} />\n      </button>\n    );\n  }\n);\n\nHelpTriggerInline.displayName = 'HelpTriggerInline';\n\nexport default HelpTriggerInline;\n"],"names":["React"],"mappings":";;;;;;;AAoCA,MAAM,oBAAoBA,eAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,kBAAkB,UAAU,WAAW,QAAQ,SAAS,UAAU,GAAG,KAAK,GAAG,QAAQ;AACjG,UAAM,sBAAsB,uBAAuB,EAAE,OAAO,WAAW,IAAI,kBAAkB;AAC7F,UAAM,0BAA0B,WAAW,OAAO,qBAAqB,GAAG,SAAS;AAGjF,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,QAAK,EAAA,WAAW,OAAO,2BAA2B,GAAI,UAAS;AAAA,8BAC/D,yBAAwB,EAAA,QAAgB,MAAM,WAAW,YAAY,OAAQ,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChF;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}

package/components/HelpTriggerInline/styles.module.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
+
+$trigger-medium-size: 1.25rem;
+$trigger-large-size: 1.5rem;
+$trigger-xl-size: 2rem;
+$outline-medium-width: 2px;
+$outline-large-width: 2.2px;
+$outline-xl-width: 2.5px;
+
+.help-trigger-inline {
+  display: inline;
+  color: var(--core-color-plum-800);
+  cursor: pointer;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+  padding: 0 var(--core-space-3xs);
+  font-size: clamp(0px, 1em, 48px);
+  font-weight: inherit;
+
+  &:hover {
+    background-color: var(--core-color-plum-50);
+  }
+
+  &:focus-visible {
+    outline: 3px solid var(--color-action-border-onlight-focus);
+  }
+
+  &:active {
+    text-decoration: solid underline;
+    text-underline-offset: 4.23px;
+  }
+
+  &__text {
+    margin-right: clamp(var(--core-space-3xs), 0.2em, var(--core-space-2xs));
+  }
+}

package/components/{HelpQuestion → HelpTriggerInline}/styles.module.scss.d.ts

@@ -1,6 +1,6 @@
 export type Styles = {
-  helpquestion: string;
-  'helpquestion--selected': string;
+  'help-trigger-inline': string;
+  'help-trigger-inline__text': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/HelpTriggerStandalone/HelpTriggerStandalone.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { HelpTriggerWeights } from '../HelpTriggerIcon';
+export interface HelpTriggerStandaloneProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls' | 'aria-expanded'> {
+    /**
+     * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!
+     */
+    ariaLabel?: string;
+    /**
+     * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!
+     */
+    ariaLabelledById?: string;
+    /** Sets the text content of the HelpTriggerStandalone. */
+    children: React.ReactNode;
+    /**
+     * Sets the colors of the help trigger. Default: normal.
+     */
+    weight?: HelpTriggerWeights;
+    /**
+     * Classname will be applied to the button element.
+     */
+    className?: string;
+    /**
+     * Optional test id.
+     */
+    testId?: string;
+}
+declare const HelpTriggerStandalone: React.ForwardRefExoticComponent<HelpTriggerStandaloneProps & React.RefAttributes<HTMLButtonElement>>;
+export default HelpTriggerStandalone;

package/components/HelpTriggerStandalone/HelpTriggerStandalone.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/HelpTriggerStandalone/index.d.ts

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

package/components/HelpTriggerStandalone/index.js

@@ -0,0 +1,5 @@
+import { H as HelpTriggerStandalone } from "../../HelpTriggerStandalone.js";
+export {
+  HelpTriggerStandalone as default
+};
+//# sourceMappingURL=index.js.map

package/components/HelpTriggerStandalone/styles.module.scss

@@ -0,0 +1,70 @@
+@use 'sass:map';
+@use '../../scss/breakpoints' as breakpoints;
+@use '../../scss/font-mixins' as fonts;
+@import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
+
+$trigger-medium-size: 1.25rem;
+$trigger-large-size: 1.5rem;
+$trigger-xl-size: 2rem;
+$outline-medium-width: 2px;
+$outline-large-width: 2.2px;
+$outline-xl-width: 2.5px;
+
+.help-trigger-standalone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: none;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+  min-width: 4.6rem;
+  height: 2.75rem;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &__inner-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--core-space-l);
+    color: var(--core-color-plum-800);
+    padding: 0 var(--core-space-3xs);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.2rem;
+
+    :hover > & {
+      background-color: var(--core-color-plum-50);
+    }
+
+    :focus-visible > & {
+      outline: 3px solid var(--color-action-border-onlight-focus);
+    }
+
+    :active > & {
+      text-decoration: solid underline;
+      text-underline-offset: 4.23px;
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      min-height: 2.25rem;
+      font-size: 1.125rem;
+      line-height: 1.463rem;
+    }
+  }
+
+  &__children {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: var(--core-space-2xs);
+
+    @include fonts.help-trigger-text;
+  }
+}

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

@@ -0,0 +1,11 @@
+export type Styles = {
+  'help-trigger-standalone': string;
+  'help-trigger-standalone__children': string;
+  'help-trigger-standalone__inner-container': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/HighlightPanel/HighlightPanel.d.ts

@@ -4,27 +4,18 @@ import { SvgIcon } from '../Icon';
 import { IconName } from '../Icons/IconNames';
 import { TitleTags } from '../Title';
 export type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;
-export declare enum HighlightPanelSize {
-    medium = "medium",
-    large = "large",
-    fluid = "fluid"
-}
 export type HighlightPanelTags = Exclude<keyof HTMLElementTagNameMap, 'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'>;
 export interface HighlightPanelProps {
     /** What's in the box? */
     children: React.ReactNode;
     /** Changes the background color. Default: white */
     color?: HighlightPanelColors;
-    /** Changes the size. Default: medium */
-    size?: keyof typeof HighlightPanelSize;
     /** Adds an icon to the highlightpanel. */
     svgIcon?: SvgIcon | IconName;
     /** Changes the underlying element. Default: div */
     htmlMarkup?: HighlightPanelTags;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Adds custom classes to the content-wrapper. Not used for fluid size. */
-    contentWrapperClassName?: string;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Element that is set after the icon-element in the DOM, often a title-element */

package/components/HighlightPanel/index.js

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

package/components/HighlightPanel/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/HighlightPanel/styles.module.scss

@@ -5,145 +5,30 @@
 @import '../../scss/grid';
 @import '../../scss/supernova/styles/colors.css';
 
-@mixin content-wrapper-with-icon-flex {
-  display: flex;
-  flex-direction: column;
-}
-
-@mixin content-wrapper-with-icon-flex-responsive {
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    flex-direction: row;
-  }
-}
-
-@mixin content-wrapper-with-icon-padding {
-  padding-top: spacers.getSpacer(m);
-}
-
 .highlightpanel {
-  $panel: &;
   $colors: 'neutral', 'blueberry', 'cherry';
 
-  // Medium og large har bakgrunnsfarge på den indre wrapperen
-  // slik at bakgrunnsfargen ikke går helt ut i kantene
-  &--medium,
-  &--large {
-    @each $color in $colors {
-      &#{$panel}--#{$color} {
-        #{$panel}__content-wrapper {
-          background-color: var(--color-base-background-#{$color});
-          border: 1px solid var(--color-base-border-#{$color});
-        }
-      }
-    }
-
-    // Hvit har sin egen regel siden den ikke har valører
-    &#{$panel}--white {
-      #{$panel}__content-wrapper {
-        background-color: var(--color-base-background-white);
-        border: 1px solid var(--color-base-border-onlight-subtle);
-      }
-    }
-  }
-
-  &--large {
-    #{$panel}__content-wrapper {
-      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-top: spacers.getSpacer(l);
-        padding-bottom: spacers.getSpacer(xl);
-      }
-    }
-  }
-
-  &--medium {
-    #{$panel}__content-wrapper {
-      padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
-      }
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding: spacers.getSpacer(l);
-      }
-    }
-  }
-
   // fluid skal ha bakgrunnsfarge på den ytre containeren
-  &--fluid {
-    padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
-
-    @media (min-width: map.get($grid-breakpoints, lg)) {
-      padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
-    }
+  padding: spacers.getSpacer(m) spacers.getSpacer(s) spacers.getSpacer(l);
 
-    @each $color in $colors {
-      &#{$panel}--#{$color} {
-        background-color: var(--color-base-background-#{$color});
-        border: 1px solid var(--color-base-border-#{$color});
-      }
-    }
-    &#{$panel}--white {
-      background-color: var(--color-base-background-white);
-      border: 1px solid var(--color-base-border-onlight-subtle);
-    }
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    padding: spacers.getSpacer(m) spacers.getSpacer(m) spacers.getSpacer(l);
   }
 
-  &--has-icon#{&}--medium {
-    #{$panel}__content-wrapper {
-      @include content-wrapper-with-icon-flex;
-      @include content-wrapper-with-icon-padding;
-      @include content-wrapper-with-icon-flex-responsive;
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: spacers.getSpacer(m);
-      }
-    }
+  @media (min-width: map.get($grid-breakpoints, xl)) {
+    padding: spacers.getSpacer(l) spacers.getSpacer(l) spacers.getSpacer(l) spacers.getSpacer(m);
   }
 
-  &--has-icon#{&}--large {
-    #{$panel}__col {
-      @include content-wrapper-with-icon-flex;
-      @include content-wrapper-with-icon-flex-responsive;
-    }
-    #{$panel}__content-wrapper {
-      @include content-wrapper-with-icon-padding;
-
-      @media (min-width: map.get($grid-breakpoints, sm)) {
-        padding-left: spacers.getSpacer(s);
-      }
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: spacers.getSpacer(m);
-      }
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        padding-left: 0;
-        padding-top: spacers.getSpacer(l);
-        padding-bottom: spacers.getSpacer(xl);
-      }
-    }
-
-    #{$panel}__icon {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        @include make-col-ready;
-        @include make-col(2);
-
-        display: flex;
-        justify-content: flex-end;
-        margin-right: 0;
-        padding-right: spacers.getSpacer(s);
-      }
+  @each $color in $colors {
+    &--#{$color} {
+      background-color: var(--color-base-background-#{$color});
+      border: 1px solid var(--color-base-border-#{$color});
     }
+  }
 
-    #{$panel}__content {
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        @include make-col-ready;
-        @include make-col(8);
-      }
-    }
+  &--white {
+    background-color: var(--color-base-background-white);
+    border: 1px solid var(--color-base-border-onlight-subtle);
   }
 
   &__content {
@@ -152,54 +37,27 @@
     }
   }
 
-  &--has-icon#{&}--fluid {
-    @include content-wrapper-with-icon-flex;
-    @include content-wrapper-with-icon-padding;
-    @include content-wrapper-with-icon-flex-responsive;
+  &--has-icon {
+    display: flex;
+    flex-direction: column;
+    padding-top: spacers.getSpacer(m);
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      flex-direction: row;
+    }
   }
 
   &__icon {
     display: inline-flex;
-    margin-right: spacers.getSpacer(s);
+    gap: spacers.getSpacer(xs);
     margin-bottom: spacers.getSpacer(2xs);
 
     @media (min-width: map.get($grid-breakpoints, md)) {
+      margin-right: spacers.getSpacer(s);
       margin-bottom: 0;
     }
   }
 
-  &__row {
-    @include make-row;
-  }
-
-  &__col {
-    @include make-col-ready;
-    @include make-col(12);
-
-    &--offset {
-      @media (min-width: map.get($grid-breakpoints, sm)) {
-        @include make-col(10);
-        @include make-col-offset(1);
-      }
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        @include make-col(8);
-        @include make-col-offset(2);
-      }
-    }
-
-    &--large-with-icon {
-      @media (min-width: map.get($grid-breakpoints, sm)) {
-        @include make-col(11);
-        @include make-col-offset(0);
-      }
-
-      @media (min-width: map.get($grid-breakpoints, lg)) {
-        @include make-col(12);
-      }
-    }
-  }
-
   &__title-wrapper {
     display: flex;
     align-items: center;

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

@@ -1,18 +1,11 @@
 export type Styles = {
-  highlightpanel__col: string;
-  'highlightpanel__col--large-with-icon': string;
-  'highlightpanel__col--offset': string;
+  highlightpanel: string;
   highlightpanel__content: string;
-  'highlightpanel__content-wrapper': string;
   highlightpanel__icon: string;
-  highlightpanel__row: string;
   'highlightpanel__title-wrapper': string;
   'highlightpanel--blueberry': string;
   'highlightpanel--cherry': string;
-  'highlightpanel--fluid': string;
   'highlightpanel--has-icon': string;
-  'highlightpanel--large': string;
-  'highlightpanel--medium': string;
   'highlightpanel--neutral': string;
   'highlightpanel--white': string;
 };

package/components/PopMenu/index.js

@@ -12,7 +12,7 @@ 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 { P as PopOver } from "../../PopOver.js";
 import styles from "./styles.module.scss";
 var PopMenuVariant = /* @__PURE__ */ ((PopMenuVariant2) => {
   PopMenuVariant2["onWhite"] = "on-white";
@@ -28,7 +28,6 @@ var PopMenuLabelPosition = /* @__PURE__ */ ((PopMenuLabelPosition2) => {
 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 {
@@ -66,9 +65,9 @@ const PopMenu = (props) => {
         {
           testId: popOverTestId,
           className: classNames(styles["pop-menu__pop-over"], popOverClassName),
-          arrowClassName: styles["pop-menu__pop-over-arrow"],
           controllerRef: iconRef,
-          popOverRef,
+          role: "dialog",
+          show: isOpen,
           children: React__default.Children.map(
             children,
             (child) => React__default.cloneElement(child, {

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 { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const popOverRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          arrowClassName={styles['pop-menu__pop-over-arrow']}\n          controllerRef={iconRef}\n          popOverRef={popOverRef}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":"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"}
+{"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 { useHover } from '../../hooks/useHover';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n  onWhite = 'on-white',\n  onGray = 'on-gray',\n  onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n  right = 'right',\n  left = 'left',\n}\n\nexport interface PopMenuProps {\n  /** Content shown inside PopOver. Can only be a LinkList */\n  children: React.ReactElement<LinkListProps>;\n  /** Adds custom classes to the popover element. */\n  popOverClassName?: string;\n  /** Adds custom classes to the element. */\n  popMenuClassName?: string;\n  /** Changes responsive design for the trigger buttons. */\n  popMenuVariant?: PopMenuVariant;\n  /** Sets the data-testid attribute for the button that opens. */\n  openButtonTestId?: string;\n  /** Sets the data-testid attribute for the button that closes. */\n  closeButtonTestId?: string;\n  /** Sets the data-testid attribute for the popover. */\n  popOverTestId?: string;\n  /** Sets the arial-label attribute for the openButton. */\n  openButtonAriaLabel?: string;\n  /** Sets the arial-label attribute for the closeButton. */\n  closeButtonAriaLabel?: string;\n  /** Sets the icon on the trigger button. */\n  svgIcon?: SvgIcon | IconName;\n  /** Optional text next to the trigger button. */\n  labelText?: string;\n  /** Placement of the label text relative to the trigger button. */\n  labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n  const triggerButtonRef = useRef<HTMLButtonElement>(null);\n  const iconRef = useRef<HTMLDivElement>(null);\n  const outerRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const {\n    children,\n    popOverClassName,\n    popMenuClassName,\n    openButtonTestId,\n    closeButtonTestId,\n    popOverTestId,\n    popMenuVariant = PopMenuVariant.onWhite,\n    openButtonAriaLabel,\n    closeButtonAriaLabel,\n    svgIcon,\n    labelText,\n    labelTextPosition = PopMenuLabelPosition.right,\n  } = props;\n  const buttonClasses = classNames(styles['pop-menu-button'], {\n    [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n  });\n  const isMobile = useIsMobileBreakpoint();\n\n  useOutsideEvent(outerRef, () => {\n    setIsOpen(false);\n  });\n\n  const { isHovered: triggerButtonIsHovered } = useHover(triggerButtonRef);\n  const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n  const handleClick = (cb?: () => void): void => {\n    setIsOpen(false);\n    cb && cb();\n  };\n\n  const renderChildren = (): React.ReactElement | undefined => {\n    if (isComponent<LinkListProps>(children, LinkList)) {\n      return (\n        <PopOver\n          testId={popOverTestId}\n          className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n          controllerRef={iconRef}\n          role=\"dialog\"\n          show={isOpen}\n        >\n          {React.Children.map(children, child =>\n            React.cloneElement(child, {\n              children: React.Children.map(child.props.children, child =>\n                isComponent<LinkProps>(child, LinkList.Link)\n                  ? React.cloneElement(child, {\n                      onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n                        handleClick(() => child.props.onClick && child.props.onClick(event)),\n                    })\n                  : child\n              ),\n            })\n          )}\n        </PopOver>\n      );\n    }\n  };\n\n  const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n    e && e.stopPropagation();\n    setIsOpen(!isOpen);\n  };\n\n  const iconComponent =\n    svgIcon && typeof svgIcon === 'string' ? (\n      <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    ) : (\n      svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n    );\n\n  const openIcon = svgIcon ? (\n    iconComponent\n  ) : (\n    <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n  );\n\n  const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n  const triggerButton = (\n    <button\n      ref={triggerButtonRef}\n      data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n      className={buttonClasses}\n      aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n      aria-expanded={isOpen}\n      onClick={toggleOpenOnClick}\n      type=\"button\"\n    >\n      {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n      {<div ref={iconRef}>{isOpen ? closeIcon : openIcon}</div>}\n      {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n    </button>\n  );\n\n  return (\n    <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n      {triggerButton}\n      {isOpen && renderChildren()}\n    </div>\n  );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenuLabelPosition","React","child"],"mappings":"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"}

package/components/PopMenu/styles.module.scss

@@ -108,11 +108,15 @@ html :focus > .pop-menu-button {
 
 .pop-menu__pop-over {
   width: 20.875rem;
-  border: 0.125rem solid rgb(24 128 151);
-  box-shadow: 0 0 0.3125rem 0 rgb(0 0 0 / 50%);
+  padding: 0;
 
   @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
     width: 26.125rem;
+    max-width: 27rem;
+  }
+
+  ul {
+    width: calc(100% - 0.5px);
   }
 
   li:first-of-type {
@@ -120,8 +124,8 @@ html :focus > .pop-menu-button {
 
     a,
     button {
-      border-top-left-radius: 0.5625rem;
-      border-top-right-radius: 0.5625rem;
+      border-top-left-radius: 9px;
+      border-top-right-radius: 9px;
     }
   }
 
@@ -130,12 +134,8 @@ html :focus > .pop-menu-button {
 
     a,
     button {
-      border-bottom-left-radius: 0.5625rem;
-      border-bottom-right-radius: 0.5625rem;
+      border-bottom-left-radius: 9px;
+      border-bottom-right-radius: 9px;
     }
   }
 }
-
-.pop-menu__pop-over-arrow {
-  --drop-shadow-color: rgb(24 128 151);
-}

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

@@ -1,6 +1,5 @@
 export type Styles = {
   'pop-menu__pop-over': string;
-  'pop-menu__pop-over-arrow': string;
   'pop-menu-button': string;
   'pop-menu-button--on-blueberry': string;
   'pop-menu-button--on-gray': string;

package/components/PopOver/PopOver.d.ts

@@ -4,7 +4,8 @@ export declare enum PopOverVariant {
     positionbelow = "positionbelow",
     positionabove = "positionabove"
 }
-export type PopOverRole = 'tooltip';
+export type PopOverRole = 'tooltip' | 'dialog';
+export type PopOverPlacement = 'top' | 'bottom';
 export interface PopOverProps {
     /** Id of the PopOver */
     id?: string;
@@ -12,16 +13,16 @@ export interface PopOverProps {
     children: React.ReactNode;
     /** Ref for the element the PopOver is placed upon */
     controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;
-    /** Ref for the element the PopOver is placed upon */
-    popOverRef?: React.RefObject<HTMLDivElement>;
     /** Show the popover. Only applies when role=tooltip. Default: false. */
     show?: boolean;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Adds custom classes to the arrow element. */
+    /** @deprecated Adds custom classes to the arrow element. */
     arrowClassName?: string;
-    /** Determines the placement of the popover. Default: automatic positioning. */
+    /** @deprecated use placement instead. Determines the placement of the popover. Default: automatic positioning. */
     variant?: keyof typeof PopOverVariant;
+    /** Sets the placement of the popover relative to the trigger if there is space, otherwise automatic. */
+    placement?: PopOverPlacement;
     /** Sets role of the PopOver element */
     role?: PopOverRole;
     /** Sets the data-testid attribute. */
@@ -29,5 +30,5 @@ export interface PopOverProps {
     /** Overrides the default z-index of PopOver */
     zIndex?: number;
 }
-declare const PopOver: React.ForwardRefExoticComponent<PopOverProps & React.RefAttributes<HTMLDivElement | SVGSVGElement>>;
+declare const PopOver: React.ForwardRefExoticComponent<PopOverProps & React.RefAttributes<HTMLElement | HTMLDivElement | SVGSVGElement>>;
 export default PopOver;

package/components/PopOver/index.js

@@ -1,7 +1,7 @@
-import { a as PopOver } from "../../PopOver.js";
-import { P } from "../../PopOver.js";
+import { P as PopOver } from "../../PopOver.js";
+import { a } from "../../PopOver.js";
 export {
-  P as PopOverVariant,
+  a as PopOverVariant,
   PopOver as default
 };
 //# sourceMappingURL=index.js.map