@fremtind/jokul 0.35.1 → 0.36.1

package/build/cjs/components/expander/ExpandSection.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),n=require("../../hooks/useAnimatedDetails/useAnimatedDetails.cjs"),a=require("./Expander.cjs");exports.ExpandSection=({children:i,className:r,expandButtonProps:d,isExpanded:c=!1,density:l,onClick:o,title:p,useAnimatedHeightOptions:x,...u})=>{const[m,j]=t.useState(c);t.useEffect((()=>{j(c)}),[c]);const{detailsRef:f,summaryRef:k,contentRef:h,onSummaryClick:y}=n.useAnimatedDetails({onOpenChange:(e,s)=>{j(e),o&&o(s,e)},isExpanded:c});return e.jsxs("details",{"data-testid":"jkl-expand-section",className:s.clsx("jkl-expand-section",r),...u,ref:f,children:[e.jsx(a.Expander,{as:"summary",...d,density:l,isExpanded:m,onClick:y,ref:k,children:p}),e.jsx("div",{"data-testid":"jkl-expand-section__content-wrapper",className:"jkl-expand-section__content-wrapper",ref:h,children:e.jsx("div",{className:"jkl-expand-section__content",children:i})})]})};
-//# sourceMappingURL=ExpandSection.cjs.map

package/build/cjs/components/expander/ExpandSection.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandSection.cjs","sources":["../../../../src/components/expander/ExpandSection.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { UseAnimatedHeightOptions } from \"../../hooks/useAnimatedHeight/types.js\";\nimport { Expander, ExpanderProps } from \"./Expander.js\";\n\nexport interface ExpandSectionProps {\n    /**\n     * Innholdet som skal kunne ekspanderes og skjules.\n     * Om du ikke trenger at komponenten tar seg av visning og skjuling av\n     * innholdet skal du bruke `ExpandButton` direkte. Det sparer deg for\n     * å laste inn unødvendige avhengigheter.\n     */\n    children: ReactNode;\n    title: string;\n    className?: string;\n    density?: Density;\n    onClick?: (e: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;\n    expandButtonProps?: Omit<\n        ExpanderProps,\n        \"id\" | \"isExpanded\" | \"onClick\" | \"hideLabel\"\n    >;\n    useAnimatedHeightOptions?: UseAnimatedHeightOptions;\n    /** Om du ønsker å styre komponenten utenfra */\n    isExpanded?: boolean;\n}\n\nexport const ExpandSection = ({\n    children,\n    className,\n    expandButtonProps,\n    isExpanded = false,\n    density,\n    onClick,\n    title,\n    useAnimatedHeightOptions,\n    ...rest\n}: ExpandSectionProps): JSX.Element => {\n    const [expanded, setIsExpanded] = useState(isExpanded);\n\n    useEffect(() => {\n        setIsExpanded(isExpanded);\n    }, [isExpanded]);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } =\n        useAnimatedDetails({\n            onOpenChange: (open, e) => {\n                setIsExpanded(open);\n                if (onClick) {\n                    onClick(e, open);\n                }\n            },\n            isExpanded,\n        });\n\n    return (\n        <details\n            data-testid={\"jkl-expand-section\"}\n            className={clsx(\"jkl-expand-section\", className)}\n            {...rest}\n            ref={detailsRef}\n        >\n            <Expander\n                as={\"summary\"}\n                {...expandButtonProps}\n                density={density}\n                isExpanded={expanded}\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n            </Expander>\n            <div\n                data-testid=\"jkl-expand-section__content-wrapper\"\n                className=\"jkl-expand-section__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-expand-section__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["children","className","expandButtonProps","isExpanded","density","onClick","title","useAnimatedHeightOptions","rest","expanded","setIsExpanded","useState","useEffect","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","jsxs","clsx","ref","jsx","Expander","as"],"mappings":"qSA4B6B,EACzBA,SAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,yBAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAiBC,WAASR,GAE3CS,EAAAA,WAAU,KACNF,EAAcP,EAAU,GACzB,CAACA,IAEJ,MAAQU,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GACxCC,EAAAA,mBAAmB,CACfC,aAAc,CAACC,EAAMC,KACjBV,EAAcS,GACVd,GACAA,EAAQe,EAAGD,EAAI,EAGvBhB,WAAAA,IAIJ,OAAAkB,EAAAA,KAAC,UAAA,CACG,cAAa,qBACbpB,UAAWqB,EAAAA,KAAK,qBAAsBrB,MAClCO,EACJe,IAAKV,EAELb,SAAA,CAAAwB,EAAAA,IAACC,EAAAA,SAAA,CACGC,GAAI,aACAxB,EACJE,QAAAA,EACAD,WAAYM,EACZJ,QAASW,EACTO,IAAKT,EAEJd,SAAAM,IAELkB,EAAAA,IAAC,MAAA,CACG,cAAY,sCACZvB,UAAU,sCACVsB,IAAKR,EAELf,SAACwB,EAAAA,IAAA,MAAA,CAAIvB,UAAU,8BAA+BD,SAAAA,QAClD"}

package/build/es/components/expander/ExpandSection.js

