@helsenorge/designsystem-react 14.7.2 → 15.0.0-beta.0

package/lib/Chip.js

@@ -1,21 +1,25 @@
-import { a as IconSize, n as AnalyticsId, s as LanguageLocales } from "./constants2.js";
+import { AnalyticsId, IconSize, LanguageLocales } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as useLanguage } from "./useLanguage.js";
-import { t as X_default } from "./X.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import X from "./components/Icons/X.js";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
 import styles from "./components/Chip/styles.module.scss";
 var HN_Designsystem_Chip_en_GB_default = { removeAriaLabel: "Remove" };
 var HN_Designsystem_Chip_nb_NO_default = { removeAriaLabel: "Fjern" };
-const getResources = (language) => {
+//#endregion
+//#region src/components/Chip/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Chip_en_GB_default;
 		case LanguageLocales.NORWEGIAN:
 		default: return HN_Designsystem_Chip_nb_NO_default;
 	}
 };
+//#endregion
+//#region src/components/Chip/Chip.tsx
 var Chip = (props) => {
-	const { onClick, children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;
+	const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;
 	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
 	const defaultResources = getResources(language);
 	const mergedResources = {
@@ -28,7 +32,7 @@ var Chip = (props) => {
 		children: [/* @__PURE__ */ jsx("button", {
 			...chipButtonProps,
 			className: classNames(styles["chip__chip"]),
-			onClick: onClick ? onClick : onChipClick,
+			onClick: onChipClick,
 			type: "button",
 			"data-testid": testId,
 			"data-analyticsid": AnalyticsId.Tag,
@@ -40,21 +44,24 @@ var Chip = (props) => {
 			...closeButtonProps,
 			"aria-label": mergedResources.removeAriaLabel,
 			className: classNames(styles["chip__close"]),
-			onClick: onClick ? onClick : onCloseClick,
+			onClick: onCloseClick,
 			type: "button",
 			"data-testid": `${testId}-close`,
 			"data-analyticsid": AnalyticsId.Tag,
 			children: /* @__PURE__ */ jsx("span", {
 				className: styles["chip__close__inner"],
 				children: /* @__PURE__ */ jsx(Icon_default, {
-					svgIcon: X_default,
+					svgIcon: X,
 					size: IconSize.XXSmall
 				})
 			})
 		})]
 	});
 };
-var Chip_default$1 = Chip;
-export { Chip_default$1 as t };
+//#endregion
+//#region src/components/Chip/index.ts
+var Chip_default = Chip;
+//#endregion
+export { Chip_default as t };
 
 //# sourceMappingURL=Chip.js.map

package/lib/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":["Chip: React.FC<ChipProps>","mergedResources: HNDesignsystemChip"],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n  \"removeAriaLabel\": \"Remove\"\n}\n","{\n  \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** @deprecated Called when action is set and the chip is clicked on. action must also be set. */\n  onClick?: () => void;\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const {\n    onClick,\n    children,\n    onChipClick,\n    onCloseClick,\n    chipButtonProps,\n    closeButtonProps,\n    testId,\n    withCloseButton = true,\n    resources,\n  } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemChip = {\n    ...defaultResources,\n    ...resources,\n    removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n  };\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onClick ? onClick : onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          aria-label={mergedResources.removeAriaLabel}\n          className={classNames(styles['chip__close'])}\n          onClick={onClick ? onClick : onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AEMA,MAAa,gBAAgB,aAAkD;AAC7E,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACqBb,IAAMA,QAA4B,UAAS;CACzC,MAAM,EACJ,SACA,UACA,aACA,cACA,iBACA,kBACA,QACA,kBAAkB,MAClB,cACE;CACJ,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAMC,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;EAC3H;AAED,QACE,qBAAC,OAAA;EAAI,WAAW,OAAO;aACrB,oBAAC,UAAA;GACC,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS,UAAU,UAAU;GAC7B,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IACC,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,iBAChD,CAAC;IAED;KACI;IACA,EACR,mBACC,oBAAC,UAAA;GACC,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS,UAAU,UAAU;GAC7B,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAA;IAAK,WAAW,OAAO;cACtB,oBAAC,cAAA;KAAK,SAAS;KAAG,MAAM,SAAS;MAAW;KACvC;IACA,CAAA;GAEP;;ACpFV,IAAA,iBDwFe"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../src/resources/HN.Designsystem.Chip.en-GB.json","../src/resources/HN.Designsystem.Chip.nb-NO.json","../src/components/Chip/resourceHelper.ts","../src/components/Chip/Chip.tsx","../src/components/Chip/index.ts"],"sourcesContent":["{\n  \"removeAriaLabel\": \"Remove\"\n}\n","{\n  \"removeAriaLabel\": \"Fjern\"\n}\n","import type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Chip.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Chip.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemChip => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemChip } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport Icon, { IconSize } from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Wether or not to have a close button */\n  withCloseButton?: boolean;\n  /** onClick handler for text-part of the chip */\n  onChipClick?: () => void;\n  /** Button props for main chip button */\n  chipButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** onClick handler for close button */\n  onCloseClick?: () => void;\n  /** Button props for the close button */\n  closeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Resources for the component */\n  resources?: Partial<HNDesignsystemChip>;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, onChipClick, onCloseClick, chipButtonProps, closeButtonProps, testId, withCloseButton = true, resources } = props;\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemChip = {\n    ...defaultResources,\n    ...resources,\n    removeAriaLabel: closeButtonProps?.['aria-label'] || resources?.removeAriaLabel || `${defaultResources.removeAriaLabel} ${children}`,\n  };\n\n  return (\n    <div className={styles['chip']}>\n      <button\n        {...chipButtonProps}\n        className={classNames(styles['chip__chip'])}\n        onClick={onChipClick}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tag}\n      >\n        <span\n          className={classNames(styles['chip__chip__inner'], {\n            [styles['chip__chip__inner--without-close']]: !withCloseButton,\n          })}\n        >\n          {children}\n        </span>\n      </button>\n      {withCloseButton && (\n        <button\n          {...closeButtonProps}\n          aria-label={mergedResources.removeAriaLabel}\n          className={classNames(styles['chip__close'])}\n          onClick={onCloseClick}\n          type=\"button\"\n          data-testid={`${testId}-close`}\n          data-analyticsid={AnalyticsId.Tag}\n        >\n          <span className={styles['chip__close__inner']}>\n            <Icon svgIcon={X} size={IconSize.XXSmall} />\n          </span>\n        </button>\n      )}\n    </div>\n  );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;;;AEMA,IAAa,gBAAgB,aAAkD;CAC7E,QAAQ,UAAR;EACE,KAAK,gBAAgB,SACnB,OAAO;EACT,KAAK,gBAAgB;EACrB,SACE,OAAO;;;;;ACmBb,IAAM,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,aAAa,cAAc,iBAAiB,kBAAkB,QAAQ,kBAAkB,MAAM,cAAc;CAC9H,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAC5E,MAAM,mBAAmB,aAAa,SAAS;CAC/C,MAAM,kBAAsC;EAC1C,GAAG;EACH,GAAG;EACH,iBAAiB,mBAAmB,iBAAiB,WAAW,mBAAmB,GAAG,iBAAiB,gBAAgB,GAAG;EAC3H;CAED,OACE,qBAAC,OAAD;EAAK,WAAW,OAAO;YAAvB,CACE,oBAAC,UAAD;GACE,GAAI;GACJ,WAAW,WAAW,OAAO,cAAc;GAC3C,SAAS;GACT,MAAK;GACL,eAAa;GACb,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IACE,WAAW,WAAW,OAAO,sBAAsB,GAChD,OAAO,sCAAsC,CAAC,iBAChD,CAAC;IAED;IACI,CAAA;GACA,CAAA,EACR,mBACC,oBAAC,UAAD;GACE,GAAI;GACJ,cAAY,gBAAgB;GAC5B,WAAW,WAAW,OAAO,eAAe;GAC5C,SAAS;GACT,MAAK;GACL,eAAa,GAAG,OAAO;GACvB,oBAAkB,YAAY;aAE9B,oBAAC,QAAD;IAAM,WAAW,OAAO;cACtB,oBAAC,cAAD;KAAM,SAAS;KAAG,MAAM,SAAS;KAAW,CAAA;IACvC,CAAA;GACA,CAAA,CAEP;;;;;ACxEV,IAAA,eAAe"}

package/lib/Close.js

@@ -1,12 +1,13 @@
-import { n as AnalyticsId } from "./constants2.js";
-import { t as usePseudoClasses } from "./usePseudoClasses.js";
-import { n as mergeRefs } from "./refs.js";
+import { AnalyticsId } from "./constants.js";
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { mergeRefs } from "./utils/refs.js";
 import { t as Icon_default } from "./Icon.js";
-import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
-import { t as X_default } from "./X.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
+import X from "./components/Icons/X.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/Close/styles.module.scss";
+//#region src/components/Close/Close.tsx
 var Close = (props) => {
 	const { small, testId, ariaLabel = "Lukk", onClick, className, color = "blueberry", ref } = props;
 	const { refObject, isHovered } = usePseudoClasses();
@@ -30,7 +31,7 @@ var Close = (props) => {
 				[styles["close__inner-container--plum"]]: color == "plum"
 			}),
 			children: /* @__PURE__ */ jsx(Icon_default, {
-				svgIcon: X_default,
+				svgIcon: X,
 				color: iconColor,
 				size: iconSize,
 				isHovered
@@ -38,7 +39,10 @@ var Close = (props) => {
 		})
 	});
 };
