@mezzanine-ui/react 0.14.10 → 0.15.0

package/Notification/Notification.js

@@ -18,7 +18,7 @@ import { createNotifier } from '../Notifier/createNotifier.js';
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 const NotificationElement = ((props) => {
     const { cancelText, children, confirmText, direction = 'left', duration, onCancel: onCancelProp, onClose: onCloseProp, onConfirm: onConfirmProp, onExited: onExitedProp, reference, severity, title, ...restTransitionProps } = props;
-    const targetIcon = severity ? (notificationIcons[severity]) : undefined;
+    const targetIcon = severity ? notificationIcons[severity] : undefined;
     const [open, setOpen] = useState(true);
     useEffect(() => {
         if (open && duration) {
@@ -36,14 +36,18 @@ const NotificationElement = ((props) => {
             onCloseProp(reference);
         }
     };
-    const onConfirm = onConfirmProp ? () => {
-        setOpen(false);
-        onConfirmProp();
-    } : undefined;
-    const onCancel = onCancelProp ? () => {
-        setOpen(false);
-        onCancelProp();
-    } : undefined;
+    const onConfirm = onConfirmProp
+        ? () => {
+            setOpen(false);
+            onConfirmProp();
+        }
+        : undefined;
+    const onCancel = onCancelProp
+        ? () => {
+            setOpen(false);
+            onCancelProp();
+        }
+        : undefined;
     const onExited = (node) => {
         if (onExitedProp) {
             onExitedProp(node);
@@ -52,7 +56,7 @@ const NotificationElement = ((props) => {
     };
     return (jsx(SlideFade, { in: open, appear: true, onExited: onExited, direction: direction, ...restTransitionProps, children: jsxs("div", { className: cx(notificationClasses.host, severity ? notificationClasses.severity(severity) : undefined), children: [targetIcon ? (jsx("div", { className: notificationClasses.iconContainer, children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon }) })) : null, jsxs("div", { className: notificationClasses.body, children: [jsx("h4", { className: notificationClasses.title, children: title }), jsx("div", { className: notificationClasses.content, children: children }), onConfirm && !severity ? (jsxs(ButtonGroup, { className: notificationClasses.action, children: [jsx(Button, { variant: "contained", onClick: onConfirm, children: confirmText }), jsx(Button, { variant: "outlined", onClick: onCancel || onClose, children: cancelText })] })) : null] }), jsx(Icon, { icon: TimesIcon, className: notificationClasses.closeIcon, onClick: onClose })] }) }));
 });
-const { add, config, destroy, remove, } = createNotifier({
+const { add, config, destroy, remove } = createNotifier({
     duration: false,
     render: (notif) => jsx(NotificationElement, { ...notif }),
     setRoot: (root) => {

package/Notification/index.d.ts

@@ -1,2 +1,2 @@
-export { NotificationSeverity, } from '@mezzanine-ui/core/notification';
-export { NotificationData, default, } from './Notification';
+export { NotificationSeverity } from '@mezzanine-ui/core/notification';
+export { NotificationData, default } from './Notification';

package/Notifier/NotifierManager.js

@@ -2,7 +2,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useMemo, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 
 function NotifierManager(props) {
-    const { controllerRef, defaultNotifiers = [], maxCount, render, } = props;
+    const { controllerRef, defaultNotifiers = [], maxCount, render } = props;
     const [notifiers, setNotifiers] = useState(defaultNotifiers);
     const notifiersShouldRendered = typeof maxCount === 'number' && notifiers.length > maxCount
         ? notifiers.slice(0, maxCount)

package/Overlay/index.d.ts

@@ -1 +1 @@
-export { OverlayProps, default, } from './Overlay';
+export { OverlayProps, default } from './Overlay';

package/Pagination/Pagination.d.ts

@@ -36,8 +36,8 @@ export interface PaginationProps extends Omit<DetailedHTMLProps<HTMLAttributes<H
      */
     hintText?: string;
     /**
-    * The hint displayed in the jumper `input` before the user enters a value.
-    */
+     * The hint displayed in the jumper `input` before the user enters a value.
+     */
     inputPlaceholder?: string;
     /**
      * Render the item.

package/Pagination/PaginationJumper.js

@@ -10,7 +10,7 @@ const PaginationJumper = forwardRef((props, ref) => {
     const { buttonText, className, disabled = false, hintText, inputPlaceholder, onChange: handleChange, pageSize = 5, total = 0, ...rest } = props;
     const [value, setValue] = useState('');
     const [error, setError] = useState(false);
-    const totalPages = (total ? Math.ceil(total / pageSize) : 1);
+    const totalPages = total ? Math.ceil(total / pageSize) : 1;
     const valueValidator = () => {
         const stringToNumber = +value;
         const validNumber = !!stringToNumber;

package/Pagination/PaginationPageSize.js

@@ -8,10 +8,12 @@ import cx from 'clsx';
 
 const PaginationPageSize = forwardRef((props, ref) => {
     const { className, disabled = false, label, onChange, options = [10, 20, 50, 100], renderOptionName = (p) => `${p}`, unit, value, ...rest } = props;
-    const currentValue = useMemo(() => (value ? ({
-        id: `${value}`,
-        name: renderOptionName(value),
-    }) : undefined), [value, renderOptionName]);
+    const currentValue = useMemo(() => value
+        ? {
+            id: `${value}`,
+            name: renderOptionName(value),
+        }
+        : undefined, [value, renderOptionName]);
     return (jsxs("div", { ...rest, ref: ref, className: cx(paginationPageSizeClasses.host, className), children: [label ? (jsx(Typography, { color: "text-secondary", component: "div", ellipsis: true, variant: "button3", children: label })) : null, jsx(Select, { disabled: disabled, value: currentValue, onChange: (nextSelection) => onChange === null || onChange === void 0 ? void 0 : onChange(Number(nextSelection.id)), className: paginationPageSizeClasses.select, children: options.map((opt) => (jsx(Option, { value: `${opt}`, children: renderOptionName(opt) }, opt))) }), unit ? (jsx(Typography, { color: "text-secondary", component: "div", ellipsis: true, variant: "button3", children: unit })) : null] }));
 });
 var PaginationPageSize$1 = PaginationPageSize;

package/Pagination/index.d.ts

@@ -1,6 +1,6 @@
-export type { PaginationItemType, } from '@mezzanine-ui/core/pagination';
+export type { PaginationItemType } from '@mezzanine-ui/core/pagination';
 export { PaginationProps, default } from './Pagination';
-export { PaginationItemProps, default as PaginationItem } from './PaginationItem';
-export { PaginationJumperProps, default as PaginationJumper } from './PaginationJumper';
-export { PaginationPageSizeProps, default as PaginationPageSize } from './PaginationPageSize';
+export { PaginationItemProps, default as PaginationItem, } from './PaginationItem';
+export { PaginationJumperProps, default as PaginationJumper, } from './PaginationJumper';
+export { PaginationPageSizeProps, default as PaginationPageSize, } from './PaginationPageSize';
 export { usePagination } from './usePagination';

package/Pagination/usePagination.js

@@ -6,7 +6,7 @@ const range = (start, end) => {
 };
 function usePagination(props = {}) {
     const { boundaryCount = 1, current = 1, disabled = false, hideNextButton = false, hidePreviousButton = false, pageSize = 10, onChange: handleChange, siblingCount = 1, total = 0, } = props;
-    const totalPages = (total ? Math.ceil(total / pageSize) : 1);
+    const totalPages = total ? Math.ceil(total / pageSize) : 1;
     const itemList = useMemo(() => {
         const startPages = range(1, Math.min(boundaryCount, totalPages));
         const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
@@ -31,7 +31,14 @@ function usePagination(props = {}) {
             ...endPages,
             ...(hideNextButton ? [] : ['next']),
         ];
-    }, [boundaryCount, current, hideNextButton, hidePreviousButton, siblingCount, totalPages]);
+    }, [
+        boundaryCount,
+        current,
+        hideNextButton,
+        hidePreviousButton,
+        siblingCount,
+        totalPages,
+    ]);
     const handleClick = (page) => {
         if (handleChange) {
             handleChange(page);
@@ -45,7 +52,9 @@ function usePagination(props = {}) {
                 'aria-disabled': disabled ? true : undefined,
                 'aria-label': `Go to ${item} page`,
                 disabled,
-                onClick: () => { handleClick(item); },
+                onClick: () => {
+                    handleClick(item);
+                },
                 page: item,
                 type: 'page',
             };
@@ -53,14 +62,18 @@ function usePagination(props = {}) {
         const restItemProps = {
             previous: {
                 'aria-label': 'Go to previous Page',
-                disabled: disabled || (current - 1 < 1),
-                onClick: () => { handleClick(current - 1); },
+                disabled: disabled || current - 1 < 1,
+                onClick: () => {
+                    handleClick(current - 1);
+                },
                 type: item,
             },
             next: {
                 'aria-label': 'Go to next Page',
-                disabled: disabled || (current + 1 > totalPages),
-                onClick: () => { handleClick(current + 1); },
+                disabled: disabled || current + 1 > totalPages,
+                onClick: () => {
+                    handleClick(current + 1);
+                },
                 type: item,
             },
             ellipsis: {

package/Picker/PickerTrigger.d.ts

@@ -20,9 +20,9 @@ export interface PickerTriggerProps extends Omit<TextFieldProps, 'active' | 'chi
      */
     readOnly?: boolean;
     /**
-      * Whether the input is required.
-      * @default false
-      */
+     * Whether the input is required.
+     * @default false
+     */
     required?: boolean;
     /**
      * The value of the input element.

package/Picker/index.d.ts

@@ -1,7 +1,7 @@
-export { useTabKeyClose, } from './useTabKeyClose';
+export { useTabKeyClose } from './useTabKeyClose';
 export { UsePickerDocumentEventCloseProps, usePickerDocumentEventClose, } from './usePickerDocumentEventClose';
 export { UsePickerInputValueProps, usePickerInputValue, } from './usePickerInputValue';
-export { UsePickerValueProps, usePickerValue, } from './usePickerValue';
+export { UsePickerValueProps, usePickerValue } from './usePickerValue';
 export { UseRangePickerValueProps, useRangePickerValue, } from './useRangePickerValue';
-export { PickerTriggerProps, default as PickerTrigger, } from './PickerTrigger';
+export { PickerTriggerProps, default as PickerTrigger } from './PickerTrigger';
 export { RangePickerTriggerProps, default as RangePickerTrigger, } from './RangePickerTrigger';

package/Picker/usePickerValue.js

@@ -6,8 +6,10 @@ import { usePickerInputValue } from './usePickerInputValue.js';
  * This hook keep tracks of an internal value.
  */
 function usePickerValue({ defaultValue, format, formats, inputRef, value: valueProp, }) {
-    const { formatToString, parse, valueLocale, } = useCalendarContext();
-    const inputDefaultValue = defaultValue ? formatToString(valueLocale, defaultValue, format) : '';
+    const { formatToString, parse, valueLocale } = useCalendarContext();
+    const inputDefaultValue = defaultValue
+        ? formatToString(valueLocale, defaultValue, format)
+        : '';
     const [value, setValue] = useState(valueProp);
     const onChange = (val) => {
         setValue(val);
@@ -21,7 +23,9 @@ function usePickerValue({ defaultValue, format, formats, inputRef, value: valueP
         onChange: onInputChange,
     });
     useEffect(() => {
-        const valString = valueProp ? formatToString(valueLocale, valueProp, format) : '';
+        const valString = valueProp
+            ? formatToString(valueLocale, valueProp, format)
+            : '';
         setInputValue(valString);
         onChange(valueProp);
     }, [valueProp]);

package/Popconfirm/Popconfirm.js

@@ -9,7 +9,7 @@ import cx from 'clsx';
 
 const Popconfirm = forwardRef(function Popconfirm(props, ref) {
     const { className, container, cancelButtonProps, cancelText, confirmButtonProps, confirmText, icon = ExclamationCircleFilledIcon, onCancel, onConfirm, title, ...rest } = props;
-    return (jsx(Popover, { ...rest, ref: ref, className: cx(popConfirmClasses.host, className), title: (jsxs(Fragment, { children: [jsx(Icon, { className: popConfirmClasses.icon, icon: icon }), title] })), children: jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, onCancel: onCancel, onConfirm: onConfirm, size: "small" }) }));
+    return (jsx(Popover, { ...rest, ref: ref, className: cx(popConfirmClasses.host, className), title: jsxs(Fragment, { children: [jsx(Icon, { className: popConfirmClasses.icon, icon: icon }), title] }), children: jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, confirmButtonProps: confirmButtonProps, confirmText: confirmText, onCancel: onCancel, onConfirm: onConfirm, size: "small" }) }));
 });
 var Popconfirm$1 = Popconfirm;
 

package/Popconfirm/index.d.ts

@@ -1 +1 @@
-export { PopconfirmProps, default, } from './Popconfirm';
+export { PopconfirmProps, default } from './Popconfirm';

package/Popover/Popover.js

@@ -29,12 +29,7 @@ const Popover = forwardRef(function Popover(props, ref) {
                 onClose(event);
             }
         };
-    }, popoverRef, [
-        open,
-        disableClickAway,
-        onClose,
-        popoverRef,
-    ]);
+    }, popoverRef, [open, disableClickAway, onClose, popoverRef]);
     return (jsxs(Popper, { ...rest, ref: composedRef, className: cx(popoverClasses.host, className), open: open, options: {
             ...options,
             modifiers: [offsetModifier, ...modifiers],

package/Popover/index.d.ts

@@ -1 +1 @@
-export { PopoverProps, default, } from './Popover';
+export { PopoverProps, default } from './Popover';

package/Popper/Popper.js

@@ -10,7 +10,7 @@ const Popper = forwardRef(function Popper(props, ref) {
     const [popperEl, setPopperEl] = useState(null);
     const composedRef = useComposeRefs([ref, setPopperEl]);
     const anchorEl = getElement(anchor);
-    const { attributes, forceUpdate, state, styles, update, } = usePopper(anchorEl, popperEl, options);
+    const { attributes, forceUpdate, state, styles, update } = usePopper(anchorEl, popperEl, options);
     useImperativeHandle(controllerRef, () => ({
         attributes,
         forceUpdate,

package/Portal/Portal.js

@@ -4,10 +4,8 @@ import { createPortal } from 'react-dom';
 import { getElement } from '../utils/getElement.js';
 
 const Portal = (props) => {
-    const { children, container, disablePortal = false, } = props;
-    const [portalElement, setPortalElement] = useState(() => (disablePortal
-        ? null
-        : getElement(container)));
+    const { children, container, disablePortal = false } = props;
+    const [portalElement, setPortalElement] = useState(() => disablePortal ? null : getElement(container));
     useEffect(() => {
         if (!disablePortal) {
             setPortalElement(getElement(container) || document.body);

package/Portal/index.d.ts

@@ -1 +1 @@
-export { PortalProps, default, } from './Portal';
+export { PortalProps, default } from './Portal';

package/Progress/Progress.js

@@ -11,16 +11,18 @@ import cx from 'clsx';
  * The react component for `mezzanine` progress.
  */
 const Progress = forwardRef(function Progress(props, ref) {
-    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 { 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;
-    const renderInfo = (variant) => (jsx("div", { className: progressClasses.info, children: status === ProgressStatuses.normal
-            ? /** percent text */ (jsx(Typography, { className: progressClasses.infoPercent, variant: variant, ...percentProps, children: `${percentLimited}%` })) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultSuccessIcon, ...successIconProps })), status === ProgressStatuses.error && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultErrorIcon, ...errorIconProps }))] })) }));
+    const renderInfo = (variant) => (jsx("div", { className: progressClasses.info, children: status === ProgressStatuses.normal ? (
+        /** percent text */ jsx(Typography, { className: progressClasses.infoPercent, variant: variant, ...percentProps, children: `${percentLimited}%` })) : (jsxs(Fragment, { children: [status === ProgressStatuses.success && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultSuccessIcon, ...successIconProps })), status === ProgressStatuses.error && (jsx(Icon, { className: progressClasses.infoIcon, icon: defaultErrorIcon, ...errorIconProps }))] })) }));
     const renderLine = () => (jsxs(Fragment, { children: [jsx("div", { className: progressClasses.lineBg, children: jsx("div", { style: { width: `${percentLimited}%` } }) }), showInfo && renderInfo('input3')] }));
     const renderCircle = () => {
-        const { size: circleSize = 80, strokeWidth = 8, } = circleProps || {};
+        const { size: circleSize = 80, strokeWidth = 8 } = circleProps || {};
         const radius = (circleSize - strokeWidth) / 2;
         const progressLength = percent > 0 ? percent * radius * Math.PI * 0.02 : 0.00001;
         const circleXY = circleSize / 2;

package/Progress/index.d.ts

@@ -1,2 +1,2 @@
 export type { ProgressType, ProgressTypes, ProgressStatus, ProgressStatuses, } from '@mezzanine-ui/core/progress';
-export { ProgressProps, default, } from './Progress';
+export { ProgressProps, default } from './Progress';

package/Provider/ConfigProvider.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { MezzanineConfig } from './context.js';
 
 function ConfigProvider(props) {
-    const { children, size, } = props;
+    const { children, size } = props;
     const context = useMemo(() => ({
         size: size || 'medium',
     }), [size]);

package/Provider/index.d.ts

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

package/Radio/Radio.js

@@ -12,8 +12,8 @@ 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 { 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 || globalSize, value, ...rest } = props;
@@ -25,9 +25,9 @@ const Radio = forwardRef(function Radio(props, ref) {
         radioGroup,
         value,
     });
-    return (jsx(InputCheck, { ...rest, ref: ref, control: (jsx("span", { className: cx(radioClasses.host, {
+    return (jsx(InputCheck, { ...rest, ref: ref, control: jsx("span", { className: cx(radioClasses.host, {
                 [radioClasses.checked]: checked,
-            }), children: jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }) })), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
+            }), children: jsx("input", { ...restInputProps, "aria-checked": checked, "aria-disabled": disabled, checked: checked, disabled: disabled, id: inputId, onChange: onChange, name: name, type: "radio", value: value }) }), disabled: disabled, error: error, htmlFor: inputId, size: size, children: children }));
 });
 var Radio$1 = Radio;
 

package/Radio/RadioGroup.js

@@ -22,7 +22,8 @@ const RadioGroup = forwardRef(function RadioGroup(props, ref) {
         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)));
+    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 }) }));
 });
 var RadioGroup$1 = RadioGroup;

