@helsenorge/designsystem-react 9.4.3 → 9.5.0

package/HighlightPanel.js

@@ -42,9 +42,9 @@ const HighlightPanel = (props) => {
     className
   );
   const renderContent = () => {
+    const titleElement = title && /* @__PURE__ */ jsx(Title, { testId: "titleId", htmlMarkup: titleHtmlMarkup, appearance: "title4", children: title });
     if (svgIcon) {
       const iconSize = size === "large" && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;
-      const titleElement = /* @__PURE__ */ jsx(Title, { testId: "titleId", htmlMarkup: titleHtmlMarkup, appearance: "title4", children: title });
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: styles.highlightpanel__icon, children: [
           typeof svgIcon === "string" ? /* @__PURE__ */ jsx(LazyIcon, { iconName: svgIcon, size: iconSize }) : /* @__PURE__ */ jsx(Icon, { svgIcon, size: iconSize }),
@@ -56,7 +56,10 @@ const HighlightPanel = (props) => {
         ] })
       ] });
     }
-    return children;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      title && /* @__PURE__ */ jsx("div", { className: styles.highlightpanel__content, children: /* @__PURE__ */ jsx("div", { children: titleElement }) }),
+      children
+    ] });
   };
   const CustomTag = htmlMarkup;
   const contentWrapperClasses = classNames(styles["highlightpanel__content-wrapper"], contentWrapperClassName);

package/HighlightPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      const titleElement = (\n        <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n          {title}\n        </Title>\n      );\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return children;\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize"],"mappings":"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"}
+{"version":3,"file":"HighlightPanel.js","sources":["../src/components/HighlightPanel/HighlightPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { useBreakpoint, Breakpoint } from '../..';\nimport { AnalyticsId } from '../../constants';\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { SvgIcon, IconSize } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\nexport type HighlightPanelColors = Extract<PaletteNames, 'white' | 'neutral' | 'blueberry' | 'cherry'>;\n\nexport enum HighlightPanelSize {\n  medium = 'medium',\n  large = 'large',\n  fluid = 'fluid',\n}\n\nexport type HighlightPanelTags = Exclude<\n  keyof HTMLElementTagNameMap,\n  'dir' | 'font' | 'frame' | 'frameset' | 'marquee' | 'applet' | 'basefont' | 'search'\n>;\n\nexport interface HighlightPanelProps {\n  /** What's in the box? */\n  children: React.ReactNode;\n  /** Changes the background color. Default: white */\n  color?: HighlightPanelColors;\n  /** Changes the size. Default: medium */\n  size?: keyof typeof HighlightPanelSize;\n  /** Adds an icon to the highlightpanel. */\n  svgIcon?: SvgIcon | IconName;\n  /** Changes the underlying element. Default: div */\n  htmlMarkup?: HighlightPanelTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the content-wrapper. Not used for fluid size. */\n  contentWrapperClassName?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Element that is set after the icon-element in the DOM, often a title-element */\n  title?: string;\n  /** Markup props for title */\n  titleHtmlMarkup?: TitleTags;\n}\n\ninterface WrapperProps {\n  children?: React.ReactNode;\n  className: string;\n  size?: keyof typeof HighlightPanelSize;\n}\n\nconst Wrapper: React.FC<WrapperProps> = ({ className, size, children }) => (\n  <div className={className} data-testid={'highlightpanel-wrapper'}>\n    <div className={styles.highlightpanel__row}>\n      <div className={classNames(styles.highlightpanel__col, size === HighlightPanelSize.medium && styles['highlightpanel__col--offset'])}>\n        {children}\n      </div>\n    </div>\n  </div>\n);\n\ninterface ContentWrapperProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ContentWrapper: React.FC<ContentWrapperProps> = props => {\n  const { children, className } = props;\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], className);\n\n  return (\n    <div className={contentWrapperClasses}>\n      <div className={classNames(styles.highlightpanel__row)}>{children}</div>\n    </div>\n  );\n};\n\nconst HighlightPanel: React.FC<HighlightPanelProps> = props => {\n  const {\n    children,\n    color = 'white',\n    size = HighlightPanelSize.medium,\n    testId,\n    svgIcon,\n    htmlMarkup = 'div',\n    className,\n    contentWrapperClassName,\n    title,\n    titleHtmlMarkup = 'h2',\n  } = props;\n  const breakpoint = useBreakpoint();\n\n  const containerClassName = classNames(\n    styles[`highlightpanel--${color}`],\n    styles[`highlightpanel--${size}`],\n    svgIcon && styles['highlightpanel--has-icon'],\n    { container: size === 'medium' || size === 'large' },\n    className\n  );\n\n  const renderContent = () => {\n    const titleElement = title && (\n      <Title testId=\"titleId\" htmlMarkup={titleHtmlMarkup} appearance=\"title4\">\n        {title}\n      </Title>\n    );\n\n    if (svgIcon) {\n      const iconSize = size === HighlightPanelSize.large && breakpoint && breakpoint >= Breakpoint.md ? IconSize.Medium : IconSize.Small;\n\n      return (\n        <>\n          <div className={styles.highlightpanel__icon}>\n            {typeof svgIcon === 'string' ? <LazyIcon iconName={svgIcon} size={iconSize} /> : <Icon svgIcon={svgIcon} size={iconSize} />}\n            {title && <div className={styles['mobile']}>{titleElement}</div>}\n          </div>\n          <div className={styles.highlightpanel__content}>\n            {title && (\n              <div className={styles['desktop']} aria-hidden=\"true\">\n                {titleElement}\n              </div>\n            )}\n            {children}\n          </div>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {title && (\n          <div className={styles.highlightpanel__content}>\n            <div>{titleElement}</div>\n          </div>\n        )}\n        {children}\n      </>\n    );\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const contentWrapperClasses = classNames(styles['highlightpanel__content-wrapper'], contentWrapperClassName);\n\n  if (size === HighlightPanelSize.medium) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <CustomTag className={contentWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.HighlightPanel}>\n          {renderContent()}\n        </CustomTag>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large && svgIcon) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--large-with-icon'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.large) {\n    return (\n      <Wrapper className={containerClassName} size={size}>\n        <ContentWrapper className={contentWrapperClasses}>\n          <CustomTag\n            className={classNames(styles.highlightpanel__col, styles['highlightpanel__col--offset'])}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.HighlightPanel}\n          >\n            {renderContent()}\n          </CustomTag>\n        </ContentWrapper>\n      </Wrapper>\n    );\n  }\n\n  if (size === HighlightPanelSize.fluid) {\n    return (\n      <CustomTag className={containerClassName} data-testid={testId}>\n        {renderContent()}\n      </CustomTag>\n    );\n  }\n\n  return null;\n};\n\nexport default HighlightPanel;\n"],"names":["HighlightPanelSize"],"mappings":"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"}

