ish-ui 1.1.0 → 1.1.2

package/dist/appBar/AppBarHelpMenu.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useStyles, withStyles } from 'tss-react/mui';
+import { withStyles } from 'tss-react/mui';
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -8,6 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
 import { format as formatDate } from 'date-fns';
 import { III_DD_MMM_YYYY_HH_MM_SPECIAL, openInternalLink } from '../utils';
+import clsx from 'clsx';
 const styles = theme => ({
     button: {
         color: theme.appBarButton.helpMenu.color,
@@ -47,7 +48,6 @@ class AppBarHelpMenu extends React.Component {
     render() {
         const { anchorEl } = this.state;
         const { classes, created, modified, iconClasses, auditsUrl } = this.props;
-        const { cx } = useStyles();
         return (React.createElement(React.Fragment, null,
             React.createElement(Menu, { id: "form-help-menu", anchorEl: anchorEl, open: Boolean(anchorEl), onClose: this.handleClose, marginThreshold: 16, transformOrigin: {
                     vertical: 'center',
@@ -67,7 +67,7 @@ class AppBarHelpMenu extends React.Component {
                 auditsUrl && (React.createElement(MenuItem, { onClick: this.openAudits }, "View audit trail"))),
             React.createElement(Tooltip, { title: "Additional information" },
                 React.createElement("div", null,
-                    React.createElement(IconButton, { type: "button", "aria-owns": anchorEl ? 'form-help-menu' : null, "aria-haspopup": "true", onClick: this.handleAddFieldClick, size: "large", className: cx({
+                    React.createElement(IconButton, { type: "button", "aria-owns": anchorEl ? 'form-help-menu' : null, "aria-haspopup": "true", onClick: this.handleAddFieldClick, size: "large", className: clsx({
                             [classes.button]: !iconClasses,
                             [iconClasses]: !!iconClasses
                         }) },

package/dist/colorPicker/ColorPicker.js

@@ -15,7 +15,7 @@ import Grow from '@mui/material/Grow';
 import { stopEventPropagation } from '../utils/events';
 import { makeAppStyles } from '../styles';
 import { useAppTheme } from '../themes';
-const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }) => ({
+const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p, classes) => ({
     paper: {
         width: 200,
         padding: spacing(2),
@@ -64,7 +64,7 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }) =>
             duration: transitions.duration.shorter,
             easing: transitions.easing.easeInOut
         }),
-        '&:hover,&$opened': {
+        [`&:hover,&.${classes.opened}`]: {
             transform: 'scale(2)',
             zIndex: zIndex.modal,
             boxShadow: '1px 0px 1px -1px rgba(0,0,0,0.2), 0px 0px 2px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);'

package/dist/formFields/EditInPlaceFieldBase.js

@@ -10,7 +10,7 @@ import { FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputL
 import { makeAppStyles } from '../styles';
 import WarningMessage from '../fieldMessage/WarningMessage';
 import { countWidth } from '../utils';
-const useStyles = makeAppStyles()(theme => ({
+const useStyles = makeAppStyles()((theme, p, classes) => ({
     label: {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
@@ -22,7 +22,7 @@ const useStyles = makeAppStyles()(theme => ({
     rightLabel: {
         left: 'unset',
         right: theme.spacing(-2),
-        '& $label': {
+        [`& .${classes.label}`]: {
             marginRight: 0
         }
     },

package/dist/formFields/FilePreview.js

@@ -10,13 +10,13 @@ import { darken } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Avatar from '@mui/material/Avatar';
-const styles = (theme) => ({
+const styles = (theme, p, classes) => ({
     root: {
         height: 'fit-content',
         width: 'fit-content',
         position: 'relative',
         fontSize: 0,
-        '&:hover $backdrop$active': {
+        [`&:hover .${classes.backdrop}.${classes.active}`]: {
             opacity: 1
         },
         color: '#fff',

package/dist/formFields/SelectCustomComponents.d.ts

@@ -4,7 +4,7 @@ export declare const useSelectStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"label" | "error" | "root" | "multiple" | "inline" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "editIcon" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "valid" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup" | "hasClear", string>;
+    classes: Record<"label" | "error" | "root" | "multiple" | "inline" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "editIcon" | "valid" | "hasClear" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup", string>;
     theme: AppTheme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;

package/dist/formFields/SelectCustomComponents.js

@@ -27,7 +27,7 @@ import { ListItemButton } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import { makeAppStyles } from '../styles';
 import { useStyles } from 'tss-react/mui';
-export const useSelectStyles = makeAppStyles()(theme => ({
+export const useSelectStyles = makeAppStyles()((theme, p, classes) => ({
     bottomMargin: {
         marginBottom: `${theme.spacing(1) + 1}`
     },
@@ -52,7 +52,7 @@ export const useSelectStyles = makeAppStyles()(theme => ({
     },
     label: {
         whiteSpace: 'nowrap',
-        '&$valid': {
+        [`&.${classes.valid}`]: {
             color: green[500]
         }
     },
@@ -99,26 +99,26 @@ export const useSelectStyles = makeAppStyles()(theme => ({
         }
     },
     root: {
-        '& $multiple': {
+        [`& .${classes.multiple}`]: {
             flexWrap: 'wrap'
         }
     },
     inputWrapper: {
-        '&.Mui-focused $expandIcon': {
+        [`&.Mui-focused .${classes.expandIcon}`]: {
             opacity: 1
         }
     },
     expandIcon: { opacity: 0.5 },
     hasPopup: {
-        '&$root $inputWrapper': {
+        [`&.${classes.root} .${classes.inputWrapper}`]: {
             paddingRight: 0
         },
-        '&$root$hasClear $inputWrapper': {
+        [`&.${classes.root}.${classes.hasClear} .${classes.inputWrapper}`]: {
             paddingRight: 0
         }
     },
     hasClear: {
-        '&$root $inputWrapper': {
+        [`&.${classes.root} .${classes.inputWrapper}`]: {
             paddingRight: 0
         }
     },

package/dist/formFields/Switch.js

@@ -33,7 +33,7 @@ const getValue = value => {
             return value;
     }
 };
-const styles = theme => ({
+const styles = (theme, p, classes) => ({
     bar: {
         height: '22px',
         borderRadius: '12px',
@@ -42,7 +42,7 @@ const styles = theme => ({
         width: '38px'
     },
     checked: {
-        '&$disabled + $bar ': {
+        [`&.${classes.disabled} + .${classes.bar}`]: {
             opacity: 0.12
         }
     },
@@ -52,7 +52,7 @@ const styles = theme => ({
     },
     root: {
         alignItems: 'center',
-        '&$disabled': {
+        [`&.${classes.disabled}`]: {
             opacity: 0.12
         }
     },
@@ -64,16 +64,16 @@ const styles = theme => ({
         height: theme.spacing(4),
         width: theme.spacing(4),
         padding: 0,
-        '&$disabled': {
+        [`&.${classes.disabled}`]: {
             color: theme.palette.common.white
         },
-        '&$checked': {
+        [`&.${classes.checked}`]: {
             transform: `translateX(${theme.spacing(2)})`
         },
-        '&$checked + $bar': {
+        [`&.${classes.checked} + .${classes.bar}`]: {
             opacity: 1
         },
-        '&$checked$disabled + $bar': {
+        [`&.${classes.checked}.${classes.disabled} + .${classes.bar}`]: {
             backgroundColor: theme.palette.primary.main,
             opacity: 0.6
         }

package/dist/layout/resizable/ResizableWrapper.js

@@ -3,7 +3,7 @@ import { Resizable } from 're-resizable';
 import { useStyles, withStyles } from 'tss-react/mui';
 import useMediaQuery from '@mui/material/useMediaQuery';
 const LIST_SIDE_BAR_DEFAULT_WIDTH = 280;
-const styles = (theme) => ({
+const styles = (theme, p, classes) => ({
     sideBar: {
         borderRight: `1px solid ${theme.palette.divider}`,
         display: 'flex',
@@ -26,7 +26,7 @@ const styles = (theme) => ({
         zIndex: theme.zIndex.drawer,
         display: 'flex',
         justifyContent: 'center',
-        '&:active $line, &:hover $line': {
+        [`&:active .${classes.line}, &:hover .${classes.line}`]: {
             background: `${theme.palette.secondary.main}`,
             overflow: 'visible'
         }

package/dist/themes/ishTheme.js

@@ -37,7 +37,7 @@ const createOverrides = (palette) => ({
             styleOverrides: {
                 label: {
                     fontSize: '14px',
-                    '&$disabled': {
+                    '&.Mui-disabled': {
                         color: 'unset'
                     }
                 },
@@ -165,7 +165,7 @@ const createOverrides = (palette) => ({
                     '&:hover': {
                         color: palette.text.primary
                     },
-                    '&$active': {
+                    '&:active': {
                         color: palette.text.primary
                     }
                 },

package/dist/timetable/miniCalendar/CalendarDay.js

@@ -9,7 +9,7 @@ import React, { memo } from 'react';
 import { Button } from '@mui/material';
 import { alpha } from '@mui/material/styles';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles()((theme, { dayIndexValue }) => {
+const useStyles = makeAppStyles()((theme, { dayIndexValue }, classes) => {
     const backgroundColor = alpha(theme.palette.primary.main, dayIndexValue);
     return {
         root: {
@@ -34,7 +34,7 @@ const useStyles = makeAppStyles()((theme, { dayIndexValue }) => {
                 top: 4,
                 borderRadius: '100%'
             },
-            '&$same': {
+            [`&.${classes.same}`]: {
                 border: `2px solid ${theme.palette.text.primary}`
             }
         },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {