@carbon/react 1.0.0 → 1.0.3

package/README.md

@@ -63,7 +63,7 @@ styles from the project or include the styles for a specific component:
 ```
 
 For a full list of components available, checkout our
-[Storybook](https://carbon-react-next.netlify.app/).
+[Storybook](https://react.carbondesignsystem.com/).
 
 ### Icons
 
@@ -86,7 +86,7 @@ For a full list of icons available, checkout our
 
 If you're looking for `@carbon/react` API documentation, check out:
 
-- [Storybook](https://carbon-react-next.netlify.app/)
+- [Storybook](https://react.carbondesignsystem.com/)
 - [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library/)
 
 ## 🙌 Contributing

package/es/components/Toggletip/index.js

@@ -0,0 +1,252 @@
+/**
+ * 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, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useState, useContext } from 'react';
+import { Popover, PopoverContent } from '../Popover/index.js';
+import { useWindowEvent } from '../../internal/useEvent.js';
+import { useId } from '../../internal/useId.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { match } from '../../internal/keyboard/match.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+
+/**
+ * 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();
+  var className = cx("".concat(prefix, "--toggletip-label"), customClassName);
+  return /*#__PURE__*/React__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.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.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.createContext();
+
+function useToggletip() {
+  return 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 = useRef();
+
+  var _useState = useState(defaultOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var prefix = usePrefix();
+  var id = useId();
+  var className = cx("".concat(prefix, "--toggletip"), customClassName, _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(event, Escape)) {
+      actions.close();
+    }
+  }
+
+  useWindowEvent('click', function (event) {
+    if (open && !ref.current.contains(event.target)) {
+      actions.close();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(ToggletipContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(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.oneOf(['top', 'bottom', 'left', 'right']),
+
+  /**
+   * Provide a custom element or component to render the top-level node for the
+   * component.
+   */
+  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
+
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify if the toggletip should be open by default
+   */
+  defaultOpen: PropTypes.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();
+  var className = cx("".concat(prefix, "--toggletip-button"), customClassName);
+  return /*#__PURE__*/React__default.createElement("button", _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.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide an accessible label for this button
+   */
+  label: PropTypes.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();
+  return /*#__PURE__*/React__default.createElement(PopoverContent, _extends({
+    className: customClassName
+  }, toggletip.contentProps), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--toggletip-content")
+  }, children));
+}
+
+ToggletipContent.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.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();
+  var className = cx("".concat(prefix, "--toggletip-actions"), customClassName);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className
+  }, children);
+}
+
+ToggletipActions.propTypes = {
+  /**
+   * Custom children to be rendered as the content of the label
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a custom class name to be added to the outermost node in the
+   * component
+   */
+  className: PropTypes.string
+};
+
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel };

package/es/index.js

@@ -78,10 +78,7 @@ export { default as TileGroup } from './components/TileGroup/index.js';
 export { default as TimePicker } from './components/TimePicker/index.js';
 export { default as TimePickerSelect } from './components/TimePickerSelect/index.js';
 export { default as Toggle } from './components/Toggle/index.js';
-export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
-export { default as ToggleSmall } from './components/ToggleSmall/ToggleSmall.js';
-export { default as Toolbar, ToolbarDivider, ToolbarItem, ToolbarOption, ToolbarTitle } from './components/Toolbar/Toolbar.js';
-export { default as ToolbarSearch } from './components/ToolbarSearch/ToolbarSearch.js';
+export { Toggletip, ToggletipActions, ToggletipButton, ToggletipContent, ToggletipLabel } from './components/Toggletip/index.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { default as SkeletonText } from './components/SkeletonText/SkeletonText.js';
 export { default as SkeletonPlaceholder } from './components/SkeletonPlaceholder/SkeletonPlaceholder.js';
@@ -97,6 +94,7 @@ export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.j
 export { default as TabsSkeleton } from './components/Tabs/Tabs.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
+export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
 export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
 export { HeaderNavigation, SideNavMenu } from './components/UIShell/index.js';

package/es/internal/ComponentToggle.js

@@ -18,7 +18,6 @@ function createComponentToggle(spec) {
 
   function ComponentToggle(props, ref) {
     var enabled = useFeatureFlag(flag);
-    console.log('ComponentToggle', enabled);
 
     if (enabled) {
       if (next) {

package/es/internal/useEvent.js

@@ -0,0 +1,29 @@
+/**
+ * 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 { useRef, useEffect } from 'react';
+
+function useWindowEvent(eventName, callback) {
+  var savedCallback = useRef(null);
+  useEffect(function () {
+    savedCallback.current = callback;
+  });
+  useEffect(function () {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+
+    window.addEventListener(eventName, handler);
+    return function () {
+      window.removeEventListener(eventName, handler);
+    };
+  }, [eventName]);
+}
+
+export { useWindowEvent };

package/icons/package.json

@@ -1,4 +1,5 @@
 {
   "main": "lib/index.js",
-  "module": "es/index.js"
+  "module": "es/index.js",
+  "sideEffects": false
 }

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;