@mezzanine-ui/react 0.13.10 → 0.14.0

package/Tabs/TabPane.js

@@ -3,17 +3,17 @@ import { forwardRef } from 'react';
 import { tabsClasses } from '@mezzanine-ui/core/tabs';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` tab pane.
- */
-const TabPane = forwardRef(function TabPane(props, ref) {
-    const { children, className, 
-    /**
-     * Ignore it
-     */
-    tab, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(tabsClasses.pane, className), children: children }));
-});
+/**
+ * The react component for `mezzanine` tab pane.
+ */
+const TabPane = forwardRef(function TabPane(props, ref) {
+    const { children, className, 
+    /**
+     * Ignore it
+     */
+    tab, ...rest } = props;
+    return (jsx("div", { ...rest, ref: ref, className: cx(tabsClasses.pane, className), children: children }));
+});
 var TabPane$1 = TabPane;
 
 export { TabPane$1 as default };

package/Tabs/Tabs.d.ts

@@ -1,39 +1,39 @@
-import { Key, MouseEvent, ReactElement, ReactNode } from 'react';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { TabPaneProps } from './TabPane';
-export declare type TabsChild = ReactElement<TabPaneProps>;
-export interface TabsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
-    /**
-     * Current TabPane's index
-     */
-    activeKey?: Key;
-    /**
-     * Actions on the right side of tabBar
-     */
-    actions?: ReactNode;
-    /**
-     * The tab panes in tabs
-     */
-    children: TabsChild | TabsChild[];
-    /**
-     * Initial active TabPane's key, if activeKey is not set.
-     */
-    defaultActiveKey?: Key;
-    /**
-     * The change event handler of Tabs
-     */
-    onChange?: (activeKey: Key) => void;
-    /**
-     * Callback executed when tab is clicked
-     */
-    onTabClick?: (key: Key, event: MouseEvent) => void;
-    /**
-     * The className of tabBar
-     */
-    tabBarClassName?: string;
-}
-/**
- * The react component for `mezzanine` tabs.
- */
-declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Tabs;
+import { Key, MouseEvent, ReactElement, ReactNode } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TabPaneProps } from './TabPane';
+export type TabsChild = ReactElement<TabPaneProps>;
+export interface TabsProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange' | 'children'> {
+    /**
+     * Current TabPane's index
+     */
+    activeKey?: Key;
+    /**
+     * Actions on the right side of tabBar
+     */
+    actions?: ReactNode;
+    /**
+     * The tab panes in tabs
+     */
+    children: TabsChild | TabsChild[];
+    /**
+     * Initial active TabPane's key, if activeKey is not set.
+     */
+    defaultActiveKey?: Key;
+    /**
+     * The change event handler of Tabs
+     */
+    onChange?: (activeKey: Key) => void;
+    /**
+     * Callback executed when tab is clicked
+     */
+    onTabClick?: (key: Key, event: MouseEvent) => void;
+    /**
+     * The className of tabBar
+     */
+    tabBarClassName?: string;
+}
+/**
+ * The react component for `mezzanine` tabs.
+ */
+declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tabs;

package/Tabs/Tabs.js

@@ -7,42 +7,42 @@ import useTabsOverflow from './useTabsOverflow.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` tabs.
- */
-const Tabs = forwardRef(function Tabs(props, ref) {
-    const { activeKey: activeKeyProp, actions, children, className, defaultActiveKey = 0, onChange, onTabClick, tabBarClassName, ...rest } = props;
-    const tabsRef = useRef(null);
-    const [activeKey, setActiveKey] = useCustomControlValue({
-        defaultValue: defaultActiveKey,
-        onChange,
-        value: activeKeyProp,
-    });
-    let pane;
-    const tabs = Children.map(children, (tabPane, index) => {
-        var _a;
-        const key = (_a = tabPane.key) !== null && _a !== void 0 ? _a : index;
-        const { tab } = tabPane.props;
-        const active = activeKey.toString() === key.toString();
-        if (active) {
-            pane = tabPane;
-        }
-        return cloneElement(tab, {
-            key,
-            active,
-            onClick: (event) => {
-                if (!active) {
-                    setActiveKey(key);
-                }
-                if (onTabClick) {
-                    onTabClick(key, event);
-                }
-            },
-        });
-    });
-    const { isOverflowing, isScrollToBegin, isScrollToEnd, scrollToLeft, scrollToRight, } = useTabsOverflow(tabsRef);
-    return (jsxs("div", { ...rest, ref: ref, className: cx(tabsClasses.host, className), children: [jsxs("div", { className: cx(tabsClasses.tabBar, tabBarClassName), children: [jsxs("div", { className: tabsClasses.overflow, children: [isOverflowing && !isScrollToBegin && (jsx("button", { "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button", children: jsx(Icon, { icon: ChevronLeftIcon }) })), jsx("div", { ref: tabsRef, className: tabsClasses.tabs, children: tabs }), isOverflowing && !isScrollToEnd && (jsx("button", { "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button", children: jsx(Icon, { icon: ChevronRightIcon }) }))] }), actions] }), pane] }));
-});
+/**
+ * The react component for `mezzanine` tabs.
+ */
+const Tabs = forwardRef(function Tabs(props, ref) {
+    const { activeKey: activeKeyProp, actions, children, className, defaultActiveKey = 0, onChange, onTabClick, tabBarClassName, ...rest } = props;
+    const tabsRef = useRef(null);
+    const [activeKey, setActiveKey] = useCustomControlValue({
+        defaultValue: defaultActiveKey,
+        onChange,
+        value: activeKeyProp,
+    });
+    let pane;
+    const tabs = Children.map(children, (tabPane, index) => {
+        var _a;
+        const key = (_a = tabPane.key) !== null && _a !== void 0 ? _a : index;
+        const { tab } = tabPane.props;
+        const active = activeKey.toString() === key.toString();
+        if (active) {
+            pane = tabPane;
+        }
+        return cloneElement(tab, {
+            key,
+            active,
+            onClick: (event) => {
+                if (!active) {
+                    setActiveKey(key);
+                }
+                if (onTabClick) {
+                    onTabClick(key, event);
+                }
+            },
+        });
+    });
+    const { isOverflowing, isScrollToBegin, isScrollToEnd, scrollToLeft, scrollToRight, } = useTabsOverflow(tabsRef);
+    return (jsxs("div", { ...rest, ref: ref, className: cx(tabsClasses.host, className), children: [jsxs("div", { className: cx(tabsClasses.tabBar, tabBarClassName), children: [jsxs("div", { className: tabsClasses.overflow, children: [isOverflowing && !isScrollToBegin && (jsx("button", { "aria-label": "scrollToLeft", className: tabsClasses.scrollBtn, onClick: () => scrollToLeft(), type: "button", children: jsx(Icon, { icon: ChevronLeftIcon }) })), jsx("div", { ref: tabsRef, className: tabsClasses.tabs, children: tabs }), isOverflowing && !isScrollToEnd && (jsx("button", { "aria-label": "scrollToRight", className: tabsClasses.scrollBtn, onClick: () => scrollToRight(), type: "button", children: jsx(Icon, { icon: ChevronRightIcon }) }))] }), actions] }), pane] }));
+});
 var Tabs$1 = Tabs;
 
 export { Tabs$1 as default };

