@entur/expand 3.7.11 → 4.0.0-next.0

package/dist/expand.esm.js

@@ -1,14 +1,40 @@
-import { useRandomId, warnAboutMissingStyles } from "@entur/utils";
+import { mergeRefs, warnAboutMissingStyles } from "@entur/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { useState, useRef, useEffect, useCallback, useId } from "react";
 import classNames from "classnames";
 import { Heading5, SubParagraph, Paragraph, Heading2, Heading3, Heading4 } from "@entur/typography";
-import { UnmountClosed } from "react-collapse";
 import { DownArrowIcon } from "@entur/icons";
 const AccordionContext = React.createContext(null);
-const Accordion = ({ ...rest }) => {
-  const currentlyOpenState = React.useState(null);
-  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: currentlyOpenState, ...rest });
+const Accordion = ({
+  openId: controlledOpenId,
+  onToggle,
+  defaultOpenId = null,
+  children,
+  ...rest
+}) => {
+  const [internalOpenId, setInternalOpenId] = React.useState(defaultOpenId);
+  const isControlled = controlledOpenId !== void 0;
+  const openId = isControlled ? controlledOpenId : internalOpenId;
+  const onToggleRef = React.useRef(onToggle);
+  React.useEffect(() => {
+    onToggleRef.current = onToggle;
+  });
+  const setOpenId = React.useCallback(
+    (id, silent = false) => {
+      if (!isControlled) {
+        setInternalOpenId(id);
+      }
+      if (!silent) {
+        onToggleRef.current?.(id);
+      }
+    },
+    [isControlled]
+  );
+  const contextValue = React.useMemo(
+    () => [openId, setOpenId],
+    [openId, setOpenId]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, ...rest, children });
 };
 const useAccordion = ({ id, defaultOpen }) => {
   const contextValue = React.useContext(AccordionContext);
@@ -18,7 +44,7 @@ const useAccordion = ({ id, defaultOpen }) => {
   const [openId, setOpenId] = contextValue;
   React.useEffect(() => {
     if (defaultOpen) {
-      setOpenId(id);
+      setOpenId(id, true);
     }
   }, [defaultOpen, id, setOpenId]);
   const isOpen = openId === id;
@@ -27,9 +53,57 @@ const useAccordion = ({ id, defaultOpen }) => {
     toggle: () => setOpenId(isOpen ? null : id)
   };
 };
-const BaseExpand = ({ open, ...rest }) => {
-  return /* @__PURE__ */ jsx(UnmountClosed, { isOpened: open, children: /* @__PURE__ */ jsx("div", { ...rest }) });
-};
+const BaseExpand = React.forwardRef(
+  ({ open, children, unmountOnClose = false, ...rest }, ref) => {
+    const [mounted, setMounted] = useState(open || !unmountOnClose);
+    const [expanded, setExpanded] = useState(open);
+    const collapseRef = useRef(null);
+    useEffect(() => {
+      if (open) {
+        setMounted(true);
+      } else {
+        setExpanded(false);
+      }
+    }, [open]);
+    useEffect(() => {
+      if (mounted && open && !expanded) {
+        const raf = requestAnimationFrame(() => {
+          setExpanded(true);
+        });
+        return () => cancelAnimationFrame(raf);
+      }
+    }, [mounted, open, expanded]);
+    const handleTransitionEnd = useCallback(
+      (e) => {
+        if (e.target === collapseRef.current && !open && unmountOnClose) {
+          setMounted(false);
+        }
+      },
+      [open, unmountOnClose]
+    );
+    useEffect(() => {
+      if (!open && mounted && !expanded && unmountOnClose) {
+        const el = collapseRef.current;
+        if (!el) return;
+        const duration = parseFloat(getComputedStyle(el).transitionDuration) || 0;
+        if (duration === 0) {
+          setMounted(false);
+        }
+      }
+    }, [open, mounted, expanded, unmountOnClose]);
+    if (!mounted) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergeRefs(collapseRef, ref),
+        className: `eds-base-expand${expanded ? " eds-base-expand--open" : ""}`,
+        onTransitionEnd: handleTransitionEnd,
+        ...!expanded ? { "aria-hidden": true, inert: "" } : {},
+        children: /* @__PURE__ */ jsx("div", { className: "eds-base-expand__inner", children: /* @__PURE__ */ jsx("div", { ...rest, children }) })
+      }
+    );
+  }
+);
 const ExpandArrow = ({
   open = false,
   className,
@@ -46,101 +120,127 @@ const ExpandArrow = ({
     }
   );
 };
-const BaseExpandablePanel = ({
-  title,
-  children,
-  className,
-  id,
-  open,
-  onToggle,
-  contentStyle,
-  disableAnimation,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("eds-expandable-panel", className, {
-        "eds-expandable-panel--disable-animation": disableAnimation
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "eds-expandable-panel__trigger",
-            onClick: onToggle,
-            "aria-expanded": open,
-            "aria-controls": open ? id : void 0,
-            ...rest,
-            children: /* @__PURE__ */ jsxs("span", { className: "eds-expandable-panel__grid", children: [
-              /* @__PURE__ */ jsx(Heading5, { margin: "none", as: "span", children: title }),
-              /* @__PURE__ */ jsx("span", { className: "eds-expandable-panel__icon-container", children: /* @__PURE__ */ jsx(ExpandArrow, { open }) })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BaseExpand,
-          {
-            className: "eds-expandable-panel__content",
-            id,
-            open,
-            style: contentStyle,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
-const AccordionItem = ({
-  defaultOpen = false,
-  id: overrideId,
-  contentStyle,
-  ...rest
-}) => {
-  const randomId = useRandomId("eds-accordion-item");
-  const id = overrideId || randomId;
-  const { isOpen, toggle } = useAccordion({ id, defaultOpen });
-  return /* @__PURE__ */ jsx(
-    BaseExpandablePanel,
-    {
-      ...rest,
-      contentStyle,
-      id,
-      onToggle: toggle,
-      open: isOpen
-    }
-  );
-};
-const ExpandablePanel = ({
-  defaultOpen = false,
-  contentStyle,
-  ...rest
-}) => {
-  const randomId = useRandomId("eds-expandable");
-  const [isOpen, setOpen] = React.useState(defaultOpen);
-  return /* @__PURE__ */ jsx(
-    BaseExpandablePanel,
-    {
-      id: randomId,
-      open: isOpen,
-      onToggle: () => setOpen((prev) => !prev),
-      contentStyle,
-      ...rest
-    }
-  );
-};
-const ExpandableTextButton = ({
-  children,
-  open,
-  onToggle,
-  as: Component = Heading5,
-  ...rest
-}) => {
+const BaseExpandablePanel = React.forwardRef(
+  ({
+    title,
+    children,
+    className,
+    id,
+    open,
+    onToggle,
+    contentStyle,
+    disableAnimation,
+    unmountOnClose = false,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classNames("eds-expandable-panel", className, {
+          "eds-expandable-panel--disable-animation": disableAnimation
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "eds-expandable-panel__trigger",
+              onClick: onToggle,
+              "aria-expanded": open,
+              "aria-controls": open || !unmountOnClose ? id : void 0,
+              ...rest,
+              children: /* @__PURE__ */ jsxs("span", { className: "eds-expandable-panel__grid", children: [
+                /* @__PURE__ */ jsx(Heading5, { margin: "none", as: "span", children: title }),
+                /* @__PURE__ */ jsx("span", { className: "eds-expandable-panel__icon-container", children: /* @__PURE__ */ jsx(ExpandArrow, { open }) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BaseExpand,
+            {
+              className: "eds-expandable-panel__content",
+              id,
+              open,
+              style: contentStyle,
+              unmountOnClose,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const AccordionItem = React.forwardRef(
+  ({
+    defaultOpen = false,
+    id: overrideId,
+    contentStyle,
+    disableAnimation,
+    unmountOnClose,
+    ...rest
+  }, ref) => {
+    const randomId = `eds-accordion-item${useId()}`;
+    const id = overrideId || randomId;
+    const { isOpen, toggle } = useAccordion({ id, defaultOpen });
+    return /* @__PURE__ */ jsx(
+      BaseExpandablePanel,
+      {
+        ref,
+        ...rest,
+        contentStyle,
+        disableAnimation,
+        id,
+        onToggle: toggle,
+        open: isOpen,
+        unmountOnClose
+      }
+    );
+  }
+);
+const ExpandablePanel = React.forwardRef(
+  ({
+    defaultOpen = false,
+    open: controlledOpen,
+    onToggle,
+    contentStyle,
+    disableAnimation,
+    unmountOnClose,
+    id: overrideId,
+    ...rest
+  }, ref) => {
+    const randomId = `eds-expandable${useId()}`;
+    const id = overrideId || randomId;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== void 0;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const handleToggle = () => {
+      if (!isControlled) {
+        setInternalOpen((prev) => !prev);
+      }
+      onToggle?.();
+    };
+    return /* @__PURE__ */ jsx(
+      BaseExpandablePanel,
+      {
+        ref,
+        id,
+        open: isOpen,
+        onToggle: handleToggle,
+        contentStyle,
+        disableAnimation,
+        unmountOnClose,
+        ...rest
+      }
+    );
+  }
+);
+const ExpandableTextButton = React.forwardRef(({ children, open, onToggle, as: Component = Heading5, ...rest }, ref) => {
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      ref,
       className: "eds-expandable-text__trigger",
       "aria-expanded": open,
       type: "button",
@@ -152,56 +252,70 @@ const ExpandableTextButton = ({
       ]
     }
   );
-};
-const ExpandableText = ({
-  title,
-  children,
-  defaultOpen = false,
-  contentStyle,
-  titleElement = "Heading5",
-  disableAnimation,
-  className,
-  ...rest
-}) => {
-  const randomId = useRandomId("eds-expandable-text");
-  const [isOpen, setOpen] = React.useState(defaultOpen);
-  const Element = React.useMemo(
-    () => GetTypographyComponent(titleElement),
-    [titleElement]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("eds-expandable-text", className, {
-        "eds-expandable-text--disable-animation": disableAnimation
-      }),
-      children: [
-        /* @__PURE__ */ jsx(
-          ExpandableTextButton,
-          {
-            open: isOpen,
-            onToggle: () => setOpen((prev) => !prev),
-            "aria-controls": isOpen ? randomId : void 0,
-            as: Element,
-            ...rest,
-            children: title
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          BaseExpand,
-          {
-            className: "eds-expandable-text__content",
-            id: randomId,
-            open: isOpen,
-            style: contentStyle,
-            ...rest,
-            children
-          }
-        )
-      ]
-    }
-  );
-};
+});
+const ExpandableText = React.forwardRef(
+  ({
+    title,
+    children,
+    defaultOpen = false,
+    open: controlledOpen,
+    onToggle,
+    contentStyle,
+    titleElement = "Heading5",
+    disableAnimation,
+    unmountOnClose = false,
+    className,
+    ...rest
+  }, ref) => {
+    const randomId = `eds-expandable-text${useId()}`;
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== void 0;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const handleToggle = () => {
+      if (!isControlled) {
+        setInternalOpen((prev) => !prev);
+      }
+      onToggle?.();
+    };
+    const Element = React.useMemo(
+      () => GetTypographyComponent(titleElement),
+      [titleElement]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classNames("eds-expandable-text", className, {
+          "eds-expandable-text--disable-animation": disableAnimation
+        }),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ExpandableTextButton,
+            {
+              open: isOpen,
+              onToggle: handleToggle,
+              "aria-controls": isOpen || !unmountOnClose ? randomId : void 0,
+              as: Element,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BaseExpand,
+            {
+              className: "eds-expandable-text__content",
+              id: randomId,
+              open: isOpen,
+              style: contentStyle,
+              unmountOnClose,
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 function GetTypographyComponent(element) {
   switch (element) {
     case "Heading5":

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\nimport './BaseExpand.scss';\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      aria-hidden=\"true\"\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\nimport { ExpandArrow } from './ExpandArrow';\n\nimport './BaseExpandablePanel.scss';\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  disableAnimation?: boolean;\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  disableAnimation,\n  ...rest\n}) => {\n  return (\n    <div\n      className={classNames('eds-expandable-panel', className, {\n        'eds-expandable-panel--disable-animation': disableAnimation,\n      })}\n    >\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  disableAnimation?: boolean;\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>{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" />\n    </button>\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { useRandomId } from '@entur/utils';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport {\n  Heading2,\n  Heading3,\n  Heading4,\n  Heading5,\n  Paragraph,\n  SubParagraph,\n} from '@entur/typography';\n\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = {\n  /** Teksten som skal \"vises\" */\n  title: React.ReactNode;\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  disableAnimation?: boolean;\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  disableAnimation,\n  className,\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    <div\n      className={classNames('eds-expandable-text', className, {\n        'eds-expandable-text--disable-animation': disableAnimation,\n      })}\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    </div>\n  );\n};\n\nfunction GetTypographyComponent(\n  element:\n    | 'Heading5'\n    | 'Heading4'\n    | 'Heading3'\n    | 'Heading2'\n    | 'Paragraph'\n    | 'SubParagraph',\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Heading4':\n      return Heading4;\n    case 'Heading3':\n      return Heading3;\n    case 'Heading2':\n      return Heading2;\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":[],"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, (id: Id, silent?: boolean) => void];\nconst AccordionContext = React.createContext<AccordionContextType | null>(null);\n\nexport type AccordionProps = {\n  /** To eller flere AccordionItem-komponenter */\n  children: React.ReactNode;\n  /** ID-en til det åpne panelet. Brukes for kontrollert modus, sammen med onToggle. */\n  openId?: Id;\n  /** Kalles når et panel åpnes eller lukkes. Mottar IDen til panelet som ble åpnet, eller null om det ble lukket. */\n  onToggle?: (id: Id) => void;\n  /** ID-en til panelet som skal være åpent som standard (ukontrollert modus) */\n  defaultOpenId?: Id;\n};\n\nexport const Accordion = ({\n  openId: controlledOpenId,\n  onToggle,\n  defaultOpenId = null,\n  children,\n  ...rest\n}: AccordionProps) => {\n  const [internalOpenId, setInternalOpenId] = React.useState<Id>(defaultOpenId);\n  const isControlled = controlledOpenId !== undefined;\n  const openId = isControlled ? controlledOpenId : internalOpenId;\n\n  const onToggleRef = React.useRef(onToggle);\n  React.useEffect(() => {\n    onToggleRef.current = onToggle;\n  });\n\n  const setOpenId = React.useCallback(\n    (id: Id, silent = false) => {\n      if (!isControlled) {\n        setInternalOpenId(id);\n      }\n      if (!silent) {\n        onToggleRef.current?.(id);\n      }\n    },\n    [isControlled],\n  );\n\n  const contextValue = React.useMemo<AccordionContextType>(\n    () => [openId, setOpenId],\n    [openId, setOpenId],\n  );\n\n  return (\n    <AccordionContext.Provider value={contextValue} {...rest}>\n      {children}\n    </AccordionContext.Provider>\n  );\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, true);\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, { useCallback, useEffect, useRef, useState } from 'react';\nimport { mergeRefs } from '@entur/utils';\n\nimport './BaseExpand.scss';\n\ntype BaseExpandProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> & {\n  /** Innholdet som skal være expandable */\n  children: React.ReactNode;\n  /** Boolean for om innholdet vises eller ikke */\n  open: boolean;\n  /** Avmonter innholdet når det lukkes. Når false (standard), holdes innholdet montert og skjules med CSS.\n   * @default false\n   */\n  unmountOnClose?: boolean;\n};\n\nexport const BaseExpand = React.forwardRef<HTMLDivElement, BaseExpandProps>(\n  ({ open, children, unmountOnClose = false, ...rest }, ref) => {\n    const [mounted, setMounted] = useState(open || !unmountOnClose);\n    const [expanded, setExpanded] = useState(open);\n    const collapseRef = useRef<HTMLDivElement>(null);\n\n    // Opening: mount first, then expand in next frame to trigger CSS transition.\n    // Closing: collapse immediately — unmount happens on transitionend.\n    useEffect(() => {\n      if (open) {\n        setMounted(true);\n      } else {\n        setExpanded(false);\n      }\n    }, [open]);\n\n    // After the component mounts at 0fr, trigger the expand in the next frame\n    // so the browser paints the collapsed state before transitioning to 1fr.\n    useEffect(() => {\n      if (mounted && open && !expanded) {\n        const raf = requestAnimationFrame(() => {\n          setExpanded(true);\n        });\n        return () => cancelAnimationFrame(raf);\n      }\n    }, [mounted, open, expanded]);\n\n    const handleTransitionEnd = useCallback(\n      (e: React.TransitionEvent) => {\n        if (e.target === collapseRef.current && !open && unmountOnClose) {\n          setMounted(false);\n        }\n      },\n      [open, unmountOnClose],\n    );\n\n    // Fallback for when CSS transitions are disabled (e.g. disableAnimation prop).\n    // In that case transitionend never fires, so we unmount based on computed style.\n    useEffect(() => {\n      if (!open && mounted && !expanded && unmountOnClose) {\n        const el = collapseRef.current;\n        if (!el) return;\n        const duration =\n          parseFloat(getComputedStyle(el).transitionDuration) || 0;\n        if (duration === 0) {\n          setMounted(false);\n        }\n      }\n    }, [open, mounted, expanded, unmountOnClose]);\n\n    if (!mounted) return null;\n\n    return (\n      <div\n        ref={mergeRefs(collapseRef, ref)}\n        className={`eds-base-expand${expanded ? ' eds-base-expand--open' : ''}`}\n        onTransitionEnd={handleTransitionEnd}\n        {...(!expanded ? { 'aria-hidden': true, inert: '' } : {})}\n      >\n        <div className=\"eds-base-expand__inner\">\n          <div {...rest}>{children}</div>\n        </div>\n      </div>\n    );\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 = ({\n  open = false,\n  className,\n  ...rest\n}: ExpandArrowProps) => {\n  return (\n    <DownArrowIcon\n      className={classNames(className, 'eds-expandable-arrow', {\n        'eds-expandable-arrow--open': open,\n      })}\n      {...rest}\n      aria-hidden=\"true\"\n    />\n  );\n};\n","import React, { CSSProperties } from 'react';\nimport classNames from 'classnames';\n\nimport { Heading5 } from '@entur/typography';\nimport { BaseExpand } from './BaseExpand';\nimport { ExpandArrow } from './ExpandArrow';\n\nimport './BaseExpandablePanel.scss';\n\ntype BaseExpandablePanelProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'title' | 'onClick'\n> & {\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  disableAnimation?: boolean;\n  /** Avmonter innholdet når det lukkes. Når false (standard), holdes innholdet montert og skjules med CSS.\n   * @default false\n   */\n  unmountOnClose?: boolean;\n};\nexport const BaseExpandablePanel = React.forwardRef<\n  HTMLDivElement,\n  BaseExpandablePanelProps\n>(\n  (\n    {\n      title,\n      children,\n      className,\n      id,\n      open,\n      onToggle,\n      contentStyle,\n      disableAnimation,\n      unmountOnClose = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('eds-expandable-panel', className, {\n          'eds-expandable-panel--disable-animation': disableAnimation,\n        })}\n      >\n        <button\n          type=\"button\"\n          className=\"eds-expandable-panel__trigger\"\n          onClick={onToggle}\n          aria-expanded={open}\n          aria-controls={open || !unmountOnClose ? 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          unmountOnClose={unmountOnClose}\n        >\n          {children}\n        </BaseExpand>\n      </div>\n    );\n  },\n);\n","import React, { CSSProperties, useId } from 'react';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\nimport { useAccordion } from './Accordion';\n\nexport type AccordionItemProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'title' | 'onClick'\n> & {\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  /** Deaktiver åpne/lukke-animasjonen */\n  disableAnimation?: boolean;\n  /** Avmonter innholdet når det lukkes. Når false (standard), holdes innholdet montert og skjules med CSS.\n   * @default false\n   */\n  unmountOnClose?: boolean;\n};\nexport const AccordionItem = React.forwardRef<\n  HTMLDivElement,\n  AccordionItemProps\n>(\n  (\n    {\n      defaultOpen = false,\n      id: overrideId,\n      contentStyle,\n      disableAnimation,\n      unmountOnClose,\n      ...rest\n    },\n    ref,\n  ) => {\n    const randomId = `eds-accordion-item${useId()}`;\n    const id = overrideId || randomId;\n    const { isOpen, toggle } = useAccordion({ id, defaultOpen });\n\n    return (\n      <BaseExpandablePanel\n        ref={ref}\n        {...rest}\n        contentStyle={contentStyle}\n        disableAnimation={disableAnimation}\n        id={id}\n        onToggle={toggle}\n        open={isOpen}\n        unmountOnClose={unmountOnClose}\n      />\n    );\n  },\n);\n","import React, { CSSProperties, useId } from 'react';\nimport { BaseExpandablePanel } from './BaseExpandablePanel';\n\nexport type ExpandablePanelProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'title' | 'onClick'\n> & {\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  /** Prop for om innholdet er åpent. Brukes hvis du vil kontrollere ExpandablePanel, sammen med onToggle */\n  open?: boolean;\n  /** Funksjonen som styrer åpningen av ExpandablePanel */\n  onToggle?: () => void;\n  /** Styling som sendes til innholdet av ExpandablePanel */\n  contentStyle?: CSSProperties;\n  /** Deaktiver åpne/lukke-animasjonen */\n  disableAnimation?: boolean;\n  /** Avmonter innholdet når det lukkes. Når false (standard), holdes innholdet montert og skjules med CSS.\n   * @default false\n   */\n  unmountOnClose?: boolean;\n};\nexport const ExpandablePanel = React.forwardRef<\n  HTMLDivElement,\n  ExpandablePanelProps\n>(\n  (\n    {\n      defaultOpen = false,\n      open: controlledOpen,\n      onToggle,\n      contentStyle,\n      disableAnimation,\n      unmountOnClose,\n      id: overrideId,\n      ...rest\n    },\n    ref,\n  ) => {\n    const randomId = `eds-expandable${useId()}`;\n    const id = overrideId || randomId;\n\n    const [internalOpen, setInternalOpen] =\n      React.useState<boolean>(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const isOpen = isControlled ? controlledOpen : internalOpen;\n\n    const handleToggle = () => {\n      if (!isControlled) {\n        setInternalOpen(prev => !prev);\n      }\n      onToggle?.();\n    };\n\n    return (\n      <BaseExpandablePanel\n        ref={ref}\n        id={id}\n        open={isOpen}\n        onToggle={handleToggle}\n        contentStyle={contentStyle}\n        disableAnimation={disableAnimation}\n        unmountOnClose={unmountOnClose}\n        {...rest}\n      />\n    );\n  },\n);\n","import React from 'react';\nimport { Heading5 } from '@entur/typography';\nimport { ExpandArrow } from './ExpandArrow';\n\nexport type ExpandableTextButtonProps = {\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.forwardRef<\n  HTMLButtonElement,\n  ExpandableTextButtonProps\n>(({ children, open, onToggle, as: Component = Heading5, ...rest }, ref) => {\n  return (\n    <button\n      ref={ref}\n      className=\"eds-expandable-text__trigger\"\n      aria-expanded={open}\n      type=\"button\"\n      onClick={onToggle}\n      {...rest}\n    >\n      <Component>{children}</Component>\n      <ExpandArrow open={open} className=\"eds-expandable-text__arrow\" />\n    </button>\n  );\n});\n","import React, { CSSProperties, useId } from 'react';\nimport classNames from 'classnames';\nimport { ExpandableTextButton } from './ExpandableTextButton';\nimport { BaseExpand } from './BaseExpand';\nimport {\n  Heading2,\n  Heading3,\n  Heading4,\n  Heading5,\n  Paragraph,\n  SubParagraph,\n} from '@entur/typography';\n\nimport './ExpandableText.scss';\n\nexport type ExpandableTextProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'title' | 'onToggle'\n> & {\n  /** Teksten som skal \"vises\" */\n  title: React.ReactNode;\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?:\n    | 'Heading2'\n    | 'Heading3'\n    | 'Heading4'\n    | 'Heading5'\n    | 'Paragraph'\n    | 'SubParagraph';\n  /** Deaktiver åpne/lukke-animasjonen */\n  disableAnimation?: boolean;\n  /** Avmonter innholdet når det lukkes. Når false (standard), holdes innholdet montert og skjules med CSS.\n   * @default false\n   */\n  unmountOnClose?: boolean;\n};\n\nexport const ExpandableText = React.forwardRef<\n  HTMLDivElement,\n  ExpandableTextProps\n>(\n  (\n    {\n      title,\n      children,\n      defaultOpen = false,\n      open: controlledOpen,\n      onToggle,\n      contentStyle,\n      titleElement = 'Heading5',\n      disableAnimation,\n      unmountOnClose = false,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const randomId = `eds-expandable-text${useId()}`;\n    const [internalOpen, setInternalOpen] =\n      React.useState<boolean>(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const isOpen = isControlled ? controlledOpen : internalOpen;\n\n    const handleToggle = () => {\n      if (!isControlled) {\n        setInternalOpen(prev => !prev);\n      }\n      onToggle?.();\n    };\n\n    const Element: React.ElementType = React.useMemo(\n      () => GetTypographyComponent(titleElement),\n      [titleElement],\n    );\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('eds-expandable-text', className, {\n          'eds-expandable-text--disable-animation': disableAnimation,\n        })}\n        {...rest}\n      >\n        <ExpandableTextButton\n          open={isOpen}\n          onToggle={handleToggle}\n          aria-controls={isOpen || !unmountOnClose ? randomId : undefined}\n          as={Element}\n        >\n          {title}\n        </ExpandableTextButton>\n        <BaseExpand\n          className=\"eds-expandable-text__content\"\n          id={randomId}\n          open={isOpen}\n          style={contentStyle}\n          unmountOnClose={unmountOnClose}\n        >\n          {children}\n        </BaseExpand>\n      </div>\n    );\n  },\n);\n\nfunction GetTypographyComponent(\n  element: NonNullable<ExpandableTextProps['titleElement']>,\n) {\n  switch (element) {\n    case 'Heading5':\n      return Heading5;\n    case 'Heading4':\n      return Heading4;\n    case 'Heading3':\n      return Heading3;\n    case 'Heading2':\n      return Heading2;\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":[],"mappings":"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"}