package/Radio/index.d.ts

@@ -1,3 +1,3 @@
 export type { RadioSize, RadioGroupOption, RadioGroupOrientation, } from '@mezzanine-ui/core/radio';
-export { RadioProps, default, } from './Radio';
-export { RadioGroupProps, default as RadioGroup, } from './RadioGroup';
+export { RadioProps, default } from './Radio';
+export { RadioGroupProps, default as RadioGroup } from './RadioGroup';

package/Select/AutoComplete.js

@@ -50,12 +50,7 @@ const AutoComplete = forwardRef(function Select(props, ref) {
         return () => {
             toggleOpen((prev) => !prev);
         };
-    }, nodeRef, [
-        focused,
-        nodeRef,
-        open,
-        toggleOpen,
-    ]);
+    }, nodeRef, [focused, nodeRef, open, toggleOpen]);
     function getPlaceholder() {
         if (focused && value && !isArray(value)) {
             return value.name;
@@ -96,14 +91,15 @@ const AutoComplete = forwardRef(function Select(props, ref) {
         placeholder: getPlaceholder(),
         role: 'combobox',
     };
-    const searchTextExistWithoutOption = !!searchText && options.find((option) => option.name === searchText) === undefined;
+    const searchTextExistWithoutOption = !!searchText &&
+        options.find((option) => option.name === searchText) === undefined;
     const context = useMemo(() => ({
         onChange,
         value,
     }), [onChange, value]);
     return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, {
                 [selectClasses.hostFullWidth]: fullWidth,
-            }), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, ellipsis: true, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: value, renderValue: renderValue }), jsxs(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: [options.length ? (jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: mode === 'single' ? (jsx(Fragment, { children: options.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))) })) : (jsxs(Fragment, { children: [selectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))), unselectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id)))] })) })) : null, searchTextExistWithoutOption && addable ? (jsxs("button", { type: "button", className: selectClasses.autoComplete, onClick: (e) => {
+            }), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, ellipsis: true, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: value, renderValue: renderValue }), jsxs(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: [options.length ? (jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? ((_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: mode === 'single' ? (jsx(Fragment, { children: options.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))) })) : (jsxs(Fragment, { children: [selectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))), unselectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id)))] })) })) : null, searchTextExistWithoutOption && addable ? (jsxs("button", { type: "button", className: selectClasses.autoComplete, onClick: (e) => {
                                 var _a;
                                 e.stopPropagation();
                                 if (insertText) {

package/Select/Option.js

@@ -6,7 +6,7 @@ import MenuItem from '../Menu/MenuItem.js';
 const Option = forwardRef(function Option(props, ref) {
     const { active: activeProp, children, role = 'option', value, ...rest } = props;
     const selectControl = useContext(SelectControlContext);
-    const { onChange, value: selectedValue, } = selectControl || {};
+    const { onChange, value: selectedValue } = selectControl || {};
     const getActive = () => {
         if (activeProp) {
             return activeProp;

package/Select/Select.js

@@ -34,7 +34,7 @@ const Select = forwardRef(function Select(props, ref) {
             onOpen();
         }
     };
-    const { onChange, onClear, value, } = useSelectValueControl({
+    const { onChange, onClear, value } = useSelectValueControl({
         defaultValue,
         mode,
         onChange: onChangeProp,
@@ -60,11 +60,7 @@ const Select = forwardRef(function Select(props, ref) {
         return () => {
             onClose();
         };
-    }, nodeRef, [
-        nodeRef,
-        open,
-        toggleOpen,
-    ]);
+    }, nodeRef, [nodeRef, open, toggleOpen]);
     const onClickTextField = () => {
         if (!disabled) {
             onToggleOpen();
@@ -121,7 +117,7 @@ const Select = forwardRef(function Select(props, ref) {
         onChange,
         value,
     }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? (_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '' : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
+    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, fullWidth && selectClasses.hostFullWidth), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: clearable, disabled: disabled, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, onClick: onClickTextField, onKeyDown: onKeyDownTextField, prefix: prefix, readOnly: true, renderValue: renderValue, required: required, inputProps: resolvedInputProps, size: size, suffixActionIcon: suffixActionIcon, value: value }), jsx(InputTriggerPopper, { anchor: controlRef, className: selectClasses.popper, disablePortal: disablePortal, open: open, options: popperOptions, sameWidth: true, children: jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? ((_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, onScroll: onMenuScrollCallback, role: menuRole, size: menuSize, style: { border: 0 }, children: children }) })] }) }));
 });
 var Select$1 = Select;
 

package/Select/SelectTriggerTags.js

@@ -11,7 +11,7 @@ const SelectTriggerTags = forwardRef(function SelectTriggerTags(props, ref) {
     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({
+    const { renderFakeTags, takeCount } = useSelectTriggerTags({
         controlRef,
         value,
         size,

package/Select/TreeSelect.js

@@ -114,10 +114,7 @@ const TreeSelect = forwardRef((props, ref) => {
                 onClose();
             }
         };
-    }, controlRef, [
-        open,
-        toggleOpen,
-    ]);
+    }, controlRef, [open, toggleOpen]);
     /** Trigger input props */
     const resolvedInputProps = {
         ...inputProps,

package/Select/index.d.ts

@@ -1,9 +1,9 @@
 export * from './typings';
-export { SelectControlContext, } from './SelectControlContext';
+export { SelectControlContext } from './SelectControlContext';
 export { SelectTriggerProps, SelectTriggerInputProps, default as SelectTrigger, } from './SelectTrigger';
 export { SelectTriggerTagsProps, default as SelectTriggerTags, } from './SelectTriggerTags';
-export { SelectProps, default, } from './Select';
-export { OptionProps, default as Option, } from './Option';
+export { SelectProps, default } from './Select';
+export { OptionProps, default as Option } from './Option';
 export { MenuItemGroupProps as OptionGroupProps, default as OptionGroup, } from '../Menu/MenuItemGroup';
-export { TreeSelectProps, default as TreeSelect, } from './TreeSelect';
-export { AutoCompleteProps, default as AutoComplete, } from './AutoComplete';
+export { TreeSelectProps, default as TreeSelect } from './TreeSelect';
+export { AutoCompleteProps, default as AutoComplete } from './AutoComplete';

package/Select/useSelectTriggerTags.js

@@ -19,7 +19,7 @@ function calcTakeCount({ tagsWidths, maxWidth, ellipsisTagWidth, setTakeCount, }
     setTakeCount(targetCount);
 }
 function useSelectTriggerTags(props) {
-    const { controlRef, value, size, } = props;
+    const { controlRef, value, size } = props;
     const [tagsWidths, setTagsWidths] = useState([]);
     const [takeCount, setTakeCount] = useState(0);
     const mznFakeTagClassName = 'mzn-fake-tag';

package/Skeleton/Skeleton.js

@@ -8,7 +8,11 @@ import cx from 'clsx';
  */
 const Skeleton = forwardRef(function Skeleton(props, ref) {
     const { className, height: skeletonHeight, style: skeletonStyle, type, width: skeletonWidth, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, type === 'circle' && skeletonClasses.circle, className), style: { width: skeletonWidth, height: skeletonHeight, ...skeletonStyle }, ...rest }));
+    return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, type === 'circle' && skeletonClasses.circle, className), style: {
+            width: skeletonWidth,
+            height: skeletonHeight,
+            ...skeletonStyle,
+        }, ...rest }));
 });
 var Skeleton$1 = Skeleton;
 

package/Slider/Slider.js

@@ -71,12 +71,16 @@ function SliderComponent(props) {
         }
         return roundToStep(target, step, min, max);
     }
-    const onStartInputChange = shouldHaveInputHandlers ? (e) => {
-        setStartInputValue(e.target.value);
-    } : undefined;
-    const onEndInputChange = shouldHaveInputHandlers ? (e) => {
-        setEndInputValue(e.target.value);
-    } : undefined;
+    const onStartInputChange = shouldHaveInputHandlers
+        ? (e) => {
+            setStartInputValue(e.target.value);
+        }
+        : undefined;
+    const onEndInputChange = shouldHaveInputHandlers
+        ? (e) => {
+            setEndInputValue(e.target.value);
+        }
+        : undefined;
     const onStartInputBlur = shouldHaveInputHandlers && isRangeSlider(value)
         ? () => {
             const result = sortSliderValue([
@@ -163,7 +167,7 @@ function SliderComponent(props) {
                     ...inputProps,
                     onKeyDown: onStartInputKeydown,
                     onBlur: onStartInputBlur,
-                } })) : null, jsxs("div", { className: sliderClasses.controls, children: [jsx("div", { ref: railRef, className: sliderClasses.rail, role: "presentation", onMouseDown: handleClickTrackOrRail }), jsx("div", { className: sliderClasses.track, role: "presentation", onMouseDown: handleClickTrackOrRail }), isRangeSlider(value) ? (jsxs(Fragment, { children: [getHandle(value[0], 0), getHandle(value[1], 1)] })) : getHandle(value, -1)] }), withInput ? (jsx(Input, { className: sliderClasses.input, disabled: disabled, onChange: onEndInputChange, value: endInputValue, inputProps: {
+                } })) : null, jsxs("div", { className: sliderClasses.controls, children: [jsx("div", { ref: railRef, className: sliderClasses.rail, role: "presentation", onMouseDown: handleClickTrackOrRail }), jsx("div", { className: sliderClasses.track, role: "presentation", onMouseDown: handleClickTrackOrRail }), isRangeSlider(value) ? (jsxs(Fragment, { children: [getHandle(value[0], 0), getHandle(value[1], 1)] })) : (getHandle(value, -1))] }), withInput ? (jsx(Input, { className: sliderClasses.input, disabled: disabled, onChange: onEndInputChange, value: endInputValue, inputProps: {
                     ...inputProps,
                     onKeyDown: onEndInputKeydown,
                     onBlur: onEndInputBlur,
@@ -176,9 +180,9 @@ function SliderComponent(props) {
  */
 const Slider = forwardRef((props, ref) => {
     if (isRangeSlider(props.value)) {
-        return (jsx(SliderComponent, { ...props, innerRef: ref }));
+        return jsx(SliderComponent, { ...props, innerRef: ref });
     }
-    return (jsx(SliderComponent, { ...props, innerRef: ref }));
+    return jsx(SliderComponent, { ...props, innerRef: ref });
 });
 var Slider$1 = Slider;