@mezzanine-ui/react 0.13.10 → 0.14.0

package/Badge/Badge.js

@@ -3,26 +3,26 @@ import { forwardRef } from 'react';
 import { badgeClasses } from '@mezzanine-ui/core/badge';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` badge.
- */
-const Badge = forwardRef(function Badge(props, ref) {
-    const { children: childrenProp, className, dot = false, overflowCount = 99, ...rest } = props;
-    let children;
-    if (!dot) {
-        if (typeof childrenProp === 'number') {
-            const count = childrenProp;
-            children = count > overflowCount ? `${overflowCount}+` : count;
-        }
-        else {
-            children = childrenProp;
-        }
-    }
-    return (jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, {
-            [badgeClasses.dot]: dot,
-            [badgeClasses.hide]: !dot && children === 0,
-        }, className), children: children }));
-});
+/**
+ * The react component for `mezzanine` badge.
+ */
+const Badge = forwardRef(function Badge(props, ref) {
+    const { children: childrenProp, className, dot = false, overflowCount = 99, ...rest } = props;
+    let children;
+    if (!dot) {
+        if (typeof childrenProp === 'number') {
+            const count = childrenProp;
+            children = count > overflowCount ? `${overflowCount}+` : count;
+        }
+        else {
+            children = childrenProp;
+        }
+    }
+    return (jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, {
+            [badgeClasses.dot]: dot,
+            [badgeClasses.hide]: !dot && children === 0,
+        }, className), children: children }));
+});
 var Badge$1 = Badge;
 
 export { Badge$1 as default };

package/Badge/BadgeContainer.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export declare type BadgeContainerProps = NativeElementPropsWithoutKeyAndRef<'span'>;
-/**
- * The react component for `mezzanine` badge container.
- */
-declare const BadgeContainer: import("react").ForwardRefExoticComponent<BadgeContainerProps & import("react").RefAttributes<HTMLSpanElement>>;
-export default BadgeContainer;
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export type BadgeContainerProps = NativeElementPropsWithoutKeyAndRef<'span'>;
+/**
+ * The react component for `mezzanine` badge container.
+ */
+declare const BadgeContainer: import("react").ForwardRefExoticComponent<BadgeContainerProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default BadgeContainer;

package/Badge/BadgeContainer.js

@@ -3,13 +3,13 @@ import { forwardRef } from 'react';
 import { badgeClasses } from '@mezzanine-ui/core/badge';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` badge container.
- */
-const BadgeContainer = forwardRef(function BadgeContainer(props, ref) {
-    const { children, className, ...rest } = props;
-    return (jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.container, className), children: children }));
-});
+/**
+ * The react component for `mezzanine` badge container.
+ */
+const BadgeContainer = forwardRef(function BadgeContainer(props, ref) {
+    const { children, className, ...rest } = props;
+    return (jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.container, className), children: children }));
+});
 var BadgeContainer$1 = BadgeContainer;
 
 export { BadgeContainer$1 as default };

package/Badge/index.d.ts

@@ -1,2 +1,2 @@
-export { BadgeProps, default, } from './Badge';
-export { BadgeContainerProps, default as BadgeContainer, } from './BadgeContainer';
+export { BadgeProps, default, } from './Badge';
+export { BadgeContainerProps, default as BadgeContainer, } from './BadgeContainer';

