@mezzanine-ui/react 0.6.4

package/Form/useAutoCompleteValueControl.js

@@ -0,0 +1,58 @@
+import { useState, useCallback } from 'react';
+import { useControlValueState } from './useControlValueState.js';
+
+const equalityFn = (a, b) => a === b;
+function useAutoCompleteValueControl(props) {
+    const { defaultValue = '', disabledOptionsFilter, onChange, onClear: onClearProp, onClose, options: optionsProp, value: valueProp, } = props;
+    const [value, setValue] = useControlValueState({
+        defaultValue,
+        equalityFn,
+        value: valueProp,
+    });
+    const [searchText, setSearchText] = useState('');
+    const [focused, setFocused] = useState(false);
+    const onFocus = useCallback((focus) => {
+        setFocused(focus);
+        /** sync current value */
+        if (!focus) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        }
+    }, [
+        value,
+        onChange,
+    ]);
+    const getCurrentInputValue = () => (value ? [{
+            id: value,
+            name: value,
+        }] : []);
+    const options = disabledOptionsFilter
+        ? optionsProp
+        : optionsProp.filter((option) => ~option.search(searchText));
+    return {
+        focused,
+        onChange: (chooseOption) => {
+            if (!chooseOption)
+                return [];
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+            setValue(chooseOption.name);
+            onChange === null || onChange === void 0 ? void 0 : onChange(chooseOption.name);
+            return [chooseOption];
+        },
+        onClear: (e) => {
+            e.stopPropagation();
+            setValue('');
+            setSearchText('');
+            if (typeof onClearProp === 'function') {
+                onClearProp(e);
+            }
+        },
+        onFocus,
+        options,
+        searchText,
+        setSearchText,
+        setValue,
+        value: getCurrentInputValue(),
+    };
+}
+
+export { useAutoCompleteValueControl };

package/Form/useCheckboxControlValue.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEventHandler } from 'react';
+import { UseSwitchControlValueProps } from './useSwitchControlValue';
+export interface CheckboxGroupControlContextValue {
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    value?: string[];
+}
+export interface UseCheckboxControlValueProps extends UseSwitchControlValueProps {
+    checkboxGroup?: CheckboxGroupControlContextValue;
+    value?: string;
+}
+export declare function useCheckboxControlValue(props: UseCheckboxControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useCheckboxControlValue.js

@@ -0,0 +1,29 @@
+import { useSwitchControlValue } from './useSwitchControlValue.js';
+
+function useCheckboxControlValue(props) {
+    const { checkboxGroup, checked: checkedProp, defaultChecked, onChange: onChangeProp, value, } = props;
+    const { onChange: onChangeFromGroup } = checkboxGroup || {};
+    const [checked, setChecked] = useSwitchControlValue({
+        /**
+         * To ensure checkbox inside checkbox group, not use destructure here
+         */
+        // eslint-disable-next-line no-nested-ternary
+        checked: checkboxGroup
+            ? checkboxGroup.value && value != null
+                ? checkboxGroup.value.includes(value)
+                : false
+            : checkedProp,
+        defaultChecked,
+        onChange: (event) => {
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+            if (onChangeFromGroup) {
+                onChangeFromGroup(event);
+            }
+        },
+    });
+    return [checked, setChecked];
+}
+
+export { useCheckboxControlValue };

package/Form/useControlValueState.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface UseControlValueStateProps<V> {
+    defaultValue: V;
+    equalityFn?: (a: V, b: V) => boolean;
+    value?: V;
+}
+export declare function useControlValueState<V>(props: UseControlValueStateProps<V>): readonly [V, import("react").Dispatch<import("react").SetStateAction<V>>, (a: V, b: V) => boolean];

package/Form/useControlValueState.js

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+function useControlValueState(props) {
+    const { defaultValue, equalityFn = (a, b) => a === b, value: valueProp, } = props;
+    const [value, setValue] = useState(() => (typeof valueProp !== 'undefined' ? valueProp : defaultValue));
+    /**
+     * To sync value while changed from uncontrolled to controlled.
+     */
+    if (typeof valueProp !== 'undefined' && !equalityFn(valueProp, value)) {
+        setValue(valueProp);
+    }
+    return [value, setValue, equalityFn];
+}
+
+export { useControlValueState };

package/Form/useCustomControlValue.d.ts

@@ -0,0 +1,5 @@
+import { UseControlValueStateProps } from './useControlValueState';
+export interface UseCustomControlValueProps<V> extends UseControlValueStateProps<V> {
+    onChange?: (value: V) => void;
+}
+export declare function useCustomControlValue<V>(props: UseCustomControlValueProps<V>): readonly [V, (nextValue: V) => void, (a: V, b: V) => boolean];

package/Form/useCustomControlValue.js

@@ -0,0 +1,18 @@
+import { useLastCallback } from '../hooks/useLastCallback.js';
+import { useControlValueState } from './useControlValueState.js';
+
+function useCustomControlValue(props) {
+    const { onChange: onChangeProp } = props;
+    const [value, setValue, equalityFn] = useControlValueState(props);
+    const onChange = useLastCallback((nextValue) => {
+        if (!equalityFn(value, nextValue)) {
+            setValue(nextValue);
+            if (onChangeProp) {
+                onChangeProp(nextValue);
+            }
+        }
+    });
+    return [value, onChange, equalityFn];
+}
+
+export { useCustomControlValue };

package/Form/useInputControlValue.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEventHandler } from 'react';
+import { UseControlValueStateProps } from './useControlValueState';
+export interface UseInputControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends Omit<UseControlValueStateProps<string>, 'defaultValue' | 'equalityFn'> {
+    defaultValue?: string;
+    onChange?: ChangeEventHandler<E>;
+}
+export declare function useInputControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputControlValueProps<E>): readonly [string, (event: import("react").ChangeEvent<E>) => void];

