@mezzanine-ui/react 0.10.1 → 0.10.2

package/Button/Button.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { SpinnerIcon } from '@mezzanine-ui/icons';
 import { buttonClasses } from '@mezzanine-ui/core/button';
+import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -9,7 +10,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` button.
  */
 const Button = forwardRef(function Button(props, ref) {
-    const { children, className, color = 'primary', component: Component = 'button', danger = false, disabled = false, loading = false, onClick, prefix: prefixProp, size = 'medium', suffix: suffixProp, variant = 'text', ...rest } = props;
+    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) {

package/Button/ButtonGroup.js

@@ -1,13 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, Children, cloneElement } from 'react';
+import { forwardRef, useContext, Children, cloneElement } from 'react';
 import { toButtonGroupCssVars, buttonGroupClasses } from '@mezzanine-ui/core/button';
+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 { attached = false, children, className, color = 'primary', danger = false, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = 'medium', spacing, style: styleProp, variant = 'text', ...rest } = props;
+    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,

package/Checkbox/Checkbox.js

@@ -3,6 +3,7 @@ import { forwardRef, useContext } from 'react';
 import { checkboxClasses } from '@mezzanine-ui/core/checkbox';
 import { useCheckboxControlValue } from '../Form/useCheckboxControlValue.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
+import { MezzanineConfig } from '../Provider/context.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import InputCheck from '../_internal/InputCheck/InputCheck.js';
 import cx from 'clsx';
@@ -11,10 +12,11 @@ import cx from 'clsx';
  * The react component for `mezzanine` checkbox.
  */
 const Checkbox = forwardRef(function Checkbox(props, ref) {
+    const { size: globalSize, } = useContext(MezzanineConfig);
     const { disabled: disabledFromFormControl, severity, } = useContext(FormControlContext) || {};
     const checkboxGroup = useContext(CheckboxGroupContext);
     const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = checkboxGroup || {};
-    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, indeterminate: indeterminateProp = false, onChange: onChangeProp, size = sizeFromGroup || 'medium', value, inputProps, ...rest } = props;
+    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, indeterminate: indeterminateProp = false, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, inputProps, ...rest } = props;
     const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
     const [checked, onChange] = useCheckboxControlValue({
         checkboxGroup,

package/Checkbox/CheckboxGroup.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, createElement } from 'react';
+import { forwardRef, useMemo, createElement } from 'react';
 import { useControlValueState } from '../Form/useControlValueState.js';
 import { CheckboxGroupContext } from './CheckboxGroupContext.js';
 import Checkbox from './Checkbox.js';
@@ -15,7 +15,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
         defaultValue,
         value: valueProp,
     });
-    const context = {
+    const context = useMemo(() => ({
         disabled,
         name,
         onChange(event) {
@@ -28,7 +28,7 @@ const CheckboxGroup = forwardRef(function CheckboxGroup(props, ref) {
         },
         size,
         value,
-    };
+    }), [disabled, name, value, size, onChange, setValue]);
     const children = childrenProp || options.map(renderOption);
     return (jsx(CheckboxGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, children: children }) }));
 });

package/Dropdown/Dropdown.d.ts

@@ -2,7 +2,7 @@ import { DetailedHTMLProps, HTMLAttributes, ReactNode, Ref } from 'react';
 import { PopperProps } from '../Popper';
 import { ClickAwayEvent } from '../hooks/useClickAway';
 export interface DropdownProps extends Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'children'> {
-    children: (ref: Ref<HTMLElement>) => ReactNode;
+    children: (ref: Ref<any>) => ReactNode;
     /**
      * Whether to disable triggering onClose while clicked away.
      * @default false

package/Icon/Icon.d.ts

@@ -20,6 +20,10 @@ export interface IconProps extends NativeElementPropsWithoutKeyAndRef<'i'> {
      * @default false
      */
     spin?: boolean;
+    /**
+     * Icon accessible title
+     */
+    title?: string;
 }
 /**
  * The react component for `mezzanine` icon.

package/Icon/Icon.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { toIconCssVars, iconClasses } from '@mezzanine-ui/core/icon';
 import cx from 'clsx';
@@ -7,7 +7,7 @@ import cx from 'clsx';
  * The react component for `mezzanine` icon.
  */
 const Icon = forwardRef(function Icon(props, ref) {
-    const { className, color, icon, size, spin = false, style: styleProp, ...rest } = props;
+    const { className, color, icon, size, spin = false, style: styleProp, title, ...rest } = props;
     const { definition } = icon;
     const cssVars = toIconCssVars({ color, size });
     const style = {
@@ -15,11 +15,11 @@ const Icon = forwardRef(function Icon(props, ref) {
         ...cssVars,
         ...styleProp,
     };
-    return (jsx("i", { ...rest, ref: ref, "aria-hidden": true, className: cx(iconClasses.host, {
+    return (jsx("i", { ...rest, ref: ref, className: cx(iconClasses.host, {
             [iconClasses.color]: color,
             [iconClasses.spin]: spin,
             [iconClasses.size]: size,
-        }, className), "data-icon-name": icon.name, style: style, children: jsx("svg", { ...definition.svg, focusable: false, children: jsx("path", { ...definition.path }) }) }));
+        }, className), "data-icon-name": icon.name, style: style, children: jsxs("svg", { ...definition.svg, focusable: false, children: [title || definition.title ? (jsx("title", { children: title || definition.title })) : null, jsx("path", { ...definition.path })] }) }));
 });
 var Icon$1 = Icon;
 

package/Input/Input.js

@@ -5,6 +5,7 @@ import { selectClasses } from '@mezzanine-ui/core/select';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import { useInputWithClearControlValue } from '../Form/useInputWithClearControlValue.js';
 import { useInputWithTagsModeValue } from '../Form/useInputWithTagsModeValue.js';
+import { MezzanineConfig } from '../Provider/context.js';
 import TextField from '../TextField/TextField.js';
 import Tag from '../Tag/Tag.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
@@ -14,8 +15,9 @@ import cx from 'clsx';
  * The react component for `mezzanine` input.
  */
 const Input = forwardRef(function Input(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, inputProps, inputRef: inputRefProp, mode = 'default', onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = 'medium', suffix, tagsProps, value: valueProp, } = props;
+    const { className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef: inputRefProp, mode = 'default', onChange: onChangeProp, placeholder, prefix, readOnly = false, required = requiredFromFormControl || false, size = globalSize, suffix, tagsProps, value: valueProp, } = props;
     const { initialTagsValue, inputPosition = 'bottom', maxTagsLength, onTagsChange, } = tagsProps || {};
     const tagsMode = mode === 'tags';
     const inputRef = useRef(null);

package/Menu/Menu.js

@@ -1,13 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { toMenuCssVars, menuClasses } from '@mezzanine-ui/core/menu';
+import { MezzanineConfig } from '../Provider/context.js';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` menu.
  */
 const Menu = forwardRef(function Menu(props, ref) {
-    const { children, className, itemsInView = 4, maxHeight, role = 'menu', size = 'medium', style: styleProp, ...rest } = props;
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { children, className, itemsInView = 4, maxHeight, role = 'menu', size = globalSize, style: styleProp, ...rest } = props;
     const cssVars = toMenuCssVars({
         itemsInView,
         maxHeight,

package/Modal/Modal.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { modalClasses } from '@mezzanine-ui/core/modal';
 import { TimesIcon } from '@mezzanine-ui/icons';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { ModalControlContext } from './ModalControl.js';
 import useModalContainer from './useModalContainer.js';
 import Icon from '../Icon/Icon.js';
@@ -12,10 +12,10 @@ import cx from 'clsx';
  */
 const Modal = forwardRef(function Modal(props, ref) {
     const { children, className, container, disableCloseOnBackdropClick = false, disableCloseOnEscapeKeyDown = false, disablePortal = false, fullScreen = false, hideBackdrop = false, hideCloseIcon = false, invisibleBackdrop = false, loading = false, onBackdropClick, onClose, open, severity = 'info', size = 'medium', ...rest } = props;
-    const modalControl = {
+    const modalControl = useMemo(() => ({
         loading,
         severity,
-    };
+    }), [loading, severity]);
     const { Container: ModalContainer } = useModalContainer();
     return (jsx(ModalControlContext.Provider, { value: modalControl, children: jsx(ModalContainer, { className: modalClasses.overlay, container: container, direction: "down", disableCloseOnBackdropClick: disableCloseOnBackdropClick, disableCloseOnEscapeKeyDown: disableCloseOnEscapeKeyDown, disablePortal: disablePortal, hideBackdrop: hideBackdrop, invisibleBackdrop: invisibleBackdrop, onBackdropClick: onBackdropClick, onClose: onClose, open: open, ref: ref, children: jsxs("div", { ...rest, className: cx(modalClasses.host, modalClasses.severity(severity), modalClasses.size(size), {
                     [modalClasses.fullScreen]: fullScreen,

package/Progress/Progress.js

@@ -1,8 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { ProgressStatuses, ProgressTypes, progressClasses } from '@mezzanine-ui/core/progress';
 import { CheckCircleFilledIcon, CheckIcon, TimesCircleFilledIcon, TimesIcon } from '@mezzanine-ui/icons';
 import Typography from '../Typography/Typography.js';
+import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -10,7 +11,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` progress.
  */
 const Progress = forwardRef(function Progress(props, ref) {
-    const { circleProps, className, errorIconProps, percent = 0, percentProps, showInfo = true, size = 'medium', status = percent < 100 ? ProgressStatuses.normal : ProgressStatuses.success, successIconProps, type = ProgressTypes.line, ...rest } = props;
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { circleProps, className, errorIconProps, percent = 0, percentProps, showInfo = true, size = globalSize, status = percent < 100 ? ProgressStatuses.normal : ProgressStatuses.success, successIconProps, type = ProgressTypes.line, ...rest } = props;
     const percentLimited = Math.max(0, Math.min(100, percent));
     const defaultSuccessIcon = type === ProgressTypes.line ? CheckCircleFilledIcon : CheckIcon;
     const defaultErrorIcon = type === ProgressTypes.line ? TimesCircleFilledIcon : TimesIcon;

package/Provider/ConfigProvider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { MezzanineConfigContext } from './context';
+export interface ConfigProviderProps {
+    children?: ReactNode;
+    size?: MezzanineConfigContext['size'];
+}
+declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
+export default ConfigProvider;

package/Provider/ConfigProvider.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { MezzanineConfig } from './context.js';
+
+function ConfigProvider(props) {
+    const { children, size, } = props;
+    const context = useMemo(() => ({
+        size: size || 'medium',
+    }), [size]);
+    return (jsx(MezzanineConfig.Provider, { value: context, children: children }));
+}
+
+export { ConfigProvider as default };

package/Provider/context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Size } from '@mezzanine-ui/system/size';
+export interface MezzanineConfigContext {
+    size: Size;
+}
+export declare const MezzanineConfig: import("react").Context<MezzanineConfigContext>;

package/Provider/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const MezzanineConfig = createContext({
+    size: 'medium',
+});
+
+export { MezzanineConfig };

package/Provider/index.d.ts

@@ -0,0 +1,4 @@
+export { default, } from './ConfigProvider';
+export type { ConfigProviderProps, } from './ConfigProvider';
+export { MezzanineConfig, } from './context';
+export type { MezzanineConfigContext, } from './context';

package/Provider/index.js

@@ -0,0 +1,2 @@
+export { default } from './ConfigProvider.js';
+export { MezzanineConfig } from './context.js';

package/Radio/Radio.js

@@ -3,6 +3,7 @@ import { forwardRef, useContext } from 'react';
 import { radioClasses } from '@mezzanine-ui/core/radio';
 import { useRadioControlValue } from '../Form/useRadioControlValue.js';
 import { RadioGroupContext } from './RadioGroupContext.js';
+import { MezzanineConfig } from '../Provider/context.js';
 import InputCheck from '../_internal/InputCheck/InputCheck.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
@@ -11,10 +12,11 @@ import cx from 'clsx';
  * The react component for `mezzanine` radio.
  */
 const Radio = forwardRef(function Radio(props, ref) {
+    const { size: globalSize, } = useContext(MezzanineConfig);
     const { disabled: disabledFromFormControl, severity, } = useContext(FormControlContext) || {};
     const radioGroup = useContext(RadioGroupContext);
     const { disabled: disabledFromGroup, name: nameFromGroup, size: sizeFromGroup, } = radioGroup || {};
-    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, inputProps, onChange: onChangeProp, size = sizeFromGroup || 'medium', value, ...rest } = props;
+    const { checked: checkedProp, children, defaultChecked, disabled = (disabledFromGroup !== null && disabledFromGroup !== void 0 ? disabledFromGroup : disabledFromFormControl) || false, error = severity === 'error' || false, inputProps, onChange: onChangeProp, size = sizeFromGroup || globalSize, value, ...rest } = props;
     const { id: inputId, name = nameFromGroup, ...restInputProps } = inputProps || {};
     const [checked, onChange] = useRadioControlValue({
         checked: checkedProp,

package/Radio/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useInputControlValue } from '../Form/useInputControlValue.js';
 import { RadioGroupContext } from './RadioGroupContext.js';
 import Radio from './Radio.js';
@@ -15,13 +15,13 @@ const RadioGroup = forwardRef(function RadioGroup(props, ref) {
         onChange: onChangeProp,
         value: valueProp,
     });
-    const context = {
+    const context = useMemo(() => ({
         disabled,
         name,
         onChange,
         size,
         value,
-    };
+    }), [disabled, name, onChange, size, value]);
     const children = childrenProp || options.map((option) => (jsx(Radio, { disabled: option.disabled, value: option.value, children: option.label }, option.value)));
     return (jsx(RadioGroupContext.Provider, { value: context, children: jsx(InputCheckGroup, { ...rest, ref: ref, role: "radiogroup", children: children }) }));
 });

package/Select/AutoComplete.d.ts

@@ -50,7 +50,6 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
     required?: boolean;
     /**
      * The size of input.
-     * @default 'medium'
      */
     size?: SelectInputSize;
 }

package/Select/AutoComplete.js

@@ -24,7 +24,7 @@ const MENU_ID = 'mzn-select-autocomplete-menu-id';
 const AutoComplete = forwardRef(function Select(props, ref) {
     var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize = 'medium', mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size = 'medium', value: valueProp, } = props;
+    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, size, value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
     const { focused, onFocus, onChange, onClear, options, searchText, selectedOptions, setSearchText, unselectedOptions, value, } = useAutoCompleteValueControl({
         defaultValue,

package/Select/Select.d.ts

@@ -32,7 +32,6 @@ export interface SelectBaseProps extends Omit<SelectTriggerProps, 'active' | 'in
     required?: boolean;
     /**
      * The size of input.
-     * @default 'medium'
      */
     size?: SelectInputSize;
 }

package/Select/Select.js

@@ -16,7 +16,7 @@ const MENU_ID = 'mzn-select-menu-id';
 const Select = forwardRef(function Select(props, ref) {
     var _a, _b;
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize = 'medium', mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size = 'medium', suffixActionIcon, value: valueProp, } = props;
+    const { children, className, clearable = false, defaultValue, disabled = disabledFromFormControl || false, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onClear: onClearProp, onFocus, placeholder = '', popperOptions = {}, prefix, renderValue, required = requiredFromFormControl || false, size, suffixActionIcon, value: valueProp, } = props;
     const [open, toggleOpen] = useState(false);
     const onOpen = () => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();

package/Select/SelectTriggerTags.js

@@ -8,7 +8,7 @@ import Tag from '../Tag/Tag.js';
 import cx from 'clsx';
 
 const SelectTriggerTags = forwardRef(function SelectTriggerTags(props, ref) {
-    const { disabled, ellipsis, inputProps, inputRef, onTagClose, readOnly, required, searchText, size = 'medium', showTextInputAfterTags, value, } = props;
+    const { disabled, ellipsis, inputProps, inputRef, onTagClose, readOnly, required, searchText, size, showTextInputAfterTags, value, } = props;
     const controlRef = useRef();
     const composedRef = useComposeRefs([ref, controlRef]);
     const { renderFakeTags, takeCount, } = useSelectTriggerTags({

package/Select/TreeSelect.js

@@ -14,7 +14,7 @@ import cx from 'clsx';
 
 const TreeSelect = forwardRef((props, ref) => {
     const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize = 'medium', mode = 'single', onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size = 'medium', suffixActionIcon, treeProps, value: valueProp, } = props;
+    const { className, clearable = false, defaultExpandAll, depth, disabled = disabledFromFormControl || false, disabledValues, error = severity === 'error' || false, expandControllerRef, fullWidth = fullWidthFromFormControl || false, inputProps, inputRef, itemsInView = 4, menuMaxHeight, menuProps, menuRole = 'listbox', menuSize, mode = 'single', onBlur, onChange: onChangeProp, onFocus, options, placeholder = '', popperOptions, prefix, renderValue, required = requiredFromFormControl || false, sameWidth = false, size, suffixActionIcon, treeProps, value: valueProp, } = props;
     const { className: treeClassName, ...restTreeProps } = treeProps || {};
     const { width, border, ...restStyle } = (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || {};
     const multiple = mode === 'multiple';

package/Tag/Tag.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { tagClasses } from '@mezzanine-ui/core/tag';
 import { TimesIcon } from '@mezzanine-ui/icons';
+import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -9,7 +10,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` tag.
  */
 const Tag = forwardRef(function Tag(props, ref) {
-    const { children, className, closable = false, disabled = false, onClose, size = 'medium', ...rest } = props;
+    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) => {

package/TextField/TextField.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, cloneElement } from 'react';
+import { forwardRef, useContext, cloneElement } from 'react';
 import { TimesIcon } from '@mezzanine-ui/icons';
 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 cx from 'clsx';
 
@@ -10,7 +11,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` input.
  */
 const TextField = forwardRef(function TextField(props, ref) {
-    const { active = false, children, className, clearable = false, disabled = false, error = false, fullWidth, onClear, onClick: onClickProps, onKeyDown: onKeyDownProps, prefix, role: roleProp, size = 'medium', suffix, suffixActionIcon, ...rest } = props;
+    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,

package/Textarea/Textarea.js

@@ -3,6 +3,7 @@ import { forwardRef, useContext, 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 TextField from '../TextField/TextField.js';
 import { FormControlContext } from '../Form/FormControlContext.js';
 import cx from 'clsx';
@@ -11,8 +12,9 @@ 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 = 'medium', textareaRef: textareaRefProp, textareaProps, value: valueProp, } = props;
+    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 textareaRef = useRef(null);
     const [value, onChange, onClear,] = useInputWithClearControlValue({
         defaultValue,

package/Tree/TreeNode.js

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { treeClasses } from '@mezzanine-ui/core/tree';
 import { CaretRightIcon } from '@mezzanine-ui/icons';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useContext, useMemo } from 'react';
 import Typography from '../Typography/Typography.js';
+import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
@@ -12,7 +13,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` tree node.
  */
 const TreeNode = forwardRef(function TreeNode(props, ref) {
-    const { children, className, disabled, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = 'medium', value, ...restRootProps } = props;
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { children, className, disabled, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
     const variant = useMemo(() => {
         if (size === 'small') {
             return 'input3';

package/Upload/UploadResult.d.ts

@@ -2,11 +2,30 @@ import { MouseEventHandler } from 'react';
 import { UploadResultSize, UploadResultStatus } from '@mezzanine-ui/core/upload';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface UploadResultProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The name to display
+     */
     name: string;
+    /**
+     * When 'x' icon is clicked, this callback will be fired.
+     */
     onDelete?: MouseEventHandler;
+    /**
+     * When 'download' icon is clicked, this callback will be fired.
+     */
     onDownload?: MouseEventHandler;
+    /**
+     * The progress percentage
+     */
     percentage?: number;
+    /**
+     * The result sizing
+     * @default 'medium'
+     */
     size?: UploadResultSize;
+    /**
+     * Indicate current result status
+     */
     status: UploadResultStatus;
 }
 /**

package/Upload/UploadResult.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
 import { toUploadResultCssVars, uploadResultClasses } from '@mezzanine-ui/core/upload';
 import { SpinnerIcon, DownloadIcon, TimesIcon } from '@mezzanine-ui/icons';
+import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -9,7 +10,8 @@ import cx from 'clsx';
  * The react component for `mezzanine` upload result.
  */
 const UploadResult = forwardRef(function UploadResult(props, ref) {
-    const { className, name, onDelete, onDownload, percentage, size = 'medium', status, style: styleProp, ...rest } = props;
+    const { size: globalSize, } = useContext(MezzanineConfig);
+    const { className, name, onDelete, onDownload, percentage, size = globalSize, status, style: styleProp, ...rest } = props;
     const done = status === 'done';
     const error = status === 'error';
     const loading = status === 'loading';

package/index.d.ts

@@ -97,3 +97,5 @@ export { TransitionProps, default as Transition, CollapseProps, Collapse, FadePr
 export { TooltipProps, default as Tooltip, } from './Tooltip';
 export { CalendarControlModifier, UseCalendarControlModifiersResult, useCalendarControlModifiers, useCalendarModeStack, useCalendarControls, CalendarConfigs, CalendarConfigProviderProps, CalendarContext, useCalendarContext, CalendarConfigProvider, CalendarYearsProps, CalendarYears, CalendarWeeksProps, CalendarWeeks, CalendarMonthsProps, CalendarMonths, CalendarDaysProps, CalendarDays, CalendarDayOfWeekProps, CalendarDayOfWeek, CalendarControlsProps, CalendarControls, CalendarCellProps, CalendarCell, CalendarProps, default as Calendar, } from './Calendar';
 export { TimePanelActionProps, TimePanelAction, TimePanelColumnProps, TimePanelColumn, TimePanelProps, default as TimePanel, } from './TimePanel';
+/** Context */
+export { MezzanineConfigContext, MezzanineConfig, ConfigProviderProps, default as ConfigProvider, } from './Provider';

package/index.js

@@ -25,6 +25,7 @@ export { IconButton } from './Button/index.js';
 export { default as Typography } from './Typography/Typography.js';
 export { default as useModalContainer } from './Modal/useModalContainer.js';
 export { default as Transition } from './Transition/Transition.js';
+export { default as ConfigProvider } from './Provider/ConfigProvider.js';
 export { default as Button } from './Button/Button.js';
 export { default as ButtonGroup } from './Button/ButtonGroup.js';
 export { default as Icon } from './Icon/Icon.js';
@@ -149,5 +150,6 @@ export { default as Calendar } from './Calendar/Calendar.js';
 export { default as TimePanelAction } from './TimePanel/TimePanelAction.js';
 export { default as TimePanelColumn } from './TimePanel/TimePanelColumn.js';
 export { default as TimePanel } from './TimePanel/TimePanel.js';
+export { MezzanineConfig } from './Provider/context.js';
 export { default as cx } from 'clsx';
 export { createNotifier } from './Notifier/createNotifier.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -27,12 +27,12 @@
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.10.0",
-    "@mezzanine-ui/icons": "^0.9.2",
+    "@mezzanine-ui/core": "^0.10.2",
+    "@mezzanine-ui/icons": "^0.10.2",
     "@mezzanine-ui/system": "^0.7.0",
     "@popperjs/core": "^2.9.2",
     "@types/react-transition-group": "4.4.1",
@@ -42,20 +42,20 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "^6.3.8",
+    "@storybook/react": "^6.4.19",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.1.0",
     "@types/lodash": "^4.14.168",
     "@types/moment": "^2.13.0",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "@types/react-test-renderer": "^17.0.1",
     "chromatic": "^5.10.1",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2"
   }
 }