@webiny/ui 5.39.0-beta.1 → 5.39.0-beta.2

package/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactColor","_emotion","_FormElementMessage","_classnames","classes","label","css","marginBottom","color","width","height","borderRadius","swatch","padding","background","boxShadow","display","cursor","popover","position","zIndex","classNames","top","right","bottom","left","disable","opacity","pointerEvents","ColorPicker","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","showColorPicker","setState","state","onChange","props","hex","_createClass2","key","value","render","_this$props","description","validation","backgroundColorStyle","_ref","validationIsValid","isValid","validationMessage","message","createElement","className","onClick","handleClick","style","handleClose","SketchPicker","handleChange","FormElementMessage","error","React","Component","exports"],"sources":["ColorPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { css } from \"emotion\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    color: css({\n        width: \"36px\",\n        height: \"14px\",\n        borderRadius: \"2px\"\n    }),\n    swatch: css({\n        padding: \"5px\",\n        background: \"#fff\",\n        borderRadius: \"1px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,.1)\",\n        display: \"inline-block\",\n        cursor: \"pointer\"\n    }),\n    // @ts-ignore\n    popover: css({\n        position: \"absolute\",\n        zIndex: \"2\"\n    }),\n    classNames: css({\n        position: \"fixed\",\n        top: \"0px\",\n        right: \"0px\",\n        bottom: \"0px\",\n        left: \"0px\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface ColorPickerState {\n    showColorPicker: boolean;\n}\n\ninterface ColorPickerProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n}\n\n/**\n * Use ColorPicker component to display a list of choices, once the handler is triggered.\n */\nclass ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    public override state = {\n        showColorPicker: false\n    };\n\n    handleClick = () => {\n        this.setState({ showColorPicker: !this.state.showColorPicker });\n    };\n\n    handleClose = () => {\n        this.setState({ showColorPicker: false });\n    };\n\n    handleChange = (color: ColorResult) => {\n        const { onChange } = this.props;\n        onChange && onChange(color.hex);\n    };\n\n    public override render() {\n        const { value, label, disable, description, validation } = this.props;\n\n        let backgroundColorStyle = {};\n        if (value) {\n            backgroundColorStyle = {\n                background: `${value}`\n            };\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={classNames({ [classes.disable]: disable })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n\n                <div>\n                    <div className={classes.swatch} onClick={this.handleClick}>\n                        <div className={classes.color} style={backgroundColorStyle} />\n                    </div>\n                    {this.state.showColorPicker ? (\n                        <div className={classes.popover}>\n                            <div className={classes.classNames} onClick={this.handleClose} />\n                            <SketchPicker color={value || \"\"} onChange={this.handleChange} />\n                        </div>\n                    ) : null}\n                </div>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactColor","_emotion","_FormElementMessage","_classnames","classes","label","css","marginBottom","color","width","height","borderRadius","swatch","padding","background","boxShadow","display","cursor","popover","position","zIndex","classNames","top","right","bottom","left","disable","opacity","pointerEvents","ColorPicker","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","showColorPicker","setState","state","onChange","props","hex","_createClass2","key","value","render","_this$props","description","validation","backgroundColorStyle","_ref","validationIsValid","isValid","validationMessage","message","createElement","className","onClick","handleClick","style","handleClose","SketchPicker","handleChange","FormElementMessage","error","React","Component","exports"],"sources":["ColorPicker.tsx"],"sourcesContent":["import React from \"react\";\nimport { SketchPicker, ColorResult } from \"react-color\";\nimport { css } from \"emotion\";\nimport { FormComponentProps } from \"~/types\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport classNames from \"classnames\";\n\nconst classes = {\n    label: css({\n        marginBottom: \"10px !important\"\n    }),\n    color: css({\n        width: \"36px\",\n        height: \"14px\",\n        borderRadius: \"2px\"\n    }),\n    swatch: css({\n        padding: \"5px\",\n        background: \"#fff\",\n        borderRadius: \"1px\",\n        boxShadow: \"0 0 0 1px rgba(0,0,0,.1)\",\n        display: \"inline-block\",\n        cursor: \"pointer\"\n    }),\n    // @ts-expect-error\n    popover: css({\n        position: \"absolute\",\n        zIndex: \"2\"\n    }),\n    classNames: css({\n        position: \"fixed\",\n        top: \"0px\",\n        right: \"0px\",\n        bottom: \"0px\",\n        left: \"0px\"\n    }),\n    disable: css({\n        opacity: 0.7,\n        pointerEvents: \"none\"\n    })\n};\n\ninterface ColorPickerState {\n    showColorPicker: boolean;\n}\n\ninterface ColorPickerProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is color picker disabled?\n    disable?: boolean;\n\n    // Description beneath the color picker.\n    description?: string;\n}\n\n/**\n * Use ColorPicker component to display a list of choices, once the handler is triggered.\n */\nclass ColorPicker extends React.Component<ColorPickerProps, ColorPickerState> {\n    public override state = {\n        showColorPicker: false\n    };\n\n    handleClick = () => {\n        this.setState({ showColorPicker: !this.state.showColorPicker });\n    };\n\n    handleClose = () => {\n        this.setState({ showColorPicker: false });\n    };\n\n    handleChange = (color: ColorResult) => {\n        const { onChange } = this.props;\n        onChange && onChange(color.hex);\n    };\n\n    public override render() {\n        const { value, label, disable, description, validation } = this.props;\n\n        let backgroundColorStyle = {};\n        if (value) {\n            backgroundColorStyle = {\n                background: `${value}`\n            };\n        }\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={classNames({ [classes.disable]: disable })}>\n                {label && (\n                    <div\n                        className={classNames(\n                            \"mdc-text-field-helper-text mdc-text-field-helper-text--persistent\",\n                            classes.label\n                        )}\n                    >\n                        {label}\n                    </div>\n                )}\n\n                <div>\n                    <div className={classes.swatch} onClick={this.handleClick}>\n                        <div className={classes.color} style={backgroundColorStyle} />\n                    </div>\n                    {this.state.showColorPicker ? (\n                        <div className={classes.popover}>\n                            <div className={classes.classNames} onClick={this.handleClose} />\n                            <SketchPicker color={value || \"\"} onChange={this.handleChange} />\n                        </div>\n                    ) : null}\n                </div>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n            </div>\n        );\n    }\n}\n\nexport { ColorPicker };\n"],"mappings":"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"}

