@mezzanine-ui/react 0.8.0 → 0.8.1

package/Form/useInputWithTagsModeValue.d.ts

@@ -0,0 +1,37 @@
+import { ChangeEvent, KeyboardEvent, RefObject } from 'react';
+import { UseInputControlValueProps } from './useInputControlValue';
+export declare type TagsType = string[] | number[];
+export interface UseInputWithTagsModeValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
+    /**
+     * The value of initial tags
+     */
+    initialTagsValue?: string[];
+    /**
+     * Maximum permitted length of the tags
+     * @default 3
+     */
+    maxTagsLength?: number;
+    /**
+     * The change event handler of tags
+     */
+    onTagsChange?: (tags: TagsType) => void;
+    /**
+     * The ref object of input element
+     */
+    ref: RefObject<E>;
+    /**
+     * Will skip `onKeyDown` calling if `true`
+     * @default false
+     */
+    skip?: boolean;
+    /**
+     * Maximum length of value on each tag
+     * @default 8
+     */
+    tagValueMaxLength?: number;
+}
+export declare function useInputWithTagsModeValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: Omit<UseInputWithTagsModeValueProps<E>, 'onChange'>): readonly [{
+    readonly tags: string[];
+    readonly typingValue: string;
+    readonly tagsReachedMax: boolean;
+}, (event: ChangeEvent<E> | null) => void, () => void, (tag: string) => void, (e: KeyboardEvent) => void];

package/Form/useInputWithTagsModeValue.js

