ish-ui 1.0.55 → 1.1.0

package/dist/styles/hooks.d.ts

@@ -1,4 +1,12 @@
-export declare const useHoverShowStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "target">;
+export declare const useHoverShowStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"container" | "target", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 export declare const useWindowSize: () => {
     width: any;
     height: any;

package/dist/styles/hooks.js

@@ -3,18 +3,19 @@
  * No copying or use of this code is allowed without permission in writing from ish.
  */
 import { useEffect, useState } from 'react';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from 'tss-react/mui';
 import * as Colors from '@mui/material/colors';
-export const useHoverShowStyles = makeStyles({
+// TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.
+export const useHoverShowStyles = makeStyles()((_theme, _params, classes) => ({
     container: {
-        '&:hover $target': {
+        [`&:hover .${classes.target}`]: {
             visibility: 'visible'
         }
     },
     target: {
         visibility: 'hidden'
     }
-});
+}));
 export const useWindowSize = () => {
     const [windowSize, setWindowSize] = useState({
         width: undefined,

package/dist/styles/index.d.ts

@@ -2,10 +2,6 @@ export * from './mixins/keyframes';
 export * from './mixins/common';
 export * from './mixins/prefixer';
 export * from './animateStyles';
-export * from './bootstrap';
 export * from './GlobalStylesProvider';
-export { default as GlobalStylesProvider } from './GlobalStylesProvider';
 export * from './hooks';
 export * from './makeStyles';
-export * from './StylesProviderCustom';
-export { default as StylesProviderCustom } from './StylesProviderCustom';

package/dist/styles/index.js

@@ -9,10 +9,6 @@ export * from './mixins/keyframes';
 export * from './mixins/common';
 export * from './mixins/prefixer';
 export * from './animateStyles';
-export * from './bootstrap';
 export * from './GlobalStylesProvider';
-export { default as GlobalStylesProvider } from './GlobalStylesProvider';
 export * from './hooks';
 export * from './makeStyles';
-export * from './StylesProviderCustom';
-export { default as StylesProviderCustom } from './StylesProviderCustom';

package/dist/styles/makeStyles.d.ts

@@ -1,3 +1,38 @@
-import { Styles, WithStylesOptions, ClassNameMap } from '@mui/styles';
 import { AppTheme } from '../model';
-export declare const makeAppStyles: <Props extends object = {}, ClassKey extends string = string>(styles: Styles<AppTheme, Props, ClassKey>, options?: Omit<WithStylesOptions<AppTheme>, 'withTheme'>) => keyof Props extends never ? (props?: any) => ClassNameMap<ClassKey> : (props: Props) => ClassNameMap<ClassKey>;
+declare const withStyles: {
+    <C extends keyof import("react").ReactHTML | import("tss-react/tools/ReactComponent").ReactComponent<any>, Props extends C extends import("tss-react/tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] extends import("tss-react/tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
+        classes?: Partial<infer ClassNameByRuleName> | undefined;
+    } ? { [RuleName in keyof ClassNameByRuleName]?: import("tss-react").CSSObject; } & {
+        [mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("tss-react").CSSObject; };
+    } : {
+        root: import("tss-react").CSSObject;
+    } & {
+        [mediaQuery: `@media${string}`]: {
+            root: import("tss-react").CSSObject;
+        };
+    }>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
+        [mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: import("tss-react").CSSObject; };
+    }) | ((theme: AppTheme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
+        name?: string | Record<string, unknown> | undefined;
+        uniqId?: string | undefined;
+    } | undefined): C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] : C;
+    getClasses: <Classes>(props: {
+        className?: string | undefined;
+        classes?: Classes | undefined;
+    }) => Classes extends Record<string, unknown> ? Classes extends Partial<Record<infer K, any>> ? Record<K, string> : Classes : {
+        root: string;
+    };
+};
+export declare const makeAppStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
+    name?: string | Record<string, unknown> | undefined;
+    uniqId?: string | undefined;
+} | undefined) => <RuleName_2 extends string>(cssObjectByRuleNameOrGetCssObjectByRuleName: Record<RuleName_2, import("tss-react").CSSObject> | ((theme: AppTheme, params: Params, classes: Record<RuleNameSubsetReferencableInNestedSelectors, string>) => Record<RuleNameSubsetReferencableInNestedSelectors | RuleName_2, import("tss-react").CSSObject>)) => (params: Params, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<RuleName_2, string>;
+    theme: AppTheme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+export { withStyles };

package/dist/styles/makeStyles.js

@@ -5,5 +5,10 @@
  *
  *  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 makeAppStyles = (styles, options) => makeStyles(styles, options);
+import { createMakeAndWithStyles } from 'tss-react';
+import { useTheme } from '@mui/system';
+const { makeStyles, withStyles } = createMakeAndWithStyles({
+    useTheme,
+});
+export const makeAppStyles = makeStyles;
+export { withStyles };

package/dist/tagsInput/AddTagMenu.d.ts

@@ -9,5 +9,6 @@ interface Props<T> {
     activeTag: MenuTag<T>;
     setActiveTag: (arg: (MenuTag<T> | ((prevState: MenuTag<T>) => MenuTag<T>))) => void;
 }
-declare const _default: React.JSXElementConstructor<Omit<Props<TagLike>, "classes"> & import("@mui/styles/withStyles").StyledComponentProps<"listItem" | "proceedIcon" | "backContainer" | "tagColorDotSmall"> & object>;
+declare function AddTagMenu<T extends TagLike>({ classes, tags, hideColor, handleAdd, activeTag, setActiveTag, allowParentSelect }: Props<T>): React.JSX.Element;
+declare const _default: typeof AddTagMenu;
 export default _default;

package/dist/tagsInput/AddTagMenu.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import clsx from 'clsx';
-import withStyles from '@mui/styles/withStyles';
+import { useStyles, withStyles } from 'tss-react/mui';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import MenuItem from '@mui/material/MenuItem';
 import List from '@mui/material/List';
@@ -26,11 +25,12 @@ function AddTagMenu({ classes, tags, hideColor, handleAdd, activeTag, setActiveT
     const handleBack = () => {
         setActiveTag(prev => prev.parent);
     };
+    const { cx } = useStyles();
     return (React.createElement(List, { className: classes.rootMenu },
         activeTag && (React.createElement(MenuItem, { onClick: handleBack, className: classes.listItem },
-            React.createElement("span", { className: clsx('d-flex textSecondaryColor', classes.backContainer) },
+            React.createElement("span", { className: cx('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, allowParentSelect: allowParentSelect, hideColor: hideColor })))));
 }
-export default withStyles(styles)(AddTagMenu);
+export default withStyles(AddTagMenu, styles);

package/dist/tagsInput/AddTagMenuItem.js

@@ -6,11 +6,11 @@
  *  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 React from 'react';
-import clsx from 'clsx';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import Checkbox from '@mui/material/Checkbox';
 import MenuItem from '@mui/material/MenuItem';
 import { IconButton } from '@mui/material';
+import { useStyles } from 'tss-react/mui';
 function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, hideColor, allowParentSelect }) {
     const openSubmenu = () => {
         setActiveTag(tag);
@@ -20,11 +20,12 @@ function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, hideColor, allo
         handleAdd(tag);
     };
     const hasChildren = Boolean(tag.children.length);
+    const { cx } = useStyles();
     return (React.createElement(MenuItem, { classes: { root: classes.listItem }, onClick: hasChildren ? openSubmenu : toggleChecked, disableRipple: allowParentSelect },
-        !hideColor && React.createElement("div", { className: clsx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
+        !hideColor && React.createElement("div", { className: cx(classes.tagColorDotSmall, 'mr-1'), style: { background: '#' + tag.tagBody.color } }),
         React.createElement("span", { className: "mr-2 flex-fill" }, tag.tagBody.name),
         (allowParentSelect || !hasChildren) && React.createElement(Checkbox, { onClick: toggleChecked, classes: { root: 'smallIconButton' }, checked: tag.active }),
-        React.createElement(IconButton, { size: "small", onClick: openSubmenu, className: clsx(!hasChildren && (allowParentSelect ? 'invisible' : 'd-none')) },
-            React.createElement(KeyboardArrowRight, { className: clsx('d-flex textSecondaryColor', classes.proceedIcon) }))));
+        React.createElement(IconButton, { size: "small", onClick: openSubmenu, className: cx(!hasChildren && (allowParentSelect ? 'invisible' : 'd-none')) },
+            React.createElement(KeyboardArrowRight, { className: cx('d-flex textSecondaryColor', classes.proceedIcon) }))));
 }
 export default AddTagMenuItem;

package/dist/tagsInput/TagInputList.js

@@ -20,26 +20,30 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { InputAdornment, MenuItem, Select } from '@mui/material';
 import { ClickAwayListener } from '@mui/base';
 import Autocomplete from '@mui/material/Autocomplete';
-import clsx from 'clsx';
 import { Edit } from '@mui/icons-material';
-import { selectStyles } from '../formFields';
+import { useSelectStyles } from '../formFields';
 import AddTagMenu from './AddTagMenu';
 import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
 import { getAllMenuTags, getHighlightedPartLabel, getMenuTags, stubComponent } from '../utils';
 import getCaretCoordinates from '../utils/DOM/getCaretCoordinates';
 import { makeAppStyles } from '../styles';
-const useStyles = makeAppStyles((theme) => (Object.assign(Object.assign({}, selectStyles(theme)), { tagColorDotSmall: {
+const useStyles = makeAppStyles()((theme) => ({
+    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'
-    }, editIcon: {
+    },
+    editIcon: {
         opacity: 0.5
-    }, invalid: {} })));
+    },
+    invalid: {},
+}));
 const endTagRegex = /#\s*[^\w\d]*$/;
 const getCurrentInputString = (input, formTagIds = [], allMenuTags = []) => {
     let substr = input;
@@ -83,7 +87,9 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
     const [isEditing, setIsEditing] = useState(false);
     const [inputValue, setInputValue] = useState('');
     const [currentInputString, setCurrentInputString] = useState('');
-    const classes = useStyles();
+    const { classes: ownClasses, cx } = useStyles();
+    const { classes: selectClasses } = useSelectStyles();
+    const classes = Object.assign(Object.assign({}, ownClasses), selectClasses);
     const InputValueForRender = useMemo(() => {
         var _a;
         if (!inputValue || !tags || !tags.length)
@@ -92,8 +98,8 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
             && input.value.map(id => getFullTag(id, tags)).filter(t => t);
         if (!(arrayOfTags === null || arrayOfTags === void 0 ? void 0 : arrayOfTags.length))
             return '';
-        return arrayOfTags.map((tag, index) => (React.createElement("span", { key: tag.id, className: clsx('centeredFlex', index !== arrayOfTags.length - 1 ? 'pr-1' : '') },
-            !hideColor && React.createElement("div", { key: tag.id, className: clsx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
+        return arrayOfTags.map((tag, index) => (React.createElement("span", { key: tag.id, className: cx('centeredFlex', index !== arrayOfTags.length - 1 ? 'pr-1' : '') },
+            !hideColor && React.createElement("div", { key: tag.id, className: cx(classes.tagColorDotSmall, 'mr-0-5'), style: { background: '#' + tag.color } }),
             React.createElement("span", { className: "text-nowrap" }, `#${tag.name} `))));
     }, [tags, input.value, inputValue, hideColor]);
     const inputNode = useRef();
@@ -244,14 +250,14 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
             React.createElement(AddTagMenu, { tags: menuTags, handleAdd: onTagAdd, hideColor: hideColor, activeTag: activeTag, setActiveTag: setActiveTag, allowParentSelect: allowParentSelect }));
     });
     return (React.createElement("div", { className: className, id: input.name },
-        React.createElement("div", { className: clsx('relative', {
+        React.createElement("div", { className: cx('relative', {
                 'pointer-events-none': disabled
             }) },
             React.createElement(Autocomplete, { value: null, open: menuIsOpen, options: filteredOptions, onChange: handleChange, renderOption: renderOption, filterOptions: filterOptionsInner, getOptionLabel: getOptionLabel, PopperComponent: currentInputString ? undefined : popperAdapter, ListboxComponent: currentInputString ? undefined : listboxAdapter, classes: {
                     root: classes.root,
                     hasPopupIcon: classes.hasPopup,
                     hasClearIcon: classes.hasClear,
-                    listbox: clsx(classes.listbox, fieldClasses.listbox),
+                    listbox: cx(classes.listbox, fieldClasses.listbox),
                     inputRoot: classes.inputWrapper,
                     noOptions: 'd-none'
                 }, renderInput: (_a) => {
@@ -259,16 +265,16 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
                     return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, name: input.name, value: input.value, error: meta.error, invalid: meta === null || meta === void 0 ? void 0 : meta.invalid, label: label, warning: warning, disabled: disabled, fieldClasses: fieldClasses, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: placeholder, editIcon: editIcon === undefined ? React.createElement(Edit, null) : editIcon, InputProps: Object.assign(Object.assign({}, InputProps), { onChange: handleInputChange, onFocus,
                             onBlur, classes: {
                                 underline: fieldClasses.underline,
-                                input: clsx(disabled && classes.readonly, fieldClasses.text),
+                                input: cx(disabled && classes.readonly, fieldClasses.text),
                             }, inputProps: Object.assign(Object.assign({}, inputProps), { ref: ref => {
                                     inputProps.ref.current = ref;
                                     inputNode.current = ref;
-                                }, value: inputValue, className: clsx(inputProps.className, fieldClasses.text) }) }), CustomInput: !isEditing
+                                }, value: inputValue, className: cx(inputProps.className, fieldClasses.text) }) }), CustomInput: !isEditing
                             ? React.createElement(Select, { inputRef: ref => {
                                     inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
                                 }, onFocus: edit, value: "stub", className: classes.inputWrapper, classes: {
-                                    select: clsx('d-flex flex-wrap cursor-text', fieldClasses.text)
-                                }, endAdornment: React.createElement(InputAdornment, { position: "end", className: clsx(classes.editIcon, 'invisible') },
+                                    select: cx('d-flex flex-wrap cursor-text', fieldClasses.text)
+                                }, endAdornment: React.createElement(InputAdornment, { position: "end", className: cx(classes.editIcon, 'invisible') },
                                     React.createElement(Edit, { className: "test" })), IconComponent: stubComponent },
                                 React.createElement(MenuItem, { value: "stub" }, InputValueForRender || React.createElement("span", { className: "placeholderContent" }, placeholder)))
                             : null })));

package/dist/timetable/miniCalendar/CalendarDay.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DateArgFunction, CalendarDayModel } from '../../model';
+import { CalendarDayModel, DateArgFunction } from '../../model';
 interface Props extends CalendarDayModel {
     dayIndexValue: number;
     isSameAsTarget?: boolean;

package/dist/timetable/miniCalendar/CalendarDay.js

@@ -7,56 +7,55 @@
  */
 import React, { memo } from 'react';
 import { Button } from '@mui/material';
-import clsx from 'clsx';
 import { alpha } from '@mui/material/styles';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
-    root: {
-        padding: 0,
-        border: '2px solid transparent',
-        borderRadius: 4,
-        minWidth: 'initial',
-        boxShadow: 'none',
-        fontWeight: 'normal',
-        color: theme.palette.text.primary,
-        '&:active': {
-            boxShadow: 'none'
-        },
-        '&:focus': {
-            boxShadow: 'none'
-        },
-        '&::after': {
-            content: '\'\'',
-            position: 'absolute',
-            width: 4,
-            height: 4,
-            top: 4,
-            borderRadius: '100%'
+const useStyles = makeAppStyles()((theme, { dayIndexValue }) => {
+    const backgroundColor = alpha(theme.palette.primary.main, dayIndexValue);
+    return {
+        root: {
+            padding: 0,
+            border: '2px solid transparent',
+            borderRadius: 4,
+            minWidth: 'initial',
+            boxShadow: 'none',
+            fontWeight: 'normal',
+            color: theme.palette.text.primary,
+            '&:active': {
+                boxShadow: 'none'
+            },
+            '&:focus': {
+                boxShadow: 'none'
+            },
+            '&::after': {
+                content: '\'\'',
+                position: 'absolute',
+                width: 4,
+                height: 4,
+                top: 4,
+                borderRadius: '100%'
+            },
+            '&$same': {
+                border: `2px solid ${theme.palette.text.primary}`
+            }
         },
-        '&$same': {
-            border: `2px solid ${theme.palette.text.primary}`
-        }
-    },
-    same: {},
-    hasSession: ({ dayIndexValue }) => {
-        const backgroundColor = alpha(theme.palette.primary.main, dayIndexValue);
-        return {
+        same: {},
+        hasSession: {
             backgroundColor,
             color: theme.palette.getContrastText(backgroundColor),
             '&:hover': {
                 backgroundColor,
                 color: theme.palette.getContrastText(backgroundColor)
             }
-        };
-    },
-    isToday: {
-        fontWeight: 900
-    }
-}));
+        },
+        isToday: {
+            fontWeight: 900
+        }
+    };
+});
 const CalendarDay = memo((props) => {
     const { customClasses = {}, day, date, setTargetDay, dayIndexValue, hasSession, isSameAsTarget, isToday, disabled } = props;
-    const classes = useStyles({ dayIndexValue, hasSession, isToday });
-    return (React.createElement(Button, { className: clsx(classes.root, customClasses.root, isSameAsTarget && clsx(classes.same, customClasses.selected), {
+    const { classes, cx } = useStyles({ dayIndexValue });
+    return (React.createElement(Button, { className: cx(classes.root, customClasses.root, isSameAsTarget && cx(classes.same, customClasses.selected), {
             [customClasses.hasSession || classes.hasSession]: hasSession,
             [customClasses.today || classes.isToday]: isToday
         }), onClick: () => setTargetDay(date), classes: {

package/dist/timetable/miniCalendar/CalendarHeader.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { IconButton, Typography } from '@mui/material';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
-import clsx from 'clsx';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     root: {
         display: 'flex',
         justifyContent: 'space-between',
@@ -12,8 +11,8 @@ const useStyles = makeAppStyles(theme => ({
     }
 }));
 const CalendarHeader = ({ month, year, previousMonth, nextMonth, customClasses = {} }) => {
-    const classes = useStyles();
-    return React.createElement("div", { className: clsx(classes.root, customClasses.root) },
+    const { classes, cx } = useStyles();
+    return React.createElement("div", { className: cx(classes.root, customClasses.root) },
         React.createElement(IconButton, { onClick: previousMonth, className: customClasses.leftButton },
             React.createElement(KeyboardArrowLeft, null)),
         React.createElement(Typography, { align: "center", className: customClasses.selectedMonth },

package/dist/timetable/miniCalendar/CalendarWeekPanel.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import WeekDay from './WeekDay';
-import clsx from 'clsx';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     root: {
         display: 'grid',
         gridTemplateColumns: `repeat(7, ${theme.spacing(4)})`,
@@ -14,7 +13,7 @@ const useStyles = makeAppStyles(theme => ({
 }));
 const week = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const CalendarWeekPanel = ({ className, dayClass, switchWeekDays, selectedWeekDays = [] }) => {
-    const classes = useStyles();
-    return (React.createElement("div", { className: clsx(classes.root, className) }, week.map((el, id) => (React.createElement(WeekDay, { key: id, id: id, name: el, selected: selectedWeekDays[id], click: switchWeekDays, className: dayClass })))));
+    const { classes, cx } = useStyles();
+    return (React.createElement("div", { className: cx(classes.root, className) }, week.map((el, id) => (React.createElement(WeekDay, { key: id, id: id, name: el, selected: selectedWeekDays[id], click: switchWeekDays, className: dayClass })))));
 };
 export default CalendarWeekPanel;

package/dist/timetable/miniCalendar/WeekDay.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button, Typography } from '@mui/material';
-import clsx from 'clsx';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     weekButton: {
         padding: theme.spacing(0.5),
         minWidth: 'initial',
@@ -20,9 +19,9 @@ const useStyles = makeAppStyles(theme => ({
 }));
 const DivRoot = props => React.createElement("div", { className: props.className }, props.children);
 const WeekDay = ({ name, selected, click, id, className }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const Root = click ? Button : DivRoot;
-    return React.createElement(Root, { className: clsx(classes.weekButton, {
+    return React.createElement(Root, { className: cx(classes.weekButton, {
             [classes.selectedWeekDay]: selected
         }, className), onClick: () => click(id), variant: selected ? 'contained' : 'text', color: selected ? 'primary' : 'inherit', disableElevation: true },
         React.createElement(Typography, { variant: "caption", align: "center", className: selected ? classes.weekDayText : '' }, name));

package/package.json

@@ -1,103 +1,94 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.0.55",
+  "version": "1.1.0",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {
-    "@marshallofsound/webpack-asset-relocator-loader": "^0.5.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8",
-    "@types/node": "^18.11.5",
-    "@types/react": "^18.0.23",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.0.7",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@types/node": "^22.7.2",
+    "@types/react": "^18.3.9",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-window": "^1.8.8",
+    "@types/react-window-infinite-loader": "^1.0.9",
     "@types/redux": "^3.6.0",
-    "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
-    "cross-env": "^7.0.3",
-    "css-loader": "^6.7.1",
+    "@types/webpack-env": "^1.18.5",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "css-loader": "^7.1.2",
     "eslint": "^8.26.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-react": "^7.36.1",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^7.2.13",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^29.6.1",
-    "less": "^4.1.3",
-    "less-loader": "11.1.0",
-    "mini-css-extract-plugin": "^2.6.1",
-    "react-refresh": "^0.14.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "serve": "^14.0.1",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.9",
-    "ts-loader": "^9.4.4",
-    "tsc-alias": "^1.8.7",
-    "typescript": "^5.1.6",
-    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "less-loader": "12.2.0",
+    "mini-css-extract-plugin": "^2.9.1",
+    "react-refresh": "^0.14.2",
+    "sass-loader": "^16.0.2",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "tsc-alias": "^1.8.10",
+    "typescript": "^5.6.2",
+    "webpack": "^5.95.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-autoformat": "35.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "35.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "^30.5.0",
-    "@ckeditor/ckeditor5-editor-classic": "35.1.0",
-    "@ckeditor/ckeditor5-essentials": "35.1.0",
-    "@ckeditor/ckeditor5-heading": "35.1.0",
-    "@ckeditor/ckeditor5-image": "35.1.0",
-    "@ckeditor/ckeditor5-link": "35.1.0",
-    "@ckeditor/ckeditor5-list": "35.1.0",
-    "@ckeditor/ckeditor5-markdown-gfm": "35.1.0",
-    "@ckeditor/ckeditor5-paragraph": "35.1.0",
-    "@ckeditor/ckeditor5-react": "5.0.2",
-    "@ckeditor/ckeditor5-source-editing": "35.1.0",
-    "@ckeditor/ckeditor5-table": "35.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "35.1.0",
-    "@emotion/cache": "11.10.8",
-    "@emotion/react": "11.10.8",
-    "@emotion/styled": "11.10.8",
+    "@ckeditor/ckeditor5-autoformat": "43.1.1",
+    "@ckeditor/ckeditor5-basic-styles": "43.1.1",
+    "@ckeditor/ckeditor5-dev-utils": "^42.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "43.1.1",
+    "@ckeditor/ckeditor5-essentials": "43.1.1",
+    "@ckeditor/ckeditor5-heading": "43.1.1",
+    "@ckeditor/ckeditor5-image": "43.1.1",
+    "@ckeditor/ckeditor5-link": "43.1.1",
+    "@ckeditor/ckeditor5-list": "43.1.1",
+    "@ckeditor/ckeditor5-markdown-gfm": "43.1.1",
+    "@ckeditor/ckeditor5-paragraph": "43.1.1",
+    "@ckeditor/ckeditor5-react": "9.3.0",
+    "@ckeditor/ckeditor5-source-editing": "43.1.1",
+    "@ckeditor/ckeditor5-table": "43.1.1",
+    "@ckeditor/ckeditor5-theme-lark": "43.1.1",
+    "@emotion/cache": "11.13.1",
+    "@emotion/react": "11.13.3",
+    "@emotion/styled": "11.13.0",
     "@fortawesome/fontawesome-svg-core": "latest",
     "@fortawesome/free-regular-svg-icons": "latest",
     "@fortawesome/free-solid-svg-icons": "latest",
     "@fortawesome/react-fontawesome": "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",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/lab": "^6.0.0-beta.10",
+    "@mui/material": "^6.1.1",
+    "@mui/system": "^6.1.1",
+    "@mui/x-date-pickers": "^7.18.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.11",
-    "react": "^18.2.0",
-    "react-ace": "^10.1.0",
+    "re-resizable": "^6.10.0",
+    "react": "^18.3.1",
+    "react-ace": "^12.0.0",
     "react-color": "^2.19.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-number-format": "4.9.4",
-    "react-window": "^1.8.9",
+    "react-window": "^1.8.10",
     "react-window-infinite-loader": "^1.0.9",
-    "redux": "^4.2.1"
-  },
-  "resolutions": {
-    "@mui/styles/react": "^18.2.0"
+    "redux": "^5.0.1",
+    "tss-react": "^4.9.13"
   },
   "scripts": {
     "test": "exit 0",
-    "start": "cross-env NODE_ENV=development webpack serve --config tools/webpack/webpack.config.dev.js",
-    "start:prod": "cross-env NODE_ENV=development webpack serve --config tools/webpack/webpack.config.prod.js",
+    "start": "webpack serve --env production --config tools/webpack/webpack.config.dev.js",
+    "start:prod": "webpack serve --env development --config tools/webpack/webpack.config.prod.js",
     "build": "tsc -p tsconfig.prod.json && tsc-alias",
-    "serve": "cross-env NODE_ENV=production webpack --config tools/webpack/webpack.config.prod.js && cross-env serve dist/",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src/"
   },
   "repository": {