@helsenorge/designsystem-react 12.8.0 → 12.10.0

package/Toast.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { C as Close } from "./Close.js";
+import { I as Icon } from "./Icon.js";
+import CheckFill from "./components/Icons/CheckFill.js";
+import styles from "./components/Toast/styles.module.scss";
+const Toast = ({ testId, title, message, onClose }) => {
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxs("output", { className: styles["toast"], "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(Icon, { svgIcon: CheckFill, className: styles["toast__icon"] }),
+    /* @__PURE__ */ jsxs("div", { className: styles["toast__text-container"], children: [
+      /* @__PURE__ */ jsx("span", { className: styles["toast__title"], children: title }),
+      message && /* @__PURE__ */ jsx("span", { className: styles["toast__description"], children: message })
+    ] }),
+    /* @__PURE__ */ jsx(Close, { onClick: handleClose, color: "black", className: styles["toast__icon"], testId: `${testId}-close` })
+  ] });
+};
+export {
+  Toast as T
+};
+//# sourceMappingURL=Toast.js.map

package/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\n\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** The title to display in the toast */\n  title: string;\n  /** The message to display in the toast */\n  message?: string;\n  /** Callback when toast is closed */\n  onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n  const handleClose = (): void => {\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  return (\n    <output className={styles['toast']} data-testid={testId}>\n      <Icon svgIcon={CheckFill} className={styles['toast__icon']} />\n      <div className={styles['toast__text-container']}>\n        <span className={styles['toast__title']}>{title}</span>\n        {message && <span className={styles['toast__description']}>{message}</span>}\n      </div>\n      <Close onClick={handleClose} color=\"black\" className={styles['toast__icon']} testId={`${testId}-close`} />\n    </output>\n  );\n};\n\nexport default Toast;\n"],"names":[],"mappings":";;;;;AAmBA,MAAM,QAA8B,CAAC,EAAE,QAAQ,OAAO,SAAS,cAAc;AAC3E,QAAM,cAAc,MAAY;AAC9B,QAAI,SAAS;AACX,cAAA;AAAA,IACF;AAAA,EACF;AAEA,8BACG,UAAA,EAAO,WAAW,OAAO,OAAO,GAAG,eAAa,QAC/C,UAAA;AAAA,IAAA,oBAAC,QAAK,SAAS,WAAW,WAAW,OAAO,aAAa,GAAG;AAAA,IAC5D,qBAAC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAC5C,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,cAAc,GAAI,UAAA,OAAM;AAAA,MAC/C,WAAW,oBAAC,QAAA,EAAK,WAAW,OAAO,oBAAoB,GAAI,UAAA,QAAA,CAAQ;AAAA,IAAA,GACtE;AAAA,IACA,oBAAC,OAAA,EAAM,SAAS,aAAa,OAAM,SAAQ,WAAW,OAAO,aAAa,GAAG,QAAQ,GAAG,MAAM,SAAA,CAAU;AAAA,EAAA,GAC1G;AAEJ;"}

package/components/Drawer/styles.module.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '../../scss/spacers' as spacers;
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
 @import '../../scss/supernova/styles/colors.css';
+@import '../../scss/supernova/styles/spacers.css';
 
 .drawer {
   position: fixed;
@@ -77,23 +77,23 @@
     justify-content: space-between;
 
     // legg til padding for å gi plass til close button
-    padding: spacers.getSpacer(xs) 2.75rem spacers.getSpacer(xs) spacers.getSpacer(2xs);
+    padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-2xs);
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(xs) 2.75rem spacers.getSpacer(xs) spacers.getSpacer(xs);
+      padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-xs);
     }
 
     @include breakpoints.tiny-screens-media-query {
-      padding: spacers.getSpacer(4xs) 0;
+      padding: var(--core-space-4xs) 0;
       flex-direction: column-reverse;
       align-items: flex-start;
     }
 
     &--no-close-button {
-      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
+      padding: var(--core-space-xs) var(--core-space-2xs);
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(xs);
+        padding: var(--core-space-xs);
       }
     }
 
@@ -121,10 +121,10 @@
     }
 
     &__children {
-      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs);
+      padding: var(--core-space-xs) var(--core-space-2xs);
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: spacers.getSpacer(s) spacers.getSpacer(xs);
+        padding: var(--core-space-s) var(--core-space-xs);
       }
     }
 
@@ -143,21 +143,21 @@
 
       &--top {
         top: 0;
-        margin-bottom: calc(0rem - spacers.getSpacer(xs));
+        margin-bottom: calc(0rem - var(--core-space-xs));
         background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
 
         @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-          margin-bottom: calc(0rem - spacers.getSpacer(s));
+          margin-bottom: calc(0rem - var(--core-space-s));
         }
       }
 
       &--bottom {
         bottom: 0;
         background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
-        margin-top: calc(0rem - spacers.getSpacer(xs));
+        margin-top: calc(0rem - var(--core-space-xs));
 
         @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-          margin-top: calc(0rem - spacers.getSpacer(s));
+          margin-top: calc(0rem - var(--core-space-s));
         }
       }
 
@@ -169,17 +169,18 @@
 
   &__footer {
     display: flex;
-    gap: spacers.getSpacer(m);
-    padding: spacers.getSpacer(s) spacers.getSpacer(2xs);
+    gap: var(--core-space-2xs) var(--core-space-m);
+    padding: var(--core-space-s) var(--core-space-2xs);
+    flex-wrap: wrap;
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-      padding: spacers.getSpacer(m) spacers.getSpacer(xs);
+      row-gap: var(--core-space-s);
+      padding: var(--core-space-m) var(--core-space-xs);
     }
 
     @include breakpoints.tiny-screens-media-query {
-      flex-wrap: wrap;
-      gap: spacers.getSpacer(2xs) 0;
-      padding: spacers.getSpacer(2xs) 0;
+      column-gap: var(--core-space-2xs) 0;
+      padding: var(--core-space-2xs) 0;
     }
   }
 }

package/components/Dropdown/index.js

@@ -4,7 +4,7 @@ import { u as useFloating, f as autoUpdate, o as offset, s as shift, j as size }
 import classNames from "classnames";
 import "../../theme/grid.js";
 import "../../hooks/useBreakpoint.js";
