@helsenorge/designsystem-react 12.7.0 → 13.0.0-beta.1

package/Label.js

@@ -74,7 +74,7 @@ const Label = ({
   afterLabelChildren,
   children,
   className,
-  formFieldTag,
+  formFieldLevel,
   htmlFor,
   htmlMarkup = "label",
   labelClassName,
@@ -114,8 +114,8 @@ const Label = ({
         children,
         /* @__PURE__ */ jsx("span", { className: styles.label__texts, children: mapLabels() })
       ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: sublabelWrapperClassName, children: [
-        formFieldTag && isComponent(formFieldTag, FormFieldTag) && React__default.cloneElement(formFieldTag),
+      (sublabel || statusDot || formFieldLevel) && /* @__PURE__ */ jsxs("div", { className: sublabelWrapperClassName, children: [
+        formFieldLevel && /* @__PURE__ */ jsx(FormFieldTag, { level: formFieldLevel }),
         sublabel && isComponent(sublabel, Sublabel) && React__default.cloneElement(sublabel, {
           onColor
         }),

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['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--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 FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\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?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '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  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldTag?: 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: 'normal' }]} 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, type: 'subdued' }]}\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  formFieldTag,\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--subdued']]: labelText.type === 'subdued',\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          {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\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","React"],"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['sublabel'], {\n          [styles['sublabel--subdued']]: sublabelText.type === 'subdued',\n          [styles['sublabel--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 FormFieldTag, { FormFieldTagLevel } from '../FormFieldTag';\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?: 'normal' | 'subdued';\n};\n\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '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  /** Sets a tag that describes whether the form field is required or optional */\n  formFieldLevel?: FormFieldTagLevel;\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: 'normal' }]} 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, type: 'subdued' }]}\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  formFieldLevel,\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--subdued']]: labelText.type === 'subdued',\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        {(sublabel || statusDot || formFieldLevel) && (\n          <div className={sublabelWrapperClassName}>\n            {formFieldLevel && <FormFieldTag level={formFieldLevel} />}\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        )}\n      </div>\n      {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n    </div>\n  );\n};\n\nexport default Label;\n"],"names":["cn","React"],"mappings":"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"}

package/LinkList.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
-import { useHover } from "./hooks/useHover.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { r as renderElementHeader } from "./ElementHeader.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
 import { l as listEditModeWrapperClassnames, L as ListEditModeItem } from "./ListEditMode.js";