-var Close_default$1 = Close;
-export { Close_default$1 as t };
+//#endregion
+//#region src/components/Close/index.ts
+var Close_default = Close;
+//#endregion
+export { Close_default as t };
 
 //# sourceMappingURL=Close.js.map

package/lib/Close.js.map

@@ -1 +1 @@
-{"version":3,"file":"Close.js","names":["Close: React.FC<CloseProps>"],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;AA4BA,IAAMA,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,kBAAkB;CAEnD,MAAM,WAAW,uBAAuB,IAAI,QAAQ,KAAK;CAEzD,IAAI;AACJ,KAAI,UAAU,QACZ,aAAY;UACH,UAAU,OACnB,aAAY;KAEZ,aAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,OAAO,EAAE,UAAU;AAE7F,QACE,oBAAC,UAAA;EACC,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAChC,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAA;GACC,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;IACpD,CAAC;aAEF,oBAAC,cAAA;IAAK,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;KAAa;IACvE;GACA;;AC7Db,IAAA,kBDiEe"}
+{"version":3,"file":"Close.js","names":[],"sources":["../src/components/Close/Close.tsx","../src/components/Close/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon from '../Icon';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface CloseProps {\n  /** Keeps the icon small for all screen sizes */\n  small?: boolean;\n  /** Function is called when user clicks the button */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n  /** Sets the aria-label of the button */\n  ariaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Gives color to the svg */\n  color?: 'blueberry' | 'black' | 'plum';\n  /** Ref that is passed to the component */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst Close: React.FC<CloseProps> = props => {\n  const { small, testId, ariaLabel = 'Lukk', onClick, className, color = 'blueberry', ref } = props;\n  const { refObject, isHovered } = usePseudoClasses();\n\n  const iconSize = useIsMobileBreakpoint() || small ? 38 : 48;\n\n  let iconColor;\n  if (color === 'black') {\n    iconColor = 'black';\n  } else if (color === 'plum') {\n    iconColor = 'var(--core-color-plum-700)';\n  } else {\n    iconColor = 'var(--color-action-graphics-onlight)';\n  }\n\n  const closeClasses = classNames(styles.close, { [styles['close--small']]: small }, className);\n\n  return (\n    <button\n      ref={mergeRefs([ref, refObject])}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Close}\n      className={closeClasses}\n      aria-label={ariaLabel}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <span\n        className={classNames(styles['close__inner-container'], {\n          [styles['close__inner-container--small']]: small,\n          [styles['close__inner-container--plum']]: color == 'plum',\n        })}\n      >\n        <Icon svgIcon={X} color={iconColor} size={iconSize} isHovered={isHovered} />\n      </span>\n    </button>\n  );\n};\n\nexport default Close;\n","import Close from './Close';\nexport * from './Close';\nexport default Close;\n"],"mappings":";;;;;;;;;;AA4BA,IAAM,SAA8B,UAAS;CAC3C,MAAM,EAAE,OAAO,QAAQ,YAAY,QAAQ,SAAS,WAAW,QAAQ,aAAa,QAAQ;CAC5F,MAAM,EAAE,WAAW,cAAc,kBAAkB;CAEnD,MAAM,WAAW,uBAAuB,IAAI,QAAQ,KAAK;CAEzD,IAAI;CACJ,IAAI,UAAU,SACZ,YAAY;MACP,IAAI,UAAU,QACnB,YAAY;MAEZ,YAAY;CAGd,MAAM,eAAe,WAAW,OAAO,OAAO,GAAG,OAAO,kBAAkB,OAAO,EAAE,UAAU;CAE7F,OACE,oBAAC,UAAD;EACE,KAAK,UAAU,CAAC,KAAK,UAAU,CAAC;EAChC,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,cAAY;EACH;EACT,MAAK;YAEL,oBAAC,QAAD;GACE,WAAW,WAAW,OAAO,2BAA2B;KACrD,OAAO,mCAAmC;KAC1C,OAAO,kCAAkC,SAAS;IACpD,CAAC;aAEF,oBAAC,cAAD;IAAM,SAAS;IAAG,OAAO;IAAW,MAAM;IAAqB;IAAa,CAAA;GACvE,CAAA;EACA,CAAA;;;;AC7Db,IAAA,gBAAe"}

package/lib/DictionaryTrigger.js

@@ -1,7 +1,8 @@
-import { n as AnalyticsId } from "./constants2.js";
+import { AnalyticsId } from "./constants.js";
 import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
 import styles from "./components/DictionaryTrigger/styles.module.scss";
+//#region src/components/DictionaryTrigger/DictionaryTrigger.tsx
 var DictionaryTrigger = (props) => {
 	const { children, selected = false, className, testId, ref, ...rest } = props;
 	const triggerClasses = classNames(styles.dictionarytrigger, className);
@@ -17,7 +18,10 @@ var DictionaryTrigger = (props) => {
 	});
 };
 DictionaryTrigger.displayName = "DictionaryTrigger";
