@mezzanine-ui/react 1.0.0-beta.2 → 1.0.0-beta.3

package/Notification/Notification.js

@@ -1,76 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { notificationIcons, notificationClasses } from '@mezzanine-ui/core/notification';
-import { TimesIcon } from '@mezzanine-ui/icons';
-import { useState, useEffect } from 'react';
-import Button from '../Button/Button.js';
-import ButtonGroup from '../Button/ButtonGroup.js';
-import SlideFade from '../Transition/SlideFade.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-import { createNotifier } from '../Notifier/createNotifier.js';
-
-/**
- * The react component for `mezzanine` notification.
- *
- * Use the API from the Notification instance such as `Notification.success` and `Notification.error`
- * to display a notification globally.
- */
-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 [open, setOpen] = useState(true);
-    useEffect(() => {
-        if (open && duration) {
-            const timer = window.setTimeout(() => {
-                setOpen(false);
-            }, duration);
-            return () => {
-                window.clearTimeout(timer);
-            };
-        }
-    }, [open, duration]);
-    const onClose = () => {
-        setOpen(false);
-        if (onCloseProp) {
-            onCloseProp(reference);
-        }
-    };
-    const onConfirm = onConfirmProp
-        ? () => {
-            setOpen(false);
-            onConfirmProp();
-        }
-        : undefined;
-    const onCancel = onCancelProp
-        ? () => {
-            setOpen(false);
-            onCancelProp();
-        }
-        : undefined;
-    const onExited = (node) => {
-        if (onExitedProp) {
-            onExitedProp(node);
-        }
-        NotificationElement.remove(reference);
-    };
-    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({
-    duration: false,
-    render: (notif) => jsx(NotificationElement, { ...notif }),
-    setRoot: (root) => {
-        root === null || root === void 0 ? void 0 : root.setAttribute('class', notificationClasses.root);
-    },
-});
-NotificationElement.add = add;
-NotificationElement.config = config;
-NotificationElement.destroy = destroy;
-NotificationElement.remove = remove;
-['success', 'warning', 'error', 'info'].forEach((severity) => {
-    NotificationElement[severity] = (props) => NotificationElement.add({
-        ...props,
-        severity,
-    });
-});
-
-export { NotificationElement as default };

package/Notification/index.d.ts

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

package/Notification/index.js

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

package/Select/AutoComplete.d.ts

