@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/DatePicker/DatePicker.js

@@ -16,7 +16,7 @@ import carbonFlatpickrAppendToPlugin from './plugins/appendToPlugin.js';
 import carbonFlatpickrFixEventsPlugin from './plugins/fixEventsPlugin.js';
 import carbonFlatpickrRangePlugin from './plugins/rangePlugin.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { Escape, ArrowDown, Enter, Tab } from '../../internal/keyboard/keys.js';
+import { Escape, Tab, Enter } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useSavedCallback } from '../../internal/useSavedCallback.js';
@@ -132,35 +132,34 @@ function updateClassNames(calendar, prefix) {
     });
   }
 }
-const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref) {
-  let {
-    allowInput,
-    appendTo,
-    children,
-    className,
-    closeOnSelect = true,
-    dateFormat = 'm/d/Y',
-    datePickerType,
-    disable,
-    enable,
-    inline,
-    invalid,
-    invalidText,
-    warn,
-    warnText,
-    light = false,
-    locale = 'en',
-    maxDate,
-    minDate,
-    onChange,
-    onClose,
-    onOpen,
-    readOnly = false,
-    short = false,
-    value,
-    parseDate: parseDateProp,
-    ...rest
-  } = _ref;
+const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
+  allowInput,
+  appendTo,
+  children,
+  className,
+  closeOnSelect = true,
+  dateFormat = 'm/d/Y',
+  datePickerType,
+  disable,
+  enable,
+  inline,
+  invalid,
+  invalidText,
+  warn,
+  warnText,
+  light = false,
+  locale = 'en',
+  maxDate,
+  minDate,
+  onChange,
+  onClose,
+  onOpen,
+  readOnly = false,
+  short = false,
+  value,
+  parseDate: parseDateProp,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const {
     isFluid
@@ -208,6 +207,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref)
     }
   }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = useRef(null);
+  const lastFocusedField = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
   const savedOnOpen = useSavedCallback(onOpen);
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -356,40 +356,68 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref)
       noCalendar: readOnly,
       nextArrow: rightArrowHTML,
       prevArrow: leftArrowHTML,
