ish-ui 1.3.4 → 1.3.6

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,7 +86,7 @@ const getSpaceWidth = (probe, typographySignature) => {
     return spaceWidth;
 };
 export const AutosizeInput = (_a) => {
-    var { placeholder, reserveWidth, inputRef, ref, value } = _a, props = __rest(_a, ["placeholder", "reserveWidth", "inputRef", "ref", "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);
@@ -145,10 +145,17 @@ export const AutosizeInput = (_a) => {
         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

@@ -1,5 +1,5 @@
 /*
- * Copyright ish group pty ltd 2023.
+ * Copyright ish group pty ltd 2026.
  *
  * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
  *
@@ -23,10 +23,9 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import CloseIcon from '@mui/icons-material/Close';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { ListboxComponent, useSelectStyles } from './SelectCustomComponents';
-import EditInPlaceFieldBase from './EditInPlaceFieldBase';
+import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
 import { makeAppStyles } from '../styles';
-import { getHighlightedPartLabel, stubComponent } from '../utils';
-import { usePrevious } from '../utils/hooks';
+import { getHighlightedPartLabel, stubComponent, usePrevious } from '../utils';
 const useStyles = makeAppStyles()({
     popper: {
         zIndex: 1400
@@ -52,6 +51,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
     const { classes: ownClasses, cx } = useStyles();
     const { classes: selectClasses } = useSelectStyles();
     const classes = Object.assign(Object.assign({}, selectClasses), ownClasses);
+    const hasCustomListbox = !(categoryKey || inline);
     const sortedItems = useMemo(() => {
         const sorted = items && (sort
             ? [...items].sort(typeof sort === 'function'
@@ -216,13 +216,16 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         return option[selectValueMark] === value;
     };
     const renderOption = (optionProps, data) => {
-        if (typeof itemRenderer === 'function') {
-            return [itemRenderer(getHighlightedPartLabel(getOptionLabel(data), searchValue), data, searchValue, optionProps), optionProps];
+        const optionLabel = getOptionLabel(data);
+        const hasItemRenderrer = typeof itemRenderer === 'function';
+        const highlightedPart = getHighlightedPartLabel(optionLabel, searchValue, hasCustomListbox || hasItemRenderrer ? undefined : optionProps);
+        if (!hasCustomListbox) {
+            return hasItemRenderrer ? itemRenderer(highlightedPart, data, searchValue, optionProps) : highlightedPart;
         }
-        if (inline || categoryKey) {
-            return getHighlightedPartLabel(getOptionLabel(data), searchValue, optionProps);
+        if (hasItemRenderrer) {
+            return [itemRenderer(highlightedPart, data, searchValue, optionProps), optionProps];
         }
-        return [getHighlightedPartLabel(getOptionLabel(data), searchValue), optionProps];
+        return [highlightedPart, optionProps];
     };
     const selectedOption = useMemo(() => sortedItems.find(i => multiple
         ? (input.value || []).includes(i[selectValueMark])
@@ -266,13 +269,12 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
             ? valueRenderer(displayedValue, valueForRender, searchValue, { value: valueForRender && valueForRender[selectValueMark] })
             : null;
     }, [selectedOption, searchValue, displayedValue, selectValueMark, returnType, valueRenderer, input.value]);
-    const renderIcons = useMemo(() => !disabled && (loading
-        ? React.createElement(CircularProgress, { size: 24, thickness: 4, className: fieldClasses.loading })
-        : (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', inline && 'p-0'), disableRipple: true },
-                React.createElement(ExpandMore, { className: inline && 'fsInherit' })) : editIcon))), [disabled, loading, inline, allowEmpty, input.value]);
+    const renderLoading = useMemo(() => React.createElement(CircularProgress, Object.assign({}, inline ? { sx: { padding: 0.5 } } : {}, { size: 24, thickness: 4, className: fieldClasses.loading })), [fieldClasses.loading, inline]);
+    const renderIcons = useMemo(() => !disabled && (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', inline && 'p-0'), disableRipple: true },
+            React.createElement(ExpandMore, { className: inline && 'fsInherit' })) : editIcon)), [disabled, inline, allowEmpty, input.value]);
     const inputValue = useMemo(() => {
         if (multiple) {
             return (input.value || []).map(v => sortedItems.find(s => s[selectValueMark] === v));
@@ -285,7 +287,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
     const renderInput = useCallback((_a) => {
         var { slotProps: { input: InputProps, htmlInput: inputProps } } = _a, params = __rest(_a, ["slotProps"]);
         const value = (isEditing ? searchValue : (typeof displayedValue === 'string' ? displayedValue : ''));
-        return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, key: input.name, name: input.name, value: value, 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,
+        return (React.createElement(EditInPlaceFieldBase, Object.assign({}, params, { variant: variant, key: input.name, name: input.name, value: value, 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: loading ? renderLoading : (!hideEditIcon && renderIcons), InputProps: Object.assign(Object.assign({}, InputProps), { endAdornment: null, onChange: handleInputChange, onFocus: edit, onClick: onEditButtonFocus, onBlur,
                 disableUnderline, classes: {
                     underline: fieldClasses.underline,
                     input: cx(disabled && classes.readonly, fieldClasses.text),
@@ -300,7 +302,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                             inputProps.ref.current = ref === null || ref === void 0 ? void 0 : ref.node;
                         }, classes: {
                             select: cx('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)
+                        }, onFocus: edit, value: (returnType === 'object' ? input.value[selectValueMark] : input.value) || '', endAdornment: loading ? renderLoading : React.createElement(InputAdornment, { position: "end", className: 'd-none' }, renderIcons), IconComponent: stubComponent }), renderValue)
                 : null })));
     }, [
         variant,
@@ -354,7 +356,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
                     popper: classes.popper,
                     groupUl: 'm-0'
                 }, groupBy: categoryKey && (option => option[categoryKey]), renderOption: renderOption, getOptionLabel: getOptionLabel, filterOptions: filterItems, slots: {
-                    listbox: inline || categoryKey ? undefined : ListBoxAdapter,
+                    listbox: hasCustomListbox ? ListBoxAdapter : undefined,
                     popper: categoryKey ? undefined : PopperAdapter,
                 }, renderInput: renderInput, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
 }

package/dist/formFields/SelectCustomComponents.d.ts

@@ -11,12 +11,12 @@ export declare const useSelectStyles: (params: void, muiStyleOverridesParams?: {
 };
 interface ListRowProps {
     data: {
-        children: [
+        children: Array<[
             [
                 React.ReactNode
             ],
             React.HTMLAttributes<HTMLLIElement>
-        ];
+        ]>;
         selectAdornment: EditInPlaceSearchSelectFieldProps<any, any>['selectAdornment'];
     };
     index: number;

package/dist/formFields/SelectCustomComponents.js

@@ -1,5 +1,5 @@
 /*
- * Copyright ish group pty ltd 2023.
+ * Copyright ish group pty ltd 2026.
  *
  * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License version 3 as published by the Free Software Foundation.
  *
@@ -34,8 +34,8 @@ import { List } from 'react-window';
 import { green } from '@mui/material/colors';
 import { ListItemButton } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
-import { makeAppStyles } from '../styles';
 import { useStyles } from 'tss-react/mui';
+import { makeAppStyles } from '../styles';
 export const useSelectStyles = makeAppStyles()((theme, p, classes) => ({
     bottomMargin: {
         marginBottom: `${theme.spacing(1) + 1}`
@@ -132,10 +132,15 @@ export const useSelectStyles = makeAppStyles()((theme, p, classes) => ({
         }
     },
 }));
-export const ListRow = React.memo(({ data: { children, selectAdornment }, index, style }) => React.createElement(ListItemButton, Object.assign({}, children[index][1], { selected: children[index][1]['aria-selected'], style: style, key: index }), (((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'start' && index === 0)
-    || ((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'end' && index === children.length))
-    ? selectAdornment.content
-    : children[index][0]));
+export const ListRow = React.memo(({ data: { children, selectAdornment }, index, style }) => {
+    if (!children[index])
+        return null;
+    const [content, props] = children[index];
+    return React.createElement(ListItemButton, Object.assign({ component: 'li' }, props, { selected: Boolean(props['aria-selected']), style: style, key: index }), (((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'start' && index === 0)
+        || ((selectAdornment === null || selectAdornment === void 0 ? void 0 : selectAdornment.position) === 'end' && index === children.length))
+        ? selectAdornment.content
+        : content);
+});
 export const ListboxComponent = React.forwardRef((props, ref) => {
     const { children, rowHeight, remoteRowCount, loadMoreRows, classes, loading, selectAdornment, fieldClasses, ownerState } = props, other = __rest(props, ["children", "rowHeight", "remoteRowCount", "loadMoreRows", "classes", "loading", "selectAdornment", "fieldClasses", "ownerState"]);
     const { cx } = useStyles();

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.4",
+  "version": "1.3.6",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {