@webiny/ui 5.34.8 → 5.35.0-beta.0

package/ConfirmationDialog/ConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","React","Component"],"sources":["ConfirmationDialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport {\n    Dialog,\n    DialogButton,\n    DialogCancel,\n    DialogActions,\n    DialogTitle,\n    DialogContent\n} from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\n\ninterface ChildrenRenderProp {\n    showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n    onAccept?: () => void;\n    onCancel?: () => void;\n}\n\ninterface Props {\n    // Title of confirmation dialog\n    title?: React.ReactNode;\n\n    // Message of confirmation dialog\n    message?: React.ReactNode;\n\n    // This element will be rendered during loading\n    loading?: React.ReactNode;\n\n    // For testing purposes\n    \"data-testid\"?: string;\n\n    // An element that will trigger the confirmation dialog.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n\n    // Is `Confirm` button disabled\n    disableConfirm?: boolean;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n    show: boolean;\n    loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n    static defaultProps = {\n        title: \"Confirmation\",\n        message: \"Are you sure you want to continue?\",\n        loading: <CircularProgress />\n    };\n\n    __isMounted = false;\n\n    callbacks: ConfirmationCallbacks = {\n        onAccept: () => {\n            return void 0;\n        },\n        onCancel: () => {\n            return void 0;\n        }\n    };\n\n    public override state = {\n        show: false,\n        loading: false\n    };\n\n    public override componentDidMount() {\n        this.__isMounted = true;\n    }\n\n    public override componentWillUnmount() {\n        this.__isMounted = false;\n    }\n\n    private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n        this.callbacks = {\n            onAccept,\n            onCancel\n        };\n        this.setState({ show: true });\n    };\n\n    private readonly hideConfirmation = () => {\n        this.setState({ show: false });\n    };\n\n    private readonly onAccept = async () => {\n        const { onAccept } = this.callbacks;\n        if (typeof onAccept === \"function\") {\n            this.setState({ loading: true });\n            await onAccept();\n            if (this.__isMounted) {\n                this.setState({ loading: false, show: false });\n            }\n        }\n    };\n\n    private readonly onCancel = async () => {\n        const { onCancel } = this.callbacks;\n        if (typeof onCancel === \"function\") {\n            await onCancel();\n        }\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Dialog\n                    style={this.props.style}\n                    open={this.state.show}\n                    onClose={this.hideConfirmation}\n                    data-testid={this.props[\"data-testid\"]}\n                >\n                    {this.state.loading ? this.props.loading : null}\n                    <DialogTitle>{this.props.title}</DialogTitle>\n                    <DialogContent>{this.props.message}</DialogContent>\n                    <DialogActions>\n                        <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n                        <DialogButton\n                            data-testid=\"confirmationdialog-confirm-action\"\n                            onClick={this.onAccept}\n                            disabled={this.props.disableConfirm}\n                        >\n                            Confirm\n                        </DialogButton>\n                    </DialogActions>\n                </Dialog>\n                {this.props.children({\n                    showConfirmation: this.showConfirmation\n                })}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { ConfirmationDialog };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AASA;;AAuCA;AACA;AACA;IACMA,kB;;;;;;;;;;;;;;;8FAOY,K;4FAEqB;MAC/BC,QAAQ,EAAE,oBAAM;QACZ,OAAO,KAAK,CAAZ;MACH,CAH8B;MAI/BC,QAAQ,EAAE,oBAAM;QACZ,OAAO,KAAK,CAAZ;MACH;IAN8B,C;wFASX;MACpBC,IAAI,EAAE,KADc;MAEpBC,OAAO,EAAE;IAFW,C;mGAaY,UAACH,QAAD,EAAwBC,QAAxB,EAAkD;MAClF,MAAKG,SAAL,GAAiB;QACbJ,QAAQ,EAARA,QADa;QAEbC,QAAQ,EAARA;MAFa,CAAjB;;MAIA,MAAKI,QAAL,CAAc;QAAEH,IAAI,EAAE;MAAR,CAAd;IACH,C;mGAEmC,YAAM;MACtC,MAAKG,QAAL,CAAc;QAAEH,IAAI,EAAE;MAAR,CAAd;IACH,C;+LAE2B;MAAA;MAAA;QAAA;UAAA;YAAA;cAChBF,QADgB,GACH,MAAKI,SADF,CAChBJ,QADgB;;cAAA,MAEpB,OAAOA,QAAP,KAAoB,UAFA;gBAAA;gBAAA;cAAA;;cAGpB,MAAKK,QAAL,CAAc;gBAAEF,OAAO,EAAE;cAAX,CAAd;;cAHoB;cAAA,OAIdH,QAAQ,EAJM;;YAAA;cAKpB,IAAI,MAAKM,WAAT,EAAsB;gBAClB,MAAKD,QAAL,CAAc;kBAAEF,OAAO,EAAE,KAAX;kBAAkBD,IAAI,EAAE;gBAAxB,CAAd;cACH;;YAPmB;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;+LAWA;MAAA;MAAA;QAAA;UAAA;YAAA;cAChBD,QADgB,GACH,MAAKG,SADF,CAChBH,QADgB;;cAAA,MAEpB,OAAOA,QAAP,KAAoB,UAFA;gBAAA;gBAAA;cAAA;;cAAA;cAAA,OAGdA,QAAQ,EAHM;;YAAA;YAAA;cAAA;UAAA;QAAA;MAAA;IAAA,C;;;;;;WA/B5B,6BAAoC;MAChC,KAAKK,WAAL,GAAmB,IAAnB;IACH;;;WAED,gCAAuC;MACnC,KAAKA,WAAL,GAAmB,KAAnB;IACH;;;WAgCD,kBAAyB;MACrB,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,cAAD;QACI,KAAK,EAAE,KAAKC,KAAL,CAAWC,KADtB;QAEI,IAAI,EAAE,KAAKC,KAAL,CAAWP,IAFrB;QAGI,OAAO,EAAE,KAAKQ,gBAHlB;QAII,eAAa,KAAKH,KAAL,CAAW,aAAX;MAJjB,GAMK,KAAKE,KAAL,CAAWN,OAAX,GAAqB,KAAKI,KAAL,CAAWJ,OAAhC,GAA0C,IAN/C,eAOI,6BAAC,mBAAD,QAAc,KAAKI,KAAL,CAAWI,KAAzB,CAPJ,eAQI,6BAAC,qBAAD,QAAgB,KAAKJ,KAAL,CAAWK,OAA3B,CARJ,eASI,6BAAC,qBAAD,qBACI,6BAAC,oBAAD;QAAc,OAAO,EAAE,KAAKX;MAA5B,GAAsC,QAAtC,CADJ,eAEI,6BAAC,oBAAD;QACI,eAAY,mCADhB;QAEI,OAAO,EAAE,KAAKD,QAFlB;QAGI,QAAQ,EAAE,KAAKO,KAAL,CAAWM;MAHzB,GAIC,SAJD,CAFJ,CATJ,CADJ,EAqBK,KAAKN,KAAL,CAAWO,QAAX,CAAoB;QACjBC,gBAAgB,EAAE,KAAKA;MADN,CAApB,CArBL,CADJ;IA2BH;;;EAzF4BC,cAAA,CAAMC,S;;;8BAAjClB,kB,kBACoB;EAClBY,KAAK,EAAE,cADW;EAElBC,OAAO,EAAE,oCAFS;EAGlBT,OAAO,eAAE,6BAAC,0BAAD;AAHS,C"}
+{"version":3,"names":["ConfirmationDialog","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","props","style","state","hideConfirmation","title","message","disableConfirm","children","showConfirmation","React","Component"],"sources":["ConfirmationDialog.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Dialog, DialogCancel, DialogActions, DialogTitle, DialogContent } from \"./../Dialog\";\n\nimport { CircularProgress } from \"../Progress\";\nimport { ButtonPrimary } from \"~/Button\";\n\ninterface ChildrenRenderProp {\n    showConfirmation: (onAccept?: () => void, onCancel?: () => void) => any;\n}\n\ninterface ConfirmationCallbacks {\n    onAccept?: () => void;\n    onCancel?: () => void;\n}\n\ninterface Props {\n    // Title of confirmation dialog\n    title?: React.ReactNode;\n\n    // Message of confirmation dialog\n    message?: React.ReactNode;\n\n    // This element will be rendered during loading\n    loading?: React.ReactNode;\n\n    // For testing purposes\n    \"data-testid\"?: string;\n\n    // An element that will trigger the confirmation dialog.\n    children: (props: ChildrenRenderProp) => React.ReactNode;\n\n    // Is `Confirm` button disabled\n    disableConfirm?: boolean;\n\n    // Dialog component's custom in-line styles.\n    style?: React.CSSProperties;\n}\n\ninterface ConfirmationDialogState {\n    show: boolean;\n    loading: boolean;\n}\n\n/**\n * Use ConfirmationDialog component to display a list of choices, once the handler is triggered.\n */\nclass ConfirmationDialog extends React.Component<Props, ConfirmationDialogState> {\n    static defaultProps = {\n        title: \"Confirmation\",\n        message: \"Are you sure you want to continue?\",\n        loading: <CircularProgress />\n    };\n\n    __isMounted = false;\n\n    callbacks: ConfirmationCallbacks = {\n        onAccept: () => {\n            return void 0;\n        },\n        onCancel: () => {\n            return void 0;\n        }\n    };\n\n    public override state = {\n        show: false,\n        loading: false\n    };\n\n    public override componentDidMount() {\n        this.__isMounted = true;\n    }\n\n    public override componentWillUnmount() {\n        this.__isMounted = false;\n    }\n\n    private readonly showConfirmation = (onAccept?: () => void, onCancel?: () => void) => {\n        this.callbacks = {\n            onAccept,\n            onCancel\n        };\n        this.setState({ show: true });\n    };\n\n    private readonly hideConfirmation = () => {\n        this.setState({ show: false });\n    };\n\n    private readonly onAccept = async () => {\n        const { onAccept } = this.callbacks;\n        if (typeof onAccept === \"function\") {\n            this.setState({ loading: true });\n            await onAccept();\n            if (this.__isMounted) {\n                this.setState({ loading: false, show: false });\n            }\n        }\n    };\n\n    private readonly onCancel = async () => {\n        const { onCancel } = this.callbacks;\n        if (typeof onCancel === \"function\") {\n            await onCancel();\n        }\n    };\n\n    public override render() {\n        return (\n            <React.Fragment>\n                <Dialog\n                    style={this.props.style}\n                    open={this.state.show}\n                    onClose={this.hideConfirmation}\n                    data-testid={this.props[\"data-testid\"]}\n                >\n                    {this.state.loading ? this.props.loading : null}\n                    <DialogTitle>{this.props.title}</DialogTitle>\n                    <DialogContent>{this.props.message}</DialogContent>\n                    <DialogActions>\n                        <DialogCancel onClick={this.onCancel}>Cancel</DialogCancel>\n                        <ButtonPrimary\n                            data-testid=\"confirmationdialog-confirm-action\"\n                            onClick={this.onAccept}\n                            disabled={this.props.disableConfirm}\n                        >\n                            Confirm\n                        </ButtonPrimary>\n                    </DialogActions>\n                </Dialog>\n                {this.props.children({\n                    showConfirmation: this.showConfirmation\n                })}\n            </React.Fragment>\n        );\n    }\n}\n\nexport { ConfirmationDialog };\n"],"mappings":"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"}

package/ConfirmationDialog/ConfirmationDialog.stories.js

@@ -1,19 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../ConfirmationDialog/README.md"));
-
 var _Button = require("./../Button");
-
 var _ConfirmationDialog = require("./ConfirmationDialog");
-
 var story = (0, _react2.storiesOf)("Components/ConfirmationDialog", module);
 story.add("usage", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, {

package/ConfirmationDialog/ConfirmationDialog.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","readme","showConfirmation","console","log","info","propTables","ConfirmationDialog"],"sources":["ConfirmationDialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ConfirmationDialog/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\nconst story = storiesOf(\"Components/ConfirmationDialog\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon with and without ConfirmationDialog\"}>\n                    <StorySandboxExample>\n                        <ConfirmationDialog\n                            title=\"Pay Invoice\"\n                            message=\"Are you sure you want pay this invoice?\"\n                        >\n                            {({ showConfirmation }) => {\n                                return (\n                                    <ButtonPrimary\n                                        onClick={() => {\n                                            showConfirmation(\n                                                () => console.log(\"Confirm\"),\n                                                () => console.log(\"Cancel\")\n                                            );\n                                        }}\n                                    >\n                                        Pay Invoice\n                                    </ButtonPrimary>\n                                );\n                            }}\n                        </ConfirmationDialog>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <ConfirmationDialog\n                        title=\"Pay Invoice\"\n                        message=\"Are you sure you want pay this invoice?\"\n                    >\n                        {({ showConfirmation }) => {\n                            return (\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        showConfirmation(\n                                            () => console.log(\"Confirm\"),\n                                            () => console.log(\"Cancel\")\n                                        );\n                                    }}\n                                >\n                                    Pay Invoice\n                                </ButtonPrimary>\n                            );\n                        }}\n                    </ConfirmationDialog>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ConfirmationDialog] } }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AAOA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,+BAAV,EAA2CC,MAA3C,CAAd;AAEAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,0BAAD,qBACI,6BAAC,sCAAD;IACI,KAAK,EAAC,aADV;IAEI,OAAO,EAAC;EAFZ,GAIK,gBAA0B;IAAA,IAAvBC,gBAAuB,QAAvBA,gBAAuB;IACvB,oBACI,6BAAC,qBAAD;MACI,OAAO,EAAE,mBAAM;QACXA,gBAAgB,CACZ;UAAA,OAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAAN;QAAA,CADY,EAEZ;UAAA,OAAMD,OAAO,CAACC,GAAR,CAAY,QAAZ,CAAN;QAAA,CAFY,CAAhB;MAIH;IANL,GAOC,aAPD,CADJ;EAYH,CAjBL,CADJ,CADJ,eAsBI,6BAAC,uBAAD,o7BAtBJ,CAFJ,CADJ;AAmDH,CAtDL,EAuDI;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sCAAD;EAAd;AAAR,CAvDJ"}
+{"version":3,"names":["story","storiesOf","module","add","readme","showConfirmation","console","log","info","propTables","ConfirmationDialog"],"sources":["ConfirmationDialog.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport {\n    Story,\n    StoryReadme,\n    StorySandboxCode,\n    StorySandbox,\n    StorySandboxExample\n} from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../ConfirmationDialog/README.md\";\nimport { ButtonPrimary } from \"./../Button\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\nconst story = storiesOf(\"Components/ConfirmationDialog\", module);\n\nstory.add(\n    \"usage\",\n    () => {\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"Icon with and without ConfirmationDialog\"}>\n                    <StorySandboxExample>\n                        <ConfirmationDialog\n                            title=\"Pay Invoice\"\n                            message=\"Are you sure you want pay this invoice?\"\n                        >\n                            {({ showConfirmation }) => {\n                                return (\n                                    <ButtonPrimary\n                                        onClick={() => {\n                                            showConfirmation(\n                                                () => console.log(\"Confirm\"),\n                                                () => console.log(\"Cancel\")\n                                            );\n                                        }}\n                                    >\n                                        Pay Invoice\n                                    </ButtonPrimary>\n                                );\n                            }}\n                        </ConfirmationDialog>\n                    </StorySandboxExample>\n                    <StorySandboxCode>\n                        {`\n                     <ConfirmationDialog\n                        title=\"Pay Invoice\"\n                        message=\"Are you sure you want pay this invoice?\"\n                    >\n                        {({ showConfirmation }) => {\n                            return (\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        showConfirmation(\n                                            () => console.log(\"Confirm\"),\n                                            () => console.log(\"Cancel\")\n                                        );\n                                    }}\n                                >\n                                    Pay Invoice\n                                </ButtonPrimary>\n                            );\n                        }}\n                    </ConfirmationDialog>\n                    `}\n                    </StorySandboxCode>\n                </StorySandbox>\n            </Story>\n        );\n    },\n    { info: { propTables: [ConfirmationDialog] } }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AAOA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,+BAA+B,EAAEC,MAAM,CAAC;AAEhEF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAA2C,gBAC5D,6BAAC,0BAAmB,qBAChB,6BAAC,sCAAkB;IACf,KAAK,EAAC,aAAa;IACnB,OAAO,EAAC;EAAyC,GAEhD,gBAA0B;IAAA,IAAvBC,gBAAgB,QAAhBA,gBAAgB;IAChB,oBACI,6BAAC,qBAAa;MACV,OAAO,EAAE,mBAAM;QACXA,gBAAgB,CACZ;UAAA,OAAMC,OAAO,CAACC,GAAG,CAAC,SAAS,CAAC;QAAA,GAC5B;UAAA,OAAMD,OAAO,CAACC,GAAG,CAAC,QAAQ,CAAC;QAAA,EAC9B;MACL;IAAE,GACL,aAED,CAAgB;EAExB,CAAC,CACgB,CACH,eACtB,6BAAC,uBAAgB,o7BAsBE,CACR,CACX;AAEhB,CAAC,EACD;EAAEC,IAAI,EAAE;IAAEC,UAAU,EAAE,CAACC,sCAAkB;EAAE;AAAE,CAAC,CACjD"}

package/ConfirmationDialog/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _ConfirmationDialog = require("./ConfirmationDialog");
-
 Object.keys(_ConfirmationDialog).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _ConfirmationDialog[key]) return;
@@ -16,9 +14,7 @@ Object.keys(_ConfirmationDialog).forEach(function (key) {
     }
   });
 });
