ish-ui 1.3.0 → 1.3.2

package/dist/dynamicSizeList/DynamicSizeList.js

@@ -35,6 +35,12 @@ const DynamicSizeList = React.forwardRef(({ children, itemCount, itemData, heigh
             (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.scrollToRow({ index, align });
         },
     }), []);
-    return (React.createElement(List, { className: className, style: { height, width }, listRef: attachRefs, rowComponent: children, rowProps: { data: itemData }, rowCount: itemCount, rowHeight: rowHeight, overscanCount: overscanCount }));
+    return (React.createElement(List, { className: className, 
+        // react-window v2 defaults the container to `maxHeight: 100%`. Callers
+        // commonly wrap this in react-virtualized-auto-sizer, whose wrapper is
+        // `height: 0` and expects the child to overflow it, so that 100% would
+        // resolve to zero and the list would render nothing. An explicit height
+        // supersedes the cap; without one, v2's default is left alone.
+        style: Object.assign({ height, width }, (height == null ? {} : { maxHeight: 'none' })), listRef: attachRefs, rowComponent: children, rowProps: { data: itemData }, rowCount: itemCount, rowHeight: rowHeight, overscanCount: overscanCount }));
 });
 export default DynamicSizeList;

package/dist/model/Fields.d.ts

@@ -231,6 +231,7 @@ export interface TagsFieldProps<T, IP, MP> extends EditInPlaceFieldProps<IP, MP>
     validateEntity?: string;
     allowParentSelect?: boolean;
     hideColor?: boolean;
+    trackCarretPosition?: boolean;
 }
 export interface FormFieldBaseProps {
     required?: boolean;

package/dist/tagsInput/TagInputList.d.ts

@@ -1,4 +1,4 @@
 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, editIcon, variant, hideColor }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
+declare function TagInputList<T extends TagLike, IP extends FieldInputProps, MP extends FieldMetaProps>({ input, tags, placeholder, labelAdornment, meta, label, disabled, className, warning, allowParentSelect, fieldClasses, editIcon, variant, hideColor, trackCarretPosition }: TagsFieldProps<T, IP, MP>): React.JSX.Element;
 export default TagInputList;

package/dist/tagsInput/TagInputList.js

@@ -16,17 +16,16 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { Edit, Tag } from '@mui/icons-material';
 import { Chip } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
-import { Edit, Tag } from '@mui/icons-material';
-import { useSelectStyles } from '../formFields';
-import AddTagMenu from './AddTagMenu';
-import EditInPlaceFieldBase from '../formFields/EditInPlaceFieldBase';
-import { getAllMenuTags, getHighlightedPartLabel, getMenuTags, stubComponent } from '../utils';
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { makeAppStyles } from '../styles';
+import { EditInPlaceFieldBase, useSelectStyles } from '../formFields';
+import { getAllMenuTags, getHighlightedPartLabel, getMenuTags, stubComponent } from '../utils';
+import { AddTagMenu } from '../tagsInput/index';
 import { useAppTheme } from '../themes';
-const useStyles = makeAppStyles()((theme) => ({
+const useStyles = makeAppStyles()(theme => ({
     tagColorDotSmall: {
         width: theme.spacing(2),
         minWidth: theme.spacing(2),
@@ -99,7 +98,7 @@ const getFullTag = (tagId, tags) => {
         ++i;
     }
 };
-function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant, hideColor }) {
+function TagInputList({ input, tags, placeholder, labelAdornment, meta, label = 'Tags', disabled, className, warning, allowParentSelect, fieldClasses = {}, editIcon, variant, hideColor, trackCarretPosition = true }) {
     const [menuIsOpen, setMenuIsOpen] = useState(false);
     const [activeTag, setActiveTag] = useState(null);
     const [isEditing, setIsEditing] = useState(false);
@@ -191,7 +190,7 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
         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: {
-                popper: inputValue ? undefined : popperAdapter,
+                popper: inputValue || !trackCarretPosition ? undefined : popperAdapter,
                 listbox: inputValue ? undefined : listboxAdapter
             }, classes: {
                 root: classes.root,
@@ -202,7 +201,13 @@ function TagInputList({ input, tags, placeholder, labelAdornment, meta, label =
                 noOptions: 'd-none'
             }, renderValue: (tagValue, getItemProps) => tagValue.map((option, index) => {
                 const tagProps = __rest(getItemProps({ index }), []);
-                const menuTag = allMenuTags.find(t => t.tagBody.id === option);
+                const menuTag = allMenuTags.find(t => t.tagBody.id === option) || {
+                    tagBody: {
+                        id: option,
+                        color: theme.palette.error.main.replace('#', ''),
+                        name: 'Error: Tag not found!'
+                    }
+                };
                 const tagColors = theme.palette.augmentColor({
                     color: { main: `#${menuTag.tagBody.color}` }
                 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {
@@ -29,6 +29,7 @@
     "style-loader": "^4.0.0",
     "swc-loader": "^0.2.7",
     "terser-webpack-plugin": "^5.6.1",
+    "ts-checker-rspack-plugin": "^1.6.1",
     "tsc-alias": "^1.9.1",
     "typescript": "^7.0.2",
     "webpack": "^5.109.2",
@@ -84,8 +85,9 @@
   },
   "scripts": {
     "test": "exit 0",
-    "start": "webpack serve --env production --config tools/webpack/webpack.config.dev.js",
-    "start:prod": "webpack serve --env development --config tools/webpack/webpack.config.prod.js",
+    "start": "webpack serve --config-node-env development --config tools/webpack/webpack.config.dev.js",
+    "start:prod": "webpack serve --config-node-env production --config tools/webpack/webpack.config.prod.js",
+    "analyze": "ANALYZE=1 webpack --config-node-env development --config tools/webpack/webpack.config.dev.js",
     "build": "tsc -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.json",
     "lint": "oxlint src/",
     "typecheck": "tsc --noEmit -p tsconfig.prod.json"
@@ -110,6 +112,7 @@
     "react-beautiful-dnd-next": {
       "react": "$react",
       "react-dom": "$react-dom"
-    }
+    },
+    "uuid": "^11.1.1"
   }
-}
+}