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

package/index.js

@@ -1,8 +1,10 @@
 export { arrayMove } from './utils/array-move.js';
 export { composeRefs } from './utils/composeRefs.js';
+export { formatNumberWithCommas } from './utils/format-number-with-commas.js';
 export { getCSSVariableValue, getNumericCSSVariablePixelValue } from './utils/get-css-variable-value.js';
 export { getScrollbarWidth } from './utils/get-scrollbar-width.js';
 export { getElement } from './utils/getElement.js';
+export { parseNumberWithCommas } from './utils/parse-number-with-commas.js';
 export { useClickAway } from './hooks/useClickAway.js';
 export { useComposeRefs } from './hooks/useComposeRefs.js';
 export { useDocumentEscapeKeyDown } from './hooks/useDocumentEscapeKeyDown.js';
@@ -31,6 +33,10 @@ export { default as Checkbox } from './Checkbox/Checkbox.js';
 export { default as CheckAll } from './Checkbox/CheckAll.js';
 export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.js';
 export { default as Selection } from './Selection/Selection.js';
+export { default as DropdownAction } from './Dropdown/DropdownAction.js';
+export { default as DropdownItem } from './Dropdown/DropdownItem.js';
+export { default as DropdownItemCard } from './Dropdown/DropdownItemCard.js';
+export { default as DropdownStatus } from './Dropdown/DropdownStatus.js';
 export { default as Icon } from './Icon/Icon.js';
 export { default as AppBar } from './AppBar/AppBar.js';
 export { default as AppBarBrand } from './AppBar/AppBarBrand.js';
@@ -38,18 +44,23 @@ export { default as AppBarMain } from './AppBar/AppBarMain.js';
 export { default as AppBarSupport } from './AppBar/AppBarSupport.js';
 export { default as Breadcrumb } from './Breadcrumb/Breadcrumb.js';
 export { default as Drawer } from './Drawer/Drawer.js';
-export { default as Dropdown } from './Dropdown/Dropdown.js';
 export { default as Menu } from './Menu/Menu.js';
 export { default as MenuDivider } from './Menu/MenuDivider.js';
 export { default as MenuItem } from './Menu/MenuItem.js';
 export { default as MenuItemGroup, default as OptionGroup } from './Menu/MenuItemGroup.js';
 export { default as Navigation } from './Navigation/Navigation.js';
+export { default as NavigationFooter } from './Navigation/NavigationFooter.js';
+export { default as NavigationHeader } from './Navigation/NavigationHeader.js';
+export { default as NavigationIconButton } from './Navigation/NavigationIconButton.js';
+export { default as NavigationOption } from './Navigation/NavigationOption.js';
+export { default as NavigationOptionCategory } from './Navigation/NavigationOptionCategory.js';
+export { default as NavigationUserMenu } from './Navigation/NavigationUserMenu.js';
 export { default as PageFooter } from './PageFooter/PageFooter.js';
 export { default as PageHeader } from './PageHeader/PageHeader.js';
 export { default as Step } from './Stepper/Step.js';
 export { default as Stepper } from './Stepper/Stepper.js';
-export { default as TabItem } from './Tab/TabItem.js';
 export { default as Tab } from './Tab/Tab.js';
+export { default as TabItem } from './Tab/TabItem.js';
 export { default as Accordion } from './Accordion/Accordion.js';
 export { default as AccordionDetails } from './Accordion/AccordionDetails.js';
 export { default as AccordionSummary } from './Accordion/AccordionSummary.js';
@@ -57,6 +68,10 @@ export { default as Badge } from './Badge/Badge.js';
 export { default as BadgeContainer } from './Badge/BadgeContainer.js';
 export { default as Card } from './Card/Card.js';
 export { default as CardActions } from './Card/CardActions.js';