package/Tabs/index.d.ts

@@ -1,3 +1,3 @@
-export { TabProps, default as Tab, } from './Tab';
-export { TabPaneProps, default as TabPane, } from './TabPane';
-export { TabsChild, TabsProps, default, } from './Tabs';
+export { TabProps, default as Tab, } from './Tab';
+export { TabPaneProps, default as TabPane, } from './TabPane';
+export { TabsChild, TabsProps, default, } from './Tabs';

package/Tabs/useTabsOverflow.d.ts

@@ -1,8 +1,8 @@
-import { RefObject } from 'react';
-export default function useTabsOverflow(tabsRef: RefObject<HTMLElement>): {
-    isOverflowing: boolean;
-    isScrollToBegin: boolean;
-    isScrollToEnd: boolean;
-    scrollToLeft: () => void;
-    scrollToRight: () => void;
-};
+import { RefObject } from 'react';
+export default function useTabsOverflow(tabsRef: RefObject<HTMLElement>): {
+    isOverflowing: boolean;
+    isScrollToBegin: boolean;
+    isScrollToEnd: boolean;
+    scrollToLeft: () => void;
+    scrollToRight: () => void;
+};

package/Tabs/useTabsOverflow.js

@@ -1,61 +1,61 @@
 import { useState, useEffect } from 'react';
 
