@carbon/ibm-products 1.11.2 → 1.14.0

package/es/components/Datagrid/useRowSize.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020, 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import { useState } from 'react';
+import { RowSizeDropdown } from './Datagrid/addons/RowSize';
+
+var useRowSize = function useRowSize(hooks) {
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      internalRowSize = _useState2[0],
+      setRowSize = _useState2[1];
+
+  hooks.useInstance.push(function (instance) {
+    var rowSizes = instance.rowSizes,
+        rowSize = instance.rowSize,
+        onRowSizeChange = instance.onRowSizeChange;
+    Object.assign(instance, {
+      rowSize: internalRowSize || rowSize,
+      rowSizeDropdownProps: {
+        rowSizes: rowSizes,
+        selectedOption: internalRowSize || rowSize,
+        onChange: function onChange(value) {
+          setRowSize(value);
+
+          if (typeof onRowSizeChange === 'function') {
+            onRowSizeChange(value);
+          }
+        }
+      },
+      RowSizeDropdown: RowSizeDropdown
+    });
+  });
+
+  var getTableProps = function getTableProps(props, _ref) {
+    var instance = _ref.instance;
+    var rowSize = instance.rowSize;
+
+    if (!rowSize) {
+      return props;
+    }
+
+    return [props, {
+      size: rowSize
+    }];
+  };
+
+  hooks.getTableProps.push(getTableProps);
+};
+
+export default useRowSize;

package/es/components/Datagrid/useSelectAllToggle.js