-var DictionaryTrigger_default$1 = DictionaryTrigger;
-export { DictionaryTrigger_default$1 as t };
+//#endregion
+//#region src/components/DictionaryTrigger/index.ts
+var DictionaryTrigger_default = DictionaryTrigger;
+//#endregion
+export { DictionaryTrigger_default as t };
 
 //# sourceMappingURL=DictionaryTrigger.js.map

package/lib/DictionaryTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DictionaryTrigger.js","names":["DictionaryTrigger: React.FC<DictionaryTriggerProps>"],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;AA6BA,IAAMA,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,UAAU;AAEtE,QACE,oBAAC,UAAA;EACC,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;GACM;;AAIb,kBAAkB,cAAc;AC9ChC,IAAA,8BDgDe"}
+{"version":3,"file":"DictionaryTrigger.js","names":[],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA6BA,IAAM,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,UAAU;CAEtE,OACE,oBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;EACM,CAAA;;AAIb,kBAAkB,cAAc;;;AC9ChC,IAAA,4BAAe"}

package/lib/Drawer.js

@@ -1,19 +1,19 @@
-import { n as uuid_default } from "./uuid.js";
-import { c as ZIndex, n as AnalyticsId, o as KeyboardEventKey, s as LanguageLocales } from "./constants2.js";
+import { t as uuid } from "./uuid.js";
+import { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from "./constants.js";
 import { t as Icon_default } from "./Icon.js";
-import { n as useLanguage } from "./useLanguage.js";
-import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
+import { useLanguage } from "./hooks/useLanguage.js";
+import { useIsMobileBreakpoint } from "./hooks/useIsMobileBreakpoint.js";
 import { t as Button_default } from "./Button.js";
-import { n as getAriaLabelAttributes } from "./accessibility.js";
-import { n as useFocusTrap_default } from "./useFocusTrap.js";
-import { t as useIsVisible } from "./useIsVisible.js";
-import { t as useKeyboardEvent } from "./useKeyboardEvent.js";
-import { t as useOutsideEvent } from "./useOutsideEvent.js";
+import { getAriaLabelAttributes } from "./utils/accessibility.js";
+import useFocusTrap from "./hooks/useFocusTrap.js";
+import { useIsVisible } from "./hooks/useIsVisible.js";
+import { useKeyboardEvent } from "./hooks/useKeyboardEvent.js";
+import { useOutsideEvent } from "./hooks/useOutsideEvent.js";
 import { t as Close_default } from "./Close.js";
-import { t as useReturnFocusOnUnmount } from "./useReturnFocusOnUnmount.js";
-import { n as enableBodyScroll, t as disableBodyScroll } from "./scroll.js";
-import { t as ChevronLeft_default } from "./ChevronLeft.js";
-import { t as Title_default } from "./Title2.js";
+import { useReturnFocusOnUnmount } from "./hooks/useReturnFocusOnUnmount.js";
+import { disableBodyScroll, enableBodyScroll } from "./utils/scroll.js";
+import ChevronLeft from "./components/Icons/ChevronLeft.js";
+import Title_default from "./components/Title/index.js";
 import classNames from "classnames";
 import React, { useEffect, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -31,7 +31,9 @@ var HN_Designsystem_Drawer_nn_NO_default = {
 	ariaLabelCloseBtn: "Lukk",
 	ariaLabelBackButton: "Gå tilbake"
 };
-const getResources = (language) => {
+//#endregion
+//#region src/components/Drawer/resourceHelper.ts
+var getResources = (language) => {
 	switch (language) {
 		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
 		case LanguageLocales.NORWEGIAN_NYNORSK: return HN_Designsystem_Drawer_nn_NO_default;
@@ -39,6 +41,8 @@ const getResources = (language) => {
 		default: return HN_Designsystem_Drawer_nb_NO_default;
 	}
 };
+//#endregion
+//#region src/components/Drawer/Drawer.tsx
 var Drawer = (props) => {
 	const { isOpen, ...rest } = props;
 	const isMobile = useIsMobileBreakpoint();
@@ -48,7 +52,7 @@ var Drawer = (props) => {
 	}) });
 };
 var InnerDrawer = (props) => {
-	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid_default(), zIndex = ZIndex.OverlayScreen, resources, isMobile, withBackButton, onRequestBack, contentClassName } = props;
+	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid(), zIndex = ZIndex.OverlayScreen, resources, isMobile, withBackButton, onRequestBack, contentClassName } = props;
 	const ariaLabelAttributes = getAriaLabelAttributes({
 		label: ariaLabel,
 		id: ariaLabelledBy,
@@ -76,7 +80,7 @@ var InnerDrawer = (props) => {
 	const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
 	const headerStyling = classNames(styles.drawer__header, headerClasses);
 	const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
-	useFocusTrap_default(containerRef, true);
+	useFocusTrap(containerRef, true);
 	useReturnFocusOnUnmount(containerRef);
 	useOutsideEvent(containerRef, () => {
 		if (onRequestClose) onRequestClose();
@@ -191,7 +195,7 @@ var InnerDrawer = (props) => {
 								onClick: onRequestBack,
 								variant: "borderless",
 								wrapperClassName: styles["drawer__header__back-button"],
-								children: /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronLeft_default })
+								children: /* @__PURE__ */ jsx(Icon_default, { svgIcon: ChevronLeft })
 							}),
 							!noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(Close_default, {
 								ariaLabel: mergedResources.ariaLabelCloseBtn,
@@ -249,7 +253,10 @@ var InnerDrawer = (props) => {
 		})]
 	});
 };
-var Drawer_default$1 = Drawer;
-export { Drawer_default$1 as t };
+//#endregion
+//#region src/components/Drawer/index.ts
+var Drawer_default = Drawer;
+//#endregion
+export { Drawer_default as t };
 
 //# sourceMappingURL=Drawer.js.map

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["Drawer: React.FC<DrawerProps>","InnerDrawer: React.FC<InnerDrawerProps>","mergedResources: HNDesignsystemDrawer"],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelBackButton\": \"Go back\",\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n              ref={titleRef}\n              tabIndex={-1}\n            >\n              {title}\n            </Title>\n            {withBackButton && onRequestBack !== undefined && (\n              <Button\n                ariaLabel={mergedResources.ariaLabelBackButton}\n                onClick={onRequestBack}\n                variant=\"borderless\"\n                wrapperClassName={styles['drawer__header__back-button']}\n              >\n                <Icon svgIcon={ChevronLeft} />\n              </Button>\n            )}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../src/resources/HN.Designsystem.Drawer.en-GB.json","../src/resources/HN.Designsystem.Drawer.nb-NO.json","../src/resources/HN.Designsystem.Drawer.nn-NO.json","../src/components/Drawer/resourceHelper.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/index.ts"],"sourcesContent":["{\n  \"ariaLabelBackButton\": \"Go back\",\n  \"ariaLabelCloseBtn\": \"Close\"\n}\n","{\n  \"ariaLabelBackButton\": \"Gå tilbake\",\n  \"ariaLabelCloseBtn\": \"Lukk\"\n}\n","{\n  \"ariaLabelCloseBtn\": \"Lukk\",\n  \"ariaLabelBackButton\": \"Gå tilbake\"\n}\n","import type { HNDesignsystemDrawer } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Drawer.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Drawer.nb-NO.json';\nimport nnNO from '../../resources/HN.Designsystem.Drawer.nn-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDrawer => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN_NYNORSK:\n      return nnNO;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { AnimatePresence, useAnimate, usePresence } from 'motion/react';\n\nimport type { HNDesignsystemDrawer } from '../../resources/Resources';\nimport type { TitleTags } from '../Title';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, KeyboardEventKey, LanguageLocales, ZIndex } from '../../constants';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useKeyboardEvent } from '../../hooks/useKeyboardEvent';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { useReturnFocusOnUnmount } from '../../hooks/useReturnFocusOnUnmount';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { disableBodyScroll, enableBodyScroll } from '../../utils/scroll';\nimport uuid from '../../utils/uuid';\nimport Button from '../Button';\nimport Close from '../Close';\nimport Icon from '../Icon';\nimport ChevronLeft from '../Icons/ChevronLeft';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\ntype DesktopDirections = 'left' | 'right';\n\nexport interface DrawerProps extends InnerDrawerProps {\n  /** Opens and closes the drawer */\n  isOpen: boolean;\n}\n\nexport interface InnerDrawerProps {\n  /** Sets the aria-label of the drawer */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the drawer */\n  ariaLabelledBy?: string;\n  /** Sets the style of the Drawer Close button. Meant for use by HelpDrawer */\n  closeColor?: 'blueberry' | 'plum';\n  /** Direction of the drawer on desktop. Default: left */\n  desktopDirection?: DesktopDirections;\n  /** Sets the style of the Drawer header */\n  headerClasses?: string;\n  /** Title to display in the header of the drawer */\n  title: string;\n  /** id of the drawer title */\n  titleId?: string;\n  /** Changes the underlying element of the title. Default: h3 */\n  titleHtmlMarkup?: TitleTags;\n  /** Callback that triggers when clicking on close button or outside the drawer, update isOpen state when this triggers */\n  onRequestClose?: () => void;\n  /** Optional footer content that can be rendered instead of default CTA(s) */\n  footerContent?: React.ReactNode;\n  /** Main content of the drawer */\n  children?: React.ReactNode;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Primary CTA callback */\n  onPrimaryAction?: () => void;\n  /** Text for primary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  primaryActionText?: string;\n  /** Text for secondary CTA button if you want a default CTA button rendered (instead of `footerContent`) */\n  secondaryActionText?: string;\n  /** Secondary CTA callback */\n  onSecondaryAction?: () => void;\n  /** Customize the z-index of the drawer */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDrawer>;\n  /** Sets mobile styling and animation from outer level Drawer */\n  isMobile?: boolean;\n  /** Shows a back button to the left of title */\n  withBackButton?: boolean;\n  /** Callback for the back button */\n  onRequestBack?: () => void;\n  /** Sets classname for content part in Drawer */\n  contentClassName?: string;\n}\n\nconst Drawer: React.FC<DrawerProps> = props => {\n  const { isOpen, ...rest } = props;\n  const isMobile = useIsMobileBreakpoint();\n\n  return <AnimatePresence>{isOpen && <InnerDrawer {...rest} isMobile={isMobile} />}</AnimatePresence>;\n};\n\nconst InnerDrawer: React.FC<InnerDrawerProps> = props => {\n  const {\n    ariaLabel,\n    ariaLabelledBy,\n    children,\n    closeColor = 'blueberry',\n    desktopDirection = 'left',\n    footerContent,\n    headerClasses,\n    noCloseButton = false,\n    onPrimaryAction,\n    onRequestClose,\n    onSecondaryAction,\n    primaryActionText,\n    secondaryActionText,\n    title,\n    titleHtmlMarkup = 'h3',\n    titleId = uuid(),\n    zIndex = ZIndex.OverlayScreen,\n    resources,\n    isMobile,\n    withBackButton,\n    onRequestBack,\n    contentClassName,\n  } = props;\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledBy, fallbackId: titleId });\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  // topContent and bottomContent are used to detect scroll position for shadow effects\n  const topContent = useRef<HTMLDivElement>(null);\n  const bottomContent = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const footerRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLHeadingElement>(null);\n  const [scope, animate] = useAnimate();\n  const [isPresent, safeToRemove] = usePresence();\n  const [headerHeight, setHeaderHeight] = React.useState(0);\n  const [footerHeight, setFooterHeight] = React.useState(0);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContentVisible = useIsVisible(bottomContent, 0);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDrawer = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  // eslint-disable-next-line react-hooks/refs\n  const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;\n  const headerStyling = classNames(styles.drawer__header, headerClasses);\n  const hasFooterContent = (typeof footerContent !== 'undefined' && footerContent) || onPrimaryAction || onSecondaryAction;\n\n  useFocusTrap(containerRef, true);\n  useReturnFocusOnUnmount(containerRef);\n  useOutsideEvent(containerRef, () => {\n    if (onRequestClose) onRequestClose();\n  });\n  useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);\n\n  // Close animasjon, vi kaller `onClose()` til slutt\n  const closeDrawer = (): void => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    animate(overlayRef.current, { opacity: 0, pointerEvents: 'none' }, { duration: 0.3, ease: 'easeInOut' });\n\n    if (isMobile) {\n      animate(\n        containerRef.current,\n        { y: '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    } else {\n      animate(\n        containerRef.current,\n        { x: desktopDirection === 'left' ? '-100%' : '100%' },\n        {\n          duration: 0.3,\n          ease: 'easeInOut',\n          onComplete: () => {\n            if (safeToRemove) safeToRemove();\n          },\n        }\n      );\n    }\n  };\n\n  useEffect(() => {\n    containerRef.current?.focus();\n    disableBodyScroll();\n\n    return (): void => {\n      enableBodyScroll();\n    };\n  }, []);\n\n  // Measure header and footer heights\n  useEffect(() => {\n    const updateHeights = (): void => {\n      if (headerRef.current) {\n        setHeaderHeight(headerRef.current.offsetHeight);\n      }\n      if (footerRef.current) {\n        setFooterHeight(footerRef.current.offsetHeight);\n      }\n    };\n\n    updateHeights();\n\n    // Update heights when content changes\n    const resizeObserver = new ResizeObserver(updateHeights);\n    if (headerRef.current) {\n      resizeObserver.observe(headerRef.current);\n    }\n    if (footerRef.current) {\n      resizeObserver.observe(footerRef.current);\n    }\n\n    return (): void => {\n      resizeObserver.disconnect();\n    };\n  }, [hasFooterContent]);\n\n  // Open animation.\n  useEffect(() => {\n    if (!overlayRef.current || !containerRef.current) return;\n\n    if (!isPresent) {\n      closeDrawer();\n      return;\n    }\n\n    if (isMobile) {\n      animate(containerRef.current, { y: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    } else {\n      animate(containerRef.current, { x: '0' }, { duration: 0.3, ease: 'easeInOut' });\n    }\n\n    animate(overlayRef.current, { opacity: 1, pointerEvents: 'auto' }, { duration: 0.3, ease: 'easeInOut' });\n  }, [isPresent]);\n\n  const handleCTA = (callback?: () => void): void => {\n    if (callback) {\n      callback();\n    }\n  };\n\n  useEffect(() => {\n    titleRef.current?.focus();\n  }, [title]);\n\n  return (\n    <div className={styles.drawer} ref={scope} style={{ zIndex }} data-analyticsid={AnalyticsId.Drawer}>\n      <div className={styles.drawer__overlay} ref={overlayRef} aria-hidden=\"true\" />\n      <div\n        className={classNames(styles.drawer__container, {\n          [styles['drawer__container--right']]: desktopDirection === 'right',\n        })}\n        ref={containerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        tabIndex={-1}\n        {...ariaLabelAttributes}\n      >\n        <div className={styles.drawer__container__inner}>\n          <div className={headerStyling} ref={headerRef}>\n            <Title\n              id={ariaLabelAttributes?.['aria-labelledby']}\n              className={styles['drawer__header__title']}\n              htmlMarkup={titleHtmlMarkup}\n              appearance=\"title3\"\n              ref={titleRef}\n              tabIndex={-1}\n            >\n              {title}\n            </Title>\n            {withBackButton && onRequestBack !== undefined && (\n              <Button\n                ariaLabel={mergedResources.ariaLabelBackButton}\n                onClick={onRequestBack}\n                variant=\"borderless\"\n                wrapperClassName={styles['drawer__header__back-button']}\n              >\n                <Icon svgIcon={ChevronLeft} />\n              </Button>\n            )}\n            {!noCloseButton && onRequestClose != undefined && (\n              <Close\n                ariaLabel={mergedResources.ariaLabelCloseBtn}\n                color={closeColor}\n                onClick={onRequestClose}\n                className={styles['drawer__header__close-button']}\n              />\n            )}\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--top'])}\n            style={{\n              opacity: !topContentVisible && contentIsScrollable ? 1 : 0,\n              top: headerHeight,\n            }}\n          />\n          <div\n            className={classNames(styles.drawer__content, contentClassName)}\n            tabIndex={contentIsScrollable ? 0 : undefined}\n            role={contentIsScrollable ? 'region' : undefined}\n            {...(contentIsScrollable ? ariaLabelAttributes : {})}\n            ref={contentRef}\n          >\n            <div ref={topContent} />\n            <div className={styles['drawer__content__children']}>{children}</div>\n            <div ref={bottomContent} style={{ height: '1px' }} />\n          </div>\n          <div\n            className={classNames(styles['drawer__content__shadow'], styles['drawer__content__shadow--bottom'])}\n            style={{\n              opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,\n              bottom: hasFooterContent ? footerHeight : 0,\n            }}\n          />\n        </div>\n        {hasFooterContent && (\n          <div className={styles.drawer__footer} ref={footerRef}>\n            {footerContent ? (\n              footerContent\n            ) : (\n              <>\n                {onPrimaryAction && <Button onClick={() => handleCTA(onPrimaryAction)}>{primaryActionText}</Button>}\n                {onSecondaryAction && (\n                  <Button variant=\"borderless\" onClick={() => handleCTA(onSecondaryAction)}>\n                    {secondaryActionText}\n                  </Button>\n                )}\n              </>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Drawer;\n","import Drawer from './Drawer';\nexport * from './Drawer';\nexport default Drawer;\n"],"mappings":"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"}

