@carbon/react 1.5.0-rc.0 → 1.6.0

package/lib/tools/wrapComponent.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var usePrefix = require('../internal/usePrefix.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,21 +25,22 @@ var _excluded = ["className"];
 
 var wrapComponent = function wrapComponent(_ref) {
   var name = _ref.name,
-      className = _ref.className,
+      getClassName = _ref.className,
       type = _ref.type;
 
-  var Component = function Component(_ref2) {
+  function Component(_ref2) {
     var baseClassName = _ref2.className,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
 
-    var componentClass = cx__default["default"](className, baseClassName);
+    var prefix = usePrefix.usePrefix();
+    var componentClass = cx__default["default"](typeof getClassName === 'function' ? getClassName(prefix) : getClassName, baseClassName);
     return /*#__PURE__*/React__default["default"].createElement(type, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, other), {}, {
       // Prevent Weird quirk where `cx` will evaluate to an empty string, '',
       // and so we have empty `class` attributes in the resulting markup
       // eslint-disable-next-line no-extra-boolean-cast
       className: !!componentClass ? componentClass : undefined
     }));
-  };
+  }
 
   Component.displayName = name;
   Component.propTypes = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.5.0-rc.0",
+  "version": "1.6.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-rc.0",
-    "@carbon/icons-react": "^11.5.0-rc.0",
-    "@carbon/layout": "^11.3.0-rc.0",
-    "@carbon/styles": "^1.5.0-rc.0",
+    "@carbon/feature-flags": "^0.8.0",
+    "@carbon/icons-react": "^11.5.0",
+    "@carbon/layout": "^11.3.0",
+    "@carbon/styles": "^1.6.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -72,26 +72,26 @@
     "@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-rc.0",
-    "@carbon/themes": "^11.4.0-rc.0",
+    "@carbon/test-utils": "^10.25.0",
+    "@carbon/themes": "^11.4.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-a11y": "^6.4.9",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-docs": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-docs": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-notes": "^5.3.21",
-    "@storybook/addon-storysource": "^6.4.9",
-    "@storybook/builder-webpack5": "^6.4.9",
-    "@storybook/manager-webpack5": "^6.4.9",
-    "@storybook/react": "^6.4.9",
-    "@storybook/theming": "^6.4.9",
+    "@storybook/addon-storysource": "^6.5.6",
+    "@storybook/builder-webpack5": "^6.5.6",
+    "@storybook/manager-webpack5": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@storybook/theming": "^6.5.6",
     "autoprefixer": "^10.4.0",
     "babel-loader": "^8.2.3",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.3.0-rc.0",
+    "babel-preset-carbon": "^0.3.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.0.0",
     "css-loader": "^6.5.1",
@@ -129,5 +129,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "a44075aa04612c5ddaf73953ca7ce14d1882a02c"
+  "gitHead": "07aff903e75a56d215c3582c214505379448e38e"
 }

package/es/components/Toggle/index.js

@@ -1,19 +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 { Toggle as Toggle$2 } from './next/Toggle.js';
-import ToggleClassic from './Toggle.js';
-import { createComponentToggle } from '../../internal/ComponentToggle.js';
-
-var Toggle = createComponentToggle({
-  name: 'Toggle',
-  next: Toggle$2,
-  classic: ToggleClassic
-});
-var Toggle$1 = Toggle;
-
-export { Toggle$1 as default };

package/es/components/Toggle/next/Toggle.js

