carbon-react 104.34.0 → 104.36.0

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -0,0 +1,305 @@
+import styled, { css } from "styled-components";
+import { baseTheme } from "../../../style/themes";
+import { StyledFlatTableCell } from "../flat-table-cell/flat-table-cell.style";
+import { StyledFlatTableRowHeader } from "../flat-table-row-header/flat-table-row-header.style";
+import StyledFlatTableCheckbox from "../flat-table-checkbox/flat-table-checkbox.style";
+import StyledFlatTableHeader from "../flat-table-header/flat-table-header.style";
+import StyledIcon from "../../icon/icon.style";
+import { toColor } from "../../../style/utils/color";
+const horizontalBorderSizes = {
+  medium: "2px",
+  large: "4px"
+};
+
+const stickyColumnFocusStyling = (index, theme) => {
+  return `
+    border-bottom: 1px solid transparent;
+    border-left: 1px solid
+      ${index === 0 ? "var(--colorsSemanticFocus500)" : "var(--colorsUtilityMajor100)"};
+    background-clip: padding-box;
+    z-index: ${theme.zIndex.overlay + 2};
+
+    :before {
+      content: "";
+      border-top: 2px solid var(--colorsSemanticFocus500);
+      border-bottom: 2px solid var(--colorsSemanticFocus500);
+      display: block;
+      left: 0px;
+      top: -1px;
+      height: calc(100% - 1px);
+      width: 101%;
+      position: absolute;
+      z-index: ${theme.zIndex.overlay};
+    }
+  `;
+};
+
+const borderColor = colorTheme => {
+  switch (colorTheme) {
+    case "light":
+      return "var(--colorsUtilityMajor100)";
+
+    case "transparent-base":
+      return "var(--colorsUtilityMajor025)";
+
+    case "transparent-white":
+      return "var(--colorsUtilityYang100)";
+    // default theme is "dark"
+
+    default:
+      return "var(--colorsUtilityMajor400)";
+  }
+};
+
+const StyledFlatTableRow = styled.tr`
+  ${({
+  bgColor,
+  horizontalBorderColor,
+  horizontalBorderSize,
+  stickyOffset,
+  isRowInteractive,
+  isFirstColumnInteractive,
+  rowHeaderIndex,
+  firstCellIndex,
+  colorTheme,
+  expandable,
+  selected,
+  highlighted,
+  isExpanded,
+  isInSidebar,
+  isSubRow,
+  isFirstSubRow,
+  size,
+  theme,
+  applyBorderLeft,
+  isDragging,
+  draggable
+}) => {
+  const backgroundColor = bgColor ? toColor(theme, bgColor) : undefined;
+  const customBorderColor = horizontalBorderColor ? toColor(theme, horizontalBorderColor) : undefined;
+  const colorOfSelected = isInSidebar ? "var(--colorsUtilityMajor150)" : "var(--colorsUtilityMajor075)";
+  const colorOfHighlighted = isInSidebar ? "var(--colorsUtilityMajor100)" : "var(--colorsUtilityMajor050)";
+  const allCellTypes = `${StyledFlatTableRowHeader}, ${StyledFlatTableCell}, ${StyledFlatTableCheckbox}`;
+  return css`
+      border-collapse: separate;
+      border-radius: 0px;
+      border-spacing: 0;
+      min-width: 100%;
+      table-layout: fixed;
+      width: auto;
+      outline: 2px solid #0000;
+
+      [data-component="icon"] {
+        color: var(--colorsActionMinor500);
+      }
+
+      ${allCellTypes} {
+        ${backgroundColor && `background-color: ${backgroundColor};`}
+
+        ${horizontalBorderSize !== "small" && css`
+          border-bottom: ${horizontalBorderSizes[horizontalBorderSize]} solid
+            var(--colorsUtilityMajor100);
+        `}
+
+        ${customBorderColor && css`
+          border-bottom-color: ${customBorderColor};
+        `}
+      }
+
+      ${StyledFlatTableHeader} {
+        border-bottom: 1px solid ${borderColor(colorTheme)};
+
+        ${!isInSidebar && `
+          :first-child {
+            border-left: 1px solid ${borderColor(colorTheme)};
+          }
+        `}
+      }
+
+      ${stickyOffset > 0 && css`
+        && th {
+          top: ${stickyOffset}px;
+        }
+      `}
+
+      ${isRowInteractive && css`
+        cursor: pointer;
+
+        :focus {
+          outline: 2px solid var(--colorsSemanticFocus500);
+          outline-offset: -1px;
+
+          ${StyledFlatTableRowHeader} {
+            ${stickyColumnFocusStyling(rowHeaderIndex, theme)}
+          }
+
+          ${![-1, 0].includes(rowHeaderIndex) && css`
+            ${Array.from({
+    length: rowHeaderIndex
+  }).map((_, index) => {
+    return `
+                td:nth-of-type(${index + 1}) {
+                  ${stickyColumnFocusStyling(index, theme)}
+                }
+              `;
+  })}
+          `}
+        }
+
+        :hover {
+          ${allCellTypes} {
+            background-color: ${backgroundColor || "var(--colorsUtilityMajor025)"};
+          }
+        }
+      `}
+
+      ${isFirstColumnInteractive && css`
+        td:nth-child(${firstCellIndex + 1}),
+        th:nth-child(${firstCellIndex + 1}) {
+          cursor: pointer;
+
+          :focus {
+            outline: 2px solid var(--colorsSemanticFocus500);
+            outline-offset: -1px;
+          }
+
+          :hover {
+            background-color: ${backgroundColor || "var(colorsUtilityMajor025)"};
+          }
+        }
+      `}
+
+      ${![-1, 0].includes(rowHeaderIndex) && css`
+        td:nth-of-type(${rowHeaderIndex + 1}) {
+          border-left: 1px solid
+            ${customBorderColor || "var(--colorsUtilityMajor100)"};
+        }
+
+        th:nth-of-type(${rowHeaderIndex + 2}) {
+          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
+        }
+      `}
+
+      ${applyBorderLeft && css`
+        th:first-of-type {
+          border-left: 1px solid ${customBorderColor || borderColor(colorTheme)};
+        }
+      `}
+
+      ${isInSidebar && css`
+        ${allCellTypes} {
+          background-color: ${bgColor || "var(--colorsUtilityMajor040)"};
+          };
+        }
+
+        ${StyledFlatTableHeader} {
+          background-color: var(--colorsUtilityMajor040);
+          border-bottom-color: var(--colorsUtilityMajor100);
+        }
+
+        td:first-of-type,
+        th:first-of-type {
+          border-left: none;
+        }
+
+        td:last-of-type {
+          border-right: none;
+        }
+
+        ${StyledFlatTableCheckbox} {
+          border-right: 1px solid ${colorOfHighlighted};
+        }
+
+        ${isRowInteractive && css`
+            :hover {
+              ${StyledFlatTableCell},
+              ${StyledFlatTableCheckbox}:not(th) {
+                background-color: ${backgroundColor || "var(--colorsUtilityMajor075)"};
+              }
+            }
+          `}
+      `}
+
+      ${expandable && css`
+        ${StyledFlatTableCell}:first-child > div,
+        ${StyledFlatTableRowHeader}:first-child > div,
+        ${StyledFlatTableCheckbox} + ${StyledFlatTableCell} > div {
+          ${StyledIcon}[type="chevron_down_thick"]:first-of-type {
+            transition: transform 0.3s;
+            ${!isExpanded && css`
+              transform: rotate(-90deg);
+            `}
+          }
+        }
+      `}
+
+      ${isSubRow && css`
+        ${allCellTypes} {
+          background-color: ${backgroundColor || "var(--colorsActionMinor025)"};
+        }
+
+        ${StyledFlatTableCell}:first-child > div,
+        ${StyledFlatTableRowHeader}:first-child > div,
+        ${StyledFlatTableCheckbox} + ${StyledFlatTableCell} > div {
+          padding-left: ${size === "compact" ? "32px" : "40px"};
+        }
+      `}
+
+      ${isDragging && css`
+        border: ${isInSidebar ? "var(--colorsUtilityMajor300)" : "var(--colorsUtilityMajor200)"}
+          2px solid;
+        cursor: grabbing;
+        ${allCellTypes} {
+          background-color: ${isInSidebar ? "var(--colorsUtilityMajor200)" : "var(--colorsUtilityMajor150)"};
+        }
+      `}
+
+      ${draggable && css`
+        ${StyledIcon}:first-of-type {
+          font-size: 16px;
+          color: var(--colorsActionMinor500);
+        }
+      `}
+
+      ${isFirstSubRow && css`
+        ${allCellTypes} {
+          box-shadow: var(--boxShadow075);
+        }
+      `}
+
+      ${highlighted && css`
+        ${allCellTypes} {
+          background-color: ${backgroundColor || colorOfHighlighted};
+        }
+
+        :hover {
+          ${StyledFlatTableCell},
+          ${StyledFlatTableRowHeader},
+          ${StyledFlatTableCheckbox}:not(th) {
+            background-color: ${backgroundColor || colorOfHighlighted};
+          }
+        }
+      `}
+
+      ${selected && css`
+        ${StyledFlatTableCell},
+        ${StyledFlatTableCheckbox} {
+          background-color: ${backgroundColor || colorOfSelected};
+        }
+
+        :hover {
+          ${StyledFlatTableCell},
+          ${StyledFlatTableRowHeader},
+          ${StyledFlatTableCheckbox}:not(th) {
+            background-color: ${backgroundColor || colorOfSelected};
+          }
+        }
+      `}
+    `;
+}}
+`;
+StyledFlatTableRow.defaultProps = {
+  theme: baseTheme,
+  horizontalBorderSize: "small"
+};
+export default StyledFlatTableRow;