package/Button/Button.d.ts

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
-import { ButtonComponent, ButtonPropsBase } from './typings';
-export declare type ButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, ButtonPropsBase>;
-/**
- * The react component for `mezzanine` button.
- */
-declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, keyof ButtonPropsBase> & ButtonPropsBase, "component"> & {
-    component?: ButtonComponent | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
-export default Button;
+/// <reference types="react" />
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { ButtonComponent, ButtonPropsBase } from './typings';
+export type ButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, ButtonPropsBase>;
+/**
+ * The react component for `mezzanine` button.
+ */
+declare const Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, keyof ButtonPropsBase> & ButtonPropsBase, "component"> & {
+    component?: ButtonComponent | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/Button/Button.js

@@ -6,35 +6,35 @@ import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` button.
- */
-const Button = forwardRef(function Button(props, ref) {
-    const { size: globalSize, } = useContext(MezzanineConfig);
-    const { children, className, color = 'primary', component: Component = 'button', danger = false, disabled = false, loading = false, onClick, prefix: prefixProp, size = globalSize, suffix: suffixProp, variant = 'text', ...rest } = props;
-    let prefix = prefixProp;
-    let suffix = suffixProp;
-    if (loading) {
-        const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true });
-        if (suffix && !prefix) {
-            suffix = loadingIcon;
-        }
-        else {
-            prefix = loadingIcon;
-        }
-    }
-    const asIconBtn = children == null && !!(prefix || suffix);
-    return (jsxs(Component, { ...rest, ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.color(color), buttonClasses.size(size), {
-            [buttonClasses.danger]: danger,
-            [buttonClasses.disabled]: disabled,
-            [buttonClasses.icon]: asIconBtn,
-            [buttonClasses.loading]: loading,
-        }, className), disabled: disabled, onClick: (event) => {
-            if (!disabled && !loading && onClick) {
-                onClick(event);
-            }
-        }, children: [prefix, children && jsx("span", { className: buttonClasses.label, children: children }), suffix] }));
-});
+/**
+ * The react component for `mezzanine` button.
+ */
+const Button = forwardRef(function Button(props, ref) {
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { children, className, color = 'primary', component: Component = 'button', danger = false, disabled = false, loading = false, onClick, prefix: prefixProp, size = globalSize, suffix: suffixProp, variant = 'text', ...rest } = props;
+    let prefix = prefixProp;
+    let suffix = suffixProp;
+    if (loading) {
+        const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true });
+        if (suffix && !prefix) {
+            suffix = loadingIcon;
+        }
+        else {
+            prefix = loadingIcon;
+        }
+    }
+    const asIconBtn = children == null && !!(prefix || suffix);
+    return (jsxs(Component, { ...rest, ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.color(color), buttonClasses.size(size), {
+            [buttonClasses.danger]: danger,
+            [buttonClasses.disabled]: disabled,
+            [buttonClasses.icon]: asIconBtn,
+            [buttonClasses.loading]: loading,
+        }, className), disabled: disabled, onClick: (event) => {
+            if (!disabled && !loading && onClick) {
+                onClick(event);
+            }
+        }, children: [prefix, children && jsx("span", { className: buttonClasses.label, children: children }), suffix] }));
+});
 var Button$1 = Button;
 
 export { Button$1 as default };

package/Button/ButtonGroup.d.ts

@@ -1,63 +1,63 @@
-import { ReactElement } from 'react';
-import { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-import { ButtonProps } from './Button';
-import { IconButtonProps } from './IconButton';
-export declare type ButtonGroupChild = ReactElement<ButtonProps | IconButtonProps> | null | undefined | false;
-export interface ButtonGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
-    /**
-     * If `true`, all buttons will not have spacing between each others.
-     * @default false
-     */
-    attached?: boolean;
-    /**
-     * Only accept button elements or icon button elements.
-     */
-    children: ButtonGroupChild | ButtonGroupChild[];
-    /**
-     * If the `color` of a button inside group not provided, the `color` of group will override it.
-     * @default 'primary'
-     */
-    color?: ButtonColor;
-    /**
-     * If the `danger` of a button inside group not provided, the `danger` of group will override it.
-     * @default false
-     */
-    danger?: boolean;
-    /**
-     * If the `disabled` of a button inside group not provided, the `disabled` of group will override it.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, set width: 100%.
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * The orientation of button group.
-     * @default horizontal
-     */
-    orientation?: ButtonGroupOrientation;
-    /**
-     * If the `size` of a button inside group not provided, the `size` of group will override it.
-     * @default 'medium'
-     */
-    size?: ButtonSize;
-    /**
-     * The spacing level of button gap between each buttons.
-     * Will be added on if `attached`=false.
-     * @default small:3,others:4
-     */
-    spacing?: ButtonGroupSpacing;
-    /**
-     * If the `variant` of a button inside group not provided, the `variant` of group will override it.
-     * @default 'text'
-     */
-    variant?: ButtonVariant;
-}
-/**
- * The react component for `mezzanine` button group.
- */
-declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
-export default ButtonGroup;
+import { ReactElement } from 'react';
+import { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { ButtonProps } from './Button';
+import { IconButtonProps } from './IconButton';
+export type ButtonGroupChild = ReactElement<ButtonProps | IconButtonProps> | null | undefined | false;
+export interface ButtonGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * If `true`, all buttons will not have spacing between each others.
+     * @default false
+     */
+    attached?: boolean;
+    /**
+     * Only accept button elements or icon button elements.
+     */
+    children: ButtonGroupChild | ButtonGroupChild[];
+    /**
+     * If the `color` of a button inside group not provided, the `color` of group will override it.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+    /**
+     * If the `danger` of a button inside group not provided, the `danger` of group will override it.
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * If the `disabled` of a button inside group not provided, the `disabled` of group will override it.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, set width: 100%.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * The orientation of button group.
+     * @default horizontal
+     */
+    orientation?: ButtonGroupOrientation;
+    /**
+     * If the `size` of a button inside group not provided, the `size` of group will override it.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * The spacing level of button gap between each buttons.
+     * Will be added on if `attached`=false.
+     * @default small:3,others:4
+     */
+    spacing?: ButtonGroupSpacing;
+    /**
+     * If the `variant` of a button inside group not provided, the `variant` of group will override it.
+     * @default 'text'
+     */
+    variant?: ButtonVariant;
+}
+/**
+ * The react component for `mezzanine` button group.
+ */
+declare const ButtonGroup: import("react").ForwardRefExoticComponent<ButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ButtonGroup;

package/Button/ButtonGroup.js

@@ -4,35 +4,35 @@ import { toButtonGroupCssVars, buttonGroupClasses } from '@mezzanine-ui/core/but
 import { MezzanineConfig } from '../Provider/context.js';
 import cx from 'clsx';
 
-/**
- * The react component for `mezzanine` button group.
- */
-const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
-    const { size: globalSize, } = useContext(MezzanineConfig);
-    const { attached = false, children, className, color = 'primary', danger = false, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = globalSize, spacing, style: styleProp, variant = 'text', ...rest } = props;
-    const cssVars = toButtonGroupCssVars({ size, spacing });
-    const style = {
-        ...styleProp,
-        ...cssVars,
-    };
-    return (jsx("div", { ref: ref, ...rest, "aria-orientation": orientation, className: cx(buttonGroupClasses.host, buttonGroupClasses.orientation(orientation), {
-            [buttonGroupClasses.fullWidth]: fullWidth,
-            [buttonGroupClasses.attached]: attached,
-        }, className), role: role, style: style, children: Children.map(children, (unknownChild) => {
-            var _a, _b;
-            const child = unknownChild;
-            if (!child) {
-                return null;
-            }
-            return cloneElement(child, {
-                color: child.props.color || color,
-                danger: (_a = child.props.danger) !== null && _a !== void 0 ? _a : danger,
-                disabled: (_b = child.props.disabled) !== null && _b !== void 0 ? _b : disabled,
-                size: child.props.size || size,
-                variant: child.props.variant || variant,
-            });
-        }) }));
-});
+/**
+ * The react component for `mezzanine` button group.
+ */
+const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { attached = false, children, className, color = 'primary', danger = false, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = globalSize, spacing, style: styleProp, variant = 'text', ...rest } = props;
+    const cssVars = toButtonGroupCssVars({ size, spacing });
+    const style = {
+        ...styleProp,
+        ...cssVars,
+    };
+    return (jsx("div", { ref: ref, ...rest, "aria-orientation": orientation, className: cx(buttonGroupClasses.host, buttonGroupClasses.orientation(orientation), {
+            [buttonGroupClasses.fullWidth]: fullWidth,
+            [buttonGroupClasses.attached]: attached,
+        }, className), role: role, style: style, children: Children.map(children, (unknownChild) => {
+            var _a, _b;
+            const child = unknownChild;
+            if (!child) {
+                return null;
+            }
+            return cloneElement(child, {
+                color: child.props.color || color,
+                danger: (_a = child.props.danger) !== null && _a !== void 0 ? _a : danger,
+                disabled: (_b = child.props.disabled) !== null && _b !== void 0 ? _b : disabled,
+                size: child.props.size || size,
+                variant: child.props.variant || variant,
+            });
+        }) }));
+});
 var ButtonGroup$1 = ButtonGroup;
 
 export { ButtonGroup$1 as default };

package/Button/IconButton.d.ts

@@ -1,21 +1,21 @@
-import { ReactNode } from 'react';
-import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
-import { ButtonComponent, ButtonPropsBase } from './typings';
-export declare type IconButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, Omit<ButtonPropsBase, 'prefix' | 'suffix'> & {
-    /**
-     * The icon element.
-     */
-    children?: ReactNode;
-}>;
-/**
- * The react component for `mezzanine` button only has icon.
- */
-declare const IconButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, "color" | "danger" | "disabled" | "loading" | "size" | "variant" | "children"> & Omit<ButtonPropsBase, "prefix" | "suffix"> & {
-    /**
-     * The icon element.
-     */
-    children?: ReactNode;
-}, "component"> & {
-    component?: ButtonComponent | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
-export default IconButton;
+import { ReactNode } from 'react';
+import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
+import { ButtonComponent, ButtonPropsBase } from './typings';
+export type IconButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, Omit<ButtonPropsBase, 'prefix' | 'suffix'> & {
+    /**
+     * The icon element.
+     */
+    children?: ReactNode;
+}>;
+/**
+ * The react component for `mezzanine` button only has icon.
+ */
+declare const IconButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, "color" | "danger" | "disabled" | "loading" | "size" | "variant" | "children"> & Omit<ButtonPropsBase, "prefix" | "suffix"> & {
+    /**
+     * The icon element.
+     */
+    children?: ReactNode;
+}, "component"> & {
+    component?: ButtonComponent | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export default IconButton;

package/Button/IconButton.js

@@ -2,13 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import Button from './Button.js';
 
-/**
- * The react component for `mezzanine` button only has icon.
- */
-const IconButton = forwardRef(function IconButton(props, ref) {
-    const { children, ...rest } = props;
-    return (jsx(Button, { ...rest, ref: ref, prefix: children }));
-});
+/**
+ * The react component for `mezzanine` button only has icon.
+ */
+const IconButton = forwardRef(function IconButton(props, ref) {
+    const { children, ...rest } = props;
+    return (jsx(Button, { ...rest, ref: ref, prefix: children }));
+});
 var _IconButton = IconButton;
 
 export { _IconButton as default };

package/Button/index.d.ts

@@ -1,20 +1,20 @@
-import { ElementRef, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import { ButtonComponent, ButtonPropsBase } from './typings';
-import { ButtonProps } from './Button';
-import { IconButtonProps } from './IconButton';
-export type { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
-export { ButtonGroupChild, ButtonGroupProps, default as ButtonGroup } from './ButtonGroup';
-export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps, };
-/**
- * @remark
- * Add type alias here for parsable to react docgen typescript.
- */
-declare type GenericIconButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<IconButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
-export declare const IconButton: GenericIconButton;
-/**
- * @remark
- * Add type alias here for parsable to react docgen typescript.
- */
-declare type GenericButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<ButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
-declare const _default: GenericButton;
-export default _default;
+import { ElementRef, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import { ButtonComponent, ButtonPropsBase } from './typings';
+import { ButtonProps } from './Button';
+import { IconButtonProps } from './IconButton';
+export type { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
+export { ButtonGroupChild, ButtonGroupProps, default as ButtonGroup } from './ButtonGroup';
+export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps, };
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+type GenericIconButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<IconButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+export declare const IconButton: GenericIconButton;
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+type GenericButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<ButtonProps<C>> & RefAttributes<ElementRef<C>>) => ReactElement;
+declare const _default: GenericButton;
+export default _default;

package/Button/index.js

@@ -1,8 +1,7 @@
 import Button from './Button.js';
-export { default } from './Button.js';
 import _IconButton from './IconButton.js';
 export { default as ButtonGroup } from './ButtonGroup.js';
 
 const IconButton = _IconButton;
 
-export { IconButton };
+export { IconButton, Button as default };

package/Button/typings.d.ts

@@ -1,44 +1,44 @@
-import { JSXElementConstructor, ReactNode } from 'react';
-import { ButtonColor, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
-export declare type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
-export interface ButtonPropsBase {
-    /**
-     * The color name provided by palette.
-     * @default 'primary'
-     */
-    color?: ButtonColor;
-    /**
-     * If true, will use error color instead of color from props.
-     * @default false
-     */
-    danger?: boolean;
-    /**
-     * If true, button will be disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If true, replace the original icon.
-     * Replace suffix if only suffix provided, or prefix.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * The element placed on the start of button.
-     */
-    prefix?: ReactNode;
-    /**
-     * The size of button.
-     * @default 'medium'
-     */
-    size?: ButtonSize;
-    /**
-     * The element placed on the end of button.
-     */
-    suffix?: ReactNode;
-    /**
-     * The variant of button.
-     * @default 'text'
-     */
-    variant?: ButtonVariant;
-}
+import { JSXElementConstructor, ReactNode } from 'react';
+import { ButtonColor, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+export type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
+export interface ButtonPropsBase {
+    /**
+     * The color name provided by palette.
+     * @default 'primary'
+     */
+    color?: ButtonColor;
+    /**
+     * If true, will use error color instead of color from props.
+     * @default false
+     */
+    danger?: boolean;
+    /**
+     * If true, button will be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, replace the original icon.
+     * Replace suffix if only suffix provided, or prefix.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The element placed on the start of button.
+     */
+    prefix?: ReactNode;
+    /**
+     * The size of button.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * The element placed on the end of button.
+     */
+    suffix?: ReactNode;
+    /**
+     * The variant of button.
+     * @default 'text'
+     */
+    variant?: ButtonVariant;
+}