ish-ui 1.0.11 → 1.0.13

package/dist/dynamicSizeList/DynamicSizeList.d.ts

@@ -1,10 +1,6 @@
 import React from 'react';
-interface Props {
-    height: number;
-    itemCount: number;
-    width: number;
-    estimatedItemSize: number;
-    children: any;
+import { VariableSizeListProps } from 'react-window';
+interface Props extends Omit<VariableSizeListProps, 'itemSize'> {
     listRef?: any;
 }
 declare class DynamicSizeList extends React.Component<Props> {

package/dist/dynamicSizeList/DynamicSizeList.js

@@ -16,8 +16,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// Temporary implementation
-// TODO: Remove component when native DynamicSizeList will be included in react-window v.2
 import React from 'react';
 import { VariableSizeList } from 'react-window';
 class ItemMeasurer extends React.Component {

package/dist/formFields/EditInPlaceMoneyField.js

@@ -17,7 +17,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback } from 'react';
-import { NumericFormat } from 'react-number-format';
+import NumberFormat from 'react-number-format';
 import InputAdornment from '@mui/material/InputAdornment';
 import clsx from 'clsx';
 import EditInPlaceField from './EditInPlaceField';
@@ -27,7 +27,7 @@ const NumberFormatCustom = React.forwardRef((props, ref) => {
     const onValueChange = useCallback(values => {
         onChange(normalizeNumber(values.value));
     }, []);
-    return (React.createElement(NumericFormat, Object.assign({}, other, { getInputRef: ref, onValueChange: onValueChange, allowNegative: allowNegative, decimalScale: 2, thousandSeparator: true })));
+    return (React.createElement(NumberFormat, Object.assign({}, other, { getInputRef: ref, onValueChange: onValueChange, allowNegative: allowNegative, decimalScale: 2, thousandSeparator: true })));
 });
 const preformatDisplayValue = value => value || value === 0 ? formatCurrency(value, '') : value;
 function EditInPlaceMoneyField(_a) {

package/dist/formFields/EditInPlacePhoneField.js

@@ -17,7 +17,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { PatternFormat } from 'react-number-format';
+import NumberFormat from 'react-number-format';
 import InputAdornment from '@mui/material/InputAdornment';
 import PhoneIcon from '@mui/icons-material/Phone';
 import debounce from 'lodash.debounce';
@@ -26,7 +26,7 @@ import { getPhoneMask } from '../utils';
 const NumberFormatCustom = React.forwardRef((props, ref) => {
     const { onChange } = props, other = __rest(props, ["onChange"]);
     const inputRef = useRef();
-    const [format, setFormat] = useState(null);
+    const [format, setFormat] = useState('');
     const [prefix, setPrefix] = useState(undefined);
     const processFormat = useCallback(debounce(data => {
         setFormat(getPhoneMask(data.value));
@@ -59,7 +59,7 @@ const NumberFormatCustom = React.forwardRef((props, ref) => {
         ref = input;
         inputRef.current = input;
     };
-    return (React.createElement(PatternFormat, Object.assign({}, other, { getInputRef: getInputRef, onKeyPress: onKeyPress, prefix: prefix, onValueChange: onValueChange, format: format, type: "text" })));
+    return (React.createElement(NumberFormat, Object.assign({}, other, { getInputRef: getInputRef, onKeyPress: onKeyPress, prefix: prefix, onValueChange: onValueChange, format: format, type: "text" })));
 });
 function EditInPlacePhoneField(_a) {
     var { InputProps, className } = _a, restProps = __rest(_a, ["InputProps", "className"]);

package/dist/markdownEditor/index.d.ts

@@ -1,5 +1,4 @@
 export * from './utils/index';
-export * from './style';
 export * from './HtmlEditor';
 export * from './WysiwygEditor';
 export { default as HtmlEditor } from './HtmlEditor';

package/dist/markdownEditor/index.js

@@ -6,7 +6,6 @@
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
 export * from './utils/index';
-export * from './style';
 export * from './HtmlEditor';
 export * from './WysiwygEditor';
 export { default as HtmlEditor } from './HtmlEditor';

package/dist/model/Fields.d.ts

@@ -70,7 +70,7 @@ export interface ColoredCheckboxFieldProps<IP, MP> {
     };
     meta?: Partial<MP>;
     color: string;
-    label?: string;
+    label?: ReactNode;
     className?: string;
     disabled?: boolean;
 }
@@ -111,7 +111,7 @@ export interface EditInPlaceDateTimeFieldProps<IP, MP> {
     fieldClasses?: FieldClasses;
     onKeyPress?: AnyArgFunction;
     labelAdornment?: ReactNode;
-    processActionId?: string;
+    processActionId?: boolean;
     formatDate?: string;
     formatTime?: string;
     formatDateTime?: string;
@@ -220,10 +220,10 @@ export interface CheckboxFieldProps<IP> {
 export interface TagsFieldProps<T, IP, MP> extends EditInPlaceFieldProps<IP, MP> {
     tags: T[];
     showConfirm?: ShowConfirmCaller;
-    classes?: any;
     validateEntity?: string;
+    allowParentSelect?: boolean;
 }
-interface FormFieldBaseProps {
+export interface FormFieldBaseProps {
     required?: boolean;
     format?: AnyArgFunction;
     onClick?: AnyArgFunction;
@@ -248,4 +248,3 @@ export type FormFieldProps = ({
 } & FormFieldBaseProps & TagsFieldProps<TagLike, FieldInputProps, FieldMetaProps>) | ({
     type: 'stub';
 });
-export {};

package/dist/tagsInput/AddTagMenu.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { MenuTag, TagLike } from '../model';
 interface Props<T> {
     classes?: any;
+    allowParentSelect?: boolean;
     tags: MenuTag<T>[];
     handleAdd: (tag: MenuTag<T>) => void;
     activeTag: MenuTag<T>;

package/dist/tagsInput/AddTagMenu.js

@@ -22,7 +22,7 @@ const styles = theme => ({
         borderRadius: '100%'
     }
 });
-function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag }) {
+function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
     const handleBack = () => {
         setActiveTag(prev => prev.parent);
     };
@@ -31,6 +31,6 @@ function AddTagMenu({ classes, tags, handleAdd, activeTag, setActiveTag }) {
             React.createElement("span", { className: clsx('d-flex textSecondaryColor', classes.backContainer) },
                 React.createElement(KeyboardArrowLeft, { color: "inherit" }),
                 "Back"))),
-        (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd })))));
+        (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect })))));
 }
 export default withStyles(styles)(AddTagMenu);

package/dist/tagsInput/AddTagMenuItem.d.ts

@@ -5,6 +5,7 @@ interface Props<T> {
     setActiveTag: (tag: MenuTag<T>) => void;
     handleAdd: (tag: MenuTag<T>) => void;
     tag: MenuTag<T>;
+    allowParentSelect?: boolean;
 }
-declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd }: Props<T>): React.JSX.Element;
+declare function AddTagMenuItem<T extends TagLike>({ setActiveTag, tag, classes, handleAdd, allowParentSelect }: Props<T>): React.JSX.Element;
 export default AddTagMenuItem;

package/dist/tagsInput/AddTagMenuItem.js

@@ -10,7 +10,8 @@ import clsx from 'clsx';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import Checkbox from '@mui/material/Checkbox';
 import MenuItem from '@mui/material/MenuItem';
-function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd }) {
+import { IconButton } from '@mui/material';
+function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, allowParentSelect }) {
     const openSubmenu = () => {
         setActiveTag(tag);
     };
@@ -18,9 +19,11 @@ function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd }) {
         handleAdd(tag);
     };
     const hasChildren = Boolean(tag.children.length);
-    return (React.createElement(MenuItem, { classes: { root: classes.listItem }, onClick: hasChildren ? openSubmenu : toggleChecked },
+    return (React.createElement(MenuItem, { classes: { root: classes.listItem }, onClick: allowParentSelect ? null : (hasChildren ? openSubmenu : toggleChecked), disableRipple: allowParentSelect },
         React.createElement("div", { className: clsx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
         React.createElement("span", { className: "mr-2 flex-fill" }, tag.tagBody.name),
-        hasChildren ? (React.createElement(KeyboardArrowRight, { className: clsx('d-flex textSecondaryColor', classes.proceedIcon) })) : (React.createElement(Checkbox, { classes: { root: 'smallIconButton' }, checked: tag.active }))));
+        (allowParentSelect || !hasChildren) && React.createElement(Checkbox, { onClick: toggleChecked, classes: { root: 'smallIconButton' }, checked: tag.active }),
+        hasChildren && React.createElement(IconButton, { size: "small", onClick: openSubmenu },
+            React.createElement(KeyboardArrowRight, { className: clsx('d-flex textSecondaryColor', classes.proceedIcon) }))));
 }
 export default AddTagMenuItem;

package/dist/tagsInput/TagInputList.d.ts

@@ -1,2 +1,4 @@
-declare const _default: any;
-export default _default;
+import React from 'react';
+import { FieldInputProps, FieldMetaProps, TagLike, TagsFieldProps } from '../model';
+declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
+export default TagInputList;

package/dist/tagsInput/TagInputList.js

@@ -19,8 +19,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { InputAdornment, MenuItem, Select } from '@mui/material';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
 import Autocomplete from '@mui/material/Autocomplete';
 import clsx from 'clsx';
 import { Edit } from '@mui/icons-material';
@@ -30,8 +28,8 @@ import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
 import { getAllMenuTags, getHighlightedPartLabel, getMenuTags } from '../utils';
 import { stubComponent } from '../utils/stubs';
 import getCaretCoordinates from '../utils/DOM/getCaretCoordinates';
-const styles = theme => createStyles({
-    inputEndAdornment: {
+import { makeAppStyles } from '../styles';
+const useStyles = makeAppStyles((theme) => (Object.assign(Object.assign({}, selectStyles(theme)), { inputEndAdornment: {
         visibility: 'hidden',
         display: 'flex',
         color: theme.palette.primary.main,
@@ -39,20 +37,16 @@ const styles = theme => createStyles({
         alignSelf: 'flex-end',
         marginBottom: '4px',
         opacity: 0.5
-    },
-    tagColorDotSmall: {
+    }, tagColorDotSmall: {
         width: theme.spacing(2),
         minWidth: theme.spacing(2),
         height: theme.spacing(2),
         minHeight: theme.spacing(2),
         background: 'red',
         borderRadius: '100%'
-    },
-    listbox: {
+    }, listbox: {
         whiteSpace: 'break-spaces'
-    },
-    invalid: {}
-});
+    }, invalid: {} })));
 const endTagRegex = /#\s*[^\w\d]*$/;
 const getCurrentInputString = (input, formTagIds = [], allMenuTags = []) => {
     let substr = input;
@@ -90,12 +84,13 @@ const getInputString = (tagIds, allTags) => ((tagIds === null || tagIds === void
         return (tag ? `${acc}#${tag.name} ` : acc);
     }, '')
     : '');
-function TagInputList({ input, tags, classes, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, fieldClasses = {} }) {
+function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {} }) {
     const [menuIsOpen, setMenuIsOpen] = useState(false);
     const [activeTag, setActiveTag] = useState(null);
     const [isEditing, setIsEditing] = useState(false);
     const [inputValue, setInputValue] = useState('');
     const [currentInputString, setCurrentInputString] = useState('');
+    const classes = useStyles();
     const InputValueForRender = useMemo(() => {
         var _a;
         if (!inputValue || !tags || !tags.length)
@@ -248,7 +243,7 @@ function TagInputList({ input, tags, classes, placeholder, labelAdornment, meta,
             React.createElement(ClickAwayListener, { onClickAway: onTagListBlur }, params.children)));
     }, [allMenuTags, inputValue, currentInputString, inputNode.current, tagMenuNode.current, input.value]);
     const listboxAdapter = useCallback(params => (React.createElement("div", { className: params.className, ref: tagMenuNode },
-        React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, activeTag: activeTag, setActiveTag: setActiveTag }))), [menuTags, activeTag, setActiveTag, onTagAdd]);
+        React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }))), [menuTags, activeTag, setActiveTag, onTagAdd]);
     return (React.createElement("div", { className: className, id: input.name },
         React.createElement("div", { className: clsx('relative', {
                 'pointer-events-none': disabled
@@ -271,8 +266,8 @@ function TagInputList({ input, tags, classes, placeholder, labelAdornment, meta,
                                     inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
                                 }, onFocus: edit, value: "stub", className: classes.inputWrapper, classes: { select: 'd-flex flex-wrap cursor-text' }, endAdornment: React.createElement(InputAdornment, { position: "end", className: classes.inputEndAdornment },
                                     React.createElement(Edit, null)), IconComponent: stubComponent },
-                                React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, "No value")))
+                                React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, placeholder || 'No value')))
                             : null })));
                 }, popupIcon: stubComponent(), disableListWrap: true, openOnFocus: true }))));
 }
