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

package/Badge/Badge.js

@@ -15,11 +15,11 @@ const isCountVariant = (variant) => [
  */
 const Badge = forwardRef(function Badge(props, ref) {
     const { children, count, className, overflowCount, text, variant, ...rest } = props;
-    return (jsxs("div", { className: badgeClasses.container(!!children), children: [jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
+    return (jsxs("div", { className: badgeClasses.container(!!children), children: [children, jsx("span", { ...rest, ref: ref, className: cx(badgeClasses.host, badgeClasses.variant(variant), { [badgeClasses.hide]: isCountVariant(variant) && count === 0 }, className), children: isCountVariant(variant)
                     ? overflowCount && count > overflowCount
                         ? `${overflowCount}+`
                         : count
-                    : text }), children] }));
+                    : text })] }));
 });
 
 export { Badge as default };

package/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,4 +1,4 @@
-declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").ComponentPropsWithoutKeyAndRef<"button">, "label" | "component" | "current" | "options" | "href" | "target" | "expand"> & (import("./typings").BreadcrumbDropdownItemProps | import("./typings").BreadcrumbItemTextProps | import("./typings").BreadcrumbLinkItemProps), "component"> & {
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<Omit<import("..").ComponentPropsWithoutKeyAndRef<"button">, "expand" | "label" | "component" | "current" | "options" | "href" | "target"> & (import("./typings").BreadcrumbDropdownItemProps | import("./typings").BreadcrumbItemTextProps | import("./typings").BreadcrumbLinkItemProps), "component"> & {
     component?: import("./typings").BreadcrumbItemComponent | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default BreadcrumbItem;

package/Description/Description.d.ts

@@ -0,0 +1,40 @@
+import { DescriptionContentVariant, DescriptionOrientation } from '@mezzanine-ui/core/description';
+import { DescriptionTitleProps } from './DescriptionTitle';
+import { DescriptionContentProps } from './DescriptionContent';
+import { BadgeProps } from '../Badge/typings';
+import { ButtonProps } from '../Button';
+import { ProgressProps } from '../Progress';
+import { TagProps } from '../Tag/typings';
+export interface DescriptionProps {
+    /**
+     * Custom class name for description
+     */
+    className?: string;
+    /**
+     * Defines what is rendered as the description content
+     */
+    contentProps: DescriptionContentProps | {
+        variant: Extract<DescriptionContentVariant, 'badge'>;
+        badge: BadgeProps;
+    } | {
+        variant: Extract<DescriptionContentVariant, 'button'>;
+        button: ButtonProps;
+    } | {
+        variant: Extract<DescriptionContentVariant, 'progress'>;
+        progress: ProgressProps;
+    } | {
+        variant: Extract<DescriptionContentVariant, 'tags'>;
+        tags: TagProps[];
+    };
+    /**
+     * Define the layout direction between the title and the content
+     * @default 'horizontal'
+     */
+    orientation?: DescriptionOrientation;
+    /**
+     * Props passed to the DescriptionTitle component
+     */
+    titleProps: DescriptionTitleProps;
+}
+declare const Description: import("react").ForwardRefExoticComponent<DescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Description;

package/Description/Description.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import DescriptionTitle from './DescriptionTitle.js';
+import DescriptionContent from './DescriptionContent.js';
+import Button from '../Button/Button.js';
+import TagGroup from '../Tag/TagGroup.js';
+import Tag from '../Tag/Tag.js';
+import Progress from '../Progress/Progress.js';
+import Badge from '../Badge/Badge.js';
+import cx from 'clsx';
+
+const Description = forwardRef(function Description(props, ref) {
+    const { className, contentProps, orientation = 'horizontal', titleProps, } = props;
+    const contentComponent = useMemo(() => {
+        switch (contentProps.variant) {
+            case 'badge':
+                return jsx(Badge, { ...contentProps.badge });
+            case 'button':
+                return jsx(Button, { ...contentProps.button });
+            case 'progress':
+                return jsx(Progress, { ...contentProps.progress });
+            case 'tags':
+                return (jsx(TagGroup, { children: contentProps.tags.map((tagProps, index) => (jsx(Tag, { ...tagProps }, `${tagProps.label}-${index}`))) }));
+            default:
+                return jsx(DescriptionContent, { ...contentProps });
+        }
+    }, [contentProps]);
+    return (jsxs("div", { className: cx(descriptionClasses.host, descriptionClasses.orientation(orientation), className), ref: ref, children: [jsx(DescriptionTitle, { ...titleProps }), contentComponent] }));
+});
+
+export { Description as default };

package/Description/DescriptionContent.d.ts

@@ -0,0 +1,41 @@
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DescriptionSize, DescriptionContentVariant } from '@mezzanine-ui/core/description';
+interface DescriptionContentBaseProps {
+    /**
+     * Custom class name for content
+     */
+    className?: string;
+    /**
+     * Content text
+     */
+    children: string;
+    /**
+     * Control the text size of the content
+     * @default 'main'
+     */
+    size?: DescriptionSize;
+    /**
+     * Define the style and behavior of the content
+     * @default 'normal'
+     */
+    variant?: Extract<DescriptionContentVariant, 'normal' | 'statistic' | 'trend-up' | 'trend-down'>;
+    /**
+     * Custom icon rendered after the content text
+     */
+    icon?: never;
+    /**
+     * Click handler for the icon.
+     */
+    onClickIcon?: never;
+}
+interface DescriptionContentWithClickableIcon {
+    className?: string;
+    children: string;
+    size?: DescriptionSize;
+    variant: Extract<DescriptionContentVariant, 'with-icon'>;
+    icon: IconDefinition;
+    onClickIcon?: VoidFunction;
+}
+export type DescriptionContentProps = DescriptionContentBaseProps | DescriptionContentWithClickableIcon;
+declare const DescriptionContent: import("react").ForwardRefExoticComponent<DescriptionContentProps & import("react").RefAttributes<HTMLSpanElement>>;
+export default DescriptionContent;