+export { default as Description } from './Description/Description.js';
+export { default as DescriptionContent } from './Description/DescriptionContent.js';
+export { default as DescriptionGroup } from './Description/DescriptionGroup.js';
+export { default as DescriptionTitle } from './Description/DescriptionTitle.js';
 export { default as Empty } from './Empty/Empty.js';
 export { default as OverflowCounterTag } from './OverflowTooltip/OverflowCounterTag.js';
 export { default as Pagination } from './Pagination/Pagination.js';
@@ -65,10 +80,12 @@ export { default as PaginationJumper } from './Pagination/PaginationJumper.js';
 export { default as PaginationPageSize } from './Pagination/PaginationPageSize.js';
 export { Table } from './Table/Table.js';
 export { default as Tag } from './Tag/Tag.js';
+export { default as TagGroup } from './Tag/TagGroup.js';
 export { default as Tooltip } from './Tooltip/Tooltip.js';
 export { default as Tree } from './Tree/Tree.js';
 export { default as TreeNode } from './Tree/TreeNode.js';
 export { default as TreeNodeList } from './Tree/TreeNodeList.js';
+export { default as AutoComplete } from './AutoComplete/AutoComplete.js';
 export { default as DatePicker } from './DatePicker/DatePicker.js';
 export { default as DatePickerCalendar } from './DatePicker/DatePickerCalendar.js';
 export { default as DateRangePicker } from './DateRangePicker/DateRangePicker.js';
@@ -82,7 +99,6 @@ export { default as PickerTrigger } from './Picker/PickerTrigger.js';
 export { default as RangePickerTrigger } from './Picker/RangePickerTrigger.js';
 export { default as Radio } from './Radio/Radio.js';
 export { default as RadioGroup } from './Radio/RadioGroup.js';
-export { default as AutoComplete } from './Select/AutoComplete.js';
 export { default as Option } from './Select/Option.js';
 export { default as Select } from './Select/Select.js';
 export { default as SelectTrigger } from './Select/SelectTrigger.js';
@@ -102,12 +118,11 @@ export { default as Alert } from './Alert/Alert.js';
 export { default as ConfirmActions } from './ConfirmActions/ConfirmActions.js';
 export { default as Message } from './Message/Message.js';
 export { default as Modal } from './Modal/Modal.js';
-export { default as ModalActions } from './Modal/ModalActions.js';
-export { default as ModalBody } from './Modal/ModalBody.js';
+export { default as ModalBodyForVerification } from './Modal/ModalBodyForVerification.js';
 export { default as ModalFooter } from './Modal/ModalFooter.js';
 export { default as ModalHeader } from './Modal/ModalHeader.js';
 export { default as useModalContainer } from './Modal/useModalContainer.js';
-export { default as Notification } from './Notification/Notification.js';
+export { default as NotificationCenter } from './NotificationCenter/NotificationCenter.js';
 export { default as Popconfirm } from './Popconfirm/Popconfirm.js';
 export { default as Progress } from './Progress/Progress.js';
 export { default as Skeleton } from './Skeleton/Skeleton.js';
@@ -116,6 +131,7 @@ export { default as InlineMessage } from './InlineMessage/InlineMessage.js';
 export { default as InlineMessageGroup } from './InlineMessage/InlineMessageGroup.js';
 export { default as ResultState } from './ResultState/ResultState.js';
 export { default as Anchor } from './Anchor/Anchor.js';
+export { default as AnchorGroup } from './Anchor/AnchorGroup.js';
 export { default as Backdrop } from './Backdrop/Backdrop.js';
 export { default as AlertBanner } from './AlertBanner/AlertBanner.js';
 export { default as Calendar } from './Calendar/Calendar.js';
@@ -145,9 +161,12 @@ export { default as SlideFade } from './Transition/SlideFade.js';
 export { default as Transition } from './Transition/Transition.js';
 export { default as Translate } from './Transition/Translate.js';
 export { default as ConfigProvider } from './Provider/ConfigProvider.js';