-
 var _withConfirmation = require("./withConfirmation");
-
 Object.keys(_withConfirmation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _withConfirmation[key]) return;

package/ConfirmationDialog/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ConfirmationDialog\";\nexport * from \"./withConfirmation\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./ConfirmationDialog\";\nexport * from \"./withConfirmation\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/ConfirmationDialog/withConfirmation.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withConfirmation = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _ConfirmationDialog = require("./ConfirmationDialog");
-
 var withConfirmation = function withConfirmation(dialogProps) {
   return function (Component) {
     return function withConfirmationRender(ownProps) {
@@ -24,5 +20,4 @@ var withConfirmation = function withConfirmation(dialogProps) {
     };
   };
 };
-
 exports.withConfirmation = withConfirmation;

package/ConfirmationDialog/withConfirmation.js.map

@@ -1 +1 @@
-{"version":3,"names":["withConfirmation","dialogProps","Component","withConfirmationRender","ownProps","props","showConfirmation"],"sources":["withConfirmation.tsx"],"sourcesContent":["import React from \"react\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\ntype ConfirmationProps = {\n    title?: React.ReactNode;\n    message?: React.ReactNode;\n};\n\ntype WithConfirmationParams = (props: Record<string, any>) => ConfirmationProps;\n\nexport type WithConfirmationProps = {\n    showConfirmation: (confirm: Function, cancel: Function) => void;\n};\n\nexport const withConfirmation = (dialogProps: WithConfirmationParams): Function => {\n    return (Component: typeof React.Component) => {\n        return function withConfirmationRender(ownProps: Record<string, any>) {\n            const props = typeof dialogProps === \"function\" ? dialogProps(ownProps) : dialogProps;\n            return (\n                <ConfirmationDialog {...props}>\n                    {({ showConfirmation }) => (\n                        <Component {...ownProps} showConfirmation={showConfirmation} />\n                    )}\n                </ConfirmationDialog>\n            );\n        };\n    };\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAaO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,WAAD,EAAmD;EAC/E,OAAO,UAACC,SAAD,EAAuC;IAC1C,OAAO,SAASC,sBAAT,CAAgCC,QAAhC,EAA+D;MAClE,IAAMC,KAAK,GAAG,OAAOJ,WAAP,KAAuB,UAAvB,GAAoCA,WAAW,CAACG,QAAD,CAA/C,GAA4DH,WAA1E;MACA,oBACI,6BAAC,sCAAD,EAAwBI,KAAxB,EACK;QAAA,IAAGC,gBAAH,QAAGA,gBAAH;QAAA,oBACG,6BAAC,SAAD,oBAAeF,QAAf;UAAyB,gBAAgB,EAAEE;QAA3C,GADH;MAAA,CADL,CADJ;IAOH,CATD;EAUH,CAXD;AAYH,CAbM"}
+{"version":3,"names":["withConfirmation","dialogProps","Component","withConfirmationRender","ownProps","props","showConfirmation"],"sources":["withConfirmation.tsx"],"sourcesContent":["import React from \"react\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\n\ntype ConfirmationProps = {\n    title?: React.ReactNode;\n    message?: React.ReactNode;\n};\n\ntype WithConfirmationParams = (props: Record<string, any>) => ConfirmationProps;\n\nexport type WithConfirmationProps = {\n    showConfirmation: (confirm: Function, cancel: Function) => void;\n};\n\nexport const withConfirmation = (dialogProps: WithConfirmationParams): Function => {\n    return (Component: typeof React.Component) => {\n        return function withConfirmationRender(ownProps: Record<string, any>) {\n            const props = typeof dialogProps === \"function\" ? dialogProps(ownProps) : dialogProps;\n            return (\n                <ConfirmationDialog {...props}>\n                    {({ showConfirmation }) => (\n                        <Component {...ownProps} showConfirmation={showConfirmation} />\n                    )}\n                </ConfirmationDialog>\n            );\n        };\n    };\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAaO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,WAAmC,EAAe;EAC/E,OAAO,UAACC,SAAiC,EAAK;IAC1C,OAAO,SAASC,sBAAsB,CAACC,QAA6B,EAAE;MAClE,IAAMC,KAAK,GAAG,OAAOJ,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACG,QAAQ,CAAC,GAAGH,WAAW;MACrF,oBACI,6BAAC,sCAAkB,EAAKI,KAAK,EACxB;QAAA,IAAGC,gBAAgB,QAAhBA,gBAAgB;QAAA,oBAChB,6BAAC,SAAS,oBAAKF,QAAQ;UAAE,gBAAgB,EAAEE;QAAiB,GAAG;MAAA,CAClE,CACgB;IAE7B,CAAC;EACL,CAAC;AACL,CAAC;AAAC"}

package/DataTable/DataTable.d.ts

@@ -1,15 +1,22 @@
 /// <reference types="react" />
 import { DataTableCellProps } from "@rmwc/data-table";
+import { OnChangeFn, SortingState } from "@tanstack/react-table";
 import "@rmwc/data-table/data-table.css";
 interface Column<T> {
     header: string | number | JSX.Element;
     cell?: (row: T) => string | number | JSX.Element;
     meta?: DataTableCellProps;
     className?: string;
+    enableSorting?: boolean;
 }
 export declare type Columns<T> = {
     [P in keyof T]?: Column<T>;
 };
+export declare type DefaultData = {
+    selectable?: boolean;
+};
+export declare type Sorting = SortingState;
+export declare type OnSortingChange = OnChangeFn<Sorting>;
 interface Props<T> {
     columns: Columns<T>;
     data: T[];
@@ -17,6 +24,12 @@ interface Props<T> {
     loadingInitial?: boolean;
     stickyColumns?: number;
     stickyRows?: number;
+    bordered?: boolean;
+    sorting?: Sorting;
+    onSortingChange?: OnSortingChange;
+}
+export interface ColumnDirectionProps {
+    direction?: "asc" | "desc";
 }
-export declare const DataTable: <T>({ columns, data, loadingInitial, onSelectRow, stickyColumns, stickyRows }: Props<T>) => JSX.Element;
+export declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, onSortingChange }: Props<T>) => JSX.Element;
 export {};

package/DataTable/DataTable.js

@@ -1,34 +1,21 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataTable = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _dataTable = require("@rmwc/data-table");
-
 var _reactTable = require("@tanstack/react-table");
-
 var _Checkbox = require("../Checkbox");
-
 var _Skeleton = require("../Skeleton");
-
 require("@rmwc/data-table/data-table.css");
-
 var _styled = require("./styled");
-
 var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial) {
   return (0, _react.useMemo)(function () {
     var columnsList = Object.keys(columns).map(function (key) {
@@ -38,9 +25,11 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
     });
     var defaults = columnsList.map(function (column) {
       var id = column.id,
-          _header = column.header,
-          meta = column.meta,
-          _cell = column.cell;
+        _header = column.header,
+        meta = column.meta,
+        _cell = column.cell,
+        _column$enableSorting = column.enableSorting,
+        enableSorting = _column$enableSorting === void 0 ? false : _column$enableSorting;
       return {
         accessorKey: id,
         header: function header() {
@@ -53,6 +42,7 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
             return info.getValue();
           }
         },
+        enableSorting: enableSorting,
         meta: meta
       };
     });
@@ -68,18 +58,21 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
           }
         });
       },
