@carbon/react 1.6.0-rc.0 → 1.7.0

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/UIShell/index.js

@@ -1,42 +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 FeatureFlags = require('@carbon/feature-flags');
-var HeaderNavigation$2 = require('./HeaderNavigation.js');
-var SideNavMenu$2 = require('./SideNavMenu.js');
-var SideNavMenu$1 = require('./next/SideNavMenu.js');
-var HeaderNavigation$1 = require('./next/HeaderNavigation.js');
-
-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 FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
-
-var HeaderNavigation = FeatureFlags__namespace.enabled('enable-v11-release') ? HeaderNavigation$1.HeaderNavigation : HeaderNavigation$2["default"];
-var SideNavMenu = FeatureFlags__namespace.enabled('enable-v11-release') ? SideNavMenu$1.SideNavMenu : SideNavMenu$2["default"];
-
-exports.HeaderNavigation = HeaderNavigation;
-exports.SideNavMenu = SideNavMenu;

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

@@ -1,62 +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 cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var AriaPropTypes = require('../../../prop-types/AriaPropTypes.js');
-var usePrefix = require('../../../internal/usePrefix.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-
-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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".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["default"].createElement("nav", _rollupPluginBabelHelpers["extends"]({}, rest, accessibilityLabel, {
-    className: className
-  }), /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: "".concat(prefix, "--header__menu-bar")
-  }, children));
-}
-
-HeaderNavigation.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, AriaPropTypes.AriaLabelPropType), {}, {
-  /**
-   * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
-   * or `HeaderMenu`
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Optionally provide a custom class to apply to the underlying <nav> node
-   */
-  className: PropTypes__default["default"].string
-});
-
-exports.HeaderNavigation = HeaderNavigation;

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

@@ -1,170 +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 iconsReact = require('@carbon/icons-react');
-var cx = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var SideNavIcon = require('../SideNavIcon.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);
-
-var _ChevronDown;
-var SideNavMenu = /*#__PURE__*/React__default["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.usePrefix();
-
-  var _useState = React.useState(defaultExpanded),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      isExpanded = _useState2[0],
-      setIsExpanded = _useState2[1];
-
-  var _useState3 = React.useState(defaultExpanded),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevExpanded = _useState4[0],
-      setPrevExpanded = _useState4[1];
-
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--active"), isActive || hasActiveChild(children) && !isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--icon"), IconElement), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--side-nav__item--large"), large), _rollupPluginBabelHelpers.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["default"].createElement("li", {
-      className: className,
-      onKeyDown: function onKeyDown(event) {
-        if (match.match(event, keys.Escape)) {
-          setIsExpanded(false);
-        }
-      }
-    }, /*#__PURE__*/React__default["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["default"].createElement(SideNavIcon["default"], null, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: "".concat(prefix, "--side-nav__submenu-title")
-    }, title), /*#__PURE__*/React__default["default"].createElement(SideNavIcon["default"], {
-      className: "".concat(prefix, "--side-nav__submenu-chevron"),
-      small: true
-    }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
-      size: 20
-    })))), /*#__PURE__*/React__default["default"].createElement("ul", {
-      className: "".concat(prefix, "--side-nav__menu")
-    }, children))
-  );
-});
-SideNavMenu.propTypes = {
-  /**
-   * Provide <SideNavMenuItem>'s inside of the `SideNavMenu`
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify whether the menu should default to expanded. By default, it will
-   * be closed.
-   */
-  defaultExpanded: PropTypes__default["default"].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__default["default"].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__default["default"].bool,
-
-  /**
-   * Specify if this is a large variation of the SideNavMenu
-   */
-  large: PropTypes__default["default"].bool,
-
-  /**
-   * Pass in a custom icon to render next to the `SideNavMenu` title
-   */
-  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
-
-  /**
-   * Provide the text for the overall menu name
-   */
-  title: PropTypes__default["default"].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;
-}
-
-exports.SideNavMenu = SideNavMenu;