@@ -26,7 +26,7 @@ const Link = React__default.forwardRef((props, ref) => {
     editMode = false,
     ...restProps
   } = props;
-  const { hoverRef, isHovered } = useHover(linkRef);
+  const { refObject, isHovered } = usePseudoClasses(linkRef);
   const isFill = variant === "fill";
   const isFillNegative = variant === "fill-negative";
   const isOutline = variant === "outline";
@@ -70,7 +70,7 @@ const Link = React__default.forwardRef((props, ref) => {
     "a",
     {
       className: linkClasses,
-      ref: hoverRef,
+      ref: refObject,
       rel: target === "_blank" ? "noopener noreferrer" : void 0,
       target,
       ...restProps,
@@ -87,7 +87,7 @@ const Link = React__default.forwardRef((props, ref) => {
         })
       ]
     }
-  ) : htmlMarkup === "button" && /* @__PURE__ */ jsxs("button", { className: linkClasses, ref: hoverRef, type: "button", ...restProps, children: [
+  ) : htmlMarkup === "button" && /* @__PURE__ */ jsxs("button", { className: linkClasses, ref: refObject, type: "button", ...restProps, children: [
     /* @__PURE__ */ jsx("div", { className: statusMarkerClasses }),
     renderElementHeader(children, {
       titleHtmlMarkup: "span",

package/LinkList.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\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 liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\n        <div className={linkClasses}>\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </div>\n      ) : htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n  } = props;\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["React","cn"],"mappings":"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"}
+{"version":3,"file":"LinkList.js","sources":["../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { PaletteNames } from '../../theme/palette';\nimport { ElementHeaderType, renderElementHeader } from '../ElementHeader/ElementHeader';\nimport ChevronRight from '../Icons/ChevronRight';\nimport ListEditModeItem, { ListEditModeItemProps, listEditModeWrapperClassnames } from '../ListEditMode';\n\nimport LinkListStyles from './styles.module.scss';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkListStatus = 'none' | 'new';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport type LinkListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport interface LinkType extends React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\nexport interface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  Changes the colors of the list. */\n  color?: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: LinkListVariant;\n  /** Highlights text. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\nexport type LinkProps = Modify<\n  React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement>,\n  {\n    children: React.ReactNode;\n    chevron?: boolean;\n    className?: string;\n    icon?: React.ReactElement;\n    /** Renders the image in the LinkList header */\n    image?: React.ReactElement;\n    /** Displays a status on the left side: default none */\n    status?: LinkListStatus;\n    href?: string;\n    target?: LinkAnchorTargets;\n    /** HTML markup for link. Default: a */\n    htmlMarkup?: LinkTags;\n    /**\n     * Ref for lenke/knapp\n     */\n    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n    /** Sets the data-testid attribute. */\n    testId?: string;\n    /** Highlights text. Override if different from list */\n    highlightText?: string;\n  }\n> &\n  Pick<LinkListProps, 'color' | 'size' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'white',\n    icon,\n    image,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    status = 'none',\n    testId,\n    target,\n    variant,\n    htmlMarkup = 'a',\n    highlightText,\n    editMode = false,\n    ...restProps\n  } = props;\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement | HTMLAnchorElement>(linkRef);\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 liClasses = cn(LinkListStyles['link-list'], {\n    [LinkListStyles['link-list__list-item--line']]: isLine,\n    [LinkListStyles[`link-list__list-item--outline--${color}`]]: isOutline,\n  });\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles[`link-list__anchor--${color}`],\n    {\n      [LinkListStyles[`link-list__anchor--line--${color}`]]: isLine,\n      [LinkListStyles['link-list__anchor--fill']]: isFill,\n      [LinkListStyles[`link-list__anchor--fill--${color}`]]: isFill,\n      [LinkListStyles['link-list__anchor--outline']]: isOutline,\n      [LinkListStyles[`link-list__anchor--outline--${color}`]]: isOutline,\n      [LinkListStyles['link-list__anchor--fill-negative']]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--fill-negative--${color}`]]: isFillNegative,\n      [LinkListStyles[`link-list__anchor--${size}`]]: size,\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n      [LinkListStyles['link-list__anchor--new']]: status === 'new',\n    },\n    className\n  );\n\n  const statusMarkerClasses = cn(LinkListStyles['link-list__status-marker'], {\n    [LinkListStyles['link-list__status-marker--new']]: status === 'new',\n  });\n\n  const imageContainer = <span className={LinkListStyles['link-list__image-container']}>{image}</span>;\n\n  return (\n    <li className={liClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {editMode ? (\n        <div className={linkClasses}>\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </div>\n      ) : htmlMarkup === 'a' ? (\n        <a\n          className={linkClasses}\n          ref={refObject as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          <div className={statusMarkerClasses}></div>\n          {renderElementHeader(children, {\n            titleHtmlMarkup: 'span',\n            isHovered,\n            size,\n            parentType: 'linklist',\n            chevronIcon: chevron ? ChevronRight : undefined,\n            icon: icon ?? imageContainer,\n            highlightText,\n          })}\n        </a>\n      ) : (\n        htmlMarkup === 'button' && (\n          <button className={linkClasses} ref={refObject as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n            <div className={statusMarkerClasses}></div>\n            {renderElementHeader(children, {\n              titleHtmlMarkup: 'span',\n              isHovered,\n              size,\n              parentType: 'linklist',\n              chevronIcon: chevron ? ChevronRight : undefined,\n              icon: icon ?? imageContainer,\n              highlightText,\n            })}\n          </button>\n        )\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const {\n    children,\n    className = '',\n    chevron = false,\n    size = 'medium',\n    color = 'white',\n    testId,\n    variant = 'line',\n    highlightText,\n    editMode = false,\n  } = props;\n\n  const listClassNames = cn(LinkListStyles['link-list'], className, {\n    [LinkListStyles[`link-list--outline--${color}`]]: variant === 'outline',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  return (\n    <ul ref={ref} className={listClassNames} data-testid={testId} data-analyticsid={AnalyticsId.LinkList}>\n      {React.Children.map(children, (child: React.ReactNode) => {\n        if (React.isValidElement<LinkProps>(child) && child.type === Link) {\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={child.props.onDelete}>\n                {React.cloneElement(child, {\n                  color,\n                  size,\n                  chevron: false,\n                  variant,\n                  highlightText: highlightText,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child, {\n              color,\n              size,\n              chevron,\n              variant,\n              highlightText: highlightText,\n              editMode: false,\n            });\n          }\n        }\n        return null;\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.displayName = 'LinkList';\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["React","cn"],"mappings":"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"}

package/ListEditMode.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 import { IconSize } from "./constants.js";
-import { useHover } from "./hooks/useHover.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { I as Icon } from "./Icon.js";
 import X from "./components/Icons/X.js";
 import styles from "./components/ListEditMode/styles.module.scss";
@@ -11,8 +11,8 @@ const IconButton = ({
   color,
   onClick
 }) => {
-  const { hoverRef, isHovered } = useHover();
-  return /* @__PURE__ */ jsx("button", { ref: hoverRef, onClick, type: "button", className: classNames(styles["list-edit-mode__icon-button"]), children: /* @__PURE__ */ jsx(
+  const { refObject, isHovered } = usePseudoClasses();
+  return /* @__PURE__ */ jsx("button", { ref: refObject, onClick, type: "button", className: classNames(styles["list-edit-mode__icon-button"]), children: /* @__PURE__ */ jsx(
     Icon,
     {
       isHovered,

package/ListEditMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListEditMode.js","sources":["../src/components/ListEditMode/ListEditMode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  return (\n    <button ref={hoverRef} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gCAAgC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE3E,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIyB;AACvB,QAAM,EAAE,UAAU,UAAA,IAAc,SAAA;AAEhC,SACE,oBAAC,UAAA,EAAO,KAAK,UAAU,SAAkB,MAAK,UAAS,WAAW,WAAW,OAAO,6BAA6B,CAAC,GAChH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS;AAAA,MACf,OAAO,UAAU,SAAS,yCAAyC;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;AAEO,MAAM,mBAAmB,CAAC,UAAgD;AAC/E,QAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAEpE,QAAM,iBAAiB,WAAW,OAAO,sBAAsB,GAAG,SAAS,OAAO,yBAAyB,KAAK,EAAE,GAAG;AAAA,IACnH,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY;AAAA,IACpD,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY,UAAU,YAAY;AAAA,EAAA,CAC3E;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAA,gCAAa,YAAA,EAAW,MAAM,GAAG,SAAS,UAAU,OAAM,OAAM;AAAA,IAChE;AAAA,EAAA,GACH;AAEJ;AAEA,iBAAiB,cAAc;"}
+{"version":3,"file":"ListEditMode.js","sources":["../src/components/ListEditMode/ListEditMode.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { ExpanderListColors, ExpanderListVariant } from '../ExpanderList';\nimport Icon, { SvgIcon } from '../Icon';\nimport X from '../Icons/X';\nimport { LinkListColors, LinkListVariant } from '../LinkList';\n\nimport styles from './styles.module.scss';\n\nexport interface ListEditModeProps extends ListEditModeItemProps {\n  /** Items in the ListEditMode */\n  children: React.ReactNode;\n  /** Sets visual priority */\n  variant?: LinkListVariant | ExpanderListVariant;\n  /** Sets color */\n  color?: LinkListColors | ExpanderListColors;\n}\n\nexport interface ListEditModeItemProps {\n  /** Enables ListEditMode */\n  editMode?: boolean;\n  /** Callback for delete button  */\n  onDelete?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\nexport const listEditModeWrapperClassnames = classNames([styles[`list-edit-mode`]]);\n\nexport const IconButton = ({\n  icon,\n  color,\n  onClick,\n}: {\n  icon: SvgIcon;\n  color: 'red' | 'blue';\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n}): React.JSX.Element => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n  return (\n    <button ref={refObject} onClick={onClick} type=\"button\" className={classNames(styles['list-edit-mode__icon-button'])}>\n      <Icon\n        isHovered={isHovered}\n        svgIcon={icon}\n        size={IconSize.Small}\n        color={color === 'blue' ? 'var(--color-action-graphics-onlight)' : 'var(--color-destructive-graphics-normal'}\n      />\n    </button>\n  );\n};\n\nexport const ListEditModeItem = (props: ListEditModeProps): React.JSX.Element => {\n  const { children, variant = 'line', color = 'neutral', onDelete } = props;\n\n  const listClassNames = classNames(styles['list-edit-mode__item'], color && styles[`list-edit-mode__item--${color}`], {\n    [styles['list-edit-mode__item--line']]: variant === 'line',\n    [styles['list-edit-mode__item--fill']]: variant === 'fill' || variant === 'fill-negative',\n  });\n\n  return (\n    <div className={listClassNames}>\n      {onDelete && <IconButton icon={X} onClick={onDelete} color=\"red\" />}\n      {children}\n    </div>\n  );\n};\n\nListEditModeItem.displayName = 'ListEditModeItem';\n\nexport default ListEditModeItem;\n"],"names":[],"mappings":";;;;;;;AA6BO,MAAM,gCAAgC,WAAW,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE3E,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAIyB;AACvB,QAAM,EAAE,WAAW,UAAA,IAAc,iBAAA;AAEjC,SACE,oBAAC,UAAA,EAAO,KAAK,WAAW,SAAkB,MAAK,UAAS,WAAW,WAAW,OAAO,6BAA6B,CAAC,GACjH,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,MAAM,SAAS;AAAA,MACf,OAAO,UAAU,SAAS,yCAAyC;AAAA,IAAA;AAAA,EAAA,GAEvE;AAEJ;AAEO,MAAM,mBAAmB,CAAC,UAAgD;AAC/E,QAAM,EAAE,UAAU,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAEpE,QAAM,iBAAiB,WAAW,OAAO,sBAAsB,GAAG,SAAS,OAAO,yBAAyB,KAAK,EAAE,GAAG;AAAA,IACnH,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY;AAAA,IACpD,CAAC,OAAO,4BAA4B,CAAC,GAAG,YAAY,UAAU,YAAY;AAAA,EAAA,CAC3E;AAED,SACE,qBAAC,OAAA,EAAI,WAAW,gBACb,UAAA;AAAA,IAAA,gCAAa,YAAA,EAAW,MAAM,GAAG,SAAS,UAAU,OAAM,OAAM;AAAA,IAChE;AAAA,EAAA,GACH;AAEJ;AAEA,iBAAiB,cAAc;"}

package/RadioButton.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import React__default, { useState } from "react";
 import classNames from "classnames";
 import { FormOnColor, FormSize, AnalyticsId } from "./constants.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
-import { useUuid } from "./hooks/useUuid.js";
 import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { isMutableRefObject, mergeRefs } from "./utils/refs.js";
 import { u as uuid } from "./uuid.js";
@@ -33,7 +33,6 @@ const RadioButton = React__default.forwardRef((props, ref) => {
     size,
     errorText,
     error = !!errorText,
-    errorTextId,
     errorWrapperClassName,
     value = getLabelText(label),
     testId,
@@ -49,7 +48,7 @@ const RadioButton = React__default.forwardRef((props, ref) => {
   const [checked, changeChecked] = useState();
   const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
   const mergedRefs = mergeRefs([ref, refObject]);
-  const errorTextUuid = useUuid(errorTextId);
+  const errorTextId = useIdWithFallback(props.errorTextId);
   const radioButtonWrapperClasses = classNames(radioButtonStyles["radio-button-wrapper"], {
     [radioButtonStyles["radio-button-wrapper__large"]]: isLarge,
     [radioButtonStyles["radio-button-wrapper__large--focused"]]: isLarge && isFocused,
@@ -97,12 +96,12 @@ const RadioButton = React__default.forwardRef((props, ref) => {
       value,
       ref: mergedRefs,
       defaultChecked,
-      "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+      "aria-describedby": getAriaDescribedBy(props, errorTextId),
       required,
       onChange: (e) => change(e)
     }
   );
-  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsx("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.RadioButton, className: radioButtonWrapperClasses, children: renderLabelAsParent(
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId, children: /* @__PURE__ */ jsx("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.RadioButton, className: radioButtonWrapperClasses, children: renderLabelAsParent(
     label,
     getLabelContent(),
     inputId,

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextUuid = useUuid(errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'defaultChecked' | 'required' | 'onChange'\n    > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** Adds custom classes to the label element. */\n  labelClassNames?: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  onColor?: keyof typeof FormOnColor;\n  /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n  radioId: string,\n  onColor: FormOnColor,\n  large: boolean,\n  checkedRadioId?: string\n): string | undefined => {\n  const onCherry = onColor === 'oninvalid';\n  const checked = radioId === checkedRadioId;\n\n  return classNames({\n    [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n    [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n    [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n    [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n  });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked,\n    onChange,\n    disabled,\n    label,\n    inputId = uuid(),\n    onColor = FormOnColor.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorWrapperClassName,\n    value = getLabelText(label),\n    testId,\n    required,\n    labelClassNames,\n    ...rest\n  } = props;\n  const invalid = error || onColor === FormOnColor.oninvalid;\n  const onDark = onColor === FormOnColor.ondark;\n  const onBlueberry = onColor === FormOnColor.onblueberry;\n  const onCherry = onColor === FormOnColor.oninvalid;\n  const isLarge = size === FormSize.large;\n  const [checked, changeChecked] = useState<boolean>();\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const errorTextId = useIdWithFallback(props.errorTextId);\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n    [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n    [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n  });\n  const radioButtonLabelClasses = classNames(\n    radioButtonStyles['radio-button-label'],\n    {\n      [radioButtonStyles['radio-button-label--disabled']]: disabled,\n      [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n      [radioButtonStyles['radio-button-label--invalid']]: invalid,\n      [radioButtonStyles['radio-button-label__large']]: isLarge,\n      [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n    },\n    labelClassNames\n  );\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n      [radioButtonStyles['radio-button__large']]: isLarge,\n      [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n      [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n    },\n    className\n  );\n\n  const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    changeChecked(e.target.checked);\n    if (onChange) onChange(e);\n  };\n\n  const getLabelContent = (): React.ReactNode => (\n    <input\n      {...rest}\n      id={inputId}\n      name={name}\n      className={radioButtonClasses}\n      type=\"radio\"\n      disabled={disabled}\n      value={value}\n      ref={mergedRefs}\n      defaultChecked={defaultChecked}\n      aria-describedby={getAriaDescribedBy(props, errorTextId)}\n      required={required}\n      onChange={(e): void => change(e)}\n    />\n  );\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n        {renderLabelAsParent(\n          label,\n          getLabelContent(),\n          inputId,\n          onColor as FormOnColor,\n          radioButtonLabelClasses,\n          undefined,\n          radioButtonStyles['radiobutton-sublabel-wrapper'],\n          isLarge\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["React"],"mappings":"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"}

package/Select.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default from "react";
 import classNames from "classnames";
 import { FormOnColor, AnalyticsId, IconSize, AVERAGE_CHARACTER_WIDTH_PX } from "./constants.js";
-import { useUuid } from "./hooks/useUuid.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
 import { getColor } from "./theme/currys/color.js";
 import { getAriaDescribedBy } from "./utils/accessibility.js";
 import { E as ErrorWrapper } from "./ErrorWrapper.js";
@@ -26,11 +26,9 @@ const Select = React__default.forwardRef(function SelectForwardedRef(props, ref)
     disabled,
     error,
     errorText,
-    errorTextId,
     errorWrapperClassName,
     label,
-    selectId,
-    name = selectId,
+    name = props.selectId,
     onColor = FormOnColor.onwhite,
     testId,
     width,
@@ -41,8 +39,8 @@ const Select = React__default.forwardRef(function SelectForwardedRef(props, ref)
     wrapperClassName,
     ...rest
   } = props;
-  const uuid = useUuid(selectId);
-  const errorTextUuid = useUuid(errorTextId);
+  const selectId = useIdWithFallback(props.selectId);
+  const errorTextId = useIdWithFallback(props.errorTextId);
   const onBlueberry = onColor === "onblueberry";
   const invalid = onColor === "oninvalid" || !!errorText || !!error;
   const iconColor = getIconColor(invalid, !!disabled);
@@ -62,8 +60,8 @@ const Select = React__default.forwardRef(function SelectForwardedRef(props, ref)
     [selectStyles["select--invalid"]]: invalid
   });
   const selectWrapperClasses = classNames(selectStyles["select-wrapper"], wrapperClassName);
-  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Select, className: selectWrapperClasses, style: { maxWidth }, children: [
-    renderLabel(label, uuid, onColor),
+  return /* @__PURE__ */ jsx(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId, children: /* @__PURE__ */ jsxs("div", { "data-testid": testId, "data-analyticsid": AnalyticsId.Select, className: selectWrapperClasses, style: { maxWidth }, children: [
+    renderLabel(label, selectId, onColor),
     /* @__PURE__ */ jsxs("div", { className: selectInnerWrapperClasses, "data-testid": testId + "-inner-wrapper", children: [
       /* @__PURE__ */ jsx(
         Icon,
@@ -80,13 +78,13 @@ const Select = React__default.forwardRef(function SelectForwardedRef(props, ref)
         {
           ...rest,
           "aria-invalid": !!invalid,
-          id: uuid,
+          id: selectId,
           name,
           className: selectClasses,
           disabled,
           ref,
           required,
-          "aria-describedby": getAriaDescribedBy(props, errorTextUuid),
+          "aria-describedby": getAriaDescribedBy(props, errorTextId),
           "aria-required": !!required,
           value,
           defaultValue,

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    selectId,\n    name = selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const errorTextUuid = useUuid(errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, uuid, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAAsB;AAC5D,QAAM,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AACxH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,OAAO,QAAQ,QAAQ;AAC7B,QAAM,gBAAgB,QAAQ,WAAW;AACzC,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IAAA;AAAA,IAEpD;AAAA,EAAA;AAGF,QAAM,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aAAa,eACjF,UAAA,qBAAC,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,YACvG,UAAA;AAAA,IAAA,YAAY,OAAO,MAAM,OAAsB;AAAA,yBAC/C,OAAA,EAAI,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,aAAa;AAAA,UACzD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAE3C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.SelectHTMLAttributes<HTMLSelectElement>,\n      'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n    > {\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: React.ReactNode;\n  /** Changes the visuals of the component */\n  onColor?: keyof typeof FormOnColor;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n  /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n  defaultValue?: string | number;\n  /** Adds custom classes to the wrapper tag */\n  wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n  const {\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    errorWrapperClassName,\n    label,\n    name = props.selectId,\n    onColor = FormOnColor.onwhite,\n    testId,\n    width,\n    required,\n    value,\n    defaultValue,\n    autoComplete = 'off',\n    wrapperClassName,\n    ...rest\n  } = props;\n\n  const selectId = useIdWithFallback(props.selectId);\n  const errorTextId = useIdWithFallback(props.errorTextId);\n  const onBlueberry = onColor === 'onblueberry';\n  const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n        {renderLabel(label, selectId, onColor as FormOnColor)}\n        <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n          <Icon\n            className={selectStyles['select-arrow']}\n            svgIcon={ChevronDown}\n            color={iconColor}\n            size={IconSize.XSmall}\n            testId={testId + '-icon'}\n          />\n          <select\n            {...rest}\n            aria-invalid={!!invalid}\n            id={selectId}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            aria-describedby={getAriaDescribedBy(props, errorTextId)}\n            aria-required={!!required}\n            value={value}\n            defaultValue={defaultValue}\n            autoComplete={autoComplete ? autoComplete : undefined}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["React"],"mappings":";;;;;;;;;;;;AAmDA,MAAM,oBAAoB,CAAC,eAA+B;AACxD,QAAM,eAAe;AAErB,SAAO,QAAQ,aAAa,0BAA0B,QAAQ,YAAY;AAC5E;AAEA,MAAM,eAAe,CAAC,SAAkB,aAA8B;AACpE,QAAM,YAAY,UAAU,WAAW;AACvC,SAAO,WAAW,SAAS,WAAW,GAAG,IAAI,SAAS,WAAW,GAAG;AACtE;AAEO,MAAM,SAASA,eAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;AACxH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM;AAAA,IACb,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,WAAW,kBAAkB,MAAM,QAAQ;AACjD,QAAM,cAAc,kBAAkB,MAAM,WAAW;AACvD,QAAM,cAAc,YAAY;AAChC,QAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;AAC5D,QAAM,YAAY,aAAa,SAAS,CAAC,CAAC,QAAQ;AAClD,QAAM,WAAW,QAAQ,kBAAkB,KAAK,IAAI;AAEpD,QAAM,4BAA4B;AAAA,IAChC,aAAa,sBAAsB;AAAA,IACnC;AAAA,MACE,CAAC,aAAa,mCAAmC,CAAC,GAAG,YAAY;AAAA,MACjE,CAAC,aAAa,oCAAoC,CAAC,GAAG;AAAA,MACtD,CAAC,aAAa,+BAA+B,CAAC,GAAG;AAAA,MACjD,CAAC,aAAa,gCAAgC,CAAC,GAAG;AAAA,IAAA;AAAA,IAEpD;AAAA,EAAA;AAGF,QAAM,gBAAgB,WAAW,aAAa,QAAQ;AAAA,IACpD,CAAC,aAAa,sBAAsB,CAAC,GAAG;AAAA,IACxC,CAAC,aAAa,iBAAiB,CAAC,GAAG;AAAA,EAAA,CACpC;AAED,QAAM,uBAAuB,WAAW,aAAa,gBAAgB,GAAG,gBAAgB;AAExF,6BACG,cAAA,EAAa,WAAW,uBAAuB,WAAsB,aACpE,+BAAC,OAAA,EAAI,eAAa,QAAQ,oBAAkB,YAAY,QAAQ,WAAW,sBAAsB,OAAO,EAAE,YACvG,UAAA;AAAA,IAAA,YAAY,OAAO,UAAU,OAAsB;AAAA,yBACnD,OAAA,EAAI,WAAW,2BAA2B,eAAa,SAAS,kBAC/D,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,aAAa,cAAc;AAAA,UACtC,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM,SAAS;AAAA,UACf,QAAQ,SAAS;AAAA,QAAA;AAAA,MAAA;AAAA,MAEnB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,gBAAc,CAAC,CAAC;AAAA,UAChB,IAAI;AAAA,UACJ;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,oBAAkB,mBAAmB,OAAO,WAAW;AAAA,UACvD,iBAAe,CAAC,CAAC;AAAA,UACjB;AAAA,UACA;AAAA,UACA,cAAc,eAAe,eAAe;AAAA,UAE3C;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}

package/Slider.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useState, useRef, useEffect } from "react";
+import React__default, { useState, useId, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { AnalyticsId } from "./constants.js";
+import { useIdWithFallback } from "./hooks/useIdWithFallback.js";
 import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import { useSize } from "./hooks/useSize.js";
-import { useUuid } from "./hooks/useUuid.js";
 import { getAriaLabelAttributes } from "./utils/accessibility.js";
 import { mergeRefs, isMutableRefObject } from "./utils/refs.js";
 import { E as ErrorWrapper } from "./ErrorWrapper.js";
@@ -32,7 +32,6 @@ const Slider = React__default.forwardRef((props, ref) => {
     ariaLabel,
     error,
     errorText,
-    errorTextId,
     errorWrapperClassName,
     labelLeft,
     labelRight,
@@ -54,10 +53,11 @@ const Slider = React__default.forwardRef((props, ref) => {
     minValue,
     maxValue
   );
-  const errorTextUuid = useUuid(errorTextId);
-  const titleId = useUuid();
-  const labelLeftId = useUuid();
-  const labelRightId = useUuid();
+  const errorTextId = useIdWithFallback(props.errorTextId);
+  const baseId = useId();
+  const titleId = "title-" + baseId;
+  const labelLeftId = "label-" + baseId;
+  const labelRightId = "label-right-" + baseId;
   const trackRef = useRef(null);
   const { refObject, isFocused } = usePseudoClasses(isMutableRefObject(ref) ? ref : null);
   const mergedRefs = mergeRefs([ref, refObject]);
@@ -241,7 +241,7 @@ const Slider = React__default.forwardRef((props, ref) => {
       );
     }) });
   };
-  return /* @__PURE__ */ jsxs(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId: errorTextUuid, children: [
+  return /* @__PURE__ */ jsxs(ErrorWrapper, { className: errorWrapperClassName, errorText, errorTextId, children: [
     /* @__PURE__ */ jsx(
       "input",
       {

package/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextUuid = useUuid(errorTextId);\n  const titleId = useUuid();\n  const labelLeftId = useUuid();\n  const labelRightId = useUuid();\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["React","value","step"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["import React, { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n  const [value, setValue] = useState(initial);\n\n  const setSafeValue = (newValue: number): void => {\n    if (newValue > max) {\n      setValue(max);\n    } else if (newValue < min) {\n      setValue(min);\n    } else {\n      setValue(newValue);\n    }\n  };\n\n  useEffect(() => {\n    setSafeValue(initial);\n  }, [min, max]);\n\n  return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n  label?: number | string;\n  emojiUniCode?: string;\n};\n\nexport interface SliderProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /**\tSets the title of the slider. */\n  title?: string;\n  /** Adds the left hand label to the element. */\n  labelLeft?: string;\n  /** Adds the right hand label to the element. */\n  labelRight?: string;\n  /**\tSets aria-label of the slider. */\n  ariaLabel?: string;\n  /** Disables the slider element. */\n  disabled?: boolean;\n  /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  minValue?: number;\n  /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n  maxValue?: number;\n  /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n  selected?: boolean;\n  /** Sets the steps data for the slider */\n  steps?: SliderStep[];\n  /** Sets the step to move per point in the slider */\n  step?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the value of the slider */\n  value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    title,\n    ariaLabel,\n    error,\n    errorText,\n    errorWrapperClassName,\n    labelLeft,\n    labelRight,\n    disabled = false,\n    onChange,\n    steps,\n    step = 1,\n    minValue = 0,\n    maxValue = steps ? steps.length - 1 : 100,\n    selected = true,\n    testId,\n    value,\n    ...rest\n  } = props;\n\n  const [isMoving, setIsMoving] = useState(false);\n  const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n  const [valueState, setValueState] = useSafeNumberValue(\n    typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n    minValue,\n    maxValue\n  );\n\n  const errorTextId = useIdWithFallback(props.errorTextId);\n  const baseId = useId();\n  const titleId = 'title-' + baseId;\n  const labelLeftId = 'label-' + baseId;\n  const labelRightId = 'label-right-' + baseId;\n  const trackRef = useRef<HTMLDivElement>(null);\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n  const largeStep = maxValue / 10;\n  const invalid = !!errorText || !!error;\n\n  useEffect(() => {\n    const handlePointerUp = (): void => {\n      setIsMoving(false);\n    };\n\n    document.addEventListener('pointerup', handlePointerUp);\n\n    return (): void => {\n      document.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, []);\n\n  const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n    const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n    // Calculate the normalized position (0 to 1) of the marker along the track\n    const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n    const valueRange = maxValue - minValue;\n    // Calculate the value without considering the step\n    let value = normalizedPosition * valueRange + minValue;\n    // Adjust the value to account for the step increment\n    const stepCount = Math.round(value / step);\n    value = stepCount * step;\n    value = Math.max(minValue, Math.min(maxValue, value));\n\n    return value;\n  };\n\n  useEffect(() => {\n    const handlePointerMove = (e: PointerEvent): void => {\n      if (!disabled && isMoving) {\n        const newValue = getValueBasedOnMarkerPosition(e.clientX);\n        setValueState(newValue);\n      }\n    };\n\n    document.addEventListener('pointermove', handlePointerMove);\n\n    return (): void => {\n      document.removeEventListener('pointermove', handlePointerMove);\n    };\n  }, [isMoving]);\n\n  useEffect(() => {\n    if (value !== valueState && typeof value !== 'undefined') {\n      handleSelected();\n      setValueState(value);\n    }\n  }, [value]);\n\n  useEffect(() => {\n    if (typeof value === 'undefined' && selected !== selectedState) {\n      setSelectedState(selected);\n    }\n  }, [selected]);\n\n  const handleSelected = (): void => {\n    if (selectedState === false) {\n      setSelectedState(true);\n    }\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        setValueState(valueState - step);\n        flag = true;\n        break;\n      case 'PageDown':\n        setValueState(valueState - largeStep);\n        flag = true;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        setValueState(valueState + step);\n        flag = true;\n        break;\n      case 'PageUp':\n        setValueState(valueState + largeStep);\n        flag = true;\n        break;\n      case 'Home':\n        setValueState(minValue);\n        flag = true;\n        break;\n      case 'End':\n        setValueState(maxValue);\n        flag = true;\n        break;\n      default:\n        break;\n    }\n\n    if (flag) {\n      handleSelected();\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    const newValue = getValueBasedOnMarkerPosition(e.clientX);\n    setValueState(newValue);\n    refObject.current?.focus();\n  };\n\n  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n    if (disabled) return;\n\n    setIsMoving(true);\n    handleSelected();\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    refObject.current?.focus();\n  };\n\n  const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n  const getAriaValueText = (): string | undefined => {\n    const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n    if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n      const step = steps[stepIndex];\n      const emojiCode = step.emojiUniCode;\n      const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n      return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n    }\n\n    return undefined;\n  };\n\n  const getAriaLabeledById = (): string | undefined => {\n    if (title && labelLeft && labelRight) {\n      return [titleId, labelLeftId, labelRightId].join(' ');\n    }\n    if (title && labelLeft) {\n      return [titleId, labelLeftId].join(' ');\n    }\n    if (title && labelRight) {\n      return [titleId, labelRightId].join(' ');\n    }\n    if (title) {\n      return titleId;\n    }\n  };\n\n  const ariaLabelAttributes = getAriaLabelAttributes({\n    label: ariaLabel,\n    id: getAriaLabeledById(),\n    prefer: 'label',\n  });\n\n  const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n    return { left: `${(index / (stepsLength - 1)) * 100}%` };\n  };\n\n  useEffect(() => {\n    if (selectedState && onChange) {\n      onChange({\n        target: {\n          name: props.name,\n          value: valueState,\n        },\n      } as unknown as React.ChangeEvent<HTMLInputElement>);\n    }\n  }, [valueState, selectedState]);\n\n  const renderEmojies = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__emoji-container']}>\n        {steps?.map((step, index) => {\n          return (\n            step.emojiUniCode && (\n              <div\n                aria-hidden={true}\n                key={'emoji' + index}\n                className={styles['slider__emoji']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.emojiUniCode}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  const renderSteps = (): React.ReactNode => {\n    return steps?.map((_step, index) => {\n      return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n    });\n  };\n\n  const renderStepLabels = (): React.ReactNode => {\n    return (\n      <div className={styles['slider__value-container']}>\n        {steps?.map((step, index) => {\n          return (\n            typeof step.label !== 'undefined' && (\n              <div\n                aria-hidden={true}\n                key={'label' + index}\n                className={styles['slider__value']}\n                style={getXPositionStyling(index, steps.length)}\n              >\n                {step.label}\n              </div>\n            )\n          );\n        })}\n      </div>\n    );\n  };\n\n  return (\n    <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n      <input\n        aria-valuetext={getAriaValueText()}\n        className={styles['sr-only-slider']}\n        disabled={disabled}\n        min={minValue}\n        max={maxValue}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n        value={valueState}\n        ref={mergedRefs}\n        type=\"range\"\n        {...rest}\n        {...ariaLabelAttributes}\n      />\n      <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n        {title && (\n          <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n            {title}\n          </Title>\n        )}\n        <div className={styles['slider__content-container']}>\n          {renderEmojies()}\n          {/* Slider streken er klikkbar med mus/touch */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div\n            ref={trackRef}\n            className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n            onClick={handleTrackClick}\n            onPointerDown={handlePointerDown}\n          >\n            <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n            <div\n              className={classNames(styles.slider__marker, {\n                [styles['slider__marker--disabled']]: disabled,\n                [styles['slider__marker--selected']]: selectedState,\n                [styles['slider__marker--invalid']]: invalid,\n                [styles['slider__marker--focused']]: !disabled && isFocused,\n              })}\n              style={{\n                left: `${markerXPos}px`,\n              }}\n            />\n          </div>\n          {renderStepLabels()}\n        </div>\n        {(labelLeft || labelRight) && (\n          <span className={styles.slider__options}>\n            <span id={labelLeftId}>{labelLeft}</span>\n            <span id={labelRightId}>{labelRight}</span>\n          </span>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"names":["React","value","step"],"mappings":"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"}

package/TabList.js

@@ -9,7 +9,7 @@ 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 { usePseudoClasses } from "./hooks/usePseudoClasses.js";
 import ChevronLeft from "./components/Icons/ChevronLeft.js";
 import ChevronRight from "./components/Icons/ChevronRight.js";
 const Tab = (props) => {
@@ -66,7 +66,7 @@ const TabItem = (props) => {
 };
 const TabChevron = ({ direction, onClick, backgroundColor, ariaLabel }) => {
   const buttonRef = React__default.useRef(null);
-  const { isHovered } = useHover(buttonRef);
+  const { isHovered } = usePseudoClasses(buttonRef);
   return /* @__PURE__ */ jsx(
     "button",
     {