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

package/PageHeader/PageHeader.d.ts

@@ -1,40 +1,47 @@
-import { HTMLAttributes, ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { BreadcrumbProps } from '../Breadcrumb';
-import { ButtonProps } from '../Button';
-import { PageToolbarProps } from '../PageToolbar';
-import { TypographyProps } from '../Typography';
+import { ContentHeaderProps } from '../ContentHeader';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-type PageHeaderChild = ReactElement<BreadcrumbProps> | ReactElement<PageToolbarProps> | ReactElement<ButtonProps> | ReactElement<HTMLAttributes<HTMLAnchorElement>> | null | undefined | false;
+type PageHeaderChild = ReactElement<BreadcrumbProps> | ReactElement<ContentHeaderProps> | null | undefined | false;
 /**
  * Props for the PageHeader component.
  * Extends native HTML header element props.
  */
 export type PageHeaderProps = NativeElementPropsWithoutKeyAndRef<'header'> & {
-    /** Optional back button properties */
-    onBackClick?: () => void;
-    /** Optional description text displayed below the title */
-    description?: string;
-    /** Main title text for the page header */
-    title: string;
-    /** HTML element type for the title (defaults to 'h2') */
-    titleComponent?: TypographyProps['component'];
-    /** Child components: Breadcrumb, PageToolbar, Button, or component with href prop */
+    /**
+     * Child components: Breadcrumb or ContentHeader
+     * */
     children?: PageHeaderChild | PageHeaderChild[];
 };
 /**
- * PageHeader component displays a page title with optional breadcrumb navigation,
- * description, back button, and action toolbar.
+ * PageHeader component
+ *
+ * Used to display the page header, typically containing a `<Breadcrumb />` and a `<ContentHeader />`.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader>
+ *   <Breadcrumb
+ *     links={[
+ *       { id: '1', children: 'Home', href: '/' },
+ *       { id: '2', children: 'Page Header' },
+ *     ]}
+ *   />
+ *
+ *   <ContentHeader
+ *     title="Page Title"
+ *     description="This is the page description."
+ *   >
+ *     <Button variant="base-secondary">Secondary</Button>
+ *     <Button>Primary</Button>
+ *   </ContentHeader>
+ * </PageHeader>
+ * ```
  */
 declare const PageHeader: import("react").ForwardRefExoticComponent<NativeElementPropsWithoutKeyAndRef<"header"> & {
-    /** Optional back button properties */
-    onBackClick?: () => void;
-    /** Optional description text displayed below the title */
-    description?: string;
-    /** Main title text for the page header */
-    title: string;
-    /** HTML element type for the title (defaults to 'h2') */
-    titleComponent?: TypographyProps["component"];
-    /** Child components: Breadcrumb, PageToolbar, Button, or component with href prop */
+    /**
+     * Child components: Breadcrumb or ContentHeader
+     * */
     children?: PageHeaderChild | PageHeaderChild[];
 } & import("react").RefAttributes<HTMLElement>>;
 export default PageHeader;

package/PageHeader/PageHeader.js

@@ -1,70 +1,76 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, Children, isValidElement, cloneElement } from 'react';
-import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import { jsxs } from 'react/jsx-runtime';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { pageHeaderClasses } from '@mezzanine-ui/core/page-header';
-import Button from '../Button/Button.js';
-import Typography from '../Typography/Typography.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import Breadcrumb from '../Breadcrumb/Breadcrumb.js';
-import PageToolbar from '../PageToolbar/PageToolbar.js';
+import ContentHeader from '../ContentHeader/ContentHeader.js';
 import cx from 'clsx';
 
 const getBreadcrumbAndToolbar = (children) => {
     let breadcrumb;
-    let pageToolbar;
-    let backButtonOrLink;
-    const childrenArray = Children.toArray(children);
+    let contentHeader;
+    const childrenArray = flattenChildren(children);
     if (children) {
         childrenArray.forEach((child) => {
             if (!isValidElement(child))
                 return;
             if (child.type === Breadcrumb) {
+                if (breadcrumb) {
+                    console.warn('[Mezzanine][PageHeader] only accepts one Breadcrumb as its child.');
+                }
                 breadcrumb = child;
             }
-            else if (child.type === PageToolbar) {
-                pageToolbar = cloneElement(child, {
+            else if (child.type === ContentHeader) {
+                if (contentHeader) {
+                    console.warn('[Mezzanine][PageHeader] only accepts one ContentHeader as its child.');
+                }
+                const sizeProp = child.props.size;
+                if (sizeProp !== undefined && sizeProp !== 'main') {
+                    console.warn('[Mezzanine][PageHeader] ContentHeader size prop will be overridden to "main".');
+                }
+                contentHeader = cloneElement(child, {
                     size: 'main',
                 });
             }
-            else if (child.type === Button) {
-                backButtonOrLink = cloneElement(child, {
-                    icon: {
-                        position: 'icon-only',
-                        src: ChevronLeftIcon,
-                    },
-                    size: 'sub',
-                    variant: 'base-tertiary',
-                });
-            }
-            else if (child.type === 'a') {
-                backButtonOrLink = cloneElement(child, {
-                    children: (jsx(Button, { component: 'div', icon: {
-                            position: 'icon-only',
-                            src: ChevronLeftIcon,
-                        }, size: "sub", variant: "base-tertiary" })),
-                });
-            }
             else {
-                if (process.env.NODE_ENV !== 'production') {
-                    console.warn('PageHeader only accepts Breadcrumb, PageToolbar, Button or component with href prop as its children.');
-                }
+                console.warn('[Mezzanine][PageHeader] only accepts Breadcrumb or ContentHeader as its children.');
             }
         });
     }
-    return { breadcrumb, backButtonOrLink, pageToolbar };
+    if (!contentHeader) {
+        console.error('[Mezzanine][PageHeader] requires a ContentHeader as its child.');
+    }
+    return { breadcrumb, contentHeader };
 };
 /**
- * PageHeader component displays a page title with optional breadcrumb navigation,
- * description, back button, and action toolbar.
+ * PageHeader component
+ *
+ * Used to display the page header, typically containing a `<Breadcrumb />` and a `<ContentHeader />`.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader>
+ *   <Breadcrumb
+ *     links={[
+ *       { id: '1', children: 'Home', href: '/' },
+ *       { id: '2', children: 'Page Header' },
+ *     ]}
+ *   />
+ *
+ *   <ContentHeader
+ *     title="Page Title"
+ *     description="This is the page description."
+ *   >
+ *     <Button variant="base-secondary">Secondary</Button>
+ *     <Button>Primary</Button>
+ *   </ContentHeader>
+ * </PageHeader>
+ * ```
  */
 const PageHeader = forwardRef(function PageHeader(props, ref) {
-    const { children, className, description, onBackClick, title, titleComponent = 'h2', ...rest } = props;
-    const { backButtonOrLink, breadcrumb, pageToolbar } = getBreadcrumbAndToolbar(children);
-    // prop onBack takes precedence over backButtonOrLink
-    const backButton = onBackClick ? (jsx(Button, { icon: {
-            position: 'icon-only',
-            src: ChevronLeftIcon,
-        }, onClick: onBackClick, size: "sub", variant: "base-tertiary" })) : (backButtonOrLink);
-    return (jsxs("header", { ...rest, className: cx(pageHeaderClasses.host, className), ref: ref, children: [breadcrumb, jsxs("span", { className: pageHeaderClasses.headerContent, children: [jsxs("span", { className: pageHeaderClasses.pageTitleWithIcon, children: [backButton && jsx("div", { children: backButton }), jsxs("div", { className: pageHeaderClasses.pageTitleText, children: [jsx(Typography, { align: "left", color: "text-neutral-solid", component: titleComponent, variant: "h2", children: title }), description && (jsx(Typography, { align: "left", color: "text-neutral", component: "p", variant: "caption", children: description }))] })] }), pageToolbar] })] }));
+    const { children, className, ...rest } = props;
+    const { breadcrumb, contentHeader } = getBreadcrumbAndToolbar(children);
+    return (jsxs("header", { ...rest, className: cx(pageHeaderClasses.host, className), ref: ref, children: [breadcrumb, contentHeader] }));
 });
 
 export { PageHeader as default };

package/ResultState/ResultState.d.ts

@@ -1,4 +1,5 @@
 import type { ResultStateSize, ResultStateType } from '@mezzanine-ui/core/result-state';
+import { ReactElement } from 'react';
 import type { ButtonProps } from '../Button';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 /**
@@ -26,6 +27,14 @@ export interface ResultStateProps extends NativeElementPropsWithoutKeyAndRef<'di
      * - Two buttons: Both `secondaryButton` and `primaryButton`
      */
     actions?: ResultStateActions;
+    /**
+     * Child button elements for actions. <br />
+     * Can be a single Button element or an array of one or two Button elements. <br />
+     * When using children, the first Button is treated as secondary and the second as primary. <br />
+     * If only one Button is provided, it is treated as secondary. <br />
+     * If actions provided, children will be ignored. <br />
+     */
+    children?: ReactElement<ButtonProps> | [ReactElement<ButtonProps>] | [ReactElement<ButtonProps>, ReactElement<ButtonProps>];
     /**
      * Optional description text displayed below the title.
      * Provides additional context or details about the result state.

package/ResultState/ResultState.js

@@ -1,9 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { resultStateClasses } from '@mezzanine-ui/core/result-state';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, isValidElement, cloneElement } from 'react';
 import { DangerousFilledIcon, ErrorFilledIcon, WarningFilledIcon, QuestionFilledIcon, CheckedFilledIcon, InfoFilledIcon } from '@mezzanine-ui/icons';
 import Button from '../Button/Button.js';
 import ButtonGroup from '../Button/ButtonGroup.js';
+import { flattenChildren } from '../utils/flatten-children.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -15,10 +16,41 @@ const iconMap = {
     error: ErrorFilledIcon,
     failure: DangerousFilledIcon,
 };
+const renderButtonOrElement = (button, size, variant) => {
+    if (!button)
+        return null;
+    if (isValidElement(button)) {
+        return cloneElement(button, { size, variant });
+    }
+    return jsx(Button, { ...button, size: size, variant: variant });
+};
 const ResultState = forwardRef(function ResultState(props, ref) {
-    const { actions, className, description, size = 'main', title, type = 'information', ...rest } = props;
+    const { actions, className, children, description, size = 'main', title, type = 'information', ...rest } = props;
     const icon = useMemo(() => iconMap[type], [type]);
-    return (jsx("div", { ...rest, ref: ref, className: cx(resultStateClasses.host, resultStateClasses.type(type), resultStateClasses.size(size), className), children: jsxs("div", { className: resultStateClasses.container, children: [jsx(Icon, { className: resultStateClasses.icon, icon: icon }), jsx("h3", { className: resultStateClasses.title, children: title }), description && jsx("p", { className: resultStateClasses.description, children: description }), ((actions === null || actions === void 0 ? void 0 : actions.secondaryButton) || (actions === null || actions === void 0 ? void 0 : actions.primaryButton)) && (jsxs(ButtonGroup, { className: resultStateClasses.actions, children: [(actions === null || actions === void 0 ? void 0 : actions.secondaryButton) && (jsx(Button, { size: size, variant: "base-secondary", ...actions.secondaryButton })), (actions === null || actions === void 0 ? void 0 : actions.primaryButton) && (jsx(Button, { size: size, variant: "base-primary", ...actions.primaryButton }))] }))] }) }));
+    const flatChildren = flattenChildren(children);
+    const fragmentButtons = actions &&
+        ('secondaryButton' in actions ? (jsxs(Fragment, { children: [renderButtonOrElement(actions.secondaryButton, size, 'base-secondary'), renderButtonOrElement(actions.primaryButton, size, 'base-primary')] })) : (renderButtonOrElement(actions, size, 'base-secondary')));
+    const renderChildren = !fragmentButtons &&
+        flatChildren.length > 0 &&
+        flatChildren.map((child, index) => {
+            if (!isValidElement(child)) {
+                return null;
+            }
+            else if (child.type === Button) {
+                switch (index) {
+                    case 0:
+                        return renderButtonOrElement(child, size, 'base-secondary');
+                    case 1:
+                        return renderButtonOrElement(child, size, 'base-primary');
+                    default:
+                        console.warn('Only up to two Button components are allowed as children of ResultState.');
+                        return null;
+                }
+            }
+            console.warn('Only Button components are allowed as children of ResultState.');
+            return null;
+        });
+    return (jsx("div", { ...rest, ref: ref, className: cx(resultStateClasses.host, resultStateClasses.type(type), resultStateClasses.size(size), className), children: jsxs("div", { className: resultStateClasses.container, children: [jsx(Icon, { className: resultStateClasses.icon, icon: icon }), jsx("h3", { className: resultStateClasses.title, children: title }), description && jsx("p", { className: resultStateClasses.description, children: description }), actions || children ? (jsx(ButtonGroup, { className: resultStateClasses.actions, children: fragmentButtons || renderChildren })) : null] }) }));
 });
 
 export { ResultState as default };

package/Scrollbar/Scrollbar.d.ts

@@ -0,0 +1,9 @@
+import 'overlayscrollbars/overlayscrollbars.css';
+import { OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
+import type { ScrollbarProps } from './typings';
+/**
+ * The react component for `mezzanine` scrollbar.
+ * A customizable scrollbar container that provides consistent styling across all browsers
+ */
+declare const Scrollbar: import("react").ForwardRefExoticComponent<ScrollbarProps & import("react").RefAttributes<OverlayScrollbarsComponentRef<"div">>>;
+export default Scrollbar;

package/Scrollbar/Scrollbar.js

@@ -0,0 +1,78 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect, useMemo, useCallback } from 'react';
+import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { scrollbarClasses } from '@mezzanine-ui/core/scrollbar';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` scrollbar.
+ * A customizable scrollbar container that provides consistent styling across all browsers
+ */
+const Scrollbar = forwardRef(function Scrollbar(props, ref) {
+    const { children, className, defer = true, disabled = false, events, maxHeight, maxWidth, onViewportReady, options, style, ...rest } = props;
+    // Register ClickScrollPlugin once (required for clickScroll option to work)
+    useEffect(() => {
+        OverlayScrollbars.plugin(ClickScrollPlugin);
+    }, []);
+    const mergedOptions = useMemo(() => ({
+        ...options,
+        overflow: {
+            x: 'scroll',
+            y: 'scroll',
+        },
+        scrollbars: {
+            autoHide: 'scroll',
+            autoHideDelay: 600,
+            clickScroll: true,
+            ...options === null || options === void 0 ? void 0 : options.scrollbars,
+        },
+    }), [options]);
+    const containerStyle = useMemo(() => ({
+        ...style,
+        maxHeight,
+        maxWidth,
+    }), [maxHeight, maxWidth, style]);
+    // Merge events with onViewportReady callback
+    const mergedEvents = useMemo(() => {
+        if (!onViewportReady && !events)
+            return undefined;
+        return {
+            ...events,
+            initialized: (instance) => {
+                const { viewport } = instance.elements();
+                onViewportReady === null || onViewportReady === void 0 ? void 0 : onViewportReady(viewport, instance);
+                if (events && typeof events !== 'boolean' && events.initialized) {
+                    const initializedHandler = events.initialized;
+                    if (Array.isArray(initializedHandler)) {
+                        initializedHandler.forEach((handler) => handler(instance));
+                    }
+                    else {
+                        initializedHandler(instance);
+                    }
+                }
+            },
+        };
+    }, [events, onViewportReady]);
+    // Callback ref for disabled mode - triggers onViewportReady with the div element
+    const disabledRef = useCallback((element) => {
+        // Forward to user ref if provided
+        if (typeof ref === 'function') {
+            ref(element);
+        }
+        else if (ref) {
+            ref.current = element;
+        }
+        // Call onViewportReady with the div element (no OverlayScrollbars instance)
+        if (element && onViewportReady) {
+            onViewportReady(element);
+        }
+    }, [onViewportReady, ref]);
+    // When disabled, render a plain div instead of OverlayScrollbarsComponent
+    if (disabled) {
+        return (jsx("div", { ...rest, ref: disabledRef, className: className, style: containerStyle, children: children }));
+    }
+    return (jsx(OverlayScrollbarsComponent, { ...rest, ref: ref, className: cx(scrollbarClasses.host, className), defer: defer, element: "div", events: mergedEvents, options: mergedOptions, style: containerStyle, children: children }));
+});
+
+export { Scrollbar as default };

package/Scrollbar/index.d.ts

@@ -0,0 +1,2 @@
+export type { ScrollbarProps } from './typings';
+export { default } from './Scrollbar';

package/Scrollbar/index.js

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

package/Scrollbar/typings.d.ts

@@ -0,0 +1,47 @@
+import type { OverlayScrollbars, PartialOptions } from 'overlayscrollbars';
+import type { OverlayScrollbarsComponentProps } from 'overlayscrollbars-react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface ScrollbarProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * The content to be rendered inside the scrollable container.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to defer the initialization of OverlayScrollbars.
+     * This can improve initial render performance.
+     * @default true
+     */
+    defer?: boolean | object;
+    /**
+     * When true, disables the custom scrollbar and renders as a plain div.
+     * Useful for nested contexts where custom scrollbar is not needed.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The maximum height of the scrollable container.
+     * Can be a CSS value string (e.g., '300px', '50vh') or a number (treated as pixels).
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * The maximum width of the scrollable container.
+     * Can be a CSS value string (e.g., '500px', '100%') or a number (treated as pixels).
+     */
+    maxWidth?: CSSProperties['maxWidth'];
+    /**
+     * Additional options to pass to OverlayScrollbars.
+     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/options
+     */
+    options?: PartialOptions;
+    /**
+     * Event handlers for OverlayScrollbars events.
+     * @see https://kingsora.github.io/OverlayScrollbars/#!documentation/events
+     */
+    events?: OverlayScrollbarsComponentProps['events'];
+    /**
+     * Callback fired when the scrollbar is initialized.
+     * Provides access to the viewport element for external integrations (e.g., virtualization, DnD).
+     */
+    onViewportReady?: (viewport: HTMLDivElement, instance?: OverlayScrollbars) => void;
+}

package/Select/SelectTrigger.js

@@ -11,7 +11,7 @@ import cx from 'clsx';
 const isMultipleSelection = (props) => props.mode === 'multiple';
 function SelectTriggerComponent(props) {
     var _a, _b, _c;
-    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
+    const { active, className, disabled, forceHideSuffixActionIcon, inputProps, innerRef, inputRef, isForceClearable = false, mode = 'single', onTagClose, overflowStrategy = 'counter', placeholder, readOnly, required, searchText, size = 'main', showTextInputAfterTags = false, suffixAction, suffixActionIcon: suffixActionIconProp, type = 'default', onClick, ...restTextFieldProps } = props;
     /** Render value to string for single selection trigger input */
     const renderValue = () => {
         var _a, _b;
@@ -46,9 +46,10 @@ function SelectTriggerComponent(props) {
     return (jsxs(TextField, { ref: innerRef, ...interactiveProps, ...restTextFieldProps, onClick: onClick, active: active, className: cx(selectClasses.trigger, selectClasses.triggerMode(mode), selectClasses.triggerSelected(Array.isArray(props.value) ? (_a = props.value) === null || _a === void 0 ? void 0 : _a.length : props.value), {
             [selectClasses.triggerReadOnly]: readOnly,
             [selectClasses.triggerDisabled]: disabled,
-        }, className), error: type === 'error', size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, clearable: mode === 'multiple' &&
-            Array.isArray(props.value) &&
-            !!props.value.length, children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) && (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value }))] }));
+        }, className), error: type === 'error', size: size, suffix: forceHideSuffixActionIcon ? undefined : suffixActionIcon, clearable: isForceClearable ||
+            (mode === 'multiple' &&
+                Array.isArray(props.value) &&
+                !!props.value.length), children: [jsx("input", { ...inputProps, ref: inputRef, "aria-autocomplete": "list", "aria-haspopup": "listbox", autoComplete: "off", className: cx(selectClasses.triggerInput, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className), disabled: disabled, placeholder: placeholder, readOnly: (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.readOnly) !== null && _b !== void 0 ? _b : true, required: required, type: "text", value: renderValue() }), isMultipleSelection(props) && ((_c = props.value) === null || _c === void 0 ? void 0 : _c.length) && (jsx(SelectTriggerTags, { disabled: disabled, overflowStrategy: overflowStrategy, inputProps: inputProps, inputRef: inputRef, onTagClose: onTagClose, readOnly: readOnly, required: required, searchText: searchText, size: size, showTextInputAfterTags: showTextInputAfterTags, value: props.value }))] }));
 }
 const SelectTrigger = forwardRef((props, ref) => {
     if (props.mode === 'multiple') {

package/Select/index.d.ts

@@ -12,5 +12,3 @@ export { default as OptionGroup } from '../Menu/MenuItemGroup';
 export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
 export type { TreeSelectProps } from './TreeSelect';
 export { default as TreeSelect } from './TreeSelect';
-export type { AutoCompleteProps } from './AutoComplete';
-export { default as AutoComplete } from './AutoComplete';

package/Select/index.js

@@ -5,4 +5,3 @@ export { default } from './Select.js';
 export { default as Option } from './Option.js';
 export { default as OptionGroup } from '../Menu/MenuItemGroup.js';
 export { default as TreeSelect } from './TreeSelect.js';
-export { default as AutoComplete } from './AutoComplete.js';

package/Select/typings.d.ts

@@ -1,6 +1,6 @@
+import { SelectTriggerType } from '@mezzanine-ui/core/select';
 import { ReactElement, Ref } from 'react';
 import Icon, { IconProps } from '../Icon';
-import { SelectTriggerType } from '@mezzanine-ui/core/select';
 import { TextFieldProps } from '../TextField';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface SelectValue<T = string> {
@@ -48,6 +48,11 @@ export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' |
     onTagClose?: (target: SelectValue) => void;
     /** Placeholder text when not selected */
     placeholder?: string;
+    /**
+     * Whether to force show clearable icon regardless of value state.
+     * @default false
+     */
+    isForceClearable?: boolean;
     /**
      * Whether the input is readonly.
      * @default false

package/Selection/Selection.js

@@ -36,7 +36,7 @@ const Selection = forwardRef(function Selection(props, ref) {
             [selectionClasses.readonly]: readonly,
         }, className), ...(disabled && { 'aria-disabled': true }), ...(onClick && { onClick }), children: [jsxs("div", { className: selectionClasses.container, children: [haveImage
                         ? jsx("img", { src: image, alt: text, className: selectionClasses.selectionImage, style: { objectFit: imageObjectFit } })
-                        : jsx(Icon, { "aria-hidden": "true", className: selectionClasses.icon, color: "neutral-solid", icon: customIcon || FileIcon, size: SELECTION_ICON_SIZE }), jsxs("div", { className: selectionClasses.content, children: [jsx(Typography, { id: textId, color: "text-neutral-solid", variant: "body-highlight", className: selectionClasses.text, children: text }), supportingText && (jsx(Typography, { id: supportingTextId, color: "text-neutral", variant: "caption", className: selectionClasses.supportingText, children: supportingText }))] })] }), !readonly && (jsx("input", { ref: inputRefProp, type: selector, name: name, id: inputId, className: selectionClasses.input, disabled: disabled, ...(checkedProp !== undefined
+                        : jsx(Icon, { "aria-hidden": "true", className: selectionClasses.icon, color: "neutral-solid", icon: customIcon || FileIcon, size: SELECTION_ICON_SIZE }), jsxs("div", { className: selectionClasses.content, children: [jsx(Typography, { className: selectionClasses.text, color: "text-neutral-solid", display: "block", ellipsis: true, id: textId, variant: "body-highlight", children: text }), supportingText && (jsx(Typography, { className: selectionClasses.supportingText, color: "text-neutral", display: "block", ellipsis: true, id: supportingTextId, variant: "caption", children: supportingText }))] })] }), !readonly && (jsx("input", { ref: inputRefProp, type: selector, name: name, id: inputId, className: selectionClasses.input, disabled: disabled, ...(checkedProp !== undefined
                     ? { checked: checkedProp }
                     : { defaultChecked }), value: value, onChange: onInputChange, ...(isRadioOrCheckbox && checkedProp !== undefined
                     ? { 'aria-checked': checkedProp }

package/Selection/SelectionGroup.d.ts

@@ -0,0 +1,28 @@
+import { ComponentProps, ReactElement } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import Selection, { SelectionProps } from './Selection';
+export interface SelectionGroupBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * The class name of the selection group.
+     */
+    className?: string;
+}
+export interface SelectionGroupProps extends SelectionGroupBaseProps {
+    /**
+     * The selections in the group.
+     * Only Selection components are allowed.
+     * When provided, will take priority over selections prop.
+     */
+    children?: ReactElement<ComponentProps<typeof Selection>> | ReactElement<ComponentProps<typeof Selection>>[];
+    /**
+     * The selections array.
+     * When provided, Selection components will be automatically rendered.
+     * Will be ignored if children is provided.
+     */
+    selections?: SelectionProps[];
+}
+/**
+ * The react component for `mezzanine` selection group.
+ */
+declare const SelectionGroup: import("react").ForwardRefExoticComponent<SelectionGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SelectionGroup;

package/Slider/useSlider.js

@@ -1,4 +1,4 @@
-import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, sortSliderValue, findClosetValueIndex, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
+import { isRangeSlider, fixRangeSliderValue, fixSingleSliderValue, toSliderCssVars, getPercentage, findClosetValueIndex, sortSliderValue, getSliderRect, getValueFromClientX, roundToStep } from '@mezzanine-ui/core/slider';
 import { useRef, useState } from 'react';
 import { useDocumentEvents } from '../hooks/useDocumentEvents.js';