@mezzanine-ui/react 0.15.3 → 1.0.0-alpha.0

package/Tag/Tag.d.ts

@@ -1,29 +1,6 @@
-import { MouseEventHandler } from 'react';
-import { TagSize } from '@mezzanine-ui/core/tag';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TagProps extends NativeElementPropsWithoutKeyAndRef<'span'> {
-    /**
-     * Whether the tag can be closed.
-     * @default false
-     */
-    closable?: boolean;
-    /**
-     * Whether the tag disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback executed while tag closed.
-     */
-    onClose?: MouseEventHandler;
-    /**
-     * The size of the tag.
-     * @default 'medium'
-     */
-    size?: TagSize;
-}
+import { TagProps } from './typings';
 /**
  * The react component for `mezzanine` tag.
  */
-declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLButtonElement | HTMLSpanElement>>;
 export default Tag;

package/Tag/Tag.js

@@ -1,25 +1,34 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { tagClasses } from '@mezzanine-ui/core/tag';
-import { TimesIcon } from '@mezzanine-ui/icons';
-import { MezzanineConfig } from '../Provider/context.js';
+import { PlusIcon, CloseIcon } from '@mezzanine-ui/icons';
 import Icon from '../Icon/Icon.js';
+import Badge from '../Badge/Badge.js';
 import cx from 'clsx';
 
+const getTagType = (props) => { var _a; return (_a = props.type) !== null && _a !== void 0 ? _a : 'static'; };
+const isTagType = (props, current) => getTagType(props) === current;
 /**
  * The react component for `mezzanine` tag.
  */
 const Tag = forwardRef(function Tag(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { children, className, closable = false, disabled = false, onClose, size = globalSize, ...rest } = props;
-    return (jsxs("span", { ...rest, ref: ref, "aria-disabled": disabled, className: cx(tagClasses.host, tagClasses.size(size), {
-            [tagClasses.disabled]: disabled,
-        }, className), children: [jsx("span", { className: tagClasses.label, children: children }), closable && (jsx(Icon, { className: tagClasses.closeIcon, icon: TimesIcon, onClick: (event) => {
-                    if (!disabled && onClose) {
-                        onClose(event);
-                    }
-                }, tabIndex: -1 }))] }));
+    const { active, className, disabled, onClick, onClose: _onClose, readOnly, size = 'main', type: _type, ...rest } = props;
+    const tagType = _type !== null && _type !== void 0 ? _type : 'static';
+    const commonClassName = cx(tagClasses.host, tagClasses.size(size), tagClasses.type(tagType), {
+        [tagClasses.disabled]: disabled,
+        [tagClasses.active]: active,
+        [tagClasses.readOnly]: readOnly,
+    }, className);
+    if (isTagType(props, 'overflow-counter')) {
+        const { count } = props;
+        return (jsxs("button", { ...rest, ref: ref, type: "button", onClick: onClick, disabled: disabled, className: commonClassName, children: [jsx(Icon, { className: tagClasses.icon, icon: PlusIcon, size: 16 }), jsx("span", { className: tagClasses.label, children: count })] }));
+    }
+    if (isTagType(props, 'addable')) {
+        const { label } = props;
+        return (jsxs("button", { ...rest, ref: ref, type: "button", onClick: onClick, disabled: disabled, className: commonClassName, children: [jsx(Icon, { className: tagClasses.icon, icon: PlusIcon, size: 16 }), jsx("span", { className: tagClasses.label, children: label })] }));
+    }
+    return (jsxs("span", { ...rest, ref: ref, "aria-disabled": disabled, className: commonClassName, children: [isTagType(props, 'static') && (jsx("span", { className: tagClasses.label, children: props.label })), isTagType(props, 'counter') && (jsxs(Fragment, { children: [jsx("span", { className: tagClasses.label, children: props.label }), jsx(Badge, { variant: "count-info", count: props.count })] })), isTagType(props, 'dismissable') && (jsxs(Fragment, { children: [jsx("span", { className: tagClasses.label, children: props.label }), jsx("button", { className: tagClasses.closeButton, type: "button", onClick: props.onClose, disabled: disabled, children: jsx(Icon, { className: tagClasses.icon, icon: CloseIcon, size: 16 }) })] }))] }));
 });
-var Tag$1 = Tag;
 
-export { Tag$1 as default };
+export { Tag as default };

package/Tag/TagGroup.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import Tag, { TagProps } from '../Tag';
+import OverflowCounterTag, { OverflowCounterTagProps } from '../OverflowTooltip/OverflowCounterTag';
+import { TransitionImplementationChildProps } from '../Transition';
+type TagElement = ReactElement<TagProps & TransitionImplementationChildProps, typeof Tag>;
+type OverflowCounterTagElement = ReactElement<OverflowCounterTagProps & TransitionImplementationChildProps, typeof OverflowCounterTag>;
+type TagGroupChild = TagElement | OverflowCounterTagElement;
+declare const TagGroup: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"div">, "children"> & {
+    children: TagGroupChild | TagGroupChild[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default TagGroup;

package/Tag/TagGroup.js

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, isValidElement, createElement } from 'react';
+import OverflowCounterTag from '../OverflowTooltip/OverflowCounterTag.js';
+import { tagClasses } from '@mezzanine-ui/core/tag';
+import { TransitionGroup } from 'react-transition-group';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import Fade from '../Transition/Fade.js';
+import Tag from './Tag.js';
+import cx from 'clsx';
+
+const isTagElement = (child) => isValidElement(child) && child.type === Tag;
+const isOverflowCounterElement = (child) => isValidElement(child) && child.type === OverflowCounterTag;
+const fadeProps = {
+    duration: {
+        enter: MOTION_DURATION.fast,
+        exit: MOTION_DURATION.fast,
+    },
+    easing: {
+        enter: MOTION_EASING.standard,
+        exit: MOTION_EASING.standard,
+    },
+};
+const TagGroup = forwardRef(function TagGroup({ className, children, ...rest }, ref) {
+    const hasInvalidChild = Children.toArray(children).some((child) => {
+        if (!isTagElement(child) && !isOverflowCounterElement(child)) {
+            console.error('<TagGroup> only accepts <Tag> or <OverflowCounterTag>');
+            return true;
+        }
+        return false;
+    });
+    if (hasInvalidChild) {
+        return null;
+    }
+    return (jsx("div", { ...rest, ref: ref, className: cx(tagClasses.group, className), children: jsx(TransitionGroup, { component: null, children: Children.map(children, (child, index) => {
+                var _a;
+                return (createElement(Fade, { ...fadeProps, key: (_a = child.key) !== null && _a !== void 0 ? _a : index },
+                    jsx("span", { children: child })));
+            }) }) }));
+});
+
+export { TagGroup as default };

package/Tag/index.d.ts

@@ -1,2 +1,3 @@
 export type { TagSize } from '@mezzanine-ui/core/tag';
-export { TagProps, default } from './Tag';
+export type { TagProps } from './typings';
+export { default } from './Tag';

package/Tag/typings.d.ts

@@ -0,0 +1,78 @@
+import { TagSize } from '@mezzanine-ui/core/tag';
+import { MouseEventHandler } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+type TagNativeProps<T extends 'span' | 'button'> = Omit<NativeElementPropsWithoutKeyAndRef<T>, 'onClick' | 'type'>;
+type TagBaseProps<T extends 'span' | 'button'> = TagNativeProps<T> & {
+    /** Custom class names on the host element. */
+    className?: string;
+    /**
+     * Size of the tag.
+     * @default main
+     */
+    size?: TagSize;
+};
+type TagSpanHostProps = TagBaseProps<'span'>;
+type TagButtonHostProps = TagBaseProps<'button'>;
+export type TagProps = TagPropsStatic | TagPropsCounter | TagPropsOverflowCounter | TagPropsDismissable | TagPropsAddable;
+type TagPropsStatic = TagSpanHostProps & {
+    /**
+     * Type of the tag.
+     * @default static
+     */
+    type?: 'static';
+    /** Text rendered inside label-based tags. */
+    label: string;
+    /** Applies read-only styling for static/overflow-counter tags. */
+    readOnly?: boolean;
+    /** Active state. Only available on dismissable/addable tags. */
+    active?: never;
+    /** Numeric value displayed by counter/overflow-counter variants. */
+    count?: never;
+    /** Disabled state. Only available on overflow-counter/dismissable/addable tags. */
+    disabled?: never;
+    /** Handler fired when the close button in dismissable tag is clicked. */
+    onClose?: never;
+    /** Handler fired when button-based tag clicked */
+    onClick?: never;
+};
+type TagPropsCounter = TagSpanHostProps & {
+    type: 'counter';
+    label: string;
+    count: number;
+    active?: never;
+    disabled?: never;
+    onClose?: never;
+    onClick?: never;
+    readOnly?: never;
+};
+type TagPropsOverflowCounter = TagButtonHostProps & {
+    type: 'overflow-counter';
+    count: number;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    readOnly?: boolean;
+    active?: never;
+    label?: never;
+    onClose?: never;
+};
+type TagPropsDismissable = TagSpanHostProps & {
+    type: 'dismissable';
+    active?: boolean;
+    disabled?: boolean;
+    readOnly?: never;
+    label: string;
+    onClose: MouseEventHandler<HTMLButtonElement>;
+    count?: never;
+    onClick?: never;
+};
+type TagPropsAddable = TagButtonHostProps & {
+    type: 'addable';
+    active?: boolean;
+    disabled?: boolean;
+    label: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    count?: never;
+    onClose?: never;
+    readOnly?: never;
+};
+export {};

package/TextField/TextField.d.ts

@@ -1,12 +1,33 @@
-import { MouseEventHandler, ReactNode, ReactElement } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 import { TextFieldSize } from '@mezzanine-ui/core/text-field';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export interface TextFieldProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'defaultValue' | 'onChange' | 'prefix'> {
+/**
+ * Padding info provided to children function
+ */
+export interface TextFieldPaddingInfo {
     /**
-     * Whether the field is active.
+     * ClassName that applies the same padding as TextField's current size.
+     * Use this when you want to move padding from TextField to input/textarea.
+     */
+    paddingClassName: string;
+}
+/**
+ * Base props shared by all TextField variants
+ */
+export interface TextFieldBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'defaultValue' | 'onChange' | 'prefix'> {
+    /**
+     * Whether the field is active (focused/opened/expanded).
+     * @default false
      */
     active?: boolean;
-    children?: ReactNode;
+    /**
+     * The input/textarea element, or a function that receives padding info.
+     * When using function form, TextField will not apply padding (you control it).
+     */
+    children: ReactNode | ((paddingInfo: TextFieldPaddingInfo) => ReactNode);
+    /**
+     * Additional class name to apply to the root element.
+     */
     className?: string;
     /**
      * Whether to show the clear button.
@@ -14,41 +35,78 @@ export interface TextFieldProps extends Omit<NativeElementPropsWithoutKeyAndRef<
      */
     clearable?: boolean;
     /**
-     * Whether the field is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the field is error.
+     * Whether the field is in error state.
      * @default false
      */
     error?: boolean;
     /**
-     * If `true`, set width: 100%.
-     * @default false
+     * Whether the field should take the full width of its container.
+     * @default true
      */
     fullWidth?: boolean;
     /**
      * The callback will be fired after clear icon clicked.
      */
     onClear?: MouseEventHandler;
-    /**
-     * The prefix addon of the field.
-     */
-    prefix?: ReactNode;
     /**
      * The size of field.
-     * @default 'medium'
+     * @default 'main'
      */
     size?: TextFieldSize;
+    /**
+     * Whether the field is in warning state.
+     * @default false
+     */
+    warning?: boolean;
+}
+/**
+ * Affix props - prefix and suffix
+ */
+export type TextFieldAffixProps = {
+    /**
+     * The prefix addon of the field.
+     */
+    prefix?: ReactNode;
     /**
      * The suffix addon of the field.
      */
     suffix?: ReactNode;
-    suffixActionIcon?: ReactElement;
-}
+};
+/**
+ * Interactive state - typing, disabled, and readonly are mutually exclusive
+ */
+export type TextFieldInteractiveStateProps = {
+    /**
+     * Whether the user is currently typing.
+     * If not provided, will be auto-detected.
+     */
+    typing?: boolean;
+    disabled?: never;
+    readonly?: never;
+} | {
+    typing?: never;
+    /**
+     * Whether the field is disabled.
+     * @default false
+     */
+    disabled: true;
+    readonly?: never;
+} | {
+    typing?: never;
+    disabled?: never;
+    /**
+     * Whether the field is readonly.
+     * @default false
+     */
+    readonly: true;
+} | {
+    typing?: never;
+    disabled?: never;
+    readonly?: never;
+};
+export type TextFieldProps = TextFieldBaseProps & TextFieldAffixProps & TextFieldInteractiveStateProps;
 /**
- * The react component for `mezzanine` input.
+ * The react component for `mezzanine` text field.
  */
 declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLDivElement>>;
 export default TextField;

package/TextField/TextField.js

@@ -1,46 +1,81 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, cloneElement } from 'react';
-import { TimesIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useState, useRef, useEffect } from 'react';
 import { textFieldClasses } from '@mezzanine-ui/core/text-field';
 import { useTextFieldControl } from './useTextFieldControl.js';