package/esm/components/flat-table/flat-table-row/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-row";
+export * from "./flat-table-row";

package/esm/components/flat-table/flat-table-row/index.js

@@ -0,0 +1 @@
+export { default } from "./flat-table-row.component";

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts

@@ -0,0 +1,30 @@
+export default FlatTableRowHeader;
+declare function FlatTableRowHeader({ align, children, width, py, px, expandable, onClick, onKeyDown, leftPosition, truncate, title, ...rest }: {
+    [x: string]: any;
+    align?: string | undefined;
+    children: any;
+    width: any;
+    py: any;
+    px: any;
+    expandable?: boolean | undefined;
+    onClick: any;
+    onKeyDown: any;
+    leftPosition: any;
+    truncate: any;
+    title: any;
+}): JSX.Element;
+declare namespace FlatTableRowHeader {
+    namespace propTypes {
+        const align: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const width: PropTypes.Requireable<number>;
+        const truncate: PropTypes.Requireable<boolean>;
+        const title: PropTypes.Requireable<string>;
+        const expandable: PropTypes.Requireable<boolean>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        const verticalBorder: PropTypes.Requireable<string>;
+        const verticalBorderColor: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js

@@ -0,0 +1,88 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
+import Icon from "../../icon";
+import { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent } from "./flat-table-row-header.style";
+const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
+
+const FlatTableRowHeader = ({
+  align = "left",
+  children,
+  width,
+  py,
+  px,
+  expandable = false,
+  onClick,
+  onKeyDown,
+  leftPosition,
+  truncate,
+  title,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(StyledFlatTableRowHeader, _extends({
+    leftPosition: leftPosition || 0,
+    align: align,
+    "data-element": "flat-table-row-header",
+    colWidth: width,
+    py: py || "10px",
+    px: px || 3,
+    onClick: expandable && onClick ? onClick : undefined,
+    tabIndex: expandable && onClick ? 0 : undefined,
+    onKeyDown: expandable && onKeyDown ? onKeyDown : undefined,
+    isTruncated: truncate,
+    expandable: expandable
+  }, rest), /*#__PURE__*/React.createElement(StyledFlatTableRowHeaderContent, {
+    title: truncate && !title && typeof children === "string" ? children : title,
+    expandable: expandable
+  }, expandable && /*#__PURE__*/React.createElement(Icon, {
+    type: "chevron_down_thick",
+    bgSize: "extra-small",
+    mr: "8px"
+  }), children));
+};
+
+FlatTableRowHeader.propTypes = {
+  /** Styled system padding props */
+  ...paddingPropTypes,
+
+  /** Content alignment */
+  align: PropTypes.oneOf(["center", "left", "right"]),
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+
+  /** Column width, pass a number to set a fixed width in pixels */
+  width: PropTypes.number,
+
+  /** Truncate cell content and add ellipsis to any text that overflows */
+  truncate: PropTypes.bool,
+
+  /** Title text to display if cell content truncates */
+  title: PropTypes.string,
+
+  /**
+   * @private
+   * @ignore
+   */
+  expandable: PropTypes.bool,
+
+  /**
+   * @private
+   * @ignore
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * @private
+   * @ignore
+   */
+  onKeyDown: PropTypes.func,
+
+  /** Sets a custom vertical right border */
+  verticalBorder: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** Sets a custom vertical right border */
+  verticalBorderColor: PropTypes.string
+};
+export default FlatTableRowHeader;

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { PaddingProps } from "styled-system";
+import { TableBorderSize } from "..";
+
+export interface FlatTableRowHeaderProps extends PaddingProps {
+  /** Content alignment */
+  align?: string;
+  children?: React.ReactNode | string;
+  /** Column width, pass a number to set a fixed width in pixels */
+  width?: number;
+  /** Truncate cell content and add ellipsis to any text that overflows */
+  truncate?: boolean;
+  /** Title text to display if cell content truncates */
+  title?: string;
+  /** Sets a custom vertical right border */
+  verticalBorder?: TableBorderSize;
+  /** Sets the color of the right border */
+  verticalBorderColor?: string;
+}
+
+declare function FlatTableRowHeader(
+  props: FlatTableRowHeaderProps
+): JSX.Element;
+
+export default FlatTableRowHeader;

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledFlatTableRowHeader: import("styled-components").StyledComponent<"th", any, {}, never>;
+export const StyledFlatTableRowHeaderContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.js

@@ -0,0 +1,83 @@
+import styled, { css } from "styled-components";
+import { padding } from "styled-system";
+import baseTheme from "../../../style/themes/base";
+import { toColor } from "../../../style/utils/color";
+const verticalBorderSizes = {
+  small: "1px",
+  medium: "2px",
+  large: "4px"
+};
+const StyledFlatTableRowHeader = styled.th`
+  ${({
+  align,
+  theme,
+  colWidth,
+  leftPosition,
+  isTruncated,
+  expandable,
+  verticalBorder,
+  verticalBorderColor
+}) => css`
+    background-color: var(--colorsUtilityYang100);
+    border: 1px solid var(--colorsUtilityMajor100);
+    border-top: none;
+    box-sizing: border-box;
+    left: 0;
+    font-weight: normal;
+    position: sticky;
+    text-align: ${align};
+    top: auto;
+    vertical-align: middle;
+    padding: 0;
+    z-index: ${baseTheme.zIndex.overlay};
+
+    ${colWidth && css`
+      width: ${colWidth}px;
+    `}
+
+    &&&& {
+      > div {
+        box-sizing: border-box;
+
+        ${isTruncated && css`
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        `}
+
+        ${colWidth && css`
+          width: ${colWidth}px;
+        `}
+ 
+        ${padding}
+      }
+
+      left: ${leftPosition}px;
+
+      ${verticalBorder && css`
+        border-right-width: ${verticalBorderSizes[verticalBorder]};
+      `}
+
+      ${verticalBorderColor && css`
+        border-right-color: ${toColor(theme, verticalBorderColor)};
+      `}
+    }
+
+    ${expandable && css`
+      white-space: nowrap;
+    `}
+  `}
+`;
+StyledFlatTableRowHeader.defaultProps = {
+  theme: baseTheme
+};
+const StyledFlatTableRowHeaderContent = styled.div`
+  ${({
+  expandable
+}) => expandable && css`
+      display: flex;
+      align-items: center;
+      line-height: 1em;
+    `}
+`;
+export { StyledFlatTableRowHeader, StyledFlatTableRowHeaderContent };

package/esm/components/flat-table/flat-table-row-header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./flat-table-row-header";
+export * from "./flat-table-row-header";

package/esm/components/flat-table/flat-table-row-header/index.js

@@ -0,0 +1 @@
+export { default } from "./flat-table-row-header.component";

package/esm/components/flat-table/flat-table.component.d.ts

@@ -0,0 +1,43 @@
+export const FlatTableThemeContext: React.Context<{}>;
+export default FlatTable;
+import React from "react";
+declare function FlatTable({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, ...rest }: {
+    [x: string]: any;
+    caption: any;
+    children: any;
+    hasStickyHead: any;
+    colorTheme: any;
+    footer: any;
+    hasStickyFooter?: boolean | undefined;
+    height: any;
+    isZebra: any;
+    size: any;
+    hasMaxHeight?: boolean | undefined;
+    ariaDescribedby: any;
+    minHeight: any;
+    overflowX: any;
+}): JSX.Element;
+declare namespace FlatTable {
+    namespace propTypes {
+        const ariaDescribedby: PropTypes.Requireable<string>;
+        const caption: PropTypes.Requireable<string>;
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const hasStickyHead: PropTypes.Requireable<boolean>;
+        const colorTheme: PropTypes.Requireable<string>;
+        const footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const hasStickyFooter: PropTypes.Requireable<boolean>;
+        const height: PropTypes.Requireable<string | number>;
+        const minHeight: PropTypes.Requireable<string | number>;
+        const isZebra: PropTypes.Requireable<boolean>;
+        const size: PropTypes.Requireable<string>;
+        const hasMaxHeight: PropTypes.Requireable<boolean>;
+        const overflowX: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        const colorTheme_1: string;
+        export { colorTheme_1 as colorTheme };
+        const size_1: string;
+        export { size_1 as size };
+    }
+}
+import PropTypes from "prop-types";