@@ -1,158 +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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { useControllableState } from '../../../internal/useControllableState.js';
-import { usePrefix } from '../../../internal/usePrefix.js';
-
-var _path;
-
-var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
-function Toggle(_ref) {
-  var className = _ref.className,
-      _ref$defaultToggled = _ref.defaultToggled,
-      defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$hideLabel = _ref.hideLabel,
-      hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
-      id = _ref.id,
-      _ref$labelA = _ref.labelA,
-      labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
-      _ref$labelB = _ref.labelB,
-      labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
-      labelText = _ref.labelText,
-      onClick = _ref.onClick,
-      onToggle = _ref.onToggle,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      toggled = _ref.toggled,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useControllableState = useControllableState({
-    value: toggled,
-    onChange: onToggle,
-    defaultValue: defaultToggled
-  }),
-      _useControllableState2 = _slicedToArray(_useControllableState, 2),
-      checked = _useControllableState2[0],
-      setChecked = _useControllableState2[1];
-
-  function handleClick(e) {
-    setChecked(!checked);
-
-    if (onClick) {
-      onClick(e);
-    }
-  }
-
-  var isSm = size === 'sm';
-  var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
-  var wrapperClasses = cx("".concat(prefix, "--toggle"), _defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
-  var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
-  var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
-  var switchClasses = cx("".concat(prefix, "--toggle__switch"), _defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: wrapperClasses
-  }, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
-    id: id,
-    className: "".concat(prefix, "--toggle__button"),
-    role: "switch",
-    type: "button",
-    "aria-checked": checked,
-    disabled: disabled,
-    onClick: handleClick
-  })), /*#__PURE__*/React__default.createElement("label", {
-    htmlFor: id,
-    className: "".concat(prefix, "--toggle__label")
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: labelTextClasses
-  }, labelText), /*#__PURE__*/React__default.createElement("div", {
-    className: appearanceClasses
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: switchClasses
-  }, isSm && /*#__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"),
-    "aria-hidden": "true"
-  }, sideLabel))));
-}
-Toggle.propTypes = {
-  /**
-   * Specify a custom className to apply to the form-item node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether the toggle should be on by default
-   */
-  defaultToggled: PropTypes.bool,
-
-  /**
-   * Whether this control should be disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Specify whether the label should be hidden, or not
-   */
-  hideLabel: PropTypes.bool,
-
-  /**
-   * Provide an id that unique represents the underlying `<button>`
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * Specify the label for the "off" position
-   */
-  labelA: PropTypes.node,
-
-  /**
-   * Specify the label for the "on" position
-   */
-  labelB: PropTypes.node,
-
-  /**
-   * Provide the text that will be read by a screen reader when visiting this
-   * control
-   */
-  labelText: PropTypes.node.isRequired,
-
-  /**
-   * Provide an event listener that is called when the control is clicked
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Provide an event listener that is called when the control is toggled
-   */
-  onToggle: PropTypes.func,
-
-  /**
-   * Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
-   */
-  size: PropTypes.oneOf(['sm', 'md']),
-
-  /**
-   * Specify whether the control is toggled
-   */
-  toggled: PropTypes.bool
-};
-
-export { Toggle, Toggle as default };

package/es/components/UIShell/index.js

@@ -1,17 +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 * as FeatureFlags from '@carbon/feature-flags';
-import HeaderNavigation$2 from './HeaderNavigation.js';
-import SideNavMenuClassic from './SideNavMenu.js';
-import { SideNavMenu as SideNavMenu$1 } from './next/SideNavMenu.js';
-import { HeaderNavigation as HeaderNavigation$1 } from './next/HeaderNavigation.js';
-
-var HeaderNavigation = FeatureFlags.enabled('enable-v11-release') ? HeaderNavigation$1 : HeaderNavigation$2;
-var SideNavMenu = FeatureFlags.enabled('enable-v11-release') ? SideNavMenu$1 : SideNavMenuClassic;
-
-export { HeaderNavigation, SideNavMenu };

package/es/components/UIShell/next/HeaderNavigation.js

@@ -1,52 +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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../../prop-types/AriaPropTypes.js';
-import { usePrefix } from '../../../internal/usePrefix.js';
-
-var _excluded = ["aria-label", "aria-labelledby", "children", "className"];
-
-function HeaderNavigation(props) {
-  var ariaLabel = props['aria-label'],
-      ariaLabelledBy = props['aria-labelledby'],
-      children = props.children,
-      customClassName = props.className,
-      rest = _objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--header__nav"), customClassName); // Assign both label strategies in this option, only one should be defined
-  // so when we spread that should be the one that is applied to the node
-
-  var accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-  return /*#__PURE__*/React__default.createElement("nav", _extends({}, rest, accessibilityLabel, {
-    className: className
-  }), /*#__PURE__*/React__default.createElement("ul", {
-    className: "".concat(prefix, "--header__menu-bar")
-  }, children));
-}
-
-HeaderNavigation.propTypes = _objectSpread2(_objectSpread2({}, AriaLabelPropType), {}, {
-  /**
-   * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
-   * or `HeaderMenu`
-   */
-  children: PropTypes.node,
-
-  /**
-   * Optionally provide a custom class to apply to the underlying <nav> node
-   */
-  className: PropTypes.string
-});
-
-export { HeaderNavigation };

package/es/components/UIShell/next/SideNavMenu.js