-import { MezzanineConfig } from '../Provider/context.js';
-import Icon from '../Icon/Icon.js';
+import ClearActions from '../ClearActions/ClearActions.js';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import cx from 'clsx';
 
 /**
- * The react component for `mezzanine` input.
+ * The react component for `mezzanine` text field.
  */
 const TextField = forwardRef(function TextField(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { active = false, children, className, clearable = false, disabled = false, error = false, fullWidth, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, role: roleProp, size = globalSize, suffix, suffixActionIcon, ...rest } = props;
+    const { active = false, children, className, clearable = false, disabled, error = false, fullWidth = true, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, readonly, role: roleProp, size = 'main', suffix, typing: typingProp, warning, ...rest } = props;
+    const [isTyping, setIsTyping] = useState(false);
+    const containerRef = useRef(null);
+    const hostRef = useComposeRefs([ref, containerRef]);
+    const typing = disabled || readonly
+        ? false
+        : typeof typingProp !== 'undefined'
+            ? typingProp
+            : isTyping;
+    useEffect(() => {
+        if (typingProp !== undefined || disabled || readonly)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const input = container.querySelector('input, textarea');
+        if (!input)
+            return;
+        const handleInput = () => {
+            setIsTyping(true);
+        };
+        const handleBlur = () => {
+            setIsTyping(false);
+        };
+        input.addEventListener('input', handleInput, false);
+        input.addEventListener('mousedown', handleInput, false);
+        input.addEventListener('blur', handleBlur, false);
+        return () => {
+            input.removeEventListener('input', handleInput, false);
+            input.removeEventListener('mousedown', handleInput, false);
+            input.removeEventListener('blur', handleBlur, false);
+        };
+    }, [typingProp, disabled, readonly]);
     const { role, onClick, onKeyDown } = useTextFieldControl({
         onClick: onClickProps,
         onKeyDown: onKeyDownProps,
     });
-    return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsxs("div", { ...rest, ref: ref, role: roleProp || role, onClick: (evt) => {
+    const isChildrenFunction = typeof children === 'function';
+    const paddingInfo = {
+        paddingClassName: cx(textFieldClasses.inputPadding, size === 'main' ? textFieldClasses.inputPaddingMain : textFieldClasses.inputPaddingSub),
+    };
+    const renderedChildren = isChildrenFunction
+        ? children(paddingInfo)
+        : children;
+    return (jsxs("div", { ...rest, ref: hostRef, role: roleProp || role, onClick: (evt) => {
             evt.stopPropagation();
             onClick === null || onClick === void 0 ? void 0 : onClick(evt);
-        }, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, textFieldClasses.size(size), {
-            [textFieldClasses.active]: active,
+        }, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, {
+            [textFieldClasses.slimGap]: (prefix && suffix) || clearable,
+            [textFieldClasses.main]: size === 'main',
+            [textFieldClasses.sub]: size === 'sub',
             [textFieldClasses.clearable]: clearable,
             [textFieldClasses.disabled]: disabled,
             [textFieldClasses.error]: error,
             [textFieldClasses.fullWidth]: fullWidth,
-            [textFieldClasses.withPrefix]: prefix,
-            [textFieldClasses.withSuffix]: suffix || suffixActionIcon,
-        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), children, suffix && jsx("div", { className: textFieldClasses.suffix, children: suffix }), suffixActionIcon &&
-                cloneElement(suffixActionIcon, {
-                    className: cx(textFieldClasses.actionIcon, suffixActionIcon.props.className),
-                    role: 'button',
-                    tabIndex: -1,
-                }), clearable && (jsx(Icon, { className: textFieldClasses.clearIcon, icon: TimesIcon, onClick: (event) => {
-                    if (!disabled && onClear) {
+            [textFieldClasses.noPadding]: isChildrenFunction,
+            [textFieldClasses.readonly]: readonly,
+            [textFieldClasses.typing]: typing,
+            [textFieldClasses.active]: active,
+            [textFieldClasses.warning]: warning,
+        }, className), children: [prefix && jsx("div", { className: textFieldClasses.prefix, children: prefix }), renderedChildren, clearable && (jsx(ClearActions, { type: "clearable", className: textFieldClasses.clearIcon, onClick: (event) => {
+                    if (!disabled && !readonly && onClear) {
                         onClear(event);
                     }
-                }, onMouseDown: (event) => event.preventDefault(), role: "button", tabIndex: -1 }))] }));
+                }, onMouseDown: (event) => event.preventDefault(), tabIndex: -1 })), suffix && jsx("div", { className: textFieldClasses.suffix, children: suffix })] }));
 });
