carbon-react 93.0.4 → 94.0.3

package/lib/components/table/table-cell/table-cell.style.js

@@ -1,164 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
-var _inputPresentation = _interopRequireDefault(require("../../../__internal__/input/input-presentation.style"));
-
-var _input = _interopRequireDefault(require("../../../__internal__/input/input.style"));
-
-var _tableSizesStyle = _interopRequireDefault(require("../table-sizes.style.js"));
-
-var _icon = _interopRequireDefault(require("../../icon/icon.style"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const StyledTableCell = _styledComponents.default.td`
-  ${({
-  action,
-  align,
-  theme,
-  size,
-  isTextArea,
-  isDate
-}) => {
-  const {
-    colors,
-    table
-  } = theme;
-  return (0, _styledComponents.css)`
-      background-color: ${table.primary};
-      border-width: 0;
-      border-bottom: 1px solid ${table.secondary};
-      font-size: 13px;
-      overflow: visible;
-      padding: 8px;
-      text-align: ${align};
-      vertical-align: middle;
-      white-space: nowrap;
-
-      > .common-input {
-        margin-bottom: -4px;
-        margin-left: -6px;
-        margin-right: -6px;
-        margin-top: -4px;
-      }
-
-      ${action && applyActionStyling(colors)}
-
-      ${size ? applyModernPresentationStyling(size, isTextArea, isDate) : ""}
-    `;
-}}
-`;
-
-function applyActionStyling(colors) {
-  return (0, _styledComponents.css)`
-    width: 18px;
-
-    .icon-delete:before {
-      cursor: pointer;
-      color: ${colors.border};
-      font-size: 16px;
-      line-height: 15px;
-      margin-left: 1px;
-    }
-
-    .icon-delete:hover:before {
-      color: #c7384f;
-    }
-  `;
-}
-
-function applyModernPresentationStyling(size, isTextArea, isDate) {
-  const {
-    inputHeight,
-    fontSize,
-    paddingSize
-  } = _tableSizesStyle.default[size];
-  return `
-    && ${_inputPresentation.default} {
-      min-height: ${inputHeight}px;
-      padding-left: ${paddingSize};
-      padding-right: ${paddingSize};
-      position: relative;
-      ${size === "large" && isDate ? "width: 150px;" : ""}
-      ${additionalPresentationStyling(isTextArea, inputHeight)}
-    }
-    ${applyModernInputStyling(isTextArea, inputHeight, fontSize)}
-  `;
-}
-
-function additionalPresentationStyling(isTextArea, inputHeight) {
-  if (isTextArea) {
-    return `
-      height: ${inputHeight * 3}px;
-      margin-top: 4px;
-      margin-bottom: 4px; 
-    `;
-  }
-
-  return `
-    height: ${inputHeight}px;
-  `;
-}
-
-function applyModernInputStyling(isTextArea, inputHeight, fontSize) {
-  if (isTextArea) {
-    return `
-      textarea {
-        font-size: ${fontSize};
-        overflow: auto;
-        resize: none;
-        flex-grow: 1;
-        height: auto !important;
-        padding-top: 5px;
-        padding-bottom: 5px;
-      }
-    `;
-  }
-
-  return `
-    && ${_input.default} {
-      font-size: ${fontSize};
-      height: ${inputHeight}px;
-      padding-top: 0px;
-      padding-bottom: 0px;
-    }
-    
-    && ${_icon.default} {
-      font-size: 13px;
-    }
-  `;
-}
-
-StyledTableCell.propTypes = {
-  /** Defines the cell type to be an action - used for the delete cell. */
-  action: _propTypes.default.bool,
-
-  /** Defines the alignment of the cell (eg "left", "center" or "right"). */
-  align: _propTypes.default.oneOf(["center", "left", "right"]),
-
-  /** Defines the height of a cell used to size an input for example */
-  size: _propTypes.default.oneOf(["compact", "small", "medium", "large"]),
-
-  /** Used to toggle the input wrapper height. */
-  isTextArea: _propTypes.default.bool
-};
-StyledTableCell.defaultProps = {
-  theme: _base.default,
-  align: "left"
-};
-var _default = StyledTableCell;
-exports.default = _default;

package/lib/components/table/table-header/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _tableHeader.default;
-  }
-});
-
-var _tableHeader = _interopRequireDefault(require("./table-header.component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/table/table-header/table-header.component.js

@@ -1,282 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _tableHeader = _interopRequireDefault(require("./table-header.style"));
-
-var _icon = _interopRequireDefault(require("../../icon"));
-
-var _ether = require("../../../__internal__/utils/ether");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-/**
- * A TableHeader widget.
- *
- * == How to use a TableHeader in a component:
- *
- * See documentation for Table component.
- *
- * You can set a property of 'align' which should be a string. This will
- * align the content to either "left", "center" or "right".
- *
- * == Sortable Columns:
- *
- * To make a column sortable, pass a prop of 'sortable={ true }' to the corresponding
- * TableHeader.
- * Sortable columns also require a 'name' prop which must correspond to the database key.
- *
- * You can also provide a custom sortOrder - 'asc' (ascending) or 'desc' (descending).
- * By Default columns are sorted in ascending order.
- *
- * See the Table documentation for more information on hooking up a change handler
- * to setup sort functionality in your app.
- */
-let TableHeader = /*#__PURE__*/function (_React$Component) {
-  _inherits(TableHeader, _React$Component);
-
-  var _super = _createSuper(TableHeader);
-
-  function TableHeader(...args) {
-    var _this;
-
-    _classCallCheck(this, TableHeader);
-
-    _this = _super.call(this, ...args);
-
-    _defineProperty(_assertThisInitialized(_this), "emitSortEvent", () => {
-      let sortOrder = _this.context.sortOrder || "desc"; // If this is the current sorted column. flip order
-
-      if (_this.sorted) {
-        sortOrder = _this.context.sortOrder === "asc" ? "desc" : "asc";
-      }
-
-      _this.context.onSort(_this.props.name, sortOrder);
-    });
-
-    return _this;
-  }
-
-  _createClass(TableHeader, [{
-    key: "onSortableColumnClick",
-    value:
-    /**
-     * Event handler for clicks on the <a> tag used for activating
-     * column sorting.
-     *
-     * Used to prevent the default action of the <a> tag.
-     */
-    function onSortableColumnClick(event) {
-      event.preventDefault();
-    }
-    /**
-     * Returns props to be used on the TH element.
-     */
-
-  }, {
-    key: "tableHeaderProps",
-    get: function () {
-      const {
-        children,
-        ...props
-      } = (0, _ether.validProps)(this);
-      if (this.props.sortable) props.onClick = this.emitSortEvent;
-      return props;
-    }
-  }, {
-    key: "isCurrentSortedColumn",
-    get: function () {
-      return this.props.sortable && this.props.name === this.context.sortedColumn;
-    }
-    /**
-     * Returns sort icon HTML if column is sortable and has been sorted.
-     */
-
-  }, {
-    key: "sortIconHTML",
-    get: function () {
-      if (this.sorted) {
-        const type = this.context.sortOrder === "desc" ? "sort_down" : "sort_up";
-        return /*#__PURE__*/_react.default.createElement(_icon.default, {
-          type: type
-        });
-      }
-
-      return null;
-    }
-    /**
-     * Determines if this column is currently sorted.
-     */
-
-  }, {
-    key: "sorted",
-    get: function () {
-      return this.props.sortable && this.context.sortedColumn === this.props.name;
-    }
-    /**
-     * Returns descriptive text to describe the sortable column, and about
-     * what will happen when they next attempt to sort the column i.e. which
-     * direction it will sort in.
-     *
-     * NB If the current sortOrder is undefined, assume the next sort order
-     */
-
-  }, {
-    key: "sortDescription",
-    get: function () {
-      if (!this.props.sortable) {
-        return null;
-      }
-
-      const currentSortOrder = this.context.sortOrder;
-      let nextSortOrder = null;
-      let currentSortDescription = null;
-
-      if (currentSortOrder) {
-        nextSortOrder = currentSortOrder === "asc" ? "descending" : "ascending";
-        currentSortDescription = `sorted ${currentSortOrder === "desc" ? "descending" : "ascending"}, `;
-      } else {
-        nextSortOrder = "descending";
-        currentSortDescription = "";
-      }
-
-      return `Sortable column, ${currentSortDescription}activate to sort column ${nextSortOrder}`;
-    }
-  }, {
-    key: "ariaAttributes",
-    value: function ariaAttributes() {
-      const aria = {};
-
-      if (this.context.sortOrder && this.isCurrentSortedColumn) {
-        aria["aria-sort"] = this.context.sortOrder === "asc" ? "ascending" : "descending";
-      }
-
-      return aria;
-    }
-    /**
-     * Emits sort event to parent context - table.
-     */
-
-  }, {
-    key: "componentTags",
-    value: function componentTags(props) {
-      return {
-        "data-component": "table-header",
-        "data-element": props["data-element"],
-        "data-role": props["data-role"]
-      };
-    }
-  }, {
-    key: "styledComponent",
-    value: function styledComponent() {
-      return this.props.styledComponent || _tableHeader.default;
-    }
-    /**
-     * Renders the component.
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      let contents = null;
-
-      if (this.props.sortable) {
-        const sortOrder = this.context.sortOrder === "asc" ? "desc" : "asc";
-        contents = /*#__PURE__*/_react.default.createElement("a", {
-          href: `#sort-${sortOrder}`,
-          "aria-label": this.sortDescription,
-          onClick: this.onSortableColumnClick
-        }, this.props.children, this.sortIconHTML);
-      } else {
-        contents = this.props.children;
-      }
-
-      const additionalProps = {
-        align: this.props.align,
-        sortable: this.props.sortable
-      };
-      if (/^\d+$/.test(this.props.width)) additionalProps.width = this.props.width;
-      return /*#__PURE__*/_react.default.createElement(this.styledComponent(), { ...this.componentTags(this.props),
-        ...this.tableHeaderProps,
-        ...this.ariaAttributes(),
-        ...additionalProps
-      }, contents);
-    }
-  }]);
-
-  return TableHeader;
-}(_react.default.Component);
-
-TableHeader.propTypes = {
-  /** Aligns the content of the cell (can be "left", "center" or "right"). */
-  align: _propTypes.default.oneOf(["center", "left", "right"]),
-
-  /** The body of the content component. */
-  children: _propTypes.default.node,
-
-  /** Name of the column to sort. Should correspond to name in database. */
-  name(props, propName) {
-    if (props.sortable) {
-      if (!props[propName]) {
-        throw new Error("Sortable columns require a prop of name of type String");
-      }
-
-      if (typeof props[propName] !== "string") {
-        throw new Error("name must be a string");
-      }
-    }
-  },
-
-  /** Whether column is sortable. */
-  sortable: _propTypes.default.bool,
-
-  /** Whether component is a subheader. */
-  styledComponent: _propTypes.default.node,
-
-  /** A width value to constrain a column eg 250. */
-  width: _propTypes.default.string
-};
-TableHeader.defaultProps = {
-  children: null,
-  name: "",
-  sortable: false,
-  align: "left"
-};
-/** Sort handler passed from table context  */
-
-TableHeader.contextTypes = {
-  onSort: _propTypes.default.func,
-  sortedColumn: _propTypes.default.string,
-  sortOrder: _propTypes.default.string
-};
-var _default = TableHeader;
-exports.default = _default;

