@entur/expand 3.3.19 → 3.3.21

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.21](https://bitbucket.org/enturas/design-system/compare/@entur/expand@3.3.20...@entur/expand@3.3.21) (2022-10-12)
+
+### Bug Fixes
+
+- **expand:** change divs in button to be span ([29a238e](https://bitbucket.org/enturas/design-system/commits/29a238e698457bea8244cbdc3aceaf4f18892568))
+- **expand:** make aria-controls not refere to unmounted element id ([92b0b4a](https://bitbucket.org/enturas/design-system/commits/92b0b4a4ff3b5be56d9ae1559cb61c800897a08f))
+
 ## [3.3.19](https://bitbucket.org/enturas/design-system/compare/@entur/expand@3.3.18...@entur/expand@3.3.19) (2022-08-31)
 
 **Note:** Version bump only for package @entur/expand

package/dist/expand.cjs.development.js

@@ -123,13 +123,13 @@ var BaseExpandablePanel = function BaseExpandablePanel(_ref) {
     className: "eds-expandable-panel__trigger",
     onClick: onToggle,
     "aria-expanded": open,
-    "aria-controls": id
-  }, rest), React__default["default"].createElement("div", {
+    "aria-controls": open ? id : undefined
+  }, rest), React__default["default"].createElement("span", {
     className: "eds-expandable-panel__grid"
   }, React__default["default"].createElement(typography.Heading5, {
     margin: "none",
-    as: "div"
-  }, title), React__default["default"].createElement("div", {
+    as: "span"
+  }, title), React__default["default"].createElement("span", {
     className: "eds-expandable-panel__icon-container"
   }, React__default["default"].createElement(ExpandArrow, {
     open: open
@@ -236,13 +236,13 @@ var ExpandableText = function ExpandableText(_ref) {
     return GetTypographyComponent(titleElement);
   }, [titleElement]);
   return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ExpandableTextButton, _extends({
-    "aria-controls": randomId,
     open: isOpen,
     onToggle: function onToggle() {
       return setOpen(function (prev) {
         return !prev;
       });
     },
+    "aria-controls": isOpen ? randomId : undefined,
     as: Element
   }, rest), title), React__default["default"].createElement(BaseExpand, _extends({
     className: "eds-expandable-text__content",

package/dist/expand.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.cjs.development.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/ExpandableText.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n  const currentlyOpenState = React.useState<Id>(null);\n  return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n  id: Id;\n  defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n  isOpen: boolean;\n  toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n  const contextValue = React.useContext(AccordionContext);\n  if (!contextValue) {\n    throw new Error('You need to wrap your AccordionItem inside an Accordion');\n  }\n\n  const [openId, setOpenId] = contextValue;\n\n  React.useEffect(() => {\n    if (defaultOpen) {\n      setOpenId(id);\n    }\n  }, [defaultOpen, id, setOpenId]);\n\n  const isOpen = openId === id;\n\n  return {\n    isOpen,\n    toggle: () => setOpenId(isOpen ? null : id),\n  };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\ntype BaseExpandProps = {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n  return (\n    <UnmountClosed isOpened={open}>\n      <div {...rest} />\n    </UnmountClosed>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n  /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n   * @default false\n   */\n  open?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n  open = false,\n  className,\n  ...rest\n}) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\n\nimport './BaseExpandablePanel.scss';\nimport { ExpandArrow } from './ExpandArrow';\n\ntype BaseExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** IDen til expand-panelet */\n  id: string;\n  /** Prop for om innholdet er åpent */\n  open: boolean;\n  /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n  onToggle: () => void;\n  /** Styling som sendes til innholdet av BaseExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n  title,\n  children,\n  className,\n  id,\n  open,\n  onToggle,\n  contentStyle,\n  ...rest\n}) => {\n  return (\n    <div className={classNames('eds-expandable-panel', className)}>\n      <button\n        type=\"button\"\n        className=\"eds-expandable-panel__trigger\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={id}\n        {...rest}\n      >\n        <div className=\"eds-expandable-panel__grid\">\n          <Heading5 margin=\"none\" as=\"div\">\n            {title}\n          </Heading5>\n          <div className=\"eds-expandable-panel__icon-container\">\n            <ExpandArrow open={open} />\n          </div>\n        </div>\n      </button>\n      <BaseExpand\n        className=\"eds-expandable-panel__content\"\n        id={id}\n        open={open}\n        style={contentStyle}\n      >\n        {children}\n      </BaseExpand>\n    </div>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand AccordionItem skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Styling som sendes til innholdet av AccordionItem */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  defaultOpen = false,\n  id: overrideId,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-accordion-item');\n  const id = overrideId || randomId;\n  const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n  return (\n    <BaseExpandablePanel\n      {...rest}\n      contentStyle={contentStyle}\n      id={id}\n      onToggle={toggle}\n      open={isOpen}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandablePanel skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n  defaultOpen = false,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable');\n\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  return (\n    <BaseExpandablePanel\n      id={randomId}\n      open={isOpen}\n      onToggle={() => setOpen(prev => !prev)}\n      contentStyle={contentStyle}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n  children: React.ReactNode;\n  /** Prop for om innholdet er åpent */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableTextButton */\n  onToggle: () => void;\n  /** Den typografiske komponenten for tittelen\n   * @default Heading5\n   */\n  as?: React.ElementType;\n  [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n  children,\n  open,\n  onToggle,\n  as: Component = Heading5,\n  ...rest\n}) => {\n  return (\n    <button\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component as=\"span\">{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" inline />\n    </button>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport { Heading5, Paragraph, SubParagraph } from '@entur/typography';\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: string;\n  /** Innholdet som skal vises under linken */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableText */\n  onToggle?: () => void;\n  /**Styling som sendes til innholdet av ExpandableText */\n  contentStyle?: CSSProperties;\n  /** Hvilket typografisk element tittelen er\n   * @default \"Heading5\"\n   */\n  titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n  [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  contentStyle,\n  titleElement = 'Heading5',\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable-text');\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  const Element: React.ElementType = React.useMemo(\n    () => GetTypographyComponent(titleElement),\n    [titleElement],\n  );\n\n  return (\n    <>\n      <ExpandableTextButton\n        aria-controls={randomId}\n        open={isOpen}\n        onToggle={() => setOpen(prev => !prev)}\n        as={Element}\n        {...rest}\n      >\n        {title}\n      </ExpandableTextButton>\n      <BaseExpand\n        className=\"eds-expandable-text__content\"\n        id={randomId}\n        open={isOpen}\n        style={contentStyle}\n        {...rest}\n      >\n        {children}\n      </BaseExpand>\n    </>\n  );\n};\n\nfunction GetTypographyComponent(\n  element: 'Heading5' | 'Paragraph' | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Paragraph':\n      return Paragraph;\n    case 'SubParagraph':\n      return SubParagraph;\n    default:\n      return Heading5;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n"],"names":["AccordionContext","React","createContext","Accordion","rest","currentlyOpenState","useState","Provider","value","useAccordion","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","UnmountClosed","isOpened","ExpandArrow","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","type","onClick","Heading5","margin","as","style","AccordionItem","overrideId","randomId","useRandomId","ExpandablePanel","setOpen","prev","ExpandableTextButton","Component","inline","ExpandableText","titleElement","Element","useMemo","GetTypographyComponent","element","Paragraph","SubParagraph","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"expand.cjs.development.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/ExpandableText.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n  const currentlyOpenState = React.useState<Id>(null);\n  return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n  id: Id;\n  defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n  isOpen: boolean;\n  toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n  const contextValue = React.useContext(AccordionContext);\n  if (!contextValue) {\n    throw new Error('You need to wrap your AccordionItem inside an Accordion');\n  }\n\n  const [openId, setOpenId] = contextValue;\n\n  React.useEffect(() => {\n    if (defaultOpen) {\n      setOpenId(id);\n    }\n  }, [defaultOpen, id, setOpenId]);\n\n  const isOpen = openId === id;\n\n  return {\n    isOpen,\n    toggle: () => setOpenId(isOpen ? null : id),\n  };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\ntype BaseExpandProps = {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n  return (\n    <UnmountClosed isOpened={open}>\n      <div {...rest} />\n    </UnmountClosed>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n  /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n   * @default false\n   */\n  open?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n  open = false,\n  className,\n  ...rest\n}) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\n\nimport './BaseExpandablePanel.scss';\nimport { ExpandArrow } from './ExpandArrow';\n\ntype BaseExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** IDen til expand-panelet */\n  id: string;\n  /** Prop for om innholdet er åpent */\n  open: boolean;\n  /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n  onToggle: () => void;\n  /** Styling som sendes til innholdet av BaseExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n  title,\n  children,\n  className,\n  id,\n  open,\n  onToggle,\n  contentStyle,\n  ...rest\n}) => {\n  return (\n    <div className={classNames('eds-expandable-panel', className)}>\n      <button\n        type=\"button\"\n        className=\"eds-expandable-panel__trigger\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={open ? id : undefined}\n        {...rest}\n      >\n        <span className=\"eds-expandable-panel__grid\">\n          <Heading5 margin=\"none\" as=\"span\">\n            {title}\n          </Heading5>\n          <span className=\"eds-expandable-panel__icon-container\">\n            <ExpandArrow open={open} />\n          </span>\n        </span>\n      </button>\n      <BaseExpand\n        className=\"eds-expandable-panel__content\"\n        id={id}\n        open={open}\n        style={contentStyle}\n      >\n        {children}\n      </BaseExpand>\n    </div>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand AccordionItem skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Styling som sendes til innholdet av AccordionItem */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  defaultOpen = false,\n  id: overrideId,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-accordion-item');\n  const id = overrideId || randomId;\n  const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n  return (\n    <BaseExpandablePanel\n      {...rest}\n      contentStyle={contentStyle}\n      id={id}\n      onToggle={toggle}\n      open={isOpen}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandablePanel skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n  defaultOpen = false,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable');\n\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  return (\n    <BaseExpandablePanel\n      id={randomId}\n      open={isOpen}\n      onToggle={() => setOpen(prev => !prev)}\n      contentStyle={contentStyle}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n  children: React.ReactNode;\n  /** Prop for om innholdet er åpent */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableTextButton */\n  onToggle: () => void;\n  /** Den typografiske komponenten for tittelen\n   * @default Heading5\n   */\n  as?: React.ElementType;\n  [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n  children,\n  open,\n  onToggle,\n  as: Component = Heading5,\n  ...rest\n}) => {\n  return (\n    <button\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component as=\"span\">{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" inline />\n    </button>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport { Heading5, Paragraph, SubParagraph } from '@entur/typography';\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: string;\n  /** Innholdet som skal vises under linken */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableText */\n  onToggle?: () => void;\n  /**Styling som sendes til innholdet av ExpandableText */\n  contentStyle?: CSSProperties;\n  /** Hvilket typografisk element tittelen er\n   * @default \"Heading5\"\n   */\n  titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n  [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  contentStyle,\n  titleElement = 'Heading5',\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable-text');\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  const Element: React.ElementType = React.useMemo(\n    () => GetTypographyComponent(titleElement),\n    [titleElement],\n  );\n\n  return (\n    <>\n      <ExpandableTextButton\n        open={isOpen}\n        onToggle={() => setOpen(prev => !prev)}\n        aria-controls={isOpen ? randomId : undefined}\n        as={Element}\n        {...rest}\n      >\n        {title}\n      </ExpandableTextButton>\n      <BaseExpand\n        className=\"eds-expandable-text__content\"\n        id={randomId}\n        open={isOpen}\n        style={contentStyle}\n        {...rest}\n      >\n        {children}\n      </BaseExpand>\n    </>\n  );\n};\n\nfunction GetTypographyComponent(\n  element: 'Heading5' | 'Paragraph' | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Paragraph':\n      return Paragraph;\n    case 'SubParagraph':\n      return SubParagraph;\n    default:\n      return Heading5;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n"],"names":["AccordionContext","React","createContext","Accordion","rest","currentlyOpenState","useState","Provider","value","useAccordion","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","UnmountClosed","isOpened","ExpandArrow","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","type","onClick","undefined","Heading5","margin","as","style","AccordionItem","overrideId","randomId","useRandomId","ExpandablePanel","setOpen","prev","ExpandableTextButton","Component","inline","ExpandableText","titleElement","Element","useMemo","GetTypographyComponent","element","Paragraph","SubParagraph","warnAboutMissingStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,gBAAgB,gBAAGC,yBAAK,CAACC,aAAN,CAAiD,IAAjD,CAAzB;IAQaC,SAAS,GAA6B,SAAtCA,SAAsC;MAAMC;;AACvD,MAAMC,kBAAkB,GAAGJ,yBAAK,CAACK,QAAN,CAAmB,IAAnB,CAA3B;AACA,SAAOL,uCAAA,CAACD,gBAAgB,CAACO,QAAlB;AAA2BC,IAAAA,KAAK,EAAEH;AAAlC,KAA0DD,IAA1D,EAAP;AACD;IAOYK,YAAY,GAGrB,SAHSA,YAGT;MAAGC,WAAAA;MAAIC,oBAAAA;AACT,MAAMC,YAAY,GAAGX,yBAAK,CAACY,UAAN,CAAiBb,gBAAjB,CAArB;;AACA,MAAI,CAACY,YAAL,EAAmB;AACjB,UAAM,IAAIE,KAAJ,CAAU,yDAAV,CAAN;AACD;;AAED,MAAOC,MAAP,GAA4BH,YAA5B;AAAA,MAAeI,SAAf,GAA4BJ,YAA5B;AAEAX,EAAAA,yBAAK,CAACgB,SAAN,CAAgB;AACd,QAAIN,WAAJ,EAAiB;AACfK,MAAAA,SAAS,CAACN,EAAD,CAAT;AACD;AACF,GAJD,EAIG,CAACC,WAAD,EAAcD,EAAd,EAAkBM,SAAlB,CAJH;AAMA,MAAME,MAAM,GAAGH,MAAM,KAAKL,EAA1B;AAEA,SAAO;AACLQ,IAAAA,MAAM,EAANA,MADK;AAELC,IAAAA,MAAM,EAAE;AAAA,aAAMH,SAAS,CAACE,MAAM,GAAG,IAAH,GAAUR,EAAjB,CAAf;AAAA;AAFH,GAAP;AAID;;;IClCYU,UAAU,GAA8B,SAAxCA,UAAwC;MAAGC,YAAAA;MAASjB;;AAC/D,SACEH,uCAAA,CAACqB,2BAAD;AAAeC,IAAAA,QAAQ,EAAEF;GAAzB,EACEpB,uCAAA,MAAA,eAASG,IAAT,EADF,CADF;AAKD;;;ICFYoB,WAAW,GAA+B,SAA1CA,WAA0C;uBACrDH;MAAAA,8BAAO;MACPI,iBAAAA;MACGrB;;AAEH,SACEH,uCAAA,CAACyB,mBAAD;AACED,IAAAA,SAAS,EAAEE,8BAAU,CAACF,SAAD,EAAY,sBAAZ,EAAoC;AACvD,oCAA8BJ;AADyB,KAApC;AADvB,KAIMjB,IAJN,EADF;AAQD;;;ACLM,IAAMwB,mBAAmB,GAAuC,SAA1DA,mBAA0D;MACrEC,aAAAA;MACAC,gBAAAA;MACAL,iBAAAA;MACAf,UAAAA;MACAW,YAAAA;MACAU,gBAAAA;MACAC,oBAAAA;MACG5B;;AAEH,SACEH,uCAAA,MAAA;AAAKwB,IAAAA,SAAS,EAAEE,8BAAU,CAAC,sBAAD,EAAyBF,SAAzB;GAA1B,EACExB,uCAAA,SAAA;AACEgC,IAAAA,IAAI,EAAC,QADP;AAEER,IAAAA,SAAS,EAAC,+BAFZ;AAGES,IAAAA,OAAO,EAAEH,QAHX;qBAIiBV,IAJjB;qBAKiBA,IAAI,GAAGX,EAAH,GAAQyB;AAL7B,KAMM/B,IANN,GAQEH,uCAAA,OAAA;AAAMwB,IAAAA,SAAS,EAAC;GAAhB,EACExB,uCAAA,CAACmC,mBAAD;AAAUC,IAAAA,MAAM,EAAC;AAAOC,IAAAA,EAAE,EAAC;GAA3B,EACGT,KADH,CADF,EAIE5B,uCAAA,OAAA;AAAMwB,IAAAA,SAAS,EAAC;GAAhB,EACExB,uCAAA,CAACuB,WAAD;AAAaH,IAAAA,IAAI,EAAEA;GAAnB,CADF,CAJF,CARF,CADF,EAkBEpB,uCAAA,CAACmB,UAAD;AACEK,IAAAA,SAAS,EAAC;AACVf,IAAAA,EAAE,EAAEA;AACJW,IAAAA,IAAI,EAAEA;AACNkB,IAAAA,KAAK,EAAEP;GAJT,EAMGF,QANH,CAlBF,CADF;AA6BD,CAvCM;;;ICLMU,aAAa,GAAiC,SAA9CA,aAA8C;8BACzD7B;MAAAA,4CAAc;MACV8B,kBAAJ/B;MACAsB,oBAAAA;MACG5B;;AAEH,MAAMsC,QAAQ,GAAGC,iBAAW,CAAC,oBAAD,CAA5B;AACA,MAAMjC,EAAE,GAAG+B,UAAU,IAAIC,QAAzB;;AACA,sBAA2BjC,YAAY,CAAC;AAAEC,IAAAA,EAAE,EAAFA,EAAF;AAAMC,IAAAA,WAAW,EAAXA;AAAN,GAAD,CAAvC;AAAA,MAAQO,MAAR,iBAAQA,MAAR;AAAA,MAAgBC,MAAhB,iBAAgBA,MAAhB;;AAEA,SACElB,uCAAA,CAAC2B,mBAAD,eACMxB,IADN;AAEE4B,IAAAA,YAAY,EAAEA,YAFhB;AAGEtB,IAAAA,EAAE,EAAEA,EAHN;AAIEqB,IAAAA,QAAQ,EAAEZ,MAJZ;AAKEE,IAAAA,IAAI,EAAEH;AALR,KADF;AASD;;;IClBY0B,eAAe,GAAmC,SAAlDA,eAAkD;8BAC7DjC;MAAAA,4CAAc;MACdqB,oBAAAA;MACG5B;;AAEH,MAAMsC,QAAQ,GAAGC,iBAAW,CAAC,gBAAD,CAA5B;;AAEA,wBAA0B1C,yBAAK,CAACK,QAAN,CAAeK,WAAf,CAA1B;AAAA,MAAOO,MAAP;AAAA,MAAe2B,OAAf;;AAEA,SACE5C,uCAAA,CAAC2B,mBAAD;AACElB,IAAAA,EAAE,EAAEgC,QADN;AAEErB,IAAAA,IAAI,EAAEH,MAFR;AAGEa,IAAAA,QAAQ,EAAE;AAAA,aAAMc,OAAO,CAAC,UAAAC,IAAI;AAAA,eAAI,CAACA,IAAL;AAAA,OAAL,CAAb;AAAA,KAHZ;AAIEd,IAAAA,YAAY,EAAEA;AAJhB,KAKM5B,IALN,EADF;AASD;;;ICpBY2C,oBAAoB,GAAuC,SAA3DA,oBAA2D;MACtEjB,gBAAAA;MACAT,YAAAA;MACAU,gBAAAA;qBACAO;MAAIU,iCAAYZ;MACbhC;;AAEH,SACEH,uCAAA,SAAA;AACEwB,IAAAA,SAAS,EAAC,8BADZ;qBAEiBJ,IAFjB;AAGEY,IAAAA,IAAI,EAAC,QAHP;AAIEC,IAAAA,OAAO,EAAEH;AAJX,KAKM3B,IALN,GAOEH,uCAAA,CAAC+C,SAAD;AAAWV,IAAAA,EAAE,EAAC;GAAd,EAAsBR,QAAtB,CAPF,EAQE7B,uCAAA,CAACuB,WAAD;AAAaH,IAAAA,IAAI,EAAEA;AAAMI,IAAAA,SAAS,EAAC;AAA6BwB,IAAAA,MAAM;GAAtE,CARF,CADF;AAYD;;;ICPYC,cAAc,GAAkC,SAAhDA,cAAgD;MAC3DrB,aAAAA;MACAC,gBAAAA;8BACAnB;MAAAA,4CAAc;MACdqB,oBAAAA;+BACAmB;MAAAA,8CAAe;MACZ/C;;AAEH,MAAMsC,QAAQ,GAAGC,iBAAW,CAAC,qBAAD,CAA5B;;AACA,wBAA0B1C,yBAAK,CAACK,QAAN,CAAeK,WAAf,CAA1B;AAAA,MAAOO,MAAP;AAAA,MAAe2B,OAAf;;AAEA,MAAMO,OAAO,GAAsBnD,yBAAK,CAACoD,OAAN,CACjC;AAAA,WAAMC,sBAAsB,CAACH,YAAD,CAA5B;AAAA,GADiC,EAEjC,CAACA,YAAD,CAFiC,CAAnC;AAKA,SACElD,uCAAA,mCAAA,MAAA,EACEA,uCAAA,CAAC8C,oBAAD;AACE1B,IAAAA,IAAI,EAAEH,MADR;AAEEa,IAAAA,QAAQ,EAAE;AAAA,aAAMc,OAAO,CAAC,UAAAC,IAAI;AAAA,eAAI,CAACA,IAAL;AAAA,OAAL,CAAb;AAAA,KAFZ;qBAGiB5B,MAAM,GAAGwB,QAAH,GAAcP,SAHrC;AAIEG,IAAAA,EAAE,EAAEc;AAJN,KAKMhD,IALN,GAOGyB,KAPH,CADF,EAUE5B,uCAAA,CAACmB,UAAD;AACEK,IAAAA,SAAS,EAAC,8BADZ;AAEEf,IAAAA,EAAE,EAAEgC,QAFN;AAGErB,IAAAA,IAAI,EAAEH,MAHR;AAIEqB,IAAAA,KAAK,EAAEP;AAJT,KAKM5B,IALN,GAOG0B,QAPH,CAVF,CADF;AAsBD;;AAED,SAASwB,sBAAT,CACEC,OADF;AAGE,UAAQA,OAAR;AACE,SAAK,UAAL;AACE,aAAOnB,mBAAP;;AACF,SAAK,WAAL;AACE,aAAOoB,oBAAP;;AACF,SAAK,cAAL;AACE,aAAOC,uBAAP;;AACF;AACE,aAAOrB,mBAAP;AARJ;AAUD;;AC/EDsB,4BAAsB,CAAC,QAAD,EAAW,YAAX,EAAyB,OAAzB,CAAtB;;;;;;;;;;;"}

package/dist/expand.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),n=require("classnames"),a=require("@entur/typography"),r=require("react-collapse"),l=require("@entur/icons");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t),u=o(n);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},c.apply(this,arguments)}function i(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)t.indexOf(n=l[a])>=0||(r[n]=e[n]);return r}var s=d.default.createContext(null),p=function(e){var t=e.id,n=e.defaultOpen,a=d.default.useContext(s);if(!a)throw new Error("You need to wrap your AccordionItem inside an Accordion");var r=a[0],l=a[1];d.default.useEffect((function(){n&&l(t)}),[n,t,l]);var o=r===t;return{isOpen:o,toggle:function(){return l(o?null:t)}}},f=["open"],m=function(e){var t=e.open,n=i(e,f);return d.default.createElement(r.UnmountClosed,{isOpened:t},d.default.createElement("div",c({},n)))},g=["open","className"],x=function(e){var t=e.open,n=void 0!==t&&t,a=e.className,r=i(e,g);return d.default.createElement(l.DownArrowIcon,c({className:u.default(a,"eds-expandable-arrow",{"eds-expandable-arrow--open":n})},r))},v=["title","children","className","id","open","onToggle","contentStyle"],E=function(e){var t=e.title,n=e.children,r=e.className,l=e.id,o=e.open,s=e.onToggle,p=e.contentStyle,f=i(e,v);return d.default.createElement("div",{className:u.default("eds-expandable-panel",r)},d.default.createElement("button",c({type:"button",className:"eds-expandable-panel__trigger",onClick:s,"aria-expanded":o,"aria-controls":l},f),d.default.createElement("div",{className:"eds-expandable-panel__grid"},d.default.createElement(a.Heading5,{margin:"none",as:"div"},t),d.default.createElement("div",{className:"eds-expandable-panel__icon-container"},d.default.createElement(x,{open:o})))),d.default.createElement(m,{className:"eds-expandable-panel__content",id:l,open:o,style:p},n))},b=["defaultOpen","id","contentStyle"],y=["defaultOpen","contentStyle"],h=["children","open","onToggle","as"],O=function(e){var t=e.children,n=e.open,r=e.onToggle,l=e.as,o=void 0===l?a.Heading5:l,u=i(e,h);return d.default.createElement("button",c({className:"eds-expandable-text__trigger","aria-expanded":n,type:"button",onClick:r},u),d.default.createElement(o,{as:"span"},t),d.default.createElement(x,{open:n,className:"eds-expandable-text__arrow",inline:!0}))},S=["title","children","defaultOpen","contentStyle","titleElement"];e.warnAboutMissingStyles("expand","typography","icons"),exports.Accordion=function(e){var t=c({},e),n=d.default.useState(null);return d.default.createElement(s.Provider,c({value:n},t))},exports.AccordionItem=function(t){var n=t.defaultOpen,a=void 0!==n&&n,r=t.id,l=t.contentStyle,o=i(t,b),u=e.useRandomId("eds-accordion-item"),s=r||u,f=p({id:s,defaultOpen:a});return d.default.createElement(E,c({},o,{contentStyle:l,id:s,onToggle:f.toggle,open:f.isOpen}))},exports.BaseExpand=m,exports.ExpandArrow=x,exports.ExpandablePanel=function(t){var n=t.defaultOpen,a=void 0!==n&&n,r=t.contentStyle,l=i(t,y),o=e.useRandomId("eds-expandable"),u=d.default.useState(a),s=u[1];return d.default.createElement(E,c({id:o,open:u[0],onToggle:function(){return s((function(e){return!e}))},contentStyle:r},l))},exports.ExpandableText=function(t){var n=t.title,r=t.children,l=t.defaultOpen,o=void 0!==l&&l,u=t.contentStyle,s=t.titleElement,p=void 0===s?"Heading5":s,f=i(t,S),g=e.useRandomId("eds-expandable-text"),x=d.default.useState(o),v=x[0],E=x[1],b=d.default.useMemo((function(){return function(e){switch(e){case"Heading5":default:return a.Heading5;case"Paragraph":return a.Paragraph;case"SubParagraph":return a.SubParagraph}}(p)}),[p]);return d.default.createElement(d.default.Fragment,null,d.default.createElement(O,c({"aria-controls":g,open:v,onToggle:function(){return E((function(e){return!e}))},as:b},f),n),d.default.createElement(m,c({className:"eds-expandable-text__content",id:g,open:v,style:u},f),r))},exports.ExpandableTextButton=O,exports.useAccordion=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),t=require("react"),n=require("classnames"),a=require("@entur/typography"),r=require("react-collapse"),l=require("@entur/icons");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=o(t),u=o(n);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},c.apply(this,arguments)}function i(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)t.indexOf(n=l[a])>=0||(r[n]=e[n]);return r}var s=d.default.createContext(null),p=function(e){var t=e.id,n=e.defaultOpen,a=d.default.useContext(s);if(!a)throw new Error("You need to wrap your AccordionItem inside an Accordion");var r=a[0],l=a[1];d.default.useEffect((function(){n&&l(t)}),[n,t,l]);var o=r===t;return{isOpen:o,toggle:function(){return l(o?null:t)}}},f=["open"],m=function(e){var t=e.open,n=i(e,f);return d.default.createElement(r.UnmountClosed,{isOpened:t},d.default.createElement("div",c({},n)))},g=["open","className"],x=function(e){var t=e.open,n=void 0!==t&&t,a=e.className,r=i(e,g);return d.default.createElement(l.DownArrowIcon,c({className:u.default(a,"eds-expandable-arrow",{"eds-expandable-arrow--open":n})},r))},v=["title","children","className","id","open","onToggle","contentStyle"],E=function(e){var t=e.title,n=e.children,r=e.className,l=e.id,o=e.open,s=e.onToggle,p=e.contentStyle,f=i(e,v);return d.default.createElement("div",{className:u.default("eds-expandable-panel",r)},d.default.createElement("button",c({type:"button",className:"eds-expandable-panel__trigger",onClick:s,"aria-expanded":o,"aria-controls":o?l:void 0},f),d.default.createElement("span",{className:"eds-expandable-panel__grid"},d.default.createElement(a.Heading5,{margin:"none",as:"span"},t),d.default.createElement("span",{className:"eds-expandable-panel__icon-container"},d.default.createElement(x,{open:o})))),d.default.createElement(m,{className:"eds-expandable-panel__content",id:l,open:o,style:p},n))},b=["defaultOpen","id","contentStyle"],y=["defaultOpen","contentStyle"],h=["children","open","onToggle","as"],O=function(e){var t=e.children,n=e.open,r=e.onToggle,l=e.as,o=void 0===l?a.Heading5:l,u=i(e,h);return d.default.createElement("button",c({className:"eds-expandable-text__trigger","aria-expanded":n,type:"button",onClick:r},u),d.default.createElement(o,{as:"span"},t),d.default.createElement(x,{open:n,className:"eds-expandable-text__arrow",inline:!0}))},S=["title","children","defaultOpen","contentStyle","titleElement"];e.warnAboutMissingStyles("expand","typography","icons"),exports.Accordion=function(e){var t=c({},e),n=d.default.useState(null);return d.default.createElement(s.Provider,c({value:n},t))},exports.AccordionItem=function(t){var n=t.defaultOpen,a=void 0!==n&&n,r=t.id,l=t.contentStyle,o=i(t,b),u=e.useRandomId("eds-accordion-item"),s=r||u,f=p({id:s,defaultOpen:a});return d.default.createElement(E,c({},o,{contentStyle:l,id:s,onToggle:f.toggle,open:f.isOpen}))},exports.BaseExpand=m,exports.ExpandArrow=x,exports.ExpandablePanel=function(t){var n=t.defaultOpen,a=void 0!==n&&n,r=t.contentStyle,l=i(t,y),o=e.useRandomId("eds-expandable"),u=d.default.useState(a),s=u[1];return d.default.createElement(E,c({id:o,open:u[0],onToggle:function(){return s((function(e){return!e}))},contentStyle:r},l))},exports.ExpandableText=function(t){var n=t.title,r=t.children,l=t.defaultOpen,o=void 0!==l&&l,u=t.contentStyle,s=t.titleElement,p=void 0===s?"Heading5":s,f=i(t,S),g=e.useRandomId("eds-expandable-text"),x=d.default.useState(o),v=x[0],E=x[1],b=d.default.useMemo((function(){return function(e){switch(e){case"Heading5":default:return a.Heading5;case"Paragraph":return a.Paragraph;case"SubParagraph":return a.SubParagraph}}(p)}),[p]);return d.default.createElement(d.default.Fragment,null,d.default.createElement(O,c({open:v,onToggle:function(){return E((function(e){return!e}))},"aria-controls":v?g:void 0,as:b},f),n),d.default.createElement(m,c({className:"eds-expandable-text__content",id:g,open:v,style:u},f),r))},exports.ExpandableTextButton=O,exports.useAccordion=p;
 //# sourceMappingURL=expand.cjs.production.min.js.map

package/dist/expand.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.cjs.production.min.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/index.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableText.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n  const currentlyOpenState = React.useState<Id>(null);\n  return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n  id: Id;\n  defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n  isOpen: boolean;\n  toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n  const contextValue = React.useContext(AccordionContext);\n  if (!contextValue) {\n    throw new Error('You need to wrap your AccordionItem inside an Accordion');\n  }\n\n  const [openId, setOpenId] = contextValue;\n\n  React.useEffect(() => {\n    if (defaultOpen) {\n      setOpenId(id);\n    }\n  }, [defaultOpen, id, setOpenId]);\n\n  const isOpen = openId === id;\n\n  return {\n    isOpen,\n    toggle: () => setOpenId(isOpen ? null : id),\n  };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\ntype BaseExpandProps = {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n  return (\n    <UnmountClosed isOpened={open}>\n      <div {...rest} />\n    </UnmountClosed>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n  /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n   * @default false\n   */\n  open?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n  open = false,\n  className,\n  ...rest\n}) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\n\nimport './BaseExpandablePanel.scss';\nimport { ExpandArrow } from './ExpandArrow';\n\ntype BaseExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** IDen til expand-panelet */\n  id: string;\n  /** Prop for om innholdet er åpent */\n  open: boolean;\n  /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n  onToggle: () => void;\n  /** Styling som sendes til innholdet av BaseExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n  title,\n  children,\n  className,\n  id,\n  open,\n  onToggle,\n  contentStyle,\n  ...rest\n}) => {\n  return (\n    <div className={classNames('eds-expandable-panel', className)}>\n      <button\n        type=\"button\"\n        className=\"eds-expandable-panel__trigger\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={id}\n        {...rest}\n      >\n        <div className=\"eds-expandable-panel__grid\">\n          <Heading5 margin=\"none\" as=\"div\">\n            {title}\n          </Heading5>\n          <div className=\"eds-expandable-panel__icon-container\">\n            <ExpandArrow open={open} />\n          </div>\n        </div>\n      </button>\n      <BaseExpand\n        className=\"eds-expandable-panel__content\"\n        id={id}\n        open={open}\n        style={contentStyle}\n      >\n        {children}\n      </BaseExpand>\n    </div>\n  );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n  children: React.ReactNode;\n  /** Prop for om innholdet er åpent */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableTextButton */\n  onToggle: () => void;\n  /** Den typografiske komponenten for tittelen\n   * @default Heading5\n   */\n  as?: React.ElementType;\n  [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n  children,\n  open,\n  onToggle,\n  as: Component = Heading5,\n  ...rest\n}) => {\n  return (\n    <button\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component as=\"span\">{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" inline />\n    </button>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand AccordionItem skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Styling som sendes til innholdet av AccordionItem */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  defaultOpen = false,\n  id: overrideId,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-accordion-item');\n  const id = overrideId || randomId;\n  const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n  return (\n    <BaseExpandablePanel\n      {...rest}\n      contentStyle={contentStyle}\n      id={id}\n      onToggle={toggle}\n      open={isOpen}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandablePanel skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n  defaultOpen = false,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable');\n\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  return (\n    <BaseExpandablePanel\n      id={randomId}\n      open={isOpen}\n      onToggle={() => setOpen(prev => !prev)}\n      contentStyle={contentStyle}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport { Heading5, Paragraph, SubParagraph } from '@entur/typography';\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: string;\n  /** Innholdet som skal vises under linken */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableText */\n  onToggle?: () => void;\n  /**Styling som sendes til innholdet av ExpandableText */\n  contentStyle?: CSSProperties;\n  /** Hvilket typografisk element tittelen er\n   * @default \"Heading5\"\n   */\n  titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n  [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  contentStyle,\n  titleElement = 'Heading5',\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable-text');\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  const Element: React.ElementType = React.useMemo(\n    () => GetTypographyComponent(titleElement),\n    [titleElement],\n  );\n\n  return (\n    <>\n      <ExpandableTextButton\n        aria-controls={randomId}\n        open={isOpen}\n        onToggle={() => setOpen(prev => !prev)}\n        as={Element}\n        {...rest}\n      >\n        {title}\n      </ExpandableTextButton>\n      <BaseExpand\n        className=\"eds-expandable-text__content\"\n        id={randomId}\n        open={isOpen}\n        style={contentStyle}\n        {...rest}\n      >\n        {children}\n      </BaseExpand>\n    </>\n  );\n};\n\nfunction GetTypographyComponent(\n  element: 'Heading5' | 'Paragraph' | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Paragraph':\n      return Paragraph;\n    case 'SubParagraph':\n      return SubParagraph;\n    default:\n      return Heading5;\n  }\n}\n"],"names":["AccordionContext","React","createContext","useAccordion","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","rest","UnmountClosed","isOpened","ExpandArrow","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","type","onClick","Heading5","margin","as","style","ExpandableTextButton","Component","inline","warnAboutMissingStyles","currentlyOpenState","useState","Provider","value","overrideId","randomId","useRandomId","setOpen","prev","titleElement","Element","useMemo","element","Paragraph","SubParagraph","GetTypographyComponent"],"mappings":"gpBAIA,IAAMA,EAAmBC,UAAMC,cAA2C,MAkB7DC,EAGT,gBAAGC,IAAAA,GAAIC,IAAAA,YACHC,EAAeL,UAAMM,WAAWP,OACjCM,QACG,IAAIE,MAAM,+DAGXC,EAAqBH,KAAbI,EAAaJ,KAE5BL,UAAMU,WAAU,WACVN,GACFK,EAAUN,KAEX,CAACC,EAAaD,EAAIM,QAEfE,EAASH,IAAWL,QAEnB,CACLQ,OAAAA,EACAC,OAAQ,kBAAMH,EAAUE,EAAS,KAAOR,iBChC/BU,EAAwC,gBAAGC,IAAAA,KAASC,gBAE7Df,wBAACgB,iBAAcC,SAAUH,GACvBd,mCAASe,6BCCFG,EAA0C,oBACrDJ,KAAAA,gBACAK,IAAAA,UACGJ,gBAGDf,wBAACoB,mBACCD,UAAWE,UAAWF,EAAW,uBAAwB,8BACzBL,KAE5BC,8ECFGO,EAA0D,gBACrEC,IAAAA,MACAC,IAAAA,SACAL,IAAAA,UACAhB,IAAAA,GACAW,IAAAA,KACAW,IAAAA,SACAC,IAAAA,aACGX,gBAGDf,+BAAKmB,UAAWE,UAAW,uBAAwBF,IACjDnB,oCACE2B,KAAK,SACLR,UAAU,gCACVS,QAASH,kBACMX,kBACAX,GACXY,GAEJf,+BAAKmB,UAAU,8BACbnB,wBAAC6B,YAASC,OAAO,OAAOC,GAAG,OACxBR,GAEHvB,+BAAKmB,UAAU,wCACbnB,wBAACkB,GAAYJ,KAAMA,OAIzBd,wBAACa,GACCM,UAAU,gCACVhB,GAAIA,EACJW,KAAMA,EACNkB,MAAON,GAENF,kHCzCIS,EAA2D,gBACtET,IAAAA,SACAV,IAAAA,KACAW,IAAAA,aACAM,GAAIG,aAAYL,aACbd,gBAGDf,oCACEmB,UAAU,+CACKL,EACfa,KAAK,SACLC,QAASH,GACLV,GAEJf,wBAACkC,GAAUH,GAAG,QAAQP,GACtBxB,wBAACkB,GAAYJ,KAAMA,EAAMK,UAAU,6BAA6BgB,iFC9BtEC,yBAAuB,SAAU,aAAc,2BLSI,gBAAMrB,UACjDsB,EAAqBrC,UAAMsC,SAAa,aACvCtC,wBAACD,EAAiBwC,YAASC,MAAOH,GAAwBtB,2BMIR,oBACzDX,YAAAA,gBACIqC,IAAJtC,GACAuB,IAAAA,aACGX,SAEG2B,EAAWC,cAAY,sBACvBxC,EAAKsC,GAAcC,IACExC,EAAa,CAAEC,GAAAA,EAAIC,YAAAA,WAG5CJ,wBAACsB,OACKP,GACJW,aAAcA,EACdvB,GAAIA,EACJsB,WAPYb,OAQZE,OARIH,8ECPqD,oBAC7DP,YAAAA,gBACAsB,IAAAA,aACGX,SAEG2B,EAAWC,cAAY,oBAEH3C,UAAMsC,SAASlC,GAA1BwC,cAGb5C,wBAACsB,KACCnB,GAAIuC,EACJ5B,UACAW,SAAU,kBAAMmB,GAAQ,SAAAC,UAASA,MACjCnB,aAAcA,GACVX,4BCLmD,gBAC3DQ,IAAAA,MACAC,IAAAA,aACApB,YAAAA,gBACAsB,IAAAA,iBACAoB,aAAAA,aAAe,aACZ/B,SAEG2B,EAAWC,cAAY,yBACH3C,UAAMsC,SAASlC,GAAlCO,OAAQiC,OAETG,EAA6B/C,UAAMgD,SACvC,kBA4BJ,SACEC,UAEQA,OACD,0BAOIpB,eALJ,mBACIqB,gBACJ,sBACIC,gBArCHC,CAAuBN,KAC7B,CAACA,WAID9C,gDACEA,wBAACiC,qBACgBS,EACf5B,KAAMH,EACNc,SAAU,kBAAMmB,GAAQ,SAAAC,UAASA,MACjCd,GAAIgB,GACAhC,GAEHQ,GAEHvB,wBAACa,KACCM,UAAU,+BACVhB,GAAIuC,EACJ5B,KAAMH,EACNqB,MAAON,GACHX,GAEHS"}
+{"version":3,"file":"expand.cjs.production.min.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/index.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableText.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n  const currentlyOpenState = React.useState<Id>(null);\n  return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n  id: Id;\n  defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n  isOpen: boolean;\n  toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n  const contextValue = React.useContext(AccordionContext);\n  if (!contextValue) {\n    throw new Error('You need to wrap your AccordionItem inside an Accordion');\n  }\n\n  const [openId, setOpenId] = contextValue;\n\n  React.useEffect(() => {\n    if (defaultOpen) {\n      setOpenId(id);\n    }\n  }, [defaultOpen, id, setOpenId]);\n\n  const isOpen = openId === id;\n\n  return {\n    isOpen,\n    toggle: () => setOpenId(isOpen ? null : id),\n  };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\ntype BaseExpandProps = {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n  return (\n    <UnmountClosed isOpened={open}>\n      <div {...rest} />\n    </UnmountClosed>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n  /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n   * @default false\n   */\n  open?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n  open = false,\n  className,\n  ...rest\n}) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\n\nimport './BaseExpandablePanel.scss';\nimport { ExpandArrow } from './ExpandArrow';\n\ntype BaseExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** IDen til expand-panelet */\n  id: string;\n  /** Prop for om innholdet er åpent */\n  open: boolean;\n  /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n  onToggle: () => void;\n  /** Styling som sendes til innholdet av BaseExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n  title,\n  children,\n  className,\n  id,\n  open,\n  onToggle,\n  contentStyle,\n  ...rest\n}) => {\n  return (\n    <div className={classNames('eds-expandable-panel', className)}>\n      <button\n        type=\"button\"\n        className=\"eds-expandable-panel__trigger\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={open ? id : undefined}\n        {...rest}\n      >\n        <span className=\"eds-expandable-panel__grid\">\n          <Heading5 margin=\"none\" as=\"span\">\n            {title}\n          </Heading5>\n          <span className=\"eds-expandable-panel__icon-container\">\n            <ExpandArrow open={open} />\n          </span>\n        </span>\n      </button>\n      <BaseExpand\n        className=\"eds-expandable-panel__content\"\n        id={id}\n        open={open}\n        style={contentStyle}\n      >\n        {children}\n      </BaseExpand>\n    </div>\n  );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n  children: React.ReactNode;\n  /** Prop for om innholdet er åpent */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableTextButton */\n  onToggle: () => void;\n  /** Den typografiske komponenten for tittelen\n   * @default Heading5\n   */\n  as?: React.ElementType;\n  [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n  children,\n  open,\n  onToggle,\n  as: Component = Heading5,\n  ...rest\n}) => {\n  return (\n    <button\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component as=\"span\">{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" inline />\n    </button>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand AccordionItem skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Styling som sendes til innholdet av AccordionItem */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  defaultOpen = false,\n  id: overrideId,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-accordion-item');\n  const id = overrideId || randomId;\n  const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n  return (\n    <BaseExpandablePanel\n      {...rest}\n      contentStyle={contentStyle}\n      id={id}\n      onToggle={toggle}\n      open={isOpen}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandablePanel skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n  defaultOpen = false,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable');\n\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  return (\n    <BaseExpandablePanel\n      id={randomId}\n      open={isOpen}\n      onToggle={() => setOpen(prev => !prev)}\n      contentStyle={contentStyle}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport { Heading5, Paragraph, SubParagraph } from '@entur/typography';\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: string;\n  /** Innholdet som skal vises under linken */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableText */\n  onToggle?: () => void;\n  /**Styling som sendes til innholdet av ExpandableText */\n  contentStyle?: CSSProperties;\n  /** Hvilket typografisk element tittelen er\n   * @default \"Heading5\"\n   */\n  titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n  [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  contentStyle,\n  titleElement = 'Heading5',\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable-text');\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  const Element: React.ElementType = React.useMemo(\n    () => GetTypographyComponent(titleElement),\n    [titleElement],\n  );\n\n  return (\n    <>\n      <ExpandableTextButton\n        open={isOpen}\n        onToggle={() => setOpen(prev => !prev)}\n        aria-controls={isOpen ? randomId : undefined}\n        as={Element}\n        {...rest}\n      >\n        {title}\n      </ExpandableTextButton>\n      <BaseExpand\n        className=\"eds-expandable-text__content\"\n        id={randomId}\n        open={isOpen}\n        style={contentStyle}\n        {...rest}\n      >\n        {children}\n      </BaseExpand>\n    </>\n  );\n};\n\nfunction GetTypographyComponent(\n  element: 'Heading5' | 'Paragraph' | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Paragraph':\n      return Paragraph;\n    case 'SubParagraph':\n      return SubParagraph;\n    default:\n      return Heading5;\n  }\n}\n"],"names":["AccordionContext","React","createContext","useAccordion","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","rest","UnmountClosed","isOpened","ExpandArrow","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","type","onClick","undefined","Heading5","margin","as","style","ExpandableTextButton","Component","inline","warnAboutMissingStyles","currentlyOpenState","useState","Provider","value","overrideId","randomId","useRandomId","setOpen","prev","titleElement","Element","useMemo","element","Paragraph","SubParagraph","GetTypographyComponent"],"mappings":"gpBAIA,IAAMA,EAAmBC,UAAMC,cAA2C,MAkB7DC,EAGT,gBAAGC,IAAAA,GAAIC,IAAAA,YACHC,EAAeL,UAAMM,WAAWP,OACjCM,QACG,IAAIE,MAAM,+DAGXC,EAAqBH,KAAbI,EAAaJ,KAE5BL,UAAMU,WAAU,WACVN,GACFK,EAAUN,KAEX,CAACC,EAAaD,EAAIM,QAEfE,EAASH,IAAWL,QAEnB,CACLQ,OAAAA,EACAC,OAAQ,kBAAMH,EAAUE,EAAS,KAAOR,iBChC/BU,EAAwC,gBAAGC,IAAAA,KAASC,gBAE7Df,wBAACgB,iBAAcC,SAAUH,GACvBd,mCAASe,6BCCFG,EAA0C,oBACrDJ,KAAAA,gBACAK,IAAAA,UACGJ,gBAGDf,wBAACoB,mBACCD,UAAWE,UAAWF,EAAW,uBAAwB,8BACzBL,KAE5BC,8ECFGO,EAA0D,gBACrEC,IAAAA,MACAC,IAAAA,SACAL,IAAAA,UACAhB,IAAAA,GACAW,IAAAA,KACAW,IAAAA,SACAC,IAAAA,aACGX,gBAGDf,+BAAKmB,UAAWE,UAAW,uBAAwBF,IACjDnB,oCACE2B,KAAK,SACLR,UAAU,gCACVS,QAASH,kBACMX,kBACAA,EAAOX,OAAK0B,GACvBd,GAEJf,gCAAMmB,UAAU,8BACdnB,wBAAC8B,YAASC,OAAO,OAAOC,GAAG,QACxBT,GAEHvB,gCAAMmB,UAAU,wCACdnB,wBAACkB,GAAYJ,KAAMA,OAIzBd,wBAACa,GACCM,UAAU,gCACVhB,GAAIA,EACJW,KAAMA,EACNmB,MAAOP,GAENF,kHCzCIU,EAA2D,gBACtEV,IAAAA,SACAV,IAAAA,KACAW,IAAAA,aACAO,GAAIG,aAAYL,aACbf,gBAGDf,oCACEmB,UAAU,+CACKL,EACfa,KAAK,SACLC,QAASH,GACLV,GAEJf,wBAACmC,GAAUH,GAAG,QAAQR,GACtBxB,wBAACkB,GAAYJ,KAAMA,EAAMK,UAAU,6BAA6BiB,iFC9BtEC,yBAAuB,SAAU,aAAc,2BLSI,gBAAMtB,UACjDuB,EAAqBtC,UAAMuC,SAAa,aACvCvC,wBAACD,EAAiByC,YAASC,MAAOH,GAAwBvB,2BMIR,oBACzDX,YAAAA,gBACIsC,IAAJvC,GACAuB,IAAAA,aACGX,SAEG4B,EAAWC,cAAY,sBACvBzC,EAAKuC,GAAcC,IACEzC,EAAa,CAAEC,GAAAA,EAAIC,YAAAA,WAG5CJ,wBAACsB,OACKP,GACJW,aAAcA,EACdvB,GAAIA,EACJsB,WAPYb,OAQZE,OARIH,8ECPqD,oBAC7DP,YAAAA,gBACAsB,IAAAA,aACGX,SAEG4B,EAAWC,cAAY,oBAEH5C,UAAMuC,SAASnC,GAA1ByC,cAGb7C,wBAACsB,KACCnB,GAAIwC,EACJ7B,UACAW,SAAU,kBAAMoB,GAAQ,SAAAC,UAASA,MACjCpB,aAAcA,GACVX,4BCLmD,gBAC3DQ,IAAAA,MACAC,IAAAA,aACApB,YAAAA,gBACAsB,IAAAA,iBACAqB,aAAAA,aAAe,aACZhC,SAEG4B,EAAWC,cAAY,yBACH5C,UAAMuC,SAASnC,GAAlCO,OAAQkC,OAETG,EAA6BhD,UAAMiD,SACvC,kBA4BJ,SACEC,UAEQA,OACD,0BAOIpB,eALJ,mBACIqB,gBACJ,sBACIC,gBArCHC,CAAuBN,KAC7B,CAACA,WAID/C,gDACEA,wBAACkC,KACCpB,KAAMH,EACNc,SAAU,kBAAMoB,GAAQ,SAAAC,UAASA,sBAClBnC,EAASgC,OAAWd,EACnCG,GAAIgB,GACAjC,GAEHQ,GAEHvB,wBAACa,KACCM,UAAU,+BACVhB,GAAIwC,EACJ7B,KAAMH,EACNsB,MAAOP,GACHX,GAEHS"}

package/dist/expand.esm.js

@@ -114,13 +114,13 @@ var BaseExpandablePanel = function BaseExpandablePanel(_ref) {
     className: "eds-expandable-panel__trigger",
     onClick: onToggle,
     "aria-expanded": open,
-    "aria-controls": id
-  }, rest), React.createElement("div", {
+    "aria-controls": open ? id : undefined
+  }, rest), React.createElement("span", {
     className: "eds-expandable-panel__grid"
   }, React.createElement(Heading5, {
     margin: "none",
-    as: "div"
-  }, title), React.createElement("div", {
+    as: "span"
+  }, title), React.createElement("span", {
     className: "eds-expandable-panel__icon-container"
   }, React.createElement(ExpandArrow, {
     open: open
@@ -227,13 +227,13 @@ var ExpandableText = function ExpandableText(_ref) {
     return GetTypographyComponent(titleElement);
   }, [titleElement]);
   return React.createElement(React.Fragment, null, React.createElement(ExpandableTextButton, _extends({
-    "aria-controls": randomId,
     open: isOpen,
     onToggle: function onToggle() {
       return setOpen(function (prev) {
         return !prev;
       });
     },
+    "aria-controls": isOpen ? randomId : undefined,
     as: Element
   }, rest), title), React.createElement(BaseExpand, _extends({
     className: "eds-expandable-text__content",

package/dist/expand.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"expand.esm.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/ExpandableText.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n  const currentlyOpenState = React.useState<Id>(null);\n  return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n  id: Id;\n  defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n  isOpen: boolean;\n  toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n  const contextValue = React.useContext(AccordionContext);\n  if (!contextValue) {\n    throw new Error('You need to wrap your AccordionItem inside an Accordion');\n  }\n\n  const [openId, setOpenId] = contextValue;\n\n  React.useEffect(() => {\n    if (defaultOpen) {\n      setOpenId(id);\n    }\n  }, [defaultOpen, id, setOpenId]);\n\n  const isOpen = openId === id;\n\n  return {\n    isOpen,\n    toggle: () => setOpenId(isOpen ? null : id),\n  };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\ntype BaseExpandProps = {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n  return (\n    <UnmountClosed isOpened={open}>\n      <div {...rest} />\n    </UnmountClosed>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n  /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n   * @default false\n   */\n  open?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n  open = false,\n  className,\n  ...rest\n}) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\n\nimport './BaseExpandablePanel.scss';\nimport { ExpandArrow } from './ExpandArrow';\n\ntype BaseExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** IDen til expand-panelet */\n  id: string;\n  /** Prop for om innholdet er åpent */\n  open: boolean;\n  /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n  onToggle: () => void;\n  /** Styling som sendes til innholdet av BaseExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n  title,\n  children,\n  className,\n  id,\n  open,\n  onToggle,\n  contentStyle,\n  ...rest\n}) => {\n  return (\n    <div className={classNames('eds-expandable-panel', className)}>\n      <button\n        type=\"button\"\n        className=\"eds-expandable-panel__trigger\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={id}\n        {...rest}\n      >\n        <div className=\"eds-expandable-panel__grid\">\n          <Heading5 margin=\"none\" as=\"div\">\n            {title}\n          </Heading5>\n          <div className=\"eds-expandable-panel__icon-container\">\n            <ExpandArrow open={open} />\n          </div>\n        </div>\n      </button>\n      <BaseExpand\n        className=\"eds-expandable-panel__content\"\n        id={id}\n        open={open}\n        style={contentStyle}\n      >\n        {children}\n      </BaseExpand>\n    </div>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand AccordionItem skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Styling som sendes til innholdet av AccordionItem */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  defaultOpen = false,\n  id: overrideId,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-accordion-item');\n  const id = overrideId || randomId;\n  const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n  return (\n    <BaseExpandablePanel\n      {...rest}\n      contentStyle={contentStyle}\n      id={id}\n      onToggle={toggle}\n      open={isOpen}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandablePanel skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n  defaultOpen = false,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable');\n\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  return (\n    <BaseExpandablePanel\n      id={randomId}\n      open={isOpen}\n      onToggle={() => setOpen(prev => !prev)}\n      contentStyle={contentStyle}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n  children: React.ReactNode;\n  /** Prop for om innholdet er åpent */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableTextButton */\n  onToggle: () => void;\n  /** Den typografiske komponenten for tittelen\n   * @default Heading5\n   */\n  as?: React.ElementType;\n  [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n  children,\n  open,\n  onToggle,\n  as: Component = Heading5,\n  ...rest\n}) => {\n  return (\n    <button\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component as=\"span\">{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" inline />\n    </button>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport { Heading5, Paragraph, SubParagraph } from '@entur/typography';\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: string;\n  /** Innholdet som skal vises under linken */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableText */\n  onToggle?: () => void;\n  /**Styling som sendes til innholdet av ExpandableText */\n  contentStyle?: CSSProperties;\n  /** Hvilket typografisk element tittelen er\n   * @default \"Heading5\"\n   */\n  titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n  [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  contentStyle,\n  titleElement = 'Heading5',\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable-text');\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  const Element: React.ElementType = React.useMemo(\n    () => GetTypographyComponent(titleElement),\n    [titleElement],\n  );\n\n  return (\n    <>\n      <ExpandableTextButton\n        aria-controls={randomId}\n        open={isOpen}\n        onToggle={() => setOpen(prev => !prev)}\n        as={Element}\n        {...rest}\n      >\n        {title}\n      </ExpandableTextButton>\n      <BaseExpand\n        className=\"eds-expandable-text__content\"\n        id={randomId}\n        open={isOpen}\n        style={contentStyle}\n        {...rest}\n      >\n        {children}\n      </BaseExpand>\n    </>\n  );\n};\n\nfunction GetTypographyComponent(\n  element: 'Heading5' | 'Paragraph' | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Paragraph':\n      return Paragraph;\n    case 'SubParagraph':\n      return SubParagraph;\n    default:\n      return Heading5;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n"],"names":["AccordionContext","React","createContext","Accordion","rest","currentlyOpenState","useState","Provider","value","useAccordion","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","UnmountClosed","isOpened","ExpandArrow","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","type","onClick","Heading5","margin","as","style","AccordionItem","overrideId","randomId","useRandomId","ExpandablePanel","setOpen","prev","ExpandableTextButton","Component","inline","ExpandableText","titleElement","Element","useMemo","GetTypographyComponent","element","Paragraph","SubParagraph","warnAboutMissingStyles"],"mappings":"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"}
+{"version":3,"file":"expand.esm.js","sources":["../src/Accordion.tsx","../src/BaseExpand.tsx","../src/ExpandArrow.tsx","../src/BaseExpandablePanel.tsx","../src/AccordionItem.tsx","../src/ExpandablePanel.tsx","../src/ExpandableTextButton.tsx","../src/ExpandableText.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\ntype Id = string | null;\ntype AccordionContextType = [Id, React.Dispatch<React.SetStateAction<Id>>];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const Accordion: React.FC<AccordionProps> = ({ ...rest }) => {\n  const currentlyOpenState = React.useState<Id>(null);\n  return <AccordionContext.Provider value={currentlyOpenState} {...rest} />;\n};\n\ntype UseAccordionArgs = {\n  id: Id;\n  defaultOpen?: boolean;\n};\n\nexport const useAccordion: ({ id, defaultOpen }: UseAccordionArgs) => {\n  isOpen: boolean;\n  toggle: () => void;\n} = ({ id, defaultOpen }: UseAccordionArgs) => {\n  const contextValue = React.useContext(AccordionContext);\n  if (!contextValue) {\n    throw new Error('You need to wrap your AccordionItem inside an Accordion');\n  }\n\n  const [openId, setOpenId] = contextValue;\n\n  React.useEffect(() => {\n    if (defaultOpen) {\n      setOpenId(id);\n    }\n  }, [defaultOpen, id, setOpenId]);\n\n  const isOpen = openId === id;\n\n  return {\n    isOpen,\n    toggle: () => setOpenId(isOpen ? null : id),\n  };\n};\n","import React from 'react';\n\nimport { UnmountClosed } from 'react-collapse';\n\ntype BaseExpandProps = {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  [key: string]: any;\n};\nexport const BaseExpand: React.FC<BaseExpandProps> = ({ open, ...rest }) => {\n  return (\n    <UnmountClosed isOpened={open}>\n      <div {...rest} />\n    </UnmountClosed>\n  );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DownArrowIcon } from '@entur/icons';\nimport './ExpandArrow.scss';\n\ntype ExpandArrowProps = {\n  /** Om innholdet er åpent eller ikke, som bestemmer retningen på pila\n   * @default false\n   */\n  open?: boolean;\n  /** Ekstra klassenavn */\n  className?: string;\n  [key: string]: any;\n};\n\nexport const ExpandArrow: React.FC<ExpandArrowProps> = ({\n  open = false,\n  className,\n  ...rest\n}) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\n\nimport './BaseExpandablePanel.scss';\nimport { ExpandArrow } from './ExpandArrow';\n\ntype BaseExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** IDen til expand-panelet */\n  id: string;\n  /** Prop for om innholdet er åpent */\n  open: boolean;\n  /** Funksjonen som styrer åpningen av BaseExpandablePanel */\n  onToggle: () => void;\n  /** Styling som sendes til innholdet av BaseExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const BaseExpandablePanel: React.FC<BaseExpandablePanelProps> = ({\n  title,\n  children,\n  className,\n  id,\n  open,\n  onToggle,\n  contentStyle,\n  ...rest\n}) => {\n  return (\n    <div className={classNames('eds-expandable-panel', className)}>\n      <button\n        type=\"button\"\n        className=\"eds-expandable-panel__trigger\"\n        onClick={onToggle}\n        aria-expanded={open}\n        aria-controls={open ? id : undefined}\n        {...rest}\n      >\n        <span className=\"eds-expandable-panel__grid\">\n          <Heading5 margin=\"none\" as=\"span\">\n            {title}\n          </Heading5>\n          <span className=\"eds-expandable-panel__icon-container\">\n            <ExpandArrow open={open} />\n          </span>\n        </span>\n      </button>\n      <BaseExpand\n        className=\"eds-expandable-panel__content\"\n        id={id}\n        open={open}\n        style={contentStyle}\n      >\n        {children}\n      </BaseExpand>\n    </div>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand AccordionItem skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Styling som sendes til innholdet av AccordionItem */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const AccordionItem: React.FC<AccordionItemProps> = ({\n  defaultOpen = false,\n  id: overrideId,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-accordion-item');\n  const id = overrideId || randomId;\n  const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n  return (\n    <BaseExpandablePanel\n      {...rest}\n      contentStyle={contentStyle}\n      id={id}\n      onToggle={toggle}\n      open={isOpen}\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = {\n  /** Teksten som skal stå i panelet */\n  title: React.ReactNode;\n  /** Innholdet som skal vises under panelet */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandablePanel skal ha som default\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  [key: string]: any;\n};\nexport const ExpandablePanel: React.FC<ExpandablePanelProps> = ({\n  defaultOpen = false,\n  contentStyle,\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable');\n\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  return (\n    <BaseExpandablePanel\n      id={randomId}\n      open={isOpen}\n      onToggle={() => setOpen(prev => !prev)}\n      contentStyle={contentStyle}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExandableTextButtonProps = {\n  children: React.ReactNode;\n  /** Prop for om innholdet er åpent */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableTextButton */\n  onToggle: () => void;\n  /** Den typografiske komponenten for tittelen\n   * @default Heading5\n   */\n  as?: React.ElementType;\n  [key: string]: any;\n};\n\nexport const ExpandableTextButton: React.FC<ExandableTextButtonProps> = ({\n  children,\n  open,\n  onToggle,\n  as: Component = Heading5,\n  ...rest\n}) => {\n  return (\n    <button\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component as=\"span\">{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" inline />\n    </button>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport { Heading5, Paragraph, SubParagraph } from '@entur/typography';\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: string;\n  /** Innholdet som skal vises under linken */\n  children: React.ReactNode;\n  /** Hvilken tilstand ExpandableText skal ha som default (med mindre den er kontrollert)\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandableText, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandableText */\n  onToggle?: () => void;\n  /**Styling som sendes til innholdet av ExpandableText */\n  contentStyle?: CSSProperties;\n  /** Hvilket typografisk element tittelen er\n   * @default \"Heading5\"\n   */\n  titleElement?: 'Heading5' | 'Paragraph' | 'SubParagraph';\n  [key: string]: any;\n};\n\nexport const ExpandableText: React.FC<ExpandableTextProps> = ({\n  title,\n  children,\n  defaultOpen = false,\n  contentStyle,\n  titleElement = 'Heading5',\n  ...rest\n}) => {\n  const randomId = useRandomId('eds-expandable-text');\n  const [isOpen, setOpen] = React.useState(defaultOpen);\n\n  const Element: React.ElementType = React.useMemo(\n    () => GetTypographyComponent(titleElement),\n    [titleElement],\n  );\n\n  return (\n    <>\n      <ExpandableTextButton\n        open={isOpen}\n        onToggle={() => setOpen(prev => !prev)}\n        aria-controls={isOpen ? randomId : undefined}\n        as={Element}\n        {...rest}\n      >\n        {title}\n      </ExpandableTextButton>\n      <BaseExpand\n        className=\"eds-expandable-text__content\"\n        id={randomId}\n        open={isOpen}\n        style={contentStyle}\n        {...rest}\n      >\n        {children}\n      </BaseExpand>\n    </>\n  );\n};\n\nfunction GetTypographyComponent(\n  element: 'Heading5' | 'Paragraph' | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Paragraph':\n      return Paragraph;\n    case 'SubParagraph':\n      return SubParagraph;\n    default:\n      return Heading5;\n  }\n}\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('expand', 'typography', 'icons');\n\nexport * from './Accordion';\nexport * from './AccordionItem';\nexport * from './ExpandablePanel';\nexport * from './BaseExpand';\nexport * from './ExpandableText';\nexport * from './ExpandableTextButton';\nexport * from './ExpandArrow';\n"],"names":["AccordionContext","React","createContext","Accordion","rest","currentlyOpenState","useState","Provider","value","useAccordion","id","defaultOpen","contextValue","useContext","Error","openId","setOpenId","useEffect","isOpen","toggle","BaseExpand","open","UnmountClosed","isOpened","ExpandArrow","className","DownArrowIcon","classNames","BaseExpandablePanel","title","children","onToggle","contentStyle","type","onClick","undefined","Heading5","margin","as","style","AccordionItem","overrideId","randomId","useRandomId","ExpandablePanel","setOpen","prev","ExpandableTextButton","Component","inline","ExpandableText","titleElement","Element","useMemo","GetTypographyComponent","element","Paragraph","SubParagraph","warnAboutMissingStyles"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/expand",
-  "version": "3.3.19",
+  "version": "3.3.21",
   "license": "EUPL-1.2",
   "main": "dist/index.js",
   "module": "dist/expand.esm.js",
@@ -27,9 +27,9 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/icons": "^4.3.3",
+    "@entur/icons": "^5.0.0",
     "@entur/tokens": "^3.4.1",
-    "@entur/typography": "^1.6.17",
+    "@entur/typography": "^1.7.0",
     "@entur/utils": "^0.4.5",
     "classnames": "^2.3.1",
     "react-collapse": "^5.1.0"
@@ -37,5 +37,5 @@
   "devDependencies": {
     "@types/react-collapse": "^5.0.1"
   },
-  "gitHead": "8aec781ef750306fdf0c4042edabfad5b33cbdb8"
+  "gitHead": "e6da59550f3ace8e356155d60ce72d480aa17d51"
 }