-var TextField$1 = TextField;
 
-export { TextField$1 as default };
+export { TextField as default };

package/TextField/index.d.ts

@@ -1,2 +1,3 @@
 export type { TextFieldSize } from '@mezzanine-ui/core/text-field';
-export { TextFieldProps, default } from './TextField';
+export type { TextFieldProps, TextFieldBaseProps, TextFieldAffixProps, TextFieldInteractiveStateProps, TextFieldPaddingInfo, } from './TextField';
+export { default } from './TextField';

package/Textarea/Textarea.d.ts

@@ -1,56 +1,24 @@
-import { Ref, ChangeEventHandler } from 'react';
-import { TextareaSize } from '@mezzanine-ui/core/textarea';
+import { Ref } from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { TextFieldProps } from '../TextField';
-export interface TextareaProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'prefix' | 'suffix' | 'suffixActionIcon'> {
-    /**
-     * The default value of textarea.
-     */
-    defaultValue?: string;
-    /**
-     * The max length of textarea.
-     */
-    maxLength?: number;
-    /**
-     * The change event handler of textarea element.
-     */
-    onChange?: ChangeEventHandler<HTMLTextAreaElement>;
-    /**
-     * The placeholder of textarea.
-     */
-    placeholder?: string;
-    /**
-     * Whether the textarea is readonly.
-     * @default false
-     */
-    readOnly?: boolean;
-    /**
-     * Whether the input is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     * The rows of textarea.
-     */
-    rows?: number;
-    /**
-     * The size of textarea.
-     * @default 'medium'
-     */
-    size?: TextareaSize;
-    /**
-     * The react ref passed to textarea element.
-     */
+export type TextareaProps = Omit<NativeElementPropsWithoutKeyAndRef<'textarea'>, 'disabled' | 'readOnly'> & {
+    /** ClassName apply to textarea */
+    textareaClassName?: string;
+    /** The react ref passed to textarea element. */
     textareaRef?: Ref<HTMLTextAreaElement>;
-    /**
-     * The other native props for textarea element.
-     */
-    textareaProps?: Omit<NativeElementPropsWithoutKeyAndRef<'textarea'>, 'defaultValue' | 'disabled' | 'maxLength' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'rows' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
-    /**
-     * The value of textarea.
-     */
-    value?: string;
-}
+    /** Controls textarea CSS `resize` behavior with native `resize` values. */
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
+} & ({
+    /**  Set visual style type of the textarea. */
+    type?: 'default';
+    /** Disabled state of the taxtarea, Only available on default type. */
+    disabled?: boolean;
+    /** ReadOnly state of the textarea, Only available on default type. */
+    readOnly?: boolean;
+} | {
+    type: 'warning' | 'error';
+    disabled?: never;
+    readOnly?: never;
+});
 /**
  * The react component for `mezzanine` textarea.
  */