@@ -0,0 +1,88 @@
+import { useRef, useState, useCallback } from 'react';
+import { useInputControlValue } from './useInputControlValue.js';
+
+function useInputWithTagsModeValue(props) {
+    var _a;
+    const { defaultValue, initialTagsValue = [], maxTagsLength, onTagsChange: onChangeProp, ref, skip = false, tagValueMaxLength = 8, } = props;
+    const canActive = !skip;
+    const activeMaxTagsLength = maxTagsLength || Math.max(3, initialTagsValue.length);
+    const tagsSetRef = useRef(new Set(initialTagsValue.map((initialTag) => initialTag.trim())));
+    const inputTypeIsNumber = useRef(((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number');
+    const tagValueTransform = (tag) => (tag.slice(0, tagValueMaxLength).trim());
+    const transformNumberTags = (tags) => (tags.map((tag) => Number(tag)));
+    const generateUniqueTags = () => (Array
+        .from(tagsSetRef.current.values())
+        .map((initialTag) => tagValueTransform(initialTag)));
+    const [value, setValue] = useInputControlValue({
+        defaultValue: canActive ? defaultValue : undefined,
+    });
+    const [tags, setTags] = useState(generateUniqueTags()
+        .slice(0, activeMaxTagsLength));
+    const tagsWillOverflow = useCallback(() => (tagsSetRef.current.size === activeMaxTagsLength), []);
+    const clearTypingFieldValue = () => {
+        if (!canActive)
+            return;
+        const target = ref.current;
+        if (target) {
+            const changeEvent = Object.create({});
+            changeEvent.target = target;
+            changeEvent.currentTarget = target;
+            target.value = '';
+            setValue(changeEvent);
+        }
+    };
+    const onClear = () => {
+        if (!canActive)
+            return;
+        clearTypingFieldValue();
+        tagsSetRef.current.clear();
+        setTags([]);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp([]);
+    };
+    const onChange = (event) => {
+        if (canActive && event) {
+            setValue(event);
+        }
+    };
+    const onRemove = (tag) => {
+        tagsSetRef.current.delete(tag);
+        const numberTag = inputTypeIsNumber.current;
+        const newTags = generateUniqueTags();
+        setTags(newTags);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(numberTag ? transformNumberTags(newTags) : newTags);
+    };
+    const onKeyDown = useCallback((e) => {
+        var _a;
+        if (!canActive)
+            return;
+        const element = ref.current;
+        if (element && (element === null || element === void 0 ? void 0 : element.value) &&
+            (e.key === 'Enter' || e.code === 'Enter') &&
+            !e.nativeEvent.isComposing &&
+            !tagsWillOverflow()) {
+            e.preventDefault();
+            inputTypeIsNumber.current = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.type) === 'number';
+            const tagsSet = tagsSetRef.current;
+            const isNumber = inputTypeIsNumber.current;
+            const newTagValue = tagValueTransform(element.value);
+            tagsSet.add(newTagValue);
+            const newTags = generateUniqueTags();
+            setTags(newTags);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(isNumber ? transformNumberTags(newTags) : newTags);
+            clearTypingFieldValue();
+        }
+    }, [tagsWillOverflow]);
+    return [
+        {
+            tags,
+            typingValue: value,
+            tagsReachedMax: tagsWillOverflow(),
+        },
+        onChange,
+        onClear,
+        onRemove,
+        onKeyDown,
+    ];
+}
+
+export { useInputWithTagsModeValue };

package/Icon/Icon.js

@@ -11,6 +11,7 @@ const Icon = forwardRef(function Icon(props, ref) {
     const { definition } = icon;
     const cssVars = toIconCssVars({ color, size });
     const style = {
+        '--mzn-icon-cursor': props.onClick || props.onMouseOver ? 'pointer' : 'inherit',
         ...cssVars,
         ...styleProp,
     };

package/Input/Input.d.ts

@@ -1,6 +1,7 @@
 import { Ref, ChangeEventHandler } from 'react';
 import { InputSize } from '@mezzanine-ui/core/input';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import type { TagsType } from '../Form/useInputWithTagsModeValue';
 import { TextFieldProps } from '../TextField';
 export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'onKeyDown'> {
     /**
@@ -15,6 +16,11 @@ export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' |
      * The other native props for input element.
      */
     inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+    /**
+     * The input value mode
+     * @default 'default'
+     */
+    mode?: 'default' | 'tags';
     /**
      * The change event handler of input element.
      */
@@ -38,6 +44,28 @@ export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' |
      * @default 'medium'
      */
     size?: InputSize;
+    /**
+      * The props for input element with tags mode.
+      */
+    tagsProps?: {
+        /**
+         * The initial value of tags
+         */
+        initialTagsValue?: string[];
+        /**
+         * The position of input field on tags mode
+         * @default 'bottom''
+         */
+        inputPosition?: 'top' | 'bottom';
+        /**
+         * Maximum permitted length of the tags
+         */
+        maxTagsLength?: number;
+        /**
+        * The change event handler of input tags value.
+        */
+        onTagsChange?: (tags: TagsType) => void;
+    };
     /**
      * The value of input.
      */

package/Input/Input.js

@@ -1,9 +1,12 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useRef } from 'react';
 import { inputClasses } from '@mezzanine-ui/core/input';
+import { selectClasses } from '@mezzanine-ui/core/select';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
+import { useInputWithTagsModeValue } from '../Form/useInputWithTagsModeValue.js';
 import TextField from '../TextField/TextField.js';
+import Tag from '../Tag/Tag.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
 
@@ -12,7 +15,9 @@ import cx from 'clsx';
  */
 const Input = forwardRef(function Input(props, ref) {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef: inputRefProp, inputProps, onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = 'medium', suffix, value: valueProp, } = props;
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef: inputRefProp, mode = 'default', onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = 'medium', suffix, tagsProps, value: valueProp, } = props;
+    const { initialTagsValue, inputPosition = 'bottom', maxTagsLength, onTagsChange, } = tagsProps || {};
+    const tagsMode = mode === 'tags';
     const inputRef = useRef(null);
     const [value, onChange, onClear,] = useInputWithClearControlValue({
         defaultValue,
@@ -20,9 +25,27 @@ const Input = forwardRef(function Input(props, ref) {
         ref: inputRef,
         value: valueProp,
     });
+    const [{ tags, tagsReachedMax, }, tagsModeOnChange, tagsModeOnClear, tagsModeOnRemove, onKeyDown,] = useInputWithTagsModeValue({
+        defaultValue,
+        initialTagsValue,
+        maxTagsLength,
+        onTagsChange,
+        ref: inputRef,
+        skip: !tagsMode,
+        tagValueMaxLength: inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength,
+        value: valueProp,
+    });
     const composedInputRef = useComposeRefs([inputRefProp, inputRef]);
+    const maxLength = () => (tagsMode
+        ? Math.min((inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength) || 8, 8)
+        : inputProps === null || inputProps === void 0 ? void 0 : inputProps.maxLength);
     const active = !!value;
-    return (jsx(TextField, Object.assign({ ref: ref, active: active, className: cx(inputClasses.host, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: onClear, prefix: prefix, size: size, suffix: suffix }, { children: jsx("input", Object.assign({}, inputProps, { ref: composedInputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }), void 0) }), void 0));
+    const mountInput = !tagsMode || !tagsReachedMax;
+    return (jsxs(TextField, Object.assign({ ref: ref, active: active, className: cx(inputClasses.host, tagsMode && inputClasses.tagsMode, inputPosition === 'top' && inputClasses.tagsModeInputOnTop, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: tagsMode ? tagsModeOnClear : onClear, prefix: mountInput ? prefix : undefined, suffix: mountInput ? suffix : undefined, size: size }, { children: [tagsMode && (jsx("div", Object.assign({ className: selectClasses.triggerTags }, { children: tags.map((tag) => (jsx(Tag, Object.assign({ closable: true, disabled: disabled, size: size, onClose: (e) => {
+                        e.stopPropagation();
+                        tagsModeOnRemove(tag);
+                    } }, { children: tag }), tag))) }), void 0)),
+            mountInput && (jsx("input", Object.assign({}, inputProps, { "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, maxLength: maxLength(), onChange: tagsMode ? tagsModeOnChange : onChange, onKeyDown: tagsMode ? onKeyDown : inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown, placeholder: placeholder, readOnly: readOnly, ref: composedInputRef, required: required, value: tagsMode ? undefined : value }), void 0))] }), void 0));
 });
 var Input$1 = Input;
 

package/Table/TableBodyRow.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useContext, useState, useMemo, useCallback, Fragment } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
+import get from 'lodash/get';
 import { TableContext, TableDataContext } from './TableContext.js';
 import TableCell from './TableCell.js';
 import TableRowSelection from './rowSelection/TableRowSelection.js';
@@ -53,9 +54,9 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
                     expanding ? (jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, role: "gridcell", setExpanded: setExpanded }, void 0)) : null,
                     (columns !== null && columns !== void 0 ? columns : []).map((column, index) => {
                         var _a, _b, _c, _d;
-                        const ellipsis = !!(rowData[column.dataIndex]) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : rowData[column.dataIndex]);
-                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || rowData[column.dataIndex] }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
+                        const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
+                        return (jsx("div", Object.assign({ className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle(column) }, { children: jsx(TableEditRenderWrapper, Object.assign({}, column, { rowData: rowData }, { children: jsx(TableCell, Object.assign({ ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle }, { children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, column, rowData, index)) || get(rowData, column.dataIndex) }), void 0) }), void 0) }), `${column.dataIndex}-${column.title}`));
                     })] }), void 0),
             renderedExpandedContent ? (jsx(AccordionDetails, Object.assign({ className: expanding.className, expanded: expanded }, { children: renderedExpandedContent }), void 0)) : null] }, void 0));
 });

package/Table/sorting/useTableSorting.js

@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
 import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
 import { useControlValueState } from '../../Form/useControlValueState.js';
 import { useLastCallback } from '../../hooks/useLastCallback.js';
 
@@ -70,7 +71,7 @@ function useTableSorting(props) {
                     // sort by given sorter
                     newSource = newSource.sort((a, b) => (
                     // reverse result when sorted type is ascending
-                    (sorter(a[dataIndex], b[dataIndex])) * (nextSortedType === 'asc' ? -1 : 1)));
+                    (sorter(get(a, dataIndex), get(b, dataIndex))) * (nextSortedType === 'asc' ? -1 : 1)));
                     // map back the data source
                     onMappingSources(newSource);
                     break;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -32,7 +32,7 @@
     "react-dom": "^17.0.1"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.7.3",
+    "@mezzanine-ui/core": "^0.8.1",
     "@mezzanine-ui/icons": "^0.7.3",
     "@mezzanine-ui/system": "^0.7.0",
     "@popperjs/core": "^2.9.2",