@carbon/react 1.12.0-rc.1 → 1.13.0-rc.0

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/PaginationNav/PaginationNav.js

@@ -416,7 +416,7 @@ PaginationNav.propTypes = {
   onChange: PropTypes.func,
 
   /**
-   * The current page.
+   * The index of current page.
    */
   page: PropTypes.number,
 

package/es/components/Toggletip/index.js

@@ -130,7 +130,7 @@ Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
-  align: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  align: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
 
   /**
    * Provide a custom element or component to render the top-level node for the

package/es/components/UIShell/SideNav.js

@@ -12,7 +12,6 @@ import PropTypes from 'prop-types';
 import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
 import { CARBON_SIDENAV_ITEMS } from './_utils.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { useMatchMedia } from '../../internal/useMatchMedia.js';
 
 var _excluded = ["expanded", "defaultExpanded", "isChildOfHeader", "aria-label", "aria-labelledby", "children", "onToggle", "className", "isFixedNav", "isRail", "isPersistent", "addFocusListeners", "addMouseListeners", "onOverlayClick"];
 // import SideNavFooter from './SideNavFooter';
@@ -120,8 +119,6 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
     };
   }
 
-  var isSideNavCollapsed = useMatchMedia("(max-width: 1055px)");
-  var ariaHidden = isRail ? false : expanded === false && isSideNavCollapsed;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -129,7 +126,6 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
     className: overlayClassName,
     onClick: onOverlayClick
   }), /*#__PURE__*/React__default.createElement("nav", _extends({
-    "aria-hidden": ariaHidden,
     ref: ref,
     className: "".concat(prefix, "--side-nav__navigation ").concat(className)
   }, accessibilityLabel, eventHandlers, other), childrenToRender));

package/es/index.js

@@ -124,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';

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/PaginationNav/PaginationNav.js

@@ -445,7 +445,7 @@ PaginationNav.propTypes = {
   onChange: PropTypes__default["default"].func,
 
   /**
-   * The current page.
+   * The index of current page.
    */
   page: PropTypes__default["default"].number,
 

package/lib/components/Toggletip/index.js

@@ -140,7 +140,7 @@ Toggletip.propTypes = {
   /**
    * Specify how the toggletip should align with the button
    */
-  align: PropTypes__default["default"].oneOf(['top', 'bottom', 'left', 'right']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top']),
 
   /**
    * Provide a custom element or component to render the top-level node for the

package/lib/components/UIShell/SideNav.js

@@ -16,7 +16,6 @@ var PropTypes = require('prop-types');
 var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
 var _utils = require('./_utils.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var useMatchMedia = require('../../internal/useMatchMedia.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -130,8 +129,6 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
     };
   }
 
-  var isSideNavCollapsed = useMatchMedia.useMatchMedia("(max-width: 1055px)");
-  var ariaHidden = isRail ? false : expanded === false && isSideNavCollapsed;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
@@ -139,7 +136,6 @@ var SideNav = /*#__PURE__*/React__default["default"].forwardRef(function SideNav
     className: overlayClassName,
     onClick: onOverlayClick
   }), /*#__PURE__*/React__default["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({
-    "aria-hidden": ariaHidden,
     ref: ref,
     className: "".concat(prefix, "--side-nav__navigation ").concat(className)
   }, accessibilityLabel, eventHandlers, other), childrenToRender));

package/lib/index.js

@@ -128,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');
@@ -344,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"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.12.0-rc.1",
+  "version": "1.13.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -43,10 +43,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.8.0",
-    "@carbon/icons-react": "^11.7.0",
-    "@carbon/layout": "^11.5.0",
-    "@carbon/styles": "^1.12.0-rc.1",
+    "@carbon/feature-flags": "^0.9.0-rc.0",
+    "@carbon/icons-react": "^11.8.0-rc.0",
+    "@carbon/layout": "^11.6.0-rc.0",
+    "@carbon/styles": "^1.13.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -72,8 +72,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.17.12",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
-    "@carbon/test-utils": "^10.25.0",
-    "@carbon/themes": "^11.7.1-rc.0",
+    "@carbon/test-utils": "^10.26.0-rc.0",
+    "@carbon/themes": "^11.9.0-rc.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
@@ -130,5 +130,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3a4f61d60424d5ddb58787a97a6b40cb7ad18baa"
+  "gitHead": "b367a932e322ac783c3d4cf0d5a1f1e2756e8b2e"
 }

package/es/internal/useMatchMedia.js

@@ -1,51 +0,0 @@
-/**
- * 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 { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
-import { useState, useEffect } from 'react';
-import { canUseDOM } from './environment.js';
-
-function useMatchMedia(mediaQueryString) {
-  var _useState = useState(function () {
-    if (canUseDOM) {
-      var mediaQueryList = window.matchMedia(mediaQueryString);
-      return mediaQueryList.matches;
-    }
-
-    return false;
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      matches = _useState2[0],
-      setMatches = _useState2[1];
-
-  useEffect(function () {
-    function listener(event) {
-      setMatches(event.matches);
-    }
-
-    var mediaQueryList = window.matchMedia(mediaQueryString); // Support fallback to `addListener` for broader browser support
-
-    if (mediaQueryList.addEventListener) {
-      mediaQueryList.addEventListener('change', listener);
-    } else {
-      mediaQueryList.addListener(listener);
-    } // Make sure the media query list is in sync with the matches state
-
-
-    setMatches(mediaQueryList.matches);
-    return function () {
-      if (mediaQueryList.addEventListener) {
-        mediaQueryList.removeEventListener('change', listener);
-      } else {
-        mediaQueryList.removeListener(listener);
-      }
-    };
-  }, [mediaQueryString]);
-  return matches;
-}
-
-export { useMatchMedia };

package/lib/internal/useMatchMedia.js

@@ -1,55 +0,0 @@
-/**
- * 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 React = require('react');
-var environment = require('./environment.js');
-
-function useMatchMedia(mediaQueryString) {
-  var _useState = React.useState(function () {
-    if (environment.canUseDOM) {
-      var mediaQueryList = window.matchMedia(mediaQueryString);
-      return mediaQueryList.matches;
-    }
-
-    return false;
-  }),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      matches = _useState2[0],
-      setMatches = _useState2[1];
-
-  React.useEffect(function () {
-    function listener(event) {
-      setMatches(event.matches);
-    }
-
-    var mediaQueryList = window.matchMedia(mediaQueryString); // Support fallback to `addListener` for broader browser support
-
-    if (mediaQueryList.addEventListener) {
-      mediaQueryList.addEventListener('change', listener);
-    } else {
-      mediaQueryList.addListener(listener);
-    } // Make sure the media query list is in sync with the matches state
-
-
-    setMatches(mediaQueryList.matches);
-    return function () {
-      if (mediaQueryList.addEventListener) {
-        mediaQueryList.removeEventListener('change', listener);
-      } else {
-        mediaQueryList.removeListener(listener);
-      }
-    };
-  }, [mediaQueryString]);
-  return matches;
-}
-
-exports.useMatchMedia = useMatchMedia;