@carbon/ibm-products 2.30.0 → 2.31.0-alpha.5

package/es/components/Nav/NavList.js

@@ -0,0 +1,168 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect, useImperativeHandle } from 'react';
+import cx from 'classnames';
+import { p as propTypesExports } from '../../node_modules/prop-types/index.js';
+import NavItem, { blockClass as blockClass$1 } from './NavItem.js';
+import { pkg } from '../../settings.js';
+import { ChevronDown } from '../../node_modules/@carbon/icons-react/es/generated/bucket-2.js';
+
+var componentName = 'NavList';
+var blockClass = "".concat(pkg.prefix, "--nav-list");
+
+// Default values for props
+var defaults = {
+  activeHref: '#',
+  className: '',
+  children: null,
+  id: '',
+  isExpandedOnPageload: false,
+  onItemClick: function onItemClick() {},
+  onListClick: function onListClick() {},
+  tabIndex: 0,
+  title: '',
+  icon: '',
+  navigationItemTitle: ''
+};
+var NavList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _ref$activeHref = _ref.activeHref,
+    activeHref = _ref$activeHref === void 0 ? defaults.activeHref : _ref$activeHref,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? defaults.children : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? defaults.className : _ref$className,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? defaults.icon : _ref$icon,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? defaults.id : _ref$id,
+    _ref$isExpandedOnPage = _ref.isExpandedOnPageload,
+    isExpandedOnPageload = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageload : _ref$isExpandedOnPage,
+    _ref$navigationItemTi = _ref.navigationItemTitle,
+    navigationItemTitle = _ref$navigationItemTi === void 0 ? defaults.navigationItemTitle : _ref$navigationItemTi,
+    _ref$onItemClick = _ref.onItemClick,
+    onItemClick = _ref$onItemClick === void 0 ? defaults.onItemClick : _ref$onItemClick,
+    _ref$onListClick = _ref.onListClick,
+    onListClick = _ref$onListClick === void 0 ? defaults.onListClick : _ref$onListClick,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title;
+  var _useState = useState(isExpandedOnPageload),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  useEffect(function () {
+    var hrefs = React__default.Children.toArray(children).filter(function (_ref2) {
+      var childProps = _ref2.props;
+      return childProps.href && childProps.href.length > 0;
+    }).map(function (_ref3) {
+      var childProps = _ref3.props;
+      return childProps.href;
+    });
+    setOpen(hrefs.includes(activeHref) || isExpandedOnPageload);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /**
+   * Closes the list.
+   */
+  var close = function close() {
+    if (open) {
+      setOpen(false);
+    }
+  };
+
+  /**
+   * Handles toggling the list.
+   * @param {SyntheticEvent} event The event fired when the list is toggled.
+   */
+  var toggle = function toggle(event) {
+    var which = event.which,
+      type = event.type;
+
+    // Enter (13) and spacebar (32).
+    if (which === 13 || which === 32 || type === 'click') {
+      if (!open) {
+        onListClick(id);
+      }
+      setOpen(!open);
+    }
+  };
+
+  // Expose external function calls to the parent component
+  useImperativeHandle(ref, function () {
+    return {
+      close: close,
+      isExpandedOnPageload: isExpandedOnPageload
+    };
+  });
+  var newChildren = React__default.Children.map(children, function (child, index) {
+    return /*#__PURE__*/React__default.createElement(NavItem, _extends({}, child.props, {
+      key: "".concat(blockClass$1, "--").concat(index),
+      onClick: function onClick(event, href) {
+        var _child$props$onClick, _child$props;
+        onItemClick(event, href);
+        (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 || _child$props$onClick.call(_child$props, event);
+      },
+      activeHref: activeHref,
+      tabIndex: open ? 0 : -1
+    }));
+  });
+  return /*#__PURE__*/React__default.createElement("li", {
+    ref: ref,
+    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass$1, "--expanded"), open)),
+    tabIndex: tabIndex,
+    onClick: toggle,
+    onKeyDown: toggle,
+    role: "menuitem"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass$1, "__link")
+  }, icon && /*#__PURE__*/React__default.createElement("img", {
+    alt: navigationItemTitle,
+    className: "".concat(blockClass$1, "__img"),
+    src: icon
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass$1, "__content")
+  }, title), /*#__PURE__*/React__default.createElement(ChevronDown, {
+    className: "".concat(blockClass, "__icon")
+  })), /*#__PURE__*/React__default.createElement("ul", {
+    "aria-label": title,
+    "aria-hidden": !open,
+    className: "".concat(blockClass, " ").concat(blockClass, "--nested"),
+    role: "menu"
+  }, newChildren));
+});
+NavList.propTypes = {
+  /** @type {string} Hypertext reference for active page. */
+  activeHref: propTypesExports.string,
+  /** @type {Node} Child elements. */
+  children: propTypesExports.node,
+  /** @type {string} Extra classes to add. */
+  className: propTypesExports.string,
+  /** @type {string} Icon of a list. */
+  icon: propTypesExports.string,
+  /** @type {string} ID of a list. */
+  id: propTypesExports.string,
+  /** @type {boolean} State of a list. */
+  isExpandedOnPageload: propTypesExports.bool,
+  /** @type {boolean} Title of nav. */
+  navigationItemTitle: propTypesExports.string,
+  /** @type {Function} Click handler for an item. */
+  onItemClick: propTypesExports.func,
+  /** @type {Function} Click handler for a list. */
+  onListClick: propTypesExports.func,
+  /** @type {number} `tabindex` of an item. */
+  tabIndex: propTypesExports.number,
+  /** @type {string} Label of the list. */
+  title: propTypesExports.string
+};
+NavList.displayName = componentName;
+var NavList$1 = NavList;
+
+export { NavList, blockClass, NavList$1 as default };