+export { default as Dropdown } from './Dropdown/Dropdown.js';
 export { useStepper } from './Stepper/useStepper.js';
 export { usePagination } from './Pagination/usePagination.js';
-export { TableContext, TableDataContext, useTableContext, useTableDataContext } from './Table/TableContext.js';
+export { getCellAlignClass, getRowKey } from '@mezzanine-ui/core/table';
+export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext } from './Table/TableContext.js';
+export { useTableDataSource } from './Table/hooks/useTableDataSource.js';
 export { useTableRowSelection } from './Table/utils/useTableRowSelection.js';
 export { getTreeNodeEntities } from './Tree/getTreeNodeEntities.js';
 export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './Tree/toggleValue.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.3",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,9 +31,9 @@
     "@floating-ui/dom": "^1.7.4",
     "@floating-ui/react-dom": "^2.1.6",
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "^1.0.0-beta.1",
-    "@mezzanine-ui/icons": "^1.0.0-beta.1",
-    "@mezzanine-ui/system": "^1.0.0-beta.1",
+    "@mezzanine-ui/core": "1.0.0-beta.3",
+    "@mezzanine-ui/icons": "1.0.0-beta.3",
+    "@mezzanine-ui/system": "1.0.0-beta.3",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",

package/utils/format-number-with-commas.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Formats a number or numeric string with commas according to the specified locale.
+ */
+export declare function formatNumberWithCommas(input: number | string, locale?: string, options?: Intl.NumberFormatOptions): string;

package/utils/format-number-with-commas.js

@@ -0,0 +1,27 @@
+'use client';
+/**
+ * Formats a number or numeric string with commas according to the specified locale.
+ */
+function formatNumberWithCommas(input, locale = 'en-US', options) {
+    let value;
+    if (typeof input === 'number') {
+        if (!Number.isFinite(input))
+            return '';
+        value = input;
+    }
+    else {
+        const trimmed = input.trim();
+        if (trimmed === '')
+            return '';
+        const parsed = Number(trimmed);
+        if (!Number.isFinite(parsed))
+            return '';
+        value = parsed;
+    }
+    return new Intl.NumberFormat(locale, {
+        maximumFractionDigits: 20,
+        ...options,
+    }).format(value);
+}
+
+export { formatNumberWithCommas };

package/utils/parse-number-with-commas.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Parses a string representing a number with commas into a number.
+ */
+export declare function parseNumberWithCommas(input: string, strict?: boolean): number | null;

package/utils/parse-number-with-commas.js

@@ -0,0 +1,22 @@
+/**
+ * Parses a string representing a number with commas into a number.
+ */
+function parseNumberWithCommas(input, strict = false) {
+    if (typeof input !== 'string')
+        return null;
+    const trimmed = input.trim();
+    if (trimmed === '')
+        return null;
+    if (strict) {
+        /** Strictly formatted number with commas */
+        const STRICT_FORMAT = /^-?\d{1,3}(?:,\d{3})*(?:\.\d+)?$/;
+        if (!STRICT_FORMAT.test(trimmed)) {
+            return null;
+        }
+    }
+    const normalized = trimmed.split(',').join('');
+    const value = Number(normalized);
+    return Number.isFinite(value) ? value : null;
+}
+
+export { parseNumberWithCommas };

package/Modal/ModalActions.d.ts

@@ -1,9 +0,0 @@
-import { ConfirmActionsProps } from '../ConfirmActions';
-import { ModalFooterProps } from './ModalFooter';
-export interface ModalActionsProps extends ModalFooterProps, Pick<ConfirmActionsProps, 'cancelButtonProps' | 'cancelText' | 'confirmButtonProps' | 'confirmText' | 'hideCancelButton' | 'hideConfirmButton' | 'onCancel' | 'onConfirm'> {
-}
-/**
- * The react component for `mezzanine` modal actions.
- */
-declare const ModalActions: import("react").ForwardRefExoticComponent<ModalActionsProps & import("react").RefAttributes<HTMLDivElement>>;
-export default ModalActions;

