@carbon/react 1.0.1 → 1.1.0-rc.0

package/lib/components/Toggletip/index.js

@@ -0,0 +1,266 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var index = require('../Popover/index.js');
+var useEvent = require('../../internal/useEvent.js');
+var useId = require('../../internal/useId.js');
+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 }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Used to render the label for a Toggletip
+ */
+
+function ToggletipLabel(_ref) {
+  var _ref$as = _ref.as,
+      BaseComponent = _ref$as === void 0 ? 'span' : _ref$as,
+      children = _ref.children,
+      customClassName = _ref.className;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip-label"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, {
+    className: className
+  }, children);
+}
+
+ToggletipLabel.propTypes = {
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string
+}; // Used to coordinate accessibility props between button and content along with
+// the actions to open and close the toggletip
+
+var ToggletipContext = /*#__PURE__*/React__default["default"].createContext();
+
+function useToggletip() {
+  return React.useContext(ToggletipContext);
+}
+/**
+ * Used as a container for the button and content of a toggletip. This component
+ * is responsible for coordinating between interactions with the button and the
+ * visibility of the content
+ */
+
+
+function Toggletip(_ref2) {
+  var align = _ref2.align,
+      as = _ref2.as,
+      customClassName = _ref2.className,
+      children = _ref2.children,
+      _ref2$defaultOpen = _ref2.defaultOpen,
+      defaultOpen = _ref2$defaultOpen === void 0 ? false : _ref2$defaultOpen;
+  var ref = React.useRef();
+
+  var _useState = React.useState(defaultOpen),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var prefix = usePrefix.usePrefix();
+  var id = useId.useId();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip"), customClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggletip--open"), open));
+  var actions = {
+    toggle: function toggle() {
+      setOpen(!open);
+    },
+    close: function close() {
+      setOpen(false);
+    }
+  };
+  var value = {
+    buttonProps: {
+      'aria-expanded': open,
+      'aria-controls': id,
+      onClick: actions.toggle
+    },
+    contentProps: {
+      id: id
+    }
+  };
+
+  function onKeyDown(event) {
+    if (open && match.match(event, keys.Escape)) {
+      actions.close();
+    }
+  }
+
+  useEvent.useWindowEvent('click', function (event) {
+    if (open && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React__default["default"].createElement(ToggletipContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+    align: align,
+    as: as,
+    caret: true,
+    className: className,
+    dropShadow: false,
+    highContrast: true,
+    open: open,
+    onKeyDown: onKeyDown,
+    ref: ref
+  }, children));
+}
+
+Toggletip.propTypes = {
+  /**
+   * Specify how the toggletip should align with the button
+   */
+  align: PropTypes__default["default"].oneOf(['top', 'bottom', 'left', 'right']),
+
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes__default["default"].bool
+};
+/**
+ * `ToggletipButton` controls the visibility of the Toggletip through mouse
+ * clicks and keyboard interactions.
+ */
+
+function ToggletipButton(_ref3) {
+  var children = _ref3.children,
+      customClassName = _ref3.className,
+      _ref3$label = _ref3.label,
+      label = _ref3$label === void 0 ? 'Show information' : _ref3$label;
+  var toggletip = useToggletip();
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip-button"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, toggletip.buttonProps, {
+    "aria-label": label,
+    type: "button",
+    className: className
+  }), children);
+}
+
+ToggletipButton.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes__default["default"].string
+};
+/**
+ * `ToggletipContent` is a wrapper around `PopoverContent`. It places the
+ * `children` passed in as a prop inside of `PopoverContent` so that they will
+ * be rendered inside of the popover for this component.
+ */
+
+function ToggletipContent(_ref4) {
+  var children = _ref4.children,
+      customClassName = _ref4.className;
+  var toggletip = useToggletip();
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(index.PopoverContent, _rollupPluginBabelHelpers["extends"]({
+    className: customClassName
+  }, toggletip.contentProps), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--toggletip-content")
+  }, children));
+}
+
+ToggletipContent.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string
+};
+/**
+ * `ToggletipActions` is a container for one or two actions present at the base
+ * of a toggletip. It is used for layout of these items.
+ */
+
+function ToggletipActions(_ref5) {
+  var children = _ref5.children,
+      customClassName = _ref5.className;
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"]("".concat(prefix, "--toggletip-actions"), customClassName);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: className
+  }, children);
+}
+
+ToggletipActions.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports.Toggletip = Toggletip;
+exports.ToggletipActions = ToggletipActions;
+exports.ToggletipButton = ToggletipButton;
+exports.ToggletipContent = ToggletipContent;
+exports.ToggletipLabel = ToggletipLabel;