package/Form/useInputControlValue.js

@@ -0,0 +1,24 @@
+import { useLastCallback } from '../hooks/useLastCallback.js';
+import { useControlValueState } from './useControlValueState.js';
+
+const equalityFn = (a, b) => a === b;
+function useInputControlValue(props) {
+    const { defaultValue = '', onChange: onChangeProp, value: valueProp, } = props;
+    const [value, setValue] = useControlValueState({
+        defaultValue,
+        equalityFn,
+        value: valueProp,
+    });
+    const onChange = useLastCallback((event) => {
+        const nextValue = event.target.value;
+        if (!equalityFn(value, nextValue)) {
+            setValue(nextValue);
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+        }
+    });
+    return [value, onChange];
+}
+
+export { useInputControlValue };

package/Form/useInputWithClearControlValue.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEvent, MouseEvent, RefObject } from 'react';
+import { UseInputControlValueProps } from './useInputControlValue';
+export interface UseInputWithClearControlValueProps<E extends HTMLInputElement | HTMLTextAreaElement> extends UseInputControlValueProps<E> {
+    ref: RefObject<E>;
+}
+export declare function useInputWithClearControlValue<E extends HTMLInputElement | HTMLTextAreaElement>(props: UseInputWithClearControlValueProps<E>): readonly [string, (event: ChangeEvent<E>) => void, (event: MouseEvent) => void];

package/Form/useInputWithClearControlValue.js

@@ -0,0 +1,33 @@
+import { useInputControlValue } from './useInputControlValue.js';
+
+function useInputWithClearControlValue(props) {
+    const { defaultValue, onChange: onChangeProp, ref, value: valueProp, } = props;
+    const [value, onChange] = useInputControlValue({
+        defaultValue,
+        onChange: onChangeProp,
+        value: valueProp,
+    });
+    const onClear = (event) => {
+        const target = ref.current;
+        if (target) {
+            const changeEvent = Object.create(event);
+            const originalValue = target.value;
+            changeEvent.target = target;
+            changeEvent.currentTarget = target;
+            /**
+             * Change target ref value cause e.target.value should be '' when clear input
+             * And then reset ref value
+             */
+            target.value = '';
+            onChange(changeEvent);
+            target.value = originalValue;
+        }
+    };
+    return [
+        value,
+        onChange,
+        onClear,
+    ];
+}
+
+export { useInputWithClearControlValue };

