ish-ui 1.2.8 → 1.3.0

package/dist/formFields/EditInPlaceFieldBase.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { InputProps } from '@mui/material/Input/Input';
+import { FormControlTypeMap, InputProps } from '@mui/material';
 import { FieldClasses } from '../model';
-import { FormControlTypeMap } from '@mui/material/FormControl/FormControl';
 interface Props {
     name: string;
     value: string;
@@ -24,5 +23,5 @@ interface Props {
     hideArrows?: boolean;
     variant?: FormControlTypeMap['props']['variant'];
 }
-declare const EditInPlaceFieldBase: ({ value, invalid, className, inline, label, fieldClasses, rightAligned, shrink, name, disabled, labelAdornment, editIcon, error, placeholder, hideArrows, warning, endAdornmentClass, CustomInput, InputProps, variant }: Props) => React.JSX.Element;
+declare const EditInPlaceFieldBase: ({ invalid, className, inline, label, fieldClasses, rightAligned, shrink, name, disabled, labelAdornment, editIcon, error, placeholder, hideArrows, warning, endAdornmentClass, CustomInput, InputProps, variant }: Props) => React.JSX.Element;
 export default EditInPlaceFieldBase;

package/dist/formFields/EditInPlaceFieldBase.js

@@ -5,11 +5,11 @@
  *
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputLabel, OutlinedInput, } from '@mui/material';
 import { makeAppStyles } from '../styles';
 import WarningMessage from '../fieldMessage/WarningMessage';
