@carbon/react 1.27.0 → 1.28.0-rc.0

package/lib/components/DataTable/Table.js

@@ -22,30 +22,33 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "children", "useZebraStyles", "size", "isSortable", "useStaticWidth", "stickyHeader", "overflowMenuOnHover"];
-var Table = function Table(_ref) {
-  var _cx;
-
-  var className = _ref.className,
-      children = _ref.children,
-      useZebraStyles = _ref.useZebraStyles,
-      size = _ref.size,
-      _ref$isSortable = _ref.isSortable,
-      isSortable = _ref$isSortable === void 0 ? false : _ref$isSortable,
-      useStaticWidth = _ref.useStaticWidth,
-      stickyHeader = _ref.stickyHeader,
-      _ref$overflowMenuOnHo = _ref.overflowMenuOnHover,
-      overflowMenuOnHover = _ref$overflowMenuOnHo === void 0 ? true : _ref$overflowMenuOnHo,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var _useContext = React.useContext(TableContext.TableContext),
-      titleId = _useContext.titleId,
-      descriptionId = _useContext.descriptionId;
-
-  var prefix = usePrefix.usePrefix();
-  var componentClass = cx__default["default"]("".concat(prefix, "--data-table"), className, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--sort"), isSortable), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--zebra"), useZebraStyles), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--static"), useStaticWidth), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--sticky-header"), stickyHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--visible-overflow-menu"), !overflowMenuOnHover), _cx));
-  var table = /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--data-table-content")
+const Table = _ref => {
+  let {
+    className,
+    children,
+    useZebraStyles,
+    size,
+    isSortable = false,
+    useStaticWidth,
+    stickyHeader,
+    overflowMenuOnHover = true,
+    ...other
+  } = _ref;
+  const {
+    titleId,
+    descriptionId
+  } = React.useContext(TableContext.TableContext);
+  const prefix = usePrefix.usePrefix();
+  const componentClass = cx__default["default"](`${prefix}--data-table`, className, {
+    [`${prefix}--data-table--${size}`]: size,
+    [`${prefix}--data-table--sort`]: isSortable,
+    [`${prefix}--data-table--zebra`]: useZebraStyles,
+    [`${prefix}--data-table--static`]: useStaticWidth,
+    [`${prefix}--data-table--sticky-header`]: stickyHeader,
+    [`${prefix}--data-table--visible-overflow-menu`]: !overflowMenuOnHover
+  });
+  const table = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React__default["default"].createElement("table", _rollupPluginBabelHelpers["extends"]({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId
@@ -53,7 +56,7 @@ var Table = function Table(_ref) {
     className: componentClass
   }), children));
   return stickyHeader ? /*#__PURE__*/React__default["default"].createElement("section", {
-    className: "".concat(prefix, "--data-table_inner-container")
+    className: `${prefix}--data-table_inner-container`
   }, table) : table;
 };
 Table.propTypes = {

package/lib/components/DataTable/TableActionList.js

@@ -11,12 +11,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var wrapComponent = require('../../tools/wrapComponent.js');
 
-var TableActionList = wrapComponent["default"]({
+const TableActionList = wrapComponent["default"]({
   name: 'TableActionList',
   type: 'div',
-  className: function className(prefix) {
-    return "".concat(prefix, "--action-list");
-  }
+  className: prefix => `${prefix}--action-list`
 });
 var TableActionList$1 = TableActionList;
 

package/lib/components/DataTable/TableBatchAction.js

@@ -19,9 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var TableBatchAction = function TableBatchAction(props) {
-  return /*#__PURE__*/React__default["default"].createElement(Button["default"], props);
-};
+const TableBatchAction = props => /*#__PURE__*/React__default["default"].createElement(Button["default"], props);
 
 TableBatchAction.propTypes = {
   /**
@@ -33,7 +31,7 @@ TableBatchAction.propTypes = {
    * If specifying the `renderIcon` prop, provide a description for that icon that can
    * be read by screen readers
    */
-  iconDescription: function iconDescription(props) {
+  iconDescription: props => {
     if (props.renderIcon && !props.children && !props.iconDescription) {
       return new Error('renderIcon property specified without also providing an iconDescription property.');
     }

package/lib/components/DataTable/TableBatchActions.js

@@ -25,42 +25,41 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "children", "shouldShowBatchActions", "totalSelected", "onCancel", "translateWithId"];
-var translationKeys = {
+const translationKeys = {
   'carbon.table.batch.cancel': 'Cancel',
   'carbon.table.batch.items.selected': 'items selected',
   'carbon.table.batch.item.selected': 'item selected'
 };
 
-var translateWithId = function translateWithId(id, state) {
+const translateWithId = (id, state) => {
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
 
-  return "".concat(state.totalSelected, " ").concat(translationKeys[id]);
+  return `${state.totalSelected} ${translationKeys[id]}`;
 };
 
-var TableBatchActions = function TableBatchActions(_ref) {
-  var _cx;
-
-  var className = _ref.className,
-      children = _ref.children,
-      shouldShowBatchActions = _ref.shouldShowBatchActions,
-      totalSelected = _ref.totalSelected,
-      onCancel = _ref.onCancel,
-      t = _ref.translateWithId,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var _React$useState = React__default["default"].useState(),
-      _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-      isScrolling = _React$useState2[0],
-      setIsScrolling = _React$useState2[1];
-
-  var prefix = usePrefix.usePrefix();
-  var batchActionsClasses = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--batch-actions"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--batch-actions--active"), shouldShowBatchActions), _cx), className);
-  var batchSummaryClasses = cx__default["default"]("".concat(prefix, "--batch-summary"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--batch-summary__scroll"), isScrolling));
+const TableBatchActions = _ref => {
+  let {
+    className,
+    children,
+    shouldShowBatchActions,
+    totalSelected,
+    onCancel,
+    translateWithId: t,
+    ...rest
+  } = _ref;
+  const [isScrolling, setIsScrolling] = React__default["default"].useState();
+  const prefix = usePrefix.usePrefix();
+  const batchActionsClasses = cx__default["default"]({
+    [`${prefix}--batch-actions`]: true,
+    [`${prefix}--batch-actions--active`]: shouldShowBatchActions
+  }, className);
+  const batchSummaryClasses = cx__default["default"](`${prefix}--batch-summary`, {
+    [`${prefix}--batch-summary__scroll`]: isScrolling
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    onScroll: function onScroll() {
+    onScroll: () => {
       setIsScrolling(!isScrolling);
     },
     "aria-hidden": !shouldShowBatchActions,
@@ -68,15 +67,15 @@ var TableBatchActions = function TableBatchActions(_ref) {
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
     className: batchSummaryClasses
   }, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "".concat(prefix, "--batch-summary__para")
+    className: `${prefix}--batch-summary__para`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     as: "span"
   }, totalSelected > 1 || totalSelected === 0 ? t('carbon.table.batch.items.selected', {
-    totalSelected: totalSelected
+    totalSelected
   }) : t('carbon.table.batch.item.selected', {
-    totalSelected: totalSelected
+    totalSelected
   })))), /*#__PURE__*/React__default["default"].createElement(TableActionList["default"], null, children, /*#__PURE__*/React__default["default"].createElement(Button["default"], {
-    className: "".concat(prefix, "--batch-summary__cancel"),
+    className: `${prefix}--batch-summary__cancel`,
     tabIndex: shouldShowBatchActions ? 0 : -1,
     onClick: onCancel
   }, t('carbon.table.batch.cancel'))));
@@ -113,7 +112,7 @@ TableBatchActions.propTypes = {
   translateWithId: PropTypes__default["default"].func
 };
 TableBatchActions.defaultProps = {
-  translateWithId: translateWithId
+  translateWithId
 };
 var TableBatchActions$1 = TableBatchActions;
 

package/lib/components/DataTable/TableBody.js

@@ -18,13 +18,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["children", "className"];
-
-var TableBody = function TableBody(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
+const TableBody = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement("tbody", _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);

package/lib/components/DataTable/TableCell.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var wrapComponent = require('../../tools/wrapComponent.js');
 
-var TableCell = wrapComponent["default"]({
+const TableCell = wrapComponent["default"]({
   name: 'TableCell',
   type: 'td'
 });

package/lib/components/DataTable/TableContainer.js

@@ -23,25 +23,25 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "children", "title", "description", "stickyHeader", "useStaticWidth"];
-
-var TableContainer = function TableContainer(_ref) {
-  var _cx;
-
-  var className = _ref.className,
-      children = _ref.children,
-      title = _ref.title,
-      description = _ref.description,
-      stickyHeader = _ref.stickyHeader,
-      useStaticWidth = _ref.useStaticWidth,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var baseId = useId.useId('tc');
-  var titleId = "".concat(baseId, "-title");
-  var descriptionId = "".concat(baseId, "-description");
-  var prefix = usePrefix.usePrefix();
-  var tableContainerClasses = cx__default["default"](className, "".concat(prefix, "--data-table-container"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--max-width"), stickyHeader), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table-container--static"), useStaticWidth), _cx));
-  var value = React.useMemo(function () {
+const TableContainer = _ref => {
+  let {
+    className,
+    children,
+    title,
+    description,
+    stickyHeader,
+    useStaticWidth,
+    ...rest
+  } = _ref;
+  const baseId = useId.useId('tc');
+  const titleId = `${baseId}-title`;
+  const descriptionId = `${baseId}-description`;
+  const prefix = usePrefix.usePrefix();
+  const tableContainerClasses = cx__default["default"](className, `${prefix}--data-table-container`, {
+    [`${prefix}--data-table--max-width`]: stickyHeader,
+    [`${prefix}--data-table-container--static`]: useStaticWidth
+  });
+  const value = React.useMemo(() => {
     return {
       titleId: title ? titleId : null,
       descriptionId: description ? descriptionId : null
@@ -52,12 +52,12 @@ var TableContainer = function TableContainer(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: tableContainerClasses
   }), title && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--data-table-header")
+    className: `${prefix}--data-table-header`
   }, /*#__PURE__*/React__default["default"].createElement("h4", {
-    className: "".concat(prefix, "--data-table-header__title"),
+    className: `${prefix}--data-table-header__title`,
     id: titleId
   }, title), /*#__PURE__*/React__default["default"].createElement("p", {
-    className: "".concat(prefix, "--data-table-header__description"),
+    className: `${prefix}--data-table-header__description`,
     id: descriptionId
   }, description)), children));
 };

package/lib/components/DataTable/TableContext.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-var TableContext = /*#__PURE__*/React.createContext({
+const TableContext = /*#__PURE__*/React.createContext({
   titleId: undefined,
   descriptionId: undefined
 });

package/lib/components/DataTable/TableExpandHeader.js

@@ -24,24 +24,22 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["ariaLabel", "className", "enableExpando", "enableToggle", "id", "isExpanded", "onExpand", "expandIconDescription", "children"];
-
-var TableExpandHeader = function TableExpandHeader(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-      headerClassName = _ref.className,
-      enableExpando = _ref.enableExpando,
-      enableToggle = _ref.enableToggle,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'expand' : _ref$id,
-      isExpanded = _ref.isExpanded,
-      onExpand = _ref.onExpand,
-      expandIconDescription = _ref.expandIconDescription,
-      children = _ref.children,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--table-expand"), headerClassName);
-  var previousValue = isExpanded ? 'collapsed' : undefined;
+const TableExpandHeader = _ref => {
+  let {
+    ariaLabel,
+    className: headerClassName,
+    enableExpando,
+    enableToggle,
+    id = 'expand',
+    isExpanded,
+    onExpand,
+    expandIconDescription,
+    children,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--table-expand`, headerClassName);
+  const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default["default"].createElement("th", _rollupPluginBabelHelpers["extends"]({
     scope: "col",
     className: className,
@@ -49,12 +47,12 @@ var TableExpandHeader = function TableExpandHeader(_ref) {
     id: id
   }, rest), enableExpando || enableToggle ? /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: "".concat(prefix, "--table-expand__button"),
+    className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
     "aria-label": ariaLabel
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
-    className: "".concat(prefix, "--table-expand__svg"),
+    className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
   })) : null, children);
 };

package/lib/components/DataTable/TableExpandRow.js

@@ -23,40 +23,40 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["ariaLabel", "className", "children", "isExpanded", "onExpand", "expandIconDescription", "isSelected", "expandHeader"];
-
-var TableExpandRow = function TableExpandRow(_ref) {
-  var _cx;
-
-  var ariaLabel = _ref.ariaLabel,
-      rowClassName = _ref.className,
-      children = _ref.children,
-      isExpanded = _ref.isExpanded,
-      onExpand = _ref.onExpand,
-      expandIconDescription = _ref.expandIconDescription,
-      isSelected = _ref.isSelected,
-      _ref$expandHeader = _ref.expandHeader,
-      expandHeader = _ref$expandHeader === void 0 ? 'expand' : _ref$expandHeader,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--parent-row"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--expandable-row"), isExpanded), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--data-table--selected"), isSelected), _cx), rowClassName);
-  var previousValue = isExpanded ? 'collapsed' : undefined;
+const TableExpandRow = _ref => {
+  let {
+    ariaLabel,
+    className: rowClassName,
+    children,
+    isExpanded,
+    onExpand,
+    expandIconDescription,
+    isSelected,
+    expandHeader = 'expand',
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"]({
+    [`${prefix}--parent-row`]: true,
+    [`${prefix}--expandable-row`]: isExpanded,
+    [`${prefix}--data-table--selected`]: isSelected
+  }, rowClassName);
+  const previousValue = isExpanded ? 'collapsed' : undefined;
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
     "data-parent-row": true
   }), /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
-    className: "".concat(prefix, "--table-expand"),
+    className: `${prefix}--table-expand`,
     "data-previous-value": previousValue,
     headers: expandHeader
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: "".concat(prefix, "--table-expand__button"),
+    className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
     "aria-label": ariaLabel
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
-    className: "".concat(prefix, "--table-expand__svg"),
+    className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
   }))), children);
 };

package/lib/components/DataTable/TableExpandedRow.js

@@ -22,45 +22,40 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "children", "colSpan"];
+const TableExpandedRow = _ref => {
+  let {
+    className: customClassName,
+    children,
+    colSpan,
+    ...rest
+  } = _ref;
+  const rowRef = React.useRef(null);
+  const prefix = usePrefix.usePrefix();
+  const className = cx__default["default"](`${prefix}--expandable-row`, customClassName);
 
-var TableExpandedRow = function TableExpandedRow(_ref) {
-  var customClassName = _ref.className,
-      children = _ref.children,
-      colSpan = _ref.colSpan,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var rowRef = React.useRef(null);
-  var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"]("".concat(prefix, "--expandable-row"), customClassName);
-
-  var toggleParentHoverClass = function toggleParentHoverClass(eventType) {
+  const toggleParentHoverClass = eventType => {
     if (rowRef && rowRef.current && rowRef.current.previousElementSibling) {
-      var parentNode = rowRef.current.previousElementSibling;
+      const parentNode = rowRef.current.previousElementSibling;
 
       if (eventType === 'enter') {
-        parentNode.classList.add("".concat(prefix, "--expandable-row--hover"));
+        parentNode.classList.add(`${prefix}--expandable-row--hover`);
       } else {
-        parentNode.classList.remove("".concat(prefix, "--expandable-row--hover"));
+        parentNode.classList.remove(`${prefix}--expandable-row--hover`);
       }
     }
   };
 
   return /*#__PURE__*/React__default["default"].createElement("tr", _rollupPluginBabelHelpers["extends"]({
     ref: rowRef,
-    onMouseEnter: function onMouseEnter() {
-      return toggleParentHoverClass('enter');
-    },
-    onMouseLeave: function onMouseLeave() {
-      return toggleParentHoverClass('leave');
-    }
+    onMouseEnter: () => toggleParentHoverClass('enter'),
+    onMouseLeave: () => toggleParentHoverClass('leave')
   }, rest, {
     className: className,
     "data-child-row": true
   }), /*#__PURE__*/React__default["default"].createElement(TableCell["default"], {
     colSpan: colSpan
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--child-row-inner-container")
+    className: `${prefix}--child-row-inner-container`
   }, children)));
 };
 

package/lib/components/DataTable/TableHead.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var wrapComponent = require('../../tools/wrapComponent.js');
 
-var TableHead = wrapComponent["default"]({
+const TableHead = wrapComponent["default"]({
   name: 'TableHead',
   type: 'thead'
 });