@@ -0,0 +1,74 @@
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+// @flow
+import React from 'react';
+import { selectionColumnId } from './common-column-ids';
+import SelectAllWithToggle from './Datagrid/DatagridSelectAllWithToggle';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useSelectAllToggle = function useSelectAllToggle(hooks) {
+  useSelectAllWithToggleComponent(hooks);
+  useAddClassNameToSelectRow(hooks);
+};
+
+var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(hooks) {
+  var useInstance = function useInstance(instance) {
+    var headers = instance.headers,
+        DatagridPagination = instance.DatagridPagination;
+    var headersWithSelectAllToggle = headers.map(function (header) {
+      if (header.id === selectionColumnId && DatagridPagination) {
+        Object.assign(header, {
+          Header: Header
+        });
+      }
+
+      return header;
+    });
+    Object.assign(instance, {
+      headers: headersWithSelectAllToggle
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
+  hooks.getCellProps.push(function (props, data) {
+    var column = data.cell.column;
+    var DatagridPagination = data.instance.DatagridPagination;
+
+    if (column.id === selectionColumnId && DatagridPagination) {
+      return [props, {
+        className: "".concat(blockClass, "__select-all-toggle-on")
+      }];
+    }
+
+    return [props];
+  });
+};
+
+var Header = function Header(gridState) {
+  var tableId = gridState.tableId,
+      isFetching = gridState.isFetching,
+      selectAllToggle = gridState.selectAllToggle,
+      getToggleAllPageRowsSelectedProps = gridState.getToggleAllPageRowsSelectedProps,
+      getToggleAllRowsSelectedProps = gridState.getToggleAllRowsSelectedProps,
+      isAllRowsSelected = gridState.isAllRowsSelected;
+  var props = {
+    tableId: tableId,
+    isFetching: isFetching,
+    selectAllToggle: selectAllToggle,
+    getToggleAllPageRowsSelectedProps: getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps: getToggleAllRowsSelectedProps,
+    isAllRowsSelected: isAllRowsSelected
+  };
+  return /*#__PURE__*/React.createElement(SelectAllWithToggle, props);
+};
+
+export default useSelectAllToggle;

package/es/components/Datagrid/useSelectRows.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["onChange"];
+
+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 _objectSpread(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; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+// @flow
+import React from 'react';
+import cx from 'classnames';
+import { TableSelectRow } from 'carbon-components-react';
+import { SelectAll } from './Datagrid/DatagridSelectAll';
+import { selectionColumnId } from './common-column-ids';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useSelectRows = function useSelectRows(hooks) {
+  useHighlightSelection(hooks);
+
+  var useInstance = function useInstance(instance) {
+    var rows = instance.rows;
+    var rowsWithSelect = rows.map(function (row) {
+      return _objectSpread(_objectSpread({}, row), {}, {
+        isSelectable: true
+      });
+    });
+    Object.assign(instance, {
+      rows: rowsWithSelect
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+  hooks.visibleColumns.push(function (columns) {
+    return [{
+      id: selectionColumnId,
+      Header: function Header(gridState) {
+        return /*#__PURE__*/React.createElement(SelectAll, gridState);
+      },
+      Cell: function Cell(gridState) {
+        return /*#__PURE__*/React.createElement(SelectRow, gridState);
+      }
+    }].concat(_toConsumableArray(columns));
+  });
+};
+
+var useHighlightSelection = function useHighlightSelection(hooks) {
+  var getRowProps = function getRowProps(props, _ref) {
+    var row = _ref.row;
+    return [props, {
+      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+    }];
+  };
+
+  hooks.getRowProps.push(getRowProps);
+};
+
+var SelectRow = function SelectRow(datagridState) {
+  var _datagridState$isFetc = datagridState.isFetching,
+      isFetching = _datagridState$isFetc === void 0 ? false : _datagridState$isFetc,
+      tableId = datagridState.tableId,
+      row = datagridState.row,
+      cell = datagridState.cell,
+      radio = datagridState.radio,
+      toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+      onRadioSelect = datagridState.onRadioSelect;
+  var selectDisabled = isFetching || row.getRowProps().selectDisabled;
+
+  var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
+      onChange = _row$getToggleRowSele.onChange,
+      selectProps = _objectWithoutProperties(_row$getToggleRowSele, _excluded);
+
+  var cellProps = cell.getCellProps();
+  return /*#__PURE__*/React.createElement(TableSelectRow, _extends({}, cellProps, selectProps, {
+    radio: radio,
+    onSelect: function onSelect(e) {
+      e.stopPropagation(); // avoid triggering onRowClick
+
+      if (radio) {
+        toggleAllRowsSelected(false);
+
+        if (onRadioSelect) {
+          onRadioSelect(row);
+        }
+      }
+
+      onChange(e);
+    },
+    id: "".concat(tableId, "-").concat(row.index),
+    name: "".concat(tableId, "-").concat(row.index, "-name"),
+    className: cx("".concat(blockClass, "__checkbox-cell"), cellProps.className),
+    ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
+    ,
+    disabled: selectDisabled
+  }));
+};
+
+export default useSelectRows;

package/es/components/Datagrid/useSkeletonRows.js

@@ -0,0 +1,32 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+var useSkeletons = function useSkeletons(hooks) {
+  var useInstance = function useInstance(instance) {
+    var isFetching = instance.isFetching,
+        rows = instance.rows;
+
+    var skeletonRow = function skeletonRow(id) {
+      return {
+        isSkeleton: true,
+        values: 'skeleton',
+        id: id
+      };
+    };
+
+    var rowsWithSkeletons = [].concat(_toConsumableArray(rows), [skeletonRow('skeleton-row-1'), skeletonRow('skeleton-row-2'), skeletonRow('skeleton-row-3')]);
+    Object.assign(instance, {
+      rows: isFetching ? rowsWithSkeletons : rows
+    });
+  };
+
+  hooks.useInstance.push(useInstance);
+};
+
+export default useSkeletons;

package/es/components/Datagrid/useSortableColumns.js

@@ -0,0 +1,110 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 _objectSpread(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; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import { Button } from 'carbon-components-react';
+import { ArrowUp16, ArrowDown16, Arrows16 } from '@carbon/icons-react';
+var ordering = {
+  ASC: 'ASC',
+  DESC: 'DESC',
+  NONE: 'NONE'
+};
+
+var useSortableColumns = function useSortableColumns(hooks) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref) {
+    var instance = _ref.instance;
+    var onSort = instance.onSort;
+
+    var onSortClick = function onSortClick(column) {
+      var key = column.id;
+      var sortDesc = column.isSortedDesc;
+
+      var _getNewSortOrder = getNewSortOrder(sortDesc),
+          newSortDesc = _getNewSortOrder.newSortDesc,
+          newOrder = _getNewSortOrder.newOrder;
+
+      if (onSort) {
+        onSort(key, newOrder);
+      }
+
+      instance.toggleSortBy(key, newSortDesc, false);
+    };
+
+    var sortableColumns = visibleColumns.map(function (column) {
+      var icon = function icon(col) {
+        if (col.isSorted) {
+          switch (col.isSortedDesc) {
+            case false:
+              return ArrowUp16;
+
+            case true:
+              return ArrowDown16;
+
+            default:
+              return Arrows16;
+          }
+        }
+
+        return Arrows16;
+      };
+
+      var Header = function Header(headerProp) {
+        return column.disableSortBy === true ? column.Header : /*#__PURE__*/React.createElement(Button, {
+          onClick: function onClick() {
+            return onSortClick(headerProp.column);
+          },
+          kind: "ghost",
+          renderIcon: icon(headerProp.column)
+        }, column.Header);
+      };
+
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Header: Header
+      });
+    });
+    return _toConsumableArray(sortableColumns);
+  };
+
+  var sortInstanceProps = function sortInstanceProps(instance) {
+    var onSort = instance.onSort;
+    Object.assign(instance, {
+      manualSortBy: !!onSort,
+      isTableSortable: true
+    });
+  };
+
+  var getNewSortOrder = function getNewSortOrder(sortOrder) {
+    var order = {
+      newSortDesc: undefined,
+      newOrder: ordering.NONE
+    };
+
+    if (sortOrder === false) {
+      order.newOrder = ordering.DESC;
+      order.newSortDesc = true;
+    }
+
+    if (sortOrder === undefined) {
+      order.newOrder = ordering.ASC;
+      order.newSortDesc = false;
+    }
+
+    return order;
+  };
+
+  hooks.visibleColumns.push(sortableVisibleColumns);
+  hooks.useInstance.push(sortInstanceProps);
+};
+
+export default useSortableColumns;

package/es/components/Datagrid/useStickyColumn.js

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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 _objectSpread(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; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import { useEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
+var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
+
+var useStickyColumn = function useStickyColumn(hooks) {
+  var tableBodyRef = useRef();
+  var stickyHeaderCellRef = useRef();
+  hooks.getCellProps.push(changeProps.bind(null, 'cell', null));
+  hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef));
+  hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
+  hooks.getHeaderGroupProps.push(function (props) {
+    return [props, {
+      style: _objectSpread(_objectSpread({}, props.style), {}, {
+        minWidth: 'unset' // unset the min-width calculated by sum of all column min-width
+
+      })
+    }];
+  });
+
+  var useEventListener = function useEventListener(instance) {
+    useEffect(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      if (hasVertScroll(tableBodyElement) && headerCellElement) {
+        headerCellElement.classList.add(OFFSET_SCROLL_CLASS);
+      }
+
+      var boundListener = debounce(onBodyResize.bind(null, tableBodyElement, headerCellElement), 250);
+      window.addEventListener('resize', boundListener);
+      return function () {
+        window.removeEventListener('resize', boundListener);
+      };
+    }, [instance.rows, instance.isFetching]);
+    useEffect(function () {
+      var tableBodyElement = tableBodyRef.current;
+      var headerCellElement = stickyHeaderCellRef.current;
+
+      var listener = function listener(evt) {
+        toggleStickyShadow(evt.target, headerCellElement);
+      };
+
+      toggleStickyShadow(tableBodyElement, headerCellElement);
+
+      if (tableBodyElement) {
+        tableBodyElement.addEventListener('scroll', listener);
+      }
+
+      return function () {
+        if (tableBodyElement) {
+          tableBodyElement.removeEventListener('scroll', listener);
+        }
+      };
+    }, [instance.rows, instance.isFetching]);
+  };
+
+  var useCheckScroll = function useCheckScroll(instance) {
+    var tableBodyElement = tableBodyRef.current;
+    var headerCellElement = stickyHeaderCellRef.current;
+    useEffect(function () {
+      onBodyResize(tableBodyElement, headerCellElement);
+    }, [instance.rows, headerCellElement, tableBodyElement]);
+  };
+
+  hooks.useInstance.push(useEventListener);
+  hooks.useInstance.push(useCheckScroll);
+  hooks.useInstance.push(function (instance) {
+    Object.assign(instance, {
+      withStickyColumn: true
+    });
+  });
+  hooks.useInstance.push(function (instance) {
+    // sticky column is defined by consumer
+    // it will always comes after the spacer which is defined by useFlexResize
+    // swap them here to use the spacer to push
+    // sticky column to the right when there are few
+    // columns defined
+    var newColumns = instance.visibleColumns;
+    var spacerIdx = newColumns.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    var stickyIdx = newColumns.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var temp = newColumns[spacerIdx];
+      newColumns[spacerIdx] = newColumns[stickyIdx];
+      newColumns[stickyIdx] = temp;
+    }
+
+    var newHeaders = instance.headers;
+    spacerIdx = newHeaders.findIndex(function (col) {
+      return col.id === 'spacer';
+    });
+    stickyIdx = newHeaders.findIndex(function (col) {
+      return col.sticky === 'right';
+    });
+
+    if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
+      var _temp = newHeaders[spacerIdx];
+      newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[stickyIdx] = _temp;
+    }
+  });
+};
+
+var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
+  return [props, {
+    ref: tableBodyRef
+  }];
+};
+
+var changeProps = function changeProps(elementName, headerCellRef, props, data) {
+  var column = data.column || data.cell.column;
+
+  if (column.sticky === 'right') {
+    var _cx;
+
+    return [props, _objectSpread({
+      className: cx((_cx = {}, _defineProperty(_cx, "".concat(styleClassPrefix, "-").concat(elementName), true), _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), false), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), false), _cx))
+    }, headerCellRef && {
+      ref: headerCellRef
+    })];
+  }
+
+  return [props];
+};
+
+var onBodyResize = function onBodyResize(tableBodyEle, headerCellEle) {
+  if (headerCellEle) {
+    if (hasVertScroll(tableBodyEle)) {
+      headerCellEle.classList.add(OFFSET_SCROLL_CLASS);
+    } else {
+      headerCellEle.classList.remove(OFFSET_SCROLL_CLASS);
+    }
+
+    toggleStickyShadow(tableBodyEle, headerCellEle);
+  }
+};
+
+var toggleStickyShadow = function toggleStickyShadow(tableBodyEle, headerCellEle) {
+  if (tableBodyEle && headerCellEle) {
+    var isScrolledToRight = tableBodyEle.scrollLeft + tableBodyEle.clientWidth === tableBodyEle.scrollWidth;
+
+    if (isScrolledToRight) {
+      headerCellEle.classList.add("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.add("".concat(blockClass, "__sticky-column-noShadow"));
+    } else {
+      headerCellEle.classList.remove("".concat(blockClass, "__sticky-noShadow"));
+      tableBodyEle.classList.remove("".concat(blockClass, "__sticky-column-noShadow"));
+    }
+  }
+};
+
+var hasVertScroll = function hasVertScroll(element) {
+  if (!element) {
+    return false;
+  }
+
+  var scrollHeight = element.scrollHeight,
+      clientHeight = element.clientHeight;
+  return scrollHeight > clientHeight;
+};
+
+export default useStickyColumn;

package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js

@@ -13,10 +13,9 @@ export var HTTPErrorSvg403 = function HTTPErrorSvg403(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/React.createElement("path", {

package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js

@@ -13,10 +13,9 @@ export var HTTPErrorSvg404 = function HTTPErrorSvg404(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/React.createElement("path", {

package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js

@@ -13,10 +13,9 @@ export var HTTPErrorSvgOther = function HTTPErrorSvgOther(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 1584,
-    height: 916,
     viewBox: "0 0 1584 916",
-    className: className
+    className: className,
+    preserveAspectRatio: "xMinYMax meet"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
     id: "prefix__clip-path"
   }, /*#__PURE__*/React.createElement("path", {

package/es/components/ImportModal/ImportModal.js

@@ -23,7 +23,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
-import { pkg } from '../../settings';
+import { pkg, carbon } from '../../settings';
 var componentName = 'ImportModal'; // Default values for props
 
 var defaults = {
@@ -254,7 +254,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: "sm",
     disabled: importButtonDisabled
   }, inputButtonText)), /*#__PURE__*/React.createElement("div", {
-    className: "bx--file-container ".concat(blockClass, "__file-container")
+    className: "".concat(carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__helper-text")
   }, fileStatusString), files.map(function (file) {

package/es/components/TagSet/TagSet.js

@@ -33,15 +33,14 @@ var allTagsModalSearchThreshold = 10; // Default values for props
 
 var defaults = {
   align: 'start',
-  allTagsModalTarget: document.body,
+  // allTagsModalTarget: document.body,
   overflowAlign: 'center',
   overflowDirection: 'bottom'
 };
 export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? defaults.align : _ref$align,
-      _ref$allTagsModalTarg = _ref.allTagsModalTarget,
-      allTagsModalTarget = _ref$allTagsModalTarg === void 0 ? defaults.allTagsModalTarget : _ref$allTagsModalTarg,
+      allTagsModalTargetIn = _ref.allTagsModalTarget,
       className = _ref.className,
       maxVisible = _ref.maxVisible,
       _ref$overflowAlign = _ref.overflowAlign,
@@ -88,10 +87,20 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var overflowTag = useRef(null);
 
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      allTagsModalTarget = _useState12[0],
+      setAllTagsModalTarget = _useState12[1];
+
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
 
+  useEffect(function () {
+    var _document;
+
+    setAllTagsModalTarget(allTagsModalTargetIn !== null && allTagsModalTargetIn !== void 0 ? allTagsModalTargetIn : (_document = document) === null || _document === void 0 ? void 0 : _document.body);
+  }, [allTagsModalTargetIn]);
   useEffect(function () {
     var newSizingTags = []; // create sizing tags