package/Modal/ModalActions.js

@@ -1,20 +0,0 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { modalClasses } from '@mezzanine-ui/core/modal';
-import { forwardRef, useContext } from 'react';
-import ModalFooter from './ModalFooter.js';
-import { ModalControlContext } from './ModalControl.js';
-import ConfirmActions from '../ConfirmActions/ConfirmActions.js';
-
-/**
- * The react component for `mezzanine` modal actions.
- */
-const ModalActions = forwardRef(function ModalActions(props, ref) {
-    const { cancelButtonProps, cancelText, children, confirmButtonProps, confirmText, hideCancelButton, hideConfirmButton, onCancel, onConfirm, ...rest } = props;
-    const { loading: confirmButtonLoading, ...restConfirmButtonProps } = confirmButtonProps || {};
-    const { loading, severity } = useContext(ModalControlContext);
-    const danger = severity === 'error';
-    return (jsxs(ModalFooter, { ...rest, ref: ref, children: [children, jsx(ConfirmActions, { cancelButtonProps: cancelButtonProps, cancelText: cancelText, className: modalClasses.actions, confirmButtonProps: restConfirmButtonProps, confirmText: confirmText, danger: danger, hideCancelButton: hideCancelButton, hideConfirmButton: hideConfirmButton, loading: confirmButtonLoading !== null && confirmButtonLoading !== void 0 ? confirmButtonLoading : loading, onCancel: onCancel, onConfirm: onConfirm })] }));
-});
-
-export { ModalActions as default };

package/Modal/ModalBody.d.ts

@@ -1,7 +0,0 @@
-import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
-export type ModalBodyProps = NativeElementPropsWithoutKeyAndRef<'div'>;
-/**
- * The react component for `mezzanine` modal body.
- */
-declare const ModalBody: import("react").ForwardRefExoticComponent<ModalBodyProps & import("react").RefAttributes<HTMLDivElement>>;
-export default ModalBody;

package/Modal/ModalBody.js

@@ -1,14 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { modalClasses } from '@mezzanine-ui/core/modal';
-import cx from 'clsx';
-
-/**
- * The react component for `mezzanine` modal body.
- */
-const ModalBody = forwardRef(function ModalBody(props, ref) {
-    const { children, className, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(modalClasses.body, className), children: children }));
-});
-
-export { ModalBody as default };

package/Notification/Notification.d.ts

@@ -1,54 +0,0 @@
-import { NotificationSeverity } from '@mezzanine-ui/core/notification';
-import { FC, Key, ReactNode } from 'react';
-import { NotifierData, Notifier, NotifierConfig } from '../Notifier';
-import { SlideFadeProps } from '../Transition';
-export interface NotificationConfigProps extends Pick<NotifierConfig, 'duration'>, Pick<SlideFadeProps, 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited' | 'easing' | 'direction'> {
-}
-export interface NotificationData extends NotifierData, NotificationConfigProps {
-    /**
-     * Cancel button text;
-     */
-    cancelText?: ReactNode;
-    /**
-     * Confirm button text;
-     */
-    confirmText?: ReactNode;
-    /**
-     * Cancel button click event handler. <br />
-     * If not provided, the event handler will fallback to a close function using `Notification.remove`.
-     */
-    onCancel?: VoidFunction;
-    /**
-     * Confirm button click event handler. <br />
-     * If given, will render action button group.
-     */
-    onConfirm?: VoidFunction;
-    /**
-     * If given, the message will be closed after the amount of time.
-     * You can use `Message.config` to overwrite.
-     * @default false
-     */
-    /**
-     * The identifier of the notification.
-     */
-    reference?: Key;
-    /**
-     * The severity of the message.
-     * @default info
-     */
-    severity?: NotificationSeverity;
-    /**
-     * The title of notification.
-     */
-    title?: ReactNode;
-}
-export interface Notification extends FC<NotificationData>, Notifier<NotificationData, NotificationConfigProps>, Record<NotificationSeverity, (props?: Omit<NotificationData, 'severity'>) => Key> {
-}
-/**
- * The react component for `mezzanine` notification.
- *
- * Use the API from the Notification instance such as `Notification.success` and `Notification.error`
- * to display a notification globally.
- */
-declare const NotificationElement: Notification;
-export default NotificationElement;

package/Notification/Notification.js

@@ -1,76 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { notificationIcons, notificationClasses } from '@mezzanine-ui/core/notification';
-import { TimesIcon } from '@mezzanine-ui/icons';
-import { useState, useEffect } from 'react';
-import Button from '../Button/Button.js';
-import ButtonGroup from '../Button/ButtonGroup.js';
-import SlideFade from '../Transition/SlideFade.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-import { createNotifier } from '../Notifier/createNotifier.js';
-
-/**
- * The react component for `mezzanine` notification.
- *
- * Use the API from the Notification instance such as `Notification.success` and `Notification.error`
- * to display a notification globally.
- */
-const NotificationElement = ((props) => {
-    const { cancelText, children, confirmText, direction = 'left', duration, onCancel: onCancelProp, onClose: onCloseProp, onConfirm: onConfirmProp, onExited: onExitedProp, reference, severity, title, ...restTransitionProps } = props;
-    const targetIcon = severity ? notificationIcons[severity] : undefined;
-    const [open, setOpen] = useState(true);
-    useEffect(() => {
-        if (open && duration) {
-            const timer = window.setTimeout(() => {
-                setOpen(false);
-            }, duration);
-            return () => {
-                window.clearTimeout(timer);
-            };
-        }
-    }, [open, duration]);
-    const onClose = () => {
-        setOpen(false);
-        if (onCloseProp) {
-            onCloseProp(reference);
-        }
-    };
-    const onConfirm = onConfirmProp
-        ? () => {
-            setOpen(false);
-            onConfirmProp();
-        }
-        : undefined;
-    const onCancel = onCancelProp
-        ? () => {
-            setOpen(false);
-            onCancelProp();
-        }
-        : undefined;
-    const onExited = (node) => {
-        if (onExitedProp) {
-            onExitedProp(node);
-        }
-        NotificationElement.remove(reference);
-    };
-    return (jsx(SlideFade, { in: open, appear: true, onExited: onExited, direction: direction, ...restTransitionProps, children: jsxs("div", { className: cx(notificationClasses.host, severity ? notificationClasses.severity(severity) : undefined), children: [targetIcon ? (jsx("div", { className: notificationClasses.iconContainer, children: jsx(Icon, { icon: targetIcon, className: notificationClasses.severityIcon }) })) : null, jsxs("div", { className: notificationClasses.body, children: [jsx("h4", { className: notificationClasses.title, children: title }), jsx("div", { className: notificationClasses.content, children: children }), onConfirm && !severity ? (jsxs(ButtonGroup, { className: notificationClasses.action, children: [jsx(Button, { variant: "contained", onClick: onConfirm, children: confirmText }), jsx(Button, { variant: "outlined", onClick: onCancel || onClose, children: cancelText })] })) : null] }), jsx(Icon, { icon: TimesIcon, className: notificationClasses.closeIcon, onClick: onClose })] }) }));
-});
-const { add, config, destroy, remove } = createNotifier({
-    duration: false,
-    render: (notif) => jsx(NotificationElement, { ...notif }),
-    setRoot: (root) => {
-        root === null || root === void 0 ? void 0 : root.setAttribute('class', notificationClasses.root);
-    },
-});
-NotificationElement.add = add;
-NotificationElement.config = config;
-NotificationElement.destroy = destroy;
-NotificationElement.remove = remove;
-['success', 'warning', 'error', 'info'].forEach((severity) => {
-    NotificationElement[severity] = (props) => NotificationElement.add({
-        ...props,
-        severity,
-    });
-});
-
-export { NotificationElement as default };