@@ -1,107 +0,0 @@
-import { Dispatch, SetStateAction, RefObject } from 'react';
-import { SelectInputSize } from '@mezzanine-ui/core/select';
-import { SelectValue } from './typings';
-import { MenuProps } from '../Menu';
-import { PopperProps } from '../Popper';
-import { PickRenameMulti } from '../utils/general';
-import { SelectTriggerProps, SelectTriggerInputProps } from './SelectTrigger';
-export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active' | 'clearable' | 'forceHideSuffixActionIcon' | 'mode' | 'onClick' | 'onKeyDown' | 'onChange' | 'renderValue' | 'inputProps' | 'suffixActionIcon' | 'value'>, PickRenameMulti<Pick<MenuProps, 'itemsInView' | 'maxHeight' | 'role' | 'size'>, {
-    maxHeight: 'menuMaxHeight';
-    role: 'menuRole';
-    size: 'menuSize';
-}>, PickRenameMulti<Pick<PopperProps, 'options'>, {
-    options: 'popperOptions';
-}> {
-    /**
-     * Set to true when options can be added dynamically
-     * @default false
-     */
-    addable?: boolean;
-    /**
-     * Should the filter rules be disabled (If you need to control options filter by yourself)
-     * @default false
-     */
-    disabledOptionsFilter?: boolean;
-    /**
-     * The other native props for input element.
-     */
-    inputProps?: Omit<SelectTriggerInputProps, 'onChange' | 'placeholder' | 'role' | 'value' | `aria-${'controls' | 'expanded' | 'owns'}`>;
-    /**
-     * insert callback whenever insert icon is clicked
-     * return `true` when insert is successfully
-     */
-    onInsert?(text: string): SelectValue;
-    /**
-     * The search event handler
-     */
-    onSearch?(input: string): any;
-    /**
-     * The options that mapped autocomplete options
-     */
-    options: SelectValue[];
-    /**
-     * select input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Whether the selection is required.
-     * @default false
-     */
-    required?: boolean;
-    /**
-     *
-     */
-    searchTextControlRef?: RefObject<{
-        setSearchText: Dispatch<SetStateAction<string>>;
-    } | undefined>;
-    /**
-     * The size of input.
-     */
-    size?: SelectInputSize;
-}
-export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue[];
-    /**
-     * Controls the layout of trigger.
-     */
-    mode: 'multiple';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue[]): any;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue[];
-};
-export type AutoCompleteSingleProps = AutoCompleteBaseProps & {
-    /**
-     * The default selection
-     */
-    defaultValue?: SelectValue;
-    /**
-     * Controls the layout of trigger.
-     */
-    mode?: 'single';
-    /**
-     * The change event handler of input element.
-     */
-    onChange?(newOptions: SelectValue): any;
-    /**
-     * The value of selection.
-     * @default undefined
-     */
-    value?: SelectValue | null;
-};
-export type AutoCompleteProps = AutoCompleteMultipleProps | AutoCompleteSingleProps;
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-declare const AutoComplete: import("react").ForwardRefExoticComponent<(Omit<AutoCompleteMultipleProps, "ref"> | Omit<AutoCompleteSingleProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
-export default AutoComplete;

package/Select/AutoComplete.js

@@ -1,114 +0,0 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useImperativeHandle, useRef, useMemo } from 'react';
-import { selectClasses } from '@mezzanine-ui/core/select';
-import { PlusIcon } from '@mezzanine-ui/icons';
-import isArray from 'lodash/isArray';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import Option from './Option.js';
-import { SelectControlContext } from './SelectControlContext.js';
-import { useAutoCompleteValueControl } from '../Form/useAutoCompleteValueControl.js';
-import { useClickAway } from '../hooks/useClickAway.js';
-import SelectTrigger from './SelectTrigger.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
-import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
-import Menu from '../Menu/Menu.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-
-const MENU_ID = 'mzn-select-autocomplete-menu-id';
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-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, mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, searchTextControlRef, size, value: valueProp, } = props;
-    const [open, toggleOpen] = useState(false);
-    const { focused, onFocus, onChange, onClear, options, searchText, selectedOptions, setSearchText, unselectedOptions, value, } = useAutoCompleteValueControl({
-        defaultValue,
-        disabledOptionsFilter,
-        mode,
-        onChange: onChangeProp,
-        onClear: onClearProp,
-        onClose: () => toggleOpen(false),
-        onSearch,
-        options: optionsProp,
-        value: valueProp,
-    });
-    /** export set search text action to props (allow user to customize search text) */
-    useImperativeHandle(searchTextControlRef, () => ({ setSearchText }));
-    /** insert feature */
-    const [insertText, setInsertText] = useState('');
-    const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
-    const renderValue = focused ? () => searchText : undefined;
-    useClickAway(() => {
-        if (!open || focused)
-            return;
-        return () => {
-            toggleOpen((prev) => !prev);
-        };
-    }, nodeRef, [focused, nodeRef, open, toggleOpen]);
-    function getPlaceholder() {
-        if (focused && value && !isArray(value)) {
-            return value.name;
-        }
-        return placeholder;
-    }
-    /** Trigger input props */
-    const onSearchInputChange = (e) => {
-        /** should sync both search input and value */
-        setSearchText(e.target.value);
-        setInsertText(e.target.value);
-        /** return current value to onSearch */
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-    };
-    const onSearchInputFocus = (e) => {
-        var _a;
-        e.stopPropagation();
-        toggleOpen(true);
-        onFocus(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onSearchInputBlur = (e) => {
-        var _a;
-        onFocus(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onClickSuffixActionIcon = () => {
-        toggleOpen((prev) => !prev);
-    };
-    const resolvedInputProps = {
-        ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
-        onBlur: onSearchInputBlur,
-        onChange: onSearchInputChange,
-        onFocus: onSearchInputFocus,
-        placeholder: getPlaceholder(),
-        role: 'combobox',
-    };
-    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) => {
-                                var _a;
-                                e.stopPropagation();
-                                if (insertText) {
-                                    const newOption = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : null;
-                                    if (newOption) {
-                                        setInsertText('');
-                                        setSearchText('');
-                                        onChange(newOption);
-                                    }
-                                }
-                            }, children: [jsx("p", { children: insertText }), jsx(Icon, { className: selectClasses.autoCompleteIcon, icon: PlusIcon })] })) : null] })] }) }));
-});
-
-export { AutoComplete as default };