@carbon/react 1.11.0 → 1.12.0

package/es/components/ComboBox/ComboBox.js

@@ -346,7 +346,6 @@ var ComboBox = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
       return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
         key: itemProps.id,
         isActive: selectedItem === item,
-        tabIndex: "-1",
         isHighlighted: highlightedIndex === index || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || false,
         title: itemToElement ? item.text : itemToString(item)
       }, itemProps), itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({

package/es/components/FluidTextInput/FluidTextInput.js

@@ -0,0 +1,104 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import '../TextInput/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+import TextInput from '../TextInput/TextInput.js';
+
+var _excluded = ["className"];
+
+function FluidTextInput(_ref) {
+  var className = _ref.className,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var classNames = cx("".concat(prefix, "--text-input--fluid"), className);
+  return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default.createElement(TextInput, _extends({
+    className: classNames
+  }, other)));
+}
+
+FluidTextInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.node.isRequired,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+
+export { FluidTextInput as default };

package/es/components/Layout/LayoutDirection.js

@@ -0,0 +1,53 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import { LayoutDirectionContext } from './LayoutDirectionContext.js';
+export { LayoutDirectionContext } from './LayoutDirectionContext.js';
+
+var _excluded = ["as", "children", "dir"];
+
+function LayoutDirection(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      dir = _ref.dir,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var value = React__default.useMemo(function () {
+    return {
+      direction: dir
+    };
+  }, [dir]);
+  return /*#__PURE__*/React__default.createElement(LayoutDirectionContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+    dir: dir
+  }, rest), children));
+}
+
+LayoutDirection.propTypes = {
+  /**
+   * Customize the element type used to render the outermost node
+   */
+  as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Provide child elements or components to be rendered inside of this
+   * component
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify the layout direction of this part of the page
+   */
+  dir: PropTypes.oneOf(['ltr', 'rtl']).isRequired
+};
+
+export { LayoutDirection };

package/es/components/Layout/LayoutDirectionContext.js

@@ -0,0 +1,14 @@
+/**
+ * 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 React__default from 'react';
+
+var LayoutDirectionContext = /*#__PURE__*/React__default.createContext({
+  direction: 'ltr'
+});
+
+export { LayoutDirectionContext };

package/es/components/Layout/useLayoutDirection.js

@@ -0,0 +1,19 @@
+/**
+ * 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 { useContext } from 'react';
+import { LayoutDirectionContext } from './LayoutDirectionContext.js';
+
+/**
+ * Get access to the current layout direction in context
+ */
+
+function useLayoutDirection() {
+  return useContext(LayoutDirectionContext);
+}
+
+export { useLayoutDirection };

package/es/components/ListBox/ListBoxMenuItem.js

@@ -49,7 +49,8 @@ var ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMen
   var className = cx("".concat(prefix, "--list-box__menu-item"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--active"), isActive), _defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--highlighted"), isHighlighted), _cx));
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
-    title: isTruncated ? title : undefined
+    title: isTruncated ? title : undefined,
+    tabIndex: "-1"
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--list-box__menu-item__option"),
     ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref

package/es/components/Modal/Modal.js

@@ -121,7 +121,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     tabIndex: "-1",
     className: "".concat(modalCloseButtonClass, "__icon")
   }));
-  var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
+  var ariaLabel = modalLabel || rest['aria-label'] || modalAriaLabel || modalHeading;
   var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
   var hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
