@mezzanine-ui/react 1.0.0-beta.6 → 1.0.0-beta.7

package/Accordion/Accordion.d.ts

@@ -1,5 +1,13 @@
+import React from 'react';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { AccordionTitleProps } from './AccordionTitle';
 export interface AccordionProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'onChange'> {
+    /**
+     * The content of the component. <br />
+     * The first child will be treated as the title of the accordion, and the rest will be treated as the content of the accordion.
+     * You can also use `title` prop to set the title of the accordion, then all children will be treated as the content of the accordion.
+     */
+    children: React.ReactNode;
     /**
      * If true, expands the accordion by default.
      * @default false
@@ -18,6 +26,20 @@ export interface AccordionProps extends Omit<NativeElementPropsWithoutKeyAndRef<
      * Callback fired when the expand/collapse state is changed.
      */
     onChange?(e: boolean): void;
+    /**
+     * The size of accordion.
+     * @default 'main'
+     */
+    size?: 'main' | 'sub';
+    /**
+     * The title of accordion.
+     */
+    title?: string;
+    /**
+     * The actions displayed on the right side of the accordion title. <br />
+     * Only `Button` or `Dropdown` is allowed.
+     */
+    actions?: AccordionTitleProps['actions'];
 }
-declare const Accordion: import("react").ForwardRefExoticComponent<AccordionProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
 export default Accordion;

package/Accordion/Accordion.js

@@ -1,12 +1,54 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useState, useCallback, Children, useMemo } from 'react';
+import React, { forwardRef, useState, useCallback, useMemo, cloneElement } from 'react';
 import { accordionClasses } from '@mezzanine-ui/core/accordion';
 import { AccordionControlContext } from './AccordionControlContext.js';
+import { MOTION_EASING, MOTION_DURATION } from '@mezzanine-ui/system/motion';
+import AccordionTitle from './AccordionTitle.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import AccordionContent from './AccordionContent.js';
+import Fade from '../Transition/Fade.js';
 import cx from 'clsx';
 
+const resolveChildren = (children) => {
+    let title = null;
+    let content = null;
+    const restContentChildren = [];
+    flattenChildren(children).forEach((child) => {
+        if (React.isValidElement(child) && child.type === AccordionTitle) {
+            if (title) {
+                console.warn('[Mezzanine][Accordion] Only one AccordionTitle is allowed as children of Accordion.');
+            }
+            title = child;
+        }
+        else if (React.isValidElement(child) && child.type === AccordionContent) {
+            if (content) {
+                console.warn('[Mezzanine][Accordion] Only one AccordionContent is allowed as children of Accordion.');
+            }
+            content = child;
+        }
+        else {
+            restContentChildren.push(child);
+        }
+    });
+    if (restContentChildren.length > 0) {
+        if (content || title) {
+            console.warn('[Mezzanine][Accordion] When <AccordionTitle> or <AccordionContent> is used as children. Please wrap other children with AccordionContent.');
+        }
+        if (!content) {
+            content = jsx(AccordionContent, {});
+        }
+        content = cloneElement(content, {
+            children: [content.props.children, ...restContentChildren],
+        });
+    }
+    return {
+        title,
+        content,
+    };
+};
 const Accordion = forwardRef(function Accordion(props, ref) {
-    const { className, children: childrenProp, defaultExpanded = false, disabled = false, expanded: expandedProp, onChange, ...rest } = props;
-    const [expanded, toggleExpanded] = useState(defaultExpanded || false);
+    const { actions, children: childrenProp, className, defaultExpanded = false, disabled = false, expanded: expandedProp, onChange, size = 'main', title, ...rest } = props;
+    const [expanded, toggleExpanded] = useState(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : false);
     const onToggleExpanded = useCallback((newStatus) => {
         if (typeof onChange === 'function') {
             onChange(newStatus);
@@ -15,20 +57,26 @@ const Accordion = forwardRef(function Accordion(props, ref) {
             toggleExpanded(newStatus);
         }
     }, [onChange]);
-    const [summary, ...children] = Children.toArray(childrenProp);
+    const { title: resolvedTitle, content: resolvedContent } = useMemo(() => resolveChildren(childrenProp), [childrenProp]);
     const contextValue = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         return ({
-            detailsId: ((_a = summary === null || summary === void 0 ? void 0 : summary.props) === null || _a === void 0 ? void 0 : _a.id)
-                ? `${summary.props.id}-details`
+            contentId: resolvedTitle && ((_a = resolvedTitle === null || resolvedTitle === void 0 ? void 0 : resolvedTitle.props) === null || _a === void 0 ? void 0 : _a.id)
+                ? `${resolvedTitle.props.id}-content`
                 : undefined,
             disabled,
-            expanded: expandedProp || expanded,
-            summaryId: (_b = summary === null || summary === void 0 ? void 0 : summary.props) === null || _b === void 0 ? void 0 : _b.id,
+            expanded: expandedProp !== null && expandedProp !== void 0 ? expandedProp : expanded,
+            titleId: (_c = (resolvedTitle && ((_b = resolvedTitle === null || resolvedTitle === void 0 ? void 0 : resolvedTitle.props) === null || _b === void 0 ? void 0 : _b.id))) !== null && _c !== void 0 ? _c : undefined,
             toggleExpanded: onToggleExpanded,
         });
-    }, [disabled, expandedProp, expanded, onToggleExpanded, summary]);
-    return (jsx("div", { ...rest, ref: ref, className: cx(accordionClasses.host, className), children: jsxs(AccordionControlContext.Provider, { value: contextValue, children: [summary, children] }) }));
+    }, [disabled, expandedProp, expanded, onToggleExpanded, resolvedTitle]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(accordionClasses.host, accordionClasses.size(size), className), children: jsxs(AccordionControlContext.Provider, { value: contextValue, children: [title ? (jsx(AccordionTitle, { actions: actions, children: title })) : (resolvedTitle), jsx(Fade, { duration: {
+                        enter: MOTION_DURATION.moderate,
+                        exit: MOTION_DURATION.moderate,
+                    }, easing: {
+                        enter: MOTION_EASING.entrance,
+                        exit: MOTION_EASING.exit,
+                    }, in: expandedProp !== null && expandedProp !== void 0 ? expandedProp : expanded, children: jsx("div", { children: resolvedContent }) })] }) }));
 });
 
 export { Accordion as default };

package/Accordion/AccordionActions.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { ButtonGroupProps, ButtonProps } from '../Button';
+import { DropdownProps } from '../Dropdown';
+type AccordionActionsChild = ReactElement<DropdownProps> | ReactElement<ButtonProps> | null | undefined | false;
+export interface AccordionActionsProps extends Omit<ButtonGroupProps, 'children'> {
+    /**
+     * The content of the component. <br />
+     * Only `Button` or `Dropdown` is allowed.
+     */
+    children?: AccordionActionsChild | AccordionActionsChild[];
+}
+declare const AccordionActions: React.FC<AccordionActionsProps>;
+export default AccordionActions;

package/Accordion/AccordionActions.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import { accordionClasses } from '@mezzanine-ui/core/accordion';
+import Dropdown from '../Dropdown/Dropdown.js';
+import cx from 'clsx';
+
+const AccordionActions = ({ children, className, ...rest }) => {
+    const filteredChildren = flattenChildren(children).map((child) => {
+        if (isValidElement(child) &&
+            child.type !== Button &&
+            child.type !== Dropdown) {
+            console.warn('[Mezzanine][Accordion] Only Button or Dropdown is allowed as the child of AccordionActions.');
+            return null;
+        }
+        return child;
+    });
+    return (jsx(ButtonGroup, { className: cx(accordionClasses.titleActions, className), ...rest, children: filteredChildren }));
+};
+
+export { AccordionActions as default };

package/Accordion/AccordionContent.d.ts

@@ -0,0 +1,9 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AccordionContentProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * If true, expands the content, otherwise collapse it.
+     */
+    expanded?: boolean;
+}
+declare const AccordionContent: import("react").ForwardRefExoticComponent<AccordionContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionContent;

package/Accordion/{AccordionDetails.js → AccordionContent.js}

