@helsenorge/designsystem-react 10.0.2 → 10.2.0

package/components/Tooltip/index.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useRef, useContext, useEffect, useState } from "react";
+import React__default, { useRef, useContext, useEffect, useState } from "react";
 import { T as TooltipWord } from "../../TooltipWord.js";
 import { useDelayedState } from "../../hooks/useDelayedState.js";
 import { useUuid } from "../../hooks/useUuid.js";
@@ -75,7 +75,7 @@ const Tooltip = ({ children, description, testId }) => {
     /* @__PURE__ */ jsx(HelpBubble, { helpBubbleId, controllerRef: wordRef, role: "tooltip", showBubble: showTooltip || keepOpen, children: description })
   ] });
 };
-const TooltipOpenContext = React.createContext({
+const TooltipOpenContext = React__default.createContext({
   currentTooltip: void 0
 });
 const TooltipOpenProvider = ({ children }) => {

package/components/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n  children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,iBAAiB;AAWhB,MAAM,UAAkC,CAAC,EAAE,UAAU,aAAa,aAAa;AACpF,QAAM,eAAe,QAAQ;AACvB,QAAA,UAAU,OAA0B,IAAI;AAC9C,QAAM,EAAE,gBAAgB,sBAAsB,WAAW,kBAAkB;AAC3E,QAAM,CAAC,EAAE,aAAa,SAAY,GAAA,uBAAuB,cAAc,IAAI;AAAA,IACzE,EAAE,aAAa,OAAO,UAAU,MAAM;AAAA,IACtC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB;AACtB;AAAA,IAAA;AAEF,QAAI,aAAa;AACf,wBAAkB,YAAY;AAAA,IAAA,OACzB;AACL,wBAAkB,MAAS;AAAA,IAAA;AAAA,EAC7B,GACC,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,mBAAmB,gBAAgB,OAAO,mBAAmB,aAAa;AAC5E,qBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EACpF,GACC,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAsB,MAAY;AACtC,QAAI,CAAC,aAAa;AAChB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,YAAU,MAAM;AACL,aAAA,iBAAiB,WAAW,mBAAmB;AACxD,WAAO,MAAY;AACR,eAAA,oBAAoB,WAAW,mBAAmB;AAAA,IAC7D;AAAA,EACF,GAAG,EAAE;AAEL,QAAM,qBAAqB,MAAY;AACtB,mBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,EACtG;AAEA,QAAM,cAAc,MAAY;AAC9B,QAAI,CAAC,gBAAgB;AACnB,4BAAsB,gBAAc,EAAE,aAAa,MAAM,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EAE5F;AAEA,QAAM,aAAa,MAAY;AAC7B,mBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,EACpF;AAEM,QAAA,gBAAgB,CAAC,MAAkD;AACnE,QAAA,EAAE,QAAQ,SAAS;AACN,qBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,IAAA;AAElG,QAAA,EAAE,QAAQ,UAAU;AACtB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,YAAW,EAAA,cAA4B,eAAe,SAAS,MAAK,WAAU,YAAY,eAAe,UACvG,UACH,YAAA,CAAA;AAAA,EAAA,GACF;AAEJ;AAOA,MAAM,qBAAqB,MAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC;AAMM,MAAM,sBAA0D,CAAC,EAAE,eAAe;AACvF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB;AAEtD,SAAA,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAgB,qBAAsB,UAAS;AAC9F;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\n\nimport TooltipWord from './TooltipWord';\nimport { useDelayedState } from '../../hooks/useDelayedState';\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLButtonElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\ninterface TooltipOpenProviderProps {\n  children?: React.ReactNode;\n}\n\nexport const TooltipOpenProvider: React.FC<TooltipOpenProviderProps> = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["React"],"mappings":";;;;;;AAOA,MAAM,iBAAiB;AAWhB,MAAM,UAAkC,CAAC,EAAE,UAAU,aAAa,aAAa;AACpF,QAAM,eAAe,QAAQ;AACvB,QAAA,UAAU,OAA0B,IAAI;AAC9C,QAAM,EAAE,gBAAgB,sBAAsB,WAAW,kBAAkB;AAC3E,QAAM,CAAC,EAAE,aAAa,SAAY,GAAA,uBAAuB,cAAc,IAAI;AAAA,IACzE,EAAE,aAAa,OAAO,UAAU,MAAM;AAAA,IACtC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB;AACtB;AAAA,IAAA;AAEF,QAAI,aAAa;AACf,wBAAkB,YAAY;AAAA,IAAA,OACzB;AACL,wBAAkB,MAAS;AAAA,IAAA;AAAA,EAC7B,GACC,CAAC,WAAW,CAAC;AAEhB,YAAU,MAAM;AACd,QAAI,mBAAmB,gBAAgB,OAAO,mBAAmB,aAAa;AAC5E,qBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EACpF,GACC,CAAC,cAAc,CAAC;AAEnB,QAAM,sBAAsB,MAAY;AACtC,QAAI,CAAC,aAAa;AAChB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,YAAU,MAAM;AACL,aAAA,iBAAiB,WAAW,mBAAmB;AACxD,WAAO,MAAY;AACR,eAAA,oBAAoB,WAAW,mBAAmB;AAAA,IAC7D;AAAA,EACF,GAAG,EAAE;AAEL,QAAM,qBAAqB,MAAY;AACtB,mBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,EACtG;AAEA,QAAM,cAAc,MAAY;AAC9B,QAAI,CAAC,gBAAgB;AACnB,4BAAsB,gBAAc,EAAE,aAAa,MAAM,UAAU,UAAU,WAAW;AAAA,IAAA;AAAA,EAE5F;AAEA,QAAM,aAAa,MAAY;AAC7B,mBAAe,gBAAc,EAAE,aAAa,OAAO,UAAU,UAAU,WAAW;AAAA,EACpF;AAEM,QAAA,gBAAgB,CAAC,MAAkD;AACnE,QAAA,EAAE,QAAQ,SAAS;AACN,qBAAA,CAAA,eAAc,EAAE,aAAa,CAAC,UAAU,aAAa,UAAU,CAAC,UAAU,SAAW,EAAA;AAAA,IAAA;AAElG,QAAA,EAAE,QAAQ,UAAU;AACtB,qBAAe,EAAE,aAAa,OAAO,UAAU,OAAO;AAAA,IAAA;AAAA,EAE1D;AAEA,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,mBAAmB;AAAA,QACnB;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,IACA,oBAAC,YAAW,EAAA,cAA4B,eAAe,SAAS,MAAK,WAAU,YAAY,eAAe,UACvG,UACH,YAAA,CAAA;AAAA,EAAA,GACF;AAEJ;AAOA,MAAM,qBAAqBA,eAAM,cAA8B;AAAA,EAC7D,gBAAgB;AAClB,CAAC;AAMM,MAAM,sBAA0D,CAAC,EAAE,eAAe;AACvF,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAiB;AAEtD,SAAA,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,gBAAgB,qBAAsB,UAAS;AAC9F;"}

package/components/Validation/index.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import classNames from "classnames";
 import { A as AnchorLink } from "../../AnchorLink.js";
 import { L as List } from "../../List.js";
@@ -50,10 +50,10 @@ const ValidationSummary = (props) => {
     }
   );
 };
