@carbon/react 1.16.0-rc.0 → 1.17.0-rc.0

package/es/index.js

@@ -55,7 +55,8 @@ export { default as PaginationNav } from './components/PaginationNav/PaginationN
 export { default as PrimaryButton } from './components/PrimaryButton/PrimaryButton.js';
 export { default as RadioButton } from './components/RadioButton/RadioButton.js';
 export { default as RadioButtonGroup } from './components/RadioButtonGroup/RadioButtonGroup.js';
-export { default as Search } from './components/Search/index.js';
+export { default as Search } from './components/Search/Search.js';
+export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as ExpandableSearch } from './components/ExpandableSearch/ExpandableSearch.js';
 export { default as SecondaryButton } from './components/SecondaryButton/SecondaryButton.js';
 export { default as SelectSkeleton } from './components/Select/Select.Skeleton.js';
@@ -67,13 +68,13 @@ 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 { default as Tabs } from './components/Tabs/index.js';
+export { IconTab, TabList, TabPanel, TabPanels, Tabs } from './components/Tabs/Tabs.js';
+export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TagSkeleton } from './components/Tag/Tag.Skeleton.js';
 export { default as Tag } from './components/Tag/Tag.js';
 export { default as TextAreaSkeleton } from './components/TextArea/TextArea.Skeleton.js';
 export { default as TextArea } from './components/TextArea/TextArea.js';
 import './components/TextInput/index.js';
-export { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/index.js';
 export { default as RadioTile } from './components/RadioTile/RadioTile.js';
 export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as TimePicker } from './components/TimePicker/index.js';
@@ -90,9 +91,7 @@ export { default as DataTableSkeleton } from './components/DataTableSkeleton/Dat
 export { default as BreadcrumbSkeleton } from './components/Breadcrumb/Breadcrumb.Skeleton.js';
 export { default as ProgressIndicatorSkeleton } from './components/ProgressIndicator/ProgressIndicator.Skeleton.js';
 export { default as RadioButtonSkeleton } from './components/RadioButton/RadioButton.Skeleton.js';
-export { default as SearchSkeleton } from './components/Search/Search.Skeleton.js';
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
-export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
@@ -105,6 +104,7 @@ import './components/Menu/index.js';
 export { OverflowMenuV2 as unstable_OverflowMenuV2 } from './components/OverflowMenuV2/index.js';
 export { Popover, PopoverContent } from './components/Popover/index.js';
 export { HStack, VStack } from './components/Stack/index.js';
+import './components/Text/index.js';
 export { DefinitionTooltip } from './components/Tooltip/next/DefinitionTooltip.js';
 export { GlobalTheme, Theme, useTheme } from './components/Theme/index.js';
 export { usePrefix } from './internal/usePrefix.js';