@@ -6,9 +6,9 @@ import { AccordionControlContext } from './AccordionControlContext.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
-const AccordionDetails = forwardRef(function AccordionDetails(props, ref) {
+const AccordionContent = forwardRef(function AccordionContent(props, ref) {
     const { className, children, expanded: expandedProp, ...rest } = props;
-    const { detailsId, expanded, summaryId } = useContext(AccordionControlContext) || {};
+    const { contentId: detailsId, expanded, titleId: summaryId, } = useContext(AccordionControlContext) || {};
     const ariaProps = useMemo(() => {
         if (summaryId && detailsId) {
             return {
@@ -18,9 +18,7 @@ const AccordionDetails = forwardRef(function AccordionDetails(props, ref) {
         }
         return {};
     }, [summaryId, detailsId]);
-    return (jsx(Collapse, { style: { width: '100%' }, in: expandedProp || expanded, children: jsx("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.details, {
-                [accordionClasses.detailsExpanded]: expandedProp || expanded,
-            }, className), role: "region", children: children }) }));
+    return (jsx(Collapse, { style: { width: '100%' }, in: expandedProp || expanded, children: jsx("div", { ...rest, ...ariaProps, ref: ref, className: cx(accordionClasses.content, className), role: "region", children: children }) }));
 });
 
-export { AccordionDetails as default };
+export { AccordionContent as default };

package/Accordion/AccordionControlContext.d.ts

@@ -1,8 +1,8 @@
 export interface AccordionControlContextValue {
-    detailsId?: string;
+    contentId?: string;
     disabled: boolean;
     expanded: boolean;
-    summaryId?: string;
+    titleId?: string;
     toggleExpanded(e: boolean): void;
 }
 export declare const AccordionControlContext: import("react").Context<AccordionControlContextValue | undefined>;

package/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,10 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface AccordionGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * The size of accordion group, which will be passed to each Accordion in the group.
+     * @default 'main'
+     */
+    size?: 'main' | 'sub';
+}
+declare const AccordionGroup: import("react").ForwardRefExoticComponent<AccordionGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionGroup;

package/Accordion/AccordionGroup.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo, isValidElement } from 'react';
+import { accordionGroupClasses } from '@mezzanine-ui/core/accordion';
+import { flattenChildren } from '../utils/flatten-children.js';
+import Accordion from './Accordion.js';
+import cx from 'clsx';
+
+const AccordionGroup = forwardRef(function AccordionGroup(props, ref) {
+    const { className, children, size, ...rest } = props;
+    const childrenWithSize = useMemo(() => flattenChildren(children).map((child) => {
+        if (isValidElement(child) && child.type === Accordion) {
+            return {
+                ...child,
+                props: {
+                    ...child.props,
+                    size,
+                },
+            };
+        }
+        return child;
+    }), [children, size]);
+    return (jsx("div", { ...rest, ref: ref, className: cx(accordionGroupClasses.host, className), children: childrenWithSize }));
+});
+
+export { AccordionGroup as default };

package/Accordion/AccordionTitle.d.ts

@@ -0,0 +1,14 @@
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { AccordionActionsProps } from './AccordionActions';
+export interface AccordionTitleProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
+    /**
+     * Custom ChevronRight icon className.
+     */
+    iconClassName?: string;
+    /**
+     * Custom suffix actions.
+     */
+    actions?: AccordionActionsProps;
+}
+declare const AccordionTitle: import("react").ForwardRefExoticComponent<AccordionTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AccordionTitle;

package/Accordion/AccordionTitle.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useContext, useCallback, useMemo, isValidElement } from 'react';
+import { ChevronRightIcon } from '@mezzanine-ui/icons';
+import { accordionClasses } from '@mezzanine-ui/core/accordion';
+import { AccordionControlContext } from './AccordionControlContext.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import AccordionActions from './AccordionActions.js';
+import Rotate from '../Transition/Rotate.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const resolveChildren = (children) => {
+    const mainPartChildren = [];
+    const actionsChildren = [];
+    flattenChildren(children).forEach((child) => {
+        if (isValidElement(child) && child.type === AccordionActions) {
+            actionsChildren.push(child);
+        }
+        else {
+            mainPartChildren.push(child);
+        }
+    });
+    return { mainPartChildren, actionsChildren };
+};
+const AccordionTitle = forwardRef(function AccordionTitle(props, ref) {
+    const { className, children, iconClassName: iconClassNameProp, actions: suffixActions, ...rest } = props;
+    const { contentId, disabled, expanded, toggleExpanded } = useContext(AccordionControlContext) || {};
+    const onToggle = useCallback((e) => {
+        e.stopPropagation();
+        if (typeof toggleExpanded === 'function' && !disabled) {
+            toggleExpanded(!expanded);
+        }
+    }, [disabled, expanded, toggleExpanded]);
+    const ariaProps = useMemo(() => {
+        let result = {
+            'aria-expanded': expanded,
+        };
+        if (contentId) {
+            result = {
+                ...result,
+                'aria-controls': contentId,
+            };
+        }
+        return result;
+    }, [contentId, expanded]);
+    const { mainPartChildren, actionsChildren } = useMemo(() => resolveChildren(children), [children]);
+    return (jsxs("div", { ...rest, ref: ref, className: cx(accordionClasses.title, {
+            [accordionClasses.titleExpanded]: expanded,
+            [accordionClasses.titleDisabled]: disabled,
+        }, className), children: [jsxs("button", { className: accordionClasses.titleMainPart, onClick: onToggle, type: "button", ...ariaProps, children: [jsx(Rotate, { in: expanded, degrees: -90, children: jsx(Icon, { size: 16, className: cx(accordionClasses.titleIcon, {
+                                [accordionClasses.titleIconDisabled]: disabled,
+                            }, iconClassNameProp), icon: ChevronRightIcon }) }), mainPartChildren] }), suffixActions ? (jsx(AccordionActions, { ...suffixActions })) : (actionsChildren)] }));
+});
+
+export { AccordionTitle as default };