package/lib/DrawerNavigation.js

@@ -1,12 +1,15 @@
 import { t as Drawer_default } from "./Drawer.js";
 import { Children, createContext, isValidElement, useCallback, useContext, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-const DrawerNavigationContext = createContext(null);
+//#region src/components/Filter/DrawerNavigation/useDrawerNavigation.ts
+var DrawerNavigationContext = createContext(null);
 function useDrawerNavigation() {
 	const context = useContext(DrawerNavigationContext);
 	if (!context) throw new Error("useDrawerNavigation must be used inside a <DrawerNavigation> component");
 	return context;
 }
+//#endregion
+//#region src/components/Filter/DrawerNavigation/DrawerNavigation.tsx
 function DrawerView(_props) {
 	return null;
 }
@@ -23,7 +26,9 @@ function parseChildren(children) {
 			footer: child.props.footer,
 			drawerContentClassname: child.props.drawerContentClassname
 		});
-		else other.push(child);
+		else
+ /** Added possibility of other children to support Modals that need navigation context */
+		other.push(child);
 	});
 	return {
 		views,
@@ -75,7 +80,7 @@ function DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer
 	});
 }
 DrawerNavigation.View = DrawerView;
-var DrawerNavigation_default = DrawerNavigation;
-export { DrawerNavigationContext as n, useDrawerNavigation as r, DrawerNavigation_default as t };
+//#endregion
+export { DrawerNavigationContext as n, useDrawerNavigation as r, DrawerNavigation as t };
 
 //# sourceMappingURL=DrawerNavigation.js.map

package/lib/DrawerNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerNavigation.js","names":["views: DrawerViewProps[]","other: React.ReactNode[]"],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useMemo, useState } from 'react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport Drawer from '../../Drawer';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        title={currentView?.title ?? 'Filter'}\n        withBackButton={viewStack.length > 1}\n        onRequestBack={goBack}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n      >\n        {currentView?.children}\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":";;;AAQA,MAAa,0BAA0B,cAAoC,KAAK;AAEhF,SAAgB,sBAA6E;CAC3F,MAAM,UAAU,WAAW,wBAAwB;AACnD,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,yEAAyE;AAE3F,QAAO;;ACST,SAAS,WAAkC,QAAkD;AAE3F,QAAO;;AAgBT,SAAS,cAAc,UAAmF;CACxG,MAAMA,QAA2B,EAAE;CACnC,MAAMC,QAA2B,EAAE;AACnC,UAAS,QAAQ,WAAU,UAAS;AAClC,MAAI,eAAgC,MAAM,IAAI,MAAM,SAAS,WAC3D,OAAM,KAAK;GACT,IAAI,MAAM,MAAM;GAChB,OAAO,MAAM,MAAM;GACnB,MAAM,MAAM,MAAM;GAClB,UAAU,MAAM,MAAM;GACtB,eAAe,MAAM,MAAM;GAC3B,QAAQ,MAAM,MAAM;GACpB,wBAAwB,MAAM,MAAM;GACrC,CAAC;MAGF,OAAM,KAAK,MAAM;GAEnB;AACF,QAAO;EAAE;EAAO;EAAO;;AAGzB,SAAS,iBAAiB,EAAE,UAAU,QAAQ,aAAa,eAAe,UAAkD;CAC1H,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,SAAS,EAAE,CAAC,SAAS,CAAC;CAE3E,MAAM,WAAW,MAAM,MAAK,MAAK,EAAE,KAAK,IAAI,MAAM;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAmB,CAAC,UAAU,GAAG,CAAC;CAEpE,MAAM,WAAW,aACd,OAAqB;AACpB,MAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,CAC9B,eAAa,UAAS,CAAC,GAAG,OAAO,GAAG,CAAC;IAGzC,CAAC,MAAM,CACR;CAED,MAAM,SAAS,kBAAwB;AACrC,gBAAa,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,GAAG,GAAG,MAAO;IACrE,EAAE,CAAC;CAEN,MAAM,wBAAwB,aAC3B,OAAqB;AACpB,MAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,CAC9B,cAAa,OAAO,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC;IAG1E,CAAC,OAAO,SAAS,CAClB;CAED,MAAM,gBAAgB,UAAU,UAAU,SAAS;CACnD,MAAM,cAAc,MAAM,MAAK,MAAK,EAAE,OAAO,cAAc;CAE3D,MAAM,WAAW,eAA8B;EAAE;EAAQ;EAAU;EAAuB,GAAG;EAAC;EAAQ;EAAU;EAAsB,CAAC;CAEvI,MAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO;AACpD,KAAI,eAAe,QAAQ;AACzB,gBAAc,OAAO;AACrB,MAAI,CAAC,OACH,cAAa,CAAC,UAAU,GAAG,CAAC;WACnB,eAAe,MAAM,MAAK,MAAK,EAAE,OAAO,YAAY,CAC7D,cAAa,gBAAgB,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,YAAY,CAAC;;AAI5F,QACE,qBAAC,wBAAwB,UAAA;EAAS,OAAO;aACvC,oBAAC,gBAAA;GACS;GACR,OAAO,aAAa,SAAS;GAC7B,gBAAgB,UAAU,SAAS;GACnC,eAAe;GACf,gBAAgB,aAAa,iBAAiB;GAC9C,eAAe,aAAa,UAAU;GACtC,kBAAkB,aAAa;aAE9B,aAAa;IACP,EACR,MAAA;GACgC;;AAIvC,iBAAiB,OAAO;AAExB,IAAA,2BAAe"}
+{"version":3,"file":"DrawerNavigation.js","names":[],"sources":["../src/components/Filter/DrawerNavigation/useDrawerNavigation.ts","../src/components/Filter/DrawerNavigation/DrawerNavigation.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface NavigateProps<ViewId extends string = string> {\n  goToView: (id: ViewId) => void;\n  goBack: () => void;\n  goToViewAndClearStack: (id: ViewId) => void;\n}\n\nexport const DrawerNavigationContext = createContext<NavigateProps | null>(null);\n\nexport function useDrawerNavigation<ViewId extends string = string>(): NavigateProps<ViewId> {\n  const context = useContext(DrawerNavigationContext);\n  if (!context) {\n    throw new Error('useDrawerNavigation must be used inside a <DrawerNavigation> component');\n  }\n  return context as NavigateProps<ViewId>;\n}\n","import type React from 'react';\nimport { Children, isValidElement, useCallback, useMemo, useState } from 'react';\n\nimport { type NavigateProps, DrawerNavigationContext } from './useDrawerNavigation';\nimport Drawer from '../../Drawer';\n\nexport interface DrawerViewProps<ViewId extends string = string> {\n  /** Id for the view. Important for navigation */\n  id: ViewId;\n  /** Title used for Drawer in current view */\n  title: string;\n  /** Mark this view as the home/default view */\n  home?: boolean;\n  /** Content inside the drawer for this view */\n  children: React.ReactNode;\n  /** Default onClose callback for drawer. Will override onCloseButton on parent */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. Will override footer on parent */\n  footer?: React.ReactNode;\n  /** Classname set on the content inside Drawer */\n  drawerContentClassname?: string;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nfunction DrawerView<ViewId extends string>(_props: DrawerViewProps<ViewId>): React.ReactNode {\n  // DrawerView is never rendered directly — DrawerNavigation reads its props\n  return null;\n}\n\nexport interface DrawerNavigationProps {\n  /** Views and other children components inside the Drawer navigation. Views are put in stack */\n  children: React.ReactNode;\n  /** Is drawer open or closed */\n  isOpen: boolean;\n  /** Navigate to this view when the drawer opens. Defaults to home view. */\n  initialView?: string;\n  /** Default onClose callback for drawer. View onCloseButton callback will override this. */\n  onCloseButton?: () => void;\n  /** Content sent to footer section of Drawer. View footer will override this */\n  footer?: React.ReactNode;\n}\n\nfunction parseChildren(children: React.ReactNode): { views: DrawerViewProps[]; other: React.ReactNode[] } {\n  const views: DrawerViewProps[] = [];\n  const other: React.ReactNode[] = [];\n  Children.forEach(children, child => {\n    if (isValidElement<DrawerViewProps>(child) && child.type === DrawerView) {\n      views.push({\n        id: child.props.id,\n        title: child.props.title,\n        home: child.props.home,\n        children: child.props.children,\n        onCloseButton: child.props.onCloseButton,\n        footer: child.props.footer,\n        drawerContentClassname: child.props.drawerContentClassname,\n      });\n    } else {\n      /** Added possibility of other children to support Modals that need navigation context */\n      other.push(child);\n    }\n  });\n  return { views, other };\n}\n\nfunction DrawerNavigation({ children, isOpen, initialView, onCloseButton, footer }: DrawerNavigationProps): React.ReactNode {\n  const { views, other } = useMemo(() => parseChildren(children), [children]);\n\n  const homeView = views.find(v => v.home) ?? views[0];\n  const [viewStack, setViewStack] = useState<string[]>([homeView?.id]);\n\n  const goToView = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(stack => [...stack, id]);\n      }\n    },\n    [views]\n  );\n\n  const goBack = useCallback((): void => {\n    setViewStack(stack => (stack.length > 1 ? stack.slice(0, -1) : stack));\n  }, []);\n\n  const goToViewAndClearStack = useCallback(\n    (id: string): void => {\n      if (views.some(v => v.id === id)) {\n        setViewStack(id === homeView?.id ? [homeView.id] : [homeView?.id, id]);\n      }\n    },\n    [views, homeView]\n  );\n\n  const currentViewId = viewStack[viewStack.length - 1];\n  const currentView = views.find(v => v.id === currentViewId);\n\n  const navigate = useMemo<NavigateProps>(() => ({ goBack, goToView, goToViewAndClearStack }), [goBack, goToView, goToViewAndClearStack]);\n\n  const [prevIsOpen, setPrevIsOpen] = useState(isOpen);\n  if (prevIsOpen !== isOpen) {\n    setPrevIsOpen(isOpen);\n    if (!isOpen) {\n      setViewStack([homeView?.id]);\n    } else if (initialView && views.some(v => v.id === initialView)) {\n      setViewStack(initialView === homeView?.id ? [homeView.id] : [homeView?.id, initialView]);\n    }\n  }\n\n  return (\n    <DrawerNavigationContext.Provider value={navigate}>\n      <Drawer\n        isOpen={isOpen}\n        title={currentView?.title ?? 'Filter'}\n        withBackButton={viewStack.length > 1}\n        onRequestBack={goBack}\n        onRequestClose={currentView?.onCloseButton ?? onCloseButton}\n        footerContent={currentView?.footer ?? footer}\n        contentClassName={currentView?.drawerContentClassname}\n      >\n        {currentView?.children}\n      </Drawer>\n      {other}\n    </DrawerNavigationContext.Provider>\n  );\n}\n\nDrawerNavigation.View = DrawerView;\n\nexport default DrawerNavigation;\n"],"mappings":";;;;AAQA,IAAa,0BAA0B,cAAoC,KAAK;AAEhF,SAAgB,sBAA6E;CAC3F,MAAM,UAAU,WAAW,wBAAwB;CACnD,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,yEAAyE;CAE3F,OAAO;;;;ACST,SAAS,WAAkC,QAAkD;CAE3F,OAAO;;AAgBT,SAAS,cAAc,UAAmF;CACxG,MAAM,QAA2B,EAAE;CACnC,MAAM,QAA2B,EAAE;CACnC,SAAS,QAAQ,WAAU,UAAS;EAClC,IAAI,eAAgC,MAAM,IAAI,MAAM,SAAS,YAC3D,MAAM,KAAK;GACT,IAAI,MAAM,MAAM;GAChB,OAAO,MAAM,MAAM;GACnB,MAAM,MAAM,MAAM;GAClB,UAAU,MAAM,MAAM;GACtB,eAAe,MAAM,MAAM;GAC3B,QAAQ,MAAM,MAAM;GACpB,wBAAwB,MAAM,MAAM;GACrC,CAAC;;;EAGF,MAAM,KAAK,MAAM;GAEnB;CACF,OAAO;EAAE;EAAO;EAAO;;AAGzB,SAAS,iBAAiB,EAAE,UAAU,QAAQ,aAAa,eAAe,UAAkD;CAC1H,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,SAAS,EAAE,CAAC,SAAS,CAAC;CAE3E,MAAM,WAAW,MAAM,MAAK,MAAK,EAAE,KAAK,IAAI,MAAM;CAClD,MAAM,CAAC,WAAW,gBAAgB,SAAmB,CAAC,UAAU,GAAG,CAAC;CAEpE,MAAM,WAAW,aACd,OAAqB;EACpB,IAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,EAC9B,cAAa,UAAS,CAAC,GAAG,OAAO,GAAG,CAAC;IAGzC,CAAC,MAAM,CACR;CAED,MAAM,SAAS,kBAAwB;EACrC,cAAa,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,GAAG,GAAG,MAAO;IACrE,EAAE,CAAC;CAEN,MAAM,wBAAwB,aAC3B,OAAqB;EACpB,IAAI,MAAM,MAAK,MAAK,EAAE,OAAO,GAAG,EAC9B,aAAa,OAAO,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC;IAG1E,CAAC,OAAO,SAAS,CAClB;CAED,MAAM,gBAAgB,UAAU,UAAU,SAAS;CACnD,MAAM,cAAc,MAAM,MAAK,MAAK,EAAE,OAAO,cAAc;CAE3D,MAAM,WAAW,eAA8B;EAAE;EAAQ;EAAU;EAAuB,GAAG;EAAC;EAAQ;EAAU;EAAsB,CAAC;CAEvI,MAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO;CACpD,IAAI,eAAe,QAAQ;EACzB,cAAc,OAAO;EACrB,IAAI,CAAC,QACH,aAAa,CAAC,UAAU,GAAG,CAAC;OACvB,IAAI,eAAe,MAAM,MAAK,MAAK,EAAE,OAAO,YAAY,EAC7D,aAAa,gBAAgB,UAAU,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,IAAI,YAAY,CAAC;;CAI5F,OACE,qBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YAAzC,CACE,oBAAC,gBAAD;GACU;GACR,OAAO,aAAa,SAAS;GAC7B,gBAAgB,UAAU,SAAS;GACnC,eAAe;GACf,gBAAgB,aAAa,iBAAiB;GAC9C,eAAe,aAAa,UAAU;GACtC,kBAAkB,aAAa;aAE9B,aAAa;GACP,CAAA,EACR,MACgC;;;AAIvC,iBAAiB,OAAO"}