-function useTabsOverflow(tabsRef) {
-    const [isOverflowing, setIsOverflowing] = useState(false);
-    const [scrollState, setScrollState] = useState('begin');
-    const isScrollToBegin = scrollState === 'begin';
-    const isScrollToEnd = scrollState === 'end';
-    function scrollToLeft() {
-        if (tabsRef.current) {
-            tabsRef.current.scrollTo(0, 0);
-        }
-    }
-    function scrollToRight() {
-        if (tabsRef.current) {
-            const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
-            tabsRef.current.scrollTo(offsetRight, 0);
-        }
-    }
-    useEffect(() => {
-        if (tabsRef.current) {
-            const handleOverflowingState = () => {
-                if (tabsRef.current) {
-                    setIsOverflowing(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
-                }
-            };
-            const handleScrollState = () => {
-                if (tabsRef.current) {
-                    const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
-                    if (tabsRef.current.scrollLeft === 0) {
-                        setScrollState('begin');
-                    }
-                    else if (tabsRef.current.scrollLeft >= offsetRight) {
-                        setScrollState('end');
-                    }
-                    else {
-                        setScrollState('middle');
-                    }
-                }
-            };
-            // init isOverflowing when mounting
-            handleOverflowingState();
-            window.addEventListener('resize', handleOverflowingState);
-            tabsRef.current.addEventListener('scroll', handleScrollState);
-            return () => {
-                if (tabsRef.current) {
-                    window.removeEventListener('resize', handleOverflowingState);
-                    tabsRef.current.removeEventListener('scroll', handleScrollState);
-                }
-            };
-        }
-    }, [tabsRef.current]);
-    return {
-        isOverflowing,
-        isScrollToBegin,
-        isScrollToEnd,
-        scrollToLeft,
-        scrollToRight,
-    };
+function useTabsOverflow(tabsRef) {
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const [scrollState, setScrollState] = useState('begin');
+    const isScrollToBegin = scrollState === 'begin';
+    const isScrollToEnd = scrollState === 'end';
+    function scrollToLeft() {
+        if (tabsRef.current) {
+            tabsRef.current.scrollTo(0, 0);
+        }
+    }
+    function scrollToRight() {
+        if (tabsRef.current) {
+            const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
+            tabsRef.current.scrollTo(offsetRight, 0);
+        }
+    }
+    useEffect(() => {
+        if (tabsRef.current) {
+            const handleOverflowingState = () => {
+                if (tabsRef.current) {
+                    setIsOverflowing(tabsRef.current.scrollWidth > tabsRef.current.clientWidth);
+                }
+            };
+            const handleScrollState = () => {
+                if (tabsRef.current) {
+                    const offsetRight = tabsRef.current.scrollWidth - tabsRef.current.clientWidth;
+                    if (tabsRef.current.scrollLeft === 0) {
+                        setScrollState('begin');
+                    }
+                    else if (tabsRef.current.scrollLeft >= offsetRight) {
+                        setScrollState('end');
+                    }
+                    else {
+                        setScrollState('middle');
+                    }
+                }
+            };
+            // init isOverflowing when mounting
+            handleOverflowingState();
+            window.addEventListener('resize', handleOverflowingState);
+            tabsRef.current.addEventListener('scroll', handleScrollState);
+            return () => {
+                if (tabsRef.current) {
+                    window.removeEventListener('resize', handleOverflowingState);
+                    tabsRef.current.removeEventListener('scroll', handleScrollState);
+                }
+            };
+        }
+    }, [tabsRef.current]);
+    return {
+        isOverflowing,
+        isScrollToBegin,
+        isScrollToEnd,
+        scrollToLeft,
+        scrollToRight,
+    };
 }
 
 export { useTabsOverflow as default };

package/Tag/Tag.d.ts

@@ -1,29 +1,29 @@
-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;
-}
-/**
- * The react component for `mezzanine` tag.
- */
-declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default Tag;
+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;
+}
+/**
+ * The react component for `mezzanine` tag.
+ */
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/Tag/Tag.js

