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

package/Transition/Slide.js

@@ -6,14 +6,17 @@ import Transition from './Transition.js';
 import { reflow } from './reflow.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
-function getStyle(state, inProp) {
+function getStyle(state, inProp, from) {
     if (state === 'entering' || state === 'entered') {
         return {
             transform: 'translate3d(0, 0, 0)',
         };
     }
     const style = {
-        transform: 'translate3d(100%, 0, 0)',
+        transform: {
+            top: 'translate3d(0, -100%, 0)',
+            right: 'translate3d(100%, 0, 0)',
+        }[from],
     };
     if (state === 'exited' && !inProp) {
         style.visibility = 'hidden';
@@ -32,7 +35,7 @@ const defaultEasing = {
  * The react component for `mezzanine` transition slide in/out.
  */
 const Slide = forwardRef(function Slide(props, ref) {
-    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
+    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, from = 'right', in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
     const duration = durationProp === 'auto' ? defaultDuration : durationProp;
     const nodeRef = useRef(null);
     const composedNodeRef = useComposeRefs([ref, nodeRef]);
@@ -78,7 +81,7 @@ const Slide = forwardRef(function Slide(props, ref) {
                 ...children.props,
                 ref: composedNodeRef,
                 style: {
-                    ...getStyle(state, inProp),
+                    ...getStyle(state, inProp, from),
                     ...children.props.style,
                 },
             })) }));

package/Tree/TreeNode.js

@@ -3,11 +3,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { treeClasses } from '@mezzanine-ui/core/tree';
 import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
-import Checkbox from '../Checkbox/Checkbox.js';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
 import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
+import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 

package/Upload/UploadPictureCard.js

@@ -95,7 +95,7 @@ const UploadPictureCard = forwardRef(function UploadPictureCard(props, ref) {
     return (jsx("div", { className: cx(uploadPictureCardClasses.host, uploadPictureCardClasses.size(size), disabled && uploadPictureCardClasses.disabled, className), "aria-disabled": disabled, ref: ref, role: "group", tabIndex: disabled ? -1 : 0, ...rest, children: jsxs("div", { className: uploadPictureCardClasses.container, children: [isImage && imageUrl && status !== 'error' && (jsx("img", { alt: fileName, src: imageUrl, style: {
                         objectFit: imageFit,
                         objectPosition: 'center',
-                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ZoomInIcon }, onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: DownloadIcon }, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: ResetIcon }, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", icon: { position: 'icon-only', src: TrashIcon }, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
+                    } })), status === 'done' && size !== 'minor' && !isImage && (jsxs("div", { className: uploadPictureCardClasses.content, children: [jsx(Icon, { icon: FileIcon, color: "brand", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.name, ellipsis: true, children: fileName })] })), status === 'error' && size !== 'minor' && (jsxs("div", { className: uploadPictureCardClasses.errorMessage, role: "alert", "aria-live": "polite", children: [jsx(Icon, { icon: errorIconContent, color: "error", size: 16 }), jsx(Typography, { className: uploadPictureCardClasses.errorMessageText, children: errorMessageContent })] })), jsxs("div", { className: cx(uploadPictureCardClasses.actions, uploadPictureCardClasses.actionsStatus(status)), children: [status === 'loading' && size !== 'minor' && (jsxs(Fragment, { children: [jsx(ClearActions, { type: "embedded", variant: "contrast", onClick: onDelete, className: uploadPictureCardClasses.clearActionsIcon, "aria-label": labels.cancelUpload }), jsx("div", { className: uploadPictureCardClasses.loadingIcon, "aria-label": labels.uploading, children: jsx(Icon, { icon: SpinnerIcon, color: "fixed-light", spin: true, size: 32 }) })] })), status === 'done' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", icon: ZoomInIcon, iconType: "icon-only", onClick: onZoomIn, "aria-label": labels.zoomIn }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: DownloadIcon, onClick: onDownload, "aria-label": labels.download }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), status === 'error' && size !== 'minor' && (jsx(Fragment, { children: jsx("div", { className: uploadPictureCardClasses.tools, children: jsxs("div", { className: uploadPictureCardClasses.toolsContent, children: [jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: ResetIcon, onClick: onReload, "aria-label": labels.reload }), jsx(Button, { variant: "base-secondary", size: "minor", iconType: "icon-only", icon: TrashIcon, onClick: onDelete, "aria-label": labels.delete })] }) }) })), size === 'minor' && (jsx(Icon, { icon: ZoomInIcon, color: "fixed-light", size: 24 }))] })] }) }));
 });
 
 export { UploadPictureCard as default };

package/index.d.ts

@@ -50,20 +50,18 @@ export { default as Breadcrumb } from './Breadcrumb';
 export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
 export { default as Drawer } from './Drawer';
 export type { DrawerPlacement, DrawerProps } from './Drawer';
-export { default as Dropdown } from './Dropdown';
-export type { DropdownProps } from './Dropdown';
 export { default as Menu, MenuDivider, MenuItem, MenuItemGroup } from './Menu';
 export type { MenuDividerProps, MenuItemGroupProps, MenuItemProps, MenuProps, MenuSize, } from './Menu';
-export { default as Navigation } from './Navigation';
-export type { NavigationChild, NavigationChildren, NavigationProps, NavigationFooterProps, NavigationHeaderProps, NavigationOptionProps, NavigationUserMenuProps, NavigationIconButtonProps, NavigationOptionCategoryProps, } from './Navigation';
+export { default as Navigation, NavigationFooter, NavigationHeader, NavigationIconButton, NavigationOption, NavigationOptionCategory, NavigationUserMenu, } from './Navigation';
+export type { NavigationChild, NavigationChildren, NavigationFooterProps, NavigationHeaderProps, NavigationIconButtonProps, NavigationOptionCategoryProps, NavigationOptionProps, NavigationProps, NavigationUserMenuProps, } from './Navigation';
 export { default as PageFooter } from './PageFooter';
 export type { PageFooterProps } from './PageFooter';
 export { default as PageHeader } from './PageHeader';
 export type { PageHeaderProps } from './PageHeader';
 export { Step, default as Stepper, useStepper } from './Stepper';
 export type { StepperProps, StepProps } from './Stepper';
-export { TabItem, default as Tab } from './Tab';
-export type { TabItemProps, TabsChild, TabProps } from './Tab';
+export { default as Tab, TabItem } from './Tab';
+export type { TabItemProps, TabProps, TabsChild } from './Tab';
 /**
  * Data Display
  */
@@ -73,18 +71,17 @@ export { default as Badge, BadgeContainer } from './Badge';
 export type { BadgeProps } from './Badge';
 export { default as Card, CardActions } from './Card';
 export type { CardActionsProps, CardProps } from './Card';
-export { Description, DescriptionTitle, DescriptionContent, DescriptionGroup, } from './Description';
-export type { DescriptionProps, DescriptionTitleProps, DescriptionContentProps, DescriptionGroupProps, } from './Description';
+export { Description, DescriptionContent, DescriptionGroup, DescriptionTitle, } from './Description';
+export type { DescriptionContentProps, DescriptionGroupProps, DescriptionProps, DescriptionTitleProps, } from './Description';
 export { default as Empty } from './Empty';
 export type { EmptyProps } from './Empty';
 export { OverflowCounterTag } from './OverflowTooltip';
 export type { OverflowCounterTagProps } from './OverflowTooltip';
 export { default as Pagination, PaginationItem, PaginationJumper, PaginationPageSize, usePagination, } from './Pagination';
 export type { PaginationItemProps, PaginationItemType, PaginationJumperProps, PaginationPageSizeProps, PaginationProps, } from './Pagination';
-export { default as Table, getCellAlignClass, getRowKey, TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext, useTableRowSelection, useTableDataSource, } from './Table';
-export { type TableRecord, type TableDataSourceWithKey, type TableDataSourceWithId, type TableDataSource, type SortOrder, type ColumnAlign, type HighlightMode, type FixedType, type TableSize, type TableColumnTitleMenu, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumn, type TableColumnWithMinWidth, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableSelectionMode, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableBulkActions, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableRowSelection, type TableScroll, type TableDraggable, type TableExpandable, type TableBaseProps, type TableVirtualizedProps, type TableNonVirtualizedProps, type TableProps, type TableResizedColumnState, type TableContextValue, type TableDataContextValue, type TableDraggableState, type TableExpansionState, type TableSelectionState, type TableSortingState, type UpdateDataSourceOptions, type UseTableDataSourceOptions, type TableTransitionState, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, } from './Table';
-export { default as Tag } from './Tag';
-export type { TagProps, TagSize } from './Tag';
+export { getCellAlignClass, getRowKey, default as Table, TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableDataSource, useTableRowSelection, useTableSuperContext, type ColumnAlign, type FixedType, type HighlightMode, type SortOrder, type TableActionItem, type TableActions, type TableActionsBase, type TableActionsWithMinWidth, type TableBaseProps, type TableBulkActions, type TableBulkGeneralAction, type TableBulkOverflowAction, type TableCollectable, type TableColumn, type TableColumnBase, type TableColumnBaseWithMinWidthRequired, type TableColumnTitleMenu, type TableColumnWithDataIndex, type TableColumnWithDataIndexAndMinWidth, type TableColumnWithMinWidth, type TableColumnWithRender, type TableColumnWithRenderAndMinWidth, type TableContextValue, type TableDataContextValue, type TableDataSource, type TableDataSourceWithId, type TableDataSourceWithKey, type TableDraggable, type TableExpandable, type TableExpansionState, type TableNonVirtualizedProps, type TableProps, type TableRecord, type TableResizedColumnState, type TableRowSelection, type TableRowSelectionBase, type TableRowSelectionCheckbox, type TableRowSelectionRadio, type TableScroll, type TableSelectionMode, type TableSelectionState, type TableSize, type TableSortingState, type TableToggleable, type TableTransitionState, type TableVirtualizedProps, type UpdateDataSourceOptions, type UseTableDataSourceOptions, type TableDraggableOnlyProps, type TableNoDragOrPinProps, type TableNonResizableProps, type TablePinnableOnlyProps, type TableResizableProps, } from './Table';
+export { default as Tag, TagGroup } from './Tag';
+export type { TagGroupProps, TagProps, TagSize } from './Tag';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { getTreeNodeEntities, toggleValue, toggleValueWithStatusControl, traverseTree, default as Tree, TreeNode, TreeNodeList, uniqueArray, useTreeExpandedValue, } from './Tree';
@@ -92,6 +89,8 @@ export type { GetTreeNodeEntitiesProps, TreeExpandControl, TreeNodeData, TreeNod
 /**
  * Data Entry
  */
+export { default as AutoComplete } from './AutoComplete';
+export type { AutoCompleteBaseProps, AutoCompleteMultipleProps, AutoCompleteProps, AutoCompleteSingleProps, } from './AutoComplete';
 export { CheckAll, default as Checkbox, CheckboxGroup } from './Checkbox';
 export type { CheckAllProps, CheckboxGroupChangeEvent, CheckboxGroupChangeEventTarget, CheckboxGroupLayout, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, } from './Checkbox';
 export { default as DatePicker, DatePickerCalendar } from './DatePicker';
@@ -101,15 +100,17 @@ export type { DateRangePickerCalendarProps, DateRangePickerProps, UseDateRangePi
 export { default as DateTimePicker } from './DateTimePicker';
 export type { DateTimePickerProps } from './DateTimePicker';
 export { FormControlContext, FormField, FormHintText, FormLabel } from './Form';
+export { FilterArea, FilterLine, Filter } from './FilterArea';
+export type { FilterAreaProps, FilterLineProps, FilterProps, } from './FilterArea';
 export type { FormControl, FormFieldProps, FormHintTextProps, FormLabelProps, } from './Form';
 export { default as Input } from './Input';
-export type { ActionInputProps, BaseInputProps, ClearableInput, InputBaseProps, InputProps, InputSize, InputStrength, NumberInput, NumberInputProps, PasswordInputProps, SearchInputProps, SelectInputProps, UnitInputProps, WithAffixInputProps, WithPasswordStrengthIndicator, } from './Input';
+export type { ActionInputProps, BaseInputProps, ClearableInput, InputBaseProps, InputProps, InputSize, InputStrength, NumberInput, NumberInputProps, PasswordInputProps, SearchInputProps, SelectInputProps, CurrencyInputProps, WithAffixInputProps, WithPasswordStrengthIndicator, } from './Input';
 export { PickerTrigger, RangePickerTrigger, usePickerDocumentEventClose, usePickerValue, useTabKeyClose, } from './Picker';
 export type { PickerTriggerProps, RangePickerTriggerProps, UsePickerDocumentEventCloseProps, UsePickerValueProps, } from './Picker';
 export { default as Radio, RadioGroup } from './Radio';
 export type { RadioGroupOrientation, RadioGroupProps, RadioProps, RadioSize, } from './Radio';
-export { AutoComplete, Option, OptionGroup, default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, TreeSelect, } from './Select';
-export type { AutoCompleteProps, OptionGroupProps, OptionProps, SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, TreeSelectOption, TreeSelectProps, } from './Select';
+export { Option, OptionGroup, default as Select, SelectControlContext, SelectTrigger, SelectTriggerTags, TreeSelect, } from './Select';
+export type { OptionGroupProps, OptionProps, SelectControl, SelectProps, SelectTriggerInputProps, SelectTriggerProps, SelectTriggerTagsProps, SelectValue, TreeSelectOption, TreeSelectProps, } from './Select';
 export { default as Selection } from './Selection';
 export type { SelectionProps, SelectionPropsBase } from './Selection';
 export { default as Slider, useSlider } from './Slider';
@@ -133,10 +134,10 @@ export { default as ConfirmActions } from './ConfirmActions';
 export type { ConfirmActionsProps } from './ConfirmActions';
 export { default as Message } from './Message';
 export type { MessageData, MessageSeverity, MessageType } from './Message';
-export { default as Modal, ModalActions, ModalBody, ModalFooter, ModalHeader, useModalContainer, } from './Modal';
-export type { ModalActionsProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalSeverity, ModalSize, } from './Modal';
-export { default as Notification } from './Notification';
-export type { NotificationData, NotificationSeverity } from './Notification';
+export { default as Modal, ModalBodyForVerification, ModalFooter, ModalHeader, useModalContainer, } from './Modal';
+export type { ModalBodyForVerificationProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalSize, ModalStatusType, } from './Modal';
+export { default as NotificationCenter } from './NotificationCenter';
+export type { NotificationData, NotificationSeverity, } from './NotificationCenter';
 export { default as Popconfirm } from './Popconfirm';
 export type { PopconfirmProps } from './Popconfirm';
 export { default as Progress } from './Progress';
@@ -152,8 +153,8 @@ export type { ResultStateActions, ResultStateProps } from './ResultState';
 /**
  * Others
  */
-export { default as Anchor } from './Anchor';
-export type { AnchorProps } from './Anchor';
+export { default as Anchor, AnchorGroup } from './Anchor';
+export type { AnchorGroupProps, AnchorProps } from './Anchor';
 export { default as Backdrop } from './Backdrop';
 export type { BackdropProps } from './Backdrop';
 export { default as AlertBanner } from './AlertBanner';
@@ -177,3 +178,18 @@ export type { CollapseProps, FadeProps, RotateProps, ScaleProps, SlideFadeDirect
 /** Context */
 export { default as ConfigProvider, MezzanineConfig } from './Provider';
 export type { ConfigProviderProps, MezzanineConfigContext } from './Provider';
+/**
+ * internal
+ * only export dropdown related components
+ */
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';
+export { default as DropdownAction } from './Dropdown/DropdownAction';
+export type { DropdownActionProps } from './Dropdown/DropdownAction';
+export { default as DropdownItem } from './Dropdown/DropdownItem';
+export type { DropdownItemProps } from './Dropdown/DropdownItem';
+export { default as DropdownItemCard } from './Dropdown/DropdownItemCard';
+export type { DropdownItemCardProps } from './Dropdown/DropdownItemCard';
+export { default as DropdownStatus } from './Dropdown/DropdownStatus';
+export type { DropdownStatusProps } from './Dropdown/DropdownStatus';
+export type { DropdownCheckPosition, DropdownInputPosition, DropdownItemLevel, DropdownItemSharedProps, DropdownItemValidate, DropdownMode, DropdownOption, DropdownOptionFlat, DropdownOptionGrouped, DropdownOptionsByType, DropdownOptionTree, DropdownStatus as DropdownStatusType, DropdownType, } from '@mezzanine-ui/core/dropdown';

package/index.js

@@ -29,10 +29,11 @@ export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
 export { default as Button } from './Button/Button.js';
 export { default as ButtonGroup } from './Button/ButtonGroup.js';
 export { default as Typography } from './Typography/Typography.js';
-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';
@@ -40,18 +41,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';
@@ -60,9 +66,9 @@ 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 DescriptionTitle } from './Description/DescriptionTitle.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';
@@ -71,10 +77,15 @@ 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 CheckAll } from './Checkbox/CheckAll.js';
+export { default as Checkbox } from './Checkbox/Checkbox.js';
+export { default as CheckboxGroup } from './Checkbox/CheckboxGroup.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';
@@ -83,12 +94,14 @@ export { default as DateTimePicker } from './DateTimePicker/DateTimePicker.js';
 export { default as FormField } from './Form/FormField.js';
 export { default as FormHintText } from './Form/FormHintText.js';
 export { default as FormLabel } from './Form/FormLabel.js';
+export { default as FilterArea } from './FilterArea/FilterArea.js';
+export { default as FilterLine } from './FilterArea/FilterLine.js';
+export { default as Filter } from './FilterArea/Filter.js';
 export { default as Input } from './Input/Input.js';
 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';
@@ -108,12 +121,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';
@@ -122,6 +134,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';
@@ -151,12 +164,13 @@ 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 { getCellAlignClass, getRowKey } from '@mezzanine-ui/core/table';
 export { TableContext, TableDataContext, TableSuperContext, useTableContext, useTableDataContext, useTableSuperContext } from './Table/TableContext.js';
-export { useTableRowSelection } from './Table/utils/useTableRowSelection.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';
 export { traverseTree } from './Tree/traverseTree.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -31,14 +31,16 @@
     "@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.2",
-    "@mezzanine-ui/icons": "^1.0.0-beta.2",
-    "@mezzanine-ui/system": "^1.0.0-beta.2",
+    "@mezzanine-ui/core": "1.0.0-beta.4",
+    "@mezzanine-ui/icons": "1.0.0-beta.4",
+    "@mezzanine-ui/system": "1.0.0-beta.4",
     "@tanstack/react-virtual": "^3.13.13",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "keycode": "^2.2.1",
     "lodash": "^4.17.21",
+    "overlayscrollbars": "^2.13.0",
+    "overlayscrollbars-react": "^0.5.6",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.8.1"
   },

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';