package/ConfirmationDialog/ConfirmationDialog.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConfirmationDialog = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -57,52 +55,27 @@ var ConfirmationDialog = /*#__PURE__*/function (_React$Component) {
         show: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAccept", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-      var onAccept;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            onAccept = _this.callbacks.onAccept;
-            if (!(typeof onAccept === "function")) {
-              _context.next = 6;
-              break;
-            }
-            _this.setState({
-              loading: true
-            });
-            _context.next = 5;
-            return onAccept();
-          case 5:
-            if (_this.__isMounted) {
-              _this.setState({
-                loading: false,
-                show: false
-              });
-            }
-          case 6:
-          case "end":
-            return _context.stop();
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onAccept", async function () {
+      var onAccept = _this.callbacks.onAccept;
+      if (typeof onAccept === "function") {
+        _this.setState({
+          loading: true
+        });
+        await onAccept();
+        if (_this.__isMounted) {
+          _this.setState({
+            loading: false,
+            show: false
+          });
         }
-      }, _callee);
-    })));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCancel", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
-      var onCancel;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
-          case 0:
-            onCancel = _this.callbacks.onCancel;
-            if (!(typeof onCancel === "function")) {
-              _context2.next = 4;
-              break;
-            }
-            _context2.next = 4;
-            return onCancel();
-          case 4:
-          case "end":
-            return _context2.stop();
-        }
-      }, _callee2);
-    })));
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCancel", async function () {
+      var onCancel = _this.callbacks.onCancel;
+      if (typeof onCancel === "function") {
+        await onCancel();
+      }
+    });
     return _this;
   }
   (0, _createClass2.default)(ConfirmationDialog, [{

package/ConfirmationDialog/ConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_Dialog","_Progress","_Button","ConfirmationDialog","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","onAccept","onCancel","show","loading","callbacks","setState","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","wrap","_callee$","_context","prev","next","__isMounted","stop","_callee2","_callee2$","_context2","_createClass2","key","value","componentDidMount","componentWillUnmount","render","createElement","Fragment","Dialog","style","props","open","state","onClose","hideConfirmation","DialogTitle","title","DialogContent","message","DialogActions","DialogCancel","onClick","ButtonPrimary","disabled","disableConfirm","children","showConfirmation","React","Component","exports","CircularProgress"],"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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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_Dialog","_Progress","_Button","ConfirmationDialog","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","onAccept","onCancel","show","loading","callbacks","setState","__isMounted","_createClass2","key","value","componentDidMount","componentWillUnmount","render","createElement","Fragment","Dialog","style","props","open","state","onClose","hideConfirmation","DialogTitle","title","DialogContent","message","DialogActions","DialogCancel","onClick","ButtonPrimary","disabled","disableConfirm","children","showConfirmation","React","Component","exports","CircularProgress"],"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/withConfirmation.d.ts

@@ -5,7 +5,7 @@ declare type ConfirmationProps = {
 };
 declare type WithConfirmationParams = (props: Record<string, any>) => ConfirmationProps;
 export declare type WithConfirmationProps = {
-    showConfirmation: (confirm: Function, cancel: Function) => void;
+    showConfirmation: (confirm: () => void, cancel: () => void) => void;
 };
-export declare const withConfirmation: (dialogProps: WithConfirmationParams) => Function;
+export declare const withConfirmation: (dialogProps: WithConfirmationParams) => (Component: typeof React.Component) => (ownProps: Record<string, any>) => JSX.Element;
 export {};

package/ConfirmationDialog/withConfirmation.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_ConfirmationDialog","withConfirmation","dialogProps","Component","withConfirmationRender","ownProps","props","default","createElement","ConfirmationDialog","_ref","showConfirmation","Object","assign","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAaO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,WAAmC,EAAe;EAC/E,OAAO,UAACC,SAAiC,EAAK;IAC1C,OAAO,SAASC,sBAAsBA,CAACC,QAA6B,EAAE;MAClE,IAAMC,KAAK,GAAG,OAAOJ,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACG,QAAQ,CAAC,GAAGH,WAAW;MACrF,oBACIL,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,mBAAA,CAAAS,kBAAkB,EAAKH,KAAK,EACxB,UAAAI,IAAA;QAAA,IAAGC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;QAAA,oBAChBd,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,SAAS,EAAAS,MAAA,CAAAC,MAAA,KAAKR,QAAQ;UAAEM,gBAAgB,EAAEA;QAAiB,EAAE,CAAC;MAAA,CAEnD,CAAC;IAE7B,CAAC;EACL,CAAC;AACL,CAAC;AAACG,OAAA,CAAAb,gBAAA,GAAAA,gBAAA"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_ConfirmationDialog","withConfirmation","dialogProps","Component","withConfirmationRender","ownProps","props","default","createElement","ConfirmationDialog","_ref","showConfirmation","Object","assign","exports"],"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: () => void, cancel: () => void) => void;\n};\n\nexport const withConfirmation = (dialogProps: WithConfirmationParams) => {\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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,mBAAA,GAAAD,OAAA;AAaO,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,WAAmC,EAAK;EACrE,OAAO,UAACC,SAAiC,EAAK;IAC1C,OAAO,SAASC,sBAAsBA,CAACC,QAA6B,EAAE;MAClE,IAAMC,KAAK,GAAG,OAAOJ,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACG,QAAQ,CAAC,GAAGH,WAAW;MACrF,oBACIL,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,mBAAA,CAAAS,kBAAkB,EAAKH,KAAK,EACxB,UAAAI,IAAA;QAAA,IAAGC,gBAAgB,GAAAD,IAAA,CAAhBC,gBAAgB;QAAA,oBAChBd,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACL,SAAS,EAAAS,MAAA,CAAAC,MAAA,KAAKR,QAAQ;UAAEM,gBAAgB,EAAEA;QAAiB,EAAE,CAAC;MAAA,CAEnD,CAAC;IAE7B,CAAC;EACL,CAAC;AACL,CAAC;AAACG,OAAA,CAAAb,gBAAA,GAAAA,gBAAA"}

package/DataTable/ColumnDirection.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export interface ColumnDirectionProps {
+    direction?: "asc" | "desc";
+}
+export declare const ColumnDirection: (props: ColumnDirectionProps) => JSX.Element | null;

package/DataTable/ColumnDirection.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnDirection = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = require("./styled");
+var ColumnDirection = function ColumnDirection(props) {
+  if (props.direction) {
+    return /*#__PURE__*/_react.default.createElement(_styled.ColumnDirectionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.ColumnDirectionIcon, {
+      direction: props.direction
+    }));
+  }
+  return null;
+};
+exports.ColumnDirection = ColumnDirection;
+
+//# sourceMappingURL=ColumnDirection.js.map

package/DataTable/ColumnDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_styled","ColumnDirection","props","direction","default","createElement","ColumnDirectionWrapper","ColumnDirectionIcon","exports"],"sources":["ColumnDirection.tsx"],"sourcesContent":["import React from \"react\";\nimport { ColumnDirectionIcon, ColumnDirectionWrapper } from \"~/DataTable/styled\";\n\nexport interface ColumnDirectionProps {\n    direction?: \"asc\" | \"desc\";\n}\n\nexport const ColumnDirection = (props: ColumnDirectionProps) => {\n    if (props.direction) {\n        return (\n            <ColumnDirectionWrapper>\n                <ColumnDirectionIcon direction={props.direction} />\n            </ColumnDirectionWrapper>\n        );\n    }\n\n    return null;\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAMO,IAAME,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAK;EAC5D,IAAIA,KAAK,CAACC,SAAS,EAAE;IACjB,oBACIN,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACL,OAAA,CAAAM,sBAAsB,qBACnBT,MAAA,CAAAO,OAAA,CAAAC,aAAA,CAACL,OAAA,CAAAO,mBAAmB;MAACJ,SAAS,EAAED,KAAK,CAACC;IAAU,CAAE,CAC9B,CAAC;EAEjC;EAEA,OAAO,IAAI;AACf,CAAC;AAACK,OAAA,CAAAP,eAAA,GAAAA,eAAA"}