-export default withStyles(theme => (Object.assign(Object.assign({}, selectStyles(theme)), styles(theme))))(TagInputList);
+export default TagInputList;

package/dist/utils/index.d.ts

@@ -5,3 +5,5 @@ export * from './DOM';
 export * from './numbers';
 export * from './dates';
 export * from './fields';
+export * from './hooks';
+export * from './events';

package/dist/utils/index.js

@@ -12,3 +12,5 @@ export * from './DOM';
 export * from './numbers';
 export * from './dates';
 export * from './fields';
+export * from './hooks';
+export * from './events';

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "ish-ui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {
+    "@ckeditor/ckeditor5-dev-utils": "^30.5.0",
     "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
     "@types/node": "^18.11.5",
@@ -57,34 +58,38 @@
     "@ckeditor/ckeditor5-source-editing": "35.1.0",
     "@ckeditor/ckeditor5-table": "35.1.0",
     "@ckeditor/ckeditor5-theme-lark": "35.1.0",
-    "@emotion/cache": "latest",
-    "@emotion/react": "latest",
-    "@emotion/styled": "latest",
+    "@emotion/cache": "11.10.8",
+    "@emotion/react": "11.10.8",
+    "@emotion/styled": "11.10.8",
     "@fortawesome/fontawesome-svg-core": "latest",
     "@fortawesome/free-regular-svg-icons": "latest",
     "@fortawesome/free-solid-svg-icons": "latest",
     "@fortawesome/react-fontawesome": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/lab": "latest",