-const Validation = React.forwardRef((props, ref) => {
+const Validation = React__default.forwardRef((props, ref) => {
   const validationErrorClass = styles["validation__error-wrapper"];
   const cloneFormElement = (child) => {
-    return React.cloneElement(child, {
+    return React__default.cloneElement(child, {
       ...child.props,
       errorWrapperClassName: validationErrorClass
     });
@@ -62,15 +62,15 @@ const Validation = React.forwardRef((props, ref) => {
     if (isComponent(child, FormGroup) || isComponent(child, Checkbox) || isComponent(child, RadioButton) || isComponent(child, Textarea) || isComponent(child, Input) || isComponent(child, Select) || isComponent(child, Slider) || isComponentWithDisplayName(child, "DateTimePickerWrapper") || isComponentWithDisplayName(child, "DatePicker") || isComponentWithDisplayName(child, "DateTime")) {
       return cloneFormElement(child);
     }
-    if (React.isValidElement(child) && child.type === React.Fragment) {
-      return React.Children.map(child.props.children, (child2) => {
+    if (React__default.isValidElement(child) && child.type === React__default.Fragment) {
+      return React__default.Children.map(child.props.children, (child2) => {
         return renderChild(child2);
       });
     }
     return child;
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "data-testid": props.testId, "data-analyticsid": AnalyticsId.Validation, className: props.className, ref, children: React.Children.map(props.children, (child) => renderChild(child)) }),
+    /* @__PURE__ */ jsx("div", { "data-testid": props.testId, "data-analyticsid": AnalyticsId.Validation, className: props.className, ref, children: React__default.Children.map(props.children, (child) => renderChild(child)) }),
     /* @__PURE__ */ jsx(ValidationSummary, { errorTitle: props.errorTitle, errors: props.errors })
   ] });
 });

package/components/Validation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["child"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Validation/ErrorListItem.tsx","../../../src/components/Validation/ErrorList.tsx","../../../src/components/Validation/ValidationSummary.tsx","../../../src/components/Validation/Validation.tsx"],"sourcesContent":["import React from 'react';\n\nimport { ErrorDetails, FocusableElement } from './types';\nimport AnchorLink, { AnchorLinkOnClickEvent } from '../AnchorLink';\n\ninterface ErrorElementProps {\n  name: string;\n  error: ErrorDetails;\n}\n\nconst ErrorListItem: React.FC<ErrorElementProps> = props => {\n  const handleClick = (event?: AnchorLinkOnClickEvent, element?: FocusableElement): void => {\n    event?.preventDefault();\n    element?.focus && element?.focus();\n  };\n\n  if (props.error.ref) {\n    return (\n      <AnchorLink href={`#${props.name}`} onClick={(e): void => handleClick(e, props.error.ref)}>\n        {props.error.message}\n      </AnchorLink>\n    );\n  }\n\n  return <>{props.error.message}</>;\n};\n\nexport default ErrorListItem;\n","import React from 'react';\n\nimport ErrorListItem from './ErrorListItem';\nimport { ValidationErrors } from './types';\nimport List from '../List';\n\ninterface ErrorListProps {\n  errors: ValidationErrors;\n}\n\nconst ErrorList: React.FC<ErrorListProps> = props => (\n  <List>\n    {Object.entries(props.errors).map(([name, error]) => (\n      <List.Item key={name}>\n        <ErrorListItem name={name} error={error} />\n      </List.Item>\n    ))}\n  </List>\n);\n\nexport default ErrorList;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorList from './ErrorList';\nimport { ValidationErrors } from './types';\nimport { useUuid } from '../../hooks/useUuid';\nimport Title, { TitleTags } from '../Title';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationSummaryProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Error list */\n  errors?: ValidationErrors;\n  /** Markup props for error summary title. Default: h2 */\n  errorTitleHtmlMarkup?: TitleTags;\n  /** Will be shown last */\n  children?: React.ReactNode;\n}\n\nconst ValidationSummary: React.FC<ValidationSummaryProps> = props => {\n  const { errorTitleHtmlMarkup = 'h2' } = props;\n  const titleId = useUuid();\n\n  const hasErrors = !!props.errors && Object.entries(props.errors).length > 0;\n\n  const summaryClasses = classNames(styles['validation__summary'], hasErrors && styles['validation__summary--visible']);\n\n  return (\n    <div\n      role={'status'}\n      aria-atomic={'true'}\n      aria-live={'polite'}\n      aria-relevant={'all'}\n      aria-labelledby={hasErrors && props.errorTitle ? titleId : undefined}\n      className={summaryClasses}\n    >\n      {hasErrors && (\n        <>\n          {props.errorTitle && (\n            <Title appearance=\"title4\" id={titleId} htmlMarkup={errorTitleHtmlMarkup} margin={{ marginTop: 0, marginBottom: 1 }}>\n              {props.errorTitle}\n            </Title>\n          )}\n          <ErrorList errors={props.errors!} />\n        </>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ValidationSummary;\n","import React from 'react';\n\nimport { ValidationErrors } from './types';\nimport ValidationSummary from './ValidationSummary';\nimport { AnalyticsId, FormSize } from '../../constants';\nimport { isComponent, isComponentWithDisplayName } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox';\nimport { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport FormGroup, { FormGroupProps } from '../FormGroup/FormGroup';\nimport Input, { InputProps } from '../Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\n\nimport styles from './styles.module.scss';\n\ninterface ValidationProps {\n  /** Error summary title */\n  errorTitle?: string;\n  /** Validation errors. If errors include references to HTML elements, the errors will be rendered as links with an onClick handler to focus the element. */\n  errors?: ValidationErrors;\n  /** Items in the Validation compontent */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  size?: keyof typeof FormSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Validation = React.forwardRef((props: ValidationProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const validationErrorClass = styles['validation__error-wrapper'];\n\n  const cloneFormElement = <T extends ErrorWrapperClassNameProps>(child: React.ReactElement<T>): React.ReactElement<T> => {\n    return React.cloneElement(child, {\n      ...child.props,\n      errorWrapperClassName: validationErrorClass,\n    });\n  };\n\n  const renderChild = (child: React.ReactNode): React.ReactNode => {\n    if (\n      isComponent<FormGroupProps>(child, FormGroup) ||\n      isComponent<CheckboxProps>(child, Checkbox) ||\n      isComponent<RadioButtonProps>(child, RadioButton) ||\n      isComponent<TextareaProps>(child, Textarea) ||\n      isComponent<InputProps>(child, Input) ||\n      isComponent<SelectProps>(child, Select) ||\n      isComponent<SliderProps>(child, Slider) ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTimePickerWrapper') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DatePicker') ||\n      isComponentWithDisplayName<ErrorWrapperClassNameProps>(child, 'DateTime')\n    ) {\n      return cloneFormElement<ErrorWrapperClassNameProps>(child);\n    }\n    if (React.isValidElement(child) && child.type === React.Fragment) {\n      return React.Children.map(child.props.children, (child: React.ReactNode) => {\n        return renderChild(child);\n      });\n    }\n\n    return child;\n  };\n\n  return (\n    <>\n      <div data-testid={props.testId} data-analyticsid={AnalyticsId.Validation} className={props.className} ref={ref}>\n        {React.Children.map(props.children, (child: React.ReactNode) => renderChild(child))}\n      </div>\n      <ValidationSummary errorTitle={props.errorTitle} errors={props.errors} />\n    </>\n  );\n});\n\nValidation.displayName = 'Validation';\n\nexport default Validation;\n"],"names":["React","child"],"mappings":"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"}

package/constants.d.ts

@@ -59,6 +59,7 @@ export declare enum AnalyticsId {
     Chip = "chip",
     Close = "close",
     DictionaryTrigger = "dictionary-trigger",
+    Drawer = "Drawer",
     Dropdown = "dropdown",
     Duolist = "duolist",
     EmptyState = "empty-state",

package/constants.js

@@ -37,6 +37,7 @@ var AnalyticsId = /* @__PURE__ */ ((AnalyticsId2) => {
   AnalyticsId2["Chip"] = "chip";
   AnalyticsId2["Close"] = "close";
   AnalyticsId2["DictionaryTrigger"] = "dictionary-trigger";
+  AnalyticsId2["Drawer"] = "Drawer";
   AnalyticsId2["Dropdown"] = "dropdown";
   AnalyticsId2["Duolist"] = "duolist";
   AnalyticsId2["EmptyState"] = "empty-state";

package/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"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"}
+{"version":3,"file":"constants.js","sources":["../src/constants.ts"],"sourcesContent":["export enum IconSize {\n  XXSmall = 24,\n  XSmall = 38,\n  Small = 48,\n  Medium = 64,\n  Large = 80,\n  XLarge = 130,\n}\n\nexport enum ZIndex {\n  Modal = 1300000,\n  PopOver = 11000,\n  OverlayScreen = 9999,\n  LightBoxButtons = 1000,\n}\n\nexport const AVERAGE_CHARACTER_WIDTH_PX = 12;\n\nexport interface HTMLButtonProps {\n  autoFocus?: boolean;\n  disabled?: boolean;\n  form?: string;\n  formAction?: string;\n  formEncType?: string;\n  formMethod?: string;\n  formNoValidate?: boolean;\n  formTarget?: string;\n  name?: string;\n  type?: 'submit' | 'reset' | 'button' | string;\n  value?: string | string[] | number;\n  id?: string;\n}\n\nexport type AnchorTarget = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface HTMLAnchorProps {\n  download?: string;\n  href?: string;\n  hrefLang?: string;\n  media?: string;\n  ping?: string;\n  rel?: AnchorTarget;\n  target?: string;\n  referrerPolicy?:\n    | ''\n    | 'same-origin'\n    | 'no-referrer'\n    | 'no-referrer-when-downgrade'\n    | 'origin'\n    | 'origin-when-cross-origin'\n    | 'strict-origin'\n    | 'strict-origin-when-cross-origin'\n    | 'unsafe-url';\n}\n\nexport type ButtonVariant = 'secondary' | 'tertiary' | string | undefined | null;\n\nexport enum FormOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  ondark = 'ondark',\n  oninvalid = 'oninvalid',\n}\n\nexport enum FormSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum AnalyticsId {\n  AnchorLink = 'anchor-link',\n  Avatar = 'avatar',\n  Badge = 'badge',\n  Button = 'button',\n  Checkbox = 'checkbox',\n  Chip = 'chip',\n  Close = 'close',\n  DictionaryTrigger = 'dictionary-trigger',\n  Drawer = 'Drawer',\n  Dropdown = 'dropdown',\n  Duolist = 'duolist',\n  EmptyState = 'empty-state',\n  Expander = 'expander',\n  ExpanderHierarchy = 'expander-hierarchy',\n  ExpanderHierarchyExpander = 'expander-hierarchy-expander',\n  ExpanderList = 'expander-list',\n  ExpanderListExpander = 'expander-list-expander',\n  EyebrowHeader = 'eyebrow-header',\n  FormGroup = 'form-group',\n  FormLayout = 'form-layout',\n  HelpBubble = 'help-bubble',\n  HelpQuestion = 'help-question',\n  HighlightPanel = 'highlight-panel',\n  Icon = 'icon',\n  Illustration = 'Illustration',\n  Input = 'input',\n  Label = 'label',\n  Link = 'link',\n  LinkList = 'link-list',\n  List = 'list',\n  Loader = 'loader',\n  Logo = 'logo',\n  Modal = 'modal',\n  NotificationPanel = 'notification-panel',\n  Panel = 'panel',\n  PanelList = 'panel-list',\n  PopMenu = 'pop-menu',\n  PopOver = 'pop-over',\n  Portal = 'portal',\n  PromoPanel = 'promo-panel',\n  RadioButton = 'radio-button',\n  Select = 'select',\n  SharingStatus = 'sharing-status',\n  Slider = 'slider',\n  Spacer = 'spacer',\n  StatusDot = 'status-dot',\n  Step = 'step',\n  StepButtons = 'step-buttons',\n  Stepper = 'stepper',\n  Sublabel = 'sublabel',\n  Table = 'table',\n  Tag = 'tag',\n  TagList = 'tag-list',\n  Textarea = 'textarea',\n  Tile = 'tile',\n  Title = 'title',\n  Toggle = 'toggle',\n  Tooltip = 'tooltip',\n  Trigger = 'trigger',\n  Validation = 'validation',\n}\n\nexport enum KeyboardEventKey {\n  Enter = 'Enter',\n  Escape = 'Escape',\n  ArrowDown = 'ArrowDown',\n  ArrowUp = 'ArrowUp',\n  ArrowRight = 'ArrowRight',\n  ArrowLeft = 'ArrowLeft',\n  Home = 'Home',\n  End = 'End',\n  Space = ' ',\n  Tab = 'Tab',\n}\n"],"names":["IconSize","ZIndex","FormOnColor","FormSize","AnalyticsId","KeyboardEventKey"],"mappings":"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"}

package/hoc/withBreakpoint/withBreakpoint.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { useBreakpoint } from "../../hooks/useBreakpoint.js";
 function withBreakpoint(Component) {
-  return React.forwardRef((props, ref) => {
+  return React__default.forwardRef((props, ref) => {
     const breakpoint = useBreakpoint();
     return /* @__PURE__ */ jsx(Component, { ref, ...props, breakpoint });
   });

package/hoc/withBreakpoint/withBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":[],"mappings":";;;AAqBO,SAAS,eAA0C,WAAmC;AAC3F,SAAO,MAAM,WAAW,CAAC,OAAO,QAAQ;AACtC,UAAM,aAAa,cAAc;AACjC,WAAQ,oBAAA,WAAA,EAAU,KAAW,GAAI,OAAa,YAAwB;AAAA,EAAA,CACvE;AACH;"}
+{"version":3,"file":"withBreakpoint.js","sources":["../../../src/hoc/withBreakpoint/withBreakpoint.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nexport interface BreakpointProps {\n  breakpoint: Breakpoint;\n}\n\n// Hentet fra https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35834#issuecomment-497605842\nexport function withBreakpoint<P extends BreakpointProps, C extends React.ComponentClass<P>>(\n  Component: C & React.ComponentType<P>\n): React.ForwardRefExoticComponent<Omit<React.ComponentPropsWithoutRef<C> & { ref?: React.Ref<InstanceType<C>> }, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps & { ref?: React.Ref<unknown> }>(\n  Component: React.ForwardRefExoticComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(\n  Component: React.FunctionComponent<P>\n): React.ForwardRefExoticComponent<Omit<P, keyof BreakpointProps>>;\n\nexport function withBreakpoint<P extends BreakpointProps>(Component: React.ComponentType<P>) {\n  return React.forwardRef((props, ref) => {\n    const breakpoint = useBreakpoint();\n    return <Component ref={ref} {...(props as P)} breakpoint={breakpoint} />;\n  });\n}\n\nexport default withBreakpoint;\n"],"names":["React"],"mappings":";;;AAqBO,SAAS,eAA0C,WAAmC;AAC3F,SAAOA,eAAM,WAAW,CAAC,OAAO,QAAQ;AACtC,UAAM,aAAa,cAAc;AACjC,WAAQ,oBAAA,WAAA,EAAU,KAAW,GAAI,OAAa,YAAwB;AAAA,EAAA,CACvE;AACH;"}

package/hooks/useBreakpoint.d.ts

@@ -6,8 +6,4 @@ export declare enum Breakpoint {
     lg,
     xl
 }
-/**
- * Lytt på endringer i breakpoint basert på media queries. Trigger re-render bare når breakpoint er endret.
- * @returns Gjeldende breakpoint
- */
 export declare const useBreakpoint: () => Breakpoint;

package/hooks/useBreakpoint.js

@@ -9,10 +9,19 @@ var Breakpoint = ((Breakpoint2) => {
   Breakpoint2[Breakpoint2["xl"] = breakpoints.xl] = "xl";
   return Breakpoint2;
 })(Breakpoint || {});
+function getCurrentBreakpoint() {
+  const mediaQueryList = Object.entries(screen).reverse().map(([size, mediaQuery]) => {
+    return {
+      breakpoint: Breakpoint[size],
+      mq: window.matchMedia(mediaQuery)
+    };
+  });
+  const matched = mediaQueryList.find((entry) => entry.mq.matches);
+  return (matched == null ? void 0 : matched.breakpoint) ?? Breakpoint.xxs;
+}
 const useBreakpoint = () => {
-  const [breakpoint, setBreakpoint] = useState(Breakpoint.xxs);
+  const [breakpoint, setBreakpoint] = useState(() => getCurrentBreakpoint());
   useEffect(() => {
-    var _a;
     const handleMediaQueryEvent = (event) => {
       switch (event.media) {
         case screen.xl:
@@ -32,27 +41,23 @@ const useBreakpoint = () => {
           return;
         default:
           setBreakpoint(Breakpoint.xxs);
-          return;
       }
     };
-    const mediaQueryList = Object.entries(screen).reverse().map(([size, mediaQuery]) => {
-      return { breakpoint: Breakpoint[size], mediaQuery: window.matchMedia(mediaQuery) };
-    });
-    mediaQueryList.forEach((x) => {
-      if (x.mediaQuery.addEventListener) {
-        x.mediaQuery.addEventListener("change", handleMediaQueryEvent);
-      } else if (x.mediaQuery.addListener) {
-        x.mediaQuery.addListener(handleMediaQueryEvent);
+    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {
+      const mq = window.matchMedia(mediaQuery);
+      if (mq.addEventListener) {
+        mq.addEventListener("change", handleMediaQueryEvent);
+      } else if (mq.addListener) {
+        mq.addListener(handleMediaQueryEvent);
       }
+      return mq;
     });
-    const initialBreakpoint = ((_a = mediaQueryList.find((x) => x.mediaQuery.matches)) == null ? void 0 : _a.breakpoint) ?? breakpoint;
-    setBreakpoint(initialBreakpoint);
     return () => {
-      mediaQueryList.forEach((x) => {
-        if (x.mediaQuery.removeEventListener) {
-          x.mediaQuery.removeEventListener("change", handleMediaQueryEvent);
-        } else if (x.mediaQuery.removeListener) {
-          x.mediaQuery.removeListener(handleMediaQueryEvent);
+      mediaQueryList.forEach((mq) => {
+        if (mq.removeEventListener) {
+          mq.removeEventListener("change", handleMediaQueryEvent);
+        } else if (mq.removeListener) {
+          mq.removeListener(handleMediaQueryEvent);
         }
       });
     };

package/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\n/**\n * Lytt på endringer i breakpoint basert på media queries. Trigger re-render bare når breakpoint er endret.\n * @returns Gjeldende breakpoint\n */\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(Breakpoint.xxs);\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n          return;\n      }\n    };\n\n    // Lytt etter endringer for hvert breakpoint\n    const mediaQueryList = Object.entries(screen)\n      .reverse()\n      .map(([size, mediaQuery]) => {\n        return { breakpoint: Breakpoint[size as keyof typeof Breakpoint], mediaQuery: window.matchMedia(mediaQuery) };\n      });\n    mediaQueryList.forEach(x => {\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (x.mediaQuery.addEventListener) {\n        x.mediaQuery.addEventListener('change', handleMediaQueryEvent);\n      } else if (x.mediaQuery.addListener) {\n        x.mediaQuery.addListener(handleMediaQueryEvent);\n      }\n    });\n\n    // Finn breakpoint ved første render\n    const initialBreakpoint = mediaQueryList.find(x => x.mediaQuery.matches)?.breakpoint ?? breakpoint;\n    setBreakpoint(initialBreakpoint);\n\n    return (): void => {\n      mediaQueryList.forEach(x => {\n        if (x.mediaQuery.removeEventListener) {\n          x.mediaQuery.removeEventListener('change', handleMediaQueryEvent);\n        } else if (x.mediaQuery.removeListener) {\n          x.mediaQuery.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAaL,MAAM,gBAAgB,MAAkB;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,WAAW,GAAG;AAEvE,YAAU,MAAM;;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAC5B;AAAA,MAAA;AAAA,IAEN;AAGA,UAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,aAAA,EAAE,YAAY,WAAW,IAA+B,GAAG,YAAY,OAAO,WAAW,UAAU,EAAE;AAAA,IAAA,CAC7G;AACH,mBAAe,QAAQ,CAAK,MAAA;AAGtB,UAAA,EAAE,WAAW,kBAAkB;AAC/B,UAAA,WAAW,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WACpD,EAAE,WAAW,aAAa;AACjC,UAAA,WAAW,YAAY,qBAAqB;AAAA,MAAA;AAAA,IAChD,CACD;AAGK,UAAA,sBAAoB,oBAAe,KAAK,CAAA,MAAK,EAAE,WAAW,OAAO,MAA7C,mBAAgD,eAAc;AACxF,kBAAc,iBAAiB;AAE/B,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAK,MAAA;AACtB,YAAA,EAAE,WAAW,qBAAqB;AAClC,YAAA,WAAW,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WACvD,EAAE,WAAW,gBAAgB;AACpC,YAAA,WAAW,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACnD,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}
+{"version":3,"file":"useBreakpoint.js","sources":["../../src/hooks/useBreakpoint.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\nimport { breakpoints, screen } from '../theme/grid';\n\nexport enum Breakpoint {\n  xxs = breakpoints.xxs,\n  xs = breakpoints.xs,\n  sm = breakpoints.sm,\n  md = breakpoints.md,\n  lg = breakpoints.lg,\n  xl = breakpoints.xl,\n}\n\nfunction getCurrentBreakpoint(): Breakpoint {\n  // We read from largest -> smallest or vice versa\n  // so that the first match is the \"highest\" one that applies\n  const mediaQueryList = Object.entries(screen)\n    .reverse() // e.g. check xl, lg, md, etc. in descending order\n    .map(([size, mediaQuery]) => {\n      return {\n        breakpoint: Breakpoint[size as keyof typeof Breakpoint],\n        mq: window.matchMedia(mediaQuery),\n      };\n    });\n\n  const matched = mediaQueryList.find(entry => entry.mq.matches);\n  return matched?.breakpoint ?? Breakpoint.xxs;\n}\n\nexport const useBreakpoint = (): Breakpoint => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>(() => getCurrentBreakpoint());\n\n  useEffect(() => {\n    const handleMediaQueryEvent = (event: MediaQueryListEvent): void => {\n      switch (event.media) {\n        case screen.xl:\n          setBreakpoint(event.matches ? Breakpoint.xl : Breakpoint.lg);\n          return;\n        case screen.lg:\n          setBreakpoint(event.matches ? Breakpoint.lg : Breakpoint.md);\n          return;\n        case screen.md:\n          setBreakpoint(event.matches ? Breakpoint.md : Breakpoint.sm);\n          return;\n        case screen.sm:\n          setBreakpoint(event.matches ? Breakpoint.sm : Breakpoint.xs);\n          return;\n        case screen.xs:\n          setBreakpoint(event.matches ? Breakpoint.xs : Breakpoint.xxs);\n          return;\n        default:\n          setBreakpoint(Breakpoint.xxs);\n      }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const mediaQueryList = Object.entries(screen).map(([_size, mediaQuery]) => {\n      const mq = window.matchMedia(mediaQuery);\n      // iOS <=13 har ikke støtte for addEventListener/removeEventListener på MediaQueryList,\n      // men har støtte for addListener\n      if (mq.addEventListener) {\n        mq.addEventListener('change', handleMediaQueryEvent);\n      } else if (mq.addListener) {\n        mq.addListener(handleMediaQueryEvent);\n      }\n      return mq;\n    });\n\n    return (): void => {\n      mediaQueryList.forEach(mq => {\n        if (mq.removeEventListener) {\n          mq.removeEventListener('change', handleMediaQueryEvent);\n        } else if (mq.removeListener) {\n          mq.removeListener(handleMediaQueryEvent);\n        }\n      });\n    };\n  }, []);\n\n  return breakpoint;\n};\n"],"names":["Breakpoint"],"mappings":";;AAIY,IAAA,cAAL,CAAKA,gBAAL;AACLA,cAAAA,YAAA,KAAM,IAAA,YAAY,GAAlB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AACAA,cAAAA,YAAA,IAAK,IAAA,YAAY,EAAjB,IAAA;AANUA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AASZ,SAAS,uBAAmC;AAG1C,QAAM,iBAAiB,OAAO,QAAQ,MAAM,EACzC,QACA,EAAA,IAAI,CAAC,CAAC,MAAM,UAAU,MAAM;AACpB,WAAA;AAAA,MACL,YAAY,WAAW,IAA+B;AAAA,MACtD,IAAI,OAAO,WAAW,UAAU;AAAA,IAClC;AAAA,EAAA,CACD;AAEH,QAAM,UAAU,eAAe,KAAK,CAAS,UAAA,MAAM,GAAG,OAAO;AACtD,UAAA,mCAAS,eAAc,WAAW;AAC3C;AAEO,MAAM,gBAAgB,MAAkB;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,MAAM,sBAAsB;AAErF,YAAU,MAAM;AACR,UAAA,wBAAwB,CAAC,UAAqC;AAClE,cAAQ,MAAM,OAAO;AAAA,QACnB,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,EAAE;AAC3D;AAAA,QACF,KAAK,OAAO;AACV,wBAAc,MAAM,UAAU,WAAW,KAAK,WAAW,GAAG;AAC5D;AAAA,QACF;AACE,wBAAc,WAAW,GAAG;AAAA,MAAA;AAAA,IAElC;AAGM,UAAA,iBAAiB,OAAO,QAAQ,MAAM,EAAE,IAAI,CAAC,CAAC,OAAO,UAAU,MAAM;AACnE,YAAA,KAAK,OAAO,WAAW,UAAU;AAGvC,UAAI,GAAG,kBAAkB;AACpB,WAAA,iBAAiB,UAAU,qBAAqB;AAAA,MAAA,WAC1C,GAAG,aAAa;AACzB,WAAG,YAAY,qBAAqB;AAAA,MAAA;AAE/B,aAAA;AAAA,IAAA,CACR;AAED,WAAO,MAAY;AACjB,qBAAe,QAAQ,CAAM,OAAA;AAC3B,YAAI,GAAG,qBAAqB;AACvB,aAAA,oBAAoB,UAAU,qBAAqB;AAAA,QAAA,WAC7C,GAAG,gBAAgB;AAC5B,aAAG,eAAe,qBAAqB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF,GAAG,EAAE;AAEE,SAAA;AACT;"}

package/hooks/useEventListenerState.js

@@ -1,7 +1,7 @@
-import React from "react";
+import React__default from "react";
 const useEventListenerState = (initial) => {
-  const [value, _setValue] = React.useState(initial);
-  const valueRef = React.useRef(value);
+  const [value, _setValue] = React__default.useState(initial);
+  const valueRef = React__default.useRef(value);
   const setValue = (x) => {
     valueRef.current = x;
     _setValue(x);

package/hooks/useEventListenerState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventListenerState.js","sources":["../../src/hooks/useEventListenerState.ts"],"sourcesContent":["import React from 'react';\n\nexport const useEventListenerState = <T>(initial?: T): [valueRef: React.MutableRefObject<T | undefined>, setValue: (x: T) => void] => {\n  const [value, _setValue] = React.useState<T | undefined>(initial);\n\n  const valueRef = React.useRef(value);\n\n  const setValue = (x: T) => {\n    valueRef.current = x;\n    _setValue(x);\n  };\n\n  return [valueRef, setValue];\n};\n"],"names":[],"mappings":";AAEa,MAAA,wBAAwB,CAAI,YAA6F;AACpI,QAAM,CAAC,OAAO,SAAS,IAAI,MAAM,SAAwB,OAAO;AAE1D,QAAA,WAAW,MAAM,OAAO,KAAK;AAE7B,QAAA,WAAW,CAAC,MAAS;AACzB,aAAS,UAAU;AACnB,cAAU,CAAC;AAAA,EACb;AAEO,SAAA,CAAC,UAAU,QAAQ;AAC5B;"}
+{"version":3,"file":"useEventListenerState.js","sources":["../../src/hooks/useEventListenerState.ts"],"sourcesContent":["import React from 'react';\n\nexport const useEventListenerState = <T>(initial?: T): [valueRef: React.MutableRefObject<T | undefined>, setValue: (x: T) => void] => {\n  const [value, _setValue] = React.useState<T | undefined>(initial);\n\n  const valueRef = React.useRef(value);\n\n  const setValue = (x: T) => {\n    valueRef.current = x;\n    _setValue(x);\n  };\n\n  return [valueRef, setValue];\n};\n"],"names":["React"],"mappings":";AAEa,MAAA,wBAAwB,CAAI,YAA6F;AACpI,QAAM,CAAC,OAAO,SAAS,IAAIA,eAAM,SAAwB,OAAO;AAE1D,QAAA,WAAWA,eAAM,OAAO,KAAK;AAE7B,QAAA,WAAW,CAAC,MAAS;AACzB,aAAS,UAAU;AACnB,cAAU,CAAC;AAAA,EACb;AAEO,SAAA,CAAC,UAAU,QAAQ;AAC5B;"}

package/hooks/useOutsideEvent.d.ts

@@ -1,9 +1,9 @@
 type OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;
 /**
- * Custom hook for klikk eller fokus utenfor et gitt element
- * @param ref Sjekker om det klikkes utenfor dette elementet
- * @param handleClick Callback-funksjon ved klikk utenfor elementet
+ * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)
+ * @param ref Sjekker om det klikkes utenfor dette elementet/elementene
+ * @param callback Callback-funksjon ved klikk utenfor elementet/elementene
  * @param events Type eventer å lytte på. Default: mousedown
  */
-export declare const useOutsideEvent: (ref: React.RefObject<HTMLElement>, handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void, events?: OutsideEvents[]) => void;
+export declare const useOutsideEvent: (ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[], callback: (event: HTMLElementEventMap[OutsideEvents]) => void, events?: OutsideEvents[]) => void;
 export {};

package/hooks/useOutsideEvent.js

@@ -1,8 +1,9 @@
 import { useEffect } from "react";
-const useOutsideEvent = (ref, handleClick, events = ["mousedown"]) => {
+const useOutsideEvent = (ref, callback, events = ["mousedown"]) => {
+  const refArray = Array.isArray(ref) ? ref : [ref];
   const handleOutsideEvent = (event) => {
-    if (ref.current && !event.composedPath().includes(ref.current)) {
-      handleClick(event);
+    if (refArray.every((ref2) => ref2.current && !event.composedPath().includes(ref2.current))) {
+      callback(event);
     }
   };
   useEffect(() => {
@@ -10,7 +11,7 @@ const useOutsideEvent = (ref, handleClick, events = ["mousedown"]) => {
     return () => {
       events.forEach((eventName) => document.removeEventListener(eventName, handleOutsideEvent));
     };
-  }, [ref, handleClick, events]);
+  }, [refArray, callback, events]);
 };
 export {
   useOutsideEvent

package/hooks/useOutsideEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element\n * @param ref Sjekker om det klikkes utenfor dette elementet\n * @param handleClick Callback-funksjon ved klikk utenfor elementet\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement>,\n  handleClick: (event: HTMLElementEventMap[OutsideEvents]) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n    if (ref.current && !event.composedPath().includes(ref.current)) {\n      handleClick(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return (): void => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [ref, handleClick, events]);\n};\n"],"names":[],"mappings":";AAUO,MAAM,kBAAkB,CAC7B,KACA,aACA,SAA0B,CAAC,WAAW,MAC7B;AACH,QAAA,qBAAqB,CAAC,UAAoD;AAC1E,QAAA,IAAI,WAAW,CAAC,MAAM,eAAe,SAAS,IAAI,OAAO,GAAG;AAC9D,kBAAY,KAAK;AAAA,IAAA;AAAA,EAErB;AAEA,YAAU,MAAM;AACd,WAAO,QAAQ,CAAa,cAAA,SAAS,iBAAiB,WAAW,kBAAkB,CAAC;AAEpF,WAAO,MAAY;AACjB,aAAO,QAAQ,CAAa,cAAA,SAAS,oBAAoB,WAAW,kBAAkB,CAAC;AAAA,IACzF;AAAA,EACC,GAAA,CAAC,KAAK,aAAa,MAAM,CAAC;AAC/B;"}
+{"version":3,"file":"useOutsideEvent.js","sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = keyof PickByValue<HTMLElementEventMap, MouseEvent | FocusEvent>;\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)\n * @param ref Sjekker om det klikkes utenfor dette elementet/elementene\n * @param callback Callback-funksjon ved klikk utenfor elementet/elementene\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement> | React.RefObject<HTMLElement>[],\n  callback: (event: HTMLElementEventMap[OutsideEvents]) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const refArray = Array.isArray(ref) ? ref : [ref];\n\n  const handleOutsideEvent = (event: HTMLElementEventMap[OutsideEvents]): void => {\n    if (refArray.every(ref => ref.current && !event.composedPath().includes(ref.current))) {\n      callback(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return (): void => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [refArray, callback, events]);\n};\n"],"names":["ref"],"mappings":";AAUO,MAAM,kBAAkB,CAC7B,KACA,UACA,SAA0B,CAAC,WAAW,MAC7B;AACT,QAAM,WAAW,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,GAAG;AAE1C,QAAA,qBAAqB,CAAC,UAAoD;AAC9E,QAAI,SAAS,MAAM,CAAAA,SAAOA,KAAI,WAAW,CAAC,MAAM,aAAA,EAAe,SAASA,KAAI,OAAO,CAAC,GAAG;AACrF,eAAS,KAAK;AAAA,IAAA;AAAA,EAElB;AAEA,YAAU,MAAM;AACd,WAAO,QAAQ,CAAa,cAAA,SAAS,iBAAiB,WAAW,kBAAkB,CAAC;AAEpF,WAAO,MAAY;AACjB,aAAO,QAAQ,CAAa,cAAA,SAAS,oBAAoB,WAAW,kBAAkB,CAAC;AAAA,IACzF;AAAA,EACC,GAAA,CAAC,UAAU,UAAU,MAAM,CAAC;AACjC;"}

package/hooks/useReturnFocusOnUnmount.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A hook that stores the currently focused element when the component mounts,
+ * and returns focus to it when the component unmounts.
+ */
+export declare const useReturnFocusOnUnmount: (ref: React.RefObject<HTMLElement>) => void;

package/hooks/useReturnFocusOnUnmount.js

@@ -0,0 +1,20 @@
+import { useRef, useEffect } from "react";
+import { getDocumentActiveElement } from "../utils/focus.js";
+const useReturnFocusOnUnmount = (ref) => {
+  const previouslyFocusedElementRef = useRef(null);
+  useEffect(() => {
+    const activeElement = ref.current ? getDocumentActiveElement(ref.current) : null;
+    if (activeElement instanceof HTMLElement) {
+      previouslyFocusedElementRef.current = activeElement;
+    }
+    return () => {
+      if (previouslyFocusedElementRef.current instanceof HTMLElement && document.contains(previouslyFocusedElementRef.current)) {
+        previouslyFocusedElementRef.current.focus();
+      }
+    };
+  }, []);
+};
+export {
+  useReturnFocusOnUnmount
+};
+//# sourceMappingURL=useReturnFocusOnUnmount.js.map

package/hooks/useReturnFocusOnUnmount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReturnFocusOnUnmount.js","sources":["../../src/hooks/useReturnFocusOnUnmount.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * A hook that stores the currently focused element when the component mounts,\n * and returns focus to it when the component unmounts.\n */\nexport const useReturnFocusOnUnmount = (ref: React.RefObject<HTMLElement>): void => {\n  const previouslyFocusedElementRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    // Captures which element was focused on mount\n    // const activeElement = document.activeElement;\n    const activeElement = ref.current ? getDocumentActiveElement(ref.current) : null;\n    if (activeElement instanceof HTMLElement) {\n      previouslyFocusedElementRef.current = activeElement;\n    }\n\n    // Restores focus to the stored element on unmount\n    return (): void => {\n      if (previouslyFocusedElementRef.current instanceof HTMLElement && document.contains(previouslyFocusedElementRef.current)) {\n        previouslyFocusedElementRef.current.focus();\n      }\n    };\n  }, []);\n};\n"],"names":[],"mappings":";;AAQa,MAAA,0BAA0B,CAAC,QAA4C;AAC5E,QAAA,8BAA8B,OAA2B,IAAI;AAEnE,YAAU,MAAM;AAGd,UAAM,gBAAgB,IAAI,UAAU,yBAAyB,IAAI,OAAO,IAAI;AAC5E,QAAI,yBAAyB,aAAa;AACxC,kCAA4B,UAAU;AAAA,IAAA;AAIxC,WAAO,MAAY;AACjB,UAAI,4BAA4B,mBAAmB,eAAe,SAAS,SAAS,4BAA4B,OAAO,GAAG;AACxH,oCAA4B,QAAQ,MAAM;AAAA,MAAA;AAAA,IAE9C;AAAA,EACF,GAAG,EAAE;AACP;"}

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helsenorge/designsystem.git"
   },
   "homepage": "https://helsenorge.design",
-  "version": "10.0.2",
+  "version": "10.2.0",
   "author": "Helsenorge",
   "license": "MIT",
   "dependencies": {

package/scss/_breakpoints.scss

@@ -21,3 +21,9 @@ $container-max-widths: (
   md: 612px,
   lg: 1056px,
 );
+
+@mixin tiny-screens-media-query {
+  @media (width <= 319px), (height <= 308px) {
+    @content;
+  }
+}

package/scss/_font-mixins.scss

@@ -135,6 +135,28 @@
   }
 }
 
+@mixin sublabel {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 600;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin sublabel-subdued {
+  font-size: 1rem;
+  line-height: 1.2rem;
+  font-weight: 400;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
 @mixin compact-data {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -183,3 +205,36 @@
     line-height: 1.75rem;
   }
 }
+
+@mixin text-list {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-type {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin definition-list-data {
+  font-size: 1.125rem;
+  line-height: 1.375rem;
+  font-weight: 400;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}

package/scss/typography.module.scss

@@ -60,6 +60,18 @@ import designsystemtypography from './scss/typography.scss'
   @include label;
 }
 
+.label-subdued {
+  @include label-subdued;
+}
+
+.sublabel {
+  @include sublabel;
+}
+
+.sublabel-subdued {
+  @include sublabel-subdued;
+}
+
 .compact-data {
   @include compact-data;
 }
@@ -107,6 +119,18 @@ import designsystemtypography from './scss/typography.scss'
   @include input-text-large;
 }
 
+.text-list {
+  @include text-list;
+}
+
+.definition-list-type {
+  @include definition-list-type;
+}
+
+.definition-list-data {
+  @include definition-list-data;
+}
+
 .anchorlink-wrapper {
   a {
     display: inline;

package/scss/typography.module.scss.d.ts

@@ -2,6 +2,8 @@ export type Styles = {
   'anchorlink-wrapper': string;
   body: string;
   'compact-data': string;
+  'definition-list-data': string;
+  'definition-list-type': string;
   'focused-content': string;
   form: string;
   'image-caption': string;
@@ -9,11 +11,15 @@ export type Styles = {
   'input-text': string;
   'input-text-large': string;
   label: string;
+  'label-subdued': string;
   legend: string;
   preamble: string;
   'status-timestamp': string;
   strong: string;
+  sublabel: string;
+  'sublabel-subdued': string;
   'table-cell': string;
+  'text-list': string;
   'title-feature': string;
   title1: string;
   title2: string;

package/scss/typography.stories.tsx

@@ -65,6 +65,18 @@ export const Label: Story = {
   render: args => <div className={designsystemtypography.label}>{args.tekst}</div>,
 };
 
+export const LabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['label-subdued']}>{args.tekst}</div>,
+};
+
+export const Sublabel: Story = {
+  render: args => <div className={designsystemtypography.sublabel}>{args.tekst}</div>,
+};
+
+export const SublabelSubdued: Story = {
+  render: args => <div className={designsystemtypography['sublabel-subdued']}>{args.tekst}</div>,
+};
+
 export const CompactData: Story = {
   render: args => <div className={designsystemtypography['compact-data']}>{args.tekst}</div>,
 };
@@ -97,6 +109,18 @@ export const InputTextLarge: Story = {
   render: args => <div className={designsystemtypography['input-text-large']}>{args.tekst}</div>,
 };
 
+export const TextList: Story = {
+  render: args => <div className={designsystemtypography['text-list']}>{args.tekst}</div>,
+};
+
+export const DefinitionListType: Story = {
+  render: args => <div className={designsystemtypography['definition-list-type']}>{args.tekst}</div>,
+};
+
+export const DefinitionListData: Story = {
+  render: args => <div className={designsystemtypography['definition-list-data']}>{args.tekst}</div>,
+};
+
 export const AnchorlinkWrapper: Story = {
   render: args => (
     <div className={designsystemtypography['anchorlink-wrapper']}>

package/theme/index.js

@@ -1,6 +1,6 @@
-import { screen, breakpoints } from "./grid.js";
+import { breakpoints, screen } from "./grid.js";
 import { palette } from "./palette.js";
-import { spacer, spacers } from "./spacers.js";
+import { spacers, spacer } from "./spacers.js";
 const theme = {
   spacer,
   spacers,