@@ -177,7 +177,7 @@ export { default as ControlledPasswordInput } from './components/TextInput/Contr
 export { default as PasswordInput } from './components/TextInput/PasswordInput.js';
 export { ProgressIndicator, 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 { ClickableTile, ExpandableTile, SelectableTile, Tile, TileAboveTheFoldContent, TileBelowTheFoldContent } from './components/Tile/Tile.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';

package/es/internal/useNormalizedInputProps.js

@@ -6,7 +6,7 @@
  */
 
 import React__default from 'react';
-import { EditOff, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
+import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import { usePrefix } from './usePrefix.js';
 
 /**
@@ -65,22 +65,18 @@ function useNormalizedInputProps(_ref) {
     helperId: "".concat(id, "-helper-text")
   };
 
-  if (readOnly) {
-    normalizedProps.icon = EditOff;
-  } else {
-    if (normalizedProps.invalid) {
-      normalizedProps.icon = WarningFilled;
-      normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(prefix, "--form-requirement"),
-        id: normalizedProps.invalidId
-      }, invalidText);
-    } else if (normalizedProps.warn) {
-      normalizedProps.icon = WarningAltFilled;
-      normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
-        className: "".concat(prefix, "--form-requirement"),
-        id: normalizedProps.warnId
-      }, warnText);
-    }
+  if (normalizedProps.invalid) {
+    normalizedProps.icon = WarningFilled;
+    normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--form-requirement"),
+      id: normalizedProps.invalidId
+    }, invalidText);
+  } else if (normalizedProps.warn) {
+    normalizedProps.icon = WarningAltFilled;
+    normalizedProps.validation = /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(prefix, "--form-requirement"),
+      id: normalizedProps.warnId
+    }, warnText);
   }
 
   return normalizedProps;

package/es/internal/usePrefix.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 from 'react';
+export declare const PrefixContext: React.Context<string>;
+export declare function usePrefix(): string;

package/lib/components/Checkbox/Checkbox.Skeleton.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 { HTMLAttributes } from 'react';
+declare const CheckboxSkeleton: {
+    ({ className, ...rest }: HTMLAttributes<HTMLDivElement>): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default CheckboxSkeleton;

package/lib/components/Checkbox/Checkbox.Skeleton.js

@@ -43,6 +43,5 @@ CheckboxSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var CheckboxSkeleton$1 = CheckboxSkeleton;
 
-exports["default"] = CheckboxSkeleton$1;
+exports["default"] = CheckboxSkeleton;

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 { ReactNodeLike } from 'prop-types';
+import React from 'react';
+declare type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Provide an `id` to uniquely identify the Checkbox input
+     */
+    id: string;
+    /**
+     * Provide a label to provide a description of the Checkbox input that you are
+     * exposing to the user
+     */
+    labelText: NonNullable<ReactNodeLike>;
+    /**
+     * Specify whether the underlying input should be checked by default
+     */
+    defaultChecked?: boolean;
+    /**
+     * Specify whether the Checkbox should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether the Checkbox is in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Provide an optional handler that is called when the internal state of
+     * Checkbox changes. This handler is called with event and state info.
+     * `(event, { checked, id }) => void`
+     */
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>, data: {
+        checked: boolean;
+        id: string;
+    }) => void;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<unknown>>;
+export default Checkbox;

package/lib/components/Checkbox/Checkbox.js

@@ -24,7 +24,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["className", "id", "labelText", "onChange", "indeterminate", "hideLabel", "title"];
-var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Checkbox(_ref, _ref2) {
+var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, _ref2) {
   var className = _ref.className,
       id = _ref.id,
       labelText = _ref.labelText,
@@ -43,7 +43,7 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Checkb
   }, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, other, {
     type: "checkbox",
     onChange: function onChange(evt) {
-      _onChange(evt, {
+      _onChange && _onChange(evt, {
         checked: evt.target.checked,
         id: id
       });
@@ -51,20 +51,20 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Checkb
     className: "".concat(prefix, "--checkbox"),
     id: id,
     ref: function ref(el) {
-      if (el) {
+      if (el && indeterminate) {
         el.indeterminate = indeterminate;
       }
 
       if (typeof _ref2 === 'function') {
         _ref2(el);
-      } else if (Object(_ref2) === _ref2) {
+      } else if (_ref2 && Object(_ref2) === _ref2) {
         _ref2.current = el;
       }
     }
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: "".concat(prefix, "--checkbox-label"),
-    title: title || null
+    title: title
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     className: innerLabelClasses
   }, labelText)));
@@ -128,6 +128,5 @@ Checkbox.defaultProps = {
   indeterminate: false
 };
 Checkbox.displayName = 'Checkbox';
-var Checkbox$1 = Checkbox;
 
-exports["default"] = Checkbox$1;
+exports["default"] = Checkbox;

package/lib/components/Checkbox/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { default as CheckboxSkeleton } from './Checkbox.Skeleton';
+import Checkbox, { CheckboxProps } from './Checkbox';
+export type { CheckboxProps };
+export default Checkbox;

package/lib/components/Checkbox/index.js

@@ -0,0 +1,18 @@
+/**
+ * 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 Checkbox_Skeleton = require('./Checkbox.Skeleton.js');
+var Checkbox = require('./Checkbox.js');
+
+
+
+exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
+exports["default"] = Checkbox["default"];

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -256,7 +256,6 @@ function CodeSnippet(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--snippet-btn--text")
   }, expandCodeBtnText), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-    "aria-label": expandCodeBtnText,
     className: "".concat(prefix, "--icon-chevron--down ").concat(prefix, "--snippet__icon"),
     name: "chevron--down",
     role: "img"

package/lib/components/DataTable/TableToolbarSearch.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var index = require('../Search/index.js');
+var Search = require('../Search/Search.js');
 var instanceId = require('./tools/instanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 
@@ -124,7 +124,7 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
     return !value && handleExpand(event, false);
   };
 
-  return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({
     disabled: disabled,
     className: searchClasses,
     value: value,

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var cx = require('classnames');
-var index = require('../Search/index.js');
+var Search = require('../Search/Search.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 
@@ -68,7 +68,7 @@ function ExpandableSearch(_ref) {
   }
 
   var classes = cx__default["default"]("".concat(prefix, "--search--expandable"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
-  return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
+  return /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: searchRef,
     className: classes,
     onFocus: events.composeEventHandlers([onFocus, handleFocus]),
@@ -78,6 +78,6 @@ function ExpandableSearch(_ref) {
   }));
 }
 
-ExpandableSearch.propTypes = index["default"].propTypes;
+ExpandableSearch.propTypes = Search["default"].propTypes;
 
 exports["default"] = ExpandableSearch;

package/lib/components/Grid/Grid.js

@@ -46,11 +46,6 @@ Grid.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
-  /**
-   * Specify how many columns wide the Grid should span
-   */
-  columns: PropTypes__default["default"].number,
-
   /**
    * Collapse the gutter to 1px. Useful for fluid layouts.
    * Rows have 1px of margin between them to match gutter.

package/lib/components/NumberInput/NumberInput.js

@@ -26,7 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["allowEmpty", "className", "disabled", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
+var _excluded = ["allowEmpty", "className", "disabled", "disableWheel", "defaultValue", "helperText", "hideLabel", "hideSteppers", "iconDescription", "id", "label", "invalid", "invalidText", "light", "max", "min", "onChange", "onClick", "onKeyUp", "readOnly", "size", "step", "translateWithId", "warn", "warnText", "value"];
 
 var _defaultTranslations, _Subtract, _Add;
 var translationIds = {
@@ -44,6 +44,8 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       customClassName = props.className,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$disableWheel = props.disableWheel,
+      disableWheelProp = _props$disableWheel === void 0 ? false : _props$disableWheel,
       defaultValue = props.defaultValue,
       _props$helperText = props.helperText,
       helperText = _props$helperText === void 0 ? '' : _props$helperText,
@@ -182,6 +184,24 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
     onClick: _onClick,
     onChange: handleOnChange,
     onKeyUp: onKeyUp,
+    onFocus: function onFocus(e) {
+      if (disableWheelProp) {
+        e.target.addEventListener('wheel', disableWheel);
+      }
+
+      if (rest.onFocus) {
+        rest.onFocus(e);
+      }
+    },
+    onBlur: function onBlur(e) {
+      if (disableWheelProp) {
+        e.target.removeEventListener('wheel', disableWheel);
+      }
+
+      if (rest.onBlur) {
+        rest.onBlur(e);
+      }
+    },
     pattern: "[0-9]*",
     readOnly: readOnly,
     step: step,
@@ -264,6 +284,11 @@ NumberInput.propTypes = {
    */
   defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
 
+  /**
+   * Specify if the wheel functionality for the input should be disabled, or not
+   */
+  disableWheel: PropTypes__default["default"].bool,
+
   /**
    * Specify if the control should be disabled, or not
    */
@@ -459,6 +484,25 @@ function getInputValidity(_ref4) {
 
   return true;
 }
+/**
+ * It prevents any wheel event from emitting.
+ *
+ * We want to prevent this input field from changing by the user accidentally
+ * when the user scrolling up or down in a long form. So we prevent the default
+ * behavior of wheel events when it is focused.
+ *
+ * Because React uses passive event handler by default, we can't just call
+ * `preventDefault` in the `onWheel` event handler. So we have to get the input
+ * ref and add our event handler manually.
+ *
+ * @see https://github.com/facebook/react/pull/19654
+ * @param {WheelEvent} e A wheel event.
+ */
+
+
+function disableWheel(e) {
+  e.preventDefault();
+}
 /**
  * Clamp the given value between the upper bound `max` and the lower bound `min`
  * @param {number} max

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -22,7 +22,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className"];
+var _excluded = ["className", "vertical"];
 
 var _CircleDash, _Step, _Step2, _Step3, _Step4;
 
@@ -41,11 +41,12 @@ function Step() {
 
 function ProgressIndicatorSkeleton(_ref) {
   var className = _ref.className,
+      vertical = _ref.vertical,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), className)
+    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--progress--vertical"), vertical), className)
   }, rest), _Step || (_Step = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default["default"].createElement(Step, null)));
 }
 
@@ -53,7 +54,12 @@ ProgressIndicatorSkeleton.propTypes = {
   /**
    * Specify an optional className to add.
    */
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes__default["default"].bool
 };
 
 exports["default"] = ProgressIndicatorSkeleton;