ish-ui 1.3.5 → 1.3.6

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/package.json

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