@helsenorge/designsystem-react 9.5.0 → 9.6.0

package/Label.js

@@ -21,16 +21,17 @@ const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) =
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Spacer, { size: "3xs" }),
     (subLabels || children) && /* @__PURE__ */ jsxs("div", { className, id, "data-testid": testId, "data-analyticsid": AnalyticsId.Sublabel, children: [
-      children,
-      subLabels
+      subLabels,
+      children
     ] }),
     ariaHiddenSublabels && /* @__PURE__ */ jsx("div", { className, "data-testid": testId, children: ariaHiddenSublabels })
   ] });
 };
 const getLabelText = (label) => {
+  var _a;
   let allLabelText = "";
   if (isComponent(label, Label)) {
-    label.props.labelTexts.forEach((labelText) => {
+    (_a = label.props.labelTexts) == null ? void 0 : _a.forEach((labelText) => {
       allLabelText += !labelText.hideFromScreenReader ? labelText.text : "";
     });
   }
@@ -91,6 +92,7 @@ const Label = ({
     className
   );
   const mapLabels = () => {
+    if (typeof labelTexts === "undefined") return null;
     return labelTexts.map((labelText, index) => {
       const labelClasses = classNames(
         styles.label,

package/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--semibold']]: sublabelText.type === 'semibold',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {children}\n          {subLabels}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--semibold']]: labelText.type === 'semibold',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn"],"mappings":"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"}
+{"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n  /** Sets the content of the Sublabel */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** id that is placed on the wrapper */\n  id: string;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: FormOnColor;\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  sublabelTexts?: LabelText[];\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ children, className, id, onColor, sublabelTexts, testId }) => {\n  const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n    return (\n      sublabelTexts &&\n      sublabelTexts.map((sublabelText, index) => {\n        const labelClasses = cn(styles.label, styles['label--sublabel'], {\n          [styles['label--semibold']]: sublabelText.type === 'semibold',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        });\n        return (\n          hideFromScreenReader === sublabelText.hideFromScreenReader && (\n            <span className={labelClasses} key={index}>\n              {sublabelText.text}\n            </span>\n          )\n        );\n      })\n    );\n  };\n\n  const subLabels = mapSublabels();\n  const ariaHiddenSublabels = mapSublabels(true);\n\n  return (\n    <>\n      <Spacer size={'3xs'} />\n      {(subLabels || children) && (\n        <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n          {subLabels}\n          {children}\n        </div>\n      )}\n      {ariaHiddenSublabels && (\n        <div className={className} data-testid={testId}>\n          {ariaHiddenSublabels}\n        </div>\n      )}\n    </>\n  );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormOnColor } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n  hideFromScreenReader?: boolean;\n  text: string;\n  type?: 'semibold' | 'normal';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'label' | 'p';\n\nexport interface LabelProps {\n  /** Component shown after label - discourage use of this */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the Label */\n  children?: React.ReactNode;\n  /** Adds custom classes to the label tag. */\n  labelClassName?: string;\n  /** Adds custom classes to the label text. */\n  labelTextClassName?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Id that is put on the \"for\" attribute of the label */\n  htmlFor?: string;\n  /** Changes the underlying element of the label */\n  htmlMarkup?: LabelTags;\n  /** Id som plasseres på <label/> */\n  labelId?: string;\n  /** Array of main label strings. Can be of type semibold or normal */\n  labelTexts?: LabelText[];\n  /** Array of sublabel strings. Can be of type semibold or normal */\n  onColor?: keyof typeof FormOnColor;\n  /** StatusDot placed underneath the last sublabel */\n  statusDot?: React.ReactNode;\n  /** Sublabel component */\n  sublabel?: React.ReactNode;\n  /** Adds custom classes to the div wrapping the sublabels. */\n  sublabelWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n  let allLabelText = '';\n\n  if (isComponent<LabelProps>(label, Label)) {\n    label.props.labelTexts?.forEach(labelText => {\n      allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n    });\n  }\n\n  return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, onColor: FormOnColor, markup?: LabelTags): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            htmlMarkup: markup || 'label',\n            onColor,\n          })\n        : typeof label === 'string' && <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} onColor={onColor} />}\n    </>\n  );\n};\n\nexport const renderLabelAsParent = (\n  label: React.ReactNode,\n  children: React.ReactNode,\n  inputId: string,\n  onColor: FormOnColor,\n  labelClassName?: string,\n  labelTextClassName?: string,\n  sublabelWrapperClassName?: string,\n  large?: boolean,\n  markup?: LabelTags\n): React.ReactNode => {\n  return (\n    <>\n      {label && isComponent<LabelProps>(label, Label)\n        ? React.cloneElement(label, {\n            htmlFor: inputId,\n            onColor,\n            children: children,\n            labelClassName: cn(labelClassName, label.props.labelClassName),\n            labelTextClassName: labelTextClassName,\n            htmlMarkup: markup || 'label',\n            sublabelWrapperClassName: sublabelWrapperClassName,\n            sublabel: large ? undefined : label.props.sublabel,\n            statusDot: large ? undefined : label.props.statusDot,\n          })\n        : typeof label === 'string' && (\n            <Label\n              labelTexts={[{ text: label }]}\n              htmlFor={inputId}\n              onColor={onColor}\n              htmlMarkup={markup || 'label'}\n              labelClassName={labelClassName}\n              labelTextClassName={labelTextClassName}\n              sublabelWrapperClassName={sublabelWrapperClassName}\n            >\n              {children}\n            </Label>\n          )}\n    </>\n  );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n  afterLabelChildren,\n  children,\n  className,\n  htmlFor,\n  htmlMarkup = 'label',\n  labelClassName,\n  labelTextClassName,\n  labelId,\n  labelTexts,\n  onColor = FormOnColor.onwhite,\n  statusDot,\n  sublabel,\n  sublabelWrapperClassName,\n  testId,\n}) => {\n  const hasChildren = children && typeof children !== 'undefined';\n  const labelWrapperClasses = cn(\n    styles['label-wrapper'],\n    { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n    className\n  );\n\n  const mapLabels = (): React.ReactNode => {\n    if (typeof labelTexts === 'undefined') return null;\n\n    return labelTexts.map((labelText, index) => {\n      const labelClasses = cn(\n        styles.label,\n        {\n          [styles['label--semibold']]: labelText.type === 'semibold',\n          [styles['label--on-dark']]: onColor === FormOnColor.ondark,\n        },\n        labelTextClassName\n      );\n      return (\n        <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n          {labelText.text}\n        </span>\n      );\n    });\n  };\n  const CustomTag = htmlMarkup;\n\n  return (\n    <div className={labelWrapperClasses}>\n      <div>\n        <CustomTag className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n          <span className={styles['label-content-wrapper']}>\n            {children}\n            <span className={styles.label__texts}>{mapLabels()}</span>\n          </span>\n        </CustomTag>\n        <div className={sublabelWrapperClassName}>\n          {sublabel &&\n            isComponent<SublabelProps>(sublabel, Sublabel) &&\n            React.cloneElement(sublabel, {\n              onColor: onColor as FormOnColor,\n            })}\n          {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n            <>\n              <Spacer size={'3xs'} />\n              {React.cloneElement(statusDot, {\n                onColor: onColor === FormOnColor.ondark ? 'ondark' : 'onwhite',\n              })}\n            </>\n          )}\n        </div>\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn"],"mappings":"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"}

package/ListHeader.js

@@ -4,7 +4,6 @@ import classNames from "classnames";
 import { L as ListHeaderText } from "./ListHeaderText.js";
 import { useBreakpoint, Breakpoint } from "./hooks/useBreakpoint.js";
 import { isComponent, isComponentWithChildren } from "./utils/component.js";
-import { u as uuid } from "./uuid.js";
 import { A as Avatar, a as AvatarSize } from "./Avatar.js";
 import { B as Badge } from "./Badge.js";
 import { I as Icon } from "./Icon.js";
@@ -111,9 +110,8 @@ const ListHeader = (props) => {
       !!(mappedChildren == null ? void 0 : mappedChildren.stringChildren.length) && /* @__PURE__ */ jsx(CustomTag, { className: styles["list-header__title"], children: mappedChildren.stringChildren }),
       mappedChildren == null ? void 0 : mappedChildren.remainingChildren
     ] }),
-    (mappedChildren == null ? void 0 : mappedChildren.badgeChildren) && mappedChildren.badgeChildren.map((badgeChild) => {
-      const id = uuid();
-      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: badgeChild }, id);
+    (mappedChildren == null ? void 0 : mappedChildren.badgeChildren) && mappedChildren.badgeChildren.map((badgeChild, index) => {
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: badgeChild }, index);
     }),
     showChevronAndIcon && chevronIcon && /* @__PURE__ */ jsx("span", { className: chevronClasses, children: /* @__PURE__ */ jsx(Icon, { svgIcon: chevronIcon, isHovered, size: IconSize.XSmall }) })
   ] });

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport uuid from '../../utils/uuid';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChildren &&\n        mappedChildren.badgeChildren.map(badgeChild => {\n          const id = uuid();\n          return (\n            <span key={id} className={badgeClasses}>\n              {badgeChild}\n            </span>\n          );\n        })}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["cn"],"mappings":";;;;;;;;;;;;AAuBO,MAAM,mBAAmB,CAC9B,SACA,iBACA,WACA,MACA,aACA,SAC4B;AACxB,MAAA,YAA6B,SAAS,UAAU,GAAG;AAC9C,WAAA,MAAM,aAAa,SAAS;AAAA,MACjC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,EAAA;AAEH,MAAI,SAAS;AACX,+BACG,YAAW,EAAA,iBAAkC,aAA0B,MAAY,WAAsB,MACvG,UACH,SAAA;AAAA,EAAA;AAGN;AAgCO,MAAM,cAA8B,CAAC,UAAU,aAAa,UAAU;;AACvE,MAAA;AACJ,QAAM,gBAAkD,CAAC;AACzD,QAAM,yBAAoE,CAAC;AAC3E,QAAM,iBAA2B,CAAC;AAClC,QAAM,oBAAuC,CAAC;AAExC,QAAA,SAAS,QAAQ,UAAU,CAAS,UAAA;AACxC,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;AAChD,QAAA,YAAyB,OAAO,MAAM,GAAG;AAC7B,oBAAA;AAAA,IACL,WAAA,YAAiC,OAAO,cAAc,GAAG;AAClE,6BAAuB,KAAK,KAAK;AAAA,IACxB,WAAA,YAAwB,OAAO,KAAK,GAAG;AAChD,oBAAc,KAAK,KAAK;AAAA,IAAA,WACf,OAAO,UAAU,UAAU;AACpC,qBAAe,KAAK,KAAK;AAAA,IAAA,OACpB;AACL,wBAAkB,KAAK,KAAK;AAAA,IAAA;AAAA,EAC9B,CACD;AAIK,QAAA,qBACJ,gBAAgB,UAAa,uBAAuB,SAAS,KAAM,kBAAkB,UAAa,eAAe,SAAS;AAC5H,QAAM,+BACJ,kBAAkB,WAAW,KAC5B,wBAAwB,kBAAkB,CAAC,CAAC,KAAK,SAAO,6BAAkB,CAAC,MAAnB,mBAAsB,UAAtB,mBAA6B,cAAa;AAEjG,MAAA,cAAc,sBAAsB,8BAA8B;AACpE,WAAO,EAAE,aAAa,wBAAwB,eAAe,gBAAgB,kBAAkB;AAAA,EAAA;AAGjG,MAAI,wBAAwB,kBAAkB,CAAC,CAAC,GAAG;AACjD,WAAO,aAAY,6BAAkB,CAAC,MAAnB,mBAAsB,UAAtB,mBAA6B,UAAU,IAAI;AAAA,EAAA;AAElE;AAEO,MAAM,aAA6B,CAAS,UAAA;AAC3C,QAAA,EAAE,YAAY,IAAI,kBAAkB,MAAM,aAAa,UAAU,MAAM,WAAW,MAAM,OAAW,IAAA;AACzG,QAAM,aAAa,cAAc;AACjC,QAAM,qBAAqB,SAAS,WAAW,CAAC,EAAE,eAAe;AAC3D,QAAA,kBAAkB,OAAO,aAAa;AACtC,QAAA,iBAAiB,YAAY,QAAQ;AAC3C,QAAM,mBACJ,iDAAgB,iBACf,iDAAgB,2BAA0B,eAAe,uBAAuB,SAAS,MACzF,iDAAgB,uBAAqB,iDAAgB,kBAAkB,UAAS;AAEnF,QAAM,mBAAmBA;AAAAA,IACvB,OAAO,aAAa;AAAA,IACpB;AAAA,MACE,CAAC,OAAO,kCAAkC,CAAC,GAAG,CAAC;AAAA,MAC/C,CAAC,OAAO,gCAAgC,CAAC,GAAG;AAAA,IAC9C;AAAA,IACA;AAAA,EACF;AACA,QAAM,eAAeA;AAAAA,IACnB,OAAO,oBAAoB;AAAA,IAC3B;AAAA,MACE,CAAC,OAAO,wCAAwC,CAAC,GAAG;AAAA,IACtD;AAAA,IACA,CAAC,mBAAmB,QAAQ,OAAO,uBAAuB,IAAI,EAAE;AAAA,EAClE;AACA,QAAM,iBAAiBA,WAAG,OAAO,sBAAsB,GAAG,CAAC,mBAAmB,QAAQ,OAAO,yBAAyB,IAAI,EAAE,GAAG;AAAA,IAC7H,CAAC,OAAO,0CAA0C,CAAC,GAAG;AAAA,EAAA,CACvD;AACD,QAAM,iBAAiBA,WAAG,OAAO,sBAAsB,GAAG;AAAA,IACxD,CAAC,OAAO,8BAA8B,CAAC,GAAG;AAAA,IAC1C,CAAC,OAAO,+BAA+B,CAAC,GAAG,CAAC;AAAA,IAC5C,CAAC,OAAO,+BAA+B,CAAC,GAAG,EAAC,iDAAgB,gBAAe,CAAC;AAAA,EAAA,CAC7E;AACD,QAAM,cAAcA;AAAAA,IAClB,OAAO,mBAAmB;AAAA,IAC1B,CAAC,mBAAmB,SAAS,SAAS,YAAY,SAAS,YAAY,OAAO,2CAA2C,IAAI,EAAE;AAAA,IAC/H;AAAA,MACE,CAAC,OAAO,uCAAuC,CAAC,GAAG;AAAA,MACnD,CAAC,OAAO,wCAAwC,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EAEzD;AACA,QAAM,gBAAgBA;AAAAA,IACpB,OAAO,qBAAqB;AAAA,IAC5B,CAAC,mBAAmB,SAAS,SAAS,YAAY,SAAS,YAAY,OAAO,6CAA6C,IAAI,EAAE;AAAA,IACjI;AAAA,MACE,CAAC,OAAO,yCAAyC,CAAC,GAAG;AAAA,MACrD,CAAC,OAAO,0CAA0C,CAAC,GAAG,CAAC;AAAA,IAAA;AAAA,EAE3D;AACA,QAAM,YAAY;AAClB,SACG,qBAAA,QAAA,EAAK,eAAa,QAAQ,WAAW,kBACnC,UAAA;AAAA,IAAA,sBAAsB,QACpB,oBAAA,QAAA,EAAK,WAAW,aACd,UAAA,MAAM,aAAa,MAAM;AAAA,MACxB,MAAM,eAAe,WAAW,KAAK,SAAS,SAAS,SAAS;AAAA,MAChE;AAAA,IACD,CAAA,GACH;AAAA,IAED,SAAS,YAAW,iDAAgB,gBACnC,oBAAC,UAAK,WAAW,eAAgB,UAAM,MAAA,aAAa,eAAe,aAAa,EAAE,MAAM,WAAW,OAAQ,CAAA,GAAE;AAAA,IAE/G,qBAAC,QAAK,EAAA,WAAW,gBACd,UAAA;AAAA,MAAgB,iDAAA;AAAA,MAChB,CAAC,EAAC,iDAAgB,eAAe,WAChC,oBAAC,WAAU,EAAA,WAAW,OAAO,oBAAoB,GAAI,UAAA,eAAe,eAAe,CAAA;AAAA,MAEpF,iDAAgB;AAAA,IAAA,GACnB;AAAA,KAEC,iDAAgB,kBACf,eAAe,cAAc,IAAI,CAAc,eAAA;AAC7C,YAAM,KAAK,KAAK;AAChB,aACG,oBAAA,QAAA,EAAc,WAAW,cACvB,wBADQ,EAEX;AAAA,IAAA,CAEH;AAAA,IACF,sBAAsB,eACpB,oBAAA,QAAA,EAAK,WAAW,gBACf,UAAA,oBAAC,MAAK,EAAA,SAAS,aAAa,WAAsB,MAAM,SAAS,QAAQ,EAC3E,CAAA;AAAA,EAAA,GAEJ;AAEJ;AAEA,WAAW,cAAc;"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isComponent, isComponentWithChildren } from '../../utils/component';\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.FC<ListHeaderProps> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  chevronIcon?: SvgIcon,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface ListHeaderChildren {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[];\n  badgeChildren?: React.ReactElement<BadgeProps>[];\n  elementChild?: React.ReactElement;\n  stringChildren: string[];\n  remainingChildren: React.ReactNode[];\n}\n\ntype ChildrenMapper = (children: React.ReactNode, isJsxChild?: boolean) => ListHeaderChildren | undefined;\n\nexport const mapChildren: ChildrenMapper = (children, isJsxChild = false) => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  const badgeChildren: React.ReactElement<BadgeProps>[] = [];\n  const listHeaderTextChildren: React.ReactElement<ListHeaderTextProps>[] = [];\n  const stringChildren: string[] = [];\n  const remainingChildren: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChildren.push(child);\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChildren !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren =\n    remainingChildren.length === 0 ||\n    (isComponentWithChildren(remainingChildren[0]) && typeof remainingChildren[0]?.props?.children === 'undefined');\n\n  if (isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren) {\n    return { avatarChild, listHeaderTextChildren, badgeChildren, stringChildren, remainingChildren };\n  }\n\n  if (isComponentWithChildren(remainingChildren[0])) {\n    return mapChildren(remainingChildren[0]?.props?.children, true);\n  }\n};\n\nexport const ListHeader: ListHeaderType = props => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren?.avatarChild ||\n    (mappedChildren?.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren?.remainingChildren && mappedChildren?.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(\n    styles['list-header__badge'],\n    {\n      [styles['list-header__badge--for-string-content']]: contentIsString,\n    },\n    !contentIsString && size && styles[`list-header__badge--${size}`]\n  );\n  const chevronClasses = cn(styles['list-header__chevron'], !contentIsString && size && styles[`list-header__chevron--${size}`], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren?.avatarChild && !icon,\n  });\n  const iconClasses = cn(\n    styles['list-header__icon'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__icon--for-element-content--${size}`],\n    {\n      [styles['list-header__icon--for-string-content']]: contentIsString,\n      [styles['list-header__icon--for-element-content']]: !contentIsString,\n    }\n  );\n  const avatarClasses = cn(\n    styles['list-header__avatar'],\n    !contentIsString && size && (size === 'medium' || size === 'large') && styles[`list-header__avatar--for-element-content--${size}`],\n    {\n      [styles['list-header__avatar--for-string-content']]: contentIsString,\n      [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    }\n  );\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <span data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren?.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <span className={contentClasses}>\n        {mappedChildren?.listHeaderTextChildren}\n        {!!mappedChildren?.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren?.remainingChildren}\n      </span>\n\n      {mappedChildren?.badgeChildren &&\n        mappedChildren.badgeChildren.map((badgeChild, index) => {\n          return (\n            <span key={index} className={badgeClasses}>\n              {badgeChild}\n            </span>\n          );\n        })}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </span>\n  );\n};\n\nListHeader.displayName = 'ListHeader';\n\nexport default ListHeader;\n"],"names":["cn"],"mappings":"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"}

package/TabList.js

@@ -9,6 +9,9 @@ import styles from "./components/Tabs/TabList/styles.module.scss";
 import { useIsVisible } from "./hooks/useIsVisible.js";
 import { useRovingFocus } from "./hooks/useRovingFocus.js";
 import { isComponent } from "./utils/component.js";
+import { useHover } from "./hooks/useHover.js";
+import ChevronLeft from "./components/Icons/ChevronLeft.js";
+import ChevronRight from "./components/Icons/ChevronRight.js";
 const Tab = (props) => {
   return /* @__PURE__ */ jsx(Fragment, { children: props.children ?? null });
 };
@@ -62,8 +65,24 @@ const TabItem = (props) => {
     }
   ) });
 };
+const TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
+  const buttonRef = React.useRef(null);
+  const { isHovered } = useHover(buttonRef);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ref: buttonRef,
+      className: styles["tab-list__button"],
+      onClick,
+      "aria-label": ariaLabel,
+      style: { backgroundColor },
+      children: direction === "left" ? /* @__PURE__ */ jsx(Icon, { color: "var(--color-action-graphics-onlight)", isHovered, svgIcon: ChevronLeft, size: IconSize.XSmall }) : /* @__PURE__ */ jsx(Icon, { color: "var(--color-action-graphics-onlight)", isHovered, svgIcon: ChevronRight, size: IconSize.XSmall })
+    }
+  );
+};
 const TabList = (props) => {
-  const { selectedTab, onTabListClick, children, color, onColor } = props;
+  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;
   const listRef = useRef(null);
   const tabRefs = useRef(React.Children.map(children, () => React.createRef()) || []);
   useRovingFocus(onTabListClick, tabRefs, listRef, true);
@@ -84,22 +103,46 @@ const TabList = (props) => {
   const lastTabVisible = useIsVisible(lastTab);
   const tabListVisible = useIsVisible(listRef);
   const shouldShowFadeStart = () => {
-    return !firstTabVisible && selectedTab !== 0;
+    return !firstTabVisible;
   };
   const shouldShowFadeEnd = () => {
-    return !lastTabVisible && selectedTab !== tabRefs.current.length - 1;
+    return !lastTabVisible;
+  };
+  const scrollInList = (direction) => {
+    if (listRef.current) {
+      const listWidth = listRef.current.clientWidth;
+      const listScrollLeft = listRef.current.scrollLeft;
+      const maxScrollLeft = listRef.current.scrollWidth - listWidth;
+      if (direction === "right" && !lastTabVisible) {
+        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);
+        listRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+      } else if (direction === "left" && !firstTabVisible) {
+        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);
+        listRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
+      }
+    }
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classNames(styles["tab-list__fade-start"]),
-        style: {
-          display: shouldShowFadeStart() ? "block" : "none",
-          backgroundColor: `${getBackgroundColor(onColor)}`
+    shouldShowFadeStart() && /* @__PURE__ */ jsxs("div", { className: classNames(styles["tab-list__start-wrapper"]), children: [
+      /* @__PURE__ */ jsx(
+        TabChevron,
+        {
+          onClick: () => scrollInList("left"),
+          direction: "left",
+          backgroundColor: `${getBackgroundColor(onColor)}`,
+          ariaLabel: ariaLabelLeftButton
         }
-      }
-    ),
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(styles["tab-list__fade-start"]),
+          style: {
+            backgroundColor: `${getBackgroundColor(onColor)}`
+          }
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx("ul", { className: tablistClasses, ref: listRef, role: "tablist", "aria-orientation": "horizontal", children: React.Children.map(children, (child, index) => {
       if (isComponent(child, Tab)) {
         return /* @__PURE__ */ jsx(
@@ -118,16 +161,26 @@ const TabList = (props) => {
       }
       return null;
     }) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: classNames(styles["tab-list__fade-end"]),
-        style: {
-          display: shouldShowFadeEnd() ? "block" : "none",
-          backgroundColor: `${getBackgroundColor(onColor)}`
+    shouldShowFadeEnd() && /* @__PURE__ */ jsxs("div", { className: classNames(styles["tab-list__end-wrapper"]), children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(styles["tab-list__fade-end"]),
+          style: {
+            backgroundColor: `${getBackgroundColor(onColor)}`
+          }
         }
-      }
-    ),
+      ),
+      /* @__PURE__ */ jsx(
+        TabChevron,
+        {
+          onClick: () => scrollInList("right"),
+          direction: "right",
+          backgroundColor: `${getBackgroundColor(onColor)}`,
+          ariaLabel: ariaLabelRightButton
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx("div", { className: classNames(styles["tab-list__border"]) })
   ] });
 };

package/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView && currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible && selectedTab !== 0;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible && selectedTab !== tabRefs.current.length - 1;\n  };\n\n  return (\n    <div>\n      <div\n        className={classNames(styles['tab-list__fade-start'])}\n        style={{\n          display: shouldShowFadeStart() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      <div\n        className={classNames(styles['tab-list__fade-end'])}\n        style={{\n          display: shouldShowFadeEnd() ? 'block' : 'none',\n          backgroundColor: `${getBackgroundColor(onColor)}`,\n        }}\n      ></div>\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["currentRef","onColor"],"mappings":"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"}
+{"version":3,"file":"TabList.js","sources":["../src/components/Tabs/Tab.tsx","../src/components/Tabs/TabList/TabItem.tsx","../src/components/Tabs/TabList/TabChevron.tsx","../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { palette } from '../../../theme/palette';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport { TabProps } from '../Tab';\nimport { TabsColors } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabItemProps {\n  tabProps: TabProps;\n  index: number;\n  color: TabsColors;\n  selectedTab: number;\n  tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;\n  tabListVisible: boolean;\n  onTabListClick: (index: number) => void;\n}\n\nconst TabItem: React.FC<TabItemProps> = props => {\n  const isSelected = props.index === props.selectedTab;\n  const { title, onTabClick, icon, testId } = props.tabProps;\n  const handleClick = (): void => {\n    onTabClick && onTabClick(props.index);\n    props.onTabListClick(props.index);\n    scrollToTab(props.index);\n  };\n  const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${props.color}`], {\n    [styles['tab-list__tab--selected']]: isSelected,\n    [styles['tab-list__tab--not-selected']]: !isSelected,\n  });\n\n  const currentRef = props.tabRefs.current && props.tabRefs.current[props.index];\n\n  const scrollToTab = (index: number): void => {\n    const currentRef = props.tabRefs.current && props.tabRefs.current[index];\n    currentRef?.current?.scrollIntoView && currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });\n  };\n\n  const itemRef = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (isSelected && props.tabListVisible) {\n      scrollToTab(props.index);\n    }\n  }, [isSelected]);\n\n  return (\n    <li role=\"presentation\" ref={itemRef}>\n      <button\n        role=\"tab\"\n        aria-selected={isSelected}\n        onClick={handleClick}\n        className={tabButtonClasses}\n        data-testid={testId}\n        ref={currentRef as React.RefObject<HTMLButtonElement>}\n        style={{\n          borderBottom: isSelected\n            ? `2px solid var(--color-base-background-${props.color})`\n            : '1px solid var(--color-action-border-onlight-focus)',\n        }}\n      >\n        <span className={styles['tab-list__tab__title-and-icon']}>\n          {icon &&\n            (typeof icon === 'string' ? (\n              <LazyIcon\n                iconName={icon as IconName}\n                size={IconSize.XSmall}\n                color={isSelected ? palette[`black`] : palette['blueberry500']}\n              />\n            ) : (\n              <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n            ))}\n          {title}\n        </span>\n      </button>\n    </li>\n  );\n};\n\nexport default TabItem;\n","import React from 'react';\n\nimport { useHover } from '../../../hooks/useHover';\nimport Icon, { IconSize } from '../../Icon';\nimport ChevronLeft from '../../Icons/ChevronLeft';\nimport ChevronRight from '../../Icons/ChevronRight';\n\nimport styles from './styles.module.scss';\n\ninterface TabChevronProps {\n  direction: 'left' | 'right';\n  onClick: () => void;\n  backgroundColor?: string;\n  ariaLabel?: string;\n}\n\nconst TabChevron: React.FC<TabChevronProps> = ({ direction, onClick, backgroundColor, ariaLabel }) => {\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover<HTMLButtonElement>(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      className={styles['tab-list__button']}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      style={{ backgroundColor: backgroundColor }}\n    >\n      {direction === 'left' ? (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronLeft} size={IconSize.XSmall} />\n      ) : (\n        <Icon color={'var(--color-action-graphics-onlight)'} isHovered={isHovered} svgIcon={ChevronRight} size={IconSize.XSmall} />\n      )}\n    </button>\n  );\n};\n\nexport default TabChevron;\n","import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport TabItem from './TabItem';\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { isComponent } from '../../../utils/component';\nimport Tab, { TabProps } from '../Tab';\nimport { TabsColors, TabsOnColor } from '../Tabs';\nimport TabChevron from './TabChevron';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color: TabsColors;\n  onColor: TabsOnColor;\n  ariaLabelRightButton?: string;\n  ariaLabelLeftButton?: string;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color, onColor, ariaLabelLeftButton, ariaLabelRightButton } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()) || []);\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${onColor}`]);\n\n  const getBackgroundColor = (onColor: TabsOnColor): string => {\n    switch (onColor) {\n      case 'onwhite':\n        return 'var(--color-base-background-white)';\n      case 'onblueberry':\n        return 'var(--color-base-background-blueberry)';\n      case 'onneutral':\n        return 'var(--color-base-background-neutral)';\n    }\n  };\n  const firstTab = tabRefs.current && tabRefs.current[0];\n  const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];\n\n  const firstTabVisible = useIsVisible(firstTab);\n  const lastTabVisible = useIsVisible(lastTab);\n  const tabListVisible = useIsVisible(listRef);\n\n  const shouldShowFadeStart = (): boolean => {\n    return !firstTabVisible;\n  };\n\n  const shouldShowFadeEnd = (): boolean => {\n    return !lastTabVisible;\n  };\n\n  const scrollInList = (direction: string): void => {\n    if (listRef.current) {\n      const listWidth = listRef.current.clientWidth;\n      const listScrollLeft = listRef.current.scrollLeft;\n      const maxScrollLeft = listRef.current.scrollWidth - listWidth;\n\n      if (direction === 'right' && !lastTabVisible) {\n        const scrollAmount = Math.min(listWidth / 2, maxScrollLeft - listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      } else if (direction === 'left' && !firstTabVisible) {\n        const scrollAmount = -Math.min(listWidth / 2, listScrollLeft);\n        listRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n      }\n    }\n  };\n\n  return (\n    <div>\n      {shouldShowFadeStart() && (\n        <div className={classNames(styles['tab-list__start-wrapper'])}>\n          <TabChevron\n            onClick={() => scrollInList('left')}\n            direction=\"left\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelLeftButton}\n          />\n          <div\n            className={classNames(styles['tab-list__fade-start'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n        </div>\n      )}\n      <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n        {React.Children.map(children, (child, index) => {\n          if (isComponent<TabProps>(child, Tab)) {\n            return (\n              <TabItem\n                tabRefs={tabRefs}\n                tabListVisible={tabListVisible}\n                key={child.props.title}\n                index={index}\n                selectedTab={selectedTab}\n                onTabListClick={onTabListClick}\n                tabProps={child.props}\n                color={color}\n              />\n            );\n          }\n          return null;\n        })}\n      </ul>\n      {shouldShowFadeEnd() && (\n        <div className={classNames(styles['tab-list__end-wrapper'])}>\n          <div\n            className={classNames(styles['tab-list__fade-end'])}\n            style={{\n              backgroundColor: `${getBackgroundColor(onColor)}`,\n            }}\n          ></div>\n          <TabChevron\n            onClick={() => scrollInList('right')}\n            direction=\"right\"\n            backgroundColor={`${getBackgroundColor(onColor)}`}\n            ariaLabel={ariaLabelRightButton}\n          />\n        </div>\n      )}\n      <div className={classNames(styles['tab-list__border'])}></div>\n    </div>\n  );\n};\n\nexport default TabList;\n"],"names":["currentRef","onColor"],"mappings":"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"}