package/Form/useRadioControlValue.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEventHandler } from 'react';
+import { UseSwitchControlValueProps } from './useSwitchControlValue';
+export interface RadioGroupControlContextValue {
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    value?: string;
+}
+export interface UseRadioControlValueProps extends UseSwitchControlValueProps {
+    radioGroup?: RadioGroupControlContextValue;
+    value?: string;
+}
+export declare function useRadioControlValue(props: UseRadioControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useRadioControlValue.js

@@ -0,0 +1,24 @@
+import { useSwitchControlValue } from './useSwitchControlValue.js';
+
+function useRadioControlValue(props) {
+    const { checked: checkedProp, defaultChecked, onChange: onChangeProp, radioGroup, value, } = props;
+    const { onChange: onChangeFromGroup } = radioGroup || {};
+    const [checked, setChecked] = useSwitchControlValue({
+        /**
+         * To ensure radio inside radio group, not use destructure here
+         */
+        checked: radioGroup ? radioGroup.value === value : checkedProp,
+        defaultChecked,
+        onChange: (event) => {
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+            if (onChangeFromGroup) {
+                onChangeFromGroup(event);
+            }
+        },
+    });
+    return [checked, setChecked];
+}
+
+export { useRadioControlValue };

package/Form/useSelectValueControl.d.ts

@@ -0,0 +1,16 @@
+import { MouseEvent } from 'react';
+import { SelectValue } from '../Select/typings';
+export interface UseSelectValueControl {
+    defaultValue?: SelectValue[];
+    mode: string;
+    onChange?(newOptions: SelectValue[]): any;
+    onClear?(e: MouseEvent<Element>): void;
+    onClose?(): void;
+    value?: SelectValue[];
+}
+export interface SelectValueControl {
+    onChange: (v: SelectValue | null) => SelectValue[];
+    onClear(e: MouseEvent<Element>): void;
+    value: SelectValue[];
+}
+export declare function useSelectValueControl(props: UseSelectValueControl): SelectValueControl;

package/Form/useSelectValueControl.js

@@ -0,0 +1,59 @@
+import intersectionBy from 'lodash/intersectionBy';
+import { useControlValueState } from './useControlValueState.js';
+
+const equalityFn = (a, b) => (a.length === b.length && intersectionBy(a, b, 'id').length === a.length);
+function useSelectValueControl(props) {
+    const { defaultValue, mode, onChange, onClear: onClearProp, onClose, value: valueProp, } = props;
+    const [value, setValue] = useControlValueState({
+        defaultValue: defaultValue || [],
+        equalityFn,
+        value: valueProp,
+    });
+    return {
+        value,
+        onChange: (chooseOption) => {
+            if (!chooseOption)
+                return [];
+            let newValue = [];
+            switch (mode) {
+                case 'single': {
+                    newValue = [chooseOption];
+                    if (typeof onClose === 'function') {
+                        /** single selection should close modal when clicked */
+                        onClose();
+                    }
+                    break;
+                }
+                case 'multiple': {
+                    const existedValueIdx = (value !== null && value !== void 0 ? value : []).findIndex((v) => v.id === chooseOption.id);
+                    if (~existedValueIdx) {
+                        newValue = [
+                            ...value.slice(0, existedValueIdx),
+                            ...value.slice(existedValueIdx + 1),
+                        ];
+                    }
+                    else {
+                        newValue = [
+                            ...value,
+                            chooseOption,
+                        ];
+                    }
+                    break;
+                }
+            }
+            setValue(newValue);
+            if (typeof onChange === 'function')
+                onChange(newValue);
+            return newValue;
+        },
+        onClear: (e) => {
+            e.stopPropagation();
+            setValue([]);
+            if (typeof onClearProp === 'function') {
+                onClearProp(e);
+            }
+        },
+    };
+}
+
+export { useSelectValueControl };

package/Form/useSwitchControlValue.d.ts

@@ -0,0 +1,7 @@
+import { ChangeEventHandler } from 'react';
+export interface UseSwitchControlValueProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare function useSwitchControlValue(props: UseSwitchControlValueProps): readonly [boolean, (event: import("react").ChangeEvent<HTMLInputElement>) => void];

package/Form/useSwitchControlValue.js

@@ -0,0 +1,24 @@
+import { useLastCallback } from '../hooks/useLastCallback.js';
+import { useControlValueState } from './useControlValueState.js';
+
+const equalityFn = (a, b) => a === b;
+function useSwitchControlValue(props) {
+    const { checked: checkedProp, defaultChecked = false, onChange: onChangeProp, } = props;
+    const [checked, setChecked] = useControlValueState({
+        defaultValue: defaultChecked,
+        equalityFn,
+        value: checkedProp,
+    });
+    const onChange = useLastCallback((event) => {
+        const nextChecked = event.target.checked;
+        if (!equalityFn(checked, nextChecked)) {
+            setChecked(nextChecked);
+            if (onChangeProp) {
+                onChangeProp(event);
+            }
+        }
+    });
+    return [checked, onChange];
+}
+
+export { useSwitchControlValue };

package/Icon/Icon.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { IconColor } from '@mezzanine-ui/core/icon';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
+    /**
+     * Color name provided by palette.
+     */
+    color?: IconColor;
+    /**
+     * The icon provided by `@mezzanine-ui/icons` package.
+     */
+    icon: IconDefinition;
+    /**
+     * Whether to spin the icon or not.
+     * @default false
+     */
+    spin?: boolean;
+}
+/**
+ * The react component for `mezzanine` icon.
+ */
+declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLElement>>;
+export default Icon;

