@carbon/react 1.17.0-rc.2 → 1.17.0

package/es/components/DatePicker/DatePicker.js

@@ -21,7 +21,7 @@ import { useSavedCallback } from '../../internal/useSavedCallback.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
-import { ArrowDown } from '../../internal/keyboard/keys.js';
+import { Escape, ArrowDown } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "short", "value"];
 
@@ -292,6 +292,10 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
+      if (match(event, Escape)) {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (match(event, ArrowDown)) {
         var calendarContainer = calendar.calendarContainer,
             fpSelectedDateElem = calendar.selectedDateElem,
@@ -303,6 +307,10 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
     }
 
     function handleOnChange() {
+      if (datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (start.value !== '') {
         return;
       }
@@ -374,7 +382,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_ref
   }, [maxDate]);
   useEffect(function () {
     if (calendarRef.current && disable) {
-      calendarRef.current.set('disbale', disable);
+      calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   useEffect(function () {

package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+import { Calendar } from '@carbon/icons-react';
+
+var _excluded = ["className", "datePickerType"];
+
+function FluidDatePickerSkeleton(_ref) {
+  var className = _ref.className,
+      _ref$datePickerType = _ref.datePickerType,
+      datePickerType = _ref$datePickerType === void 0 ? 'single' : _ref$datePickerType,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx(className, "".concat(prefix, "--form-item ").concat(prefix, "--date-picker--fluid__skeleton"), _defineProperty({}, "".concat(prefix, "--date-picker--fluid__skeleton--range"), datePickerType === 'range'));
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classNames
+  }, other), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), datePickerType !== 'simple' && /*#__PURE__*/React__default.createElement(Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  })), datePickerType === 'range' && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--date-picker--fluid__skeleton--container")
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }), /*#__PURE__*/React__default.createElement(Calendar, {
+    className: "".concat(prefix, "--date-picker__icon"),
+    role: "img",
+    "aria-hidden": "true"
+  }))));
+}
+
+FluidDatePickerSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify which variant of the DatePicker the skeleton should mimic
+   */
+  datePickerType: PropTypes.oneOf(['simple', 'single', 'range'])
+};
+
+export { FluidDatePickerSkeleton as default };

package/es/components/ListBox/ListBoxSelection.js