package/Accordion/index.d.ts

@@ -1,6 +1,10 @@
 export type { AccordionProps } from './Accordion';
 export { default } from './Accordion';
-export { default as AccordionSummary } from './AccordionSummary';
-export type { AccordionSummaryProps } from './AccordionSummary';
-export { default as AccordionDetails } from './AccordionDetails';
-export type { AccordionDetailsProps } from './AccordionDetails';
+export { default as AccordionTitle } from './AccordionTitle';
+export type { AccordionTitleProps } from './AccordionTitle';
+export { default as AccordionContent } from './AccordionContent';
+export type { AccordionContentProps } from './AccordionContent';
+export { default as AccordionActions } from './AccordionActions';
+export type { AccordionActionsProps } from './AccordionActions';
+export { default as AccordionGroup } from './AccordionGroup';
+export type { AccordionGroupProps } from './AccordionGroup';

package/Accordion/index.js

@@ -1,3 +1,5 @@
 export { default } from './Accordion.js';
-export { default as AccordionSummary } from './AccordionSummary.js';
-export { default as AccordionDetails } from './AccordionDetails.js';
+export { default as AccordionTitle } from './AccordionTitle.js';
+export { default as AccordionContent } from './AccordionContent.js';
+export { default as AccordionActions } from './AccordionActions.js';
+export { default as AccordionGroup } from './AccordionGroup.js';

package/AutoComplete/AutoComplete.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, RefObject, SetStateAction } from 'react';
 import { AutoCompleteSelector } from '@mezzanine-ui/core/autocomplete';
-import { DropdownInputPosition } from '@mezzanine-ui/core/dropdown/dropdown';
+import { DropdownInputPosition, DropdownLoadingPosition } from '@mezzanine-ui/core/dropdown/dropdown';
 import { PopperProps } from '../Popper';
 import type { SelectTriggerInputProps, SelectTriggerProps } from '../Select/typings';
 import { SelectValue } from '../Select/typings';
@@ -19,6 +19,11 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * @default false
      */
     asyncData?: boolean;
+    /**
+     * Whether to clear search text when leaving the textfield/dropdown scope.
+     * @default true
+     */
+    clearSearchText?: boolean;
     /**
      * Characters that can be used to separate multiple items when creating.
      * When these characters are entered, they will trigger item creation.
@@ -40,11 +45,6 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * @important When using with react-hook-form or native forms, this prop is recommended.
      */
     id?: string;
-    /**
-     * Whether to keep search text visible after blur when no value is selected.
-     * @default false
-     */
-    keepSearchTextOnBlur?: boolean;
     /**
      * The position of the input.
      * @default 'outside'
@@ -63,6 +63,12 @@ export interface AutoCompleteBaseProps extends Omit<SelectTriggerProps, 'active'
      * The text of the dropdown loading status.
      */
     loadingText?: string;
+    /**
+     * The position to display the loading status.
+     * Only takes effect when `loading` is true.
+     * @default 'bottom'
+     */
+    loadingPosition?: DropdownLoadingPosition;
     /**
      * The max height of the dropdown list.
      */
@@ -177,6 +183,14 @@ export type AutoCompleteMultipleProps = AutoCompleteBaseProps & {
      * The change event handler of input element.
      */
     onChange?(newOptions: SelectValue[]): void;
+    /**
+     * Tag overflow strategy:
+     * - counter: collapse extra tags into a counter tag showing the remaining count.
+     * - wrap: wrap to new lines to display all tags.
+     * @default 'counter'
+     *
+     */
+    overflowStrategy?: 'counter' | 'wrap';
     /**
      * The selector of input.
      * @default 'input'