package/lib/components/table/table-header/table-header.style.js

@@ -1,116 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
-
-var _icon = _interopRequireDefault(require("../../icon/icon.style"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const StyledTableHeader = _styledComponents.default.th`
-  ${({
-  align,
-  sortable,
-  theme,
-  width
-}) => {
-  const {
-    table,
-    colors
-  } = theme;
-  return (0, _styledComponents.css)`
-      background-color: ${table.header};
-      border-width: 0;
-      border-bottom: 1px solid ${table.secondary};
-      border-left: 1px solid ${colors.border};
-      box-sizing: border-box;
-      color: ${colors.white};
-      font-weight: 700;
-      outline: medium none;
-      padding: 0 8px;
-      position: relative;
-      text-align: ${align};
-      text-overflow: ellipsis;
-      user-select: none;
-      vertical-align: middle;
-      white-space: nowrap;
-
-      &:first-child {
-        border-left: none;
-      }
-
-      ${width && (0, _styledComponents.css)`
-        width: ${width}px;
-      `}
-
-      ${sortable && applySortableStyling(align, colors, table)}
-    `;
-}}
-`;
-
-function applySortableStyling(align, colors, table) {
-  return (0, _styledComponents.css)`
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${table.tertiary};
-    }
-
-    ${_icon.default} {
-      color: ${colors.white};
-    }
-
-    a {
-      &:link,
-      &:visited,
-      &:hover,
-      &:active {
-        color: ${colors.white};
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        line-height: 16px;
-        height: 24px;
-      }
-
-      span {
-        float: ${align === "right" ? "left" : "right"};
-
-        .carbon-icon__svg--sort-down,
-        .carbon-icon__svg--sort-up {
-          height: 11px;
-          width: 10px;
-        }
-      }
-    }
-  `;
-}
-
-StyledTableHeader.propTypes = {
-  /** Sets the alignment from the content */
-  align: _propTypes.default.oneOf(["center", "left", "right"]),
-
-  /** Toggles whether column is sortable */
-  sortable: _propTypes.default.bool,
-
-  /** Width to set column to. */
-  width: _propTypes.default.string
-};
-StyledTableHeader.defaultProps = {
-  theme: _base.default,
-  align: "left"
-};
-var _default = StyledTableHeader;
-exports.default = _default;

package/lib/components/table/table-modern.style.js

@@ -1,110 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.applyModernTableStyling = applyModernTableStyling;
-exports.applyModernInternalStyling = applyModernInternalStyling;
-
-var _styledComponents = require("styled-components");
-
-var _tableCell = _interopRequireDefault(require("./table-cell/table-cell.style"));
-
-var _tableHeader = _interopRequireDefault(require("./table-header/table-header.style"));
-
-var _tableRow = _interopRequireDefault(require("./table-row/table-row.style"));
-
-var _tableSizes = _interopRequireDefault(require("./table-sizes.style"));
-
-var _icon = _interopRequireDefault(require("../icon/icon.style"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function convertTableType(type) {
-  if (["primary", "secondary", "tertiary"].includes(type)) return type;
-  if (type === "transparent") return "tertiary";
-  if (type === "light") return "secondary";
-  return "primary";
-}
-
-function applyModernInternalStyling({
-  tableType,
-  theme
-}) {
-  const type = convertTableType(tableType);
-  return (0, _styledComponents.css)`
-    background-color: transparent;
-    border: 1px solid
-      ${type === "tertiary" ? "transparent" : theme.table.secondary};
-  `;
-}
-
-function applyModernTableStyling({
-  tableType,
-  theme,
-  isZebra,
-  size
-}) {
-  const type = convertTableType(tableType);
-  const {
-    table
-  } = theme;
-  const {
-    height,
-    fontSize,
-    paddingSize
-  } = _tableSizes.default[size];
-  return (0, _styledComponents.css)`
-    background-color: ${type === "tertiary" ? "transparent" : theme.colors.white};
-    & ${_tableRow.default} {
-      height: ${height};
-      ${_tableCell.default}, ${_tableHeader.default} {
-        font-size: ${fontSize};
-        padding-left: ${paddingSize};
-        padding-right: ${paddingSize};
-      }
-
-      ${isZebra && `
-        &:nth-child(2n) {
-          ${_tableCell.default} {
-            background-color: ${table.zebra};
-          }
-        }
-        :hover ${_tableCell.default} {
-          background-color: ${table.primary};
-        }
-      `}
-      &:hover ${_tableCell.default} {
-        background-color: ${table.primary};
-      }
-    }
-    ${type !== "primary" && additionalThemeStyling(type, theme)}
-  `;
-}
-
-function additionalThemeStyling(type, {
-  text,
-  table,
-  colors
-}) {
-  return (0, _styledComponents.css)`
-    ${type === "tertiary" ? "border-color: transparent;" : ""}
-    ${_tableCell.default} {
-      background-color: ${colors.white};
-    }
-
-    ${_tableHeader.default} {
-      background-color: ${type === "secondary" ? table.secondary : "transparent"};
-      ${type === "tertiary" ? "border-left-color: transparent;" : ""}
-      color: ${text.color};
-
-      ${_icon.default},
-      a:link,
-      a:visited,
-      a:hover,
-      a:active {
-        color: ${text.color};
-      }
-    }
-  `;
-}

package/lib/components/table/table-row/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _tableRow.default;
-  }
-});
-
-var _tableRow = _interopRequireDefault(require("./table-row.component"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }