ish-ui 1.3.3 → 1.3.5

package/README.md

@@ -1,6 +1,6 @@
 # Ish UI
 
-UI elements for onCourse and other ish apps
+UI elements for onCourse apps
 
 [![npm latest package](https://img.shields.io/npm/v/ish-ui/latest.svg)](https://www.npmjs.com/package/ish-ui)
 

package/dist/colorPicker/ColorPicker.js

@@ -77,7 +77,7 @@ const useStyles = makeAppStyles()(({ spacing, palette, zIndex, transitions }, p,
         marginBottom: spacing(1.25)
     },
     customAlfa: {
-        '& > div > div:first-child > div': {
+        '& > div > div:first-of-type > div': {
             background: 'none !important'
         }
     },

package/dist/formFields/AutosizeInput.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-interface AutosizeInputProps extends React.ComponentPropsWithRef<"input"> {
+import { InputBaseComponentProps } from '@mui/material';
+type InputElementProps = React.ComponentPropsWithRef<"input">;
+interface AutosizeInputProps extends InputElementProps {
     placeholder?: string;
     /**
      * Space kept free after the text, in px. Defaults to the advance width of a
@@ -9,6 +11,7 @@ interface AutosizeInputProps extends React.ComponentPropsWithRef<"input"> {
     reserveWidth?: number;
     /** MUI InputBase hands the DOM node over through this prop instead of `ref`. */
     inputRef?: React.Ref<HTMLInputElement>;
+    inputComponent?: React.ElementType<InputBaseComponentProps> | undefined;
 }
 export declare const AutosizeInput: React.FC<AutosizeInputProps>;
 export {};

package/dist/formFields/AutosizeInput.js

@@ -86,8 +86,7 @@ const getSpaceWidth = (probe, typographySignature) => {
     return spaceWidth;
 };
 export const AutosizeInput = (_a) => {
-    var { placeholder, reserveWidth, inputRef, ref } = _a, props = __rest(_a, ["placeholder", "reserveWidth", "inputRef", "ref"]);
-    const [value, setValue] = useState(props.value || "");
+    var { placeholder, inputComponent, reserveWidth, inputRef, ref, value } = _a, props = __rest(_a, ["placeholder", "inputComponent", "reserveWidth", "inputRef", "ref", "value"]);
     const [width, setWidth] = useState(0);
     const spanRef = useRef(null);
     const probeRef = useRef(null);
@@ -143,14 +142,20 @@ export const AutosizeInput = (_a) => {
         return () => fonts.removeEventListener("loadingdone", onLoadingDone);
     }, [measure]);
     const handleChange = (e) => {
-        setValue(e.target.value);
         if (props.onChange)
             props.onChange(e);
     };
+    // `React.ElementType<InputBaseComponentProps>` widens to every intrinsic tag,
+    // because InputBaseComponentProps carries an `[arbitrary: string]: any` index
+    // signature. The prop keeps that type for compatibility with MUI's InputBase,
+    // but rendering needs the narrower, input shaped contract this component
+    // actually passes. Falling back to the `input` tag rather than a wrapper
+    // component also keeps the element identity stable across renders.
+    const InputElement = (inputComponent !== null && inputComponent !== void 0 ? inputComponent : "input");
     return (React.createElement("div", { style: { display: "inline-block", position: "relative" } },
         React.createElement("span", { ref: spanRef, style: measureStyle, "aria-hidden": true }, value || placeholder || ""),
         React.createElement("span", { ref: probeRef, style: measureStyle, "aria-hidden": true }),
-        React.createElement("input", Object.assign({}, props, { ref: setInputNode, type: "text", value: value, onChange: handleChange, placeholder: placeholder, style: Object.assign(Object.assign({}, props.style), { letterSpacing: "inherit", textTransform: "inherit", width: `${width}px`, boxSizing: "border-box", 
+        React.createElement(InputElement, Object.assign({}, props, { ref: setInputNode, type: "text", value: value, onChange: handleChange, placeholder: placeholder, style: Object.assign(Object.assign({}, props.style), { letterSpacing: "inherit", textTransform: "inherit", width: `${width}px`, boxSizing: "border-box", 
                 // CRITICAL: Padding and borders must be 0, the measuring span has none either
                 paddingLeft: 0, paddingRight: 0, borderLeft: "none", borderRight: "none", margin: 0, textOverflow: "unset" }) }))));
 };

package/dist/formFields/EditInPlaceFieldBase.js

@@ -37,14 +37,14 @@ const useStyles = makeAppStyles()((theme, p, classes) => ({
     },
     hideArrows: {
         '&::-webkit-outer-spin-button': {
-            '-webkit-appearance': 'none',
+            'WebkitAppearance': 'none',
             margin: 0
         },
         '&::-webkit-inner-spin-button': {
-            '-webkit-appearance': 'none',
+            'WebkitAppearance': 'none',
             margin: 0
         },
-        '-moz-appearance': 'textfield'
+        'MozAppearance': 'textfield'
     },
     inlineInput: {
         padding: 0,
@@ -73,6 +73,11 @@ const EditInPlaceFieldBase = ({ invalid, className, inline, label, fieldClasses
                 return OutlinedInput;
         }
     }, [variant]);
+    const inputComponent = useMemo((props) => inline
+        ? (InputProps === null || InputProps === void 0 ? void 0 : InputProps.inputComponent)
+            ? props => React.createElement(AutosizeInput, Object.assign({}, props, { inputComponent: InputProps.inputComponent }))
+            : AutosizeInput
+        : InputProps === null || InputProps === void 0 ? void 0 : InputProps.inputComponent, [inline, InputProps === null || InputProps === void 0 ? void 0 : InputProps.inputComponent]);
     return (React.createElement(FormControl, { fullWidth: true, error: invalid, variant: variant, margin: "none", className: cx(className, classes.inputWrapper) },
         label && (React.createElement(InputLabel, { classes: {
                 root: cx(fieldClasses.label, 'd-flex', 'overflow-visible', rightAligned && classes.rightLabel),
@@ -80,7 +85,7 @@ const EditInPlaceFieldBase = ({ invalid, className, inline, label, fieldClasses
             React.createElement("span", { className: classes.label }, label),
             labelAdornment)),
         CustomInput ||
-            React.createElement(InputComp, Object.assign({}, InputProps || {}, { inputComponent: inline ? AutosizeInput : undefined, inputRef: inputNode, inputProps: Object.assign({ placeholder,
+            React.createElement(InputComp, Object.assign({}, InputProps || {}, { inputComponent: inputComponent, inputRef: inputNode, inputProps: Object.assign({ placeholder,
                     disabled, className: cx(fieldClasses.text, {
                         [classes.inlineInput]: inline,
                         [classes.readonly]: disabled,

package/dist/formFields/EditInPlaceMoneyField.js

@@ -34,7 +34,7 @@ function EditInPlaceMoneyField(_a) {
     var _b;
     var { InputProps, currencySymbol, className } = _a, restProps = __rest(_a, ["InputProps", "currencySymbol", "className"]);
     const { cx } = useStyles();
-    return (React.createElement(EditInPlaceField, Object.assign({}, restProps, { preformatDisplayValue: preformatDisplayValue, InputProps: Object.assign(Object.assign({}, InputProps), { startAdornment: React.createElement(InputAdornment, { position: "start", className: (_b = restProps.fieldClasses) === null || _b === void 0 ? void 0 : _b.text },
+    return (React.createElement(EditInPlaceField, Object.assign({}, restProps, { preformatDisplayValue: preformatDisplayValue, InputProps: Object.assign(Object.assign({}, InputProps), { startAdornment: React.createElement(InputAdornment, { position: "start", className: cx((_b = restProps.fieldClasses) === null || _b === void 0 ? void 0 : _b.text, restProps.inline && 'mr-0-5') },
                 React.createElement("span", null, currencySymbol)), inputComponent: NumberFormatCustom }), className: cx('money', className) })));
 }
 export default EditInPlaceMoneyField;

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -219,6 +219,9 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         if (typeof itemRenderer === 'function') {
             return [itemRenderer(getHighlightedPartLabel(getOptionLabel(data), searchValue), data, searchValue, optionProps), optionProps];
         }
+        if (inline || categoryKey) {
+            return getHighlightedPartLabel(getOptionLabel(data), searchValue, optionProps);
+        }
         return [getHighlightedPartLabel(getOptionLabel(data), searchValue), optionProps];
     };
     const selectedOption = useMemo(() => sortedItems.find(i => multiple
@@ -268,7 +271,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         : (React.createElement("div", null,
             allowEmpty && input.value && (React.createElement(IconButton, { size: "small", onClick: onClear, color: "inherit" },
                 React.createElement(CloseIcon, { fontSize: "inherit" }))),
-            editIcon === undefined ? React.createElement(IconButton, { size: "small", color: "inherit", className: cx(classes.expandIcon, 'pl-0 pr-0'), disableRipple: true },
+            editIcon === undefined ? React.createElement(IconButton, { size: "small", color: "inherit", className: cx(classes.expandIcon, 'pl-0 pr-0', inline && 'p-0'), disableRipple: true },
                 React.createElement(ExpandMore, { className: inline && 'fsInherit' })) : editIcon))), [disabled, loading, inline, allowEmpty, input.value]);
     const inputValue = useMemo(() => {
         if (multiple) {

package/dist/styles/animateStyles.js

@@ -23,8 +23,8 @@ export const animateStyles = Object.assign(Object.assign(Object.assign(Object.as
     from: Object.assign(Object.assign({}, transform('translate3d(80px, 0, 0)')), prefixer('animationDuration', '0.5s', ['webkit', 'spec'])),
     to: Object.assign(Object.assign({}, transform('translate3d(0px, 0, 0)')), prefixer('animationDuration', '0s', ['webkit', 'spec']))
 })), keyframes('rotateOutCustom', {
-    from: Object.assign({}, prefixer('transform-origin', 'center', ['webkit', 'spec'])),
-    to: Object.assign(Object.assign({}, transform('rotate3d(0, 0, 1, 720deg)')), prefixer('transform-origin', 'center', ['webkit', 'spec']))
+    from: Object.assign({}, prefixer('transformOrigin', 'center', ['webkit', 'spec'])),
+    to: Object.assign(Object.assign({}, transform('rotate3d(0, 0, 1, 720deg)')), prefixer('transformOrigin', 'center', ['webkit', 'spec']))
 }, Object.assign({}, prefixer('animationDuration', '2.5s', ['webkit', 'spec'])))), keyframes('shake', {
     '10%, 90%': Object.assign({}, transform('translate3d(-2px, 0, 0)')),
     '20%, 80%': Object.assign({}, transform('translate3d(4px, 0, 0)')),

package/dist/tagsInput/TagInputList.js

@@ -189,7 +189,7 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
     return (React.createElement("div", { className: className, id: input.name },
         React.createElement("div", { className: cx('relative', {
                 'pointer-events-none': disabled
-            }) }, React.createElement(Autocomplete, { value: input.value, multiple: true, open: menuIsOpen, options: filteredOptions, onBlur: exit, onChange: handleChange, renderOption: renderOption, filterOptions: filterOptionsInner, getOptionLabel: getOptionLabel, slots: {
+            }) }, React.createElement(Autocomplete, { value: (input === null || input === void 0 ? void 0 : input.value) || [], multiple: true, open: menuIsOpen, options: filteredOptions, onBlur: exit, onChange: handleChange, renderOption: renderOption, filterOptions: filterOptionsInner, getOptionLabel: getOptionLabel, slots: {
                 popper: inputValue || !trackCarretPosition ? undefined : popperAdapter,
                 listbox: inputValue ? undefined : listboxAdapter
             }, classes: {

package/package.json

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