@coveord/plasma-mantine 52.0.0 → 52.2.0

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

@@ -1,9 +1,9 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { QuestionSize16Px } from "@coveord/plasma-react-icons";
-import { Anchor, Breadcrumbs, Divider, Flex, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { Anchor, Breadcrumbs, Divider, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
 import { Children } from "react";
 export var Header = function(_param) {
     var description = _param.description, borderBottom = _param.borderBottom, children = _param.children, _param_variant = _param.variant, variant = _param_variant === void 0 ? "page" : _param_variant, others = _object_without_properties(_param, [
@@ -37,14 +37,11 @@ export var Header = function(_param) {
                         spacing: 0,
                         children: [
                             breadcrumbs,
-                            /*#__PURE__*/ _jsxs(Flex, {
-                                align: "center",
+                            /*#__PURE__*/ _jsxs(Title, {
+                                order: variant === "page" ? 1 : 3,
+                                color: variant === "page" ? "gray.5" : undefined,
                                 children: [
-                                    /*#__PURE__*/ _jsx(Title, {
-                                        order: variant === "page" ? 1 : 3,
-                                        color: variant === "page" ? "gray.5" : undefined,
-                                        children: otherChildren
-                                    }),
+                                    otherChildren,
                                     docAnchor
                                 ]
                             }),
@@ -99,6 +96,9 @@ var HeaderDocAnchor = function(param) {
             href: docLink,
             target: "_blank",
             ml: "xs",
+            style: {
+                verticalAlign: "middle"
+            },
             children: /*#__PURE__*/ _jsx(QuestionSize16Px, {
                 height: 16
             })

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, Flex, 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                    <Flex align=\"center\">\n                        <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>\n                            {otherChildren}\n                        </Title>\n                        {docAnchor}\n                    </Flex>\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\">\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","Flex","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","align","order","color","size","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","separator","colors","gray","href","docLink","label","docLinkTooltipLabel","disabled","inline","target","ml","height","Actions","DocAnchor"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAAEC,WAAW,EAAgBC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AACnH,SAAQC,QAAQ,QAAmD,QAAQ;AA8B3E,OAAO,IAAMC,SAAqB,iBAAwE;QAAtEC,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,SAAS;gBACxCC,IAAIlB,YAAY,SAAS,OAAOiB,SAAS;eACrChB;;kCAEJ,MAACV;wBAAM4B,SAAS;;4BACXf;0CACD,MAACf;gCAAK+B,OAAM;;kDACR,KAAC3B;wCAAM4B,OAAOrB,YAAY,SAAS,IAAI,CAAC;wCAAEsB,OAAOtB,YAAY,SAAS,WAAWiB,SAAS;kDACrFJ;;oCAEJF;;;0CAEL,KAACnB;gCAAK+B,MAAMvB,YAAY,SAAS,OAAO,IAAI;gCAAEsB,OAAM;0CAC/CzB;;;;oBAGRY;;;YAEJX,6BAAe,KAACV;gBAAQmC,MAAK;iBAAU,IAAI;;;AAGxD,EAAE;AAEF,IAAMf,oBAA8D;QAAET,iBAAAA;yBAClE,KAACZ;QACGqC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACT,OAAOG,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAEClC;;;AAIT,IAAMW,gBAA0D;QAAEX,iBAAAA;yBAAc,KAACT;QAAM6B,SAAQ;kBAAMpB;;;AAcrG,IAAMa,kBAA2D;QAAEsB,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,KAAC1C;QAAQ0C,OAAOC;QAAqBC,UAAU,CAACD;QAAqBtB,UAAS;kBAC1E,cAAA,KAAC7B;YAAOqD,MAAM;YAACL,MAAMC;YAASK,QAAO;YAASC,IAAG;sBAC7C,cAAA,KAACxD;gBAAiByD,QAAQ;;;;;AAKtC9C,OAAOT,WAAW,GAAGqB;AACrBZ,OAAO+C,OAAO,GAAGjC;AACjBd,OAAOgD,SAAS,GAAGhC"}
+{"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 order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>\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","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,iBAAwE;QAAtEC,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,SAAS;gBACxCC,IAAIlB,YAAY,SAAS,OAAOiB,SAAS;eACrChB;;kCAEJ,MAACV;wBAAM4B,SAAS;;4BACXf;0CACD,MAACX;gCAAM2B,OAAOpB,YAAY,SAAS,IAAI,CAAC;gCAAEqB,OAAOrB,YAAY,SAAS,WAAWiB,SAAS;;oCACrFJ;oCACAF;;;0CAEL,KAACnB;gCAAK8B,MAAMtB,YAAY,SAAS,OAAO,IAAI;gCAAEqB,OAAM;0CAC/CxB;;;;oBAGRY;;;YAEJX,6BAAe,KAACT;gBAAQiC,MAAK;iBAAU,IAAI;;;AAGxD,EAAE;AAEF,IAAMd,oBAA8D;QAAET,iBAAAA;yBAClE,KAACX;QACGmC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACT,OAAOG,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAECjC;;;AAIT,IAAMW,gBAA0D;QAAEX,iBAAAA;yBAAc,KAACT;QAAM6B,SAAQ;kBAAMpB;;;AAcrG,IAAMa,kBAA2D;QAAEqB,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,KAACzC;QAAQyC,OAAOC;QAAqBC,UAAU,CAACD;QAAqBrB,UAAS;kBAC1E,cAAA,KAAC5B;YAAOmD,MAAM;YAACL,MAAMC;YAASK,QAAO;YAASC,IAAG;YAAKC,OAAO;gBAACC,eAAe;YAAQ;sBACjF,cAAA,KAACxD;gBAAiByD,QAAQ;;;;;AAKtC/C,OAAOR,WAAW,GAAGoB;AACrBZ,OAAOgD,OAAO,GAAGlC;AACjBd,OAAOiD,SAAS,GAAGjC"}

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

@@ -37,15 +37,11 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
           Three
         </a>
       </div>
-      <div
-        class="mantine-xg7kom"
+      <h1
+        class="mantine-Text-root mantine-Title-root mantine-d1yoif"
       >
-        <h1
-          class="mantine-Text-root mantine-Title-root mantine-d1yoif"
-        >
-          Title
-        </h1>
-      </div>
+        Title
+      </h1>
       <div
         class="mantine-Text-root mantine-1w25z6f"
       />

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

@@ -1,4 +1,4 @@
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, useState } from "react";
 import { InlineConfirmButton } from "./InlineConfirmButton";

package/dist/esm/components/inline-confirm/InlineConfirmButton.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "@mantine/core";
 import { forwardRef } from "react";

package/dist/esm/components/inline-confirm/InlineConfirmMenuItem.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Menu } from "../menu";

package/dist/esm/components/menu/Menu.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu as MantineMenu } from "@mantine/core";
 import { forwardRef } from "react";

package/dist/esm/components/modal-wizard/ModalWizard.js

@@ -1,7 +1,7 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+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, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, CloseButton, createStyles, Modal, Progress } from "@mantine/core";
 import { Children, useEffect, useMemo, useState } from "react";

package/dist/esm/components/prompt/Prompt.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { color } from "@coveord/plasma-tokens";
 import { createStyles, Modal } from "@mantine/core";

package/dist/esm/components/prompt/PromptFooter.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 { jsx as _jsx } from "react/jsx-runtime";
 import { StickyFooter } from "../sticky-footer";
 export var PromptFooter = function(_param) /*#__PURE__*/ {

package/dist/esm/components/sticky-footer/StickyFooter.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, createStyles, Divider, Group } from "@mantine/core";
 var useStyles = createStyles(function() {

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

@@ -1,8 +1,8 @@
-import _define_property from "@swc/helpers/src/_define_property.mjs";
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+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, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Center, Collapse, Loader, Skeleton, Table as MantineTable } from "@mantine/core";
 import { useForm } from "@mantine/form";
@@ -14,6 +14,7 @@ import { Children, Fragment, useCallback, useEffect, useState } from "react";
 import useStyles from "./Table.styles";
 import { TableActions } from "./TableActions";
 import { TableAccordionColumn, TableCollapsibleColumn } from "./TableCollapsibleColumn";
+import { TableConsumer } from "./TableConsumer";
 import { TableContext } from "./TableContext";
 import { TableDateRangePicker } from "./TableDateRangePicker";
 import { TableFilter } from "./TableFilter";
@@ -22,7 +23,6 @@ import { TableHeader } from "./TableHeader";
 import { TablePagination } from "./TablePagination";
 import { TablePerPage } from "./TablePerPage";
 import { TablePredicate } from "./TablePredicate";
-import { TableConsumer } from "./TableConsumer";
 import { TableSelectableColumn } from "./TableSelectableColumn";
 import { Th } from "./Th";
 import { useRowSelection } from "./useRowSelection";
@@ -66,7 +66,6 @@ export var Table = function(param) {
         }
     });
     var _useStyles = useStyles({
-        hasHeader: !!header,
         multiRowSelectionEnabled: multiRowSelectionEnabled
     }), cx = _useStyles.cx, classes = _useStyles.classes;
     var _ref;
@@ -213,24 +212,35 @@ export var Table = function(param) {
                 consumer,
                 !rows.length && !isFiltered && !loading ? noDataChildren : /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        header,
                         /*#__PURE__*/ _jsxs(MantineTable, {
                             className: classes.table,
                             horizontalSpacing: "sm",
                             verticalSpacing: "xs",
                             pb: "sm",
                             children: [
-                                /*#__PURE__*/ _jsx("thead", {
+                                /*#__PURE__*/ _jsxs("thead", {
                                     className: classes.header,
-                                    children: table.getHeaderGroups().map(function(headerGroup) {
-                                        return /*#__PURE__*/ _jsx("tr", {
-                                            children: headerGroup.headers.map(function(columnHeader) {
-                                                return /*#__PURE__*/ _jsx(Th, {
-                                                    header: columnHeader
-                                                }, columnHeader.id);
+                                    children: [
+                                        !!header ? /*#__PURE__*/ _jsx("tr", {
+                                            children: /*#__PURE__*/ _jsx("th", {
+                                                style: {
+                                                    padding: 0
+                                                },
+                                                colSpan: table.getAllColumns().length,
+                                                children: header
                                             })
-                                        }, headerGroup.id);
-                                    })
+                                        }) : null,
+                                        table.getHeaderGroups().map(function(headerGroup) {
+                                            return /*#__PURE__*/ _jsx("tr", {
+                                                className: classes.headerColumns,
+                                                children: headerGroup.headers.map(function(columnHeader) {
+                                                    return /*#__PURE__*/ _jsx(Th, {
+                                                        header: columnHeader
+                                                    }, columnHeader.id);
+                                                })
+                                            }, headerGroup.id);
+                                        })
+                                    ]
                                 }),
                                 /*#__PURE__*/ _jsx("tbody", {
                                     children: rows.length ? rows : /*#__PURE__*/ _jsx("tr", {

package/dist/esm/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableConsumer} from './TableConsumer';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nconst LoadingSkeleton: FC<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    onRowSelectionChange,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        ...options,\n    });\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}\n                    aria-selected={isSelected}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <LoadingSkeleton visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </LoadingSkeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {consumer}\n                {!rows.length && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        {header}\n                        <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                            <thead className={classes.header}>\n                                {table.getHeaderGroups().map((headerGroup) => (\n                                    <tr key={headerGroup.id}>\n                                        {headerGroup.headers.map((columnHeader) => (\n                                            <Th key={columnHeader.id} header={columnHeader} />\n                                        ))}\n                                    </tr>\n                                ))}\n                            </thead>\n                            <tbody>\n                                {rows.length ? (\n                                    rows\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </MantineTable>\n                        {footer}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\n"],"names":["Box","Center","Collapse","Loader","Skeleton","Table","MantineTable","useForm","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","debounce","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","useStyles","TableActions","TableAccordionColumn","TableCollapsibleColumn","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableConsumer","TableSelectableColumn","Th","useRowSelection","LoadingSkeleton","props","style","display","sx","visible","borderRadius","undefined","children","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","loading","doubleClickAction","multiRowSelectionEnabled","onRowSelectionChange","options","form","convertedChildren","toArray","header","find","child","type","footer","consumer","predicates","dateRange","initialStateWithoutForm","initialValues","hasHeader","cx","classes","table","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","cancel","sorting","clearFilters","setFieldValue","prevState","flexGrow","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","td","rowCollapsibleButtonCell","id","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker","Consumer"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, Loader, Skeleton, SkeletonProps, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState as TanstackTableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport debounce from 'lodash.debounce';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';\n\nimport useStyles from './Table.styles';\nimport {TableFormType, TableProps, TableState, TableType} from './Table.types';\nimport {TableActions} from './TableActions';\nimport {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {TableConsumer} from './TableConsumer';\nimport {TableContext} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\nconst LoadingSkeleton: FC<SkeletonProps> = (props) => (\n    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>\n        {props.children}\n    </Skeleton>\n);\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n    onRowSelectionChange,\n    options = {},\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n    const consumer = convertedChildren.find((child) => child.type === TableConsumer);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: options?.getPaginationRowModel === undefined,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n        enableRowSelection: !loading,\n        ...options,\n    });\n    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);\n    table.setOptions((prev) => ({\n        ...prev,\n        state: state as TanstackTableState,\n        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {\n        multiRowSelectionEnabled,\n        onRowSelectionChange,\n    });\n    const isFiltered =\n        !!state.globalFilter ||\n        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||\n        !!form.values.dateRange?.[0] ||\n        !!form.values.dateRange?.[1];\n\n    const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n        return () => {\n            triggerChange.cancel();\n        };\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.pagination, state.sorting, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', initialState.predicates ?? {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n        const isSelected = !!row.getIsSelected();\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}\n                    aria-selected={isSelected}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <LoadingSkeleton visible={loading}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </LoadingSkeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={table.getAllColumns().length}\n                            style={{\n                                padding: 0,\n                                borderTop: row.getIsExpanded() ? undefined : 'none',\n                                borderBottom: row.getIsExpanded() ? undefined : 'none',\n                            }}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    isFiltered,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                    getPageCount: table.getPageCount,\n                }}\n            >\n                {consumer}\n                {!rows.length && !isFiltered && !loading ? (\n                    noDataChildren\n                ) : (\n                    <>\n                        <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                            <thead className={classes.header}>\n                                {!!header ? (\n                                    <tr>\n                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>\n                                            {header}\n                                        </th>\n                                    </tr>\n                                ) : null}\n                                {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                            </thead>\n                            <tbody>\n                                {rows.length ? (\n                                    rows\n                                ) : (\n                                    <tr>\n                                        <td colSpan={table.getAllColumns().length}>\n                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>\n                                        </td>\n                                    </tr>\n                                )}\n                            </tbody>\n                        </MantineTable>\n                        {footer}\n                    </>\n                )}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.AccordionColumn = TableAccordionColumn;\nTable.DateRangePicker = TableDateRangePicker;\nTable.Consumer = TableConsumer;\n"],"names":["Box","Center","Collapse","Loader","Skeleton","Table","MantineTable","useForm","useDidUpdate","defaultColumnSizing","flexRender","getCoreRowModel","useReactTable","debounce","defaultsDeep","Children","Fragment","useCallback","useEffect","useState","useStyles","TableActions","TableAccordionColumn","TableCollapsibleColumn","TableConsumer","TableContext","TableDateRangePicker","TableFilter","TableFooter","TableHeader","TablePagination","TablePerPage","TablePredicate","TableSelectableColumn","Th","useRowSelection","LoadingSkeleton","props","style","display","sx","visible","borderRadius","undefined","children","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","loading","doubleClickAction","multiRowSelectionEnabled","onRowSelectionChange","options","form","convertedChildren","toArray","header","find","child","type","footer","consumer","predicates","dateRange","initialStateWithoutForm","initialValues","cx","classes","table","pagination","pageSize","DEFAULT_SIZE","concat","manualPagination","getPaginationRowModel","enableMultiRowSelection","getRowCanExpand","row","original","enableRowSelection","state","setState","setOptions","prev","onStateChange","clearSelection","getSelectedRow","getSelectedRows","outsideClickRef","isFiltered","globalFilter","Object","keys","values","some","predicate","triggerChange","cancel","sorting","clearFilters","setFieldValue","prevState","flexGrow","rows","getRowModel","map","rowChildren","isSelected","getIsSelected","tr","onClick","toggleSelected","onDoubleClick","className","rowSelected","aria-selected","getVisibleCells","cell","size","column","getSize","width","td","rowCollapsibleButtonCell","id","columnDef","getContext","colSpan","getAllColumns","length","padding","borderTop","getIsExpanded","borderBottom","in","px","py","ref","Provider","value","containerRef","getPageCount","horizontalSpacing","verticalSpacing","pb","thead","th","getHeaderGroups","headerGroup","headerColumns","headers","columnHeader","tbody","Actions","Filter","Footer","Header","Pagination","Predicate","PerPage","CollapsibleColumn","AccordionColumn","DateRangePicker","Consumer"],"mappings":"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"}

package/dist/esm/components/table/Table.styles.js

@@ -1,11 +1,14 @@
 import { createStyles } from "@mantine/core";
 var useStyles = createStyles(function(theme, param) {
-    var hasHeader = param.hasHeader, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
+    var multiRowSelectionEnabled = param.multiRowSelectionEnabled;
     var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0];
     return {
         table: {
             width: "100%",
-            "& td:first-of-type, th:first-of-type > *": {
+            "& thead tr th": {
+                borderBottom: "none"
+            },
+            "& td:first-of-type": {
                 paddingLeft: theme.spacing.xl
             },
             "& tbody td": {
@@ -14,7 +17,7 @@ var useStyles = createStyles(function(theme, param) {
         },
         header: {
             position: "sticky",
-            top: hasHeader ? 69 : 0,
+            top: 0,
             backgroundColor: theme.colorScheme === "dark" ? theme.black : theme.white,
             transition: "box-shadow 150ms ease",
             zIndex: 1,
@@ -24,7 +27,12 @@ var useStyles = createStyles(function(theme, param) {
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderBottom: "1px solid ".concat(theme.colors.gray[2])
+                borderBottom: "1px solid ".concat(theme.colors.gray[3])
+            }
+        },
+        headerColumns: {
+            "& th:first-of-type > *": {
+                paddingLeft: theme.spacing.xl
             }
         },
         rowSelected: {
@@ -41,6 +49,13 @@ var useStyles = createStyles(function(theme, param) {
         }
     };
 });
+export var TableComponentsOrder = {
+    MultiSelectInfo: 5,
+    Actions: 4,
+    Predicate: 3,
+    Filter: 2,
+    DateRangePicker: 1
+};
 export default useStyles;
 
 //# sourceMappingURL=Table.styles.js.map

package/dist/esm/components/table/Table.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\ninterface TableStylesParams {\n    hasHeader: boolean;\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& td:first-of-type, th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n            '& tbody td': {\n                verticalAlign: 'top',\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: hasHeader ? 69 : 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 1,\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[2]}`,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport default useStyles;\n"],"names":["createStyles","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAO3C,IAAMC,YAAYD,aAAwC,SAACE,cAAiD;QAAzCC,kBAAAA,WAAWC,iCAAAA;IAC1E,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAChBJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,4CAA4C;gBACxCC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAKhB,YAAY,KAAK,CAAC;YACvBiB,iBAAiBlB,MAAMI,WAAW,KAAK,SAASJ,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRC,cAAc,AAAC,aAAiC,OAArB3B,MAAMO,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,aAAa;YACTX,iBAAiBhB,2BAA2B4B,YAAY3B,kBAAkB;QAC9E;QAEA4B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BjC,OAAvBA,MAAMY,OAAO,CAACsB,EAAE,EAAC,QAAuB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;AAEA,eAAeJ,UAAU"}
+{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\ninterface TableStylesParams {\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& thead tr th': {\n                borderBottom: 'none',\n            },\n            '& td:first-of-type': {\n                paddingLeft: theme.spacing.xl,\n            },\n            '& tbody td': {\n                verticalAlign: 'top',\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 1,\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[3]}`,\n            },\n        },\n\n        headerColumns: {\n            '& th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport const TableComponentsOrder = {\n    MultiSelectInfo: 5,\n    Actions: 4,\n    Predicate: 3,\n    Filter: 2,\n    DateRangePicker: 1,\n};\n\nexport default useStyles;\n"],"names":["createStyles","useStyles","theme","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","borderBottom","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","gray","headerColumns","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","TableComponentsOrder","MultiSelectInfo","Actions","Predicate","Filter","DateRangePicker"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAM3C,IAAMC,YAAYD,aAAwC,SAACE,cAAsC;QAA9BC,iCAAAA;IAC/D,IAAMC,qBACFF,MAAMG,WAAW,KAAK,SAChBH,MAAMI,EAAE,CAACC,IAAI,CAACL,MAAMM,MAAM,CAACN,MAAMO,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDP,MAAMM,MAAM,CAACN,MAAMO,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,iBAAiB;gBACbC,cAAc;YAClB;YACA,sBAAsB;gBAClBC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAK;YACLC,iBAAiBlB,MAAMG,WAAW,KAAK,SAASH,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRhB,cAAc,AAAC,aAAiC,OAArBV,MAAMM,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,eAAe;YACX,0BAA0B;gBACtBjB,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;QACJ;QAEAgB,aAAa;YACTX,iBAAiBjB,2BAA2B6B,YAAY5B,kBAAkB;QAC9E;QAEA6B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BjC,OAAvBA,MAAMY,OAAO,CAACsB,EAAE,EAAC,QAAuB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBhB;YACrB;QACJ;IACJ;AACJ;AAEA,OAAO,IAAMmC,uBAAuB;IAChCC,iBAAiB;IACjBC,SAAS;IACTC,WAAW;IACXC,QAAQ;IACRC,iBAAiB;AACrB,EAAE;AAEF,eAAe3C,UAAU"}

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Group } from "@mantine/core";
+import { Grid, Group } from "@mantine/core";
+import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 export var TableActions = function(param) {
     var children = param.children;
@@ -8,9 +9,17 @@ export var TableActions = function(param) {
     if (selectedRows.length <= 0) {
         return null;
     }
-    return /*#__PURE__*/ _jsx(Group, {
-        spacing: "xs",
-        children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
+    return /*#__PURE__*/ _jsx(Grid.Col, {
+        span: "content",
+        order: TableComponentsOrder.Actions,
+        py: "sm",
+        children: /*#__PURE__*/ _jsx(Group, {
+            spacing: "xs",
+            style: {
+                display: "inline-flex"
+            },
+            children: multiRowSelectionEnabled ? children(selectedRows) : children(selectedRows[0])
+        })
     });
 };
 

package/dist/esm/components/table/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\n\nimport {useTable} from './TableContext';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Group spacing=\"xs\">\n            {multiRowSelectionEnabled\n                ? (children as (data: T[]) => ReactNode)(selectedRows)\n                : (children as (datum: T) => ReactNode)(selectedRows[0])}\n        </Group>\n    );\n};\n"],"names":["Group","useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","spacing"],"mappings":";AAAA,SAAQA,KAAK,QAAO,gBAAgB;AAGpC,SAAQC,QAAQ,QAAO,iBAAiB;AAyBxC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBACI,KAACP;QAAMQ,SAAQ;kBACVH,2BACK,AAACF,SAAsCG,gBACvC,AAACH,SAAqCG,YAAY,CAAC,EAAE,CAAC;;AAGxE,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {Grid, Group} from '@mantine/core';\nimport {ReactElement, ReactNode} from 'react';\nimport {TableComponentsOrder} from './Table.styles';\n\nimport {useTable} from './TableContext';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return (\n        <Grid.Col span=\"content\" order={TableComponentsOrder.Actions} py=\"sm\">\n            <Group spacing=\"xs\" style={{display: 'inline-flex'}}>\n                {multiRowSelectionEnabled\n                    ? (children as (data: T[]) => ReactNode)(selectedRows)\n                    : (children as (datum: T) => ReactNode)(selectedRows[0])}\n            </Group>\n        </Grid.Col>\n    );\n};\n"],"names":["Grid","Group","TableComponentsOrder","useTable","TableActions","children","getSelectedRows","multiRowSelectionEnabled","selectedRows","length","Col","span","order","Actions","py","spacing","style","display"],"mappings":";AAAA,SAAQA,IAAI,EAAEC,KAAK,QAAO,gBAAgB;AAE1C,SAAQC,oBAAoB,QAAO,iBAAiB;AAEpD,SAAQC,QAAQ,QAAO,iBAAiB;AAyBxC,OAAO,IAAMC,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDF,YAAAA,YAA7CG,kBAA6CH,UAA7CG,iBAAiBC,2BAA4BJ,UAA5BI;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBACI,KAACT,KAAKU,GAAG;QAACC,MAAK;QAAUC,OAAOV,qBAAqBW,OAAO;QAAEC,IAAG;kBAC7D,cAAA,KAACb;YAAMc,SAAQ;YAAKC,OAAO;gBAACC,SAAS;YAAa;sBAC7CV,2BACK,AAACF,SAAsCG,gBACvC,AAACH,SAAqCG,YAAY,CAAC,EAAE,CAAC;;;AAI5E,EAAE"}

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

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ArrowHeadDownSize24Px, ArrowHeadUpSize24Px } from "@coveord/plasma-react-icons";
 import { ActionIcon } from "@mantine/core";

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

@@ -1,11 +1,12 @@
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CalendarSize24Px } from "@coveord/plasma-react-icons";
-import { Popover } from "@mantine/core";
+import { Grid, Group, Popover, Text } from "@mantine/core";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { Button } from "../button";
 import { DateRangePickerInlineCalendar } from "../date-range-picker";
+import { TableComponentsOrder } from "./Table.styles";
 import { useTable } from "./TableContext";
 export var TableDateRangePicker = function(param) {
     var _param_presets = param.presets, presets = _param_presets === void 0 ? {} : _param_presets, rangeCalendarProps = param.rangeCalendarProps;
@@ -22,40 +23,49 @@ export var TableDateRangePicker = function(param) {
         return dayjs(date).format("MMM DD, YYYY");
     };
     var formatedRange = "".concat(formatDate(form.values.dateRange[0]), " - ").concat(formatDate(form.values.dateRange[1]));
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            formatedRange,
-            /*#__PURE__*/ _jsxs(Popover, {
-                opened: opened,
-                onChange: setOpened,
-                children: [
-                    /*#__PURE__*/ _jsx(Popover.Target, {
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            variant: "outline",
-                            color: "gray",
-                            onClick: function() {
-                                return setOpened(true);
-                            },
-                            px: "xs",
-                            children: /*#__PURE__*/ _jsx(CalendarSize24Px, {
-                                width: 24,
-                                height: 24
+    return /*#__PURE__*/ _jsx(Grid.Col, {
+        span: "content",
+        order: TableComponentsOrder.DateRangePicker,
+        py: "sm",
+        children: /*#__PURE__*/ _jsxs(Group, {
+            spacing: "xs",
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    span: true,
+                    children: formatedRange
+                }),
+                /*#__PURE__*/ _jsxs(Popover, {
+                    opened: opened,
+                    onChange: setOpened,
+                    children: [
+                        /*#__PURE__*/ _jsx(Popover.Target, {
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                color: "gray",
+                                onClick: function() {
+                                    return setOpened(true);
+                                },
+                                px: "xs",
+                                children: /*#__PURE__*/ _jsx(CalendarSize24Px, {
+                                    width: 24,
+                                    height: 24
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Popover.Dropdown, {
+                            p: 0,
+                            children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
+                                initialRange: form.values.dateRange,
+                                onApply: onApply,
+                                onCancel: onCancel,
+                                presets: presets,
+                                rangeCalendarProps: rangeCalendarProps
                             })
                         })
-                    }),
-                    /*#__PURE__*/ _jsx(Popover.Dropdown, {
-                        p: 0,
-                        children: /*#__PURE__*/ _jsx(DateRangePickerInlineCalendar, {
-                            initialRange: form.values.dateRange,
-                            onApply: onApply,
-                            onCancel: onCancel,
-                            presets: presets,
-                            rangeCalendarProps: rangeCalendarProps
-                        })
-                    })
-                ]
-            })
-        ]
+                    ]
+                })
+            ]
+        })
     });
 };