@carbon/react 0.17.0 → 1.0.1

package/es/components/TabContent/TabContent.js

@@ -0,0 +1,77 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useRef, useState } from 'react';
+import cx from 'classnames';
+import { selectorTabbable } from '../../internal/keyboard/navigation.js';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "selected", "children"];
+/**
+ * Determine if the node within the provided ref contains content that is tabbable.
+ */
+
+function useTabbableContent(ref) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasTabbableContent = _useState2[0],
+      setHasTabbableContent = _useState2[1];
+
+  useIsomorphicEffect(function () {
+    if (ref.current) {
+      setHasTabbableContent(ref.current.querySelector(selectorTabbable));
+    }
+  });
+  return hasTabbableContent;
+}
+
+var TabContent = function TabContent(props) {
+  var className = props.className,
+      selected = props.selected,
+      children = props.children,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var prefix = usePrefix();
+  var tabContentClasses = cx("".concat(prefix, "--tab-content"), _defineProperty({}, className, className));
+  var ref = useRef(null);
+  var hasTabbableContent = useTabbableContent(ref);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    role: "tabpanel"
+  }, other, {
+    className: tabContentClasses,
+    selected: selected,
+    hidden: !selected,
+    ref: ref,
+    tabIndex: hasTabbableContent ? undefined : 0
+  }), children);
+};
+
+TabContent.propTypes = {
+  /**
+   * Pass in content to render inside of the TabContent
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a className for the tab content container
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the TabContent is selected
+   */
+  selected: PropTypes.bool
+};
+TabContent.defaultProps = {
+  selected: false
+};
+var TabContent$1 = TabContent;
+
+export { TabContent$1 as default };

package/es/components/Tabs/Tabs.Skeleton.js

@@ -0,0 +1,53 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "type"];
+
+var _span;
+
+function Tab() {
+  var prefix = usePrefix();
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "".concat(prefix, "--tabs--scrollable__nav-item")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-link")
+  }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))));
+}
+
+function TabsSkeleton(_ref) {
+  var className = _ref.className,
+      type = _ref.type,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var tabClasses = cx(className, "".concat(prefix, "--tabs"), "".concat(prefix, "--skeleton"), "".concat(prefix, "--tabs--scrollable"), _defineProperty({}, "".concat(prefix, "--tabs--scrollable--container"), type === 'container'));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: tabClasses
+  }, rest), /*#__PURE__*/React__default.createElement("ul", {
+    className: "".concat(prefix, "--tabs--scrollable__nav")
+  }, Tab(), Tab(), Tab(), Tab(), Tab()));
+}
+
+TabsSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Provide the type of Tab
+   */
+  type: PropTypes.oneOf(['', 'default', 'container'])
+};
+
+export { TabsSkeleton as default };