{"version":3,"file":"ExpandableTableRow.cjs","sources":["../../../../src/components/table/ExpandableTableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ExpandableTableRowController } from \"./ExpandableTableRowController.js\";\nimport { TableRow } from \"./TableRow.js\";\nimport type {\n    ExpandableTableRowControllerProps,\n    ExpandableTableRowProps,\n} from \"./types.js\";\n\nconst ExpandableTableRow = forwardRef<\n    HTMLTableRowElement,\n    ExpandableTableRowProps\n>((props, ref) => {\n    const {\n        className,\n        clickable,\n        children,\n        expandedChildren,\n        onToggle,\n        colSpan = 100,\n        isOpen: isOpenProp,\n        ...rest\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n    useEffect(() => {\n        if (typeof isOpenProp === \"undefined\") {\n            return;\n        }\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    const [animationRef] = useAnimatedHeight<HTMLFieldSetElement>(isOpen, {\n        timing: \"expressive\",\n    });\n\n    const toggleOpen = () => {\n        const newIsOpen = !isOpen;\n\n        if (onToggle) {\n            onToggle(newIsOpen);\n        }\n\n        setIsOpen(newIsOpen);\n    };\n\n    const tableRowClassName = clsx(\"jkl-table-row--expandable\", className, {\n        [\"jkl-table-row--expanded\"]: isOpen,\n        [\"jkl-expandable-table-row--clickable-external\"]: clickable,\n    });\n    const childWrapperClassName = clsx(\n        \"jkl-expandable-table-row__expanded-row\",\n        {\n            [\"jkl-expandable-table-row__expanded-row--expanded\"]: isOpen,\n        },\n    );\n\n    const tableRowId = useId(\"jkl-expandable-table-row\");\n    const expandableTableRowControllerId = useId(\n        \"jkl-expandable-table-row-controller\",\n    );\n\n    return (\n        <>\n            <TableRow\n                className={tableRowClassName}\n                clickable={\n                    clickable ?? {\n                        onClick: () => toggleOpen(),\n                    }\n                }\n                {...rest}\n                ref={ref}\n            >\n                {React.Children.map(children, (child) => {\n                    if (\n                        React.isValidElement<ExpandableTableRowControllerProps>(\n                            child,\n                        ) &&\n                        child.type === ExpandableTableRowController\n                    ) {\n                        return React.cloneElement<ExpandableTableRowControllerProps>(\n                            child,\n                            {\n                                isOpen,\n                                onClick: () => toggleOpen(),\n                                \"aria-controls\": tableRowId,\n                                id: expandableTableRowControllerId,\n                            },\n                        );\n                    }\n\n                    return child;\n                })}\n            </TableRow>\n            {/*\n                Use a table row with a single as wide as possible cell to contain content. This allows\n                using useAnimatedHeight to animate the row height.\n            */}\n            <tr aria-hidden={!isOpen}>\n                <td colSpan={colSpan}>\n                    <fieldset\n                        ref={animationRef}\n                        className={childWrapperClassName}\n                        id={tableRowId}\n                        aria-labelledby={expandableTableRowControllerId}\n                        hidden={!isOpen}\n                    >\n                        {expandedChildren}\n                    </fieldset>\n                </td>\n            </tr>\n        </>\n    );\n});\n\nExpandableTableRow.displayName = \"ExpandableTableRow\";\n\nexport { ExpandableTableRow };\n"],"names":["ExpandableTableRow","forwardRef","props","ref","className","clickable","children","expandedChildren","onToggle","colSpan","isOpen","isOpenProp","rest","setIsOpen","useState","useEffect","animationRef","useAnimatedHeight","timing","toggleOpen","newIsOpen","tableRowClassName","clsx","childWrapperClassName","tableRowId","useId","expandableTableRowControllerId","jsxs","Fragment","jsx","TableRow","onClick","React","Children","map","child","isValidElement","type","ExpandableTableRowController","cloneElement","id","hidden","displayName"],"mappings":"sWAWMA,EAAqBC,EAAAA,WAGzB,CAACC,EAAOC,KACN,MACIC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,iBAAAA,EACAC,SAAAA,EACAC,QAAAA,EAAU,IACVC,OAAQC,KACLC,GACHV,GAEGQ,EAAQG,GAAaC,EAAAA,SAASH,IAAc,GACnDI,EAAAA,UAAU,YACKJ,EAAe,KAG1BE,EAAUF,IACX,CAACA,IAEJ,MAAOK,GAAgBC,EAAAA,kBAAuCP,EAAQ,CAClEQ,OAAQ,eAGNC,EAAa,KACf,MAAMC,GAAaV,EAEfF,GACAA,EAASY,GAGbP,EAAUO,IAGRC,EAAoBC,EAAAA,KAAK,4BAA6BlB,EAAW,CAClE,0BAA4BM,EAC5B,+CAAiDL,IAEhDkB,EAAwBD,EAAAA,KAC1B,yCACA,CACK,mDAAqDZ,IAIxDc,EAAaC,EAAAA,MAAM,4BACnBC,EAAiCD,EAAAA,MACnC,uCAGJ,OACIE,EAAAA,KAAAC,WAAA,CACItB,SAAA,CAAAuB,EAAAA,IAACC,EAAAA,SAAA,CACG1B,UAAWiB,EACXhB,UACIA,GAAa,CACT0B,QAAS,IAAMZ,QAGnBP,EACJT,IAAAA,EAECG,SAAA0B,EAAMC,SAASC,IAAI5B,EAAW6B,GAEvBH,EAAMI,eACFD,IAEJA,EAAME,OAASC,+BAERN,EAAMO,aACTJ,EACA,CACIzB,OAAAA,EACAqB,QAAS,IAAMZ,IACf,gBAAiBK,EACjBgB,GAAId,IAKTS,WAOd,KAAA,CAAG,eAAczB,EACdJ,SAAAuB,EAAAA,IAAC,MAAGpB,QAAAA,EACAH,SAAAuB,EAAAA,IAAC,WAAA,CACG1B,IAAKa,EACLZ,UAAWmB,EACXiB,GAAIhB,EACJ,kBAAiBE,EACjBe,QAAS/B,EAERJ,SAAAC,aAQzBP,EAAmB0C,YAAc"}