package/Description/DescriptionContent.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CaretUpIcon, CaretDownIcon } from '@mezzanine-ui/icons';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const DescriptionContent = forwardRef(function DescriptionContent(props, ref) {
+    const { className, children, icon, onClickIcon, size = 'main', variant = 'normal', } = props;
+    return (jsxs("span", { className: cx(descriptionClasses.contentHost, descriptionClasses.contentVariant(variant), descriptionClasses.contentSize(size), className), ref: ref, children: [variant === 'trend-up' && (jsx(Icon, { className: descriptionClasses.contentTrendUp, icon: CaretUpIcon, size: 16 })), variant === 'trend-down' && (jsx(Icon, { className: descriptionClasses.contentTrendDown, icon: CaretDownIcon, size: 16 })), children, variant === 'with-icon' && icon && (jsx(Icon, { className: descriptionClasses.contentIcon, icon: icon, size: 16, onClick: onClickIcon }))] }));
+});
+
+export { DescriptionContent as default };

package/Description/DescriptionGroup.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+export interface DescriptionGroupProps {
+    /**
+     * Custom class name for group
+     */
+    className?: string;
+    /**
+     * Description elements to be grouped and displayed together
+     */
+    children: ReactElement[];
+}
+declare const DescriptionGroup: import("react").ForwardRefExoticComponent<DescriptionGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DescriptionGroup;

package/Description/DescriptionGroup.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import cx from 'clsx';
+
+const DescriptionGroup = forwardRef(function DescriptionGroup(props, ref) {
+    const { className, children } = props;
+    return (jsx("div", { className: cx(descriptionClasses.groupHost, className), ref: ref, children: children }));
+});
+
+export { DescriptionGroup as default };

package/Description/DescriptionTitle.d.ts

@@ -0,0 +1,45 @@
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DescriptionWidthType } from '@mezzanine-ui/core/description';
+import { BadgeDotVariant } from '@mezzanine-ui/core/badge';
+import { Placement } from '@floating-ui/react-dom';
+interface DescriptionTitleBaseProps {
+    /**
+     * Displays a badge dot alongside the title text
+     */
+    badge?: BadgeDotVariant;
+    /**
+     * Custom class name for title
+     */
+    className?: string;
+    /**
+     * Title text
+     */
+    children: string;
+    /**
+     * Controls the layout width behavior of the title
+     * @default 'stretch'
+     */
+    widthType?: DescriptionWidthType;
+}
+interface DescriptionTitleWithTooltip {
+    /**
+     * An icon displayed after the title text
+     */
+    icon: IconDefinition;
+    /**
+     * Text content displayed in a tooltip when hovering over the icon
+     */
+    tooltip: string;
+    /**
+     * Defines the placement of the tooltip relative to the icon
+     */
+    tooltipPlacement?: Placement;
+}
+interface DescriptionTitleWithoutTooltip {
+    icon?: IconDefinition;
+    tooltip?: undefined;
+    tooltipPlacement?: undefined;
+}
+export type DescriptionTitleProps = (DescriptionTitleBaseProps & DescriptionTitleWithTooltip) | (DescriptionTitleBaseProps & DescriptionTitleWithoutTooltip);
+declare const DescriptionTitle: import("react").ForwardRefExoticComponent<DescriptionTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DescriptionTitle;

package/Description/DescriptionTitle.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { descriptionClasses } from '@mezzanine-ui/core/description';
+import Badge from '../Badge/Badge.js';
+import Tooltip from '../Tooltip/Tooltip.js';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+const DescriptionTitle = forwardRef(function DescriptionTitle(props, ref) {
+    const { badge, className, children, icon, tooltip, tooltipPlacement, widthType = 'stretch', } = props;
+    return (jsxs("div", { className: cx(descriptionClasses.titleHost, descriptionClasses.titleWidth(widthType), className), ref: ref, children: [badge ? (jsx(Badge, { variant: badge, text: children, className: descriptionClasses.titleText })) : (jsx("span", { className: descriptionClasses.titleText, children: children })), icon ? (tooltip ? (jsx(Tooltip, { title: tooltip, options: {
+                    placement: tooltipPlacement !== null && tooltipPlacement !== void 0 ? tooltipPlacement : 'top',
+                }, children: ({ onMouseEnter, onMouseLeave, ref }) => (jsx(Icon, { ref: ref, icon: icon, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, size: 16 })) })) : (jsx(Icon, { icon: icon, size: 16 }))) : null] }));
+});
+
+export { DescriptionTitle as default };

