@mezzanine-ui/react 0.10.0 → 0.10.1

package/Input/Input.d.ts

@@ -3,7 +3,7 @@ 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'> {
+export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'onKeyDown' | 'suffixActionIcon'> {
     /**
      * The default value of input.
      */

package/Picker/PickerTrigger.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, RefObject } from 'react';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defualtChecked'> {
+export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defaultChecked'> {
     /**
      * React ref for the input element.
      */

package/Picker/PickerTrigger.js

@@ -8,8 +8,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` picker trigger.
  */
 const PickerTrigger = forwardRef(function PickerTrigger(props, ref) {
-    const { className, disabled, inputProps, inputRef, onChange, placeholder, readOnly, required, value, ...restTextFieldProps } = props;
-    return (jsx(TextField, { ...restTextFieldProps, ref: ref, active: !!value, className: cx(pickerClasses.host, className), disabled: disabled, children: jsx("input", { ...inputProps, ref: inputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }) }));
+    const { className, clearable, disabled, inputProps, inputRef, onChange, placeholder, readOnly, required, value, ...restTextFieldProps } = props;
+    return (jsx(TextField, { ...restTextFieldProps, ref: ref, active: !!value, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, disabled: disabled, children: jsx("input", { ...inputProps, ref: inputRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value }) }));
 });
 var PickerTrigger$1 = PickerTrigger;
 

package/Picker/RangePickerTrigger.d.ts

@@ -1,7 +1,7 @@
 import { ChangeEventHandler, MouseEventHandler, RefObject } from 'react';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface RangePickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defualtChecked' | 'placeholder'> {
+export interface RangePickerTriggerProps extends Omit<TextFieldProps, 'active' | 'children' | 'suffix' | 'defaultChecked' | 'placeholder'> {
     /**
      * Placeholder for the 'from' input element.
      */

package/Picker/RangePickerTrigger.js

@@ -10,8 +10,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` date range picker trigger.
  */
 const RangePickerTrigger = forwardRef(function DateRangePickerTrigger(props, ref) {
-    const { className, disabled, inputFromPlaceholder, inputFromProps, inputFromRef, inputFromValue, inputToPlaceholder, inputToProps, inputToRef, inputToValue, onIconClick, onInputFromChange, onInputToChange, readOnly, required, ...restTextFieldProps } = props;
-    return (jsxs(TextField, { ...restTextFieldProps, ref: ref, active: !!inputFromValue || !!inputToValue, className: cx(pickerClasses.host, className), disabled: disabled, children: [jsx("input", { ...inputFromProps, ref: inputFromRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputFromChange, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, value: inputFromValue }), jsx(Icon, { icon: ArrowRightIcon, className: pickerClasses.arrowIcon }), jsx("input", { ...inputToProps, ref: inputToRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputToChange, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, value: inputToValue })] }));
+    const { className, clearable, disabled, inputFromPlaceholder, inputFromProps, inputFromRef, inputFromValue, inputToPlaceholder, inputToProps, inputToRef, inputToValue, onIconClick, onInputFromChange, onInputToChange, readOnly, required, ...restTextFieldProps } = props;
+    return (jsxs(TextField, { ...restTextFieldProps, ref: ref, active: !!inputFromValue || !!inputToValue, className: cx(pickerClasses.host, className), clearable: !readOnly && clearable, disabled: disabled, children: [jsx("input", { ...inputFromProps, ref: inputFromRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputFromChange, placeholder: inputFromPlaceholder, readOnly: readOnly, required: required, value: inputFromValue }), jsx(Icon, { icon: ArrowRightIcon, className: pickerClasses.arrowIcon }), jsx("input", { ...inputToProps, ref: inputToRef, "aria-disabled": disabled, "aria-multiline": false, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, onChange: onInputToChange, placeholder: inputToPlaceholder, readOnly: readOnly, required: required, value: inputToValue })] }));
 });
 var RangePickerTrigger$1 = RangePickerTrigger;
 

package/Select/SelectTrigger.js

@@ -35,7 +35,7 @@ function SelectTriggerComponent(props) {
         }
         return false;
     };
-    return (jsx(TextField, { ref: innerRef, ...restTextFieldProps, active: getTextFieldActive(), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: mode === 'multiple' && (value === null || value === void 0 ? void 0 : value.length) ? (jsx(SelectTriggerTags, { disabled: disabled, ellipsis: ellipsis, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: value })) : (jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "false", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() })) }));
+    return (jsx(TextField, { ref: innerRef, ...restTextFieldProps, active: getTextFieldActive(), className: cx(selectClasses.trigger, className), disabled: disabled, size: size, suffixActionIcon: forceHideSuffixActionIcon ? undefined : suffixActionIcon, children: mode === 'multiple' && (value === null || value === void 0 ? void 0 : value.length) ? (jsx(SelectTriggerTags, { disabled: disabled, ellipsis: ellipsis, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: value })) : (jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "off", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: renderValue() })) }));
 }
 const SelectTrigger = forwardRef((props, ref) => {
     if (props.mode === 'multiple') {

package/Select/SelectTriggerTags.js

@@ -26,7 +26,7 @@ const SelectTriggerTags = forwardRef(function SelectTriggerTags(props, ref) {
                                 }, size: size, children: selection.name }, selection.id))), value && value.length > takeCount ? (jsx(Tag, { disabled: disabled, size: size, children: `+${value.length - takeCount <= 99 ? value.length - takeCount : 99}...` })) : null] })) : (value === null || value === void 0 ? void 0 : value.map((selection) => (jsx(Tag, { closable: true, disabled: disabled, onClose: (e) => {
                             e.stopPropagation();
                             onTagClose === null || onTagClose === void 0 ? void 0 : onTagClose(selection);
-                        }, size: size, children: selection.name }, selection.id)))), ellipsis ? renderFakeTags() : null] }), showTextInputAfterTags ? (jsx("div", { className: selectClasses.triggerTagsInput, children: jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "false", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: searchText }) })) : null] }));
+                        }, size: size, children: selection.name }, selection.id)))), ellipsis ? renderFakeTags() : null] }), showTextInputAfterTags ? (jsx("div", { className: selectClasses.triggerTagsInput, children: jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-disabled": disabled, "aria-haspopup": "listbox", "aria-readonly": readOnly, "aria-required": required, autoComplete: "off", disabled: disabled, readOnly: readOnly, required: required, type: "search", value: searchText }) })) : null] }));
 });
 var SelectTriggerTags$1 = SelectTriggerTags;
 

package/Textarea/Textarea.d.ts

@@ -2,7 +2,7 @@ import { Ref, ChangeEventHandler } from 'react';
 import { TextareaSize } from '@mezzanine-ui/core/textarea';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { TextFieldProps } from '../TextField';
-export interface TextareaProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'prefix' | 'suffix'> {
+export interface TextareaProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'prefix' | 'suffix' | 'suffixActionIcon'> {
     /**
      * The default value of textarea.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {