@carbon/react 1.83.0 → 1.84.0

package/lib/components/DataTable/TableToolbarSearch.js

@@ -36,28 +36,27 @@ const translationKeys = {
 const translateWithId = id => {
   return translationKeys[id];
 };
-const TableToolbarSearch = _ref => {
-  let {
-    className,
-    searchContainerClass,
-    onChange: onChangeProp,
-    onClear = noopFn.noopFn,
-    translateWithId: t = translateWithId,
-    placeholder,
-    labelText,
-    expanded: expandedProp,
-    defaultExpanded,
-    defaultValue,
-    disabled,
-    onExpand,
-    persistent = false,
-    id,
-    onBlur,
-    onFocus,
-    size = 'lg',
-    tabIndex = '0',
-    ...rest
-  } = _ref;
+const TableToolbarSearch = ({
+  className,
+  searchContainerClass,
+  onChange: onChangeProp,
+  onClear = noopFn.noopFn,
+  translateWithId: t = translateWithId,
+  placeholder,
+  labelText,
+  expanded: expandedProp,
+  defaultExpanded,
+  defaultValue,
+  disabled,
+  onExpand,
+  persistent = false,
+  id,
+  onBlur,
+  onFocus,
+  size = 'lg',
+  tabIndex = '0',
+  ...rest
+}) => {
   const {
     current: controlled
   } = React.useRef(expandedProp !== undefined);
@@ -88,8 +87,7 @@ const TableToolbarSearch = _ref => {
     [`${prefix}--toolbar-search-container-expandable`]: !persistent,
     [`${prefix}--toolbar-search-container-persistent`]: persistent
   });
-  const handleExpand = function (event) {
-    let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
+  const handleExpand = (event, value = !expanded) => {
     if (!disabled) {
       if (!controlled && !persistent) {
         setExpandedState(value);

package/lib/components/DataTable/state/sorting.js

@@ -43,10 +43,9 @@ const getNextSortDirection = (prevHeader, header, prevState) => {
   // in descending order by default
   return sortStates.sortStates.ASC;
 };
-const getNextSortState = (props, state, _ref) => {
-  let {
-    key
-  } = _ref;
+const getNextSortState = (props, state, {
+  key
+}) => {
   const {
     sortDirection,
     sortHeaderKey

package/lib/components/DataTable/tools/filter.js

@@ -13,20 +13,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * Filters row IDs based on whether any of the cell values in the row include
  * the input value as a substring. Boolean cell values are ignored.
  */
-const defaultFilterRows = _ref => {
-  let {
-    rowIds,
-    headers,
-    cellsById,
-    inputValue,
-    getCellId
-  } = _ref;
+const defaultFilterRows = ({
+  rowIds,
+  headers,
+  cellsById,
+  inputValue,
+  getCellId
+}) => {
   const normalizedInput = inputValue.trim().toLowerCase();
   if (!normalizedInput) return rowIds;
-  return rowIds.filter(rowId => headers.some(_ref2 => {
-    let {
-      key
-    } = _ref2;
+  return rowIds.filter(rowId => headers.some(({
+    key
+  }) => {
     const cellId = getCellId(rowId, key);
     const cell = cellsById[cellId];
     if (typeof cell.value === 'boolean') return false;

package/lib/components/DataTable/tools/normalize.js

@@ -18,8 +18,7 @@ var cells = require('./cells.js');
  * @param {Array<object>} headers
  * @returns {object}
  */
-const normalize = function (rows, headers) {
-  let prevState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+const normalize = (rows, headers, prevState = {}) => {
   const {
     rowsById: prevRowsByIds
   } = prevState;
@@ -50,12 +49,11 @@ const normalize = function (rows, headers) {
       rowsById[row.id].isSelected = prevRowsByIds[row.id].isSelected;
       rowsById[row.id].isExpanded = prevRowsByIds[row.id].isExpanded;
     }
-    headers.forEach((_ref, i) => {
-      let {
-        key,
-        slug,
-        decorator
-      } = _ref;
+    headers.forEach(({
+      key,
+      slug,
+      decorator
+    }, i) => {
       const id = cells.getCellId(row.id, key);
       // Initialize the cell info and state values, namely for editing
       cellsById[id] = {

package/lib/components/DataTable/tools/sorting.js

@@ -17,8 +17,7 @@ var sortStates = require('../state/sortStates.js');
  * type, the default sort algorithm will be used for those types. Otherwise, the
  * values will be converted to strings for comparison.
  */
-const compare = function (a, b) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+const compare = (a, b, locale = 'en') => {
   // prevent multiple null values in one column (sorting breaks)
   if (a === null) a = '';
   if (b === null) b = '';
@@ -41,8 +40,7 @@ const compare = function (a, b) {
  *
  * Note: Uses numeric comparison if strings are numeric.
  */
-const compareStrings = function (a, b) {
-  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+const compareStrings = (a, b, locale = 'en') => {
   const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
   return a.localeCompare(b, locale, {
     numeric: isNumeric
@@ -51,38 +49,34 @@ const compareStrings = function (a, b) {
 /**
  * Sorts table rows based on the provided column key and direction.
  */
-const sortRows = _ref => {
-  let {
-    rowIds,
-    cellsById,
-    sortDirection,
+const sortRows = ({
+  rowIds,
+  cellsById,
+  sortDirection,
+  key,
+  locale = 'en',
+  sortRow = defaultSortRow
+}) => rowIds.slice().sort((a, b) => {
+  const cellA = cellsById[cells.getCellId(a, key)];
+  const cellB = cellsById[cells.getCellId(b, key)];
+  return sortRow(cellA?.value, cellB?.value, {
     key,
-    locale = 'en',
-    sortRow = defaultSortRow
-  } = _ref;
-  return rowIds.slice().sort((a, b) => {
-    const cellA = cellsById[cells.getCellId(a, key)];
-    const cellB = cellsById[cells.getCellId(b, key)];
-    return sortRow(cellA?.value, cellB?.value, {
-      key,
-      sortDirection,
-      sortStates: sortStates.sortStates,
-      locale,
-      compare,
-      rowIds: [a, b]
-    });
+    sortDirection,
+    sortStates: sortStates.sortStates,
+    locale,
+    compare,
+    rowIds: [a, b]
   });
-};
+});
 
 /**
  * Sorts table rows based on the sort direction.
  */
-const defaultSortRow = (cellA, cellB, _ref2) => {
-  let {
-    sortDirection,
-    sortStates,
-    locale
-  } = _ref2;
+const defaultSortRow = (cellA, cellB, {
+  sortDirection,
+  sortStates,
+  locale
+}) => {
   if (sortDirection === sortStates.ASC) {
     return compare(cellA, cellB, locale);
   }

package/lib/components/DataTableSkeleton/DataTableSkeleton.js

@@ -22,18 +22,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _span, _span2;
-const DataTableSkeleton = _ref => {
-  let {
-    headers,
-    rowCount = 5,
-    columnCount = 5,
-    zebra = false,
-    compact = false,
-    className,
-    showHeader = true,
-    showToolbar = true,
-    ...rest
-  } = _ref;
+const DataTableSkeleton = ({
+  headers,
+  rowCount = 5,
+  columnCount = 5,
+  zebra = false,
+  compact = false,
+  className,
+  showHeader = true,
+  showToolbar = true,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const dataTableSkeletonClasses = cx__default["default"](className, {
     [`${prefix}--skeleton`]: true,

package/lib/components/DatePicker/DatePicker.Skeleton.js

@@ -21,14 +21,13 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const DatePickerSkeleton = _ref => {
-  let {
-    range,
-    id,
-    hideLabel,
-    className,
-    ...rest
-  } = _ref;
+const DatePickerSkeleton = ({
+  range,
+  id,
+  hideLabel,
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix.usePrefix();
   const dateInput = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--date-picker-container`

package/lib/components/DatePicker/DatePicker.js

@@ -144,35 +144,34 @@ function updateClassNames(calendar, prefix) {
     });
   }
 }
-const DatePicker = /*#__PURE__*/React__default["default"].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__default["default"].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.usePrefix();
   const {
     isFluid
@@ -220,6 +219,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = React.useRef(null);
+  const lastFocusedField = React.useRef(null);
   const savedOnChange = useSavedCallback.useSavedCallback(onChange);
   const savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
   const datePickerClasses = cx__default["default"](`${prefix}--date-picker`, {
@@ -368,40 +368,68 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       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__default["default"](start, flatpickerConfig);
     calendarRef.current = calendar;
-    function handleArrowDown(event) {
+    const handleInputFieldKeyDown = event => {
+      const {
+        calendarContainer,
+        selectedDateElem: fpSelectedDateElem,
+        todayDateElem: fpTodayDateElem
+      } = calendar;
       if (match.match(event, keys.Escape)) {
-        calendar?.calendarContainer?.classList.remove('open');
+        calendarContainer.classList.remove('open');
       }
-      if (match.match(event, keys.ArrowDown)) {
-        if (event.target == endInputField.current) {
-          calendar?.calendarContainer?.classList.add('open');
+      if (match.match(event, keys.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.match(event, keys.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
@@ -425,7 +453,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     }
     if (start) {
-      start.addEventListener('keydown', handleArrowDown);
+      start.addEventListener('keydown', handleInputFieldKeyDown);
       start.addEventListener('change', handleOnChange);
       start.addEventListener('keypress', handleKeyPress);
       if (calendar && calendar.calendarContainer) {
@@ -438,10 +466,13 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     }
     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 () => {
@@ -462,14 +493,17 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
         }
       }
       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
@@ -566,17 +600,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     }
   }, [value, prefix]); //eslint-disable-line react-hooks/exhaustive-deps
 
-  React.useEffect(() => {
-    if (!calendarRef.current || !startInputField.current) return;
-    const handleKeyDown = event => {
-      if (match.match(event, keys.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/lib/components/DatePickerInput/DatePickerInput.js

@@ -237,12 +237,11 @@ DatePickerInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-function DatePickerIcon(_ref) {
-  let {
-    datePickerType,
-    invalid,
-    warn
-  } = _ref;
+function DatePickerIcon({
+  datePickerType,
+  invalid,
+  warn
+}) {
   const prefix = usePrefix.usePrefix();
   const {
     isFluid