package/lib/Duolist.js

@@ -1,11 +1,12 @@
-import { n as AnalyticsId } from "./constants2.js";
-import { n as useBreakpoint, t as Breakpoint } from "./useBreakpoint.js";
+import { AnalyticsId } from "./constants.js";
+import { Breakpoint, useBreakpoint } from "./hooks/useBreakpoint.js";
 import { t as Spacer_default } from "./Spacer.js";
 import classNames from "classnames";
 import React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import duolistStyles from "./components/Duolist/styles.module.scss";
-const DuolistGroup = (props) => {
+//#region src/components/Duolist/Duolist.tsx
+var DuolistGroup = (props) => {
 	const { format = "formatted", boldColumn = format === "non-formatted" ? "none" : "first", description, separator = ": ", term } = props;
 	const firstBold = boldColumn === "first";
 	const secondBold = boldColumn === "second";
@@ -32,7 +33,7 @@ const DuolistGroup = (props) => {
 	};
 	return nonFormatted ? /* @__PURE__ */ jsx("div", { children: renderContent() }) : /* @__PURE__ */ jsx(Fragment, { children: renderContent() });
 };
-const Duolist = (props) => {
+var Duolist = (props) => {
 	const { boldColumn, border = "no-border", descriptionWidth, label, format = "formatted", separator, variant = "normal", children, className, testId, useCollapsedFromAndBelowBreakpoint } = props;
 	const hasBorder = border === "border";
 	const hasLines = variant === "line";
@@ -71,7 +72,10 @@ const Duolist = (props) => {
 		})]
 	});
 };
-var Duolist_default$1 = Duolist;
-export { Duolist as n, DuolistGroup as r, Duolist_default$1 as t };
+//#endregion
+//#region src/components/Duolist/index.ts
+var Duolist_default = Duolist;
+//#endregion
+export { Duolist as n, DuolistGroup as r, Duolist_default as t };
 
 //# sourceMappingURL=Duolist.js.map

