@coveord/plasma-mantine 52.13.1 → 52.14.0

package/dist/cjs/components/copyToClipboard/CopyToClipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAezE,CAAC"}
+{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAgBzE,CAAC"}

package/dist/cjs/components/copyToClipboard/CopyToClipboard.js

@@ -57,6 +57,7 @@ var CopyToClipboard = function(_param) {
         },
         value: others.value,
         readOnly: true,
+        autoComplete: "off",
         rightSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({}, others))
     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(CopyToClipboardButton, _object_spread._({}, others));
 };

package/dist/cjs/components/copyToClipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n    input: {\n        color: theme.colors.gray[7],\n    },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    color={copied ? 'success' : 'gray'}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n    const {classes} = useStyles();\n\n    return withLabel ? (\n        <TextInput\n            classNames={{\n                input: classes.input,\n            }}\n            value={others.value}\n            readOnly\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n};\n"],"names":["CopyToClipboard","useStyles","createStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","classes","TextInput","classNames","readOnly","rightSection"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;gCA5C6B;oBAC6B;AAmBvE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;yBACrG,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW;0BAChC,cAAA,qBAACI,gBAAU;oBACPZ,OAAOQ,SAAS,YAAY;oBAC5BK,SAAS;4BAELR;wBADAI;yBACAJ,UAAAA,oBAAAA,8BAAAA;oBACJ;8BAECG,uBAAS,qBAACM,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;;;;;;;AAO7E,IAAMpB,kBAAiE;QAAEsB,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWvB,YAAXuB;IAEP,OAAOF,0BACH,qBAACG,eAAS;QACNC,YAAY;YACRtB,OAAOoB,QAAQpB,KAAK;QACxB;QACAK,OAAOc,OAAOd,KAAK;QACnBkB,QAAQ;QACRC,4BAAc,qBAACpB,4CAA0Be;uBAG7C,qBAACf,4CAA0Be;AAEnC"}
+{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n    input: {\n        color: theme.colors.gray[7],\n    },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    color={copied ? 'success' : 'gray'}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n    const {classes} = useStyles();\n\n    return withLabel ? (\n        <TextInput\n            classNames={{\n                input: classes.input,\n            }}\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n};\n"],"names":["CopyToClipboard","useStyles","createStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","classes","TextInput","classNames","readOnly","autoComplete","rightSection"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;gCA5C6B;oBAC6B;AAmBvE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;yBACrG,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW;0BAChC,cAAA,qBAACI,gBAAU;oBACPZ,OAAOQ,SAAS,YAAY;oBAC5BK,SAAS;4BAELR;wBADAI;yBACAJ,UAAAA,oBAAAA,8BAAAA;oBACJ;8BAECG,uBAAS,qBAACM,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;;;;;;;AAO7E,IAAMpB,kBAAiE;QAAEsB,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWvB,YAAXuB;IAEP,OAAOF,0BACH,qBAACG,eAAS;QACNC,YAAY;YACRtB,OAAOoB,QAAQpB,KAAK;QACxB;QACAK,OAAOc,OAAOd,KAAK;QACnBkB,QAAQ;QACRC,cAAa;QACbC,4BAAc,qBAACrB,4CAA0Be;uBAG7C,qBAACf,4CAA0Be;AAEnC"}

package/dist/cjs/components/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAA8C,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAW,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,WAAW,EAAE,OAAO,iBAAiB,CAAC;IACtC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,EAAE,UAmCpB,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAS/D,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAA0D,CAAC;AAEvH,MAAM,WAAW,oBAAoB;IACjC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAM5D,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAA8C,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAW,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,WAAW,EAAE,OAAO,iBAAiB,CAAC;IACtC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,EAAE,UAoCpB,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAS/D,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAA0D,CAAC;AAEvH,MAAM,WAAW,oBAAoB;IACjC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAM5D,CAAC"}

package/dist/cjs/components/header/Header.js

@@ -40,7 +40,8 @@ var Header = function(_param) {
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, _object_spread_props._(_object_spread._({
                 position: "apart",
                 p: variant === "page" ? "xl" : undefined,
-                pb: variant === "page" ? "lg" : undefined
+                pb: variant === "page" ? "lg" : undefined,
+                noWrap: true
             }, others), {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {

package/dist/cjs/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {Children, FunctionComponent, ReactElement, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nexport const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <>\n            <Group\n                position=\"apart\"\n                p={variant === 'page' ? 'xl' : undefined}\n                pb={variant === 'page' ? 'lg' : undefined}\n                {...others}\n            >\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Title\n                        order={variant === 'page' ? 1 : 3}\n                        color={variant === 'page' ? 'gray.5' : undefined}\n                        sx={{wordBreak: 'break-word'}}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text size={variant === 'page' ? 'md' : 'sm'} color=\"gray.6\">\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider size=\"xs\" /> : null}\n        </>\n    );\n};\n\nconst HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (\n    <Breadcrumbs\n        styles={(theme) => ({\n            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},\n            separator: {color: theme.colors.gray[5]},\n        })}\n    >\n        {children}\n    </Breadcrumbs>\n);\n\nconst HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing=\"sm\">{children}</Group>;\n\nexport interface HeaderDocAnchorProps {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n}\n\nconst HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (\n    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"right\">\n        <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\" style={{verticalAlign: 'middle'}}>\n            <QuestionSize16Px height={16} />\n        </Anchor>\n    </Tooltip>\n);\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Header","description","borderBottom","children","variant","others","convertedChildren","Children","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","Group","position","p","undefined","pb","Stack","spacing","Title","order","color","sx","wordBreak","Text","size","Divider","Breadcrumbs","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","separator","colors","gray","href","docLink","label","docLinkTooltipLabel","Tooltip","disabled","Anchor","inline","target","ml","style","verticalAlign","QuestionSize16Px","height","Actions","DocAnchor"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;gCAhCkB;oBAC8D;qBAC1B;AA8B5D,IAAMA,SAAqB;QAAEC,qBAAAA,aAAaC,sBAAAA,cAAcC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA1DJ;QAAaC;QAAcC;QAAUC;;IACrE,IAAME,oBAAoBC,eAAQ,CAACC,OAAO,CAACL;IAC3C,IAAMM,cAAcH,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC;;IACrE,IAAMC,UAAUR,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG;;IACjE,IAAMC,YAAYV,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK;;IACnE,IAAMC,gBAAgBZ,kBAAkBa,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,qBAAqBF,MAAMC,IAAI,KAAKG,iBAAiBJ,MAAMC,IAAI,KAAKK;;IAElG,qBACI;;0BACI,sBAACG,WAAK;gBACFC,UAAS;gBACTC,GAAGlB,YAAY,SAAS,OAAOmB;gBAC/BC,IAAIpB,YAAY,SAAS,OAAOmB;eAC5BlB;;kCAEJ,sBAACoB,WAAK;wBAACC,SAAS;;4BACXjB;0CACD,sBAACkB,WAAK;gCACFC,OAAOxB,YAAY,SAAS,IAAI;gCAChCyB,OAAOzB,YAAY,SAAS,WAAWmB;gCACvCO,IAAI;oCAACC,WAAW;gCAAY;;oCAE3Bb;oCACAF;;;0CAEL,qBAACgB,UAAI;gCAACC,MAAM7B,YAAY,SAAS,OAAO;gCAAMyB,OAAM;0CAC/C5B;;;;oBAGRa;;;YAEJZ,6BAAe,qBAACgC,aAAO;gBAACD,MAAK;iBAAU;;;AAGpD;AAEA,IAAMpB,oBAA8D;QAAEV,iBAAAA;yBAClE,qBAACgC,iBAAW;QACRC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACd,OAAOQ,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAEC1C;;;AAIT,IAAMY,gBAA0D;QAAEZ,iBAAAA;yBAAc,qBAACiB,WAAK;QAACM,SAAQ;kBAAMvB;;;AAcrG,IAAMc,kBAA2D;QAAE6B,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,qBAACE,aAAO;QAACF,OAAOC;QAAqBE,UAAU,CAACF;QAAqB5B,UAAS;kBAC1E,cAAA,qBAAC+B,YAAM;YAACC,MAAM;YAACP,MAAMC;YAASO,QAAO;YAASC,IAAG;YAAKC,OAAO;gBAACC,eAAe;YAAQ;sBACjF,cAAA,qBAACC,kCAAgB;gBAACC,QAAQ;;;;;AAKtC3D,OAAOmC,WAAW,GAAGtB;AACrBb,OAAO4D,OAAO,GAAG7C;AACjBf,OAAO6D,SAAS,GAAG5C"}
+{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {Children, FunctionComponent, ReactElement, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nexport const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <>\n            <Group\n                position=\"apart\"\n                p={variant === 'page' ? 'xl' : undefined}\n                pb={variant === 'page' ? 'lg' : undefined}\n                noWrap\n                {...others}\n            >\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Title\n                        order={variant === 'page' ? 1 : 3}\n                        color={variant === 'page' ? 'gray.5' : undefined}\n                        sx={{wordBreak: 'break-word'}}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text size={variant === 'page' ? 'md' : 'sm'} color=\"gray.6\">\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider size=\"xs\" /> : null}\n        </>\n    );\n};\n\nconst HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (\n    <Breadcrumbs\n        styles={(theme) => ({\n            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},\n            separator: {color: theme.colors.gray[5]},\n        })}\n    >\n        {children}\n    </Breadcrumbs>\n);\n\nconst HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing=\"sm\">{children}</Group>;\n\nexport interface HeaderDocAnchorProps {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n}\n\nconst HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (\n    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"right\">\n        <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\" style={{verticalAlign: 'middle'}}>\n            <QuestionSize16Px height={16} />\n        </Anchor>\n    </Tooltip>\n);\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["Header","description","borderBottom","children","variant","others","convertedChildren","Children","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","Group","position","p","undefined","pb","noWrap","Stack","spacing","Title","order","color","sx","wordBreak","Text","size","Divider","Breadcrumbs","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","separator","colors","gray","href","docLink","label","docLinkTooltipLabel","Tooltip","disabled","Anchor","inline","target","ml","style","verticalAlign","QuestionSize16Px","height","Actions","DocAnchor"],"mappings":";;;;+BAgCaA;;;eAAAA;;;;;;;gCAhCkB;oBAC8D;qBAC1B;AA8B5D,IAAMA,SAAqB;QAAEC,qBAAAA,aAAaC,sBAAAA,cAAcC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA1DJ;QAAaC;QAAcC;QAAUC;;IACrE,IAAME,oBAAoBC,eAAQ,CAACC,OAAO,CAACL;IAC3C,IAAMM,cAAcH,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC;;IACrE,IAAMC,UAAUR,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG;;IACjE,IAAMC,YAAYV,kBAAkBI,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK;;IACnE,IAAMC,gBAAgBZ,kBAAkBa,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,qBAAqBF,MAAMC,IAAI,KAAKG,iBAAiBJ,MAAMC,IAAI,KAAKK;;IAElG,qBACI;;0BACI,sBAACG,WAAK;gBACFC,UAAS;gBACTC,GAAGlB,YAAY,SAAS,OAAOmB;gBAC/BC,IAAIpB,YAAY,SAAS,OAAOmB;gBAChCE,MAAM;eACFpB;;kCAEJ,sBAACqB,WAAK;wBAACC,SAAS;;4BACXlB;0CACD,sBAACmB,WAAK;gCACFC,OAAOzB,YAAY,SAAS,IAAI;gCAChC0B,OAAO1B,YAAY,SAAS,WAAWmB;gCACvCQ,IAAI;oCAACC,WAAW;gCAAY;;oCAE3Bd;oCACAF;;;0CAEL,qBAACiB,UAAI;gCAACC,MAAM9B,YAAY,SAAS,OAAO;gCAAM0B,OAAM;0CAC/C7B;;;;oBAGRa;;;YAEJZ,6BAAe,qBAACiC,aAAO;gBAACD,MAAK;iBAAU;;;AAGpD;AAEA,IAAMrB,oBAA8D;QAAEV,iBAAAA;yBAClE,qBAACiC,iBAAW;QACRC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACd,OAAOQ,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAEC3C;;;AAIT,IAAMY,gBAA0D;QAAEZ,iBAAAA;yBAAc,qBAACiB,WAAK;QAACO,SAAQ;kBAAMxB;;;AAcrG,IAAMc,kBAA2D;QAAE8B,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,qBAACE,aAAO;QAACF,OAAOC;QAAqBE,UAAU,CAACF;QAAqB7B,UAAS;kBAC1E,cAAA,qBAACgC,YAAM;YAACC,MAAM;YAACP,MAAMC;YAASO,QAAO;YAASC,IAAG;YAAKC,OAAO;gBAACC,eAAe;YAAQ;sBACjF,cAAA,qBAACC,kCAAgB;gBAACC,QAAQ;;;;;AAKtC5D,OAAOoC,WAAW,GAAGvB;AACrBb,OAAO6D,OAAO,GAAG9C;AACjBf,OAAO8D,SAAS,GAAG7C"}

package/dist/cjs/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-ogmezo"
+    class="mantine-Group-root mantine-1arn2xu"
   >
     <div
       class="mantine-Stack-root mantine-1178y6y"

package/dist/cjs/components/inline-confirm/InlineConfirm.d.ts

@@ -2,7 +2,7 @@ import { FunctionComponent, PropsWithChildren } from 'react';
 import { InlineConfirmButton } from './InlineConfirmButton';
 import { InlineConfirmMenuItem } from './InlineConfirmMenuItem';
 import { InlineConfirmPrompt } from './InlineConfirmPrompt';
-type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
+type InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {
     Prompt: typeof InlineConfirmPrompt;
     Button: typeof InlineConfirmButton;
     MenuItem: typeof InlineConfirmMenuItem;

package/dist/cjs/components/inline-confirm/InlineConfirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,iBAAiB,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,GAAG;IAC5D,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAc3B,CAAC"}
+{"version":3,"file":"InlineConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,iBAAiB,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAG;IACrE,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAc3B,CAAC"}

package/dist/cjs/components/inline-confirm/InlineConfirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren> & {\n    Prompt: typeof InlineConfirmPrompt;\n    Button: typeof InlineConfirmButton;\n    MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n    const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const prompt = convertedChildren.find(\n        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,\n    );\n    const clearConfirm = () => setConfirmingId(null);\n\n    return (\n        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n            {prompt ?? children}\n        </InlineConfirmContext.Provider>\n    );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["InlineConfirm","children","useState","confirmingId","setConfirmingId","convertedChildren","Children","toArray","prompt","find","child","type","InlineConfirmPrompt","props","id","clearConfirm","InlineConfirmContext","Provider","value","Prompt","Button","InlineConfirmButton","MenuItem","InlineConfirmMenuItem"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;qBAbwE;mCAEnD;oCACC;qCACC;mCACF;AAQ3B,IAAMA,gBAAmC;QAAEC,iBAAAA;IAC9C,IAAwCC,+BAAAA,IAAAA,eAAQ,EAAgB,WAAzDC,eAAiCD,cAAnBE,kBAAmBF;IAExC,IAAMG,oBAAoBC,eAAQ,CAACC,OAAO,CAACN;IAC3C,IAAMO,SAASH,kBAAkBI,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,wCAAmB,IAAIF,MAAMG,KAAK,CAACC,EAAE,KAAKX;;IAExE,IAAMY,eAAe;eAAMX,gBAAgB;;IAE3C,qBACI,qBAACY,0CAAoB,CAACC,QAAQ;QAACC,OAAO;YAACf,cAAAA;YAAcC,iBAAAA;YAAiBW,cAAAA;QAAY;kBAC7EP,mBAAAA,oBAAAA,SAAUP;;AAGvB;AAEAD,cAAcmB,MAAM,GAAGP,wCAAmB;AAC1CZ,cAAcoB,MAAM,GAAGC,wCAAmB;AAC1CrB,cAAcsB,QAAQ,GAAGC,4CAAqB"}
+{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {\n    Prompt: typeof InlineConfirmPrompt;\n    Button: typeof InlineConfirmButton;\n    MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n    const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const prompt = convertedChildren.find(\n        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,\n    );\n    const clearConfirm = () => setConfirmingId(null);\n\n    return (\n        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n            {prompt ?? children}\n        </InlineConfirmContext.Provider>\n    );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["InlineConfirm","children","useState","confirmingId","setConfirmingId","convertedChildren","Children","toArray","prompt","find","child","type","InlineConfirmPrompt","props","id","clearConfirm","InlineConfirmContext","Provider","value","Prompt","Button","InlineConfirmButton","MenuItem","InlineConfirmMenuItem"],"mappings":";;;;+BAaaA;;;eAAAA;;;;;qBAbwE;mCAEnD;oCACC;qCACC;mCACF;AAQ3B,IAAMA,gBAAmC;QAAEC,iBAAAA;IAC9C,IAAwCC,+BAAAA,IAAAA,eAAQ,EAAgB,WAAzDC,eAAiCD,cAAnBE,kBAAmBF;IAExC,IAAMG,oBAAoBC,eAAQ,CAACC,OAAO,CAACN;IAC3C,IAAMO,SAASH,kBAAkBI,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKC,wCAAmB,IAAIF,MAAMG,KAAK,CAACC,EAAE,KAAKX;;IAExE,IAAMY,eAAe;eAAMX,gBAAgB;;IAE3C,qBACI,qBAACY,0CAAoB,CAACC,QAAQ;QAACC,OAAO;YAACf,cAAAA;YAAcC,iBAAAA;YAAiBW,cAAAA;QAAY;kBAC7EP,mBAAAA,oBAAAA,SAAUP;;AAGvB;AAEAD,cAAcmB,MAAM,GAAGP,wCAAmB;AAC1CZ,cAAcoB,MAAM,GAAGC,wCAAmB;AAC1CrB,cAAcsB,QAAQ,GAAGC,4CAAqB"}

package/dist/cjs/components/table/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAQ,SAAS,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAK/E,QAAA,MAAM,SAAS;;;;;;;;CAQZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkD3D,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAQ,SAAS,EAA0B,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAMzF,QAAA,MAAM,SAAS;;;;;;;;CAQZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAsD3D,CAAC"}

package/dist/cjs/components/table/TableFilter.js

@@ -11,9 +11,12 @@ Object.defineProperty(exports, "TableFilter", {
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _jsxruntime = require("react/jsx-runtime");
 var _plasmareacticons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
+var _react = require("react");
+var _hooks = require("@mantine/hooks");
 var _Tablestyles = require("./Table.styles");
 var _TableContext = require("./TableContext");
 var useStyles = (0, _core.createStyles)(function(theme) {
@@ -41,23 +44,28 @@ var TableFilter = function(_param) {
         unstyled: unstyled
     }).classes;
     var _useTable = (0, _TableContext.useTable)(), state = _useTable.state, setState = _useTable.setState;
-    var changeFilterValue = function(value) {
+    var _useState = _sliced_to_array._((0, _react.useState)(state.globalFilter), 2), filter = _useState[0], setFilter = _useState[1];
+    var _useDebouncedValue = _sliced_to_array._((0, _hooks.useDebouncedValue)(filter, 300), 2), debounced = _useDebouncedValue[0], cancel = _useDebouncedValue[1];
+    (0, _hooks.useDidUpdate)(function() {
         setState(function(prevState) {
             return _object_spread_props._(_object_spread._({}, prevState), {
                 pagination: prevState.pagination ? {
                     pageIndex: 0,
                     pageSize: prevState.pagination.pageSize
                 } : prevState.pagination,
-                globalFilter: value
+                globalFilter: debounced
             });
         });
-    };
+        return cancel;
+    }, [
+        debounced
+    ]);
     var handleChange = function(event) {
         var value = event.currentTarget.value;
-        changeFilterValue(value);
+        setFilter(value);
     };
     var handleClear = function() {
-        changeFilterValue("");
+        setFilter("");
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, {
         span: "content",
@@ -67,17 +75,18 @@ var TableFilter = function(_param) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, _object_spread._({
             className: classes.wrapper,
             placeholder: placeholder,
+            autoComplete: "off",
             mb: "md",
-            rightSection: state.globalFilter ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
+            rightSection: filter ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ActionIcon, {
                 onClick: handleClear,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.CrossSize16Px, {
                     height: 16
                 })
             }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.SearchSize16Px, {
-                height: 14,
+                height: 16,
                 className: classes.empty
             }),
-            value: state.globalFilter,
+            value: filter,
             onChange: handleChange
         }, others))
     });

package/dist/cjs/components/table/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';\n\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const changeFilterValue = (value: string) => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        changeFilterValue(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        changeFilterValue('');\n    };\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n            <TextInput\n                className={classes.wrapper}\n                placeholder={placeholder}\n                mb=\"md\"\n                rightSection={\n                    state.globalFilter ? (\n                        <ActionIcon onClick={handleClear}>\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <SearchSize16Px height={14} className={classes.empty} />\n                    )\n                }\n                value={state.globalFilter}\n                onChange={handleChange}\n                {...others}\n            />\n        </Grid.Col>\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","root","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","changeFilterValue","value","prevState","pagination","pageIndex","pageSize","globalFilter","handleChange","event","currentTarget","handleClear","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","TextInput","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;;gCA3B+B;oBACqC;2BAG9C;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMV,cAAmD;oCAC5DW,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWf,UAAU,MAAM;QAACgB,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IAEd,IAAMC,oBAAoB,SAACC;QACvBF,SAAS,SAACG;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcL;;;IAEtB;IAEA,IAAMM,eAAqD,SAACC;QACxD,IAAM,AAACP,QAASO,MAAMC,aAAa,CAA5BR;QACPD,kBAAkBC;IACtB;IAEA,IAAMS,cAAoD;QACtDV,kBAAkB;IACtB;IAEA,qBACI,qBAACW,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,MAAM;QAAEC,IAAG;QAAKC,WAAWvB,QAAQZ,IAAI;kBACxF,cAAA,qBAACoC,eAAS;YACND,WAAWvB,QAAQX,OAAO;YAC1BM,aAAaA;YACb8B,IAAG;YACHC,cACIvB,MAAMQ,YAAY,iBACd,qBAACgB,gBAAU;gBAACC,SAASb;0BACjB,cAAA,qBAACc,+BAAa;oBAACC,QAAQ;;+BAG3B,qBAACC,gCAAc;gBAACD,QAAQ;gBAAIP,WAAWvB,QAAQT,KAAK;;YAG5De,OAAOH,MAAMQ,YAAY;YACzBqB,UAAUpB;WACNb;;AAIpB"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, DefaultProps, Grid, Selectors, TextInput, createStyles} from '@mantine/core';\nimport {ChangeEventHandler, FunctionComponent, MouseEventHandler, useState} from 'react';\n\nimport {useDebouncedValue, useDidUpdate} from '@mantine/hooks';\nimport {TableComponentsOrder} from './Table.styles';\nimport {useTable} from './TableContext';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n    const [filter, setFilter] = useState(state.globalFilter);\n    const [debounced, cancel] = useDebouncedValue(filter, 300);\n\n    useDidUpdate(() => {\n        setState((prevState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: debounced,\n        }));\n        return cancel;\n    }, [debounced]);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const {value} = event.currentTarget;\n        setFilter(value);\n    };\n\n    const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n        setFilter('');\n    };\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Filter} py=\"sm\" className={classes.root}>\n            <TextInput\n                className={classes.wrapper}\n                placeholder={placeholder}\n                autoComplete=\"off\"\n                mb=\"md\"\n                rightSection={\n                    filter ? (\n                        <ActionIcon onClick={handleClear}>\n                            <CrossSize16Px height={16} />\n                        </ActionIcon>\n                    ) : (\n                        <SearchSize16Px height={16} className={classes.empty} />\n                    )\n                }\n                value={filter}\n                onChange={handleChange}\n                {...others}\n            />\n        </Grid.Col>\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","root","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","classes","name","useTable","state","setState","useState","globalFilter","filter","setFilter","useDebouncedValue","debounced","cancel","useDidUpdate","prevState","pagination","pageIndex","pageSize","handleChange","event","value","currentTarget","handleClear","Grid","Col","span","order","TableComponentsOrder","Filter","py","className","TextInput","autoComplete","mb","rightSection","ActionIcon","onClick","CrossSize16Px","height","SearchSize16Px","onChange"],"mappings":";;;;+BA4BaA;;;eAAAA;;;;;;;;gCA5B+B;oBACqC;qBACA;qBAEnC;2BACX;4BACZ;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMV,cAAmD;oCAC5DW,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,AAACE,UAAWf,UAAU,MAAM;QAACgB,MAAM;QAAeL,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EE;IACP,IAA0BE,YAAAA,IAAAA,sBAAQ,KAA3BC,QAAmBD,UAAnBC,OAAOC,WAAYF,UAAZE;IACd,IAA4BC,+BAAAA,IAAAA,eAAQ,EAACF,MAAMG,YAAY,OAAhDC,SAAqBF,cAAbG,YAAaH;IAC5B,IAA4BI,wCAAAA,IAAAA,wBAAiB,EAACF,QAAQ,UAA/CG,YAAqBD,uBAAVE,SAAUF;IAE5BG,IAAAA,mBAAY,EAAC;QACTR,SAAS,SAACS;mBAAe,4CAClBA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BR,cAAcI;;;QAElB,OAAOC;IACX,GAAG;QAACD;KAAU;IAEd,IAAMO,eAAqD,SAACC;QACxD,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPX,UAAUW;IACd;IAEA,IAAME,cAAoD;QACtDb,UAAU;IACd;IAEA,qBACI,qBAACc,UAAI,CAACC,GAAG;QAACC,MAAK;QAAUC,OAAOC,iCAAoB,CAACC,MAAM;QAAEC,IAAG;QAAKC,WAAW7B,QAAQZ,IAAI;kBACxF,cAAA,qBAAC0C,eAAS;YACND,WAAW7B,QAAQX,OAAO;YAC1BM,aAAaA;YACboC,cAAa;YACbC,IAAG;YACHC,cACI1B,uBACI,qBAAC2B,gBAAU;gBAACC,SAASd;0BACjB,cAAA,qBAACe,+BAAa;oBAACC,QAAQ;;+BAG3B,qBAACC,gCAAc;gBAACD,QAAQ;gBAAIR,WAAW7B,QAAQT,KAAK;;YAG5D4B,OAAOZ;YACPgC,UAAUtB;WACNlB;;AAIpB"}

package/dist/cjs/components/table/layouts/RowLayout.js

@@ -65,7 +65,8 @@ var useStyles = (0, _core.createStyles)(function(theme, param) {
             },
             "&:hover": {
                 backgroundColor: rowBackgroundColor
-            }
+            },
+            overflowWrap: "anywhere"
         },
         cell: {
             verticalAlign: "middle",
@@ -156,8 +157,7 @@ var RowLayoutBody = function(param) {
                             style: {
                                 width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : "auto",
                                 minWidth: columnSizing.minSize,
-                                maxWidth: columnSizing.maxSize,
-                                overflowWrap: "break-word"
+                                maxWidth: columnSizing.maxSize
                             },
                             className: cx(classes.cell, _define_property._({}, classes.rowCollapsibleButtonCell, cell.column.id === _TableCollapsibleColumn.TableCollapsibleColumn.id)),
                             onClick: onCollapsibleCellClick,

package/dist/cjs/components/table/layouts/RowLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n    return {\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: '40px',\n            },\n\n            '& input[type=checkbox]': {\n                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n                pointerEvents: disableRowSelection ? 'none' : 'auto',\n                cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n                '& + svg': {\n                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n                },\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowUnselectable: {\n            '& input[type=checkbox]': {\n                backgroundColor: `${theme.colors.gray[2]}`,\n                borderColor: `${theme.colors.gray[3]}`,\n                pointerEvents: 'none',\n                cursor: 'not-allowed',\n\n                '&:checked + svg': {\n                    color: `${theme.colors.gray[5]}`,\n                },\n            },\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '& td:first-of-type': {\n                paddingLeft: '40px',\n            },\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n\n        cell: {\n            verticalAlign: 'middle',\n            // We must use height instead of minHeight here, otherwise it doesn't apply\n            height: '56px',\n            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n            borderBottom: border,\n        },\n\n        collapsible: {\n            backgroundColor: rowBackgroundColor,\n            borderBottom: border,\n        },\n    };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({\n    table,\n    doubleClickAction,\n    getExpandChildren,\n    loading,\n    keepSelection,\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const shouldKeepSelection = keepSelection && isSelected;\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const columnSizing = {\n                            ...defaultColumnSizing,\n                            size: cell.column.columnDef.size,\n                            minSize: cell.column.columnDef.minSize,\n                            maxSize: cell.column.columnDef.maxSize,\n                        };\n\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                style={{\n                                    width: columnSizing.size ?? 'auto',\n                                    minWidth: columnSizing.minSize,\n                                    maxWidth: columnSizing.maxSize,\n                                    overflowWrap: 'break-word',\n                                }}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","data-testid","getVisibleCells","columnSizing","defaultColumnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","overflowWrap","TableCollapsibleColumn","TableLoading","visible","flexRender","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles, rem} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment, type MouseEvent} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {TableSelectableColumn} from '../TableSelectableColumn';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n    disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];\n    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;\n    return {\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: '40px',\n            },\n\n            '& input[type=checkbox]': {\n                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n                pointerEvents: disableRowSelection ? 'none' : 'auto',\n                cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n                '& + svg': {\n                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n                },\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowUnselectable: {\n            '& input[type=checkbox]': {\n                backgroundColor: `${theme.colors.gray[2]}`,\n                borderColor: `${theme.colors.gray[3]}`,\n                pointerEvents: 'none',\n                cursor: 'not-allowed',\n\n                '&:checked + svg': {\n                    color: `${theme.colors.gray[5]}`,\n                },\n            },\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '& td:first-of-type': {\n                paddingLeft: '40px',\n            },\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n            overflowWrap: 'anywhere',\n        },\n\n        cell: {\n            verticalAlign: 'middle',\n            // We must use height instead of minHeight here, otherwise it doesn't apply\n            height: '56px',\n            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,\n            borderBottom: border,\n        },\n\n        collapsible: {\n            backgroundColor: rowBackgroundColor,\n            borderBottom: border,\n        },\n    };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n    const headers = table.getHeaderGroups().map((headerGroup) => (\n        <tr key={headerGroup.id} className={classes.headerColumns}>\n            {headerGroup.headers.map((columnHeader) => (\n                <Th key={columnHeader.id} header={columnHeader} />\n            ))}\n        </tr>\n    ));\n    return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({\n    table,\n    doubleClickAction,\n    getExpandChildren,\n    loading,\n    keepSelection,\n}: TableLayoutProps<T>) => {\n    const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n    const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n    const toggleCollapsible = (el: HTMLTableRowElement) => {\n        const cell = el.children[el.children.length - 1] as HTMLTableCellElement;\n        cell.querySelector('button').click();\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n        const shouldKeepSelection = keepSelection && isSelected;\n        const onClick = (event: MouseEvent<HTMLTableRowElement>) => {\n            if (rowChildren) {\n                toggleCollapsible(event.currentTarget);\n            }\n            if (!disableRowSelection && !multiRowSelectionEnabled && !shouldKeepSelection) {\n                row.toggleSelected();\n            }\n        };\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={onClick}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {\n                        [classes.rowSelected]: isSelected,\n                        [classes.rowUnselectable]: disableRowSelection,\n                    })}\n                    aria-selected={isSelected}\n                    data-testid={row.id}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const columnSizing = {\n                            ...defaultColumnSizing,\n                            size: cell.column.columnDef.size,\n                            minSize: cell.column.columnDef.minSize,\n                            maxSize: cell.column.columnDef.maxSize,\n                        };\n\n                        const onCollapsibleCellClick = (event: MouseEvent<HTMLTableCellElement>) => {\n                            if (cell.column.id === TableSelectableColumn.id && !disableRowSelection) {\n                                event.stopPropagation();\n                                row.getToggleSelectedHandler();\n                            }\n                        };\n                        return (\n                            <td\n                                key={cell.id}\n                                data-testid={cell.id}\n                                style={{\n                                    width: columnSizing.size ?? 'auto',\n                                    minWidth: columnSizing.minSize,\n                                    maxWidth: columnSizing.maxSize,\n                                }}\n                                className={cx(classes.cell, {\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                                onClick={onCollapsibleCellClick}\n                            >\n                                <TableLoading visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </TableLoading>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box className={classes.collapsible} px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n    name: 'Rows',\n    icon: ListSize16Px,\n    Header: RowLayoutHeader,\n    Body: RowLayoutBody,\n};\n"],"names":["RowLayout","useStyles","createStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","gray","border","rem","dark","headerColumns","paddingLeft","backgroundColor","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","spacing","xs","sm","row","overflowWrap","cell","verticalAlign","height","borderBottom","collapsible","RowLayoutHeader","table","useTable","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","Th","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","keepSelection","cx","toggleCollapsible","el","children","length","querySelector","click","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","shouldKeepSelection","onClick","event","currentTarget","toggleSelected","Fragment","onDoubleClick","aria-selected","data-testid","getVisibleCells","columnSizing","defaultColumnSizing","size","column","columnDef","minSize","maxSize","onCollapsibleCellClick","TableSelectableColumn","stopPropagation","getToggleSelectedHandler","td","style","width","minWidth","maxWidth","TableCollapsibleColumn","TableLoading","visible","flexRender","getContext","colSpan","getAllColumns","Collapse","in","getIsExpanded","Box","px","py","name","icon","ListSize16Px","Header","Body"],"mappings":"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"}

package/dist/cjs/theme/Plasmantine.d.ts

@@ -1,3 +1,3 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
-export declare const Plasmantine: FunctionComponent<PropsWithChildren>;
+export declare const Plasmantine: FunctionComponent<PropsWithChildren<unknown>>;
 //# sourceMappingURL=Plasmantine.d.ts.map

package/dist/cjs/theme/Plasmantine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Plasmantine.d.ts","sourceRoot":"","sources":["../../../src/theme/Plasmantine.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAI5D,CAAC"}
+{"version":3,"file":"Plasmantine.d.ts","sourceRoot":"","sources":["../../../src/theme/Plasmantine.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAI3D,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAIrE,CAAC"}

package/dist/cjs/theme/Plasmantine.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["Plasmantine","children","MantineProvider","withGlobalStyles","withNormalizeCSS","theme","plasmaTheme"],"mappings":";;;;+BAKaA;;;eAAAA;;;;oBALiB;qBAGJ;AAEnB,IAAMA,cAAoD;QAAEC,iBAAAA;yBAC/D,qBAACC,qBAAe;QAACC,gBAAgB;QAACC,gBAAgB;QAACC,OAAOC,kBAAW;kBAChEL"}
+{"version":3,"sources":["../../../src/theme/Plasmantine.tsx"],"sourcesContent":["import {MantineProvider} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nimport {plasmaTheme} from './Theme';\n\nexport const Plasmantine: FunctionComponent<PropsWithChildren<unknown>> = ({children}) => (\n    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>\n        {children}\n    </MantineProvider>\n);\n"],"names":["Plasmantine","children","MantineProvider","withGlobalStyles","withNormalizeCSS","theme","plasmaTheme"],"mappings":";;;;+BAKaA;;;eAAAA;;;;oBALiB;qBAGJ;AAEnB,IAAMA,cAA6D;QAAEC,iBAAAA;yBACxE,qBAACC,qBAAe;QAACC,gBAAgB;QAACC,gBAAgB;QAACC,OAAOC,kBAAW;kBAChEL"}

package/dist/esm/components/copyToClipboard/CopyToClipboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAezE,CAAC"}
+{"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAgBzE,CAAC"}

package/dist/esm/components/copyToClipboard/CopyToClipboard.js

@@ -47,6 +47,7 @@ export var CopyToClipboard = function(_param) {
         },
         value: others.value,
         readOnly: true,
+        autoComplete: "off",
         rightSection: /*#__PURE__*/ _jsx(CopyToClipboardButton, _object_spread({}, others))
     }) : /*#__PURE__*/ _jsx(CopyToClipboardButton, _object_spread({}, others));
 };

package/dist/esm/components/copyToClipboard/CopyToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n    input: {\n        color: theme.colors.gray[7],\n    },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    color={copied ? 'success' : 'gray'}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n    const {classes} = useStyles();\n\n    return withLabel ? (\n        <TextInput\n            classNames={{\n                input: classes.input,\n            }}\n            value={others.value}\n            readOnly\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","CopyButton","createStyles","TextInput","Tooltip","useStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","timeout","copied","copy","label","onClick","height","CopyToClipboard","withLabel","others","classes","classNames","readOnly","rightSection"],"mappings":";;;AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AAmBvF,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;yBACrG,KAACZ;QAAWW,OAAOA;QAAOE,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,KAACZ;gBAAQa,OAAOF,SAAS,WAAW;0BAChC,cAAA,KAACf;oBACGQ,OAAOO,SAAS,YAAY;oBAC5BG,SAAS;4BAELL;wBADAG;yBACAH,UAAAA,oBAAAA,8BAAAA;oBACJ;8BAECE,uBAAS,KAACjB;wBAAcqB,QAAQ;uCAAS,KAACpB;wBAAaoB,QAAQ;;;;;;;AAOpF,OAAO,IAAMC,kBAAiE;QAAEC,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWlB,YAAXkB;IAEP,OAAOF,0BACH,KAAClB;QACGqB,YAAY;YACRjB,OAAOgB,QAAQhB,KAAK;QACxB;QACAK,OAAOU,OAAOV,KAAK;QACnBa,QAAQ;QACRC,4BAAc,KAACf,0CAA0BW;uBAG7C,KAACX,0CAA0BW;AAEnC,EAAE"}
+{"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n    /**\n     * The value to be copied to the clipboard.\n     */\n    value: string;\n    /**\n     * Whether to display the string to be copied alongside the button.\n     *\n     * @default false\n     */\n    withLabel?: boolean;\n    /**\n     * Called each time the value is copied to the clipboard\n     */\n    onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n    input: {\n        color: theme.colors.gray[7],\n    },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n    <CopyButton value={value} timeout={2000}>\n        {({copied, copy}) => (\n            <Tooltip label={copied ? 'Copied' : 'Copy'}>\n                <ActionIcon\n                    color={copied ? 'success' : 'gray'}\n                    onClick={() => {\n                        copy();\n                        onCopy?.();\n                    }}\n                >\n                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                </ActionIcon>\n            </Tooltip>\n        )}\n    </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n    const {classes} = useStyles();\n\n    return withLabel ? (\n        <TextInput\n            classNames={{\n                input: classes.input,\n            }}\n            value={others.value}\n            readOnly\n            autoComplete=\"off\"\n            rightSection={<CopyToClipboardButton {...others} />}\n        />\n    ) : (\n        <CopyToClipboardButton {...others} />\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","CopyButton","createStyles","TextInput","Tooltip","useStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","timeout","copied","copy","label","onClick","height","CopyToClipboard","withLabel","others","classes","classNames","readOnly","autoComplete","rightSection"],"mappings":";;;AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AAmBvF,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;yBACrG,KAACZ;QAAWW,OAAOA;QAAOE,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,KAACZ;gBAAQa,OAAOF,SAAS,WAAW;0BAChC,cAAA,KAACf;oBACGQ,OAAOO,SAAS,YAAY;oBAC5BG,SAAS;4BAELL;wBADAG;yBACAH,UAAAA,oBAAAA,8BAAAA;oBACJ;8BAECE,uBAAS,KAACjB;wBAAcqB,QAAQ;uCAAS,KAACpB;wBAAaoB,QAAQ;;;;;;;AAOpF,OAAO,IAAMC,kBAAiE;QAAEC,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWlB,YAAXkB;IAEP,OAAOF,0BACH,KAAClB;QACGqB,YAAY;YACRjB,OAAOgB,QAAQhB,KAAK;QACxB;QACAK,OAAOU,OAAOV,KAAK;QACnBa,QAAQ;QACRC,cAAa;QACbC,4BAAc,KAAChB,0CAA0BW;uBAG7C,KAACX,0CAA0BW;AAEnC,EAAE"}

package/dist/esm/components/header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAA8C,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAW,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,WAAW,EAAE,OAAO,iBAAiB,CAAC;IACtC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,EAAE,UAmCpB,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAS/D,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAA0D,CAAC;AAEvH,MAAM,WAAW,oBAAoB;IACjC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAM5D,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/components/header/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAA8C,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAW,iBAAiB,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAE3E,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,WAAW,EAAE,OAAO,iBAAiB,CAAC;IACtC,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,SAAS,EAAE,OAAO,eAAe,CAAC;CACrC;AAED,eAAO,MAAM,MAAM,EAAE,UAoCpB,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAS/D,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAC,CAA0D,CAAC;AAEvH,MAAM,WAAW,oBAAoB;IACjC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,CAM5D,CAAC"}

package/dist/esm/components/header/Header.js

@@ -30,7 +30,8 @@ export var Header = function(_param) {
             /*#__PURE__*/ _jsxs(Group, _object_spread_props(_object_spread({
                 position: "apart",
                 p: variant === "page" ? "xl" : undefined,
-                pb: variant === "page" ? "lg" : undefined
+                pb: variant === "page" ? "lg" : undefined,
+                noWrap: true
             }, others), {
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {

package/dist/esm/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {Children, FunctionComponent, ReactElement, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nexport const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <>\n            <Group\n                position=\"apart\"\n                p={variant === 'page' ? 'xl' : undefined}\n                pb={variant === 'page' ? 'lg' : undefined}\n                {...others}\n            >\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Title\n                        order={variant === 'page' ? 1 : 3}\n                        color={variant === 'page' ? 'gray.5' : undefined}\n                        sx={{wordBreak: 'break-word'}}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text size={variant === 'page' ? 'md' : 'sm'} color=\"gray.6\">\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider size=\"xs\" /> : null}\n        </>\n    );\n};\n\nconst HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (\n    <Breadcrumbs\n        styles={(theme) => ({\n            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},\n            separator: {color: theme.colors.gray[5]},\n        })}\n    >\n        {children}\n    </Breadcrumbs>\n);\n\nconst HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing=\"sm\">{children}</Group>;\n\nexport interface HeaderDocAnchorProps {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n}\n\nconst HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (\n    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"right\">\n        <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\" style={{verticalAlign: 'middle'}}>\n            <QuestionSize16Px height={16} />\n        </Anchor>\n    </Tooltip>\n);\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["QuestionSize16Px","Anchor","Breadcrumbs","Divider","Group","Stack","Text","Title","Tooltip","Children","Header","description","borderBottom","children","variant","others","convertedChildren","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","position","p","undefined","pb","spacing","order","color","sx","wordBreak","size","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","separator","colors","gray","href","docLink","label","docLinkTooltipLabel","disabled","inline","target","ml","style","verticalAlign","height","Actions","DocAnchor"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAAEC,WAAW,EAAgBC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAC7G,SAAQC,QAAQ,QAAmD,QAAQ;AA8B3E,OAAO,IAAMC,SAAqB;QAAEC,qBAAAA,aAAaC,sBAAAA,cAAcC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA1DJ;QAAaC;QAAcC;QAAUC;;IACrE,IAAME,oBAAoBP,SAASQ,OAAO,CAACJ;IAC3C,IAAMK,cAAcF,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC;;IACrE,IAAMC,UAAUP,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG;;IACjE,IAAMC,YAAYT,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK;;IACnE,IAAMC,gBAAgBX,kBAAkBY,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,qBAAqBF,MAAMC,IAAI,KAAKG,iBAAiBJ,MAAMC,IAAI,KAAKK;;IAElG,qBACI;;0BACI,MAACtB;gBACGyB,UAAS;gBACTC,GAAGhB,YAAY,SAAS,OAAOiB;gBAC/BC,IAAIlB,YAAY,SAAS,OAAOiB;eAC5BhB;;kCAEJ,MAACV;wBAAM4B,SAAS;;4BACXf;0CACD,MAACX;gCACG2B,OAAOpB,YAAY,SAAS,IAAI;gCAChCqB,OAAOrB,YAAY,SAAS,WAAWiB;gCACvCK,IAAI;oCAACC,WAAW;gCAAY;;oCAE3BV;oCACAF;;;0CAEL,KAACnB;gCAAKgC,MAAMxB,YAAY,SAAS,OAAO;gCAAMqB,OAAM;0CAC/CxB;;;;oBAGRY;;;YAEJX,6BAAe,KAACT;gBAAQmC,MAAK;iBAAU;;;AAGpD,EAAE;AAEF,IAAMhB,oBAA8D;QAAET,iBAAAA;yBAClE,KAACX;QACGqC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACX,OAAOK,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAECnC;;;AAIT,IAAMW,gBAA0D;QAAEX,iBAAAA;yBAAc,KAACT;QAAM6B,SAAQ;kBAAMpB;;;AAcrG,IAAMa,kBAA2D;QAAEuB,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,KAAC3C;QAAQ2C,OAAOC;QAAqBC,UAAU,CAACD;QAAqBvB,UAAS;kBAC1E,cAAA,KAAC5B;YAAOqD,MAAM;YAACL,MAAMC;YAASK,QAAO;YAASC,IAAG;YAAKC,OAAO;gBAACC,eAAe;YAAQ;sBACjF,cAAA,KAAC1D;gBAAiB2D,QAAQ;;;;;AAKtCjD,OAAOR,WAAW,GAAGoB;AACrBZ,OAAOkD,OAAO,GAAGpC;AACjBd,OAAOmD,SAAS,GAAGnC"}
+{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {Children, FunctionComponent, ReactElement, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nexport const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor,\n    );\n    return (\n        <>\n            <Group\n                position=\"apart\"\n                p={variant === 'page' ? 'xl' : undefined}\n                pb={variant === 'page' ? 'lg' : undefined}\n                noWrap\n                {...others}\n            >\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Title\n                        order={variant === 'page' ? 1 : 3}\n                        color={variant === 'page' ? 'gray.5' : undefined}\n                        sx={{wordBreak: 'break-word'}}\n                    >\n                        {otherChildren}\n                        {docAnchor}\n                    </Title>\n                    <Text size={variant === 'page' ? 'md' : 'sm'} color=\"gray.6\">\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider size=\"xs\" /> : null}\n        </>\n    );\n};\n\nconst HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (\n    <Breadcrumbs\n        styles={(theme) => ({\n            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},\n            separator: {color: theme.colors.gray[5]},\n        })}\n    >\n        {children}\n    </Breadcrumbs>\n);\n\nconst HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing=\"sm\">{children}</Group>;\n\nexport interface HeaderDocAnchorProps {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n}\n\nconst HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (\n    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"right\">\n        <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\" style={{verticalAlign: 'middle'}}>\n            <QuestionSize16Px height={16} />\n        </Anchor>\n    </Tooltip>\n);\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["QuestionSize16Px","Anchor","Breadcrumbs","Divider","Group","Stack","Text","Title","Tooltip","Children","Header","description","borderBottom","children","variant","others","convertedChildren","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","position","p","undefined","pb","noWrap","spacing","order","color","sx","wordBreak","size","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","separator","colors","gray","href","docLink","label","docLinkTooltipLabel","disabled","inline","target","ml","style","verticalAlign","height","Actions","DocAnchor"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAAEC,WAAW,EAAgBC,OAAO,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAC7G,SAAQC,QAAQ,QAAmD,QAAQ;AA8B3E,OAAO,IAAMC,SAAqB;QAAEC,qBAAAA,aAAaC,sBAAAA,cAAcC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA1DJ;QAAaC;QAAcC;QAAUC;;IACrE,IAAME,oBAAoBP,SAASQ,OAAO,CAACJ;IAC3C,IAAMK,cAAcF,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC;;IACrE,IAAMC,UAAUP,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG;;IACjE,IAAMC,YAAYT,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK;;IACnE,IAAMC,gBAAgBX,kBAAkBY,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,qBAAqBF,MAAMC,IAAI,KAAKG,iBAAiBJ,MAAMC,IAAI,KAAKK;;IAElG,qBACI;;0BACI,MAACtB;gBACGyB,UAAS;gBACTC,GAAGhB,YAAY,SAAS,OAAOiB;gBAC/BC,IAAIlB,YAAY,SAAS,OAAOiB;gBAChCE,MAAM;eACFlB;;kCAEJ,MAACV;wBAAM6B,SAAS;;4BACXhB;0CACD,MAACX;gCACG4B,OAAOrB,YAAY,SAAS,IAAI;gCAChCsB,OAAOtB,YAAY,SAAS,WAAWiB;gCACvCM,IAAI;oCAACC,WAAW;gCAAY;;oCAE3BX;oCACAF;;;0CAEL,KAACnB;gCAAKiC,MAAMzB,YAAY,SAAS,OAAO;gCAAMsB,OAAM;0CAC/CzB;;;;oBAGRY;;;YAEJX,6BAAe,KAACT;gBAAQoC,MAAK;iBAAU;;;AAGpD,EAAE;AAEF,IAAMjB,oBAA8D;QAAET,iBAAAA;yBAClE,KAACX;QACGsC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACX,OAAOK,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAECpC;;;AAIT,IAAMW,gBAA0D;QAAEX,iBAAAA;yBAAc,KAACT;QAAM8B,SAAQ;kBAAMrB;;;AAcrG,IAAMa,kBAA2D;QAAEwB,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,KAAC5C;QAAQ4C,OAAOC;QAAqBC,UAAU,CAACD;QAAqBxB,UAAS;kBAC1E,cAAA,KAAC5B;YAAOsD,MAAM;YAACL,MAAMC;YAASK,QAAO;YAASC,IAAG;YAAKC,OAAO;gBAACC,eAAe;YAAQ;sBACjF,cAAA,KAAC3D;gBAAiB4D,QAAQ;;;;;AAKtClD,OAAOR,WAAW,GAAGoB;AACrBZ,OAAOmD,OAAO,GAAGrC;AACjBd,OAAOoD,SAAS,GAAGpC"}

package/dist/esm/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-ogmezo"
+    class="mantine-Group-root mantine-1arn2xu"
   >
     <div
       class="mantine-Stack-root mantine-1178y6y"

package/dist/esm/components/inline-confirm/InlineConfirm.d.ts

@@ -2,7 +2,7 @@ import { FunctionComponent, PropsWithChildren } from 'react';
 import { InlineConfirmButton } from './InlineConfirmButton';
 import { InlineConfirmMenuItem } from './InlineConfirmMenuItem';
 import { InlineConfirmPrompt } from './InlineConfirmPrompt';
-type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
+type InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {
     Prompt: typeof InlineConfirmPrompt;
     Button: typeof InlineConfirmButton;
     MenuItem: typeof InlineConfirmMenuItem;

package/dist/esm/components/inline-confirm/InlineConfirm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,iBAAiB,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,GAAG;IAC5D,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAc3B,CAAC"}
+{"version":3,"file":"InlineConfirm.d.ts","sourceRoot":"","sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,iBAAiB,EAAE,iBAAiB,EAAyB,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAC,qBAAqB,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,mBAAmB,EAAC,MAAM,uBAAuB,CAAC;AAE1D,KAAK,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAG;IACrE,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAc3B,CAAC"}

package/dist/esm/components/inline-confirm/InlineConfirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren> & {\n    Prompt: typeof InlineConfirmPrompt;\n    Button: typeof InlineConfirmButton;\n    MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n    const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const prompt = convertedChildren.find(\n        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,\n    );\n    const clearConfirm = () => setConfirmingId(null);\n\n    return (\n        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n            {prompt ?? children}\n        </InlineConfirmContext.Provider>\n    );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["Children","useState","InlineConfirmButton","InlineConfirmContext","InlineConfirmMenuItem","InlineConfirmPrompt","InlineConfirm","children","confirmingId","setConfirmingId","convertedChildren","toArray","prompt","find","child","type","props","id","clearConfirm","Provider","value","Prompt","Button","MenuItem"],"mappings":";;AAAA,SAAQA,QAAQ,EAAsDC,QAAQ,QAAO,QAAQ;AAE7F,SAAQC,mBAAmB,QAAO,wBAAwB;AAC1D,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,SAAQC,mBAAmB,QAAO,wBAAwB;AAQ1D,OAAO,IAAMC,gBAAmC;QAAEC,iBAAAA;IAC9C,IAAwCN,6BAAAA,SAAwB,WAAzDO,eAAiCP,cAAnBQ,kBAAmBR;IAExC,IAAMS,oBAAoBV,SAASW,OAAO,CAACJ;IAC3C,IAAMK,SAASF,kBAAkBG,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKV,uBAAuBS,MAAME,KAAK,CAACC,EAAE,KAAKT;;IAExE,IAAMU,eAAe;eAAMT,gBAAgB;;IAE3C,qBACI,KAACN,qBAAqBgB,QAAQ;QAACC,OAAO;YAACZ,cAAAA;YAAcC,iBAAAA;YAAiBS,cAAAA;QAAY;kBAC7EN,mBAAAA,oBAAAA,SAAUL;;AAGvB,EAAE;AAEFD,cAAce,MAAM,GAAGhB;AACvBC,cAAcgB,MAAM,GAAGpB;AACvBI,cAAciB,QAAQ,GAAGnB"}
+{"version":3,"sources":["../../../../src/components/inline-confirm/InlineConfirm.tsx"],"sourcesContent":["import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';\n\nimport {InlineConfirmButton} from './InlineConfirmButton';\nimport {InlineConfirmContext} from './InlineConfirmContext';\nimport {InlineConfirmMenuItem} from './InlineConfirmMenuItem';\nimport {InlineConfirmPrompt} from './InlineConfirmPrompt';\n\ntype InlineConfirmType = FunctionComponent<PropsWithChildren<unknown>> & {\n    Prompt: typeof InlineConfirmPrompt;\n    Button: typeof InlineConfirmButton;\n    MenuItem: typeof InlineConfirmMenuItem;\n};\n\nexport const InlineConfirm: InlineConfirmType = ({children}) => {\n    const [confirmingId, setConfirmingId] = useState<string | null>(null);\n\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const prompt = convertedChildren.find(\n        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId,\n    );\n    const clearConfirm = () => setConfirmingId(null);\n\n    return (\n        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>\n            {prompt ?? children}\n        </InlineConfirmContext.Provider>\n    );\n};\n\nInlineConfirm.Prompt = InlineConfirmPrompt;\nInlineConfirm.Button = InlineConfirmButton;\nInlineConfirm.MenuItem = InlineConfirmMenuItem;\n"],"names":["Children","useState","InlineConfirmButton","InlineConfirmContext","InlineConfirmMenuItem","InlineConfirmPrompt","InlineConfirm","children","confirmingId","setConfirmingId","convertedChildren","toArray","prompt","find","child","type","props","id","clearConfirm","Provider","value","Prompt","Button","MenuItem"],"mappings":";;AAAA,SAAQA,QAAQ,EAAsDC,QAAQ,QAAO,QAAQ;AAE7F,SAAQC,mBAAmB,QAAO,wBAAwB;AAC1D,SAAQC,oBAAoB,QAAO,yBAAyB;AAC5D,SAAQC,qBAAqB,QAAO,0BAA0B;AAC9D,SAAQC,mBAAmB,QAAO,wBAAwB;AAQ1D,OAAO,IAAMC,gBAAmC;QAAEC,iBAAAA;IAC9C,IAAwCN,6BAAAA,SAAwB,WAAzDO,eAAiCP,cAAnBQ,kBAAmBR;IAExC,IAAMS,oBAAoBV,SAASW,OAAO,CAACJ;IAC3C,IAAMK,SAASF,kBAAkBG,IAAI,CACjC,SAACC;eAAUA,MAAMC,IAAI,KAAKV,uBAAuBS,MAAME,KAAK,CAACC,EAAE,KAAKT;;IAExE,IAAMU,eAAe;eAAMT,gBAAgB;;IAE3C,qBACI,KAACN,qBAAqBgB,QAAQ;QAACC,OAAO;YAACZ,cAAAA;YAAcC,iBAAAA;YAAiBS,cAAAA;QAAY;kBAC7EN,mBAAAA,oBAAAA,SAAUL;;AAGvB,EAAE;AAEFD,cAAce,MAAM,GAAGhB;AACvBC,cAAcgB,MAAM,GAAGpB;AACvBI,cAAciB,QAAQ,GAAGnB"}

package/dist/esm/components/table/TableFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,YAAY,EAAQ,SAAS,EAAY,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAK/E,QAAA,MAAM,SAAS;;;;;;;;CAQZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAkD3D,CAAC"}
+{"version":3,"file":"TableFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/table/TableFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,YAAY,EAAQ,SAAS,EAA0B,MAAM,eAAe,CAAC;AACjG,OAAO,EAAqB,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAMzF,QAAA,MAAM,SAAS;;;;;;;;CAQZ,CAAC;AAEJ,KAAK,sBAAsB,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAC1D,UAAU,gBAAiB,SAAQ,YAAY,CAAC,sBAAsB,CAAC;IACnE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAsD3D,CAAC"}

package/dist/esm/components/table/TableFilter.js

@@ -1,9 +1,12 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CrossSize16Px, SearchSize16Px } from "@coveord/plasma-react-icons";
-import { ActionIcon, createStyles, Grid, TextInput } from "@mantine/core";
+import { ActionIcon, Grid, TextInput, createStyles } from "@mantine/core";
+import { useState } from "react";
+import { useDebouncedValue, useDidUpdate } from "@mantine/hooks";
 import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 var useStyles = createStyles(function(theme) {
@@ -31,23 +34,28 @@ export var TableFilter = function(_param) {
         unstyled: unstyled
     }).classes;
     var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState;
-    var changeFilterValue = function(value) {
+    var _useState = _sliced_to_array(useState(state.globalFilter), 2), filter = _useState[0], setFilter = _useState[1];
+    var _useDebouncedValue = _sliced_to_array(useDebouncedValue(filter, 300), 2), debounced = _useDebouncedValue[0], cancel = _useDebouncedValue[1];
+    useDidUpdate(function() {
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
                 pagination: prevState.pagination ? {
                     pageIndex: 0,
                     pageSize: prevState.pagination.pageSize
                 } : prevState.pagination,
-                globalFilter: value
+                globalFilter: debounced
             });
         });
-    };
+        return cancel;
+    }, [
+        debounced
+    ]);
     var handleChange = function(event) {
         var value = event.currentTarget.value;
-        changeFilterValue(value);
+        setFilter(value);
     };
     var handleClear = function() {
-        changeFilterValue("");
+        setFilter("");
     };
     return /*#__PURE__*/ _jsx(Grid.Col, {
         span: "content",
@@ -57,17 +65,18 @@ export var TableFilter = function(_param) {
         children: /*#__PURE__*/ _jsx(TextInput, _object_spread({
             className: classes.wrapper,
             placeholder: placeholder,
+            autoComplete: "off",
             mb: "md",
-            rightSection: state.globalFilter ? /*#__PURE__*/ _jsx(ActionIcon, {
+            rightSection: filter ? /*#__PURE__*/ _jsx(ActionIcon, {
                 onClick: handleClear,
                 children: /*#__PURE__*/ _jsx(CrossSize16Px, {
                     height: 16
                 })
             }) : /*#__PURE__*/ _jsx(SearchSize16Px, {
-                height: 14,
+                height: 16,
                 className: classes.empty
             }),
-            value: state.globalFilter,
+            value: filter,
             onChange: handleChange
         }, others))
     });