-import { useHover } from "../../hooks/useHover.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
 import { useToggle } from "../../hooks/useToggle.js";
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
@@ -53,7 +53,8 @@ const DropdownBase = (props) => {
   const dropdownRef = useRef(null);
   const optionsRef = useRef(null);
   const childrenRefList = useRef(React__default.Children.map(children, () => React__default.createRef()));
-  const { hoverRef: buttonRef, isHovered } = useHover();
+  const buttonRef = React__default.useRef(null);
+  const { isHovered } = usePseudoClasses(buttonRef);
   const openedByKeyboard = useRef(false);
   const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
   const isMobile = useIsMobileBreakpoint();
@@ -116,6 +117,7 @@ const DropdownBase = (props) => {
   };
   const handleClose = () => {
     var _a;
+    if (!isOpen) return;
     toggleIsOpen();
     (_a = buttonRef.current) == null ? void 0 : _a.focus();
   };

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useId, ComponentType } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem, SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon, { SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label, { LabelProps } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n  /** Text on the trigger button that opens the dropdown */\n  triggerText: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n  dropdownMinWidth?: number;\n  /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n  triggerMinWidth?: number;\n  /** Disables rendring of the close button in the list */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n  /** Adds an icon to the trigger */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the visual variant of the Dropdown */\n  variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n  const {\n    triggerText,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    triggerMinWidth,\n    open = false,\n    children,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n    svgIcon,\n    variant = 'fill',\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const isMobile = useIsMobileBreakpoint();\n  const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n  const triggerMinWidthLimit = isMobile ? 96 : 112;\n  const maxWidth = isMobile ? 384 : 400;\n  const toggleTextId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const leftIconProps = {\n    className: styles['dropdown__left-icon'],\n    size: IconSize.XSmall,\n    isHovered: !disabled && isHovered,\n  };\n\n  const isSingleSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n  );\n  const isMultiSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n  );\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const toggleClasses = classNames(styles.dropdown__toggle, {\n    [styles['dropdown__toggle--open']]: isOpen && !disabled,\n    [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n    [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n    [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n  });\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n  const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n  const { refs, floatingStyles } = useFloating({\n    placement: 'bottom',\n    middleware: [\n      offset(8),\n      shift({ padding: 8 }),\n      size({\n        apply({ availableWidth, availableHeight, elements, rects }) {\n          const triggerW = rects.reference.width;\n          const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n          const targetW = Math.max(triggerW, minProp);\n          const finalW = Math.min(availableWidth, targetW);\n\n          Object.assign(elements.floating.style, {\n            width: `${finalW}px`,\n            maxHeight: `${availableHeight}px`,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const focusByIndex = (nextIndex: number): void => {\n    childrenRefList.current?.[nextIndex]?.current?.focus();\n  };\n\n  const isListNavKey = (key: string): boolean =>\n    key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!childrenRefList.current) return;\n\n    const key = event.key as KeyboardEventKey;\n\n    if (key === KeyboardEventKey.Escape) {\n      if (isOpen) {\n        event.preventDefault();\n        handleClose();\n      }\n      return;\n    }\n\n    if (!isOpen) {\n      if (isListNavKey(key)) {\n        event.preventDefault();\n        handleOpen(true);\n      }\n      return;\n    }\n\n    if (!isListNavKey(key)) {\n      return;\n    }\n\n    const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n    let nextIndex = index;\n\n    if (key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (key === KeyboardEventKey.End) {\n      nextIndex = childrenRefList.current.length - 1;\n    } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      focusByIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    return (\n      <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && childrenRefList.current && childrenRefList.current[index]\n          ? ((): React.ReactElement => {\n              const baseProps: { ref: React.Ref<HTMLElement> } = {\n                ref: mergeRefs([child.props.ref, childrenRefList.current[index]]),\n              };\n\n              if (isMultiSelect) {\n                const label = (child.props as CheckboxProps).label as React.ReactNode;\n                if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n                  return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n                    ...baseProps,\n                    label: React.cloneElement(label, {\n                      labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n                    }),\n                  });\n                }\n              }\n\n              return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, baseProps);\n            })()\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={mergeRefs([buttonRef, refs.setReference])}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleTextId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        style={{\n          width: triggerActualMinWidth,\n          maxWidth: '100%',\n          minWidth: `${triggerMinWidthLimit}px`,\n        }}\n      >\n        {svgIcon && (\n          <>\n            {typeof svgIcon === 'string' ? (\n              <LazyIcon {...leftIconProps} iconName={svgIcon} />\n            ) : (\n              <Icon {...leftIconProps} svgIcon={svgIcon} />\n            )}\n          </>\n        )}\n        <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n          {triggerText}\n        </span>\n        <Icon\n          svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n          className={styles['dropdown__right-icon']}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        key={dropdownMinWidth ?? 'auto'}\n        id={contentId}\n        className={contentClasses}\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          zIndex: zIndex,\n        }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n          {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n          {isMultiSelect && renderChildren}\n        </ul>\n        {!isSingleSelect && !noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n  SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef, useId, ComponentType } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  usePseudoClasses,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem, SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { HNDesignsystemDropdown } from '../../resources/Resources';\nimport { isComponent } from '../../utils/component';\nimport { useLanguage } from '../../utils/language';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport Icon, { SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label, { LabelProps } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n  /** Text on the trigger button that opens the dropdown */\n  triggerText: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n  dropdownMinWidth?: number;\n  /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n  triggerMinWidth?: number;\n  /** Disables rendring of the close button in the list */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n  /** Adds an icon to the trigger */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the visual variant of the Dropdown */\n  variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n  const {\n    triggerText,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    triggerMinWidth,\n    open = false,\n    children,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n    svgIcon,\n    variant = 'fill',\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement>(buttonRef);\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const isMobile = useIsMobileBreakpoint();\n  const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n  const triggerMinWidthLimit = isMobile ? 96 : 112;\n  const maxWidth = isMobile ? 384 : 400;\n  const toggleTextId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const leftIconProps = {\n    className: styles['dropdown__left-icon'],\n    size: IconSize.XSmall,\n    isHovered: !disabled && isHovered,\n  };\n\n  const isSingleSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n  );\n  const isMultiSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n  );\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const toggleClasses = classNames(styles.dropdown__toggle, {\n    [styles['dropdown__toggle--open']]: isOpen && !disabled,\n    [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n    [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n    [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n  });\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n  const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n  const { refs, floatingStyles } = useFloating({\n    placement: 'bottom',\n    middleware: [\n      offset(8),\n      shift({ padding: 8 }),\n      size({\n        apply({ availableWidth, availableHeight, elements, rects }) {\n          const triggerW = rects.reference.width;\n          const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n          const targetW = Math.max(triggerW, minProp);\n          const finalW = Math.min(availableWidth, targetW);\n\n          Object.assign(elements.floating.style, {\n            width: `${finalW}px`,\n            maxHeight: `${availableHeight}px`,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    if (!isOpen) return;\n\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const focusByIndex = (nextIndex: number): void => {\n    childrenRefList.current?.[nextIndex]?.current?.focus();\n  };\n\n  const isListNavKey = (key: string): boolean =>\n    key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!childrenRefList.current) return;\n\n    const key = event.key as KeyboardEventKey;\n\n    if (key === KeyboardEventKey.Escape) {\n      if (isOpen) {\n        event.preventDefault();\n        handleClose();\n      }\n      return;\n    }\n\n    if (!isOpen) {\n      if (isListNavKey(key)) {\n        event.preventDefault();\n        handleOpen(true);\n      }\n      return;\n    }\n\n    if (!isListNavKey(key)) {\n      return;\n    }\n\n    const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n    let nextIndex = index;\n\n    if (key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (key === KeyboardEventKey.End) {\n      nextIndex = childrenRefList.current.length - 1;\n    } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      focusByIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    return (\n      <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(child) && childrenRefList.current && childrenRefList.current[index]\n          ? ((): React.ReactElement => {\n              const baseProps: { ref: React.Ref<HTMLElement> } = {\n                ref: mergeRefs([child.props.ref, childrenRefList.current[index]]),\n              };\n\n              if (isMultiSelect) {\n                const label = (child.props as CheckboxProps).label as React.ReactNode;\n                if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n                  return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n                    ...baseProps,\n                    label: React.cloneElement(label, {\n                      labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n                    }),\n                  });\n                }\n              }\n\n              return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, baseProps);\n            })()\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={mergeRefs([buttonRef, refs.setReference])}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleTextId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        style={{\n          width: triggerActualMinWidth,\n          maxWidth: '100%',\n          minWidth: `${triggerMinWidthLimit}px`,\n        }}\n      >\n        {svgIcon && (\n          <>\n            {typeof svgIcon === 'string' ? (\n              <LazyIcon {...leftIconProps} iconName={svgIcon} />\n            ) : (\n              <Icon {...leftIconProps} svgIcon={svgIcon} />\n            )}\n          </>\n        )}\n        <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n          {triggerText}\n        </span>\n        <Icon\n          svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n          className={styles['dropdown__right-icon']}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        key={dropdownMinWidth ?? 'auto'}\n        id={contentId}\n        className={contentClasses}\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          zIndex: zIndex,\n        }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n          {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n          {isMultiSelect && renderChildren}\n        </ul>\n        {!isSingleSelect && !noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n  SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"names":["React"],"mappings":"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"}

package/components/Dropdown/styles.module.scss

@@ -6,6 +6,7 @@
 
 .dropdown {
   position: relative;
+  max-width: fit-content;
 
   &__toggle {
     display: flex;

package/components/Panel/Panel.d.ts

@@ -42,7 +42,7 @@ export interface PanelProps {
     /** Sets classes on the outermost container of the panel */
     className?: string;
     /** Action called when toggling expansion of ExpandedContent */
-    onExpand?: () => void;
+    onExpand?: (isExpanded?: boolean) => void;
     /** Sets the stacking order of the content boxes */
     stacking?: PanelStacking;
     /** Sets the data-testid attribute. */

package/components/Toast/Toast.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface ToastProps {
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** The title to display in the toast */
+    title: string;
+    /** The message to display in the toast */
+    message?: string;
+    /** Callback when toast is closed */
+    onClose?: () => void;
+}
+declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/components/Toast/Toast.test.d.ts

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

package/components/Toast/index.d.ts

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

package/components/Toast/index.js

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

package/components/Toast/index.js.map

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

package/components/Toast/styles.module.scss

@@ -0,0 +1,50 @@
+@use '../../scss/font-mixins' as fonts;
+@use 'sass:map';
+@use '@helsenorge/designsystem-react/scss/breakpoints' as breakpoints;
+@import '../../scss/supernova/styles/colors.css';
+
+.toast {
+  max-width: 40rem;
+  width: fit-content;
+  margin: 0 auto;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  background-color: var(--core-color-kiwi-50);
+  border: 2px solid var(--core-color-kiwi-900);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+  pointer-events: auto;
+
+  &__icon {
+    align-self: flex-start;
+    fill: var(--core-color-kiwi-900);
+  }
+
+  &__text-container {
+    --margin-top: 0;
+
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-top: var(--margin-top);
+
+    &:has(.toast__description) {
+      --margin-top: 0.5rem;
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, sm)) {
+        --margin-top: 0.625rem;
+      }
+    }
+  }
+
+  &__title {
+    @include fonts.title6;
+  }
+
+  &__description {
+    @include fonts.compact-data;
+  }
+}

package/components/ToastList/ToastList.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface ToastData {
+    id: string;
+    title: string;
+    message?: string;
+}
+export interface ToastListProps {
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Array of toast data to display */
+    toasts?: ToastData[];
+}
+declare const ToastList: React.ForwardRefExoticComponent<ToastListProps & React.RefAttributes<HTMLElement>>;
+export default ToastList;

package/components/ToastList/ToastList.test.d.ts

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

package/components/ToastList/index.d.ts

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