package/components/ExpanderList/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useEffect } from "react";
 import classNames from "classnames";
-import { AnalyticsId, ZIndex } from "../../constants.js";
+import { AnalyticsId } from "../../constants.js";
 import { useExpand } from "../../hooks/useExpand.js";
 import { useHover } from "../../hooks/useHover.js";
 import { useUuid } from "../../hooks/useUuid.js";
@@ -82,7 +82,7 @@ const Expander = React.forwardRef((props, ref) => {
         ref: triggerRef,
         "aria-expanded": isExpanded,
         style: {
-          zIndex: isHovered ? zIndex : void 0
+          zIndex: zIndex ?? void 0
         },
         children: renderListHeader(title, titleHtmlMarkup, isHovered, large ? "large" : "medium", isExpanded ? ChevronUp : ChevronDown, icon)
       }
@@ -102,7 +102,7 @@ const ExpanderList = React.forwardRef((props, ref) => {
     accordion = false,
     testId,
     variant,
-    zIndex = ZIndex.ExpanderTrigger
+    zIndex
   } = props;
   const [activeExpander, setActiveExpander] = useState();
   const [latestExpander, setLatestExpander] = useState();

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isHovered ? zIndex : undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: zIndex ?? undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    const newActiveExpander = React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n\n    setActiveExpander({ ...activeExpander, ...newActiveExpander });\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            'aria-expanded': expanded,\n            className: expanderListStyles['expander-list__item'],\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n            zIndex: zIndex,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":[],"mappings":"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"}

package/components/Label/Label.d.ts

@@ -24,7 +24,7 @@ export interface LabelProps {
     /** Id som plasseres på <label/> */
     labelId?: string;
     /** Array of main label strings. Can be of type semibold or normal */
-    labelTexts: LabelText[];
+    labelTexts?: LabelText[];
     /** Array of sublabel strings. Can be of type semibold or normal */
     onColor?: keyof typeof FormOnColor;
     /** StatusDot placed underneath the last sublabel */

package/components/Modal/styles.module.scss

@@ -11,6 +11,7 @@
   justify-content: center;
   position: fixed;
   inset: 0;
+  container-type: inline-size;
 
   @media print {
     position: absolute;
@@ -90,6 +91,10 @@
     @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 696px;
     }
+
+    @container (max-width: 500px) {
+      padding-bottom: getSpacer(2xs);
+    }
   }
 
   &--medium {
@@ -126,6 +131,7 @@
     transition: opacity 0.5s;
     opacity: 0;
     z-index: 2;
+    pointer-events: none;
   }
 
   &__shadow--top {
@@ -169,6 +175,10 @@
       max-height: none;
     }
 
+    @container (max-width: 500px) {
+      max-height: calc(100dvh - 4rem);
+    }
+
     &--image {
       max-height: 100vh;
     }
@@ -180,6 +190,10 @@
         @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
         }
+
+        @container (max-width: 500px) {
+          padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
+        }
       }
 
       &--medium {
@@ -188,6 +202,10 @@
         @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
         }