package/Label.js

@@ -6,7 +6,7 @@ import { S as Spacer } from "./Spacer.js";
 import styles from "./components/Label/styles.module.scss";
 import { isComponent } from "./utils/component.js";
 import { S as StatusDot } from "./StatusDot.js";
-const Sublabel = ({ className, id, onColor, sublabelTexts, testId }) => {
+const Sublabel = ({ children, className, id, onColor, sublabelTexts, testId }) => {
   const mapSublabels = (hideFromScreenReader) => {
     return sublabelTexts && sublabelTexts.map((sublabelText, index) => {
       const labelClasses = classNames(styles.label, styles["label--sublabel"], {
@@ -20,7 +20,10 @@ const Sublabel = ({ className, id, onColor, sublabelTexts, testId }) => {
   const ariaHiddenSublabels = mapSublabels(true);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Spacer, { size: "3xs" }),
-    subLabels && /* @__PURE__ */ jsx("div", { className, id, "data-testid": testId, "data-analyticsid": AnalyticsId.Sublabel, children: subLabels }),
+    (subLabels || children) && /* @__PURE__ */ jsxs("div", { className, id, "data-testid": testId, "data-analyticsid": AnalyticsId.Sublabel, children: [
+      children,
+      subLabels
+    ] }),
     ariaHiddenSublabels && /* @__PURE__ */ jsx("div", { className, "data-testid": testId, children: ariaHiddenSublabels })
   ] });
 };

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

package/PopOver.js

@@ -156,7 +156,7 @@ const PopOver = React.forwardRef((props, ref) => {
   const arrowRef = useRef(null);
   const bubbleSize = useSize(bubbleRef);
   const [controllerSize, setControllerSize] = useState();
-  const controllerisVisible = useIsVisible(controllerRef, 0);
+  const controllerisVisible = useIsVisible(bubbleRef, 0);
   const updateControllerSize = () => {
     var _a;
     setControllerSize((_a = controllerRef.current) == null ? void 0 : _a.getBoundingClientRect());

package/PopOver.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant"],"mappings":"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"}
+{"version":3,"file":"PopOver.js","sources":["../src/components/PopOver/utils.ts","../src/components/PopOver/PopOver.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from './PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport { mergeRefs } from '../../utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport enum PopOverVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport type PopOverRole = 'tooltip';\n\nexport interface PopOverProps {\n  /** Id of the PopOver */\n  id?: string;\n  /** Content shown inside PopOver. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\n  children: React.ReactNode;\n  /** Ref for the element the PopOver is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Ref for the element the PopOver is placed upon */\n  popOverRef?: React.RefObject<HTMLDivElement>;\n  /** Show the popover. Only applies when role=tooltip. Default: false. */\n  show?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Adds custom classes to the arrow element. */\n  arrowClassName?: string;\n  /** Determines the placement of the popover. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Sets role of the PopOver element */\n  role?: PopOverRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Overrides the default z-index of PopOver */\n  zIndex?: number;\n}\n\nconst PopOver = React.forwardRef<HTMLDivElement | SVGSVGElement, PopOverProps>((props, ref) => {\n  const {\n    id,\n    children,\n    controllerRef,\n    popOverRef,\n    show = false,\n    className = '',\n    variant = PopOverVariant.positionautomatic,\n    role,\n    testId,\n    arrowClassName,\n    zIndex = ZIndex.PopOver,\n  } = props;\n\n  const bubbleRef = popOverRef || useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(bubbleRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  const isTooltip = role === 'tooltip';\n\n  const popOverClasses = classNames(styles.popover, { [styles['popover--visible']]: isTooltip ? show : controllerisVisible }, className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.popover__arrow, arrowClassName, {\n    [styles['popover__arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['popover__arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n    [styles['popover__arrow--visible']]: isTooltip ? show : controllerisVisible,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  return (\n    <>\n      <div\n        id={id}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={popOverClasses}\n        style={{ ...bubbleStyle, zIndex }}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.PopOver}\n        role={role}\n      >\n        {children}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n});\n\nPopOver.displayName = 'PopOver';\n\nexport default PopOver;\n"],"names":["PopOverVariant"],"mappings":"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"}

package/TabList.js

@@ -32,7 +32,7 @@ const TabItem = (props) => {
   };
   const itemRef = useRef(null);
   useEffect(() => {
-    if (isSelected) {
+    if (isSelected && props.tabListVisible) {
       scrollToTab(props.index);
     }
   }, [isSelected]);
@@ -82,6 +82,7 @@ const TabList = (props) => {
   const lastTab = tabRefs.current && tabRefs.current[tabRefs.current.length - 1];
   const firstTabVisible = useIsVisible(firstTab);
   const lastTabVisible = useIsVisible(lastTab);
+  const tabListVisible = useIsVisible(listRef);
   const shouldShowFadeStart = () => {
     return !firstTabVisible && selectedTab !== 0;
   };
@@ -105,6 +106,7 @@ const TabList = (props) => {
           TabItem,
           {
             tabRefs,
+            tabListVisible,
             index,
             selectedTab,
             onTabListClick,

package/TabList.js.map

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

package/components/Label/Label.d.ts

@@ -9,7 +9,7 @@ export type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span' | 'label' | 'p
 export interface LabelProps {
     /** Component shown after label - discourage use of this */
     afterLabelChildren?: React.ReactNode;
-    /** Adds custom classes to the element. */
+    /** Sets the content of the Label */
     children?: React.ReactNode;
     /** Adds custom classes to the label tag. */
     labelClassName?: string;

package/components/Label/SubLabel.d.ts

@@ -2,6 +2,8 @@ import { default as React } from 'react';
 import { LabelText } from './Label';
 import { FormOnColor } from '../../constants';
 export interface SublabelProps {
+    /** Sets the content of the Sublabel */
+    children?: React.ReactNode;
     /** Adds custom classes to the element. */
     className?: string;
     /** id that is placed on the wrapper */

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

@@ -7,6 +7,7 @@ interface TabItemProps {
     color: TabsColors;
     selectedTab: number;
     tabRefs: React.MutableRefObject<React.RefObject<HTMLButtonElement>[] | null | undefined>;
+    tabListVisible: boolean;
     onTabListClick: (index: number) => void;
 }
 declare const TabItem: React.FC<TabItemProps>;

package/components/Toggle/index.js

@@ -2450,7 +2450,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.13.1";
+    this.version = "11.14.3";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -2783,20 +2783,6 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
   }
   return animations;
 }
-function resolveElements(elementOrSelector, scope, selectorCache) {
-  var _a;
-  if (elementOrSelector instanceof Element) {
-    return [elementOrSelector];
-  } else if (typeof elementOrSelector === "string") {
-    let root = document;
-    if (scope) {
-      root = scope.current;
-    }
-    const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
-    return elements ? Array.from(elements) : [];
-  }
-  return Array.from(elementOrSelector);
-}
 const createAxis = () => ({ min: 0, max: 0 });
 const createBox = () => ({
   x: createAxis(),
@@ -2832,6 +2818,20 @@ function animateSingleValue(value, keyframes2, options) {
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
   return motionValue$1.animation;
 }
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  var _a;
+  if (elementOrSelector instanceof Element) {
+    return [elementOrSelector];
+  } else if (typeof elementOrSelector === "string") {
+    let root = document;
+    if (scope) {
+      root = scope.current;
+    }
+    const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+    return elements ? Array.from(elements) : [];
+  }
+  return Array.from(elementOrSelector);
+}
 const isBrowser = typeof window !== "undefined";
 function isControllingVariants(props) {
   return isAnimationControls(props.animate) || variantProps.some((name) => isVariantLabel(props[name]));
@@ -3098,7 +3098,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.13.1", `Attempting to mix Motion versions ${nextValue.version} with 11.13.1 may not work as expected.`);
+        warnOnce(nextValue.version === "11.14.3", `Attempting to mix Motion versions ${nextValue.version} with 11.14.3 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));