ish-ui 1.0.44 → 1.0.46

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -19,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import CircularProgress from '@mui/material/CircularProgress';
 import Popper from '@mui/material/Popper';
 import { Autocomplete, IconButton, InputAdornment, Select } from '@mui/material';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import CloseIcon from '@mui/icons-material//Close';
 import clsx from 'clsx';
 import ExpandMore from '@mui/icons-material/ExpandMore';
@@ -232,6 +232,9 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         else {
             response = getOptionLabel(selectedOption) || defaultValue || input.value;
         }
+        if (multiple) {
+            response = '';
+        }
         if (alwaysDisplayDefault) {
             response = defaultValue;
         }
@@ -274,6 +277,53 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         const rendered = placeholder;
         return multiple && inputValue.length ? null : rendered;
     }, [multiple, placeholder, isEditing, inputValue]);
+    const renderInput = useCallback((_a) => {
+        var { InputLabelProps, InputProps, inputProps } = _a, params = __rest(_a, ["InputLabelProps", "InputProps", "inputProps"]);
+        return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, key: input.name, name: input.name, value: (isEditing ? searchValue : (typeof displayedValue === 'string' ? displayedValue : '')), error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
+                disableUnderline, classes: {
+                    underline: fieldClasses.underline,
+                    input: clsx(disabled && classes.readonly, fieldClasses.text),
+                }, inputProps: Object.assign(Object.assign({}, inputProps), { className: clsx(fieldClasses.text, 'mr-auto', inputProps.className), ref: ref => {
+                        inputProps.ref.current = ref;
+                        inputNode.current = ref;
+                        if (inputRef)
+                            inputRef.current = ref;
+                    } }) }), CustomInput: (valueRenderer && !multiple && !isEditing && input.value)
+                ?
+                    React.createElement(Select, Object.assign({}, InputProps, { inputRef: ref => {
+                            inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
+                        }, classes: {
+                            select: clsx('cursor-text', fieldClasses.text)
+                        }, onFocus: edit, value: (returnType === 'object' ? input.value[selectValueMark] : input.value) || '', endAdornment: React.createElement(InputAdornment, { position: "end", className: 'd-none' }, renderIcons), IconComponent: stubComponent }), renderValue)
+                : null })));
+    }, [
+        variant,
+        input,
+        displayedValue,
+        error,
+        hasError,
+        invalid,
+        inline,
+        label,
+        warning,
+        fieldClasses,
+        rightAligned,
+        label,
+        input,
+        labelAdornment,
+        renderedPlaceholder,
+        hideEditIcon,
+        renderIcons,
+        disableUnderline,
+        fieldClasses,
+        disabled,
+        isEditing,
+        searchValue,
+        displayedValue,
+        valueRenderer,
+        multiple,
+        isEditing
+    ]);
     return (React.createElement("div", { className: clsx(className, 'outline-none', inline && classes.inline), id: input === null || input === void 0 ? void 0 : input.name },
         React.createElement(SelectContext.Provider, { value: {
                 rowHeight,
@@ -296,25 +346,6 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                     option: 'w-100 text-pre',
                     popper: classes.popper,
                     groupUl: 'm-0'
-                }, groupBy: categoryKey && (option => option[categoryKey]), renderOption: renderOption, getOptionLabel: getOptionLabel, filterOptions: filterItems, ListboxComponent: inline || categoryKey ? null : ListBoxAdapter, PopperComponent: categoryKey ? null : PopperAdapter, renderInput: (_a) => {
-                    var { InputLabelProps, InputProps, inputProps } = _a, params = __rest(_a, ["InputLabelProps", "InputProps", "inputProps"]);
-                    return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, name: input.name, value: displayedValue, error: error, invalid: hasError || invalid, inline: inline, label: label, warning: warning, fieldClasses: fieldClasses, rightAligned: rightAligned, shrink: Boolean(label || input.value), labelAdornment: labelAdornment, placeholder: renderedPlaceholder, editIcon: !hideEditIcon && renderIcons, InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
-                            disableUnderline, classes: {
-                                underline: fieldClasses.underline,
-                                input: clsx(disabled && classes.readonly, fieldClasses.text),
-                            }, inputProps: Object.assign(Object.assign({}, inputProps), { className: clsx(fieldClasses.text, 'mr-auto', inputProps.className), ref: ref => {
-                                    inputProps.ref.current = ref;
-                                    inputNode.current = ref;
-                                    if (inputRef)
-                                        inputRef.current = ref;
-                                }, value: (isEditing ? searchValue : multiple ? '' : (typeof displayedValue === 'string' ? displayedValue : '')) }) }), CustomInput: (valueRenderer && !multiple && !isEditing && input.value)
-                            ?
-                                React.createElement(Select, Object.assign({}, InputProps, { inputRef: ref => {
-                                        inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
-                                    }, classes: {
-                                        select: clsx('cursor-text', fieldClasses.text)
-                                    }, onFocus: edit, value: (returnType === 'object' ? input.value[selectValueMark] : input.value) || '', endAdornment: React.createElement(InputAdornment, { position: "end", className: 'd-none' }, renderIcons), IconComponent: stubComponent }), renderValue)
-                            : null })));
-                }, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
+                }, groupBy: categoryKey && (option => option[categoryKey]), renderOption: renderOption, getOptionLabel: getOptionLabel, filterOptions: filterItems, ListboxComponent: inline || categoryKey ? null : ListBoxAdapter, PopperComponent: categoryKey ? null : PopperAdapter, renderInput: renderInput, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
 }
 export default EditInPlaceSearchSelect;

package/dist/formFields/FormRadioButtons.js

@@ -21,7 +21,7 @@ function FormRadioButtons({ items, disabled, input: { value, onChange, name }, m
             label,
             labelAdornment)),
         React.createElement(RadioGroup, Object.assign({ className: classes.group, value: value, onChange: (e) => onChange(e.target.value), row: row }, radioGroupProps), items
-            && items.map((i, n) => (React.createElement(FormControlLabel, { key: n, value: i[valuePath], control: React.createElement(Radio, Object.assign({ color: color, id: `input-${n}-${name}`, name: name }, radioProps)), label: (React.createElement(Typography, { component: "span", variant: "body2" }, i[labelPath])), disabled: disabled, htmlFor: `input-${n}-${name}` })))),
+            && items.map((i, n) => (React.createElement(FormControlLabel, { key: n, value: i[valuePath], control: React.createElement(Radio, Object.assign({ color: color, id: `input-${n}-${name}`, name: name }, radioProps)), label: (React.createElement(Typography, { component: "span", variant: "body2" }, i[labelPath])), disabled: disabled })))),
         React.createElement(FormHelperText, { classes: {
                 error: 'shakingError'
             } }, error)));

package/dist/formFields/SelectCustomComponents.js

@@ -158,7 +158,7 @@ export const ListboxComponent = React.forwardRef((props, ref) => {
     const isItemLoaded = index => index < (children.length + (selectAdornment ? 1 : 0));
     return (React.createElement("div", { ref: ref },
         React.createElement(OuterElementContext.Provider, { value: other },
-            React.createElement(InfiniteLoader, { isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: loadMoreItems }, ({ onItemsRendered }) => (React.createElement(List, { height: getHeight() + 2 * 8, width: "100%", className: clsx(classes.menuList, fieldClasses.selectMenu), itemData: itemData, outerElementType: OuterElementType, onItemsRendered: onItemsRendered, itemSize: itemSize, itemCount: itemCount }, ListRow))))));
+            React.createElement(InfiniteLoader, { isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: loadMoreItems }, ({ onItemsRendered, ref }) => (React.createElement(List, { ref: ref, height: getHeight() + 2 * 8, width: "100%", className: clsx(classes.menuList, fieldClasses.selectMenu), itemData: itemData, outerElementType: OuterElementType, onItemsRendered: onItemsRendered, itemSize: itemSize, itemCount: itemCount }, ListRow))))));
 });
 export const NoWrapOption = (content, data, search, parentProps) => (React.createElement("div", Object.assign({}, parentProps || {}),
     React.createElement(Tooltip, { title: content },

package/dist/model/Fields.d.ts

@@ -219,6 +219,7 @@ export interface FormSwitchProps<IP> {
     onClick?: AnyArgFunction;
 }
 export interface CheckboxFieldProps<IP> extends CheckboxProps {
+    inputRef?: MutableRefObject<any>;
     input?: Partial<Omit<IP, 'onBlur'>> & {
         onBlur?: AnyArgFunction;
     };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "ish-ui",
-  "version": "1.0.44",
+  "sideEffects": false,
+  "version": "1.0.46",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {
@@ -39,13 +40,14 @@
     "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"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-dev-utils": "^30.5.0",
     "@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",
@@ -93,6 +95,7 @@
   "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",
     "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/"