package/Description/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Description } from './Description';
+export type { DescriptionProps } from './Description';
+export { default as DescriptionTitle } from './DescriptionTitle';
+export type { DescriptionTitleProps } from './DescriptionTitle';
+export { default as DescriptionContent } from './DescriptionContent';
+export type { DescriptionContentProps } from './DescriptionContent';
+export { default as DescriptionGroup } from './DescriptionGroup';
+export type { DescriptionGroupProps } from './DescriptionGroup';

package/Description/index.js

@@ -0,0 +1,4 @@
+export { default as Description } from './Description.js';
+export { default as DescriptionTitle } from './DescriptionTitle.js';
+export { default as DescriptionContent } from './DescriptionContent.js';
+export { default as DescriptionGroup } from './DescriptionGroup.js';

package/Dropdown/Dropdown.d.ts

@@ -1,25 +1,138 @@
-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<any>) => ReactNode;
+import { ReactElement } from 'react';
+import { DropdownInputPosition, DropdownItemSharedProps, DropdownOption, DropdownType } from '@mezzanine-ui/core/dropdown/dropdown';
+import { ButtonProps } from '../Button';
+import { InputProps } from '../Input';
+import { PopperPlacement } from '../Popper';
+export interface DropdownProps extends DropdownItemSharedProps {
     /**
-     * Whether to disable triggering onClose while clicked away.
+     * The text of the cancel button.
+     */
+    actionCancelText?: string;
+    /**
+     * The text of the clear button.
+     */
+    actionClearText?: string;
+    /**
+     * The text of the confirm button.
+     */
+    actionConfirmText?: string;
+    /**
+     * The custom action button props of the dropdown.
+     */
+    actionCustomButtonProps?: ButtonProps;
+    /**
+     * The text of the custom action button.
+     */
+    actionText?: string;
+    /**
+     * The active option index for hover/focus state.
+     */
+    activeIndex?: number | null;
+    /**
+     * The children of the dropdown.
+     * This can be a button or an input.
+     */
+    children: ReactElement<ButtonProps> | ReactElement<InputProps>;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The id of the dropdown.
+     */
+    id?: string;
+    /**
+     * The position of the input.
+     * @default 'outside'
+     */
+    inputPosition?: DropdownInputPosition;
+    /**
+     * Whether to match the input value.
+     * @default false
+     */
+    isMatchInputValue?: boolean;
+    /**
+     * The listbox id of the dropdown.
+     */
+    listboxId?: string;
+    /**
+     * The aria-label for the listbox.
+     * If not provided, a default label will be used when there are no options.
+     */
+    listboxLabel?: string;
+    /**
+     * The max height of the dropdown list.
+     */
+    maxHeight?: number | string;
+    /**
+     * Whether the dropdown is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the action cancel is clicked.
+     */
+    onActionCancel?: () => void;
+    /**
+     * Callback fired when the action clear is clicked.
+     */
+    onActionClear?: () => void;
+    /**
+     * Callback fired when the action confirm is clicked.
+     */
+    onActionConfirm?: () => void;
+    /**
+     * Callback fired when the action custom is clicked.
+     */
+    onActionCustom?: () => void;
+    /**
+     * Callback fired when the dropdown is closed.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the item is hovered.
+     */
+    onItemHover?: (index: number) => void;
+    /**
+     * Callback fired when the dropdown is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback fired when the dropdown visibility changes.
+     */
+    onVisibilityChange?: (open: boolean) => void;
+    /**
+     * Callback fired when the item is selected.
+     */
+    onSelect?: (option: DropdownOption) => void;
+    /**
+     * The options of the dropdown.
+     */
+    options: DropdownOption[];
+    /**
+     * The placement of the dropdown.
+     */
+    placement?: PopperPlacement;
+    /**
+     * Whether to set the same width as its anchor element.
+     * @default false
+     */
+    sameWidth?: boolean;
+    /**
+     * If true, display a bar at the top of the dropdown action area.
      * @default false
      */
-    disableClickAway?: boolean;
+    showActionShowTopBar?: boolean;
     /**
-     * The dropdown menu
+     * Whether to show the actions.
      */
-    menu?: ReactNode;
+    showDropdownActions?: boolean;
     /**
-     * The handler fired while clicked away.
+     * The type of the dropdown.
      */
-    onClose?: (event: ClickAwayEvent) => void;
+    type?: DropdownType;
     /**
-     * the props of popper
+     * The z-index of the dropdown.
      */
-    popperProps?: PopperProps;
+    zIndex?: number | string;
 }
-declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
-export default Dropdown;
+export default function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;