-      cell: function cell(_ref2) {
-        var row = _ref2.row;
+      cell: function cell(info) {
+        if (!info.row.getCanSelect()) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+        }
         return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
-          indeterminate: row.getIsSomeSelected(),
-          value: row.getIsSelected(),
-          onChange: row.getToggleSelectedHandler()
+          indeterminate: info.row.getIsSomeSelected(),
+          value: info.row.getIsSelected(),
+          onChange: info.row.getToggleSelectedHandler()
         });
       },
       meta: {
         hasFormControl: true,
         className: "datatable-select-column"
-      }
+      },
+      enableSorting: false
     }] : [];
     return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
       if (loadingInitial) {
@@ -89,44 +82,57 @@ var defineColumns = function defineColumns(columns, onSelectRow, loadingInitial)
           }
         });
       }
-
       return column;
     });
   }, [columns, onSelectRow, loadingInitial]);
 };
-
 var defineData = function defineData(data, loadingInitial) {
   return (0, _react.useMemo)(function () {
     if (loadingInitial) {
       return Array(10).fill({});
     }
-
     return data;
   }, [data, loadingInitial]);
 };
-
+var ColumnDirection = function ColumnDirection(_ref2) {
+  var direction = _ref2.direction;
+  if (direction) {
+    return /*#__PURE__*/_react.default.createElement(_styled.ColumnDirectionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.ColumnDirectionIcon, {
+      direction: direction
+    }));
+  }
+  return null;
+};
 var DataTable = function DataTable(_ref3) {
-  var columns = _ref3.columns,
-      data = _ref3.data,
-      loadingInitial = _ref3.loadingInitial,
-      onSelectRow = _ref3.onSelectRow,
-      stickyColumns = _ref3.stickyColumns,
-      stickyRows = _ref3.stickyRows;
-
+  var data = _ref3.data,
+    columns = _ref3.columns,
+    onSelectRow = _ref3.onSelectRow,
+    loadingInitial = _ref3.loadingInitial,
+    stickyColumns = _ref3.stickyColumns,
+    stickyRows = _ref3.stickyRows,
+    bordered = _ref3.bordered,
+    sorting = _ref3.sorting,
+    onSortingChange = _ref3.onSortingChange;
   var _React$useState = _react.default.useState({}),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      rowSelection = _React$useState2[0],
-      setRowSelection = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    rowSelection = _React$useState2[0],
+    setRowSelection = _React$useState2[1];
   var table = (0, _reactTable.useReactTable)({
     data: defineData(data, loadingInitial),
     columns: defineColumns(columns, onSelectRow, loadingInitial),
     getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
     state: {
-      rowSelection: rowSelection
+      rowSelection: rowSelection,
+      sorting: sorting
+    },
+    enableRowSelection: function enableRowSelection(row) {
+      return row.original.selectable || false;
     },
-    enableRowSelection: !!onSelectRow,
-    onRowSelectionChange: setRowSelection
+    onRowSelectionChange: setRowSelection,
+    enableSorting: !!onSortingChange,
+    manualSorting: true,
+    onSortingChange: onSortingChange
   });
   (0, _react.useEffect)(function () {
     if (onSelectRow && typeof onSelectRow === "function") {
@@ -138,14 +144,24 @@ var DataTable = function DataTable(_ref3) {
   }, [rowSelection]);
   return /*#__PURE__*/_react.default.createElement(_styled.Table, {
     stickyColumns: stickyColumns,
-    stickyRows: stickyRows
+    stickyRows: stickyRows,
+    bordered: bordered
   }, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableContent, null, /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHead, null, table.getHeaderGroups().map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
       key: headerGroup.id
-    }, headerGroup.headers.map(function (header) {
+    }, headerGroup.headers.map(function (_ref4) {
+      var id = _ref4.id,
+        isPlaceholder = _ref4.isPlaceholder,
+        column = _ref4.column,
+        getContext = _ref4.getContext;
       return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableHeadCell, Object.assign({
-        key: header.id
-      }, header.column.columnDef.meta), header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()));
+        key: id
+      }, column.columnDef.meta), isPlaceholder ? null : /*#__PURE__*/_react.default.createElement(_styled.ColumnHeaderWrapper, {
+        onClick: column.getToggleSortingHandler(),
+        sortable: column.getCanSort()
+      }, (0, _reactTable.flexRender)(column.columnDef.header, getContext()), /*#__PURE__*/_react.default.createElement(ColumnDirection, {
+        direction: column.getIsSorted() || undefined
+      })));
     }));
   })), /*#__PURE__*/_react.default.createElement(_dataTable.DataTableBody, null, table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
@@ -158,5 +174,4 @@ var DataTable = function DataTable(_ref3) {
     }));
   }))));
 };
-
 exports.DataTable = DataTable;

package/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","DataTable","stickyColumns","stickyRows","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","state","enableRowSelection","onRowSelectionChange","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","columnDef","isPlaceholder","flexRender","getContext","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport { flexRender, getCoreRowModel, useReactTable, ColumnDef } from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\ninterface Props<T> {\n    /*\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /*\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /*\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                meta\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\n                              />\n                          ),\n                      cell: ({ row }) => (\n                          <Checkbox\n                              indeterminate={row.getIsSomeSelected()}\n                              value={row.getIsSelected()}\n                              onChange={row.getToggleSelectedHandler()}\n                          />\n                      ),\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      }\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nexport const DataTable = <T,>({\n    columns,\n    data,\n    loadingInitial,\n    onSelectRow,\n    stickyColumns,\n    stickyRows\n}: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        state: {\n            rowSelection\n        },\n        enableRowSelection: !!onSelectRow,\n        onRowSelectionChange: setRowSelection\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(header => (\n                                <DataTableHeadCell\n                                    key={header.id}\n                                    {...header.column.columnDef.meta}\n                                >\n                                    {header.isPlaceholder\n                                        ? null\n                                        : flexRender(\n                                              header.column.columnDef.header,\n                                              header.getContext()\n                                          )}\n                                </DataTableHeadCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["defineColumns","columns","onSelectRow","loadingInitial","useMemo","columnsList","Object","keys","map","key","id","defaults","column","header","meta","cell","enableSorting","accessorKey","info","row","original","getValue","select","table","getIsSomeRowsSelected","getIsAllRowsSelected","e","toggleAllPageRowsSelected","getCanSelect","getIsSomeSelected","getIsSelected","getToggleSelectedHandler","hasFormControl","className","defineData","data","Array","fill","ColumnDirection","direction","DataTable","stickyColumns","stickyRows","bordered","sorting","onSortingChange","React","useState","rowSelection","setRowSelection","useReactTable","getCoreRowModel","getSortedRowModel","state","enableRowSelection","selectable","onRowSelectionChange","manualSorting","useEffect","dataSelected","getSelectedRowModel","flatRows","getHeaderGroups","headerGroup","headers","isPlaceholder","getContext","columnDef","getToggleSortingHandler","getCanSort","flexRender","getIsSorted","undefined","getRowModel","rows","hasOwnProperty","index","getVisibleCells"],"sources":["DataTable.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useMemo } from \"react\";\n\nimport {\n    DataTableContent,\n    DataTableHead,\n    DataTableRow,\n    DataTableHeadCell,\n    DataTableBody,\n    DataTableCell,\n    DataTableCellProps\n} from \"@rmwc/data-table\";\n\nimport {\n    flexRender,\n    getCoreRowModel,\n    useReactTable,\n    ColumnDef,\n    getSortedRowModel,\n    OnChangeFn,\n    SortingState\n} from \"@tanstack/react-table\";\n\nimport { Checkbox } from \"~/Checkbox\";\nimport { Skeleton } from \"~/Skeleton\";\n\nimport \"@rmwc/data-table/data-table.css\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper, ColumnHeaderWrapper, Table } from \"./styled\";\n\ninterface Column<T> {\n    /*\n     * Column header component.\n     */\n    header: string | number | JSX.Element;\n    /*\n     * Cell renderer, receives the full row and returns the value to render inside the cell.\n     */\n    cell?: (row: T) => string | number | JSX.Element;\n    /*\n     * Additional props to add to both header and row cells. Refer to RMWC documentation.\n     */\n    meta?: DataTableCellProps;\n    /*\n     * Column class names.\n     */\n    className?: string;\n    /*\n     * Enable column sorting.\n     */\n    enableSorting?: boolean;\n}\n\nexport type Columns<T> = {\n    [P in keyof T]?: Column<T>;\n};\n\nexport type DefaultData = {\n    /*\n     * Define if a specific row can be selected.\n     */\n    selectable?: boolean;\n};\n\nexport type Sorting = SortingState;\n\nexport type OnSortingChange = OnChangeFn<Sorting>;\n\ninterface Props<T> {\n    /*\n     * Columns definition.\n     */\n    columns: Columns<T>;\n    /*\n     * Data to display into DataTable body.\n     */\n    data: T[];\n    /*\n     * Callback that receives the selected rows.\n     */\n    onSelectRow?: (rows: T[] | []) => void;\n    /*\n     * Render the skeleton state at the initial data loading.\n     */\n    loadingInitial?: boolean;\n    /*\n     * The number of columns to affix to the side of the table when scrolling.\n     */\n    stickyColumns?: number;\n    /*\n     * The number of rows to affix to the top of the table when scrolling.\n     */\n    stickyRows?: number;\n    /*\n     * Show or hide borders.\n     */\n    bordered?: boolean;\n    /*\n     * Sorting state.\n     */\n    sorting?: Sorting;\n    /*\n     * Callback that receives current sorting state.\n     */\n    onSortingChange?: OnSortingChange;\n}\n\nexport interface ColumnDirectionProps {\n    direction?: \"asc\" | \"desc\";\n}\n\nconst defineColumns = <T,>(\n    columns: Props<T>[\"columns\"],\n    onSelectRow: Props<T>[\"onSelectRow\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): ColumnDef<T>[] =>\n    useMemo(() => {\n        const columnsList = Object.keys(columns).map(key => ({\n            id: key,\n            ...columns[key as keyof typeof columns]\n        }));\n\n        const defaults: ColumnDef<T>[] = columnsList.map(column => {\n            const { id, header, meta, cell, enableSorting = false } = column;\n\n            return {\n                accessorKey: id,\n                header: () => header,\n                cell: info => {\n                    if (cell && typeof cell === \"function\") {\n                        return cell(info.row.original);\n                    } else {\n                        return info.getValue();\n                    }\n                },\n                enableSorting,\n                meta\n            };\n        });\n\n        const select: ColumnDef<T>[] = !!onSelectRow\n            ? [\n                  {\n                      id: \"datatable-select-column\",\n                      header: ({ table }) =>\n                          !loadingInitial && (\n                              <Checkbox\n                                  indeterminate={table.getIsSomeRowsSelected()}\n                                  value={table.getIsAllRowsSelected()}\n                                  onChange={e => table.toggleAllPageRowsSelected(e)}\n                              />\n                          ),\n                      cell: info => {\n                          if (!info.row.getCanSelect()) {\n                              return <></>;\n                          }\n                          return (\n                              <Checkbox\n                                  indeterminate={info.row.getIsSomeSelected()}\n                                  value={info.row.getIsSelected()}\n                                  onChange={info.row.getToggleSelectedHandler()}\n                              />\n                          );\n                      },\n                      meta: {\n                          hasFormControl: true,\n                          className: \"datatable-select-column\"\n                      },\n                      enableSorting: false\n                  }\n              ]\n            : [];\n\n        return [...select, ...defaults].map(column => {\n            if (loadingInitial) {\n                return {\n                    ...column,\n                    cell: () => <Skeleton />\n                };\n            }\n\n            return column;\n        });\n    }, [columns, onSelectRow, loadingInitial]);\n\nconst defineData = <T,>(\n    data: Props<T>[\"data\"],\n    loadingInitial: Props<T>[\"loadingInitial\"]\n): T[] => {\n    return useMemo(() => {\n        if (loadingInitial) {\n            return Array(10).fill({});\n        }\n        return data;\n    }, [data, loadingInitial]);\n};\n\nconst ColumnDirection = ({ direction }: ColumnDirectionProps): ReactElement | null => {\n    if (direction) {\n        return (\n            <ColumnDirectionWrapper>\n                <ColumnDirectionIcon direction={direction} />\n            </ColumnDirectionWrapper>\n        );\n    }\n\n    return null;\n};\n\nexport const DataTable = <T extends Object & DefaultData>({\n    data,\n    columns,\n    onSelectRow,\n    loadingInitial,\n    stickyColumns,\n    stickyRows,\n    bordered,\n    sorting,\n    onSortingChange\n}: Props<T>) => {\n    const [rowSelection, setRowSelection] = React.useState({});\n\n    const table = useReactTable({\n        data: defineData(data, loadingInitial),\n        columns: defineColumns(columns, onSelectRow, loadingInitial),\n        getCoreRowModel: getCoreRowModel(),\n        getSortedRowModel: getSortedRowModel(),\n        state: {\n            rowSelection,\n            sorting\n        },\n        enableRowSelection: row => row.original.selectable || false,\n        onRowSelectionChange: setRowSelection,\n        enableSorting: !!onSortingChange,\n        manualSorting: true,\n        onSortingChange\n    });\n\n    useEffect(() => {\n        if (onSelectRow && typeof onSelectRow === \"function\") {\n            const dataSelected = table.getSelectedRowModel().flatRows.map(row => row.original);\n            onSelectRow(dataSelected);\n        }\n    }, [rowSelection]);\n\n    return (\n        <Table stickyColumns={stickyColumns} stickyRows={stickyRows} bordered={bordered}>\n            <DataTableContent>\n                <DataTableHead>\n                    {table.getHeaderGroups().map(headerGroup => (\n                        <DataTableRow key={headerGroup.id}>\n                            {headerGroup.headers.map(\n                                ({ id, isPlaceholder, column, getContext }) => (\n                                    <DataTableHeadCell key={id} {...column.columnDef.meta}>\n                                        {isPlaceholder ? null : (\n                                            <ColumnHeaderWrapper\n                                                onClick={column.getToggleSortingHandler()}\n                                                sortable={column.getCanSort()}\n                                            >\n                                                {flexRender(column.columnDef.header, getContext())}\n                                                <ColumnDirection\n                                                    direction={column.getIsSorted() || undefined}\n                                                />\n                                            </ColumnHeaderWrapper>\n                                        )}\n                                    </DataTableHeadCell>\n                                )\n                            )}\n                        </DataTableRow>\n                    ))}\n                </DataTableHead>\n                <DataTableBody>\n                    {table.getRowModel().rows.map(row => (\n                        <DataTableRow\n                            key={row.id}\n                            selected={rowSelection.hasOwnProperty(row.index)}\n                        >\n                            {row.getVisibleCells().map(cell => (\n                                <DataTableCell key={cell.id} {...cell.column.columnDef.meta}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </DataTableCell>\n                            ))}\n                        </DataTableRow>\n                    ))}\n                </DataTableBody>\n            </DataTableContent>\n        </Table>\n    );\n};\n"],"mappings":"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"}

