@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/Menu/MenuRadioGroup.js

@@ -0,0 +1,50 @@
+/**
+ * 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 React__default from 'react';
+import PropTypes from 'prop-types';
+import MenuGroup from './MenuGroup.js';
+import MenuRadioGroupOptions from './MenuRadioGroupOptions.js';
+
+function MenuRadioGroup(_ref) {
+  var items = _ref.items,
+      initialSelectedItem = _ref.initialSelectedItem,
+      label = _ref.label,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+  return /*#__PURE__*/React__default.createElement(MenuGroup, {
+    label: label
+  }, /*#__PURE__*/React__default.createElement(MenuRadioGroupOptions, {
+    items: items,
+    initialSelectedItem: initialSelectedItem,
+    onChange: onChange
+  }));
+}
+
+MenuRadioGroup.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialSelectedItem: PropTypes.string,
+
+  /**
+   * Array of the radio options
+   */
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * The radio group label
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes.func
+};
+
+export { MenuRadioGroup as default };

package/es/components/Menu/MenuRadioGroupOptions.js

@@ -0,0 +1,64 @@
+/**
+ * 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 { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Checkmark } from '@carbon/icons-react';
+import MenuOption from './MenuOption.js';
+
+function MenuRadioGroupOptions(_ref) {
+  var items = _ref.items,
+      initialSelectedItem = _ref.initialSelectedItem,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = useState(initialSelectedItem),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  function handleClick(option) {
+    setSelected(option);
+    onChange(option);
+  }
+
+  var options = items.map(function (option, i) {
+    var isSelected = selected === option;
+    return /*#__PURE__*/React__default.createElement(MenuOption, {
+      key: i,
+      role: "menuitemradio",
+      "aria-checked": isSelected,
+      renderIcon: isSelected ? Checkmark : null,
+      label: option,
+      indented: true,
+      onClick: function onClick() {
+        handleClick(option);
+      }
+    });
+  });
+  return options;
+}
+
+MenuRadioGroupOptions.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialSelectedItem: PropTypes.string,
+
+  /**
+   * Array of the radio options
+   */
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes.func
+};
+
+export { MenuRadioGroupOptions as default };

package/es/components/Menu/MenuSelectableItem.js

@@ -0,0 +1,57 @@
+/**
+ * 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 { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Checkmark } from '@carbon/icons-react';
+import MenuOption from './MenuOption.js';
+
+function MenuSelectableItem(_ref) {
+  var label = _ref.label,
+      initialChecked = _ref.initialChecked,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+
+  var _useState = useState(initialChecked),
+      _useState2 = _slicedToArray(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
+  function handleClick() {
+    setChecked(!checked);
+    onChange(!checked);
+  }
+
+  return /*#__PURE__*/React__default.createElement(MenuOption, {
+    role: "menuitemcheckbox",
+    "aria-checked": checked,
+    renderIcon: checked ? Checkmark : null,
+    label: label,
+    indented: true,
+    onClick: handleClick
+  });
+}
+
+MenuSelectableItem.propTypes = {
+  /**
+   * Whether the option should be checked by default
+   */
+  initialChecked: PropTypes.bool,
+
+  /**
+   * Rendered label for the MenuOptionContent
+   */
+  label: PropTypes.node.isRequired,
+
+  /**
+   * Callback function when selection the has been changed
+   */
+  onChange: PropTypes.func
+};
+
+export { MenuSelectableItem as default };

package/es/components/Menu/_utils.js

@@ -0,0 +1,177 @@
+/**
+ * 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.
+ */
+
+var prefix = 'cds';
+function resetFocus(el) {
+  if (el) {
+    var _el$querySelectorAll;
+
+    Array.from((_el$querySelectorAll = el.querySelectorAll('[tabindex="0"]')) !== null && _el$querySelectorAll !== void 0 ? _el$querySelectorAll : []).forEach(function (node) {
+      node.tabIndex = -1;
+    });
+  }
+}
+function focusNode(node) {
+  if (node) {
+    node.tabIndex = 0;
+    node.focus();
+  }
+}
+function getValidNodes(list) {
+  var level = list.dataset.level;
+  var nodes = [];
+
+  if (level) {
+    var submenus = Array.from(list.querySelectorAll('[data-level]'));
+    nodes = Array.from(list.querySelectorAll("li.".concat(prefix, "--menu-option"))).filter(function (child) {
+      return !submenus.some(function (submenu) {
+        return submenu.contains(child);
+      });
+    });
+  }
+
+  return nodes.filter(function (node) {
+    return node.matches(":not(.".concat(prefix, "--menu-option--disabled)"));
+  });
+}
+function getNextNode(current, direction) {
+  var menu = getParentMenu(current);
+  var nodes = getValidNodes(menu);
+  var currentIndex = nodes.indexOf(current);
+  var nextNode = nodes[currentIndex + direction];
+  return nextNode || null;
+}
+function getFirstSubNode(node) {
+  var submenu = node.querySelector("ul.".concat(prefix, "--menu"));
+
+  if (submenu) {
+    var subnodes = getValidNodes(submenu);
+    return subnodes[0] || null;
+  }
+
+  return null;
+}
+function getParentNode(node) {
+  if (node) {
+    var parentNode = node.parentNode.closest("li.".concat(prefix, "--menu-option"));
+    return parentNode || null;
+  }
+
+  return null;
+}
+function getSubMenuOffset(node) {
+  if (node) {
+    var nodeStyles = getComputedStyle(node);
+    var spacings = parseInt(nodeStyles.paddingTop) + parseInt(nodeStyles.paddingBottom); // styles always in px, convert to number
+
+    var elementHeight = node.firstElementChild.offsetHeight;
+    return elementHeight + spacings || 0;
+  }
+
+  return 0;
+}
+function getParentMenu(el) {
+  if (el) {
+    var parentMenu = el.parentNode.closest("ul.".concat(prefix, "--menu"));
+    return parentMenu || null;
+  }
+
+  return null;
+}
+function clickedElementHasSubnodes(e) {
+  if (e) {
+    var closestFocusableElement = e.target.closest('[tabindex]');
+
+    if ((closestFocusableElement === null || closestFocusableElement === void 0 ? void 0 : closestFocusableElement.tagName) === 'LI') {
+      return getFirstSubNode(closestFocusableElement) !== null;
+    }
+  }
+
+  return false;
+}
+/**
+ * @param {number} [value] The value to cap
+ * @param {number} [min] The minimum of the range
+ * @param {number} [max] The maximum of the range
+ * @returns {number} Whether or not the element fits inside the boundaries on the given axis
+ */
+
+function capWithinRange(value, min, max) {
+  if (value > max) {
+    return max;
+  }
+
+  if (value < min) {
+    return min;
+  }
+
+  return value;
+}
+/**
+ * @param {number[]} [elementDimensions] The dimensions of the element: [width, height]
+ * @param {number[]} [position] The desired position of the element: [x, y]
+ * @param {number[]} [boundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
+ * @param {string} [axis="x"] Which axis to check. Either "x" or "y"
+ * @returns {boolean} Whether or not the element fits inside the boundaries on the given axis
+ */
+
+function elementFits(elementDimensions, position, boundaries) {
+  var axis = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'x';
+  var index = axis === 'y' ? 1 : 0;
+  var min = boundaries[index];
+  var max = boundaries[index + 2];
+  var start = position[index];
+  var end = position[index] + elementDimensions[index];
+  return start >= min && end <= max;
+}
+/**
+ * @param {number[]} [elementDimensions] The dimensions of the element: [width, height]
+ * @param {number[]} [targetBoundaries] The boundaries of the target the element should attach to: [minX, minY, maxX, maxY]
+ * @param {number[]} [containerBoundaries] The boundaries of the container the element should be contained in: [minX, minY, maxX, maxY]
+ * @param {number} [preferredDirection=1] Which direction is preferred. Either 1 (right right) or -1 (to left)
+ * @param {boolean} [isRootLevel] Flag that indicates if the element is on level 1 (the root level)
+ * @param {object} [element] The list element - used to calculate the offset of submenus
+ * @returns {object} The determined position and direction of the element: { position: [x, y], direction: 1 | -1 }
+ */
+
+
+function getPosition(elementDimensions, targetBoundaries, containerBoundaries) {
+  var preferredDirection = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  var isRootLevel = arguments.length > 4 ? arguments[4] : undefined;
+  var element = arguments.length > 5 ? arguments[5] : undefined;
+  var position = [0, 0];
+  var direction = preferredDirection; // x
+
+  position[0] = direction === 1 ? targetBoundaries[0] : targetBoundaries[2] - elementDimensions[0];
+  var xFits = elementFits(elementDimensions, position, containerBoundaries, 'x');
+
+  if (!xFits) {
+    direction = direction * -1;
+    position[0] = direction === 1 ? targetBoundaries[0] : targetBoundaries[2] - elementDimensions[0];
+  } // y
+
+
+  position[1] = targetBoundaries[3];
+  var yFits = elementFits(elementDimensions, position, containerBoundaries, 'y');
+
+  if (!yFits) {
+    position[1] = targetBoundaries[1] - elementDimensions[1];
+
+    if (!isRootLevel && element) {
+      // if sub-menu and not root level, consider offset
+      var diff = getSubMenuOffset(element);
+      position[1] += diff;
+    }
+  }
+
+  return {
+    position: position,
+    direction: direction
+  };
+}
+
+export { capWithinRange, clickedElementHasSubnodes, focusNode, getFirstSubNode, getNextNode, getParentMenu, getParentNode, getPosition, getSubMenuOffset, getValidNodes, resetFocus };

package/es/components/Menu/index.js

@@ -0,0 +1,25 @@
+/**
+ * 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 Menu from './Menu.js';
+export { default } from './Menu.js';
+import MenuDivider from './MenuDivider.js';
+export { default as MenuDivider } from './MenuDivider.js';
+import MenuGroup from './MenuGroup.js';
+export { default as MenuGroup } from './MenuGroup.js';
+import MenuItem from './MenuItem.js';
+export { default as MenuItem } from './MenuItem.js';
+import MenuRadioGroup from './MenuRadioGroup.js';
+export { default as MenuRadioGroup } from './MenuRadioGroup.js';
+import MenuSelectableItem from './MenuSelectableItem.js';
+export { default as MenuSelectableItem } from './MenuSelectableItem.js';
+
+Menu.MenuDivider = MenuDivider;
+Menu.MenuGroup = MenuGroup;
+Menu.MenuItem = MenuItem;
+Menu.MenuRadioGroup = MenuRadioGroup;
+Menu.MenuSelectableItem = MenuSelectableItem;