-      onChange: function () {
+      onChange: (...args) => {
         if (!readOnly) {
-          savedOnChange(...arguments);
+          savedOnChange(...args);
         }
       },
       onReady: onHook,
       onMonthChange: onHook,
       onYearChange: onHook,
-      onOpen: function () {
-        onHook(...arguments);
-        savedOnOpen(...arguments);
+      onOpen: (...args) => {
+        onHook(...args);
+        savedOnOpen(...args);
       },
       onValueUpdate: onHook
     };
     const calendar = flatpickr(start, flatpickerConfig);
     calendarRef.current = calendar;
-    function handleArrowDown(event) {
+    const handleInputFieldKeyDown = event => {
+      const {
+        calendarContainer,
+        selectedDateElem: fpSelectedDateElem,
+        todayDateElem: fpTodayDateElem
+      } = calendar;
       if (match(event, Escape)) {
-        calendar?.calendarContainer?.classList.remove('open');
+        calendarContainer.classList.remove('open');
       }
-      if (match(event, ArrowDown)) {
-        if (event.target == endInputField.current) {
-          calendar?.calendarContainer?.classList.add('open');
+      if (match(event, Tab)) {
+        if (!event.shiftKey) {
+          event.preventDefault();
+          calendarContainer.classList.add('open');
+          const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
+          const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
+          (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
+          if (event.target === startInputField.current) {
+            lastFocusedField.current = startInputField.current;
+          } else if (event.target === endInputField.current) {
+            lastFocusedField.current = endInputField.current;
+          }
+        } else if (calendarRef.current?.isOpen && event.target === startInputField.current) {
+          calendarRef.current.close();
+          onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
         }
-        const {
-          calendarContainer,
-          selectedDateElem: fpSelectedDateElem,
-          todayDateElem: fpTodayDateElem
-        } = calendar;
-        const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
-        const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
-        (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
       }
-    }
+    };
+    const handleCalendarKeyDown = event => {
+      if (!calendarRef.current || !startInputField.current) return;
+      const lastInputField = datePickerType == 'range' ? endInputField.current : startInputField.current;
+      if (match(event, Tab)) {
+        if (!event.shiftKey) {
+          if (lastFocusedField.current === lastInputField) {
+            lastInputField.focus();
+            calendarRef.current.close();
+            onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
+          } else {
+            event.preventDefault();
+            lastInputField.focus();
+          }
+        } else {
+          event.preventDefault();
+          (lastFocusedField.current || startInputField.current).focus();
+        }
+      }
+    };
     function handleOnChange(event) {
       const {
         target
@@ -413,7 +441,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref)
       }
     }
     if (start) {
-      start.addEventListener('keydown', handleArrowDown);
+      start.addEventListener('keydown', handleInputFieldKeyDown);
       start.addEventListener('change', handleOnChange);
       start.addEventListener('keypress', handleKeyPress);
       if (calendar && calendar.calendarContainer) {
@@ -426,10 +454,13 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref)
       }
     }
     if (end) {
-      end.addEventListener('keydown', handleArrowDown);
+      end.addEventListener('keydown', handleInputFieldKeyDown);
       end.addEventListener('change', handleOnChange);
       end.addEventListener('keypress', handleKeyPress);
     }
+    if (calendar.calendarContainer) {
+      calendar.calendarContainer.addEventListener('keydown', handleCalendarKeyDown);
+    }
 
     //component did unmount equivalent
     return () => {
@@ -450,14 +481,17 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref)
         }
       }
       if (start) {
-        start.removeEventListener('keydown', handleArrowDown);
+        start.removeEventListener('keydown', handleInputFieldKeyDown);
         start.removeEventListener('change', handleOnChange);
         start.removeEventListener('keypress', handleKeyPress);
       }
       if (end) {
-        end.removeEventListener('keydown', handleArrowDown);
+        end.removeEventListener('keydown', handleInputFieldKeyDown);
         end.removeEventListener('change', handleOnChange);
-        end.removeEventListener('change', handleKeyPress);
+        end.removeEventListener('keypress', handleKeyPress);
+      }
+      if (calendar.calendarContainer) {
+        calendar.calendarContainer.removeEventListener('keydown', handleCalendarKeyDown);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -554,17 +588,6 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker(_ref, ref)
     }
   }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    if (!calendarRef.current || !startInputField.current) return;
-    const handleKeyDown = event => {
-      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current?.isOpen) {
-        calendarRef.current.close();
-        onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown, true);
-    return () => document.removeEventListener('keydown', handleKeyDown, true);
-  }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   let fluidError;
   if (isFluid) {
     if (invalid) {

package/es/components/DatePickerInput/DatePickerInput.js

@@ -227,12 +227,11 @@ DatePickerInput.propTypes = {
    */
   warnText: PropTypes.node
 };
-function DatePickerIcon(_ref) {
-  let {
-    datePickerType,
-    invalid,
-    warn
-  } = _ref;
+function DatePickerIcon({
+  datePickerType,
+  invalid,
+  warn
+}) {
   const prefix = usePrefix();
   const {
     isFluid

package/es/components/Dialog/index.d.ts

@@ -5,7 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { type HTMLAttributes } from 'react';
-export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
+import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
+/**
+ * ----------
+ * Dialog
+ * ----------
+ */
+interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
     /**
      * Provide the contents of the Dialog
      */
@@ -42,26 +48,205 @@ export interface DialogProps extends HTMLAttributes<HTMLDialogElement> {
      * Specify whether the Dialog is currently open
      */
     open?: boolean;
+    /**
+     * Specify the role of the dialog for accessibility
+     * 'dialog' is the default, but 'alertdialog' can be used for important messages requiring user attention
+     */
+    role?: '' | 'alertdialog';
+    /**
+     * Specify a label for screen readers
+     */
+    ariaLabel?: string;
+    /**
+     * Specify the ID of an element that labels this dialog
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Specify the ID of an element that describes this dialog
+     */
+    ariaDescribedBy?: string;
 }
-export declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
-export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+declare const unstable__Dialog: React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<unknown>>;
+/**
+ * -------------
+ * DialogHeader
+ * -------------
+ */
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide the contents to be rendered inside of this component
      */
     children?: React.ReactNode;
 }
-export declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface DialogControlsProps extends HTMLAttributes<HTMLDivElement> {
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ---------------
+ * DialogControls
+ * ---------------
+ */
+interface DialogControlsProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Provide the contents to be rendered inside of this component
      */
     children?: React.ReactNode;
 }
-export declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
-export interface DialogCloseButtonProps extends HTMLAttributes<HTMLDivElement> {
+declare const DialogControls: React.ForwardRefExoticComponent<DialogControlsProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------------------
+ * DialogCloseButton
+ * -------------------
+ */
+interface DialogCloseButtonProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Specify a click handler applied to the IconButton
      */
     onClick?: React.MouseEventHandler;
 }
-export declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLDivElement>>;
+declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ------------
+ * DialogTitle
+ * ------------
+ */
+interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Provide the contents of the DialogTitle
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the title node
+     */
+    className?: string;
+    /**
+     * Specify an optional id for the title element
+     */
+    id?: string;
+}
+declare const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * ---------------
+ * DialogSubtitle
+ * ---------------
+ */
+interface DialogSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Provide the contents of the DialogSubtitle
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the subtitle node
+     */
+    className?: string;
+    /**
+     * Specify an optional id for the subtitle element
+     */
+    id?: string;
+}
+declare const DialogSubtitle: React.ForwardRefExoticComponent<DialogSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * -----------
+ * DialogBody
+ * -----------
+ */
+interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide the contents of the DialogBody
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the body node
+     */
+    className?: string;
+    /**
+     * Specify whether the content has overflow that should be scrollable
+     */
+    hasScrollingContent?: boolean;
+}
+declare const DialogBody: React.ForwardRefExoticComponent<DialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------------
+ * DialogFooter
+ * -------------
+ */
+interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Provide the contents of the DialogFooter
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the footer node
+     */
+    className?: string;
+    /**
+     * Specify a handler for closing dialog (secondary button)
+     */
+    onRequestClose?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for the secondary button.
+     * Useful if separate handler from `onRequestClose` is desirable
+     */
+    onSecondarySubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify a handler for submitting dialog (primary button)
+     */
+    onRequestSubmit?: React.ReactEventHandler<HTMLElement>;
+    /**
+     * Specify the text for the primary button
+     */
+    primaryButtonText?: React.ReactNode;
+    /**
+     * Specify whether the Button should be disabled, or not
+     */
+    primaryButtonDisabled?: boolean;
+    /**
+     * Specify the text for the secondary button
+     */
+    secondaryButtonText?: React.ReactNode;
+    /**
+     * Specify an array of config objects for secondary buttons
+     */
+    secondaryButtons?: Array<{
+        buttonText: React.ReactNode;
+        onClick: React.MouseEventHandler<HTMLButtonElement>;
+    }>;
+    /**
+     * Specify whether the Dialog is for dangerous actions
+     */
+    danger?: boolean;
+    /**
+     * Specify loading status
+     */
+    loadingStatus?: InlineLoadingStatus;
+    /**
+     * Specify the description for the loading text
+     */
+    loadingDescription?: string;
+    /**
+     * Specify the description for the loading icon
+     */
+    loadingIconDescription?: string;
+    /**
+     * Specify an optional handler to be invoked when loading is
+     * successful
+     */
+    onLoadingSuccess?: () => void;
+}
+declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * -------
+ * Exports
+ * -------
+ */
+type DialogComponentType = typeof unstable__Dialog & {
+    Root: typeof unstable__Dialog;
+    Header: typeof DialogHeader;
+    Controls: typeof DialogControls;
+    CloseButton: typeof DialogCloseButton;
+    Title: typeof DialogTitle;
+    Subtitle: typeof DialogSubtitle;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+};
+declare const Dialog: DialogComponentType;
+export { Dialog, unstable__Dialog, DialogHeader, DialogControls, DialogCloseButton, DialogTitle, DialogSubtitle, DialogBody, DialogFooter, };
+export type { DialogProps, DialogHeaderProps, DialogControlsProps, DialogCloseButtonProps, DialogTitleProps, DialogSubtitleProps, DialogBodyProps, DialogFooterProps, };