ish-ui 1.0.12 → 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/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,8 +220,8 @@ export interface CheckboxFieldProps<IP> {
 export interface TagsFieldProps<T, IP, MP> extends EditInPlaceFieldProps<IP, MP> {
     tags: T[];
     showConfirm?: ShowConfirmCaller;
-    classes?: any;
     validateEntity?: string;
+    allowParentSelect?: boolean;
 }
 export interface FormFieldBaseProps {
     required?: boolean;

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.12",
+  "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"
   }
 }