@@ -151,7 +151,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   useEffect(function () {
     var initialFocus = function initialFocus(focusContainerElement) {
       var containerElement = focusContainerElement || innerModal.current;
-      var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
+      var primaryFocusElement = containerElement ? containerElement.querySelector(danger ? ".".concat(prefix, "--btn--secondary") : selectorPrimaryFocus) : null;
 
       if (primaryFocusElement) {
         return primaryFocusElement;
@@ -171,7 +171,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     if (open) {
       focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus]);
+  }, [open, selectorPrimaryFocus, danger, prefix]);
   var modalBody = /*#__PURE__*/React__default.createElement("div", _extends({
     ref: innerModal,
     role: "dialog"

package/es/components/Slider/Slider.js

@@ -625,7 +625,7 @@ _defineProperty(Slider, "propTypes", {
   required: PropTypes.bool,
 
   /**
-   * A value determining how much the value should increase/decrease by moving the thumb by mouse.
+   * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
    */
   step: PropTypes.number,
 

package/es/components/Text/TextDirection.js

@@ -0,0 +1,51 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React__default, { useRef, useMemo, useEffect } from 'react';
+import { TextDirectionContext } from './TextDirectionContext.js';
+
+function TextDirection(_ref) {
+  var children = _ref.children,
+      _ref$dir = _ref.dir,
+      dir = _ref$dir === void 0 ? 'auto' : _ref$dir,
+      getTextDirection = _ref.getTextDirection;
+  var savedCallback = useRef(getTextDirection);
+  var value = useMemo(function () {
+    return {
+      direction: dir,
+      getTextDirection: savedCallback
+    };
+  }, [dir]);
+  useEffect(function () {
+    savedCallback.current = getTextDirection;
+  });
+  return /*#__PURE__*/React__default.createElement(TextDirectionContext.Provider, {
+    value: value
+  }, children);
+}
+
+TextDirection.propTypes = {
+  /**
+   * Provide children to be rendered inside of this component
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify the text direction for rendered children
+   */
+  dir: PropTypes.oneOf(['ltr', 'rtl', 'auto']),
+
+  /**
+   * Optionally provide a custom function to get the text direction for a piece
+   * of text. Whatever is returned will become the value of the `dir` attribute
+   * on a node of text. Should return one of: 'ltr', 'rtl', or 'auto'
+   */
+  getTextDirection: PropTypes.func
+};
+
+export { TextDirection };

package/es/components/TreeView/TreeView.js

@@ -10,7 +10,6 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import uniqueId from '../../tools/uniqueId.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowUp, ArrowDown, Home, End } from '../../internal/keyboard/keys.js';
@@ -23,12 +22,13 @@ function TreeView(_ref) {
       _ref$hideLabel = _ref.hideLabel,
       hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
       label = _ref.label,
-      multiselect = _ref.multiselect,
+      _ref$multiselect = _ref.multiselect,
+      multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
       onSelect = _ref.onSelect,
       _ref$selected = _ref.selected,
       preselected = _ref$selected === void 0 ? [] : _ref$selected,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? FeatureFlags.enabled('enable-v11-release') ? 'sm' : 'default' : _ref$size,
+      size = _ref$size === void 0 ? 'sm' : _ref$size,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useRef = useRef(rest.id || uniqueId()),
@@ -276,7 +276,7 @@ TreeView.propTypes = {
   label: PropTypes.string.isRequired,
 
   /**
-   * Specify the selection mode of the tree.
+   * **[Experimental]** Specify the selection mode of the tree.
    * If `multiselect` is `false` then only one node can be selected at a time
    */
   multiselect: PropTypes.bool,
@@ -294,7 +294,7 @@ TreeView.propTypes = {
   /**
    * Specify the size of the tree from a list of available sizes.
    */
-  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['xs', 'sm']) : PropTypes.oneOf(['default', 'compact'])
+  size: PropTypes.oneOf(['xs', 'sm'])
 };
 
 export { TreeView as default };

package/es/index.js

@@ -78,6 +78,7 @@ export { default as TimePickerSelect } from './components/TimePickerSelect/index
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { Toggle } from './components/Toggle/Toggle.js';
 export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
+import './components/TreeView/index.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
@@ -103,7 +104,6 @@ export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/Overflow
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { HStack, VStack } from './components/Stack/index.js';
 export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.js';
-import './components/TreeView/index.js';
 export { GlobalTheme, Theme, useTheme } from './components/Theme/index.js';
 export { usePrefix } from './internal/usePrefix.js';
 export { default as AspectRatio } from './components/AspectRatio/AspectRatio.js';
@@ -114,6 +114,7 @@ export { default as FileUploaderItem } from './components/FileUploader/FileUploa
 export { default as Row } from './components/Grid/Row.js';
 export { default as Column } from './components/Grid/Column.js';
 export { default as NumberInputSkeleton } from './components/NumberInput/NumberInput.Skeleton.js';
+export { default as TreeNode } from './components/TreeView/TreeNode.js';
 export { default as HeaderMenuButton } from './components/UIShell/HeaderMenuButton.js';
 export { default as HeaderName } from './components/UIShell/HeaderName.js';
 export { default as SkipToContent } from './components/UIShell/SkipToContent.js';
@@ -123,6 +124,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__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
 export { default as unstable_MenuDivider } from './components/Menu/MenuDivider.js';
 export { default as unstable_MenuGroup } from './components/Menu/MenuGroup.js';
 export { default as unstable_MenuItem } from './components/Menu/MenuItem.js';
@@ -131,11 +133,10 @@ export { default as unstable_MenuSelectableItem } from './components/Menu/MenuSe
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar.js';
-export { default as unstable_TreeNode } from './components/TreeView/TreeNode.js';
 export { default as MultiSelect } from './components/MultiSelect/MultiSelect.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
+export { default as TreeView } from './components/TreeView/TreeView.js';
 export { default as unstable_Menu } from './components/Menu/Menu.js';
-export { default as unstable_TreeView } from './components/TreeView/TreeView.js';
 export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.js';
 export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.js';
 export { default as ComposedModal, ModalBody } from './components/ComposedModal/ComposedModal.js';
@@ -173,6 +174,7 @@ export { default as ControlledPasswordInput } from './components/TextInput/Contr
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { ProgressStep } from './components/ProgressIndicator/ProgressIndicator.js';
 export { default as StructuredListSkeleton } from './components/StructuredList/StructuredList.Skeleton.js';
+export { IconTab, TabList, TabPanel, TabPanels } from './components/Tabs/next/Tabs.js';
 export { default as Content } from './components/UIShell/Content.js';
 export { default as Header } from './components/UIShell/Header.js';
 export { default as HeaderContainer } from './components/UIShell/HeaderContainer.js';
@@ -194,6 +196,9 @@ export { default as SideNavLink } from './components/UIShell/SideNavLink.js';
 export { SideNavMenu } from './components/UIShell/SideNavMenu.js';
 export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem.js';
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
+export { LayoutDirection as unstable_LayoutDirection } from './components/Layout/LayoutDirection.js';
+export { useLayoutDirection as unstable_useLayoutDirection } from './components/Layout/useLayoutDirection.js';
 export { Stack } from './components/Stack/Stack.js';
 export { Tooltip } from './components/Tooltip/next/Tooltip.js';
-export { IconTab, TabList, TabPanel, TabPanels } from './components/Tabs/next/Tabs.js';
+export { Text as unstable_Text } from './components/Text/Text.js';
+export { TextDirection as unstable_TextDirection } from './components/Text/TextDirection.js';

package/lib/components/ComboBox/ComboBox.js

@@ -357,7 +357,6 @@ var ComboBox = /*#__PURE__*/React__default["default"].forwardRef(function (props
       return /*#__PURE__*/React__default["default"].createElement(ListBox["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
         key: itemProps.id,
         isActive: selectedItem === item,
-        tabIndex: "-1",
         isHighlighted: highlightedIndex === index || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) && (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || false,
         title: itemToElement ? item.text : itemToString(item)
       }, itemProps), itemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({

package/lib/components/FluidTextInput/FluidTextInput.js

@@ -0,0 +1,114 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+require('../TextInput/index.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+var TextInput = require('../TextInput/TextInput.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+function FluidTextInput(_ref) {
+  var className = _ref.className,
+      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classNames = cx__default["default"]("".concat(prefix, "--text-input--fluid"), className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput["default"], _rollupPluginBabelHelpers["extends"]({
+    className: classNames
+  }, other)));
+}
+
+FluidTextInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
+};
+
+exports["default"] = FluidTextInput;

package/lib/components/Layout/LayoutDirection.js

@@ -0,0 +1,62 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var LayoutDirectionContext = require('./LayoutDirectionContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["as", "children", "dir"];
+
+function LayoutDirection(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
+      children = _ref.children,
+      dir = _ref.dir,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var value = React__default["default"].useMemo(function () {
+    return {
+      direction: dir
+    };
+  }, [dir]);
+  return /*#__PURE__*/React__default["default"].createElement(LayoutDirectionContext.LayoutDirectionContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    dir: dir
+  }, rest), children));
+}
+
+LayoutDirection.propTypes = {
+  /**
+   * Customize the element type used to render the outermost node
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Provide child elements or components to be rendered inside of this
+   * component
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify the layout direction of this part of the page
+   */
+  dir: PropTypes__default["default"].oneOf(['ltr', 'rtl']).isRequired
+};
+
+exports.LayoutDirectionContext = LayoutDirectionContext.LayoutDirectionContext;
+exports.LayoutDirection = LayoutDirection;

package/lib/components/Layout/LayoutDirectionContext.js

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var LayoutDirectionContext = /*#__PURE__*/React__default["default"].createContext({
+  direction: 'ltr'
+});
+
+exports.LayoutDirectionContext = LayoutDirectionContext;

package/lib/components/Layout/useLayoutDirection.js

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var LayoutDirectionContext = require('./LayoutDirectionContext.js');
+
+/**
+ * Get access to the current layout direction in context
+ */
+
+function useLayoutDirection() {
+  return React.useContext(LayoutDirectionContext.LayoutDirectionContext);
+}
+
+exports.useLayoutDirection = useLayoutDirection;

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -59,7 +59,8 @@ var ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function
   var className = cx__default["default"]("".concat(prefix, "--list-box__menu-item"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--active"), isActive), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--highlighted"), isHighlighted), _cx));
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
-    title: isTruncated ? title : undefined
+    title: isTruncated ? title : undefined,
+    tabIndex: "-1"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--list-box__menu-item__option"),
     ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref

package/lib/components/Modal/Modal.js

@@ -131,7 +131,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
     tabIndex: "-1",
     className: "".concat(modalCloseButtonClass, "__icon")
   }));
-  var ariaLabel = modalLabel || ['aria-label'] || modalAriaLabel || modalHeading;
+  var ariaLabel = modalLabel || rest['aria-label'] || modalAriaLabel || modalHeading;
   var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
   var hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,
@@ -161,7 +161,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
   React.useEffect(function () {
     var initialFocus = function initialFocus(focusContainerElement) {
       var containerElement = focusContainerElement || innerModal.current;
-      var primaryFocusElement = containerElement ? containerElement.querySelector(selectorPrimaryFocus) : null;
+      var primaryFocusElement = containerElement ? containerElement.querySelector(danger ? ".".concat(prefix, "--btn--secondary") : selectorPrimaryFocus) : null;
 
       if (primaryFocusElement) {
         return primaryFocusElement;
@@ -181,7 +181,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
     if (open) {
       focusButton(innerModal.current);
     }
-  }, [open, selectorPrimaryFocus]);
+  }, [open, selectorPrimaryFocus, danger, prefix]);
   var modalBody = /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: innerModal,
     role: "dialog"

package/lib/components/Slider/Slider.js

@@ -655,7 +655,7 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
   required: PropTypes__default["default"].bool,
 
   /**
-   * A value determining how much the value should increase/decrease by moving the thumb by mouse.
+   * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
    */
   step: PropTypes__default["default"].number,
 

package/lib/components/Text/TextDirection.js

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PropTypes = require('prop-types');
+var React = require('react');
+var TextDirectionContext = require('./TextDirectionContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function TextDirection(_ref) {
+  var children = _ref.children,
+      _ref$dir = _ref.dir,
+      dir = _ref$dir === void 0 ? 'auto' : _ref$dir,
+      getTextDirection = _ref.getTextDirection;
+  var savedCallback = React.useRef(getTextDirection);
+  var value = React.useMemo(function () {
+    return {
+      direction: dir,
+      getTextDirection: savedCallback
+    };
+  }, [dir]);
+  React.useEffect(function () {
+    savedCallback.current = getTextDirection;
+  });
+  return /*#__PURE__*/React__default["default"].createElement(TextDirectionContext.TextDirectionContext.Provider, {
+    value: value
+  }, children);
+}
+
+TextDirection.propTypes = {
+  /**
+   * Provide children to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify the text direction for rendered children
+   */
+  dir: PropTypes__default["default"].oneOf(['ltr', 'rtl', 'auto']),
+
+  /**
+   * Optionally provide a custom function to get the text direction for a piece
+   * of text. Whatever is returned will become the value of the `dir` attribute
+   * on a node of text. Should return one of: 'ltr', 'rtl', or 'auto'
+   */
+  getTextDirection: PropTypes__default["default"].func
+};
+
+exports.TextDirection = TextDirection;

package/lib/components/TreeView/TreeView.js

@@ -14,35 +14,15 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var uniqueId = require('../../tools/uniqueId.js');
-var FeatureFlags = require('@carbon/feature-flags');
 var usePrefix = require('../../internal/usePrefix.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
 var _excluded = ["active", "children", "className", "hideLabel", "label", "multiselect", "onSelect", "selected", "size"];
 function TreeView(_ref) {
@@ -52,12 +32,13 @@ function TreeView(_ref) {
       _ref$hideLabel = _ref.hideLabel,
       hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
       label = _ref.label,
-      multiselect = _ref.multiselect,
+      _ref$multiselect = _ref.multiselect,
+      multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
       onSelect = _ref.onSelect,
       _ref$selected = _ref.selected,
       preselected = _ref$selected === void 0 ? [] : _ref$selected,
       _ref$size = _ref.size,
-      size = _ref$size === void 0 ? FeatureFlags__namespace.enabled('enable-v11-release') ? 'sm' : 'default' : _ref$size,
+      size = _ref$size === void 0 ? 'sm' : _ref$size,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var _useRef = React.useRef(rest.id || uniqueId["default"]()),
@@ -305,7 +286,7 @@ TreeView.propTypes = {
   label: PropTypes__default["default"].string.isRequired,
 
   /**
-   * Specify the selection mode of the tree.
+   * **[Experimental]** Specify the selection mode of the tree.
    * If `multiselect` is `false` then only one node can be selected at a time
    */
   multiselect: PropTypes__default["default"].bool,
@@ -323,7 +304,7 @@ TreeView.propTypes = {
   /**
    * Specify the size of the tree from a list of available sizes.
    */
-  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['xs', 'sm']) : PropTypes__default["default"].oneOf(['default', 'compact'])
+  size: PropTypes__default["default"].oneOf(['xs', 'sm'])
 };
 
 exports["default"] = TreeView;

package/lib/index.js

@@ -82,6 +82,7 @@ var index$c = require('./components/TimePickerSelect/index.js');
 var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
 var Toggle = require('./components/Toggle/Toggle.js');
 var index$i = require('./components/Toggletip/index.js');
+require('./components/TreeView/index.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
@@ -107,7 +108,6 @@ var index$n = require('./components/OverflowMenuV2/index.js');
 var index$o = require('./components/Popover/index.js');
 var index$p = require('./components/Stack/index.js');
 var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
-require('./components/TreeView/index.js');
 var index$q = require('./components/Theme/index.js');
 var usePrefix = require('./internal/usePrefix.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
@@ -118,6 +118,7 @@ var FileUploaderItem = require('./components/FileUploader/FileUploaderItem.js');
 var Row = require('./components/Grid/Row.js');
 var Column = require('./components/Grid/Column.js');
 var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
+var TreeNode = require('./components/TreeView/TreeNode.js');
 var HeaderMenuButton = require('./components/UIShell/HeaderMenuButton.js');
 var HeaderName = require('./components/UIShell/HeaderName.js');
 var SkipToContent = require('./components/UIShell/SkipToContent.js');
@@ -127,6 +128,7 @@ var SideNavIcon = require('./components/UIShell/SideNavIcon.js');
 var SideNavItem = require('./components/UIShell/SideNavItem.js');
 var SideNavLinkText = require('./components/UIShell/SideNavLinkText.js');
 var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
+var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
 var MenuDivider = require('./components/Menu/MenuDivider.js');
 var MenuGroup = require('./components/Menu/MenuGroup.js');
 var MenuItem = require('./components/Menu/MenuItem.js');
@@ -135,11 +137,10 @@ var MenuSelectableItem = require('./components/Menu/MenuSelectableItem.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
 var Pagination = require('./components/Pagination/experimental/Pagination.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
-var TreeNode = require('./components/TreeView/TreeNode.js');
 var MultiSelect = require('./components/MultiSelect/MultiSelect.js');
 var TextInput = require('./components/TextInput/TextInput.js');
-var Menu = require('./components/Menu/Menu.js');
 var TreeView = require('./components/TreeView/TreeView.js');
+var Menu = require('./components/Menu/Menu.js');
 var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var BreadcrumbItem = require('./components/Breadcrumb/BreadcrumbItem.js');
 var ComposedModal = require('./components/ComposedModal/ComposedModal.js');
@@ -177,6 +178,7 @@ var ControlledPasswordInput = require('./components/TextInput/ControlledPassword
 var PasswordInput = require('./components/TextInput/PasswordInput.js');
 var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicator.js');
 var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
+var Tabs = require('./components/Tabs/next/Tabs.js');
 var Content = require('./components/UIShell/Content.js');
 var Header = require('./components/UIShell/Header.js');
 var HeaderContainer = require('./components/UIShell/HeaderContainer.js');
@@ -198,9 +200,12 @@ var SideNavLink = require('./components/UIShell/SideNavLink.js');
 var SideNavMenu = require('./components/UIShell/SideNavMenu.js');
 var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
+var LayoutDirection = require('./components/Layout/LayoutDirection.js');
+var useLayoutDirection = require('./components/Layout/useLayoutDirection.js');
 var Stack = require('./components/Stack/Stack.js');
 var Tooltip = require('./components/Tooltip/next/Tooltip.js');
-var Tabs = require('./components/Tabs/next/Tabs.js');
+var Text = require('./components/Text/Text.js');
+var TextDirection = require('./components/Text/TextDirection.js');
 
 
 
@@ -330,6 +335,7 @@ exports.FileUploaderItem = FileUploaderItem["default"];
 exports.Row = Row["default"];
 exports.Column = Column["default"];
 exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
+exports.TreeNode = TreeNode["default"];
 exports.HeaderMenuButton = HeaderMenuButton["default"];
 exports.HeaderName = HeaderName["default"];
 exports.SkipToContent = SkipToContent["default"];
@@ -339,6 +345,7 @@ exports.SideNavIcon = SideNavIcon["default"];
 exports.SideNavItem = SideNavItem["default"];
 exports.SideNavLinkText = SideNavLinkText["default"];
 exports.unstable_useContextMenu = useContextMenu["default"];
+exports.unstable__FluidTextInput = FluidTextInput["default"];
 exports.unstable_MenuDivider = MenuDivider["default"];
 exports.unstable_MenuGroup = MenuGroup["default"];
 exports.unstable_MenuItem = MenuItem["default"];
@@ -347,11 +354,10 @@ exports.unstable_MenuSelectableItem = MenuSelectableItem["default"];
 exports.unstable_PageSelector = PageSelector["default"];
 exports.unstable_Pagination = Pagination["default"];
 exports.ProgressBar = ProgressBar["default"];
-exports.unstable_TreeNode = TreeNode["default"];
 exports.MultiSelect = MultiSelect["default"];
 exports.TextInput = TextInput["default"];
+exports.TreeView = TreeView["default"];
 exports.unstable_Menu = Menu["default"];
-exports.unstable_TreeView = TreeView["default"];
 exports.Breadcrumb = Breadcrumb["default"];
 exports.BreadcrumbItem = BreadcrumbItem["default"];
 exports.ComposedModal = ComposedModal["default"];
@@ -394,6 +400,10 @@ exports.ControlledPasswordInput = ControlledPasswordInput["default"];
 exports.PasswordInput = PasswordInput["default"];
 exports.ProgressStep = ProgressIndicator.ProgressStep;
 exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
+exports.IconTab = Tabs.IconTab;
+exports.TabList = Tabs.TabList;
+exports.TabPanel = Tabs.TabPanel;
+exports.TabPanels = Tabs.TabPanels;
 exports.Content = Content["default"];
 exports.Header = Header["default"];
 exports.HeaderContainer = HeaderContainer["default"];
@@ -415,9 +425,9 @@ exports.SideNavLink = SideNavLink["default"];
 exports.SideNavMenu = SideNavMenu.SideNavMenu;
 exports.SideNavMenuItem = SideNavMenuItem["default"];
 exports.SideNavSwitcher = SideNavSwitcher["default"];
+exports.unstable_LayoutDirection = LayoutDirection.LayoutDirection;
+exports.unstable_useLayoutDirection = useLayoutDirection.useLayoutDirection;
 exports.Stack = Stack.Stack;
 exports.Tooltip = Tooltip.Tooltip;
-exports.IconTab = Tabs.IconTab;
-exports.TabList = Tabs.TabList;
-exports.TabPanel = Tabs.TabPanel;
-exports.TabPanels = Tabs.TabPanels;
+exports.unstable_Text = Text.Text;
+exports.unstable_TextDirection = TextDirection.TextDirection;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.8.0",
     "@carbon/icons-react": "^11.7.0",
     "@carbon/layout": "^11.5.0",
-    "@carbon/styles": "^1.11.0",
+    "@carbon/styles": "^1.12.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -73,7 +73,7 @@
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@carbon/test-utils": "^10.25.0",
-    "@carbon/themes": "^11.7.0",
+    "@carbon/themes": "^11.8.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -110,7 +110,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.46.0",
     "rollup-plugin-strip-banner": "^2.0.0",
-    "rtlcss": "^3.5.0",
+    "rtlcss": "^4.0.0",
     "sass": "^1.51.0",
     "sass-loader": "^13.0.0",
     "storybook-readme": "^5.0.9",
@@ -130,5 +130,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "6b57099f46a734c7642b77093ff937e23f79be40"
+  "gitHead": "e3e4c8ce2fba7e4510764c70205b8cb57ccba8e1"
 }