+
+        @container (max-width: 500px) {
+          padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
+        }
       }
       &--large#{&}--image {
         padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
@@ -239,10 +257,18 @@
       @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(l) getSpacer(xl) 0;
       }
+
+      @container (max-width: 500px) {
+        padding: getSpacer(2xs) getSpacer(2xs) 0;
+      }
     }
 
     &--medium {
       padding: getSpacer(m) getSpacer(m) 0;
+
+      @container (max-width: 500px) {
+        padding: getSpacer(2xs) getSpacer(2xs) 0;
+      }
     }
   }
 

package/components/Tabs/TabList/TabChevron.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface TabChevronProps {
+    direction: 'left' | 'right';
+    onClick: () => void;
+    backgroundColor?: string;
+    ariaLabel?: string;
+}
+declare const TabChevron: React.FC<TabChevronProps>;
+export default TabChevron;

package/components/Tabs/TabList/TabList.d.ts

@@ -6,6 +6,8 @@ interface TabListProps {
     selectedTab: number;
     color: TabsColors;
     onColor: TabsOnColor;
+    ariaLabelRightButton?: string;
+    ariaLabelLeftButton?: string;
 }
 declare const TabList: React.FC<TabListProps>;
 export default TabList;

package/components/Tabs/TabList/styles.module.scss

@@ -108,22 +108,46 @@
     }
   }
 
-  &__fade-start,
-  &__fade-end {
+  &__end-wrapper,
+  &__start-wrapper {
+    display: flex;
     position: absolute;
     top: 0;
+    z-index: 10;
+  }
+
+  &__start-wrapper {
+    left: 0;
+  }
+
+  &__end-wrapper {
+    right: 0;
+  }
+
+  &__button {
+    border: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    &:focus-visible {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: -4px;
+    }
+  }
+
+  &__fade-start,
+  &__fade-end {
     width: 15px;
     height: 47px;
-    z-index: 10;
+    pointer-events: none;
   }
 
   &__fade-start {
-    left: 0;
     mask-image: linear-gradient(to right, #000f, #0000);
   }
 
   &__fade-end {
-    right: 0;
     mask-image: linear-gradient(to left, #000f, #0000);
   }