package/DataTable/ColumnsVisibility.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Column } from "@tanstack/react-table";
+interface ColumnsVisibilityProps<T> {
+    columns: Column<T>[];
+}
+export declare const ColumnsVisibility: <T>(props: ColumnsVisibilityProps<T>) => JSX.Element | null;
+export {};

package/DataTable/ColumnsVisibility.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsVisibility = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _settings = require("@material-design-icons/svg/outlined/settings.svg");
+var _Button = require("../Button");
+var _Checkbox = require("../Checkbox");
+var _Menu = require("../Menu");
+var _styled = require("./styled");
+var ColumnsVisibility = function ColumnsVisibility(props) {
+  /**
+   * `@tanstack/react-table` does not have a simple method to return the header component.
+   * The only possible way is to use `flexRenderer`, but this is not working with the current implementation
+   * since we don't have access to the header context.
+   */
+  var getHeaderName = (0, _react.useCallback)(function (column) {
+    var header = column.columnDef.header;
+    if (typeof header === "string") {
+      return header;
+    }
+    if (typeof header === "function") {
+      // @ts-expect-error
+      return header();
+    }
+    return column.id;
+  }, []);
+  var options = (0, _react.useMemo)(function () {
+    return props.columns.filter(function (column) {
+      return column.getCanHide();
+    }).map(function (column) {
+      return {
+        id: column.id,
+        header: getHeaderName(column),
+        onChange: column.toggleVisibility,
+        getValue: column.getIsVisible
+      };
+    });
+  }, [props.columns]);
+  if (options.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    handle: /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+      icon: /*#__PURE__*/_react.default.createElement(_settings.ReactComponent, null)
+    })
+  }, /*#__PURE__*/_react.default.createElement(_styled.ColumnsVisibilityMenuHeader, {
+    use: "subtitle2",
+    tag: "h6"
+  }, "Toggle column visibility"), /*#__PURE__*/_react.default.createElement(_Menu.MenuDivider, null), options.map(function (option) {
+    return /*#__PURE__*/_react.default.createElement(_styled.ColumnsVisibilityMenuItem, {
+      key: option.id
+    }, /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      label: option.header,
+      onChange: option.onChange,
+      value: option.getValue()
+    }));
+  }));
+};
+exports.ColumnsVisibility = ColumnsVisibility;
+
+//# sourceMappingURL=ColumnsVisibility.js.map

package/DataTable/ColumnsVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_settings","_Button","_Checkbox","_Menu","_styled","ColumnsVisibility","props","getHeaderName","useCallback","column","header","columnDef","id","options","useMemo","columns","filter","getCanHide","map","onChange","toggleVisibility","getValue","getIsVisible","length","default","createElement","Menu","handle","IconButton","icon","ReactComponent","ColumnsVisibilityMenuHeader","use","tag","MenuDivider","option","ColumnsVisibilityMenuItem","key","Checkbox","label","value","exports"],"sources":["ColumnsVisibility.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useMemo } from \"react\";\nimport { ReactComponent as SettingsIcon } from \"@material-design-icons/svg/outlined/settings.svg\";\nimport { Column } from \"@tanstack/react-table\";\nimport { IconButton } from \"~/Button\";\nimport { Checkbox } from \"~/Checkbox\";\nimport { Menu, MenuDivider } from \"~/Menu\";\nimport { ColumnsVisibilityMenuHeader, ColumnsVisibilityMenuItem } from \"~/DataTable/styled\";\n\ninterface ColumnsVisibilityProps<T> {\n    columns: Column<T>[];\n}\n\ninterface Option {\n    id: string;\n    header: ReactNode;\n    onChange: (value?: boolean | undefined) => void;\n    getValue: () => boolean;\n}\n\nexport const ColumnsVisibility = <T,>(props: ColumnsVisibilityProps<T>) => {\n    /**\n     * `@tanstack/react-table` does not have a simple method to return the header component.\n     * The only possible way is to use `flexRenderer`, but this is not working with the current implementation\n     * since we don't have access to the header context.\n     */\n    const getHeaderName = useCallback((column: Column<T>) => {\n        const { header } = column.columnDef;\n\n        if (typeof header === \"string\") {\n            return header;\n        }\n\n        if (typeof header === \"function\") {\n            // @ts-expect-error\n            return header();\n        }\n\n        return column.id;\n    }, []);\n\n    const options: Option[] = useMemo(() => {\n        return props.columns\n            .filter(column => column.getCanHide())\n            .map(column => {\n                return {\n                    id: column.id,\n                    header: getHeaderName(column),\n                    onChange: column.toggleVisibility,\n                    getValue: column.getIsVisible\n                };\n            });\n    }, [props.columns]);\n\n    if (options.length === 0) {\n        return null;\n    }\n\n    return (\n        <Menu handle={<IconButton icon={<SettingsIcon />} />}>\n            <ColumnsVisibilityMenuHeader use={\"subtitle2\"} tag={\"h6\"}>\n                {\"Toggle column visibility\"}\n            </ColumnsVisibilityMenuHeader>\n            <MenuDivider />\n            {options.map(option => {\n                return (\n                    <ColumnsVisibilityMenuItem key={option.id}>\n                        <Checkbox\n                            label={option.header}\n                            onChange={option.onChange}\n                            value={option.getValue()}\n                        />\n                    </ColumnsVisibilityMenuItem>\n                );\n            })}\n        </Menu>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAaO,IAAMM,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAQC,KAAgC,EAAK;EACvE;AACJ;AACA;AACA;AACA;EACI,IAAMC,aAAa,GAAG,IAAAC,kBAAW,EAAC,UAACC,MAAiB,EAAK;IACrD,IAAQC,MAAM,GAAKD,MAAM,CAACE,SAAS,CAA3BD,MAAM;IAEd,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;MAC5B,OAAOA,MAAM;IACjB;IAEA,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;MAC9B;MACA,OAAOA,MAAM,CAAC,CAAC;IACnB;IAEA,OAAOD,MAAM,CAACG,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,OAAiB,GAAG,IAAAC,cAAO,EAAC,YAAM;IACpC,OAAOR,KAAK,CAACS,OAAO,CACfC,MAAM,CAAC,UAAAP,MAAM;MAAA,OAAIA,MAAM,CAACQ,UAAU,CAAC,CAAC;IAAA,EAAC,CACrCC,GAAG,CAAC,UAAAT,MAAM,EAAI;MACX,OAAO;QACHG,EAAE,EAAEH,MAAM,CAACG,EAAE;QACbF,MAAM,EAAEH,aAAa,CAACE,MAAM,CAAC;QAC7BU,QAAQ,EAAEV,MAAM,CAACW,gBAAgB;QACjCC,QAAQ,EAAEZ,MAAM,CAACa;MACrB,CAAC;IACL,CAAC,CAAC;EACV,CAAC,EAAE,CAAChB,KAAK,CAACS,OAAO,CAAC,CAAC;EAEnB,IAAIF,OAAO,CAACU,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACf;EAEA,oBACI1B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACtB,KAAA,CAAAuB,IAAI;IAACC,MAAM,eAAE9B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACxB,OAAA,CAAA2B,UAAU;MAACC,IAAI,eAAEhC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACzB,SAAA,CAAA8B,cAAY,MAAE;IAAE,CAAE;EAAE,gBACjDjC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,OAAA,CAAA2B,2BAA2B;IAACC,GAAG,EAAE,WAAY;IAACC,GAAG,EAAE;EAAK,GACpD,0BACwB,CAAC,eAC9BpC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACtB,KAAA,CAAA+B,WAAW,MAAE,CAAC,EACdrB,OAAO,CAACK,GAAG,CAAC,UAAAiB,MAAM,EAAI;IACnB,oBACItC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACrB,OAAA,CAAAgC,yBAAyB;MAACC,GAAG,EAAEF,MAAM,CAACvB;IAAG,gBACtCf,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACvB,SAAA,CAAAoC,QAAQ;MACLC,KAAK,EAAEJ,MAAM,CAACzB,MAAO;MACrBS,QAAQ,EAAEgB,MAAM,CAAChB,QAAS;MAC1BqB,KAAK,EAAEL,MAAM,CAACd,QAAQ,CAAC;IAAE,CAC5B,CACsB,CAAC;EAEpC,CAAC,CACC,CAAC;AAEf,CAAC;AAACoB,OAAA,CAAApC,iBAAA,GAAAA,iBAAA"}