package/Icon/Icon.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { toIconCssVars, iconClasses } from '@mezzanine-ui/core/icon';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` icon.
+ */
+const Icon = forwardRef(function Icon(props, ref) {
+    const { className, color, icon, spin = false, style: styleProp, ...rest } = props;
+    const { definition } = icon;
+    const cssVars = toIconCssVars({ color });
+    const style = {
+        ...cssVars,
+        ...styleProp,
+    };
+    return (jsx("i", Object.assign({}, rest, { ref: ref, "aria-hidden": true, className: cx(iconClasses.host, {
+            [iconClasses.color]: color,
+            [iconClasses.spin]: spin,
+        }, className), "data-icon-name": icon.name, style: style }, { children: jsx("svg", Object.assign({}, definition.svg, { focusable: false }, { children: jsx("path", Object.assign({}, definition.path), void 0) }), void 0) }), void 0));
+});
+
+export default Icon;

package/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export type { IconColor, } from '@mezzanine-ui/core/icon';
+export type { IconProps } from './Icon';
+export { default } from './Icon';

package/Icon/index.js

@@ -0,0 +1 @@
+export { default } from './Icon.js';

package/Input/Input.d.ts

@@ -0,0 +1,50 @@
+import { Ref, ChangeEventHandler } from 'react';
+import { InputSize } from '@mezzanine-ui/core/input';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TextFieldProps } from '../TextField';
+export interface InputProps extends Omit<TextFieldProps, 'active' | 'children' | 'onClear' | 'onKeyDown'> {
+    /**
+     * The default value of input.
+     */
+    defaultValue?: string;
+    /**
+     * The react ref passed to input element.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * The other native props for input element.
+     */
+    inputProps?: Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'defaultValue' | 'disabled' | 'onChange' | 'placeholder' | 'readOnly' | 'required' | 'value' | `aria-${'disabled' | 'multiline' | 'readonly' | 'required'}`>;
+    /**
+     * The change event handler of input element.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The placeholder of input.
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * The size of input.
+     * @default 'medium'
+     */
+    size?: InputSize;
+    /**
+     * The value of input.
+     */
+    value?: string;
+}
+/**
+ * The react component for `mezzanine` input.
+ */
+declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Input;

package/Input/Input.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useRef } from 'react';
+import { inputClasses } from '@mezzanine-ui/core/input';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
+import { FormControlContext } from '../Form/FormControlContext.js';
+import TextField from '../TextField/TextField.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` input.
+ */
+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 inputRef = useRef(null);
+    const [value, onChange, onClear,] = useInputWithClearControlValue({
+        defaultValue,
+        onChange: onChangeProp,
+        ref: inputRef,
+        value: valueProp,
+    });
+    const composedInputRef = useComposeRefs([inputRefProp, inputRef]);
+    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));
+});
+
+export default Input;

package/Input/index.d.ts

@@ -0,0 +1,2 @@
+export type { InputSize, } from '@mezzanine-ui/core/input';
+export { InputProps, default } from './Input';

package/Input/index.js

@@ -0,0 +1 @@
+export { default } from './Input.js';

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Mezzanine-UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Loading/Loading.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { IconProps } from '../Icon';
+import { OverlayProps } from '../Overlay';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface LoadingProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * When set stretch=true, host container will stretch to width & height 100%
+     * @default false
+     */
+    stretch?: boolean;
+    /**
+     * Custom icon props
+     */
+    iconProps?: Omit<IconProps, 'icon' | 'spin'>;
+    /**
+     * Whether Loading is loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Custom overlay props (only display when nested children)
+     */
+    overlayProps?: Omit<OverlayProps, 'container' | 'open'>;
+    /**
+     * Customize description content
+     */
+    tip?: string;
+    /**
+     * Customize description content className
+     */
+    tipClassName?: string;
+}
+declare const Loading: import("react").ForwardRefExoticComponent<LoadingProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Loading;

package/Loading/Loading.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { SpinnerIcon } from '@mezzanine-ui/icons';
+import { iconClasses } from '@mezzanine-ui/core/loading';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Icon from '../Icon/Icon.js';
+import Overlay from '../Overlay/Overlay.js';
+import cx from 'clsx';
+
+const Loading = forwardRef(function Loading(props, ref) {
+    const hostRef = useRef(null);
+    const { children, className, stretch = false, iconProps = {}, loading = false, overlayProps = {}, tip, tipClassName, } = props;
+    const { className: iconClassName, color: iconColor, ...iconPropsRest } = iconProps;
+    const isNestedPattern = typeof children !== 'undefined';
+    const composedHostRef = useComposeRefs([ref, hostRef]);
+    const spinElement = loading ? (jsxs("div", Object.assign({ ref: isNestedPattern ? null : ref, className: cx(iconClasses.spin, {
+            [iconClasses.stretch]: stretch,
+        }) }, { children: [jsx(Icon, Object.assign({}, iconPropsRest, { className: cx(iconClasses.icon, iconClassName), color: iconColor || 'primary', icon: SpinnerIcon, spin: true }), void 0),
+            tip ? (jsx("span", Object.assign({ className: cx(iconClasses.tip, tipClassName) }, { children: tip }), void 0)) : null] }), void 0)) : null;
+    if (isNestedPattern) {
+        return (jsxs("div", Object.assign({ ref: composedHostRef, className: cx(iconClasses.host, {
+                [iconClasses.stretch]: stretch,
+            }, className) }, { children: [jsx(Overlay, Object.assign({}, overlayProps, { container: hostRef, onSurface: true, open: loading }, { children: spinElement }), void 0), children] }), void 0));
+    }
+    return spinElement;
+});
+
+export default Loading;

package/Loading/index.d.ts

@@ -0,0 +1 @@
+export { LoadingProps, default, } from './Loading';

package/Loading/index.js

@@ -0,0 +1 @@
+export { default } from './Loading.js';

package/Menu/Menu.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { MenuSize } from '@mezzanine-ui/core/menu';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface MenuProps extends NativeElementPropsWithoutKeyAndRef<'ul'> {
+    /**
+     * The minimum items count in scroll container.
+     * @default 4;
+     */
+    itemsInView?: number;
+    /**
+     * The custom menu max height.
+     */
+    maxHeight?: number;
+    /**
+     * The role of menu.
+     * @default 'menu'
+     */
+    role?: string;
+    /**
+     * The size of menu.
+     * @default 'medium'
+     */
+    size?: MenuSize;
+}
+/**
+ * The react component for `mezzanine` menu.
+ */
+declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<HTMLUListElement>>;
+export default Menu;