@@ -6,20 +6,20 @@ import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-/**
- * 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 }))] }));
-});
+/**
+ * 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 }))] }));
+});
 var Tag$1 = Tag;
 
 export { Tag$1 as default };

package/Tag/index.d.ts

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

package/TextField/TextField.d.ts

@@ -1,54 +1,54 @@
-import { MouseEventHandler, ReactNode, ReactElement } 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'> {
-    /**
-     * Whether the field is active.
-     */
-    active?: boolean;
-    children?: ReactNode;
-    className?: string;
-    /**
-     * Whether to show the clear button.
-     * @default false
-     */
-    clearable?: boolean;
-    /**
-     * Whether the field is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the field is error.
-     * @default false
-     */
-    error?: boolean;
-    /**
-     * If `true`, set width: 100%.
-     * @default false
-     */
-    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'
-     */
-    size?: TextFieldSize;
-    /**
-     * The suffix addon of the field.
-     */
-    suffix?: ReactNode;
-    suffixActionIcon?: ReactElement;
-}
-/**
- * The react component for `mezzanine` input.
- */
-declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLDivElement>>;
-export default TextField;
+import { MouseEventHandler, ReactNode, ReactElement } 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'> {
+    /**
+     * Whether the field is active.
+     */
+    active?: boolean;
+    children?: ReactNode;
+    className?: string;
+    /**
+     * Whether to show the clear button.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Whether the field is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is error.
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * If `true`, set width: 100%.
+     * @default false
+     */
+    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'
+     */
+    size?: TextFieldSize;
+    /**
+     * The suffix addon of the field.
+     */
+    suffix?: ReactNode;
+    suffixActionIcon?: ReactElement;
+}
+/**
+ * The react component for `mezzanine` input.
+ */
+declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TextField;

package/TextField/TextField.js

@@ -7,39 +7,39 @@ import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` input.
- */
-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 { 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) => {
-            evt.stopPropagation();
-            onClick === null || onClick === void 0 ? void 0 : onClick(evt);
-        }, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, textFieldClasses.size(size), {
-            [textFieldClasses.active]: active,
-            [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) {
-                        onClear(event);
-                    }
-                }, onMouseDown: (event) => event.preventDefault(), role: "button", tabIndex: -1 }))] }));
-});
+/**
+ * The react component for `mezzanine` input.
+ */
+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 { 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) => {
+            evt.stopPropagation();
+            onClick === null || onClick === void 0 ? void 0 : onClick(evt);
+        }, onKeyDown: onKeyDown, className: cx(textFieldClasses.host, textFieldClasses.size(size), {
+            [textFieldClasses.active]: active,
+            [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) {
+                        onClear(event);
+                    }
+                }, onMouseDown: (event) => event.preventDefault(), role: "button", tabIndex: -1 }))] }));
+});
 var TextField$1 = TextField;
 
 export { TextField$1 as default };

package/TextField/index.d.ts

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

package/TextField/useTextFieldControl.d.ts

@@ -1,10 +1,10 @@
-import { MouseEventHandler, KeyboardEventHandler } from 'react';
-export interface UseTextFieldControlProps {
-    onClick?: MouseEventHandler;
-    onKeyDown?: KeyboardEventHandler;
-}
-export declare function useTextFieldControl(props: UseTextFieldControlProps): {
-    role: string;
-    onClick: MouseEventHandler<Element> | undefined;
-    onKeyDown: KeyboardEventHandler<Element> | undefined;
-};
+import { MouseEventHandler, KeyboardEventHandler } from 'react';
+export interface UseTextFieldControlProps {
+    onClick?: MouseEventHandler;
+    onKeyDown?: KeyboardEventHandler;
+}
+export declare function useTextFieldControl(props: UseTextFieldControlProps): {
+    role: string;
+    onClick: MouseEventHandler | undefined;
+    onKeyDown: KeyboardEventHandler | undefined;
+};