-    "@mui/material": "latest",
-    "@mui/styles": "latest",
-    "@mui/x-date-pickers": "latest",
+    "@mui/icons-material": "5.10.16",
+    "@mui/lab": "^5.0.0-alpha.99",
+    "@mui/material": "5.10.17",
+    "@mui/styles": "5.10.16",
+    "@mui/system": "^5.14.1",
+    "@mui/x-date-pickers": "^5.0.0",
     "autosuggest-highlight": "^3.3.4",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "decimal.js-light": "^2.5.1",
     "lodash.debounce": "^4.0.8",
-    "re-resizable": "^6.9.9",
+    "re-resizable": "^6.9.11",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-number-format": "^5.2.2",
+    "react-number-format": "4.9.3",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
     "redux": "^4.2.1"
   },
+  "resolutions": {
+    "@mui/styles/react": "^18.2.0"
+  },
   "scripts": {
     "test": "exit 0",
     "start": "cross-env NODE_ENV=development webpack serve --config tools/webpack/webpack.config.dev.js",
@@ -96,13 +101,12 @@
     "type": "git",
     "url": "git+https://github.com/ishgroup/ish-ui.git"
   },
-  "author": "yuryyas",
-  "license": "ISC",
+  "author": "ishgroup",
   "bugs": {
     "url": "https://github.com/ishgroup/ish-ui/issues"
   },
   "homepage": "https://github.com/ishgroup/ish-ui#readme",
   "publishConfig": {
-    "@yuryyas:registry": "https://npm.pkg.github.com"
+    "@ishgroup:registry": "https://npm.pkg.github.com"
   }
 }

package/dist/markdownEditor/style.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"@global" | "readonly" | "editable" | "textField" | "hoverIcon" | "editorArea" | "previewFrame">;

package/dist/markdownEditor/style.js