@@ -28,14 +28,15 @@ function ListBoxSelection(_ref) {
       selectionCount = _ref.selectionCount,
       t = _ref.translateWithId,
       disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection;
+      onClearSelection = _ref.onClearSelection,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix();
   var className = cx("".concat(prefix, "--list-box__selection"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
 
   var handleOnClick = function handleOnClick(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -49,7 +50,7 @@ function ListBoxSelection(_ref) {
   var handleOnKeyDown = function handleOnKeyDown(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     } // When a user hits ENTER, we'll clear the selection
 
@@ -78,7 +79,8 @@ function ListBoxSelection(_ref) {
     onKeyDown: handleOnKeyDown,
     disabled: disabled,
     "aria-label": t('clear.all'),
-    title: description
+    title: description,
+    "aria-disabled": readOnly ? true : undefined
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))) : /*#__PURE__*/React__default.createElement("div", {
     role: "button",
     className: className,
@@ -125,6 +127,11 @@ ListBoxSelection.propTypes = {
    */
   onKeyDown: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.

package/es/components/MultiSelect/MultiSelect.js

@@ -73,7 +73,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       onChange = _ref.onChange,
       onMenuChange = _ref.onMenuChange,
       direction = _ref.direction,
-      selected = _ref.selectedItems;
+      selected = _ref.selectedItems,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix();
 
   var _useContext = useContext(FormContext),
@@ -164,7 +165,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx4)); // needs to be capitalized for react to render it correctly
+  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var sortOptions = {
@@ -229,6 +230,21 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = readOnly ? {
+    onClick: function onClick(evt) {
+      // NOTE: does not prevent click
+      evt.preventDefault(); // focus on the element as per readonly input behavior
+
+      evt.target.focus();
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -242,6 +258,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     size: size,
     className: className,
     disabled: disabled,
+    readOnly: readOnly,
     light: light,
     invalid: invalid,
     invalidText: invalidText,
@@ -257,12 +274,13 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled || readOnly
   }, toggleButtonProps, {
     ref: mergeRefs(toggleButtonProps.ref, ref),
     onKeyDown: onKeyDown
-  }), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
-    clearSelection: !disabled ? clearSelection : noop,
+  }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
+    readOnly: readOnly,
+    clearSelection: !disabled && !readOnly ? clearSelection : noop,
     selectionCount: selectedItems.length,
     translateWithId: translateWithId,
     disabled: disabled
@@ -413,6 +431,11 @@ MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {},
    */
   open: PropTypes.bool,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selected items
    */

package/es/components/OverflowMenu/index.js

@@ -5,10 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
 import { OverflowMenu as OverflowMenu$1 } from './OverflowMenu.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
 
-var OverflowMenu = FeatureFlags.enabled('enable-v11-release') ? createClassWrapper(OverflowMenu$1) : OverflowMenu$1;
+var OverflowMenu = createClassWrapper(OverflowMenu$1);
 
 export { OverflowMenu as default };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -28,7 +28,8 @@ var SkeletonPlaceholder = function SkeletonPlaceholder(_ref) {
 
 SkeletonPlaceholder.propTypes = {
   /**
-   * the class to be applied to the component
+   * Add a custom class to the component
+   * to set the height and width
    */
   className: PropTypes.string
 };

package/es/components/SkeletonText/SkeletonText.js

@@ -89,7 +89,7 @@ SkeletonText.propTypes = {
   heading: PropTypes.bool,
 
   /**
-   * the number of lines in a paragraph
+   * the number of lines shown if paragraph is true
    */
   lineCount: PropTypes.number,
 

package/es/components/StructuredList/StructuredList.js

@@ -5,21 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush", "border"],
+var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
-    _excluded4 = ["onKeyDown", "tabIndex", "children", "className", "head", "label"],
-    _excluded5 = ["className", "value", "name", "title", "id"],
+    _excluded4 = ["onKeyDown", "children", "className", "head"],
+    _excluded5 = ["className", "name", "title", "id"],
     _excluded6 = ["children", "className", "head", "noWrap"];
-var getInstanceId = setupGetInstanceId();
+var GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
+var GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListWrapper(props) {
   var _classNames;
 
@@ -28,18 +29,27 @@ function StructuredListWrapper(props) {
       className = props.className,
       ariaLabel = props.ariaLabel,
       isCondensed = props.isCondensed,
-      isFlush = props.isFlush;
-      props.border;
-      var other = _objectWithoutProperties(props, _excluded);
+      isFlush = props.isFlush,
+      other = _objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix();
   var classes = cx("".concat(prefix, "--structured-list"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+
+  var _React$useState = React__default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedRow = _React$useState2[0],
+      setSelectedRow = _React$useState2[1];
+
+  return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
+    value: selectedRow
+  }, /*#__PURE__*/React__default.createElement(GridSelectedRowDispatchContext.Provider, {
+    value: setSelectedRow
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
     role: "table",
     className: classes
   }, other, {
     "aria-label": ariaLabel
-  }), children);
+  }), children)));
 }
 StructuredListWrapper.propTypes = {
   /**
@@ -47,11 +57,6 @@ StructuredListWrapper.propTypes = {
    */
   ariaLabel: PropTypes.string,
 
-  /**
-   * Specify whether a border should be added to your StructuredListWrapper
-   */
-  border: deprecate(PropTypes.bool, "\nThe prop `border` will be removed in the next major version of Carbon."),
-
   /**
    * Provide the contents of your StructuredListWrapper
    */
@@ -79,9 +84,9 @@ StructuredListWrapper.propTypes = {
 };
 StructuredListWrapper.defaultProps = {
   selection: false,
-  ariaLabel: 'Structured list section',
   isCondensed: false,
-  isFlush: false
+  isFlush: false,
+  ariaLabel: 'Structured list section'
 };
 function StructuredListHead(props) {
   var children = props.children,
@@ -138,29 +143,51 @@ StructuredListBody.propTypes = {
 StructuredListBody.defaultProps = {
   onKeyDown: function onKeyDown() {}
 };
+var GridRowContext = /*#__PURE__*/React__default.createContext(null);
 function StructuredListRow(props) {
+  var _classNames2;
+
   var onKeyDown = props.onKeyDown,
-      tabIndex = props.tabIndex,
       children = props.children,
       className = props.className,
       head = props.head,
-      label = props.label,
       other = _objectWithoutProperties(props, _excluded4);
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasFocusWithin = _useState2[0],
+      setHasFocusWithin = _useState2[1];
+
+  var id = useId('grid-input');
+  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
   var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-row"), className, _defineProperty({}, "".concat(prefix, "--structured-list-row--header-row"), head));
-  return label ?
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-  React__default.createElement("label", _extends({}, other, {
-    tabIndex: tabIndex,
-    className: classes,
-    onKeyDown: onKeyDown
-  }), children) : /*#__PURE__*/React__default.createElement("div", _extends({
+  var value = {
+    id: id
+  };
+  var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
+  return head ? /*#__PURE__*/React__default.createElement("div", _extends({
     role: "row"
   }, other, {
     className: classes
-  }), children);
+  }), children) :
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+  React__default.createElement("div", _extends({}, other, {
+    role: "row",
+    className: classes,
+    onClick: function onClick() {
+      return setSelectedRow(id);
+    },
+    onFocus: function onFocus() {
+      setHasFocusWithin(true);
+    },
+    onBlur: function onBlur() {
+      setHasFocusWithin(false);
+    },
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
+    value: value
+  }, children));
 }
 StructuredListRow.propTypes = {
   /**
@@ -181,42 +208,44 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: PropTypes.bool,
+  label: deprecate(PropTypes.bool, "\nThe `label` prop is no longer needed and will be removed in the next major version of Carbon."),
 
   /**
    * Provide a handler that is invoked on the key down event for the control,
-   * if `<label>` is in use
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Specify the tab index of the container node, if `<label>` is in use
    */
-  tabIndex: PropTypes.number
+  onKeyDown: PropTypes.func
 };
 StructuredListRow.defaultProps = {
   head: false,
-  label: false,
-  tabIndex: 0,
   onKeyDown: function onKeyDown() {}
 };
 function StructuredListInput(props) {
+  var _row$id;
+
+  var defaultId = useId('structureListInput');
+
   var className = props.className,
-      value = props.value,
-      name = props.name,
+      _props$name = props.name,
+      name = _props$name === void 0 ? "structured-list-input-".concat(defaultId) : _props$name,
       title = props.title,
       id = props.id,
       other = _objectWithoutProperties(props, _excluded5);
 
   var prefix = usePrefix();
-  var classes = cx("".concat(prefix, "--structured-list-input"), className);
-  var instanceId = id || getInstanceId();
+  var classes = cx("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
+  var row = React__default.useContext(GridRowContext);
+  var selectedRow = React__default.useContext(GridSelectedRowStateContext);
+  var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
   return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
     type: "radio",
-    tabIndex: -1,
-    id: instanceId,
+    tabIndex: 0,
+    checked: row && row.id === selectedRow,
+    value: (_row$id = row === null || row === void 0 ? void 0 : row.id) !== null && _row$id !== void 0 ? _row$id : '',
+    onChange: function onChange(event) {
+      setSelectedRow(event.target.value);
+    },
+    id: id !== null && id !== void 0 ? id : defaultId,
     className: classes,
-    value: value,
     name: name,
     title: title
   }));
@@ -230,7 +259,7 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: deprecate(PropTypes.bool, "\nThe prop `defaultChecked` is no longer needed and will be removed in the next major version of Carbon."),
 
   /**
    * Specify a custom `id` for the input
@@ -245,7 +274,7 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: PropTypes.func,
+  onChange: deprecate(PropTypes.func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
 
   /**
    * Provide a `title` for the input
@@ -255,11 +284,9 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, "\nThe prop `value` will be removed in the next major version of Carbon.")
 };
 StructuredListInput.defaultProps = {
-  onChange: function onChange() {},
-  value: 'value',
   title: 'title'
 };
 function StructuredListCell(props) {
@@ -273,9 +300,17 @@ function StructuredListCell(props) {
 
   var prefix = usePrefix();
   var classes = cx(className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
+
+  if (head) {
+    return /*#__PURE__*/React__default.createElement("span", _extends({
+      className: classes,
+      role: "columnheader"
+    }, other), children);
+  }
+
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: classes,
-    role: head ? 'columnheader' : 'cell'
+    role: "cell"
   }, other), children);
 }
 StructuredListCell.propTypes = {

package/es/index.js

@@ -66,7 +66,6 @@ export { default as SelectItem } from './components/SelectItem/SelectItem.js';
 export { default as SelectItemGroup } from './components/SelectItemGroup/SelectItemGroup.js';
 export { default as Switch } from './components/Switch/Switch.js';
 export { default as Slider } from './components/Slider/index.js';
-export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/index.js';
 export { default as Tab } from './components/Tab/index.js';
 export { default as TabContent } from './components/TabContent/TabContent.js';
 export { IconTab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
@@ -123,6 +122,7 @@ export { default as SideNavIcon } from './components/UIShell/SideNavIcon.js';
 export { default as SideNavItem } from './components/UIShell/SideNavItem.js';
 export { default as SideNavLinkText } from './components/UIShell/SideNavLinkText.js';
 export { default as unstable_useContextMenu } from './components/ContextMenu/useContextMenu.js';
+export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
@@ -176,6 +176,7 @@ export { NumberInput } from './components/NumberInput/NumberInput.js';
 export { default as ControlledPasswordInput } from './components/TextInput/ControlledPasswordInput.js';
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { ProgressIndicator, ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
+export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper } from './components/StructuredList/StructuredList.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
 export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.js';
 export { default as Content } from './components/UIShell/Content.js';

package/es/internal/FloatingMenu.js

@@ -480,4 +480,6 @@ _defineProperty(FloatingMenu, "defaultProps", {
   updateOrientation: null
 });
 
-export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu as default };
+var FloatingMenu$1 = FloatingMenu;
+
+export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu$1 as default };

package/lib/components/DatePicker/DatePicker.js

@@ -303,6 +303,10 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
+      if (match.match(event, keys.Escape)) {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (match.match(event, keys.ArrowDown)) {
         var calendarContainer = calendar.calendarContainer,
             fpSelectedDateElem = calendar.selectedDateElem,
@@ -314,6 +318,10 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
     }
 
     function handleOnChange() {
+      if (datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
+
       if (start.value !== '') {
         return;
       }
@@ -385,7 +393,7 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
   }, [maxDate]);
   React.useEffect(function () {
     if (calendarRef.current && disable) {
-      calendarRef.current.set('disbale', disable);
+      calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   React.useEffect(function () {