package/Notification/index.d.ts

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

package/Notification/index.js

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

package/Select/AutoComplete.d.ts

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

package/Select/AutoComplete.js

@@ -1,114 +0,0 @@
-'use client';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useContext, useState, useImperativeHandle, useRef, useMemo } from 'react';
-import { selectClasses } from '@mezzanine-ui/core/select';
-import { PlusIcon } from '@mezzanine-ui/icons';
-import isArray from 'lodash/isArray';
-import { useComposeRefs } from '../hooks/useComposeRefs.js';
-import Option from './Option.js';
-import { SelectControlContext } from './SelectControlContext.js';
-import { useAutoCompleteValueControl } from '../Form/useAutoCompleteValueControl.js';
-import { useClickAway } from '../hooks/useClickAway.js';
-import SelectTrigger from './SelectTrigger.js';
-import { FormControlContext } from '../Form/FormControlContext.js';
-import InputTriggerPopper from '../_internal/InputTriggerPopper/InputTriggerPopper.js';
-import Menu from '../Menu/Menu.js';
-import Icon from '../Icon/Icon.js';
-import cx from 'clsx';
-
-const MENU_ID = 'mzn-select-autocomplete-menu-id';
-/**
- * The AutoComplete component for react. <br />
- * Note that if you need search for ONLY given options, not included your typings,
- * should considering using the `Select` component with `onSearch` prop.
- */
-const AutoComplete = forwardRef(function Select(props, ref) {
-    var _a, _b;
-    const { disabled: disabledFromFormControl, fullWidth: fullWidthFromFormControl, required: requiredFromFormControl, severity, } = useContext(FormControlContext) || {};
-    const { addable = false, className, disabled = disabledFromFormControl || false, disabledOptionsFilter = false, defaultValue, error = severity === 'error' || false, fullWidth = fullWidthFromFormControl || false, inputRef, inputProps, itemsInView = 4, menuMaxHeight, menuRole = 'listbox', menuSize, mode = 'single', onChange: onChangeProp, onClear: onClearProp, onInsert, onSearch, options: optionsProp, popperOptions = {}, placeholder = '', prefix, required = requiredFromFormControl || false, searchTextControlRef, size, value: valueProp, } = props;
-    const [open, toggleOpen] = useState(false);
-    const { focused, onFocus, onChange, onClear, options, searchText, selectedOptions, setSearchText, unselectedOptions, value, } = useAutoCompleteValueControl({
-        defaultValue,
-        disabledOptionsFilter,
-        mode,
-        onChange: onChangeProp,
-        onClear: onClearProp,
-        onClose: () => toggleOpen(false),
-        onSearch,
-        options: optionsProp,
-        value: valueProp,
-    });
-    /** export set search text action to props (allow user to customize search text) */
-    useImperativeHandle(searchTextControlRef, () => ({ setSearchText }));
-    /** insert feature */
-    const [insertText, setInsertText] = useState('');
-    const nodeRef = useRef(null);
-    const controlRef = useRef(null);
-    const popperRef = useRef(null);
-    const composedRef = useComposeRefs([ref, controlRef]);
-    const renderValue = focused ? () => searchText : undefined;
-    useClickAway(() => {
-        if (!open || focused)
-            return;
-        return () => {
-            toggleOpen((prev) => !prev);
-        };
-    }, nodeRef, [focused, nodeRef, open, toggleOpen]);
-    function getPlaceholder() {
-        if (focused && value && !isArray(value)) {
-            return value.name;
-        }
-        return placeholder;
-    }
-    /** Trigger input props */
-    const onSearchInputChange = (e) => {
-        /** should sync both search input and value */
-        setSearchText(e.target.value);
-        setInsertText(e.target.value);
-        /** return current value to onSearch */
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(e.target.value);
-    };
-    const onSearchInputFocus = (e) => {
-        var _a;
-        e.stopPropagation();
-        toggleOpen(true);
-        onFocus(true);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onSearchInputBlur = (e) => {
-        var _a;
-        onFocus(false);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    const onClickSuffixActionIcon = () => {
-        toggleOpen((prev) => !prev);
-    };
-    const resolvedInputProps = {
-        ...inputProps,
-        'aria-controls': MENU_ID,
-        'aria-expanded': open,
-        'aria-owns': MENU_ID,
-        onBlur: onSearchInputBlur,
-        onChange: onSearchInputChange,
-        onFocus: onSearchInputFocus,
-        placeholder: getPlaceholder(),
-        role: 'combobox',
-    };
-    const searchTextExistWithoutOption = !!searchText &&
-        options.find((option) => option.name === searchText) === undefined;
-    const context = useMemo(() => ({ onChange, value }), [onChange, value]);
-    return (jsx(SelectControlContext.Provider, { value: context, children: jsxs("div", { ref: nodeRef, className: cx(selectClasses.host, { [selectClasses.hostFullWidth]: fullWidth }), children: [jsx(SelectTrigger, { ref: composedRef, active: open, className: className, clearable: true, disabled: disabled, ellipsis: true, error: error, fullWidth: fullWidth, inputRef: inputRef, mode: mode, onTagClose: onChange, onClear: onClear, prefix: prefix, readOnly: false, required: required, inputProps: resolvedInputProps, searchText: searchText, size: size, showTextInputAfterTags: true, suffixAction: onClickSuffixActionIcon, value: value, renderValue: renderValue }), jsxs(InputTriggerPopper, { ref: popperRef, anchor: controlRef, className: selectClasses.popper, open: open, sameWidth: true, options: popperOptions, children: [options.length ? (jsx(Menu, { id: MENU_ID, "aria-activedescendant": Array.isArray(value) ? ((_b = (_a = value === null || value === void 0 ? void 0 : value[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '') : value === null || value === void 0 ? void 0 : value.id, itemsInView: itemsInView, maxHeight: menuMaxHeight, role: menuRole, size: menuSize, style: { border: 0 }, children: mode === 'single' ? (jsx(Fragment, { children: options.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))) })) : (jsxs(Fragment, { children: [selectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id))), unselectedOptions.map((option) => (jsx(Option, { value: option.id, children: option.name }, option.id)))] })) })) : null, searchTextExistWithoutOption && addable ? (jsxs("button", { type: "button", className: selectClasses.autoComplete, onClick: (e) => {
-                                var _a;
-                                e.stopPropagation();
-                                if (insertText) {
-                                    const newOption = (_a = onInsert === null || onInsert === void 0 ? void 0 : onInsert(insertText)) !== null && _a !== void 0 ? _a : null;
-                                    if (newOption) {
-                                        setInsertText('');
-                                        setSearchText('');
-                                        onChange(newOption);
-                                    }
-                                }
-                            }, children: [jsx("p", { children: insertText }), jsx(Icon, { className: selectClasses.autoCompleteIcon, icon: PlusIcon })] })) : null] })] }) }));
-});
-
-export { AutoComplete as default };

package/Table/hooks/useTableColumns.d.ts

@@ -1,8 +0,0 @@
-import { type TableColumn, type TableDataSource } from '@mezzanine-ui/core/table';
-import type { TableColumnState } from '../TableContext';
-import { ActionColumnConfig } from './typings';
-export interface UseTableColumnsOptions<T extends TableDataSource> {
-    actionConfig: ActionColumnConfig;
-    columns: TableColumn<T>[];
-}
-export declare function useTableColumns<T extends TableDataSource>({ actionConfig, columns, }: UseTableColumnsOptions<T>): TableColumnState;