package/es/components/Nav/index.d.ts

@@ -0,0 +1,3 @@
+export { Nav } from "./Nav";
+export { NavList } from "./NavList";
+export { NavItem } from "./NavItem";

package/es/components/Tearsheet/TearsheetShell.js

@@ -34,9 +34,13 @@ var maxDepth = 3;
 // happens when a tearsheet opens or closes. The 'open' array contains one
 // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.
 // The 'all' array contains all the handlers for open and closed tearsheets.
+// The 'sizes' array contains an array of the sizes for every stacked tearsheet.
+// This is so we can opt-out of including the stacking scale effect when there
+// are stacked tearsheets with mixed sizes (ie, using wide and narrow together)
 var stack = {
   open: [],
-  all: []
+  all: [],
+  sizes: []
 };
 
 // these props are only applicable when size='wide'
@@ -147,6 +151,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
     // Register this tearsheet's stack change callback/listener.
     stack.all.push(handleStackChange);
+    stack.sizes.push(size);
 
     // If the tearsheet is mounting with open=true or open is changing from
     // false to true to open it then append its notification callback to
@@ -163,6 +168,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     return function cleanup() {
       // Remove the notification callback from the all handlers array.
       stack.all.splice(stack.all.indexOf(handleStackChange), 1);
+      stack.sizes.splice(stack.sizes.indexOf(size), 1);
 
       // Remove the notification callback from the open handlers array, if
       // it's there, and notify all open tearsheets that the stacking has
@@ -173,7 +179,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
         notify();
       }
     };
-  }, [open]);
+  }, [open, size]);
   function handleFocus() {
     // If something within us is receiving focus but we are not the topmost
     // stacked tearsheet, transfer focus to the topmost tearsheet instead
@@ -189,14 +195,23 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
+    var areAllSameSizeVariant = function areAllSameSizeVariant() {
+      return new Set(stack.sizes).size === 1;
+    };
+    var setScaleValues = function setScaleValues() {
+      if (!areAllSameSizeVariant()) {
+        return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), 1), "--".concat(bc, "--stacking-scale-factor-double"), 1);
+      }
+      return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
+    };
     return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
       className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
       depth > 1 || depth === 1 && prevDepth.current > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
       slug: slug,
