ish-ui 1.0.54 → 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/themes/index.d.ts

@@ -1,2 +1 @@
 export * from './ishTheme';
-export * from './appTheme';

package/dist/themes/index.js

@@ -6,4 +6,3 @@
  *  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 './ishTheme';
-export * from './appTheme';