package/DataTable/DataTable.stories.js

@@ -1,17 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@storybook/react");
-
 var _Story = require("@webiny/storybook-utils/Story");
-
 var _README = _interopRequireDefault(require("./../DataTable/README.md"));
-
 var _DataTable = require("./DataTable");
-
 var story = (0, _react2.storiesOf)("Components/DataTable", module);
 story.add("usage", function () {
   var data = [{

package/DataTable/DataTable.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["story","storiesOf","module","add","data","name","createdBy","lastModified","status","columns","header","cell","row","toUpperCase","meta","alignEnd","readme","console","log","info","propTables","DataTable"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataTable/README.md\";\nimport { Columns, DataTable } from \"./DataTable\";\n\nconst story = storiesOf(\"Components/DataTable\", module);\n\ninterface Entry {\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const data: Entry[] = [\n            {\n                name: \"Page 1\",\n                createdBy: \"John Doe\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                name: \"Page 2\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 day ago\",\n                status: \"Published\"\n            },\n            {\n                name: \"Page 3\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            }\n        ];\n\n        const columns: Columns<Entry> = {\n            name: {\n                header: \"Title\"\n            },\n            createdBy: {\n                header: \"Author\",\n                cell: row => <em>{row.createdBy.toUpperCase()}</em>\n            },\n            lastModified: {\n                header: \"Last Modified\"\n            },\n            status: {\n                header: \"Status\",\n                meta: {\n                    alignEnd: true\n                }\n            }\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple DataTable.\"}>\n                    <DataTable data={data} columns={columns} />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable with selectable rows\"}>\n                    <DataTable\n                        data={data}\n                        columns={columns}\n                        onSelectRow={row =>\n                            console.log(\"Do whatever you like with the selected row data\", row)\n                        }\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable at initial loading state\"}>\n                    <DataTable data={data} columns={columns} loadingInitial={true} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [DataTable]\n        }\n    }\n);\n"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAA,EAAU,sBAAV,EAAkCC,MAAlC,CAAd;AASAF,KAAK,CAACG,GAAN,CACI,OADJ,EAEI,YAAM;EACF,IAAMC,IAAa,GAAG,CAClB;IACIC,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,YAHlB;IAIIC,MAAM,EAAE;EAJZ,CADkB,EAOlB;IACIH,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,WAHlB;IAIIC,MAAM,EAAE;EAJZ,CAPkB,EAalB;IACIH,IAAI,EAAE,QADV;IAEIC,SAAS,EAAE,UAFf;IAGIC,YAAY,EAAE,YAHlB;IAIIC,MAAM,EAAE;EAJZ,CAbkB,CAAtB;EAqBA,IAAMC,OAAuB,GAAG;IAC5BJ,IAAI,EAAE;MACFK,MAAM,EAAE;IADN,CADsB;IAI5BJ,SAAS,EAAE;MACPI,MAAM,EAAE,QADD;MAEPC,IAAI,EAAE,cAAAC,GAAG;QAAA,oBAAI,yCAAKA,GAAG,CAACN,SAAJ,CAAcO,WAAd,EAAL,CAAJ;MAAA;IAFF,CAJiB;IAQ5BN,YAAY,EAAE;MACVG,MAAM,EAAE;IADE,CARc;IAW5BF,MAAM,EAAE;MACJE,MAAM,EAAE,QADJ;MAEJI,IAAI,EAAE;QACFC,QAAQ,EAAE;MADR;IAFF;EAXoB,CAAhC;EAmBA,oBACI,6BAAC,YAAD,qBACI,6BAAC,kBAAD,QAAcC,eAAd,CADJ,eAEI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IAAW,IAAI,EAAEZ,IAAjB;IAAuB,OAAO,EAAEK;EAAhC,EADJ,CAFJ,eAKI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IACI,IAAI,EAAEL,IADV;IAEI,OAAO,EAAEK,OAFb;IAGI,WAAW,EAAE,qBAAAG,GAAG;MAAA,OACZK,OAAO,CAACC,GAAR,CAAY,iDAAZ,EAA+DN,GAA/D,CADY;IAAA;EAHpB,EADJ,CALJ,eAcI,6BAAC,mBAAD;IAAc,KAAK,EAAE;EAArB,gBACI,6BAAC,oBAAD;IAAW,IAAI,EAAER,IAAjB;IAAuB,OAAO,EAAEK,OAAhC;IAAyC,cAAc,EAAE;EAAzD,EADJ,CAdJ,CADJ;AAoBH,CA/DL,EAgEI;EACIU,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,oBAAD;EADV;AADV,CAhEJ"}
+{"version":3,"names":["story","storiesOf","module","add","data","name","createdBy","lastModified","status","columns","header","cell","row","toUpperCase","meta","alignEnd","readme","console","log","info","propTables","DataTable"],"sources":["DataTable.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { Story, StoryReadme, StorySandbox } from \"@webiny/storybook-utils/Story\";\nimport readme from \"./../DataTable/README.md\";\nimport { Columns, DataTable } from \"./DataTable\";\n\nconst story = storiesOf(\"Components/DataTable\", module);\n\ninterface Entry {\n    name: string;\n    createdBy: string;\n    lastModified: string;\n    status: string;\n}\n\nstory.add(\n    \"usage\",\n    () => {\n        const data: Entry[] = [\n            {\n                name: \"Page 1\",\n                createdBy: \"John Doe\",\n                lastModified: \"3 days ago\",\n                status: \"Draft\"\n            },\n            {\n                name: \"Page 2\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 day ago\",\n                status: \"Published\"\n            },\n            {\n                name: \"Page 3\",\n                createdBy: \"John Doe\",\n                lastModified: \"1 hour ago\",\n                status: \"Published\"\n            }\n        ];\n\n        const columns: Columns<Entry> = {\n            name: {\n                header: \"Title\"\n            },\n            createdBy: {\n                header: \"Author\",\n                cell: row => <em>{row.createdBy.toUpperCase()}</em>\n            },\n            lastModified: {\n                header: \"Last Modified\"\n            },\n            status: {\n                header: \"Status\",\n                meta: {\n                    alignEnd: true\n                }\n            }\n        };\n\n        return (\n            <Story>\n                <StoryReadme>{readme}</StoryReadme>\n                <StorySandbox title={\"A simple DataTable.\"}>\n                    <DataTable data={data} columns={columns} />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable with selectable rows\"}>\n                    <DataTable\n                        data={data}\n                        columns={columns}\n                        onSelectRow={row =>\n                            console.log(\"Do whatever you like with the selected row data\", row)\n                        }\n                    />\n                </StorySandbox>\n                <StorySandbox title={\"DataTable at initial loading state\"}>\n                    <DataTable data={data} columns={columns} loadingInitial={true} />\n                </StorySandbox>\n            </Story>\n        );\n    },\n    {\n        info: {\n            propTables: [DataTable]\n        }\n    }\n);\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AAEA,IAAMA,KAAK,GAAG,IAAAC,iBAAS,EAAC,sBAAsB,EAAEC,MAAM,CAAC;AASvDF,KAAK,CAACG,GAAG,CACL,OAAO,EACP,YAAM;EACF,IAAMC,IAAa,GAAG,CAClB;IACIC,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,YAAY;IAC1BC,MAAM,EAAE;EACZ,CAAC,EACD;IACIH,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,WAAW;IACzBC,MAAM,EAAE;EACZ,CAAC,EACD;IACIH,IAAI,EAAE,QAAQ;IACdC,SAAS,EAAE,UAAU;IACrBC,YAAY,EAAE,YAAY;IAC1BC,MAAM,EAAE;EACZ,CAAC,CACJ;EAED,IAAMC,OAAuB,GAAG;IAC5BJ,IAAI,EAAE;MACFK,MAAM,EAAE;IACZ,CAAC;IACDJ,SAAS,EAAE;MACPI,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE,cAAAC,GAAG;QAAA,oBAAI,yCAAKA,GAAG,CAACN,SAAS,CAACO,WAAW,EAAE,CAAM;MAAA;IACvD,CAAC;IACDN,YAAY,EAAE;MACVG,MAAM,EAAE;IACZ,CAAC;IACDF,MAAM,EAAE;MACJE,MAAM,EAAE,QAAQ;MAChBI,IAAI,EAAE;QACFC,QAAQ,EAAE;MACd;IACJ;EACJ,CAAC;EAED,oBACI,6BAAC,YAAK,qBACF,6BAAC,kBAAW,QAAEC,eAAM,CAAe,eACnC,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAsB,gBACvC,6BAAC,oBAAS;IAAC,IAAI,EAAEZ,IAAK;IAAC,OAAO,EAAEK;EAAQ,EAAG,CAChC,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAiC,gBAClD,6BAAC,oBAAS;IACN,IAAI,EAAEL,IAAK;IACX,OAAO,EAAEK,OAAQ;IACjB,WAAW,EAAE,qBAAAG,GAAG;MAAA,OACZK,OAAO,CAACC,GAAG,CAAC,iDAAiD,EAAEN,GAAG,CAAC;IAAA;EACtE,EACH,CACS,eACf,6BAAC,mBAAY;IAAC,KAAK,EAAE;EAAqC,gBACtD,6BAAC,oBAAS;IAAC,IAAI,EAAER,IAAK;IAAC,OAAO,EAAEK,OAAQ;IAAC,cAAc,EAAE;EAAK,EAAG,CACtD,CACX;AAEhB,CAAC,EACD;EACIU,IAAI,EAAE;IACFC,UAAU,EAAE,CAACC,oBAAS;EAC1B;AACJ,CAAC,CACJ"}

package/DataTable/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _DataTable = require("./DataTable");
-
 Object.keys(_DataTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _DataTable[key]) return;

package/DataTable/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DataTable\";\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/DataTable/styled.d.ts

@@ -1,2 +1,30 @@
+/// <reference types="react" />
+/// <reference types="react" />
+/// <reference types="web" />
 import { DataTableProps } from "@rmwc/data-table";
-export declare const Table: import("@emotion/styled-base").StyledComponent<{}, DataTableProps, object>;
+import { ColumnDirectionProps } from "./DataTable";
+interface TableProps extends DataTableProps {
+    bordered?: boolean;
+}
+export declare const Table: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+} & TableProps, {}, {}>;
+interface ColumnHeaderWrapperProps {
+    sortable: boolean;
+}
+export declare const ColumnHeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ColumnHeaderWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnDirectionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ColumnDirectionIcon: import("@emotion/styled").StyledComponent<import("react").SVGProps<SVGSVGElement> & {
+    alt?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & ColumnDirectionProps, {}, {}>;
+export {};

package/DataTable/styled.js

@@ -1,18 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Table = void 0;
-
+exports.Table = exports.ColumnHeaderWrapper = exports.ColumnDirectionWrapper = exports.ColumnDirectionIcon = void 0;
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
+var _arrow_downward = require("@material-design-icons/svg/outlined/arrow_downward.svg");
 var _dataTable = require("@rmwc/data-table");
-
 var Table = /*#__PURE__*/(0, _styled.default)(_dataTable.DataTable, {
   label: "Table",
   target: "er5nqo40"
-})("width:100%;th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
-exports.Table = Table;
+})("width:100%;border-width:", function (props) {
+  return props.bordered ? "1px" : "0px";
+}, ";th,td{vertical-align:middle;}.datatable-select-column{width:56px;}");
+exports.Table = Table;
+var ColumnHeaderWrapper = /*#__PURE__*/(0, _styled.default)("div", {
+  label: "ColumnHeaderWrapper",
+  target: "er5nqo41"
+})("cursor:", function (props) {
+  return props.sortable ? "pointer" : "cursort";
+}, ";display:flex;align-items:center;justify-content:start;");
+exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
+var ColumnDirectionWrapper = /*#__PURE__*/(0, _styled.default)("span", {
+  label: "ColumnDirectionWrapper",
+  target: "er5nqo42"
+})("display:inline-flex;align-items:center;justify-content:center;height:16px;width:16px;margin:0 0 0 4px;");
+exports.ColumnDirectionWrapper = ColumnDirectionWrapper;
+var ColumnDirectionIcon = /*#__PURE__*/(0, _styled.default)(_arrow_downward.ReactComponent, {
+  label: "ColumnDirectionIcon",
+  target: "er5nqo43"
+})("transform:", function (props) {
+  return props.direction === "asc" ? "rotate(180deg)" : "rotate(0deg)";
+}, ";");
+exports.ColumnDirectionIcon = ColumnDirectionIcon;

package/DataTable/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["Table","styled","RmwcDataTable"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\n\nexport const Table = styled(RmwcDataTable)<DataTableProps>`\n    width: 100%;\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEO,IAAMA,KAAK,oBAAGC,eAAH,EAAUC,oBAAV;EAAA;EAAA;AAAA,mFAAX"}
+{"version":3,"names":["Table","styled","RmwcDataTable","props","bordered","ColumnHeaderWrapper","sortable","ColumnDirectionWrapper","ColumnDirectionIcon","ArrowDown","direction"],"sources":["styled.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nimport { ReactComponent as ArrowDown } from \"@material-design-icons/svg/outlined/arrow_downward.svg\";\nimport { DataTable as RmwcDataTable, DataTableProps } from \"@rmwc/data-table\";\nimport { ColumnDirectionProps } from \"~/DataTable/DataTable\";\n\ninterface TableProps extends DataTableProps {\n    bordered?: boolean;\n}\n\nexport const Table = styled(RmwcDataTable)<TableProps>`\n    width: 100%;\n    border-width: ${props => (props.bordered ? \"1px\" : \"0px\")};\n\n    th,\n    td {\n        vertical-align: middle;\n    }\n\n    .datatable-select-column {\n        width: 56px;\n    }\n`;\n\ninterface ColumnHeaderWrapperProps {\n    sortable: boolean;\n}\n\nexport const ColumnHeaderWrapper = styled(\"div\")<ColumnHeaderWrapperProps>`\n    cursor: ${props => (props.sortable ? \"pointer\" : \"cursort\")};\n    display: flex;\n    align-items: center;\n    justify-content: start;\n`;\n\nexport const ColumnDirectionWrapper = styled(\"span\")`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    height: 16px;\n    width: 16px;\n    margin: 0 0 0 4px;\n`;\n\nexport const ColumnDirectionIcon = styled(ArrowDown)<ColumnDirectionProps>`\n    transform: ${props => (props.direction === \"asc\" ? \"rotate(180deg)\" : \"rotate(0deg)\")};\n`;\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAOO,IAAMA,KAAK,oBAAGC,eAAM,EAACC,oBAAa;EAAA;EAAA;AAAA,+BAErB,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,wEAU5D;AAAC;AAMK,IAAMC,mBAAmB,oBAAGJ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,cACjC,UAAAE,KAAK;EAAA,OAAKA,KAAK,CAACG,QAAQ,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC,4DAI9D;AAAC;AAEK,IAAMC,sBAAsB,oBAAGN,eAAM,EAAC,MAAM;EAAA;EAAA;AAAA,4GAOlD;AAAC;AAEK,IAAMO,mBAAmB,oBAAGP,eAAM,EAACQ,8BAAS;EAAA;EAAA;AAAA,iBAClC,UAAAN,KAAK;EAAA,OAAKA,KAAK,CAACO,SAAS,KAAK,KAAK,GAAG,gBAAgB,GAAG,cAAc;AAAA,CAAC,MACxF;AAAC"}