-      style: _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width),
-      containerClassName: cx("".concat(bc, "__container"), _defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower')),
+      style: setScaleValues(),
+      containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
@@ -324,9 +339,9 @@ TearsheetShell.propTypes = _objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
-  closeIconDescription: PropTypes.string.isRequired.if(function (_ref3) {
-    var actions = _ref3.actions,
-      hasCloseIcon = _ref3.hasCloseIcon;
+  closeIconDescription: PropTypes.string.isRequired.if(function (_ref4) {
+    var actions = _ref4.actions,
+      hasCloseIcon = _ref4.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
   }),
   /**

package/es/components/index.d.ts

@@ -44,6 +44,7 @@ export { Decorator } from "./Decorator";
 export { DescriptionList } from "./DescriptionList";
 export { FullPageError } from "./FullPageError";
 export { SearchBar } from "./SearchBar";
+export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { StatusIndicator } from "./StatusIndicator";

package/es/global/js/package-settings.d.ts

@@ -75,6 +75,7 @@ declare namespace defaults {
         let EditTearsheetNarrow: boolean;
         let EditFullPage: boolean;
         let EditUpdateCards: boolean;
+        let Nav: boolean;
         let BigNumbers: boolean;
         let TruncatedList: boolean;
         let DelimitedList: boolean;

package/es/global/js/package-settings.js

@@ -74,6 +74,7 @@ var defaults = {
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false,
+    Nav: false,
     BigNumbers: false,
     TruncatedList: false,
     DelimitedList: false,

package/es/index.js

@@ -109,6 +109,7 @@ export { Decorator } from './components/Decorator/Decorator.js';
 export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
 export { FullPageError } from './components/FullPageError/FullPageError.js';
 export { SearchBar } from './components/SearchBar/SearchBar.js';
+export { Nav } from './components/Nav/Nav.js';
 export { StringFormatter } from './components/StringFormatter/StringFormatter.js';
 export { UserAvatar } from './components/UserAvatar/UserAvatar.js';
 export { StatusIndicator } from './components/StatusIndicator/StatusIndicator.js';

package/es/node_modules/@carbon/icon-helpers/es/index.js

@@ -0,0 +1,140 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { typeof as _typeof } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+var _excluded = ["width", "height", "viewBox"],
+  _excluded2 = ["tabindex"];
+/**
+ * Copyright IBM Corp. 2018, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  // Reference:
+  // https://github.com/IBM/carbon-components-react/issues/1392
+  // https://github.com/PolymerElements/iron-iconset-svg/pull/47
+  // `focusable` is a string attribute which is why we do not use a boolean here
+  focusable: 'false',
+  preserveAspectRatio: 'xMidYMid meet'
+};
+
+/**
+ * Get supplementary HTML attributes for a given <svg> element based on existing
+ * attributes.
+ */
+function getAttributes() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    width = _ref.width,
+    height = _ref.height,
+    _ref$viewBox = _ref.viewBox,
+    viewBox = _ref$viewBox === void 0 ? "0 0 ".concat(width, " ").concat(height) : _ref$viewBox,
+    attributes = _objectWithoutProperties(_ref, _excluded);
+  var tabindex = attributes.tabindex,
+    rest = _objectWithoutProperties(attributes, _excluded2);
+  var iconAttributes = _objectSpread2(_objectSpread2(_objectSpread2({}, defaultAttributes), rest), {}, {
+    width: width,
+    height: height,
+    viewBox: viewBox
+  });
+
+  // TODO: attributes.title assumes that the consumer will implement <title> and
+  // correctly set `aria-labelledby`.
+  if (iconAttributes['aria-label'] || iconAttributes['aria-labelledby'] || iconAttributes.title) {
+    iconAttributes.role = 'img';
+
+    // Reference:
+    // https://allyjs.io/tutorials/focusing-in-svg.html
+    if (tabindex !== undefined && tabindex !== null) {
+      iconAttributes.focusable = 'true';
+      iconAttributes.tabindex = tabindex;
+    }
+  } else {
+    iconAttributes['aria-hidden'] = true;
+  }
+  return iconAttributes;
+}
+
+export { defaultAttributes, getAttributes };

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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, objectSpread2 as _objectSpread2 } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { getAttributes } from '../../icon-helpers/es/index.js';
+import PropTypes from '../../../prop-types/index.js';
+import React__default from 'react';
+
+var _excluded = ["className", "children", "tabIndex", "xmlns", "preserveAspectRatio"],
+  _excluded2 = ["tabindex"];
+
+/**
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    tabIndex = _ref.tabIndex,
+    _ref$xmlns = _ref.xmlns,
+    xmlns = _ref$xmlns === void 0 ? 'http://www.w3.org/2000/svg' : _ref$xmlns,
+    _ref$preserveAspectRa = _ref.preserveAspectRatio,
+    preserveAspectRatio = _ref$preserveAspectRa === void 0 ? 'xMidYMid meet' : _ref$preserveAspectRa,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _getAttributes = getAttributes(_objectSpread2(_objectSpread2({}, rest), {}, {
+      tabindex: tabIndex
+    })),
+    tabindex = _getAttributes.tabindex,
+    attrs = _objectWithoutProperties(_getAttributes, _excluded2);
+  var props = attrs;
+  if (className) {
+    props.className = className;
+  }
+  if (tabindex !== undefined && tabindex !== null) {
+    if (typeof tabindex === 'number') {
+      props.tabIndex = tabindex;
+    } else {
+      props.tabIndex = Number(tabIndex);
+    }
+  }
+  if (ref) {
+    props.ref = ref;
+  }
+  if (xmlns) {
+    props.xmlns = xmlns;
+  }
+  if (preserveAspectRatio) {
+    props.preserveAspectRatio = preserveAspectRatio;
+  }
+  return /*#__PURE__*/React__default.createElement('svg', props, children);
+});
+Icon.displayName = 'Icon';
+Icon.propTypes = {
+  'aria-hidden': PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['true', 'false'])]),
+  'aria-label': PropTypes.string,
+  'aria-labelledby': PropTypes.string,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  preserveAspectRatio: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  viewBox: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  xmlns: PropTypes.string
+};
+
+export { Icon as default };