package/lib/Duolist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.js","names":["DuolistGroup: React.FC<DuolistGroupProps>","Duolist: React.FC<DuolistProps>"],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;AAyDA,MAAaA,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;AAC1B,SACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAA;GACC,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;IACE,EACL,oBAAC,MAAA;GAAG,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;IACE,CAAA,EAAA,CACJ;;AAIP,QAAO,eAAe,oBAAC,OAAA,EAAA,UAAK,eAAe,EAAA,CAAO,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAA,CAAI;;AAG7E,MAAaC,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;AAEvE,QACE,qBAAC,OAAA;EAAI,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;aACvF,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAA,EAAA,CAAS,CAAA,EAAA,CACT,EAEL,oBAAC,MAAA;GACC,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;AAChG,QAAI,UAAU,QAAQ,OAAO,UAAU,YAAa;IACpD,MAAM,eAAe;AACrB,QAAI,aAAa,SAAS,aACxB,QAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;IACC,CAAA;GACD;;AC3JV,IAAA,oBD+Je"}
+{"version":3,"file":"Duolist.js","names":[],"sources":["../src/components/Duolist/Duolist.tsx","../src/components/Duolist/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { TitleProps } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Spacer from '../Spacer';\n\nimport duolistStyles from './styles.module.scss';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\nexport interface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: React.ReactElement<TitleProps>;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n  /** Use collapsed mode on columns from chosen breakpoint and below. */\n  useCollapsedFromAndBelowBreakpoint?: keyof typeof Breakpoint;\n}\n\nexport interface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Formatted or non-formatted visual variants */\n  format?: Formats;\n  /** Character separator for non-formatted format */\n  separator?: string;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n  const firstBold = boldColumn === 'first';\n  const secondBold = boldColumn === 'second';\n  const nonFormatted = format === 'non-formatted';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n    [duolistStyles['duolist__dt--bold']]: firstBold,\n    [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n  });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n    [duolistStyles['duolist__dd--bold']]: secondBold,\n    [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n  });\n\n  const renderContent = () => {\n    return (\n      <>\n        <dt\n          data-separator={nonFormatted ? separator : undefined}\n          className={dtClassNames}\n          data-testid={props.testId && `${props.testId}-term`}\n        >\n          {term}\n        </dt>\n        <dd className={ddClassNames} data-testid={props.testId && `${props.testId}-description`}>\n          {description}\n        </dd>\n      </>\n    );\n  };\n\n  return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const {\n    boldColumn,\n    border = 'no-border',\n    descriptionWidth,\n    label,\n    format = 'formatted',\n    separator,\n    variant = 'normal',\n    children,\n    className,\n    testId,\n    useCollapsedFromAndBelowBreakpoint,\n  } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n  const nonFormatted = format === 'non-formatted';\n  const breakpoint = useBreakpoint();\n  const useCollapsedMode = useCollapsedFromAndBelowBreakpoint && breakpoint <= Breakpoint[useCollapsedFromAndBelowBreakpoint];\n\n  const duolistWrapperClasses = classNames(\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n    [duolistStyles['duolist--non-formatted']]: nonFormatted,\n    [duolistStyles['duolist--collapsed']]: useCollapsedMode,\n    [duolistStyles['duolist--not-collapsed']]: !useCollapsedMode,\n  });\n\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl\n        style={!nonFormatted ? { gridTemplateColumns: useCollapsedMode ? `1fr` : `auto ${duolistColumnStyle}` } : undefined}\n        className={duolistClasses}\n      >\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if (child === null || typeof child === 'undefined') return;\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              ...duolistGroup.props,\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n              format: duolistGroup.props.format ?? format,\n              separator: duolistGroup.props.separator ?? separator,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n","import Duolist from './Duolist';\nexport * from './Duolist';\nexport default Duolist;\n"],"mappings":";;;;;;;;AAyDA,IAAa,gBAA4C,UAAS;CAChE,MAAM,EAAE,SAAS,aAAa,aAAa,WAAW,kBAAkB,SAAS,SAAS,aAAa,YAAY,MAAM,SAAS;CAElI,MAAM,YAAY,eAAe;CACjC,MAAM,aAAa,eAAe;CAClC,MAAM,eAAe,WAAW;CAEhC,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CACF,MAAM,eAAe,WAAW,cAAc,gBAAgB;GAC3D,cAAc,uBAAuB;GACrC,cAAc,gCAAgC;EAChD,CAAC;CAEF,MAAM,sBAAsB;EAC1B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD;GACE,kBAAgB,eAAe,YAAY,KAAA;GAC3C,WAAW;GACX,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aAE5C;GACE,CAAA,EACL,oBAAC,MAAD;GAAI,WAAW;GAAc,eAAa,MAAM,UAAU,GAAG,MAAM,OAAO;aACvE;GACE,CAAA,CACJ,EAAA,CAAA;;CAIP,OAAO,eAAe,oBAAC,OAAD,EAAA,UAAM,eAAe,EAAO,CAAA,GAAG,oBAAA,UAAA,EAAA,UAAG,eAAe,EAAI,CAAA;;AAG7E,IAAa,WAAkC,UAAS;CACtD,MAAM,EACJ,YACA,SAAS,aACT,kBACA,OACA,SAAS,aACT,WACA,UAAU,UACV,UACA,WACA,QACA,uCACE;CAEJ,MAAM,YAAY,WAAW;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,kBAAkB,cAAc,SAAS;CAC/C,MAAM,eAAe,WAAW;CAChC,MAAM,aAAa,eAAe;CAClC,MAAM,mBAAmB,sCAAsC,cAAc,WAAW;CAExF,MAAM,wBAAwB,WAC5B;GACG,cAAc,6BAA6B;GAC3C,cAAc,wCAAwC;EACxD,EACD,UACD;CAED,MAAM,iBAAiB,WAAW,cAAc,SAAS;GACtD,cAAc,mBAAmB;GACjC,cAAc,4BAA4B;GAC1C,cAAc,wBAAwB;GACtC,cAAc,4BAA4B,CAAC;EAC7C,CAAC;CAEF,MAAM,qBAAqB,mBAAmB,mBAAmB,MAAM;CAEvE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAuB,eAAa;EAAQ,oBAAkB,YAAY;YAA1F,CACG,SACC,qBAAA,UAAA,EAAA,UAAA,CACG,OACD,oBAAC,gBAAD,EAAU,CAAA,CACT,EAAA,CAAA,EAEL,oBAAC,MAAD;GACE,OAAO,CAAC,eAAe,EAAE,qBAAqB,mBAAmB,QAAQ,QAAQ,sBAAsB,GAAG,KAAA;GAC1G,WAAW;aAEV,MAAM,SAAS,IAAI,WAAW,UAAmE;IAChG,IAAI,UAAU,QAAQ,OAAO,UAAU,aAAa;IACpD,MAAM,eAAe;IACrB,IAAI,aAAa,SAAS,cACxB,OAAO,MAAM,aAAa,OAAgD;KACxE,GAAG,aAAa;KAChB,YAAY,aAAa,MAAM,cAAc;KAC7C,QAAQ,aAAa,MAAM,UAAU;KACrC,WAAW,aAAa,MAAM,aAAa;KAC5C,CAAC;KAEJ;GACC,CAAA,CACD;;;;;AC3JV,IAAA,kBAAe"}