package/Textarea/Textarea.js

@@ -1,35 +1,28 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import { textareaClasses } from '@mezzanine-ui/core/textarea';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
-import { MezzanineConfig } from '../Provider/context.js';
+import { ResizeHandleIcon } from '@mezzanine-ui/icons';
 import TextField from '../TextField/TextField.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
+import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` textarea.
  */
 const Textarea = forwardRef(function Textarea(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    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, maxLength, onChange: onChangeProp, placeholder, readOnly = false, required = requiredFromFormControl || false, rows, size = globalSize, textareaRef: textareaRefProp, textareaProps, value: valueProp, } = props;
+    const { className, disabled, readOnly, textareaClassName, textareaRef: textareaRefProp, type = 'default', resize = 'none', ...textareaProps } = props;
     const textareaRef = useRef(null);
-    const [value, onChange, onClear] = useInputWithClearControlValue({
-        defaultValue,
-        onChange: onChangeProp,
-        ref: textareaRef,
-        value: valueProp,
-    });
     const composedTextareaRef = useComposeRefs([textareaRefProp, textareaRef]);
-    const active = !!value;
-    const currentLength = value.length;
-    const upperLimit = typeof maxLength === 'number' && currentLength >= maxLength;
-    return (jsxs(TextField, { ref: ref, active: active, className: cx(textareaClasses.host, {
-            [textareaClasses.upperLimit]: upperLimit,
-        }, className), clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, onClear: onClear, size: size, children: [jsx("textarea", { ...textareaProps, ref: composedTextareaRef, "aria-disabled": disabled, "aria-multiline": true, "aria-readonly": readOnly, "aria-required": required, disabled: disabled, maxLength: maxLength, onChange: onChange, placeholder: placeholder, readOnly: readOnly, required: required, rows: rows, value: value }), typeof maxLength === 'number' && (jsxs("span", { className: textareaClasses.count, children: [value.length, "/", maxLength] }))] }));
+    const interactiveProps = type === 'default'
+        ? disabled
+            ? { disabled: true }
+            : readOnly
+                ? { readonly: true }
+                : {}
+        : {};
+    return (jsxs(TextField, { ...interactiveProps, ref: ref, className: cx(textareaClasses.host, className), error: type === 'error', warning: type === 'warning', children: [jsx("textarea", { ...textareaProps, className: cx(textareaClasses.textarea, textareaClassName), ref: composedTextareaRef, disabled: disabled, readOnly: readOnly, style: { resize, ...textareaProps.style } }), resize !== 'none' && (jsx(Icon, { icon: ResizeHandleIcon, size: 16, className: textareaClasses.resizer }))] }));
 });
-var Textarea$1 = Textarea;
 
-export { Textarea$1 as default };
+export { Textarea as default };

package/Textarea/index.d.ts

@@ -1,2 +1,2 @@
-export type { TextareaSize } from '@mezzanine-ui/core/textarea';
-export { TextareaProps, default } from './Textarea';
+export type { TextareaProps } from './Textarea';
+export { default } from './Textarea';