-import { countWidth } from '../utils';
+import { AutosizeInput } from '../formFields/AutosizeInput';
 const useStyles = makeAppStyles()((theme, p, classes) => ({
     label: {
         whiteSpace: 'nowrap',
@@ -55,19 +55,13 @@ const useStyles = makeAppStyles()((theme, p, classes) => ({
         pointerEvents: 'none'
     }
 }));
-const EditInPlaceFieldBase = ({ value, invalid, className, inline, label, fieldClasses = {}, rightAligned, shrink, name, disabled, labelAdornment, editIcon, error, placeholder, hideArrows, warning, endAdornmentClass, CustomInput, InputProps, variant = 'standard' }) => {
-    const [inputWidth, setInputWidth] = useState();
+const EditInPlaceFieldBase = ({ invalid, className, inline, label, fieldClasses = {}, rightAligned, shrink, name, disabled, labelAdornment, editIcon, error, placeholder, hideArrows, warning, endAdornmentClass, CustomInput, InputProps, variant = 'standard' }) => {
     const { classes, cx } = useStyles();
-    const inputNode = useRef();
+    const inputNode = useRef(undefined);
     const onAdornmentClick = () => {
         var _a;
         (_a = inputNode.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    useEffect(() => {
-        if (inline && inputNode.current) {
-            setInputWidth(countWidth(value || placeholder, inputNode.current) + 1);
-        }
-    }, [value]);
     const InputComp = useMemo(() => {
         switch (variant) {
             default:
@@ -86,21 +80,20 @@ const EditInPlaceFieldBase = ({ value, invalid, className, inline, label, fieldC
             React.createElement("span", { className: classes.label }, label),
             labelAdornment)),
         CustomInput ||
-            React.createElement(InputComp, Object.assign({}, InputProps || {}, { inputRef: inputNode, inputProps: Object.assign({ placeholder,
+            React.createElement(InputComp, Object.assign({}, InputProps || {}, { inputComponent: inline ? AutosizeInput : undefined, inputRef: inputNode, inputProps: Object.assign({ placeholder,
                     disabled, className: cx(fieldClasses.text, {
                         [classes.inlineInput]: inline,
                         [classes.readonly]: disabled,
                         [classes.hideArrows]: hideArrows,
                         'text-end': rightAligned
-                    }), style: {
-                        width: inline && !invalid ? inputWidth : undefined
-                    } }, (InputProps === null || InputProps === void 0 ? void 0 : InputProps.inputProps) || {}), classes: {
+                    }) }, (InputProps === null || InputProps === void 0 ? void 0 : InputProps.inputProps) || {}), classes: {
                     root: cx(fieldClasses.text, inline && classes.inlineInput),
                     underline: fieldClasses.underline
                 }, disabled: disabled, endAdornment: InputProps.endAdornment || (!disabled &&
                     React.createElement(InputAdornment, { position: "end", onClick: onAdornmentClick, className: cx(endAdornmentClass, {
                             ['fsInherit']: inline,
                             ['d-none']: (rightAligned || inline),
+                            ['ml-0']: inline,
                             ['invisible']: variant !== 'outlined' && !(rightAligned || inline)
                         }) }, editIcon)), id: `input-${name}`, name: name })),
         React.createElement(FormHelperText, { classes: {

package/dist/formFields/EditInPlaceFileField.js

@@ -21,14 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
  * */
 import React, { useRef } from 'react';
 import AttachmentIcon from '@mui/icons-material/Attachment';
+import Close from '@mui/icons-material/Close';
 import InputAdornment from '@mui/material/InputAdornment';
 import EditInPlaceField from './EditInPlaceField';
 import { stubFunction } from '../utils';
+import IconButton from '@mui/material/IconButton';
 function EditInPlaceFileField(_a) {
     var _b;
     var { input } = _a, restProps = __rest(_a, ["input"]);
-    const inputRef = useRef();
-    const fileRef = useRef();
+    const inputRef = useRef(null);
+    const fileRef = useRef(null);
     const handleFileSelect = e => {
         if (e.target.files[0]) {
             input.onChange(e.target.files[0]);
@@ -42,6 +44,9 @@ function EditInPlaceFileField(_a) {
             inputRef.current.blur();
         }, 200);
     };
+    const onClear = () => {
+        input.onChange(null);
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement("input", { type: "file", ref: fileRef, onChange: handleFileSelect, className: "d-none" }),
         React.createElement(EditInPlaceField, Object.assign({}, restProps, { input: {
@@ -51,6 +56,9 @@ function EditInPlaceFileField(_a) {
             }, InputProps: {
                 startAdornment: React.createElement(InputAdornment, { position: "start", className: (_b = restProps.fieldClasses) === null || _b === void 0 ? void 0 : _b.text },
                     React.createElement(AttachmentIcon, null)),
+                endAdornment: input.value && React.createElement(InputAdornment, { position: "end", className: "d-none" },
+                    React.createElement(IconButton, { color: 'primary', size: 'small', onClick: onClear },
+                        React.createElement(Close, null))),
                 onFocus,
                 inputProps: {
                     ref: inputRef

package/dist/formFields/EditInPlaceMoneyField.js

@@ -17,7 +17,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback } from 'react';
-import NumberFormat from 'react-number-format';
+import { NumericFormat } from 'react-number-format';
 import InputAdornment from '@mui/material/InputAdornment';
 import EditInPlaceField from './EditInPlaceField';
 import { formatCurrency, normalizeNumber } from '../utils';
@@ -27,7 +27,7 @@ const NumberFormatCustom = React.forwardRef((props, ref) => {
     const onValueChange = useCallback(values => {
         onChange(normalizeNumber(values.value));
     }, []);
-    return (React.createElement(NumberFormat, Object.assign({}, other, { getInputRef: ref, onValueChange: onValueChange, allowNegative: allowNegative, decimalScale: 2, thousandSeparator: true })));
+    return (React.createElement(NumericFormat, Object.assign({}, other, { getInputRef: ref, onValueChange: onValueChange, allowNegative: allowNegative, decimalScale: 2, thousandSeparator: true })));
 });
 const preformatDisplayValue = value => value || value === 0 ? formatCurrency(value, '') : value;
 function EditInPlaceMoneyField(_a) {

package/dist/formFields/EditInPlacePhoneField.js

@@ -17,7 +17,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import NumberFormat from 'react-number-format';
+import { NumericFormat, PatternFormat } from 'react-number-format';
 import InputAdornment from '@mui/material/InputAdornment';
 import PhoneIcon from '@mui/icons-material/Phone';
 import debounce from 'lodash.debounce';
@@ -25,7 +25,7 @@ import EditInPlaceField from './EditInPlaceField';
 import { getPhoneMask } from '../utils';
 const NumberFormatCustom = React.forwardRef((props, ref) => {
     const { onChange } = props, other = __rest(props, ["onChange"]);
-    const inputRef = useRef();
+    const inputRef = useRef(undefined);
     const [format, setFormat] = useState(undefined);
     const [prefix, setPrefix] = useState(undefined);
     const processFormat = useCallback(debounce(data => {
@@ -59,7 +59,17 @@ const NumberFormatCustom = React.forwardRef((props, ref) => {
         ref = input;
         inputRef.current = input;
     };
-    return (React.createElement(NumberFormat, Object.assign({}, other, { getInputRef: getInputRef, onKeyPress: onKeyPress, prefix: prefix, onValueChange: onValueChange, format: format, type: "text" })));
+    // react-number-format v5 split the old single NumberFormat component in two:
+    // PatternFormat requires a `format` mask, while NumericFormat covers the
+    // unmasked case and is the only one accepting `prefix`. The masks in
+    // PhoneMasks carry their own leading '+', so the prefix is only needed
+    // before a mask has been matched.
+    const commonProps = Object.assign(Object.assign({}, other), { getInputRef,
+        onKeyPress,
+        onValueChange, type: 'text' });
+    return format
+        ? React.createElement(PatternFormat, Object.assign({}, commonProps, { format: format }))
+        : React.createElement(NumericFormat, Object.assign({}, commonProps, { prefix: prefix }));
 });
 function EditInPlacePhoneField(_a) {
     var _b;

package/dist/formFields/EditInPlaceSearchSelect.js

@@ -219,7 +219,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         if (typeof itemRenderer === 'function') {
             return itemRenderer(getHighlightedPartLabel(getOptionLabel(data), searchValue), data, searchValue, optionProps);
         }
-        return getHighlightedPartLabel(getOptionLabel(data), searchValue, optionProps);
+        return [getHighlightedPartLabel(getOptionLabel(data), searchValue), optionProps];
     };
     const selectedOption = useMemo(() => sortedItems.find(i => multiple
         ? (input.value || []).includes(i[selectValueMark])
@@ -280,7 +280,7 @@ function EditInPlaceSearchSelect({ label, disabled, className, labelAdornment, i
         return multiple && inputValue.length ? null : placeholder;
     }, [multiple, placeholder, isEditing, inputValue]);
     const renderInput = useCallback((_a) => {
-        var { InputProps, inputProps } = _a, params = __rest(_a, ["InputProps", "inputProps"]);
+        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,
                 disableUnderline, classes: {
@@ -350,6 +350,9 @@ 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: renderInput, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
+                }, groupBy: categoryKey && (option => option[categoryKey]), renderOption: renderOption, getOptionLabel: getOptionLabel, filterOptions: filterItems, slots: {
+                    listbox: inline || categoryKey ? undefined : ListBoxAdapter,
+                    popper: categoryKey ? undefined : PopperAdapter,
+                }, renderInput: renderInput, disableListWrap: true, openOnFocus: true, fullWidth: true }))));
 }
 export default EditInPlaceSearchSelect;

package/dist/formFields/SelectCustomComponents.d.ts

@@ -1,14 +1,28 @@
-import React from 'react';
-import { AppTheme } from '../model';
+import React, { CSSProperties } from 'react';
+import { AppTheme, EditInPlaceSearchSelectFieldProps } from '../model';
 export declare const useSelectStyles: (params: void, muiStyleOverridesParams?: {
     props: Record<string, unknown>;
     ownerState?: Record<string, unknown> | undefined;
 } | undefined) => {
-    classes: Record<"label" | "error" | "root" | "multiple" | "inline" | "expandIcon" | "menuItem" | "inputWrapper" | "readonly" | "editIcon" | "valid" | "hasClear" | "bottomMargin" | "bottomPadding" | "topMargin" | "editable" | "autoWidthSelect" | "emptySelect" | "validUnderline" | "menuItemActive" | "menuList" | "hasPopup", string>;
+    classes: Record<"autoWidthSelect" | "bottomMargin" | "bottomPadding" | "editIcon" | "editable" | "emptySelect" | "error" | "expandIcon" | "hasClear" | "hasPopup" | "inline" | "inputWrapper" | "label" | "menuItem" | "menuItemActive" | "menuList" | "multiple" | "readonly" | "root" | "topMargin" | "valid" | "validUnderline", string>;
     theme: AppTheme;
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
-export declare const ListRow: React.MemoExoticComponent<any>;
+interface ListRowProps {
+    data: {
+        children: [
+            [
+                React.ReactNode
+            ],
+            React.HTMLAttributes<HTMLLIElement>
+        ];
+        selectAdornment: EditInPlaceSearchSelectFieldProps<any, any>['selectAdornment'];
+    };
+    index: number;
+    style: CSSProperties;
+}
+export declare const ListRow: React.NamedExoticComponent<ListRowProps>;
 export declare const ListboxComponent: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<any>>;
 export declare const NoWrapOption: (content: any, data: any, search: any, parentProps: any) => React.JSX.Element;
+export {};

package/dist/formFields/SelectCustomComponents.js

@@ -5,6 +5,15 @@
  *
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -20,8 +29,8 @@ import { useTheme } from '@mui/system';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import React from 'react';
 import ListSubheader from '@mui/material/ListSubheader';
-import InfiniteLoader from 'react-window-infinite-loader';
-import { areEqual, FixedSizeList as List } from 'react-window';
+import { useInfiniteLoader } from 'react-window-infinite-loader';
+import { List } from 'react-window';
 import { green } from '@mui/material/colors';
 import { ListItemButton } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
@@ -123,22 +132,14 @@ export const useSelectStyles = makeAppStyles()((theme, p, classes) => ({
         }
     },
 }));
-export const ListRow = React.memo(({ data: { children, selectAdornment }, index, style }) => {
-    const inlineStyle = Object.assign(Object.assign({}, style), { top: style.top + 8, paddingLeft: 0, paddingRight: 0, whiteSpace: 'nowrap' });
-    return (React.createElement(ListItemButton, { style: inlineStyle }, (((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]));
-}, areEqual);
-const OuterElementContext = React.createContext({});
-const OuterElementType = React.forwardRef((props, ref) => {
-    const outerProps = React.useContext(OuterElementContext);
-    return React.createElement("div", Object.assign({ ref: ref }, props, outerProps));
-});
+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 ListboxComponent = React.forwardRef((props, ref) => {
-    const { children, rowHeight, remoteRowCount, loadMoreRows, classes, loading, selectAdornment, fieldClasses } = props, other = __rest(props, ["children", "rowHeight", "remoteRowCount", "loadMoreRows", "classes", "loading", "selectAdornment", "fieldClasses"]);
+    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();
-    const itemData = { selectAdornment, children: React.Children.toArray(children) };
+    const itemData = { selectAdornment, children };
     const theme = useTheme();
     const smUp = useMediaQuery(theme.breakpoints.up('sm'), { noSsr: true });
     const itemSize = rowHeight || (smUp ? 36 : 48);
@@ -155,11 +156,26 @@ export const ListboxComponent = React.forwardRef((props, ref) => {
         }
         return itemData.children.map(getChildSize).reduce((a, b) => a + b, 0);
     };
-    const loadMoreItems = () => (loading ? undefined : loadMoreRows(itemData.children.length));
-    const isItemLoaded = index => index < (children.length + (selectAdornment ? 1 : 0));
+    const isRowLoaded = index => index < (children.length + (selectAdornment ? 1 : 0));
+    // react-window-infinite-loader v2 replaces the render-prop component with a
+    // hook that returns the List's `onRowsRendered` callback.
+    const onRowsRendered = useInfiniteLoader({
+        isRowLoaded,
+        rowCount: itemCount,
+        loadMoreRows: () => __awaiter(void 0, void 0, void 0, function* () {
+            if (!loading) {
+                yield loadMoreRows(itemData.children.length);
+            }
+        }),
+    });
+    // react-window v2 sizes itself from `style` rather than `height`/`width`
+    // props, and forwards unknown props to its root element — which makes the
+    // former outer-element context wrapper unnecessary.
     return (React.createElement("div", { ref: ref },
-        React.createElement(OuterElementContext.Provider, { value: other },
-            React.createElement(InfiniteLoader, { isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: loadMoreItems }, ({ onItemsRendered, ref }) => (React.createElement(List, { ref: ref, height: getHeight() + 2 * 8, width: "100%", className: cx(classes.menuList, fieldClasses.selectMenu), itemData: itemData, outerElementType: OuterElementType, onItemsRendered: onItemsRendered, itemSize: itemSize, itemCount: itemCount }, ListRow))))));
+        React.createElement(List, Object.assign({}, other, { className: cx(classes.menuList, fieldClasses.selectMenu), style: { height: getHeight(), width: '100%' }, 
+            // v2 types `rowComponent` as a plain function. ListRow stays memoised
+            // because it is part of the public API, so the cast bridges the two.
+            rowComponent: ListRow, rowProps: { data: itemData }, rowHeight: itemSize, rowCount: itemCount, onRowsRendered: onRowsRendered }))));
 });
 export const NoWrapOption = (content, data, search, parentProps) => (React.createElement("div", Object.assign({}, parentProps || {}),
     React.createElement(Tooltip, { title: content },

package/dist/formFields/Switch.d.ts

@@ -3,5 +3,7 @@
  * */
 import React from 'react';
 import { FieldInputProps, FormSwitchProps } from '../model';
-export declare const Switch: (props: any) => React.JSX.Element;
+declare const SwitchBase: (props: any) => React.JSX.Element;
+export declare const Switch: typeof SwitchBase;
 export declare function FormSwitch<InputProps extends FieldInputProps>({ input, color, disabled, stringValue, label, className, inline, onChangeHandler, onClick }: FormSwitchProps<InputProps>): React.JSX.Element;
+export {};

package/dist/markdownEditor/WysiwygEditor.js

@@ -6,22 +6,17 @@
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
 import React from 'react';
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
-import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat';
-import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
-import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
-import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
-import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading';
-import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
-import ListPlugin from '@ckeditor/ckeditor5-list/src/list';
-import Markdown from '@ckeditor/ckeditor5-markdown-gfm/src/markdown';
-import Table from '@ckeditor/ckeditor5-table/src/table';
-import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
-import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
-import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Essentials as EssentialsPlugin } from '@ckeditor/ckeditor5-essentials';
+import { Autoformat as AutoformatPlugin } from '@ckeditor/ckeditor5-autoformat';
+import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
+import { Bold as BoldPlugin, Italic as ItalicPlugin } from '@ckeditor/ckeditor5-basic-styles';
+import { Heading as HeadingPlugin } from '@ckeditor/ckeditor5-heading';
+import { Link as LinkPlugin, LinkImage } from '@ckeditor/ckeditor5-link';
+import { List as ListPlugin } from '@ckeditor/ckeditor5-list';
+import { Markdown } from '@ckeditor/ckeditor5-markdown-gfm';
+import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
+import { Image, ImageCaption, ImageStyle } from '@ckeditor/ckeditor5-image';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 import { createRoot } from 'react-dom/client';
 import CodeIcon from '@mui/icons-material/Code';
@@ -29,6 +24,9 @@ import 'ace-builds/webpack-resolver';
 const SourceEditingSwitch = () => (React.createElement("div", { className: "ck_source_edit_custom" },
     React.createElement(CodeIcon, { className: "ck_code_icon_custom" })));
 const config = {
+    // Mandatory since CKEditor 44. 'GPL' is the correct value for this AGPL
+    // project; without it the editor throws `license-key-missing` at mount.
+    licenseKey: 'GPL',
     plugins: [
         Markdown,
         SourceEditing,

package/dist/markdownEditor/utils/index.d.ts

@@ -6,4 +6,4 @@ export declare const CONTENT_MODES: {
 export declare const getContentMarker: (text: any) => any;
 export declare const removeContentMarker: (text: any) => any;
 export declare const addContentMarker: (text: any, contentMode: any) => string;
-export declare const getEditorModeLabel: (mode: ContentMode) => "RICH" | "HTML" | "LEGACY";
+export declare const getEditorModeLabel: (mode: ContentMode) => "HTML" | "LEGACY" | "RICH";

package/dist/model/Fields.d.ts

@@ -1,13 +1,8 @@
 import { ChangeEvent, DragEvent, FocusEvent, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { Dispatch } from 'redux';
-import { InputProps } from '@mui/material/Input/Input';
+import { CheckboxProps, FormControlTypeMap, InputProps, PopperPlacementType, RadioGroupProps, RadioProps } from '@mui/material';
 import { AnyArgFunction } from '../model/CommonFunctions';
 import { ShowConfirmCaller } from '../model/Confirm';
-import { PopperPlacementType } from '@mui/material';
-import { FormControlTypeMap } from '@mui/material/FormControl/FormControl';
-import { RadioProps } from '@mui/material/Radio/Radio';
-import { RadioGroupProps } from '@mui/material/RadioGroup/RadioGroup';
-import { CheckboxProps } from '@mui/material/Checkbox/Checkbox';
 export type EventHandler<Event> = (event: Event, name?: string) => void;
 export interface EventOrValueHandler<Event> extends EventHandler<Event> {
     (value: any): void;

package/dist/styles/makeStyles.d.ts

@@ -1,28 +1,5 @@
 import { AppTheme } from '../model';
-declare const withStyles: {
-    <C extends keyof import("react").ReactHTML | import("tss-react/tools/ReactComponent").ReactComponent<any>, Props extends C extends import("tss-react/tools/ReactComponent").ReactComponent<infer P> ? P : C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] extends import("tss-react/tools/ReactComponent").ReactComponent<infer P_1> ? NonNullable<P_1> : never : never, CssObjectByRuleName extends Props extends {
-        classes?: Partial<infer ClassNameByRuleName> | undefined;
-    } ? { [RuleName in keyof ClassNameByRuleName]?: import("tss-react").CSSObject; } & {
-        [mediaQuery: `@media${string}`]: { [RuleName_1 in keyof ClassNameByRuleName]?: import("tss-react").CSSObject; };
-    } : {
-        root: import("tss-react").CSSObject;
-    } & {
-        [mediaQuery: `@media${string}`]: {
-            root: import("tss-react").CSSObject;
-        };
-    }>(Component: C, cssObjectByRuleNameOrGetCssObjectByRuleName: (CssObjectByRuleName & {
-        [mediaQuery: `@media${string}`]: { [Key in keyof CssObjectByRuleName]?: import("tss-react").CSSObject; };
-    }) | ((theme: AppTheme, props: Props, classes: Record<Exclude<keyof CssObjectByRuleName, `@media${string}`>, string>) => CssObjectByRuleName), params?: {
-        name?: string | Record<string, unknown> | undefined;
-        uniqId?: string | undefined;
-    } | undefined): C extends keyof import("react").ReactHTML ? import("react").ReactHTML[C] : C;
-    getClasses: <Classes>(props: {
-        className?: string | undefined;
-        classes?: Classes | undefined;
-    }) => Classes extends Record<string, unknown> ? Classes extends Partial<Record<infer K, any>> ? Record<K, string> : Classes : {
-        root: string;
-    };
-};
+import { createMakeAndWithStyles } from 'tss-react';
 export declare const makeAppStyles: <Params = void, RuleNameSubsetReferencableInNestedSelectors extends string = never>(params?: {
     name?: string | Record<string, unknown> | undefined;
     uniqId?: string | undefined;
@@ -35,4 +12,10 @@ export declare const makeAppStyles: <Params = void, RuleNameSubsetReferencableIn
     css: import("tss-react").Css;
     cx: import("tss-react").Cx;
 };
-export { withStyles };
+/**
+ * Annotated explicitly rather than inferred: tss-react's exports map does not
+ * expose `tss-react/tools/*`, so the inferred type of `withStyles` cannot be
+ * named in the emitted declarations. Referring to it through the factory's
+ * return type keeps the emitted `.d.ts` resolvable for consumers.
+ */
+export declare const withStyles: ReturnType<typeof createMakeAndWithStyles<AppTheme>>['withStyles'];

package/dist/styles/makeStyles.js

@@ -7,8 +7,14 @@
  */
 import { createMakeAndWithStyles } from 'tss-react';
 import { useTheme } from '@mui/system';
-const { makeStyles, withStyles } = createMakeAndWithStyles({
+const tss = createMakeAndWithStyles({
     useTheme,
 });
-export const makeAppStyles = makeStyles;
-export { withStyles };
+export const makeAppStyles = tss.makeStyles;
+/**
+ * Annotated explicitly rather than inferred: tss-react's exports map does not
+ * expose `tss-react/tools/*`, so the inferred type of `withStyles` cannot be
+ * named in the emitted declarations. Referring to it through the factory's
+ * return type keeps the emitted `.d.ts` resolvable for consumers.
+ */
+export const withStyles = tss.withStyles;

package/dist/tagsInput/AddTagMenu.d.ts

@@ -6,8 +6,8 @@ interface Props<T> {
     hideColor?: boolean;
     tags: MenuTag<T>[];
     handleAdd: (tag: MenuTag<T>) => void;
-    activeTag: MenuTag<T>;
-    setActiveTag: (arg: (MenuTag<T> | ((prevState: MenuTag<T>) => MenuTag<T>))) => void;
+    activeTag: number;
+    setActiveTag: (arg: (number | ((prevState: number) => number))) => void;
 }
 declare function AddTagMenu<T extends TagLike>({ classes, tags, hideColor, handleAdd, activeTag, setActiveTag, allowParentSelect }: Props<T>): React.JSX.Element;
 declare const _default: typeof AddTagMenu;

package/dist/tagsInput/AddTagMenu.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useStyles, withStyles } from 'tss-react/mui';
 import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft';
 import MenuItem from '@mui/material/MenuItem';
-import List from '@mui/material/List';
 import AddTagMenuItem from './AddTagMenuItem';
+import MenuList from '@mui/material/MenuList';
+import { getAllMenuTags } from '../utils';
 const styles = theme => ({
     listItem: {
         padding: theme.spacing(0, 0.5, 0, 2)
@@ -22,15 +23,17 @@ const styles = theme => ({
     }
 });
 function AddTagMenu({ classes, tags, hideColor, handleAdd, activeTag, setActiveTag, allowParentSelect }) {
+    const activeTagItem = useMemo(() => { var _a; return activeTag && ((_a = getAllMenuTags(tags)) === null || _a === void 0 ? void 0 : _a.find(t => t.tagBody.id === activeTag)); }, [activeTag, tags]);
     const handleBack = () => {
-        setActiveTag(prev => prev.parent);
+        var _a;
+        setActiveTag((_a = activeTagItem.parent) === null || _a === void 0 ? void 0 : _a.tagBody.id);
     };
     const { cx } = useStyles();
-    return (React.createElement(List, { className: classes.rootMenu },
+    return (React.createElement(MenuList, { className: classes.rootMenu },
         activeTag && (React.createElement(MenuItem, { onClick: handleBack, className: classes.listItem },
             React.createElement("span", { className: cx('d-flex textSecondaryColor', classes.backContainer) },
                 React.createElement(KeyboardArrowLeft, { color: "inherit" }),
                 "Back"))),
-        (activeTag ? activeTag.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect, hideColor: hideColor })))));
+        (activeTagItem ? activeTagItem.children : tags).map(t => (React.createElement(AddTagMenuItem, { key: t.tagBody.id, tag: t, classes: classes, setActiveTag: setActiveTag, handleAdd: handleAdd, allowParentSelect: allowParentSelect, hideColor: hideColor })))));
 }
 export default withStyles(AddTagMenu, styles);

package/dist/tagsInput/AddTagMenuItem.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { MenuTag, TagLike } from '../model';
+import { MenuTag, NumberArgFunction, TagLike } from '../model';
 interface Props<T> {
     classes: any;
-    setActiveTag: (tag: MenuTag<T>) => void;
+    setActiveTag: NumberArgFunction;
     handleAdd: (tag: MenuTag<T>) => void;
     tag: MenuTag<T>;
     allowParentSelect?: boolean;

package/dist/tagsInput/AddTagMenuItem.js

@@ -13,7 +13,7 @@ import { IconButton } from '@mui/material';
 import { useStyles } from 'tss-react/mui';
 function AddTagMenuItem({ setActiveTag, tag, classes, handleAdd, hideColor, allowParentSelect }) {
     const openSubmenu = () => {
-        setActiveTag(tag);
+        setActiveTag(tag.tagBody.id);
     };
     const toggleChecked = (e) => {
         e.stopPropagation();