package/lib/index.js

@@ -82,10 +82,7 @@ var index$e = require('./components/TileGroup/index.js');
 var index$f = require('./components/TimePicker/index.js');
 var index$g = require('./components/TimePickerSelect/index.js');
 var index$h = require('./components/Toggle/index.js');
-var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
-var ToggleSmall = require('./components/ToggleSmall/ToggleSmall.js');
-var Toolbar = require('./components/Toolbar/Toolbar.js');
-var ToolbarSearch = require('./components/ToolbarSearch/ToolbarSearch.js');
+var index$p = require('./components/Toggletip/index.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
 var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
@@ -101,20 +98,21 @@ var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
 var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
 var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
 var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
+var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
 var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
 var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
-var index$p = require('./components/UIShell/index.js');
-var index$q = require('./components/FeatureFlags/index.js');
-var index$r = require('./components/Heading/index.js');
-var index$s = require('./components/IconButton/index.js');
-var index$t = require('./components/Layer/index.js');
+var index$q = require('./components/UIShell/index.js');
+var index$r = require('./components/FeatureFlags/index.js');
+var index$s = require('./components/Heading/index.js');
+var index$t = require('./components/IconButton/index.js');
+var index$u = require('./components/Layer/index.js');
 require('./components/Menu/index.js');
-var index$u = require('./components/OverflowMenuV2/index.js');
-var index$v = require('./components/Popover/index.js');
-var index$w = require('./components/Stack/index.js');
+var index$v = require('./components/OverflowMenuV2/index.js');
+var index$w = require('./components/Popover/index.js');
+var index$x = require('./components/Stack/index.js');
 var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
 require('./components/TreeView/index.js');
-var index$x = require('./components/Theme/index.js');
+var index$y = require('./components/Theme/index.js');
 var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
 var Filename = require('./components/FileUploader/Filename.js');
 var FileUploaderButton = require('./components/FileUploader/FileUploaderButton.js');
@@ -288,14 +286,11 @@ exports.TileGroup = index$e["default"];
 exports.TimePicker = index$f["default"];
 exports.TimePickerSelect = index$g["default"];
 exports.Toggle = index$h["default"];
-exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
-exports.ToggleSmall = ToggleSmall["default"];
-exports.Toolbar = Toolbar["default"];
-exports.ToolbarDivider = Toolbar.ToolbarDivider;
-exports.ToolbarItem = Toolbar.ToolbarItem;
-exports.ToolbarOption = Toolbar.ToolbarOption;
-exports.ToolbarTitle = Toolbar.ToolbarTitle;
-exports.ToolbarSearch = ToolbarSearch["default"];
+exports.Toggletip = index$p.Toggletip;
+exports.ToggletipActions = index$p.ToggletipActions;
+exports.ToggletipButton = index$p.ToggletipButton;
+exports.ToggletipContent = index$p.ToggletipContent;
+exports.ToggletipLabel = index$p.ToggletipLabel;
 exports.UnorderedList = UnorderedList["default"];
 exports.SkeletonText = SkeletonText["default"];
 exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
@@ -311,26 +306,27 @@ exports.SliderSkeleton = Slider_Skeleton["default"];
 exports.TabsSkeleton = Tabs_Skeleton["default"];
 exports.TextInputSkeleton = TextInput_Skeleton["default"];
 exports.ToggleSkeleton = Toggle_Skeleton["default"];
+exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
 exports.IconSkeleton = Icon_Skeleton["default"];
 exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
-exports.HeaderNavigation = index$p.HeaderNavigation;
-exports.SideNavMenu = index$p.SideNavMenu;
-exports.unstable_FeatureFlags = index$q.FeatureFlags;
-exports.unstable_useFeatureFlag = index$q.useFeatureFlag;
-exports.unstable_useFeatureFlags = index$q.useFeatureFlags;
-exports.Heading = index$r.Heading;
-exports.Section = index$r.Section;
-exports.IconButton = index$s.IconButton;
-exports.Layer = index$t.Layer;
-exports.unstable_OverflowMenuV2 = index$u.OverflowMenuV2;
-exports.Popover = index$v.Popover;
-exports.PopoverContent = index$v.PopoverContent;
-exports.HStack = index$w.HStack;
-exports.VStack = index$w.VStack;
+exports.HeaderNavigation = index$q.HeaderNavigation;
+exports.SideNavMenu = index$q.SideNavMenu;
+exports.unstable_FeatureFlags = index$r.FeatureFlags;
+exports.unstable_useFeatureFlag = index$r.useFeatureFlag;
+exports.unstable_useFeatureFlags = index$r.useFeatureFlags;
+exports.Heading = index$s.Heading;
+exports.Section = index$s.Section;
+exports.IconButton = index$t.IconButton;
+exports.Layer = index$u.Layer;
+exports.unstable_OverflowMenuV2 = index$v.OverflowMenuV2;
+exports.Popover = index$w.Popover;
+exports.PopoverContent = index$w.PopoverContent;
+exports.HStack = index$x.HStack;
+exports.VStack = index$x.VStack;
 exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
-exports.GlobalTheme = index$x.GlobalTheme;
-exports.Theme = index$x.Theme;
-exports.useTheme = index$x.useTheme;
+exports.GlobalTheme = index$y.GlobalTheme;
+exports.Theme = index$y.Theme;
+exports.useTheme = index$y.useTheme;
 exports.AspectRatio = AspectRatio["default"];
 exports.Filename = Filename["default"];
 exports.FileUploaderButton = FileUploaderButton["default"];

package/lib/internal/useEvent.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 useWindowEvent(eventName, callback) {
+  var savedCallback = React.useRef(null);
+  React.useEffect(function () {
+    savedCallback.current = callback;
+  });
+  React.useEffect(function () {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+
+    window.addEventListener(eventName, handler);
+    return function () {
+      window.removeEventListener(eventName, handler);
+    };
+  }, [eventName]);
+}
+
+exports.useWindowEvent = useWindowEvent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.0.1",
+  "version": "1.1.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@babel/runtime": "^7.16.7",
     "@carbon/feature-flags": "^0.7.0",
-    "@carbon/icons-react": "^11.0.1",
-    "@carbon/layout": "^11.0.0",
-    "@carbon/styles": "^1.0.0",
+    "@carbon/icons-react": "^11.1.0-rc.0",
+    "@carbon/layout": "^11.1.0-rc.0",
+    "@carbon/styles": "^1.1.0-rc.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -73,8 +73,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.16.7",
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
-    "@carbon/test-utils": "^10.22.0",
-    "@carbon/themes": "^11.0.0",
+    "@carbon/test-utils": "^10.23.0-rc.0",
+    "@carbon/themes": "^11.1.0-rc.0",
     "@cypress/react": "^5.11.0",
     "@cypress/webpack-dev-server": "1.8.3",
     "@percy/cypress": "^3.1.1",
@@ -101,7 +101,7 @@
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.0.0",
     "css-loader": "^6.5.1",
-    "cypress": "9.5.2",
+    "cypress": "9.5.3",
     "cypress-real-events": "1.6.0",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0",
@@ -136,5 +136,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "db1af06972f4cc0cfb236723646ee59dae7bdee7"
+  "gitHead": "8487e08b549acfed947b37fccd37ed38fe9b5aa6"
 }

package/es/components/ToggleSmall/ToggleSmall.js

@@ -1,104 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2021
- *
- * 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 cx from 'classnames';
-import PropTypes from 'prop-types';
-import React__default from 'react';
-import { warning } from '../../internal/warning.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Enter } from '../../internal/keyboard/keys.js';
-
-var _path, _ToggleSmall$propType;
-
-var _excluded = ["className", "defaultToggled", "toggled", "onChange", "onToggle", "id", "labelText", "labelA", "labelB"];
-var didWarnAboutDeprecation = false;
-
-var ToggleSmall = function ToggleSmall(_ref) {
-  var className = _ref.className,
-      defaultToggled = _ref.defaultToggled,
-      toggled = _ref.toggled,
-      _onChange = _ref.onChange,
-      onToggle = _ref.onToggle,
-      id = _ref.id,
-      labelText = _ref.labelText,
-      labelA = _ref.labelA,
-      labelB = _ref.labelB,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<ToggleSmall>` has been deprecated in favor of `<Toggle size="sm" />` and will be removed in the next major release of `carbon-components-react`') : void 0;
-    didWarnAboutDeprecation = true;
-  }
-
-  var input;
-  var wrapperClasses = cx("".concat(prefix, "--form-item"), _defineProperty({}, className, className));
-  var checkedProps = {};
-
-  if (typeof toggled !== 'undefined') {
-    checkedProps.checked = toggled;
-  } else {
-    checkedProps.defaultChecked = defaultToggled;
-  }
-
-  var ariaLabel = typeof labelText === 'string' && labelText || other['aria-label'] || other.ariaLabel || null;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, checkedProps, {
-    "aria-label": null,
-    type: "checkbox",
-    id: id,
-    className: "".concat(prefix, "--toggle-input ").concat(prefix, "--toggle-input--small"),
-    onChange: function onChange(evt) {
-      _onChange && _onChange(evt);
-      onToggle(input.checked, id, evt);
-    },
-    ref: function ref(el) {
-      input = el;
-    },
-    onKeyUp: function onKeyUp(evt) {
-      if (match(evt, Enter)) {
-        input.checked = !input.checked;
-        _onChange && _onChange(evt);
-        onToggle(input.checked, id, evt);
-      }
-    }
-  })), /*#__PURE__*/React__default.createElement("label", {
-    className: "".concat(prefix, "--toggle-input__label"),
-    htmlFor: id,
-    "aria-label": ariaLabel
-  }, labelText, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--toggle__switch")
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    className: "".concat(prefix, "--toggle__check"),
-    width: "6px",
-    height: "5px",
-    viewBox: "0 0 6 5"
-  }, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
-    d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
-  }))), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--toggle__text--off"),
-    "aria-hidden": "true"
-  }, labelA), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--toggle__text--on"),
-    "aria-hidden": "true"
-  }, labelB))));
-};
-
-ToggleSmall.propTypes = (_ToggleSmall$propType = {}, _defineProperty(_ToggleSmall$propType, 'aria-label', PropTypes.string.isRequired), _defineProperty(_ToggleSmall$propType, "className", PropTypes.string), _defineProperty(_ToggleSmall$propType, "defaultToggled", PropTypes.bool), _defineProperty(_ToggleSmall$propType, "id", PropTypes.string.isRequired), _defineProperty(_ToggleSmall$propType, "labelA", PropTypes.node.isRequired), _defineProperty(_ToggleSmall$propType, "labelB", PropTypes.node.isRequired), _defineProperty(_ToggleSmall$propType, "labelText", PropTypes.node), _defineProperty(_ToggleSmall$propType, "onChange", PropTypes.func), _defineProperty(_ToggleSmall$propType, "onToggle", PropTypes.func), _defineProperty(_ToggleSmall$propType, "toggled", PropTypes.bool), _ToggleSmall$propType);
-ToggleSmall.defaultProps = {
-  defaultToggled: false,
-  onToggle: function onToggle() {},
-  labelA: 'Off',
-  labelB: 'On'
-};
-var ToggleSmall$1 = ToggleSmall;
-
-export { ToggleSmall$1 as default };

package/es/components/Toolbar/Toolbar.js

@@ -1,121 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2021
- *
- * 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 React__default from 'react';
-import PropTypes from 'prop-types';
-import ToolbarSearch from '../ToolbarSearch/ToolbarSearch.js';
-import cx from 'classnames';
-import { warning } from '../../internal/warning.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-
-var _excluded = ["children", "className"];
-var didWarnAboutDeprecation = false;
-
-var Toolbar = function Toolbar(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var wrapperClasses = cx("".concat(prefix, "--toolbar"), className);
-
-  if (process.env.NODE_ENV !== "production") {
-    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, 'The Toolbar component has been deprecated and will be removed in the next major release of `carbon-components-react`') : void 0;
-    didWarnAboutDeprecation = true;
-  }
-
-  return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: wrapperClasses
-  }, other), children);
-};
-
-Toolbar.propTypes = {
-  /**
-   * Specify a collection of ToolbarItem's that should render in the Toolbar
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify an optional className to be applied to the containing Toolbar node
-   */
-  className: PropTypes.string
-};
-var ToolbarItem = function ToolbarItem(_ref2) {
-  var children = _ref2.children,
-      type = _ref2.type,
-      placeHolderText = _ref2.placeHolderText;
-  var toolbarItem = type === 'search' ? /*#__PURE__*/React__default.createElement(ToolbarSearch, {
-    placeHolderText: placeHolderText
-  }) : children;
-  return toolbarItem;
-};
-ToolbarItem.propTypes = {
-  /**
-   * Specify the contents of the ToolbarItem
-   */
-  children: PropTypes.node,
-
-  /**
-   * Specify the placeholder text for the ToolbarSearch component. Useful if
-   * `type` is set to 'search'
-   */
-  placeHolderText: PropTypes.string,
-
-  /**
-   * Specify the type of the ToolbarItem. The `search` type will render a
-   * `ToolbarSearch` component
-   */
-  type: PropTypes.string
-};
-ToolbarItem.defaultProps = {
-  placeHolderText: 'Provide placeHolderText'
-}; // eslint-disable-next-line react/display-name
-
-var ToolbarTitle = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
-  var title = _ref3.title;
-  var prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("li", {
-    ref: ref,
-    className: "".concat(prefix, "--toolbar-menu__title")
-  }, title);
-});
-ToolbarTitle.displayName = 'ToolbarTitle';
-ToolbarTitle.propTypes = {
-  /**
-   * Specify the title of the Toolbar
-   */
-  title: PropTypes.string
-}; // eslint-disable-next-line react/display-name
-
-var ToolbarOption = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
-  var children = _ref4.children;
-  var prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("li", {
-    ref: ref,
-    className: "".concat(prefix, "--toolbar-menu__option")
-  }, children);
-});
-ToolbarOption.displayName = 'ToolbarOption';
-ToolbarOption.propTypes = {
-  /**
-   * Specify the contents of the ToolbarOption
-   */
-  children: PropTypes.node
-}; // eslint-disable-next-line react/display-name
-
-var ToolbarDivider = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var prefix = usePrefix();
-  return /*#__PURE__*/React__default.createElement("hr", {
-    ref: ref,
-    className: "".concat(prefix, "--toolbar-menu__divider")
-  });
-});
-ToolbarDivider.displayName = 'ToolbarDivider';
-var Toolbar$1 = Toolbar;
-
-export { ToolbarDivider, ToolbarItem, ToolbarOption, ToolbarTitle, Toolbar$1 as default };