@@ -1,2 +0,0 @@
-import{jsxs as e,jsx as s}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{useState as a,useEffect as n}from"react";import{useAnimatedDetails as i}from"../../hooks/useAnimatedDetails/useAnimatedDetails.js";import{Expander as d}from"./Expander.js";const r=({children:r,className:o,expandButtonProps:c,isExpanded:m=!1,density:p,onClick:l,title:x,useAnimatedHeightOptions:f,...u})=>{const[j,k]=a(m);n((()=>{k(m)}),[m]);const{detailsRef:h,summaryRef:E,contentRef:_,onSummaryClick:y}=i({onOpenChange:(e,s)=>{k(e),l&&l(s,e)},isExpanded:m});return e("details",{"data-testid":"jkl-expand-section",className:t("jkl-expand-section",o),...u,ref:h,children:[s(d,{as:"summary",...c,density:p,isExpanded:j,onClick:y,ref:E,children:x}),s("div",{"data-testid":"jkl-expand-section__content-wrapper",className:"jkl-expand-section__content-wrapper",ref:_,children:s("div",{className:"jkl-expand-section__content",children:r})})]})};export{r as ExpandSection};
-//# sourceMappingURL=ExpandSection.js.map

package/build/es/components/expander/ExpandSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ExpandSection.js","sources":["../../../../src/components/expander/ExpandSection.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ReactNode, useEffect, useState } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useAnimatedDetails } from \"../../hooks/useAnimatedDetails/useAnimatedDetails.js\";\nimport { UseAnimatedHeightOptions } from \"../../hooks/useAnimatedHeight/types.js\";\nimport { Expander, ExpanderProps } from \"./Expander.js\";\n\nexport interface ExpandSectionProps {\n    /**\n     * Innholdet som skal kunne ekspanderes og skjules.\n     * Om du ikke trenger at komponenten tar seg av visning og skjuling av\n     * innholdet skal du bruke `ExpandButton` direkte. Det sparer deg for\n     * å laste inn unødvendige avhengigheter.\n     */\n    children: ReactNode;\n    title: string;\n    className?: string;\n    density?: Density;\n    onClick?: (e: React.MouseEvent<HTMLElement>, isExpanded: boolean) => void;\n    expandButtonProps?: Omit<\n        ExpanderProps,\n        \"id\" | \"isExpanded\" | \"onClick\" | \"hideLabel\"\n    >;\n    useAnimatedHeightOptions?: UseAnimatedHeightOptions;\n    /** Om du ønsker å styre komponenten utenfra */\n    isExpanded?: boolean;\n}\n\nexport const ExpandSection = ({\n    children,\n    className,\n    expandButtonProps,\n    isExpanded = false,\n    density,\n    onClick,\n    title,\n    useAnimatedHeightOptions,\n    ...rest\n}: ExpandSectionProps): JSX.Element => {\n    const [expanded, setIsExpanded] = useState(isExpanded);\n\n    useEffect(() => {\n        setIsExpanded(isExpanded);\n    }, [isExpanded]);\n\n    const { detailsRef, summaryRef, contentRef, onSummaryClick } =\n        useAnimatedDetails({\n            onOpenChange: (open, e) => {\n                setIsExpanded(open);\n                if (onClick) {\n                    onClick(e, open);\n                }\n            },\n            isExpanded,\n        });\n\n    return (\n        <details\n            data-testid={\"jkl-expand-section\"}\n            className={clsx(\"jkl-expand-section\", className)}\n            {...rest}\n            ref={detailsRef}\n        >\n            <Expander\n                as={\"summary\"}\n                {...expandButtonProps}\n                density={density}\n                isExpanded={expanded}\n                onClick={onSummaryClick}\n                ref={summaryRef}\n            >\n                {title}\n            </Expander>\n            <div\n                data-testid=\"jkl-expand-section__content-wrapper\"\n                className=\"jkl-expand-section__content-wrapper\"\n                ref={contentRef}\n            >\n                <div className=\"jkl-expand-section__content\">{children}</div>\n            </div>\n        </details>\n    );\n};\n"],"names":["ExpandSection","children","className","expandButtonProps","isExpanded","density","onClick","title","useAnimatedHeightOptions","rest","expanded","setIsExpanded","useState","useEffect","detailsRef","summaryRef","contentRef","onSummaryClick","useAnimatedDetails","onOpenChange","open","e","jsxs","clsx","ref","jsx","Expander","as"],"mappings":"mRA4BO,MAAMA,EAAgB,EACzBC,SAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,yBAAAA,KACGC,MAEH,MAAOC,EAAUC,GAAiBC,EAASR,GAE3CS,GAAU,KACNF,EAAcP,EAAU,GACzB,CAACA,IAEE,MAAEU,WAAAA,EAAYC,WAAAA,EAAYC,WAAAA,EAAYC,eAAAA,GACxCC,EAAmB,CACfC,aAAc,CAACC,EAAMC,KACjBV,EAAcS,GACVd,GACAA,EAAQe,EAAGD,EAAI,EAGvBhB,WAAAA,IAIJ,OAAAkB,EAAC,UAAA,CACG,cAAa,qBACbpB,UAAWqB,EAAK,qBAAsBrB,MAClCO,EACJe,IAAKV,EAELb,SAAA,CAAAwB,EAACC,EAAA,CACGC,GAAI,aACAxB,EACJE,QAAAA,EACAD,WAAYM,EACZJ,QAASW,EACTO,IAAKT,EAEJd,SAAAM,IAELkB,EAAC,MAAA,CACG,cAAY,sCACZvB,UAAU,sCACVsB,IAAKR,EAELf,SAACwB,EAAA,MAAA,CAAIvB,UAAU,8BAA+BD,SAAAA,QAClD"}