@@ -1,160 +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, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React__default, { useState } from 'react';
-import SideNavIcon from '../SideNavIcon.js';
-import { usePrefix } from '../../../internal/usePrefix.js';
-import { match } from '../../../internal/keyboard/match.js';
-import { Escape } from '../../../internal/keyboard/keys.js';
-
-var _ChevronDown;
-var SideNavMenu = /*#__PURE__*/React__default.forwardRef(function SideNavMenu(props, ref) {
-  var _cx;
-
-  var customClassName = props.className,
-      children = props.children,
-      _props$defaultExpande = props.defaultExpanded,
-      defaultExpanded = _props$defaultExpande === void 0 ? false : _props$defaultExpande,
-      _props$isActive = props.isActive,
-      isActive = _props$isActive === void 0 ? false : _props$isActive,
-      _props$large = props.large,
-      large = _props$large === void 0 ? false : _props$large,
-      IconElement = props.renderIcon,
-      isSideNavExpanded = props.isSideNavExpanded,
-      title = props.title;
-  var prefix = usePrefix();
-
-  var _useState = useState(defaultExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      isExpanded = _useState2[0],
-      setIsExpanded = _useState2[1];
-
-  var _useState3 = useState(defaultExpanded),
-      _useState4 = _slicedToArray(_useState3, 2),
-      prevExpanded = _useState4[0],
-      setPrevExpanded = _useState4[1];
-
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild(children) && !isExpanded), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _defineProperty(_cx, customClassName, !!customClassName), _cx));
-
-  if (isSideNavExpanded === false && isExpanded === true) {
-    setIsExpanded(false);
-    setPrevExpanded(true);
-  } else if (isSideNavExpanded === true && prevExpanded === true) {
-    setIsExpanded(true);
-    setPrevExpanded(false);
-  }
-
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React__default.createElement("li", {
-      className: className,
-      onKeyDown: function onKeyDown(event) {
-        if (match(event, Escape)) {
-          setIsExpanded(false);
-        }
-      }
-    }, /*#__PURE__*/React__default.createElement("button", {
-      "aria-expanded": isExpanded,
-      className: "".concat(prefix, "--side-nav__submenu"),
-      onClick: function onClick() {
-        setIsExpanded(!isExpanded);
-      },
-      ref: ref,
-      type: "button"
-    }, IconElement && /*#__PURE__*/React__default.createElement(SideNavIcon, null, /*#__PURE__*/React__default.createElement(IconElement, null)), /*#__PURE__*/React__default.createElement("span", {
-      className: "".concat(prefix, "--side-nav__submenu-title")
-    }, title), /*#__PURE__*/React__default.createElement(SideNavIcon, {
-      className: "".concat(prefix, "--side-nav__submenu-chevron"),
-      small: true
-    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default.createElement(ChevronDown, {
-      size: 20
-    })))), /*#__PURE__*/React__default.createElement("ul", {
-      className: "".concat(prefix, "--side-nav__menu")
-    }, children))
-  );
-});
-SideNavMenu.propTypes = {
-  /**
-   * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
-   */
-  children: PropTypes.node,
-
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Specify whether the menu should default to expanded. By default, it will
-   * be closed.
-   */
-  defaultExpanded: PropTypes.bool,
-
-  /**
-   * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
-   * considered active if one of its menu items are a link for the current
-   * page.
-   */
-  isActive: PropTypes.bool,
-
-  /**
-   * Property to indicate if the side nav container is open (or not). Use to
-   * keep local state and styling in step with the SideNav expansion state.
-   */
-  isSideNavExpanded: PropTypes.bool,
-
-  /**
-   * Specify if this is a large variation of the SideNavMenu
-   */
-  large: PropTypes.bool,
-
-  /**
-   * Pass in a custom icon to render next to the `SideNavMenu` title
-   */
-  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-  /**
-   * Provide the text for the overall menu name
-   */
-  title: PropTypes.string.isRequired
-};
-
-function hasActiveChild(children) {
-  // if we have children, either a single or multiple, find if it is active
-  if (Array.isArray(children)) {
-    return children.some(function (child) {
-      if (!child.props) {
-        return false;
-      }
-
-      if (child.props.isActive === true) {
-        return true;
-      }
-
-      if (child.props['aria-current']) {
-        return true;
-      }
-
-      return false;
-    });
-  }
-
-  if (children.props) {
-    if (children.props.isActive === true || children.props['aria-current']) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-export { SideNavMenu };

package/lib/components/Toggle/index.js

@@ -1,23 +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 Toggle$2 = require('./next/Toggle.js');
-var Toggle$3 = require('./Toggle.js');
-var ComponentToggle = require('../../internal/ComponentToggle.js');
-
-var Toggle = ComponentToggle.createComponentToggle({
-  name: 'Toggle',
-  next: Toggle$2.Toggle,
-  classic: Toggle$3["default"]
-});
-var Toggle$1 = Toggle;
-
-exports["default"] = Toggle$1;