package/DataTable/DataTable.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { DataTableCellProps } from "@rmwc/data-table";
-import { OnChangeFn, SortingState, Row } from "@tanstack/react-table";
+import { OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
 import "@rmwc/data-table/data-table.css";
-interface Column<T> {
+export interface Column<T> {
     header: string | number | JSX.Element;
     cell?: (row: T) => string | number | JSX.Element | null;
     meta?: DataTableCellProps;
@@ -10,16 +10,20 @@ interface Column<T> {
     className?: string;
     enableSorting?: boolean;
     enableResizing?: boolean;
+    enableHiding?: boolean;
 }
 export declare type Columns<T> = {
     [P in keyof T]?: Column<T>;
 };
 export declare type DefaultData = {
     id: string;
-    selectable?: boolean;
+    $selectable?: boolean;
 };
+export declare type TableRow<T> = Row<DefaultData & T>;
 export declare type Sorting = SortingState;
 export declare type OnSortingChange = OnChangeFn<Sorting>;
+export declare type ColumnVisibility = VisibilityState;
+export declare type OnColumnVisibilityChange = OnChangeFn<ColumnVisibility>;
 interface Props<T> {
     /**
      * Show or hide borders.
@@ -33,6 +37,14 @@ interface Props<T> {
      * Columns definition.
      */
     columns: Columns<T>;
+    /**
+     * The column visibility state.
+     */
+    columnVisibility?: ColumnVisibility;
+    /**
+     * Callback that receives current column visibility state.
+     */
+    onColumnVisibilityChange?: OnColumnVisibilityChange;
     /**
      * Data to display into DataTable body.
      */
@@ -78,8 +90,5 @@ interface Props<T> {
      */
     stickyRows?: number;
 }
-export interface ColumnDirectionProps {
-    direction?: "asc" | "desc";
-}
-export declare const DataTable: <T extends Object & DefaultData>({ data, columns, onSelectRow, onToggleRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, onSortingChange, isRowSelectable, canSelectAllRows, selectedRows, initialSorting }: Props<T>) => JSX.Element;
+export declare const DataTable: <T extends Record<string, any> & DefaultData>({ data, columns, onSelectRow, onToggleRow, loadingInitial, stickyColumns, stickyRows, bordered, sorting, columnVisibility, onColumnVisibilityChange, onSortingChange, isRowSelectable, canSelectAllRows, selectedRows, initialSorting }: Props<T>) => JSX.Element;
 export {};

package/DataTable/DataTable.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DataTable = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
@@ -14,6 +15,7 @@ var _dataTable = require("@rmwc/data-table");
 var _reactTable = require("@tanstack/react-table");
 var _Checkbox = require("../Checkbox");
 var _Skeleton = require("../Skeleton");
+var _ColumnsVisibility = require("./ColumnsVisibility");
 require("@rmwc/data-table/data-table.css");
 var _styled = require("./styled");
 var defineColumns = function defineColumns(columns, options) {
@@ -30,6 +32,8 @@ var defineColumns = function defineColumns(columns, options) {
     var defaults = columnsList.map(function (column) {
       var _cell = column.cell,
         className = column.className,
+        _column$enableHiding = column.enableHiding,
+        enableHiding = _column$enableHiding === void 0 ? true : _column$enableHiding,
         _column$enableResizin = column.enableResizing,
         enableResizing = _column$enableResizin === void 0 ? true : _column$enableResizin,
         _column$enableSorting = column.enableSorting,
@@ -38,8 +42,9 @@ var defineColumns = function defineColumns(columns, options) {
         id = column.id,
         meta = column.meta,
         _column$size = column.size,
-        size = _column$size === void 0 ? 200 : _column$size;
+        size = _column$size === void 0 ? 100 : _column$size;
       return {
+        id: id,
         accessorKey: id,
         header: function header() {
           return _header;
@@ -48,7 +53,7 @@ var defineColumns = function defineColumns(columns, options) {
           if (_cell && typeof _cell === "function") {
             return _cell(info.row.original);
           } else {
-            return info.getValue();
+            return info.getValue() || null;
           }
         },
         enableSorting: enableSorting,
@@ -56,7 +61,8 @@ var defineColumns = function defineColumns(columns, options) {
           className: className
         }),
         enableResizing: enableResizing,
-        size: size
+        size: size,
+        enableHiding: enableHiding
       };
     });
     var isSelectable = onToggleRow || onSelectRow;
@@ -90,6 +96,7 @@ var defineColumns = function defineColumns(columns, options) {
       },
       enableSorting: false,
       enableResizing: false,
+      enableHiding: false,
       size: 56
     }] : [];
     return [].concat(select, (0, _toConsumableArray2.default)(defaults)).map(function (column) {
@@ -105,12 +112,10 @@ var defineColumns = function defineColumns(columns, options) {
   }, [columns, onSelectRow, onToggleRow, loadingInitial]);
 };
 var defineData = function defineData(data, loadingInitial) {
-  return (0, _react.useMemo)(function () {
-    if (loadingInitial) {
-      return Array(10).fill({});
-    }
-    return data;
-  }, [data, loadingInitial]);
+  if (loadingInitial) {
+    return Array(10).fill({});
+  }
+  return data;
 };
 var ColumnDirection = function ColumnDirection(_ref2) {
   var direction = _ref2.direction;
@@ -123,23 +128,29 @@ var ColumnDirection = function ColumnDirection(_ref2) {
 };
 var typedMemo = _react.memo;
 var TableCell = function TableCell(_ref3) {
-  var cell = _ref3.cell;
-  return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableCell, Object.assign({}, cell.column.columnDef.meta, {
+  var cell = _ref3.cell,
+    getColumnWidth = _ref3.getColumnWidth;
+  var width = getColumnWidth(cell.column);
+  return /*#__PURE__*/_react.default.createElement(_styled.DataTableCell, Object.assign({}, cell.column.columnDef.meta, {
     style: {
-      width: cell.column.getSize()
+      width: width,
+      maxWidth: width
     }
   }), (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
 };
 var MemoTableCell = typedMemo(TableCell);
 var TableRow = function TableRow(_ref4) {
-  var row = _ref4.row,
-    selected = _ref4.selected;
+  var selected = _ref4.selected,
+    cells = _ref4.cells,
+    getColumnWidth = _ref4.getColumnWidth;
   return /*#__PURE__*/_react.default.createElement(_dataTable.DataTableRow, {
     selected: selected
-  }, row.getVisibleCells().map(function (cell) {
+  }, cells.map(function (cell) {
     return /*#__PURE__*/_react.default.createElement(MemoTableCell, {
       key: cell.id,
-      cell: cell
+      cell: cell,
+      getColumnWidth: getColumnWidth,
+      selected: selected
     });
   }));
 };
@@ -154,6 +165,8 @@ var DataTable = function DataTable(_ref5) {
     stickyRows = _ref5.stickyRows,
     bordered = _ref5.bordered,
     sorting = _ref5.sorting,
+    columnVisibility = _ref5.columnVisibility,
+    onColumnVisibilityChange = _ref5.onColumnVisibilityChange,
     onSortingChange = _ref5.onSortingChange,
     isRowSelectable = _ref5.isRowSelectable,
     _ref5$canSelectAllRow = _ref5.canSelectAllRows,
@@ -161,6 +174,24 @@ var DataTable = function DataTable(_ref5) {
     _ref5$selectedRows = _ref5.selectedRows,
     selectedRows = _ref5$selectedRows === void 0 ? [] : _ref5$selectedRows,
     initialSorting = _ref5.initialSorting;
+  var tableRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(1),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tableWidth = _useState2[0],
+    setTableWidth = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var updateElementWidth = function updateElementWidth() {
+      if (tableRef.current) {
+        var width = tableRef.current.clientWidth;
+        setTableWidth(width);
+      }
+    };
+    updateElementWidth();
+    window.addEventListener("resize", updateElementWidth);
+    return function () {
+      window.removeEventListener("resize", updateElementWidth);
+    };
+  }, [tableRef.current]);
   var rowSelection = (0, _react.useMemo)(function () {
     return selectedRows.reduce(function (acc, item) {
       var recordIndex = data.findIndex(function (rec) {
@@ -218,54 +249,67 @@ var DataTable = function DataTable(_ref5) {
     getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
     state: {
       rowSelection: rowSelection,
-      sorting: tableSorting
+      sorting: tableSorting,
+      columnVisibility: columnVisibility
     },
     enableRowSelection: isRowSelectable,
     onRowSelectionChange: onRowSelectionChange,
     enableSorting: !!onSortingChange,
     manualSorting: true,
-    onSortingChange: onSortingChange
+    onSortingChange: onSortingChange,
+    enableHiding: !!onColumnVisibilityChange,
+    onColumnVisibilityChange: onColumnVisibilityChange
   });
-  return /*#__PURE__*/_react.default.createElement(_styled.Table, {
+  var getColumnWidth = (0, _react.useCallback)(function (column) {
+    if (!column.getCanResize()) {
+      return column.getSize();
+    }
+    var tableSize = table.getTotalSize();
+    var columnSize = column.getSize();
+    return Math.ceil(columnSize * tableWidth / tableSize);
+  }, [table, tableWidth]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: tableRef
+  }, /*#__PURE__*/_react.default.createElement(_styled.Table, {
     stickyColumns: stickyColumns,
     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 (_ref6) {
-      var id = _ref6.id,
-        isPlaceholder = _ref6.isPlaceholder,
-        column = _ref6.column,
-        getContext = _ref6.getContext,
-        colSpan = _ref6.colSpan,
-        getSize = _ref6.getSize,
-        getResizeHandler = _ref6.getResizeHandler;
+    }, headerGroup.headers.map(function (header, index) {
+      var isLastCell = index === headerGroup.headers.length - 1;
+      var width = getColumnWidth(header.column);
       return /*#__PURE__*/_react.default.createElement(_styled.TableHeadCell, Object.assign({
-        key: id
-      }, column.columnDef.meta, {
-        colSpan: colSpan,
+        key: header.id
+      }, header.column.columnDef.meta, {
+        colSpan: header.colSpan,
         style: {
-          width: getSize()
+          width: width,
+          maxWidth: width
         }
-      }), 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
-      })), column.getCanResize() && /*#__PURE__*/_react.default.createElement(_styled.Resizer, {
-        onMouseDown: getResizeHandler(),
-        onTouchStart: getResizeHandler(),
-        isResizing: column.getIsResizing()
+      }), header.isPlaceholder ? null : /*#__PURE__*/_react.default.createElement(_styled.ColumnHeaderWrapper, {
+        onClick: header.column.getToggleSortingHandler(),
+        sortable: header.column.getCanSort(),
+        isLastCell: isLastCell
+      }, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), /*#__PURE__*/_react.default.createElement(ColumnDirection, {
+        direction: header.column.getIsSorted() || undefined
+      }), isLastCell && /*#__PURE__*/_react.default.createElement(_ColumnsVisibility.ColumnsVisibility, {
+        columns: table.getAllColumns()
+      })), header.column.getCanResize() && /*#__PURE__*/_react.default.createElement(_styled.Resizer, {
+        onMouseDown: header.getResizeHandler(),
+        onTouchStart: header.getResizeHandler(),
+        isResizing: header.column.getIsResizing()
       }));
     }));
   })), /*#__PURE__*/_react.default.createElement(_dataTable.DataTableBody, null, table.getRowModel().rows.map(function (row) {
     return /*#__PURE__*/_react.default.createElement(MemoTableRow, {
       key: row.original.id || row.id,
-      row: row,
-      selected: row.getIsSelected()
+      cells: row.getVisibleCells(),
+      selected: row.getIsSelected(),
+      getColumnWidth: getColumnWidth
     });
-  }))));
+  })))));
 };
 exports.DataTable = DataTable;