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

package/Calendar/useRangeCalendarControls.d.ts

@@ -2,14 +2,14 @@ import { DateType, CalendarMode } from '@mezzanine-ui/core/calendar';
 export declare function useRangeCalendarControls(referenceDateProp: DateType, mode?: CalendarMode): {
     currentMode: CalendarMode;
     onMonthControlClick: () => void;
-    onFirstNext: () => void;
-    onFirstPrev: () => void;
-    onFirstDoubleNext: () => void;
-    onFirstDoublePrev: () => void;
-    onSecondNext: () => void;
-    onSecondPrev: () => void;
-    onSecondDoubleNext: () => void;
-    onSecondDoublePrev: () => void;
+    onFirstNext: (() => void) | undefined;
+    onFirstPrev: (() => void) | undefined;
+    onFirstDoubleNext: (() => void) | undefined;
+    onFirstDoublePrev: (() => void) | undefined;
+    onSecondNext: (() => void) | undefined;
+    onSecondPrev: (() => void) | undefined;
+    onSecondDoubleNext: (() => void) | undefined;
+    onSecondDoublePrev: (() => void) | undefined;
     onYearControlClick: () => void;
     popModeStack: () => void;
     referenceDates: [string, string];

package/Calendar/useRangeCalendarControls.js

@@ -37,54 +37,65 @@ function useRangeCalendarControls(referenceDateProp, mode) {
     const { currentMode, pushModeStack, popModeStack } = useCalendarModeStack(mode || 'day');
     const modifierGroup = useCalendarControlModifiers();
     // First calendar controls
-    const onFirstPrev = () => {
+    const onFirstPrev = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [handleMinus] = modifiers;
-        const newFirst = handleMinus(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
-    const onFirstNext = () => {
+        return () => {
+            const [handleMinus] = modifiers;
+            const newFirst = handleMinus(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
+    const onFirstNext = useMemo(() => {
         const modifiers = modifierGroup[currentMode].single;
         if (!modifiers)
             return;
-        const [, handleAdd] = modifiers;
-        const newFirst = handleAdd(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
-    const onFirstDoublePrev = () => {
-        const [handleMinus] = modifierGroup[currentMode].double;
-        const newFirst = handleMinus(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
-    const onFirstDoubleNext = () => {
-        const [, handleAdd] = modifierGroup[currentMode].double;
-        const newFirst = handleAdd(firstReferenceDate);
-        setFirstReferenceDate(newFirst);
-        setSecondReferenceDate(getSecondCalendarDate(newFirst));
-    };
+        return () => {
+            const [, handleAdd] = modifiers;
+            const newFirst = handleAdd(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
+    const onFirstDoublePrev = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [handleMinus] = modifiers;
+            const newFirst = handleMinus(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
+    const onFirstDoubleNext = useMemo(() => {
+        const modifiers = modifierGroup[currentMode].double;
+        if (!modifiers)
+            return;
+        return () => {
+            const [, handleAdd] = modifiers;
+            const newFirst = handleAdd(firstReferenceDate);
+            setFirstReferenceDate(newFirst);
+            setSecondReferenceDate(getSecondCalendarDate(newFirst));
+        };
+    }, [currentMode, modifierGroup, firstReferenceDate, getSecondCalendarDate]);
     // Second calendar controls (same behavior as first)
     const onSecondPrev = onFirstPrev;
     const onSecondNext = onFirstNext;
     const onSecondDoublePrev = onFirstDoublePrev;
     const onSecondDoubleNext = onFirstDoubleNext;
-    const onMonthControlClick = () => {
+    const onMonthControlClick = useCallback(() => {
         setFirstReferenceDate(firstReferenceDate);
         setSecondReferenceDate(addYear(firstReferenceDate, 1));
         pushModeStack('month');
-    };
-    const onYearControlClick = () => {
+    }, [firstReferenceDate, pushModeStack, addYear]);
+    const onYearControlClick = useCallback(() => {
         setFirstReferenceDate(firstReferenceDate);
         setSecondReferenceDate(addYear(firstReferenceDate, calendarYearModuler));
         pushModeStack('year');
-    };
-    // Wrapper functions for updating reference dates
-    // These should be used when switching modes (e.g., from month picker back to day mode)
-    // They update the target calendar and maintain the offset between calendars
+    }, [firstReferenceDate, pushModeStack, addYear]);
     const updateFirstReferenceDate = useCallback((date) => {
         setFirstReferenceDate(date);
         setSecondReferenceDate(getSecondCalendarDate(date));

package/Checkbox/index.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import { CheckboxProps } from './Checkbox';
+import type { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import type { CheckboxProps } from './Checkbox';
 export type { CheckboxGroupLayout, CheckboxGroupOption, } from '@mezzanine-ui/core/checkbox';
 export { default as CheckAll } from './CheckAll';
 export type { CheckAllProps } from './CheckAll';
@@ -11,6 +11,5 @@ export type { CheckboxComponent, CheckboxPropsBase } from './typings';
  * @remark
  * Add type alias here for parsable to react docgen typescript.
  */
-type GenericCheckbox = (props: PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
-declare const _default: GenericCheckbox;
-export default _default;
+export type GenericCheckbox = (props: PropsWithoutRef<CheckboxProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
+export { default } from './Checkbox';

package/Checkbox/index.js

@@ -1,7 +1,3 @@
-import Checkbox from './Checkbox.js';
 export { default as CheckAll } from './CheckAll.js';
 export { default as CheckboxGroup } from './CheckboxGroup.js';
-
-
-
-export { Checkbox as default };
+export { default } from './Checkbox.js';

package/ContentHeader/ContentHeader.d.ts

@@ -0,0 +1,160 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '../Button';
+import { SearchInputProps } from '../Input';
+import { SelectProps } from '../Select';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { IconDefinition } from '@mezzanine-ui/icons';
+import { DropdownProps } from '../Dropdown';
+type SegmentedControlProps = {
+    mock: 'SegmentedControlProps';
+};
+type ContentHeaderChild = ReactElement<SearchInputProps> | ReactElement<SelectProps> | ReactElement<SegmentedControlProps> | ReactElement<ButtonProps> | ReactElement<DropdownProps> | ReactElement<{
+    href: string;
+}> | null | false | undefined;
+/**
+ * Props for the ContentHeader component.
+ *
+ * Defines a flexible header with title, description, filter, action buttons, and utility icons.
+ * Commonly used in page headers for primary user actions.
+ */
+export type ContentHeaderProps = Omit<NativeElementPropsWithoutKeyAndRef<'header'>, 'children'> & {
+    /**
+     * Button configuration for actions. <br />
+     * Automatically applies proper styling and order. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     * Buttons with variants other than primary, secondary, and destructive will not be rendered. <br />
+     */
+    actions?: ButtonProps[];
+    /**
+     * Children elements: <br />
+     * - Back button which Component with href prop.
+     *     - example 1: `<a href="..." />` <br />
+     *     - example 2: `<Link href="..." />` <br />
+     *     - conflicting prop: `onBackClick` <br />
+     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
+     * - Action buttons `<Button />` <br />
+     * - Icon-only utility buttons `<Button icon="..." />` <br />
+     * - Overflow icon utility dropdown `<Dropdown> <Button icon="..." /> </Dropdown>` <br />
+     * <br />
+     * Can mix and match the above children. <br />
+     * The order of children does not matter as they will be arranged properly. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     */
+    children?: ContentHeaderChild[] | ContentHeaderChild;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: {
+        variant: 'search' | 'select' | 'segmentedControl';
+    } & (SearchInputProps | SelectProps | SegmentedControlProps);
+    /**
+     * Optional back button properties. <br />
+     * When provided, a back button will be rendered on the left side of the title. <br />
+     * href prop from children will be ignored if onBackClick is provided. <br />
+     * */
+    onBackClick?: () => void;
+    /**
+     * Size variant of the toolbar. <br />
+     * Affects the size of buttons and filter component. <br />
+     */
+    size?: 'main' | 'sub';
+    /** Main title text for the content header */
+    title: string;
+    /**
+     * HTML element type for the title (defaults to 'h1' for main size and 'h2' for sub size)
+     */
+    titleComponent?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /**
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
+     */
+    utilities?: ((ButtonProps & {
+        icon: IconDefinition;
+    }) | DropdownProps)[];
+};
+/**
+ * ContentHeader component. <br />
+ * A flexible header with title, description, filter, action buttons, and utility icons. <br />
+ * Commonly used in page headers for primary user actions. <br />
+ *
+ * @example
+ * ```tsx
+ *  <ContentHeader
+ *    size="main"
+ *    title={'ContentHeader Title'}
+ *    description="description."
+ *  >
+ *    <a href="" title="back" />  <-- Back button
+ *
+ *    <Input variant="search" placeholder="Search..." />  <-- Filter component
+ *    <Button variant="base-secondary">Secondary</Button>  <-- Action buttons
+ *    <Button>Primary</Button>
+ *
+ *    <Button icon={PlusIcon} />  <-- Utility icon button
+ *    <Dropdown
+ *      options={[
+ *        { id: '1', name: 'Option 1' },
+ *        { id: '2', name: 'Option 2' },
+ *      ]}
+ *    >
+ *      <Button icon={DotHorizontalIcon} />
+ *    </Dropdown>  <-- Utility dropdown
+ *  </ContentHeader>
+ * ```
+ */
+declare const ContentHeader: import("react").ForwardRefExoticComponent<Omit<NativeElementPropsWithoutKeyAndRef<"header">, "children"> & {
+    /**
+     * Button configuration for actions. <br />
+     * Automatically applies proper styling and order. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     * Buttons with variants other than primary, secondary, and destructive will not be rendered. <br />
+     */
+    actions?: ButtonProps[];
+    /**
+     * Children elements: <br />
+     * - Back button which Component with href prop.
+     *     - example 1: `<a href="..." />` <br />
+     *     - example 2: `<Link href="..." />` <br />
+     *     - conflicting prop: `onBackClick` <br />
+     * - Filter component (SearchInput, Select, or SegmentedControl) <br />
+     * - Action buttons `<Button />` <br />
+     * - Icon-only utility buttons `<Button icon="..." />` <br />
+     * - Overflow icon utility dropdown `<Dropdown> <Button icon="..." /> </Dropdown>` <br />
+     * <br />
+     * Can mix and match the above children. <br />
+     * The order of children does not matter as they will be arranged properly. <br />
+     * When conflicting with other props, props take priority over children. <br />
+     */
+    children?: ContentHeaderChild[] | ContentHeaderChild;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Filter component (SearchInput, Select, or SegmentedControl) */
+    filter?: {
+        variant: "search" | "select" | "segmentedControl";
+    } & (SearchInputProps | SelectProps | SegmentedControlProps);
+    /**
+     * Optional back button properties. <br />
+     * When provided, a back button will be rendered on the left side of the title. <br />
+     * href prop from children will be ignored if onBackClick is provided. <br />
+     * */
+    onBackClick?: () => void;
+    /**
+     * Size variant of the toolbar. <br />
+     * Affects the size of buttons and filter component. <br />
+     */
+    size?: "main" | "sub";
+    /** Main title text for the content header */
+    title: string;
+    /**
+     * HTML element type for the title (defaults to 'h1' for main size and 'h2' for sub size)
+     */
+    titleComponent?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
+    /**
+     * Icon-only utility buttons `<Button icon="..." />`. <br />
+     * They usually appear as smaller buttons with only an icon and no text.
+     */
+    utilities?: ((ButtonProps & {
+        icon: IconDefinition;
+    }) | DropdownProps)[];
+} & import("react").RefAttributes<HTMLElement>>;
+export default ContentHeader;

package/ContentHeader/ContentHeader.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { contentHeaderClasses } from '@mezzanine-ui/core/content-header';
+import Button from '../Button/Button.js';
+import ButtonGroup from '../Button/ButtonGroup.js';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import { renderFilterProp, renderActionsProp, renderIconButtonsProp, resolveContentHeaderChild } from './utils.js';
+import Typography from '../Typography/Typography.js';
+import cx from 'clsx';
+
+/**
+ * ContentHeader component. <br />
+ * A flexible header with title, description, filter, action buttons, and utility icons. <br />
+ * Commonly used in page headers for primary user actions. <br />
+ *
+ * @example
+ * ```tsx
+ *  <ContentHeader
+ *    size="main"
+ *    title={'ContentHeader Title'}
+ *    description="description."
+ *  >
+ *    <a href="" title="back" />  <-- Back button
+ *
+ *    <Input variant="search" placeholder="Search..." />  <-- Filter component
+ *    <Button variant="base-secondary">Secondary</Button>  <-- Action buttons
+ *    <Button>Primary</Button>
+ *
+ *    <Button icon={PlusIcon} />  <-- Utility icon button
+ *    <Dropdown
+ *      options={[
+ *        { id: '1', name: 'Option 1' },
+ *        { id: '2', name: 'Option 2' },
+ *      ]}
+ *    >
+ *      <Button icon={DotHorizontalIcon} />
+ *    </Dropdown>  <-- Utility dropdown
+ *  </ContentHeader>
+ * ```
+ */
+const ContentHeader = forwardRef(function ContentHeader(props, ref) {
+    const { actions, children, className, description, filter, onBackClick, size = 'main', title, titleComponent = size === 'main' ? 'h1' : 'h2', utilities, ...rest } = props;
+    const renderFilter = renderFilterProp(filter, size);
+    const renderActions = actions ? renderActionsProp(actions, size) : null;
+    const renderUtilities = utilities
+        ? renderIconButtonsProp(utilities, size)
+        : null;
+    const { backButton, filter: filterFromChildren, actions: actionsFromChildren, utilities: utilitiesFromChildren, } = resolveContentHeaderChild(children, size);
+    // prop onBack takes precedence over backButtonOrLink
+    const renderBackButton = onBackClick ? (jsx(Button, { iconType: "icon-only", icon: ChevronLeftIcon, onClick: onBackClick, "aria-label": "Back", type: "button", size: "sub", variant: "base-tertiary" })) : (backButton);
+    return (jsxs("header", { ...rest, className: cx(contentHeaderClasses.host, contentHeaderClasses.size(size), className), ref: ref, children: [jsxs("span", { className: contentHeaderClasses.titleArea, children: [renderBackButton && (jsx("span", { className: contentHeaderClasses.backButton, children: renderBackButton })), jsxs("span", { className: contentHeaderClasses.textGroup, children: [jsx(Typography, { component: titleComponent, align: "left", color: "text-neutral-solid", variant: size === 'main' ? 'h2' : 'h3', children: title }), description && (jsx(Typography, { align: "left", color: "text-neutral", variant: "caption", children: description }))] })] }), jsxs("span", { className: contentHeaderClasses.actionArea, children: [renderFilter || filterFromChildren, (renderActions || actionsFromChildren.length > 0) && (jsx(ButtonGroup, { children: renderActions || actionsFromChildren })), (renderUtilities || utilitiesFromChildren.length > 0) && (jsx("span", { className: contentHeaderClasses.utilities, children: renderUtilities || utilitiesFromChildren }))] })] }));
+});
+
+export { ContentHeader as default };

package/ContentHeader/index.d.ts

@@ -0,0 +1,2 @@
+export type { ContentHeaderProps } from './ContentHeader';
+export { default } from './ContentHeader';

package/ContentHeader/index.js

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

package/ContentHeader/utils.d.ts

@@ -0,0 +1,23 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ButtonGroupChild } from '../Button';
+import { ContentHeaderProps } from './ContentHeader';
+import { DropdownProps } from '../Dropdown';
+/**
+ * Renders a button from either ButtonProps or a React element.
+ * Applies the specified size and variant to the button.
+ */
+export declare const renderButton: (button: ButtonProps | ButtonGroupChild | undefined, size: ButtonProps["size"]) => ReactElement<ButtonProps> | null;
+export declare const renderFilterProp: (prop: ContentHeaderProps["filter"], size: "main" | "sub") => import("react/jsx-runtime").JSX.Element | null;
+export declare const renderIconButtonWithProps: (child: ReactElement<ButtonProps>, size: ButtonProps["size"]) => ReactElement<ButtonProps>;
+export declare const renderIconButtonsProp: (utilities: ContentHeaderProps["utilities"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
+/**
+ * Renders action buttons based on the actions configuration.
+ * Supports both structured actions object and single button element/props.
+ */
+export declare const renderActionsProp: (actions: ContentHeaderProps["actions"], size: ButtonProps["size"]) => ButtonGroupChild | ButtonGroupChild[];
+export declare const resolveContentHeaderChild: (children: ContentHeaderProps["children"], size: "main" | "sub") => {
+    filter: null;
+    actions: ReactElement<ButtonProps, string | import("react").JSXElementConstructor<any>>[];
+    utilities: (ButtonGroupChild | ReactElement<DropdownProps, string | import("react").JSXElementConstructor<any>>)[];
+    backButton: null;
+};

package/ContentHeader/utils.js

@@ -0,0 +1,215 @@
+import { jsx } from 'react/jsx-runtime';
+import { isValidElement, cloneElement, Children } from 'react';
+import Button from '../Button/Button.js';
+import { flattenChildren } from '../utils/flatten-children.js';
+import { ChevronLeftIcon } from '@mezzanine-ui/icons';
+import Input from '../Input/Input.js';
+import Select from '../Select/Select.js';
+import Dropdown from '../Dropdown/Dropdown.js';
+
+/**
+ * Renders a button from either ButtonProps or a React element.
+ * Applies the specified size and variant to the button.
+ */
+const renderButton = (button, size) => {
+    if (!button) {
+        return null;
+    }
+    if (isValidElement(button)) {
+        return cloneElement(button, {
+            size,
+            type: 'button',
+        });
+    }
+    return jsx(Button, { ...button, size: size, type: "button" });
+};
+const withSize = (target, size) => {
+    return cloneElement(target, { size });
+};
+const renderFilterProp = (prop, size) => {
+    if (!prop) {
+        return null;
+    }
+    const { variant } = prop;
+    if (variant === 'search') {
+        return (jsx(Input, { ...prop, size: size, variant: "search" }));
+    }
+    if (variant === 'select') {
+        return jsx(Select, { ...prop, size: size });
+    }
+    if (variant === 'segmentedControl') {
+        console.warn('SegmentedControl component is not implemented yet.');
+        return null;
+    }
+    return null;
+};
+const renderIconButtonWithProps = (child, size) => {
+    const { icon } = child.props;
+    return cloneElement(child, {
+        icon,
+        iconType: 'icon-only',
+        size,
+        variant: 'base-secondary',
+        type: 'button',
+    });
+};
+const renderIconButtonsProp = (utilities, size) => {
+    const result = [];
+    utilities === null || utilities === void 0 ? void 0 : utilities.forEach((props) => {
+        if (props instanceof Object && 'icon' in props) {
+            result.push(jsx(Button, { ...props, type: "button", size: size, iconType: "icon-only", variant: "base-secondary" }));
+        }
+        if (props instanceof Object && 'options' in props) {
+            if (!isValidElement(props.children) ||
+                !(props.children.type === Button)) {
+                console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
+                return;
+            }
+            result.push(jsx(Dropdown, { ...props, children: cloneElement(props.children, {
+                    type: 'button',
+                    size: size,
+                    iconType: 'icon-only',
+                    variant: 'base-secondary',
+                }) }));
+        }
+    });
+    return result;
+};
+const variantOrder = {
+    'destructive-secondary': 0,
+    'base-secondary': 1,
+    'base-primary': 2,
+    // undefined: 2,
+    'base-tertiary': 0,
+    'base-ghost': 0,
+    'base-dashed': 0,
+    'base-text-link': 0,
+    'destructive-primary': 0,
+    'destructive-ghost': 0,
+    'destructive-text-link': 0,
+    inverse: 0,
+    'inverse-ghost': 0,
+};
+/**
+ * Renders action buttons based on the actions configuration.
+ * Supports both structured actions object and single button element/props.
+ */
+const renderActionsProp = (actions, size) => {
+    if (actions) {
+        return actions
+            .filter((v) => {
+            if (v.variant === 'destructive-secondary' ||
+                v.variant === 'base-secondary' ||
+                v.variant === 'base-primary' ||
+                v.variant === undefined) {
+                return true;
+            }
+            else {
+                console.warn(`[Mezzanine][ContentHeader]: Button with variant "${v.variant}" will not be rendered in ContentHeader actions.`);
+                return false;
+            }
+        })
+            .sort((a, b) => variantOrder[a.variant || 'base-primary'] -
+            variantOrder[b.variant || 'base-primary'])
+            .map((v) => renderButton(v, size));
+    }
+    return null;
+};
+const resolveContentHeaderChild = (children, size) => {
+    let filter = null;
+    // [destructive-secondary[], base-secondary[], base-primary[]]
+    const actionsWithOrder = [[], [], []];
+    const utilities = [];
+    let backButton = null;
+    if (children) {
+        const flatChildren = flattenChildren(children);
+        Children.forEach(flatChildren, (child) => {
+            if (!isValidElement(child)) {
+                return;
+            }
+            const { type, props } = child;
+            if (type === 'a' || props.href) {
+                backButton = cloneElement(child, {
+                    children: (jsx(Button, { component: 'span', iconType: "icon-only", icon: ChevronLeftIcon, "aria-label": "Back", type: "button", size: "sub", variant: "base-tertiary" })),
+                });
+                return;
+            }
+            const sizeProp = props.size;
+            if (sizeProp !== undefined && sizeProp !== size) {
+                console.warn('[Mezzanine][ContentHeader]: Input, Button, Select size in ContentHeader utilities is forced to match ContentHeader size.');
+            }
+            // is filter
+            if ((type === Input && props.variant === 'search') ||
+                type === Select) {
+                if (filter) {
+                    console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts one filter component.');
+                }
+                filter = withSize(child, size);
+            }
+            else if (type.toString() === 'SegmentedControl') {
+                console.warn('SegmentedControl component is not implemented yet.');
+            }
+            // is utilities (icon button)
+            else if ((type === Button && props.iconType === 'icon-only') ||
+                (type === Button &&
+                    props.icon &&
+                    !props.children)) {
+                utilities.push(renderIconButtonWithProps(child, size));
+            }
+            else if (type === Dropdown) {
+                const childProps = child.props
+                    .children;
+                if (!isValidElement(childProps) || childProps.type !== Button) {
+                    console.warn('[Mezzanine][ContentHeader]: Dropdown in utilities should have Button with icon as its children.');
+                    return;
+                }
+                utilities.push(cloneElement(child, {
+                    children: renderIconButtonWithProps(child.props
+                        .children, size),
+                }));
+            }
+            // is actions (normal button)
+            else if (type === Button) {
+                const variant = props.variant;
+                if (variant !== 'base-primary' &&
+                    variant !== 'base-secondary' &&
+                    variant !== 'destructive-secondary' &&
+                    variant !== undefined) {
+                    console.warn(`[Mezzanine][ContentHeader]: Button with variant "${variant}" will not be rendered in ContentHeader actions.`);
+                    return;
+                }
+                const buttonElement = renderButton(child, size);
+                if (!buttonElement) {
+                    return;
+                }
+                if (variant === 'destructive-secondary') {
+                    actionsWithOrder[0].push(buttonElement);
+                }
+                else if (variant === 'base-secondary') {
+                    actionsWithOrder[1].push(buttonElement);
+                }
+                else if (variant === 'base-primary') {
+                    actionsWithOrder[2].push(buttonElement);
+                }
+                else if (variant === undefined) {
+                    actionsWithOrder[2].push(buttonElement);
+                }
+            }
+            else {
+                console.warn('[Mezzanine][ContentHeader]: ContentHeader only accepts Input (search variant), Select, SegmentedControl, Dropdown with Icon Button, or Button as children.');
+            }
+        });
+    }
+    return {
+        filter,
+        actions: [
+            ...actionsWithOrder[0],
+            ...actionsWithOrder[1],
+            ...actionsWithOrder[2],
+        ],
+        utilities,
+        backButton,
+    };
+};
+
+export { renderActionsProp, renderButton, renderFilterProp, renderIconButtonWithProps, renderIconButtonsProp, resolveContentHeaderChild };

package/DateRangePicker/useDateRangeCalendarControls.js

@@ -39,7 +39,10 @@ function useDateRangeCalendarControls(referenceDate, mode) {
     const onPrevFactory = (target) => () => {
         var _a;
         const modifiers = modifierGroup[currentMode];
-        const [handleMinus] = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        const activeModifiers = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        if (!activeModifiers)
+            return;
+        const [handleMinus] = activeModifiers;
         const newAnchor = handleMinus(referenceDates[target]);
         const newDates = [...referenceDates];
         newDates[target] = newAnchor;
@@ -54,7 +57,10 @@ function useDateRangeCalendarControls(referenceDate, mode) {
     const onNextFactory = (target) => () => {
         var _a;
         const modifiers = modifierGroup[currentMode];
-        const [, handleAdd] = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        const activeModifiers = (_a = modifiers.single) !== null && _a !== void 0 ? _a : modifiers.double;
+        if (!activeModifiers)
+            return;
+        const [, handleAdd] = activeModifiers;
         const newAnchor = handleAdd(referenceDates[target]);
         const newDates = [...referenceDates];
         newDates[target] = newAnchor;