@@ -1,185 +0,0 @@
-/*
- * Copyright ish group pty ltd 2022.
- *
- * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
- *
- *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
- */
-import { makeStyles } from '@mui/styles';
-export const useStyles = makeStyles((theme) => ({
-    hoverIcon: {
-        opacity: 0.5,
-        visibility: 'hidden',
-        marginLeft: theme.spacing(1)
-    },
-    editable: {
-        display: 'inline-flex',
-        cursor: 'text',
-        color: theme.palette.text.primaryEditable,
-        minHeight: '32px',
-        padding: '4px 0 4px',
-        marginTop: theme.spacing(2),
-        fontWeight: 400,
-        justifyContent: 'space-between',
-        alignItems: 'flex-end',
-        '&:hover $hoverIcon': {
-            visibility: 'visible'
-        },
-        '&:before': {
-            borderBottom: '1px solid transparent',
-            left: 0,
-            bottom: '4px',
-            content: '\' \'',
-            position: 'absolute',
-            right: 0,
-            transition: theme.transitions.create('border-bottom-color', {
-                duration: theme.transitions.duration.standard,
-                easing: theme.transitions.easing.easeInOut
-            }),
-            pointerEvents: 'none'
-        },
-        '&:hover:before': {
-            borderBottom: `1px solid ${theme.palette.primary.main}`
-        },
-    },
-    editorArea: {
-        '&#editorRoot': {
-            '& .ck-dropdown__button .ck-button__label': {
-                fontSize: '14px'
-            },
-            cursor: 'text',
-            overflowY: 'auto',
-            position: 'relative',
-            '& .ck-list__item .ck-button': {
-                height: 'unset',
-                padding: '5px 10px'
-            },
-            '& .ck-list__item .ck-heading_heading3': {
-                fontSize: '15px'
-            },
-            '& .ck-list__item .ck-heading_heading4': {
-                fontSize: '14px'
-            },
-            '& .ck-toolbar': {
-                height: '45px',
-                background: theme.table.contrastRow.main
-            },
-            '& .ck-list__item': {
-                fontSize: '15px'
-            },
-            '& .ck-dropdown': {
-                fontSize: '15px'
-            },
-            '& .ck.ck-dropdown .ck-button__label': {
-                fontFamily: 'Inter, sans-serif',
-                overflow: 'visible',
-                width: '120px'
-            },
-            '& .content-mode-wrapper': {
-                position: 'absolute',
-                right: '10px',
-                top: '6px',
-                padding: '5px',
-                zIndex: 1000,
-                '& .content-mode': {
-                    maxWidth: '85px',
-                    border: 0,
-                    boxShadow: 'none',
-                    backgroundColor: 'black',
-                    color: 'white',
-                    padding: '2px',
-                    fontSize: '9px',
-                    '&:hover': {
-                        backgroundColor: theme.palette.primary.main,
-                        color: theme.palette.primary.contrastText,
-                    },
-                }
-            },
-            '& .ck-editor': {
-                '& .ck-content': {
-                    resize: 'vertical',
-                    maxHeight: '80vh',
-                    minHeight: '200px',
-                    fontFamily: 'Inter, sans-serif',
-                    fontWeight: 400,
-                    fontSize: '14px',
-                    color: 'black'
-                },
-                '& .ck-content .table': {
-                    marginLeft: 0
-                },
-                '& .ck-toolbar': {
-                    padding: '3px'
-                },
-                '& .ck-source-editing-button': {
-                    marginLeft: 'auto',
-                    marginRight: '44px'
-                },
-                '& .ck-source-editing-button > *': {
-                    visibility: 'hidden'
-                },
-                '& .ck-source-editing-button .ck_source_edit_custom': {
-                    visibility: 'visible'
-                },
-                '& .ck-source-editing-button .ck_code_icon_custom': {
-                    width: '24px'
-                },
-            },
-            '&.ace-wrapper': {
-                border: `1px solid ${theme.palette.divider}`,
-                paddingTop: '44px',
-                background: theme.table.contrastRow.main,
-                '& .ace_editor': {
-                    borderTop: `1px solid ${theme.palette.divider}`
-                }
-            }
-        }
-    },
-    previewFrame: {
-        width: '100%',
-        maxHeight: '300px',
-        overflow: 'auto',
-        fontSize: '16px',
-        '& > div': {
-            width: '100%'
-        },
-        '& h1,h2,h3,h4': {
-            all: 'revert'
-        },
-        '& table': {
-            marginLeft: 0,
-            marginRight: 'auto',
-            borderCollapse: 'collapse',
-            borderSpacing: 0,
-            border: '1px double #b3b3b3',
-            '& th': {
-                textAlign: 'left',
-                fontWeight: 700,
-                background: 'hsla(0,0%,0%,5%)',
-                minWidth: '2em',
-                padding: '0.4em',
-                border: '1px solid #bfbfbf'
-            },
-            '& td': {
-                minWidth: '2em',
-                padding: '0.4em',
-                border: '1px solid #bfbfbf'
-            },
-        }
-    },
-    readonly: {
-        fontWeight: 300,
-        pointerEvents: 'none'
-    },
-    textField: {
-        paddingLeft: '0',
-        // @ts-ignore
-        paddingBottom: `${theme.spacing(2) - 3}`,
-        margin: 0
-    },
-    '@global': {
-        '.ck.ck-balloon-panel.ck-balloon-panel_visible': {
-            zIndex: 2000
-        }
-    }
-}));