@ringcentral/spring-ui 1.9.2 → 1.11.0

package/Alert.js

@@ -1,4 +1,4 @@
-export { A as Alert, a as AlertTitle } from './chunks/Alert.js';
+export { a as Alert, A as AlertTitle } from './chunks/Alert.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@ringcentral/spring-icon';

package/Announcement.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { useClasses } from '@ringcentral/spring-base';
 import { InfoMd, AlertMd, SuccessMd } from '@ringcentral/spring-icon';
 import { useThemeProps } from '@ringcentral/spring-theme';
-import { A as Alert } from './chunks/Alert.js';
+import { a as Alert } from './chunks/Alert.js';
 import 'clsx';
 import './chunks/Icon.js';
 import './chunks/IconButtonLabel.js';
@@ -32,7 +32,9 @@ const DEFAULT_ICON_MAP = {
 };
 const Announcement = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Announcement' });
-    const { classes, className, severity = 'neutral', startSlot = DEFAULT_ICON_MAP[severity], CloseButtonProps, ...rest } = props;
+    const { classes, className, severity = 'neutral', icon, startSlot = icon === undefined || icon === true
+        ? DEFAULT_ICON_MAP[severity]
+        : icon || null, CloseButtonProps, ...rest } = props;
     const cls = useClasses('announcement', classes, className);
     return (jsx(Alert, { ref: ref, ...rest, startSlot: startSlot, CloseButtonProps: { variant: 'inverted', ...CloseButtonProps }, classes: {
             root: cls('root', severity),

package/Autocomplete.js

@@ -841,7 +841,7 @@ const SuggestionList = forwardRef((inProps, ref) => {
 });
 SuggestionList.displayName = 'SuggestionList';
 
-var Autocomplete$1 = {"sui-autocomplete-chevron":"sui-autocomplete-chevron","sui-autocomplete-clear":"sui-autocomplete-clear","sui-autocomplete-root":"sui-autocomplete-root","sui-focused":"sui-focused","sui-disabled":"sui-disabled","sui-autocomplete-input-container":"sui-autocomplete-input-container","sui-autocomplete-form-field-content":"sui-autocomplete-form-field-content","sui-autocomplete-form-field-content-xlarge":"sui-autocomplete-form-field-content-xlarge","sui-autocomplete-form-field-content-large":"sui-autocomplete-form-field-content-large","sui-autocomplete-form-field-content-medium":"sui-autocomplete-form-field-content-medium","sui-autocomplete-input-container-xlarge":"sui-autocomplete-input-container-xlarge","sui-autocomplete-input-container-large":"sui-autocomplete-input-container-large","sui-autocomplete-input-container-medium":"sui-autocomplete-input-container-medium","sui-autocomplete-input":"sui-autocomplete-input","sui-autocomplete-input-xlarge":"sui-autocomplete-input-xlarge","sui-autocomplete-input-large":"sui-autocomplete-input-large","sui-autocomplete-input-medium":"sui-autocomplete-input-medium","sui-autocomplete-outlined-expanded":"sui-autocomplete-outlined-expanded","sui-autocomplete-outlined-expanded-chevron":"sui-autocomplete-outlined-expanded-chevron","sui-autocomplete-standard-expanded-chevron":"sui-autocomplete-standard-expanded-chevron","sui-autocomplete-error-chevron":"sui-autocomplete-error-chevron","sui-autocomplete-end-adornment":"sui-autocomplete-end-adornment","sui-autocomplete-popper-root":"sui-autocomplete-popper-root","sui-popper-widget":"sui-popper-widget","sui-autocomplete-popper-paper":"sui-autocomplete-popper-paper","sui-autocomplete-popper-empty":"sui-autocomplete-popper-empty"};
+var Autocomplete$1 = {"sui-autocomplete-chevron":"sui-autocomplete-chevron","sui-autocomplete-clear":"sui-autocomplete-clear","sui-autocomplete-root":"sui-autocomplete-root","sui-focused":"sui-focused","sui-disabled":"sui-disabled","sui-autocomplete-input-container":"sui-autocomplete-input-container","sui-autocomplete-form-field-content":"sui-autocomplete-form-field-content","sui-autocomplete-form-field-content-xlarge":"sui-autocomplete-form-field-content-xlarge","sui-autocomplete-form-field-content-large":"sui-autocomplete-form-field-content-large","sui-autocomplete-form-field-content-medium":"sui-autocomplete-form-field-content-medium","sui-autocomplete-input-container-xlarge":"sui-autocomplete-input-container-xlarge","sui-autocomplete-input-container-large":"sui-autocomplete-input-container-large","sui-autocomplete-input-container-medium":"sui-autocomplete-input-container-medium","sui-autocomplete-input":"sui-autocomplete-input","sui-autocomplete-input-xlarge":"sui-autocomplete-input-xlarge","sui-autocomplete-input-large":"sui-autocomplete-input-large","sui-autocomplete-input-medium":"sui-autocomplete-input-medium","sui-autocomplete-outlined-expanded":"sui-autocomplete-outlined-expanded","sui-autocomplete-outlined-expanded-chevron":"sui-autocomplete-outlined-expanded-chevron","sui-autocomplete-standard-expanded-chevron":"sui-autocomplete-standard-expanded-chevron","sui-autocomplete-error-chevron":"sui-autocomplete-error-chevron","sui-autocomplete-end-adornment":"sui-autocomplete-end-adornment","sui-autocomplete-popper-root":"sui-autocomplete-popper-root","sui-popper-widget":"sui-popper-widget","sui-autocomplete-popper-paper":"sui-autocomplete-popper-paper","sui-autocomplete-popper-empty":"sui-autocomplete-popper-empty","sui-autocomplete-status-container":"sui-autocomplete-status-container","sui-autocomplete-status-label":"sui-autocomplete-status-label"};
 
 function stringArrToRegExp(keyToTags) {
     return new RegExp(keyToTags?.join('|') || '', 'g');
@@ -1140,15 +1140,45 @@ const useAutocomplete = ({ multiple: multipleProp, variant, inputValue: inputVal
             if (item && freeSolo) {
                 switch (addNoOptionItem) {
                     case 'first':
+                        noOptionItemRef.current = null;
                         return [item, ...results];
                     case 'last':
+                        noOptionItemRef.current = null;
                         return [...results, item];
                 }
             }
+            if (results.length === 0 && renderNoOptions === true) {
+                if (item) {
+                    noOptionItemRef.current = item;
+                }
+                else {
+                    noOptionItemRef.current = {
+                        id: EMPTY_TAG_TOKEN,
+                        label: '',
+                    };
+                }
+            }
+            else if (results.length > 0) {
+                noOptionItemRef.current = null;
+            }
+            return results;
         }
-        else if (results.length === 0) {
+        if (results.length === 0) {
             const item = getInputValueAsItem();
-            noOptionItemRef.current = item;
+            if (renderNoOptions === true) {
+                if (item) {
+                    noOptionItemRef.current = item;
+                }
+                else {
+                    noOptionItemRef.current = {
+                        id: EMPTY_TAG_TOKEN,
+                        label: '',
+                    };
+                }
+            }
+            else {
+                noOptionItemRef.current = item;
+            }
             if (item && freeSolo && !renderNoOptions) {
                 return [...results, item];
             }
@@ -1590,7 +1620,7 @@ const TextInput = forwardRef(({ renderInput, ...rest }, ref) => {
 const Autocomplete = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Autocomplete' });
     const isAutocomplete = props.variant === 'autocomplete';
-    const { inputVariant = 'standard', variant, groupExpanded, onGroupExpanded, groupDefaultExpanded, groupVariant = 'normal', getExpandIconProps, groupBy, value: valueProp, autoHighlight = true, clearBtn = false, toggleButton = false, multiple = false, ClearButtonProps, onClear, ToggleButtonProps, getToggleButtonProps: getToggleButtonPropsProp, inputValue: inputValueProp, onKeyDown: onKeyDownProp, helperText: helperTextProp, options, openOnFocus = true, toggleWithInput = true, getOptionLabel = DEFAULT_GET_OPTION_LABEL, renderInput, label, inputRef: inputRefProp, error, placeholder, showPlaceholderWithTags, freeSolo, keyToTags = DEFAULT_KEY_TO_CHIPS, maxFreeSolo, SuggestionListProps: { virtualize = true, ...SuggestionListProps } = {}, autoSelect, PopperComponent = Popper, PopperProps: { anchorElType = 'root', ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, inputProps, debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', isOptionEqualToValue, ...rest } = props;
+    const { inputVariant = 'standard', variant, groupExpanded, onGroupExpanded, groupDefaultExpanded, groupVariant = 'normal', getExpandIconProps, groupBy, value: valueProp, autoHighlight = true, clearBtn = false, toggleButton = false, multiple = false, ClearButtonProps, onClear, ToggleButtonProps, getToggleButtonProps: getToggleButtonPropsProp, inputValue: inputValueProp, onKeyDown: onKeyDownProp, helperText: helperTextProp, options, openOnFocus = true, toggleWithInput = true, getOptionLabel = DEFAULT_GET_OPTION_LABEL, renderInput, label, inputRef: inputRefProp, error, placeholder, showPlaceholderWithTags, freeSolo, keyToTags = DEFAULT_KEY_TO_CHIPS, maxFreeSolo, SuggestionListProps: { virtualize = true, ...SuggestionListProps } = {}, autoSelect, PopperComponent = Popper, PopperProps: { anchorElType = 'root', ...PopperProps } = {}, initialIsOpen, disabled, required: requiredProp, disableCloseOnSelect = multiple, onChange: onChangeProp, onInputChange: onInputChangeProp, onMaxFreeSolo, FormHelperTextProps, action, filterOptions, renderOption, renderTags, getOptionDisabled, renderGroup, renderNoOptions, noOptionsText = 'No matches found', inputProps, debug, disabledItemsHighlightable, open: openProp, addNoOptionItem, onOpen, onClose, focused, classes, className, fullWidth = true, size = 'xlarge', isOptionEqualToValue, ...rest } = props;
     const cls = useClasses('autocomplete', classes, className);
     const innerInputRef = useRef(null);
     const textFieldRef = useRef(null);
@@ -1694,10 +1724,13 @@ const Autocomplete = forwardRef((inProps, ref) => {
         focus: focusInput,
     }));
     const hasTags = selectedItems.length > 0;
-    const willRenderNoOptions = !!noOptionItem && !!renderNoOptions;
+    const hasNoOptionItem = !!noOptionItem;
+    const shouldRenderNoOptions = renderNoOptions === true || typeof renderNoOptions === 'function';
+    const willRenderNoOptions = hasNoOptionItem && shouldRenderNoOptions;
     const prevHighlightedIndex = usePrevious(() => highlightedIndex, true);
-    const menuChildren = isOpen && (jsxs(Fragment, { children: [jsx(SuggestionList, { highlightedIndex: highlightedIndex, prevHighlightedIndex: prevHighlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getSuggestionListProps: getSuggestionListProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, maxContainerHeight: 180, getOptionLabel: getOptionLabel, position: "unset", virtualize: virtualize, ...SuggestionListProps }), willRenderNoOptions &&
-                renderNoOptions?.(getNoOptionsProps, noOptionItem)] }));
+    const menuChildren = isOpen && (jsxs(Fragment, { children: [jsx(SuggestionList, { highlightedIndex: highlightedIndex, prevHighlightedIndex: prevHighlightedIndex, optionsGroupList: optionsGroupList, options: optionItems, groupVariant: groupVariant, groupExpanded: groupExpanded, renderGroup: renderGroup, renderOption: renderOption, inputValue: inputValue, getItemProps: getItemProps, getSuggestionListProps: getSuggestionListProps, changeHighlightedIndexReason: changeHighlightedIndexReason, getOptionDisabled: getOptionDisabled, isKeepHighlightedIndex: isKeepHighlightedIndex, maxContainerHeight: 180, getOptionLabel: getOptionLabel, position: "unset", virtualize: virtualize, ...SuggestionListProps }), willRenderNoOptions && (jsx(Fragment, { children: renderNoOptions === true ? (jsx("div", { ...getNoOptionsProps({
+                        className: cls('status-container'),
+                    }), children: jsx("span", { className: cls('status-label'), children: noOptionsText }) })) : typeof renderNoOptions === 'function' ? (renderNoOptions(getNoOptionsProps, noOptionItem)) : null }))] }));
     const isPopperContentEmpty = !isOpen || (!willRenderNoOptions && optionItems.length === 0);
     const popperCls = useClasses('autocomplete-popper', PopperProps?.classes, PopperProps?.className);
     return (jsxs(Fragment, { children: [jsx(TextInput, { renderInput: renderInput, variant: inputVariant, ref: toTextFieldRef, inputRef: inputRef, fullWidth: fullWidth, placeholder: !hasTags || (hasTags && multiple && showPlaceholderWithTags)

package/Avatar.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useContext, Children } from 'react';
 import clsx from 'clsx';
 import { useImgLoaded, useClasses, useFocusVisible, useForkRef } from '@ringcentral/spring-base';
 import { ProfileMd } from '@ringcentral/spring-icon';
@@ -30,6 +30,7 @@ const StatusIndicatorSizeMap = {
     xsmall: undefined,
     xxsmall: undefined,
 };
+const hasRenderableFallbackChildren = (children) => Children.toArray(children).some((child) => child !== '');
 const Avatar = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Avatar' });
     const { component, classes, className, children: childrenProp, imgProps, alt, src, srcSet, size: sizeProp, color = 'default', variant = 'circle', clickable: clickableProp, symbol, avatarShapeRef, showStatusIndicator, IndicatorProps, rootProps, disabled, onClick, ...rest } = props;
@@ -39,54 +40,68 @@ const Avatar = forwardRef((inProps, ref) => {
         src,
         srcSet,
     });
-    const hasImg = src || srcSet;
-    const hasImgNotFailing = hasImg && loaded !== 'error';
+    const hasImg = Boolean(src || srcSet);
+    const shouldShowImage = hasImg && loaded === 'loaded';
+    const shouldMountImage = hasImg && loaded !== 'error';
+    const shouldShowFallback = !shouldShowImage;
     const cls = useClasses('avatar', classes, className);
     const imageProps = {
         alt,
         src,
         srcSet,
         ...imgProps,
-        className: cls('img'),
+        'aria-hidden': shouldShowFallback ? true : imgProps?.['aria-hidden'],
+        className: clsx(cls('img'), imgProps?.className, shouldShowFallback && 'sr-only'),
     };
+    const AvatarImg = 'img';
+    const image = shouldMountImage ? jsx(AvatarImg, { ...imageProps }) : null;
     const groupContext = useContext(AvatarGroupContext);
     const size = sizeProp || groupContext?.size || 'xlarge';
     const groupClassName = groupContext?.className || '';
     let fillShape = false;
-    if (hasImgNotFailing) {
-        const AvatarImg = 'img';
-        children = jsx(AvatarImg, { ...imageProps });
-        fillShape = true;
-    }
-    else if (symbol) {
-        children = jsx(Icon, { size: IconSizeMap[size], symbol: symbol });
+    let fallback = null;
+    let fallbackFillShape = false;
+    if (symbol) {
+        fallback = jsx(Icon, { size: IconSizeMap[size], symbol: symbol });
     }
-    else if (childrenProp) {
-        children = childrenProp;
+    else if (hasRenderableFallbackChildren(childrenProp)) {
+        fallback = childrenProp;
     }
     else if (hasImg && alt) {
-        children = alt[0];
+        fallback = alt[0];
+        fallbackFillShape = true;
+    }
+    else {
+        fallback = jsx(Icon, { size: IconSizeMap[size], symbol: ProfileMd });
+    }
+    if (shouldShowImage) {
+        children = image;
         fillShape = true;
     }
     else {
-        children = jsx(Icon, { size: IconSizeMap[size], symbol: ProfileMd });
+        children = (jsxs(Fragment, { children: [fallback, image] }));
+        fillShape = fallbackFillShape;
     }
     const { focusVisible, focusVisibleRef, focusVisibleHandlers } = useFocusVisible(props);
     const avatarRef = useForkRef(avatarShapeRef, focusVisibleRef);
-    const clickable = clickableProp !== false && onClick ? true : clickableProp ?? false;
+    const clickable = clickableProp !== false && onClick ? true : (clickableProp ?? false);
     const interactive = clickable && !disabled;
     const supportsStatusIndicator = size !== 'xxsmall' && size !== 'xsmall';
-    let AvatarShape = component ?? 'div';
-    if (variant === 'squircle') {
-        AvatarShape = Squircle;
-    }
-    else if (clickable) {
-        AvatarShape = 'button';
-    }
-    const isButtonElement = AvatarShape === 'button' || component === 'button';
+    const shapeComponent = component ?? (clickable ? 'button' : 'div');
+    const AvatarShape = variant === 'squircle' ? Squircle : shapeComponent;
+    const isButtonElement = shapeComponent === 'button';
+    const hasExplicitAccessibleName = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;
+    const accessibleNameProps = (clickable || isButtonElement) &&
+        hasImg &&
+        alt &&
+        !hasExplicitAccessibleName
+        ? {
+            'aria-label': alt,
+        }
+        : {};
     const shapeProps = variant === 'squircle'
         ? {
-            component,
+            component: shapeComponent,
             focusVisible: focusVisible && interactive,
             fillShape,
             interactive,
@@ -121,7 +136,7 @@ const Avatar = forwardRef((inProps, ref) => {
         }, floater: supportsStatusIndicator && showStatusIndicator ? (jsx(StatusIndicator, { size: StatusIndicatorSizeMap[size], ...IndicatorProps })) : undefined, className: clsx(className, groupClassName), classes: {
             root: cls('root', size, { disabled }),
             floater: cls('indicator', interactive && 'clickable-indicator'),
-        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...nonInteractiveShapeProps, ...rest, onClick: onClick ? handleClick : undefined, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
+        }, ...rootProps, ref: ref, children: jsxs(AvatarShape, { className: cls('shape', variant, color, { clickable }, interactive && 'clickable-shape', interactive && `clickable-${variant}`), ...focusVisibleHandlers, ...shapeProps, ...ariaProps, ...accessibleNameProps, ...nonInteractiveShapeProps, ...rest, onClick: onClick ? handleClick : undefined, ref: avatarRef, children: [jsx("div", { className: cls('content', `${variant}-content`, `${size}-content`, `${variant}-${color}`), children: children }), variant === 'circle' && (jsx("div", { className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) })), variant === 'squircle' && interactive && (jsx(Squircle, { interactive: false, className: cls('hover-tint', interactive && 'clickable-hover-tint', interactive && `clickable-hover-tint-${color}-${variant}`) }))] }) }));
 });
 Avatar.displayName = 'SuiAvatar';
 

package/DatePicker.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useFocusVisible, useForkRef, combineProps, useOnlyOneFocusable, useKeyboardMoveFocus, usePrevious, useEventCallback, useWindowContext, runKeyHandler, useControlled } from '@ringcentral/spring-base';
-import { createContext, useContext, useRef, forwardRef, useMemo, useLayoutEffect, createElement, useState, useCallback, useEffect } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useFocusVisible, useForkRef, combineProps, useOnlyOneFocusable, useKeyboardMoveFocus, usePrevious, useId, useEventCallback, useWindowContext, runKeyHandler, useControlled } from '@ringcentral/spring-base';
+import { createContext, useContext, forwardRef, useRef, useMemo, useLayoutEffect, createElement, useState, useCallback, useEffect } from 'react';
 import { B as Button } from './chunks/Button.js';
 import { C as CircularProgressIndicator } from './chunks/CircularProgressIndicator.js';
 import { useDateUtilsContext, DateUtilsProvider } from './DateUtilsContext.js';
@@ -10,7 +10,6 @@ import 'framer-motion';
 import { useThemeProps, useClassesWithMode } from '@ringcentral/spring-theme';
 import './chunks/Icon.js';
 import { I as IconButton } from './chunks/IconButtonLabel.js';
-import { V as VisuallyHidden } from './chunks/VisuallyHidden.js';
 import clsx from 'clsx';
 import dayjs from 'dayjs';
 import { P as PickerTextField } from './chunks/PickerTextField.js';
@@ -30,9 +29,10 @@ import './chunks/useMotionSafeTransition.js';
 import './chunks/Squircle.js';
 import './chunks/Popover.js';
 import './chunks/getGrow.js';
+import './chunks/useHelperTextId.js';
 import './chunks/TextField.js';
 import './chunks/ShowHideEye.js';
-import './chunks/useHelperTextId.js';
+import './chunks/VisuallyHidden.js';
 
 const DatePickerClassesContext = createContext(() => '');
 const useDatePickerClasses = () => useContext(DatePickerClassesContext);
@@ -44,15 +44,16 @@ const HeaderAction = (props) => {
     return (jsx("button", { className: clsx(className, cls('header-action', { focusVisible, disabled })), ref: focusVisibleRef, ...rest, ...focusVisibleHandlers }));
 };
 
-const ScreenReaderContext = createContext(null);
-const useScreenReaderContext = () => useContext(ScreenReaderContext);
 const defaultScreenReaderProps = {
     getMonthYearAriaLabel: (monthLabel, expanded) => `${monthLabel}${expanded ? ', year selection expanded' : ''}`,
     getSwitchMonthAriaLabel: (isNext, currentMonth) => `${isNext ? 'Next' : 'Previous'} month, currently viewing ${currentMonth}`,
     getBackToTodayAriaLabel: () => 'Go back to today',
+    getLoadingAriaLabel: () => 'Loading dates',
     getDayAriaLabel: (day, selected) => `${day}${selected ? ', selected' : ''}`,
     getYearAriaLabel: (year, selected) => `${year}${selected ? ', selected' : ''}`,
 };
+const ScreenReaderContext = createContext(defaultScreenReaderProps);
+const useScreenReaderContext = () => useContext(ScreenReaderContext);
 const ScreenReaderProvider = ({ screenReaderProps, children, }) => {
     return (jsx(ScreenReaderContext.Provider, { value: screenReaderProps || defaultScreenReaderProps, children: children }));
 };
@@ -131,20 +132,17 @@ const findClosestEnabledDate = ({ date, utils, minDate, maxDate, disableFuture,
 };
 
 const DatePickerHeader = (props) => {
-    const { focusedDate, onMonthChange, disablePrevMonth = false, disableNextMonth = false, onViewChange, view, } = props;
+    const { focusedDate, onMonthChange, disablePrevMonth = false, disableNextMonth = false, onViewChange, view, gridLabelId, } = props;
     const utils = useDateUtilsContext();
     const cls = useDatePickerClasses();
     const preMonth = utils.getPreviousMonth(focusedDate);
     const nextMonth = utils.getNextMonth(focusedDate);
     const monthLabel = utils.getCalendarHeaderText(focusedDate);
-    const changeFromRef = useRef();
     const selectNextMonth = () => {
         onMonthChange(nextMonth, 'left');
-        changeFromRef.current = 'next';
     };
     const selectPreviousMonth = () => {
         onMonthChange(preMonth, 'right');
-        changeFromRef.current = 'previous';
     };
     const isYearView = view === 'year';
     const isExpanded = isYearView;
@@ -152,9 +150,7 @@ const DatePickerHeader = (props) => {
     const monthYearAriaLabel = getMonthYearAriaLabel?.(`${monthLabel}`, isExpanded);
     const nextMonthAriaLabel = getSwitchMonthAriaLabel?.(true, utils.getMonthText(focusedDate));
     const previousMonthAriaLabel = getSwitchMonthAriaLabel?.(false, utils.getMonthText(focusedDate));
-    return (jsxs(Fragment, { children: [changeFromRef.current && (jsx(VisuallyHidden, { role: "region", "aria-live": "assertive", children: changeFromRef.current === 'next'
-                    ? nextMonthAriaLabel
-                    : previousMonthAriaLabel })), jsxs("div", { className: cls('header'), children: [jsxs(HeaderAction, { onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": isExpanded, "data-sui-picker-switch-year-action": "", className: cls('switch-year-action'), children: [monthLabel, jsx(ExpandCollapseCaret, { className: cls('switch-year-action-caret'), size: "small", expanded: isExpanded })] }), !isYearView && (jsxs("div", { className: cls('switch-month-actions-group'), children: [jsx(IconButton, { shape: "squircle", variant: "contained", color: "secondary", size: "small", background: false, symbol: CaretLeftMd, className: cls('switch-month-action'), disabled: disablePrevMonth, onClick: selectPreviousMonth, "aria-label": previousMonthAriaLabel, "data-sui-picker-previous-month": "" }), jsx(IconButton, { shape: "squircle", variant: "contained", color: "secondary", size: "small", background: false, symbol: CaretRightMd, className: cls('switch-month-action'), disabled: disableNextMonth, onClick: selectNextMonth, "aria-label": nextMonthAriaLabel, "data-sui-picker-next-month": "" })] }))] })] }));
+    return (jsx(Fragment, { children: jsxs("div", { className: cls('header'), children: [jsxs(HeaderAction, { onClick: onViewChange, "aria-label": monthYearAriaLabel, "aria-expanded": isExpanded, "data-sui-picker-switch-year-action": "", className: cls('switch-year-action'), children: [jsx("span", { id: gridLabelId, "aria-live": "polite", "aria-atomic": "true", children: monthLabel }), jsx(ExpandCollapseCaret, { className: cls('switch-year-action-caret'), size: "small", expanded: isExpanded })] }), !isYearView && (jsxs("div", { className: cls('switch-month-actions-group'), children: [jsx(IconButton, { shape: "squircle", variant: "contained", color: "secondary", size: "small", background: false, symbol: CaretLeftMd, className: cls('switch-month-action'), disabled: disablePrevMonth, onClick: selectPreviousMonth, "aria-label": previousMonthAriaLabel, "data-sui-picker-previous-month": "" }), jsx(IconButton, { shape: "squircle", variant: "contained", color: "secondary", size: "small", background: false, symbol: CaretRightMd, className: cls('switch-month-action'), disabled: disableNextMonth, onClick: selectNextMonth, "aria-label": nextMonthAriaLabel, "data-sui-picker-next-month": "" })] }))] }) }));
 };
 DatePickerHeader.displayName = 'RcDatePickerHeader';
 
@@ -165,12 +161,18 @@ const Day = forwardRef((props, ref) => {
     const { focusVisible, focusVisibleHandlers, focusVisibleRef } = useFocusVisible();
     const utils = useDateUtilsContext();
     const handleRef = useForkRef(ref, focusVisibleRef);
+    const dayLabel = `${utils.getDatePickerHeaderText(date)} ${utils.getYearText(date)}`;
     return (jsx("button", { onClick: () => onSelect(value), ref: handleRef, className: cls('date-button', 'day', {
             'current-date': current,
             selected,
             disabled,
             focusVisible,
-        }), "data-sui-picker-focused": focused ? '' : undefined, "data-sui-picker-day": value, "aria-label": getDayAriaLabel?.(`${utils.getDatePickerHeaderText(date)} ${utils.getYearText(date)}`, selected), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
+        }), "data-sui-picker-focused": focused ? '' : undefined, "data-sui-picker-day": value, "aria-label": getDayAriaLabel?.(dayLabel, selected, {
+            date,
+            disabled,
+            today: current,
+            focused,
+        }), ...rest, ...combineProps({ onBlur, onFocus }, focusVisibleHandlers), children: children }));
 });
 Day.displayName = 'SuiDay';
 
@@ -234,13 +236,14 @@ const Years = forwardRef((props, ref) => {
 });
 Years.displayName = 'SuiYears';
 
+const DATE_PICKER_CALENDAR_GRID_LABEL_ID_PREFIX = 'DatePickerCalendarGridLabel';
 const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange, todayButtonText, loadingIndicator, disablePast, disableFuture, renderDay, onSelectDay, getInvalidateDateInRange, }, ref) => {
     const cls = useDatePickerClasses();
     const utils = useDateUtilsContext();
     const previousFocusDate = usePrevious(() => focusedDate);
     const previousView = usePrevious(() => view);
     const weeks = useRef([]);
-    const weekdays = useMemo(() => utils.getWeekdays(), [utils]);
+    const weekdayLabels = useMemo(() => utils.getWeekdayLabels(), [utils]);
     const { now, isTodayDisabled } = useMemo(() => {
         const nowDate = utils.date();
         return {
@@ -252,6 +255,7 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
     const [view, setView] = useState('day');
     const [slideDirection, setSlideDirection] = useState('left');
     const [loadingQueue, setLoadingQueue] = useState(0);
+    const gridLabelId = useId(DATE_PICKER_CALENDAR_GRID_LABEL_ID_PREFIX, true);
     const { min, max } = dateRange;
     const currentMonthNumber = utils.getMonth(focusedDate);
     const sameMonthDate = previousFocusDate
@@ -320,30 +324,34 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
             ' ': confirmDate,
         });
     };
-    const { getBackToTodayAriaLabel } = useScreenReaderContext() ?? {};
+    const { getBackToTodayAriaLabel, getLoadingAriaLabel } = useScreenReaderContext() ?? {};
     const backToTodayAriaLabel = getBackToTodayAriaLabel?.();
+    const loadingAriaLabel = getLoadingAriaLabel?.();
     const renderDays = (week) => {
         const selectedDate = date;
         return week.map((day) => {
             const disabled = shouldDisableDate(day);
             const isDayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
             const dayText = utils.getDayText(day);
-            const key = `${dayText}/${currentMonthNumber}`;
+            const key = utils.formatByString(day, 'YYYY-MM-DD');
             const selected = utils.isSameDay(day, selectedDate);
             const focused = utils.isSameDay(focusedDate, day);
             const dayComponent = isDayInCurrentMonth ? (jsx(Day, { disabled: disabled, current: utils.isSameDay(day, now), selected: selected, tabIndex: focused ? 0 : -1, focused: focused, date: day, value: dayText, onSelect: () => {
                     isDayInCurrentMonth && onSelectDay(day);
                 }, children: dayText }, key)) : (jsx("div", { "aria-hidden": true }, key));
-            return renderDay
+            const renderedDay = renderDay
                 ? renderDay(day, focusedDate, isDayInCurrentMonth, dayComponent)
                 : dayComponent;
+            return (jsx("td", { className: cls('day-cell'), "aria-selected": selected && isDayInCurrentMonth ? true : undefined, children: renderedDay }, key));
         });
     };
     const renderBody = () => {
-        const loadingElement = loadingIndicator ? (loadingIndicator) : (jsx("div", { className: cls('loading-container'), children: jsx(CircularProgressIndicator, {}) }));
+        const loadingElement = loadingIndicator ? (loadingIndicator) : (jsx("div", { className: cls('loading-container'), children: jsx(CircularProgressIndicator, { progressBarProps: {
+                    'aria-label': loadingAriaLabel,
+                } }) }));
         switch (view) {
             case 'day':
-                return (jsxs(Fragment, { children: [jsxs("div", { className: cls('days-panel'), role: "presentation", children: [jsx("div", { className: cls('weekdays'), children: weekdays.map((day) => (jsx("span", { className: cls('weekday'), children: day }, day))) }), loadingQueue > 0 ? (jsx("div", { children: loadingElement })) : (jsx("div", { className: cls('days-grid'), onKeyDown: handleKeyDown, children: weeks.current.map((week) => renderDays(week)) }))] }), jsx("div", { children: jsx(Button, { className: cls('today-button'), variant: "outlined", size: "small", color: "secondary", onClick: () => {
+                return (jsxs(Fragment, { children: [jsx("div", { className: cls('days-panel'), children: jsxs("table", { className: cls('days-grid'), role: "grid", "aria-labelledby": gridLabelId, "aria-busy": loadingQueue > 0 ? true : undefined, onKeyDown: handleKeyDown, children: [jsx("thead", { children: jsx("tr", { className: cls('weekdays'), children: weekdayLabels.map(({ full, min }) => (jsx("th", { className: cls('weekday'), scope: "col", abbr: full, "aria-label": full, children: min }, full))) }) }), loadingQueue > 0 ? (jsx("tbody", { "data-sui-picker-loading": "", children: jsx("tr", { children: jsx("td", { colSpan: 7, children: loadingElement }) }) })) : (jsx("tbody", { children: weeks.current.map((week) => (jsx("tr", { className: cls('week'), children: renderDays(week) }, utils.formatByString(week[0], 'YYYY-MM-DD')))) }))] }) }), jsx("div", { children: jsx(Button, { className: cls('today-button'), variant: "outlined", size: "small", color: "secondary", onClick: () => {
                                     onSelectDay(now);
                                 }, disabled: isTodayDisabled, "aria-label": backToTodayAriaLabel, "data-sui-picker-today": "", children: todayButtonText }) })] }));
             case 'year':
@@ -385,11 +393,11 @@ const Calendar = forwardRef(({ onMonthChange, date, shouldDisableDate, dateRange
     useLayoutEffect(() => {
         focusDayElement();
     }, []);
-    return (jsxs("div", { className: cls('calendar'), ref: ref, children: [jsx(DatePickerHeader, { focusedDate: focusedDate, slideDirection: slideDirection, view: view, onMonthChange: handleMonthChange, onViewChange: handleChangeView, disablePrevMonth: disablePrevMonth, disableNextMonth: disableNextMonth }), renderBody()] }));
+    return (jsxs("div", { className: cls('calendar'), ref: ref, children: [jsx(DatePickerHeader, { focusedDate: focusedDate, slideDirection: slideDirection, view: view, onMonthChange: handleMonthChange, onViewChange: handleChangeView, disablePrevMonth: disablePrevMonth, disableNextMonth: disableNextMonth, gridLabelId: gridLabelId }), renderBody()] }));
 });
 Calendar.displayName = 'RcCalendar';
 
-var DatePicker$1 = {"sui-date-picker-calendar":"sui-date-picker-calendar","sui-date-picker-header":"sui-date-picker-header","sui-date-picker-header-action":"sui-date-picker-header-action","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-date-picker-switch-year-action":"sui-date-picker-switch-year-action","sui-date-picker-switch-year-action-caret":"sui-date-picker-switch-year-action-caret","sui-date-picker-switch-month-actions-group":"sui-date-picker-switch-month-actions-group","sui-date-picker-switch-month-action":"sui-date-picker-switch-month-action","sui-date-picker-date-button":"sui-date-picker-date-button","sui-selected":"sui-selected","sui-date-picker-current-date":"sui-date-picker-current-date","sui-date-picker-day":"sui-date-picker-day","sui-date-picker-year":"sui-date-picker-year","sui-date-picker-years-panel":"sui-date-picker-years-panel","sui-date-picker-days-panel":"sui-date-picker-days-panel","sui-date-picker-days-grid":"sui-date-picker-days-grid","sui-date-picker-weekdays":"sui-date-picker-weekdays","sui-date-picker-weekday":"sui-date-picker-weekday","sui-date-picker-loading-container":"sui-date-picker-loading-container","sui-date-picker-today-button":"sui-date-picker-today-button","sui-compact":"sui-compact"};
+var DatePicker$1 = {"sui-date-picker-calendar":"sui-date-picker-calendar","sui-date-picker-header":"sui-date-picker-header","sui-date-picker-header-action":"sui-date-picker-header-action","sui-focus-visible":"sui-focus-visible","sui-disabled":"sui-disabled","sui-date-picker-switch-year-action":"sui-date-picker-switch-year-action","sui-date-picker-switch-year-action-caret":"sui-date-picker-switch-year-action-caret","sui-date-picker-switch-month-actions-group":"sui-date-picker-switch-month-actions-group","sui-date-picker-switch-month-action":"sui-date-picker-switch-month-action","sui-date-picker-date-button":"sui-date-picker-date-button","sui-selected":"sui-selected","sui-date-picker-current-date":"sui-date-picker-current-date","sui-date-picker-day":"sui-date-picker-day","sui-date-picker-year":"sui-date-picker-year","sui-date-picker-years-panel":"sui-date-picker-years-panel","sui-date-picker-days-panel":"sui-date-picker-days-panel","sui-date-picker-days-grid":"sui-date-picker-days-grid","sui-date-picker-week":"sui-date-picker-week","sui-date-picker-weekdays":"sui-date-picker-weekdays","sui-date-picker-day-cell":"sui-date-picker-day-cell","sui-date-picker-weekday":"sui-date-picker-weekday","sui-date-picker-loading-container":"sui-date-picker-loading-container","sui-date-picker-today-button":"sui-date-picker-today-button","sui-compact":"sui-compact"};
 
 const defaultMinDate = new Date('1900-01-01');
 const defaultMaxDate = new Date('2100-01-01');
@@ -403,17 +411,16 @@ const InnerDatePicker = (props) => {
         default: null,
         name: 'DatePicker',
     });
-    const emitValueRef = useRef(null);
     const actionRef = useRef(null);
+    const minDateValue = minDate?.valueOf() ?? defaultMinDate.valueOf();
+    const maxDateValue = maxDate?.valueOf() ?? defaultMaxDate.valueOf();
     const dateRange = useMemo(() => ({
-        min: dayjs(minDate || defaultMinDate),
-        max: dayjs(maxDate || defaultMaxDate),
-    }), [minDate, maxDate]);
-    const getInvalidateDateInRange = useEventCallback((day) => invalidateDateInRange(day, { dateRange, now: utils.date(), disableFuture, disablePast }, utils));
-    const shouldDisableDate = useEventCallback((day) => {
-        return (Boolean(getInvalidateDateInRange(day)) ||
-            Boolean(shouldDisableDateProp?.(day)));
-    });
+        min: dayjs(minDateValue),
+        max: dayjs(maxDateValue),
+    }), [minDateValue, maxDateValue]);
+    const getInvalidateDateInRange = useCallback((day) => invalidateDateInRange(day, { dateRange, now: utils.date(), disableFuture, disablePast }, utils), [dateRange, disableFuture, disablePast, utils]);
+    const shouldDisableDate = useCallback((day) => Boolean(getInvalidateDateInRange(day)) ||
+        Boolean(shouldDisableDateProp?.(day)), [getInvalidateDateInRange, shouldDisableDateProp]);
     const getClosestEnabledDate = useCallback((currDate) => {
         return findClosestEnabledDate({
             date: currDate,
@@ -439,7 +446,6 @@ const InnerDatePicker = (props) => {
     const handleChange = (toDate, fromUserSelect) => {
         actionRef.current?.close();
         setControlledValue(toDate);
-        emitValueRef.current = toDate;
         onChange?.(toDate, fromUserSelect);
     };
     const handleDaySelect = useEventCallback((day, fromUserSelect = true) => {
@@ -447,10 +453,11 @@ const InnerDatePicker = (props) => {
         handleChange(newDay, fromUserSelect);
     });
     useEffect(() => {
-        if (dayjsValue &&
-            value !== emitValueRef.current &&
-            shouldDisableDate(dayjsValue)) {
-            const closestEnabledDate = getClosestEnabledDate(dayjsValue);
+        if (!dayjsValue || !shouldDisableDate(dayjsValue)) {
+            return;
+        }
+        const closestEnabledDate = getClosestEnabledDate(dayjsValue);
+        if (!utils.isSameDay(closestEnabledDate, dayjsValue)) {
             handleDaySelect(closestEnabledDate, false);
         }
     }, [
@@ -458,7 +465,7 @@ const InnerDatePicker = (props) => {
         getClosestEnabledDate,
         handleDaySelect,
         shouldDisableDate,
-        value,
+        utils,
     ]);
     return (jsx(DatePickerClassesContext.Provider, { value: cls, children: jsx(PickerTextField, { className: cls('root'), variant: "standard", label: label, ref: innerRef, action: actionRef, onClear: (e) => {
                 onClear?.(e);

package/DateUtilsContext.js

@@ -2,11 +2,27 @@ import { jsx } from 'react/jsx-runtime';
 import DateUtils from '@date-io/dayjs';
 import { createContext, useMemo, useContext } from 'react';
 
+const weekdayLabelFormatMap = {
+    min: 'dd',
+    short: 'ddd',
+    full: 'dddd',
+};
 const DateUtilsContext = createContext(null);
 const DateUtilsProvider = (props) => {
     const { children, locale } = props;
     const utils = useMemo(() => {
         const dateUtils = new DateUtils({ locale });
+        const getWeekdayLabels = () => {
+            const weekStart = dateUtils.startOfWeek(dateUtils.date());
+            return Array.from({ length: 7 }, (_, index) => {
+                const weekday = dateUtils.addDays(weekStart, index);
+                return {
+                    min: dateUtils.formatByString(weekday, weekdayLabelFormatMap.min),
+                    short: dateUtils.formatByString(weekday, weekdayLabelFormatMap.short),
+                    full: dateUtils.formatByString(weekday, weekdayLabelFormatMap.full),
+                };
+            });
+        };
         const customUtils = {
             getCalendarHeaderText: (date) => {
                 return dateUtils.formatByString(date, 'MMMM YYYY');
@@ -18,7 +34,7 @@ const DateUtilsProvider = (props) => {
                 return dateUtils.formatByString(date, 'MMMM');
             },
             getDatePickerHeaderText: (date) => {
-                return dateUtils.formatByString(date, 'ddd, MMM D');
+                return dateUtils.formatByString(date, 'dddd, MMMM D');
             },
             getDateTimePickerHeaderText: (date) => {
                 return dateUtils.formatByString(date, 'MMM D');
@@ -26,6 +42,7 @@ const DateUtilsProvider = (props) => {
             getDayText: (date) => {
                 return dateUtils.formatByString(date, 'D');
             },
+            getWeekdayLabels,
             getHourText: (date, ampm) => {
                 return dateUtils.formatByString(date, ampm ? 'hh' : 'HH');
             },

package/Dialer.js

@@ -248,7 +248,7 @@ const DialPad = forwardRef((inProps, ref) => {
                     ? 'medium'
                     : 'large';
                 const icon = size === 'large' ? lgIcon : smIcon;
-                return (jsx(DialPadButton, { classes: classes, symbol: icon, value: key, onKeyEffect: handleKeyEffect, ...getItemProps(index), "aria-label": ariaLabelArr.join(', '), onKeyDown: onKeyFocusedIndexHandle, ...{ [dialButtonKey]: key }, ...getDialPadButtonProps?.(key), ...(key === '0'
+                return (jsx(DialPadButton, { classes: classes, symbol: icon, value: key, onKeyEffect: handleKeyEffect, ...getItemProps(index), "aria-label": ariaLabelArr.join(', '), onKeyDown: onKeyFocusedIndexHandle, [dialButtonKey]: key, ...getDialPadButtonProps?.(key), ...(key === '0'
                         ? {
                             longPressValue: DIALER_PAD_PLUS,
                             longPressDelay,

package/Dialog.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 import kebabCase from 'lodash/kebabCase';
 import { useEventCallback, combineProps, useClasses } from '@ringcentral/spring-base';
@@ -22,34 +22,31 @@ import './chunks/PopperPaper.js';
 import './chunks/useFocusTrapStack.js';
 import './chunks/Backdrop.js';
 
-var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-non-blocking":"sui-dialog-non-blocking","sui-dialog-small":"sui-dialog-small","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"};
+var Dialog$1 = {"sui-dialog-body":"sui-dialog-body","sui-dialog-root":"sui-dialog-root","sui-dialog-non-blocking":"sui-dialog-non-blocking","sui-dialog-small":"sui-dialog-small","sui-dialog-close-button":"sui-dialog-close-button","sui-dialog-medium":"sui-dialog-medium","sui-dialog-large":"sui-dialog-large","sui-dialog-title-root":"sui-dialog-title-root","sui-dialog-content-root":"sui-dialog-content-root","sui-dialog-actions-root":"sui-dialog-actions-root","sui-dialog-right":"sui-dialog-right","sui-dialog-right-close-button":"sui-dialog-right-close-button","sui-dialog-left":"sui-dialog-left","sui-dialog-left-close-button":"sui-dialog-left-close-button","sui-dialog-full-height":"sui-dialog-full-height","sui-dialog-full-screen":"sui-dialog-full-screen","sui-compact":"sui-compact"};
 
 const Dialog = forwardRef((inProps, ref) => {
     const props = useThemeProps({ props: inProps, name: 'Dialog' });
-    const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, blocking = true, CloseButtonProps, ...rest } = props;
+    const { bodyProps, classes, className, children, size = 'medium', placement = 'right', open, onClose, blocking = true, closeButton, CloseButtonProps, ...rest } = props;
     const cls = useClassesWithMode('dialog', classes, className);
-    const toSize = useMemo(() => kebabCase(size), [size]);
+    const toSize = kebabCase(size);
     const isFullHeight = size === 'fullHeight';
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const showCloseButton = shouldShowDialogCloseButton(closeButton, size);
+    const closeButtonClassName = showCloseButton
+        ? cls('close-button', size === 'fullHeight' && `${placement}-close-button`)
+        : undefined;
     const slideInProps = getSlideIn({
         toggle: open,
         from: placement,
-        prefersReducedMotion: usePrefersReducedMotion(),
+        prefersReducedMotion,
         toggleOnTransition: motionTransition['haste-01-fast'],
         toggleOffTransition: motionTransition['neutral-01-fast'],
     });
     const handleCloseButtonClick = useEventCallback((e) => {
         onClose?.(e, 'closeButtonClick');
     });
-    const nonBlockingProps = !blocking
-        ? {
-            disableScrollLock: true,
-            disableBackdropClick: true,
-            disableEscapeKeyDown: true,
-            hideBackdrop: true,
-        }
-        : {};
-    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, ...nonBlockingProps, className: cls('root', { 'non-blocking': !blocking }), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...(isFullHeight && slideInProps), ...bodyProps, ref: ref, tabIndex: blocking ? -1 : undefined, className: cls('body', toSize, isFullHeight && placement), children: [children, isFullHeight && (jsx(IconButton, { size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", ...combineProps({
-                        className: cls('close-button', `${placement}-close-button`),
+    return (jsx(Modal, { open: open, onClose: onClose, blocking: blocking, className: cls('root', { 'non-blocking': !blocking }), ...rest, children: jsxs(motion.div, { role: "dialog", "aria-modal": blocking, ...(isFullHeight && slideInProps), ...bodyProps, ref: ref, tabIndex: blocking ? -1 : undefined, className: cls('body', toSize, isFullHeight && placement), children: [children, closeButtonClassName && (jsx(IconButton, { size: 'large', color: 'secondary', symbol: Xsm, variant: "contained", ...combineProps({
+                        className: closeButtonClassName,
                         onClick: handleCloseButtonClick,
                         'aria-label': 'Close',
                     }, CloseButtonProps) }))] }) }));
@@ -70,5 +67,17 @@ const DialogActions = forwardRef(({ className, ...rest }, ref) => {
     return jsx("div", { ref: ref, className: cls('root'), ...rest });
 });
 DialogActions.displayName = 'SuiDialogActions';
+function shouldShowDialogCloseButton(closeButton, size) {
+    if (size === 'fullScreen') {
+        return false;
+    }
+    if (closeButton === false) {
+        return false;
+    }
+    if (closeButton === true) {
+        return true;
+    }
+    return size === 'fullHeight';
+}
 
 export { Dialog, DialogActions, DialogContent, DialogTitle, Dialog$1 as dialogStyle };