carbon-react 111.8.5 → 111.9.1

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

@@ -16,6 +16,8 @@ export interface FlatTableRowHeaderProps extends PaddingProps {
   verticalBorder?: TableBorderSize;
   /** Sets the color of the right border */
   verticalBorderColor?: string;
+  /** Defines whether the column should be sticky on the left or right hand side of the Table */
+  stickyAlignment?: "left" | "right";
 }
 
 declare function FlatTableRowHeader(

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

@@ -30,10 +30,12 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
   theme,
   colWidth,
   leftPosition,
+  rightPosition,
   isTruncated,
   expandable,
   verticalBorder,
-  verticalBorderColor
+  verticalBorderColor,
+  stickyAlignment
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsUtilityYang100);
     border: 1px solid var(--colorsUtilityMajor100);
@@ -69,14 +71,19 @@ const StyledFlatTableRowHeader = _styledComponents.default.th`
         ${_styledSystem.padding}
       }
 
-      left: ${leftPosition}px;
+      ${leftPosition !== undefined && (0, _styledComponents.css)`
+        left: ${leftPosition}px;
+      `}
+      ${rightPosition !== undefined && (0, _styledComponents.css)`
+        right: ${rightPosition}px;
+      `}
 
       ${verticalBorder && (0, _styledComponents.css)`
-        border-right-width: ${verticalBorderSizes[verticalBorder]};
+        border-${stickyAlignment === "right" ? "left" : "right"}-width: ${verticalBorderSizes[verticalBorder]};
       `}
 
       ${verticalBorderColor && (0, _styledComponents.css)`
-        border-right-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
+        border-${stickyAlignment === "right" ? "left" : "right"}-color: ${(0, _color.toColor)(theme, verticalBorderColor)};
       `}
     }
 

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

@@ -31,6 +31,9 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 HEADER_OVERLAY_INCREMENT = 3;
+const STICKY_FOOTER_OVERLAY_INCREMENT = 1;
+const ROW_HEADER_OVERLAY_INCREMENT = 5;
 const StyledTableContainer = _styledComponents.default.div`
   ${({
   width,
@@ -38,7 +41,7 @@ const StyledTableContainer = _styledComponents.default.div`
 }) => width && (0, _styledComponents.css)`
       width: ${width};
 
-      ${overflowX && `overflow-x: ${overflowX}`}
+      ${overflowX && `overflow-x: ${overflowX};`}
     `}
 `;
 exports.StyledTableContainer = StyledTableContainer;
@@ -137,34 +140,49 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
     case "light":
       return (0, _styledComponents.css)`
           ${_flatTableHeader.default},
-          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
             background-color: var(--colorsUtilityMajor100);
             border-right: 1px solid var(--colorsUtilityMajor150);
             border-bottom-color: var(--colorsUtilityMajor150);
           }
+          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor100);
+            border-bottom-color: var(--colorsUtilityMajor150);
+            border-right-color: var(--colorsUtilityMajor150);
+            border-left-color: var(--colorsUtilityMajor150);
+          }
         `;
 
     case "transparent-base":
       return (0, _styledComponents.css)`
           ${_flatTableHeader.default},
-          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
             background-color: var(--colorsUtilityMajor025);
             border-right: 1px solid var(--colorsUtilityMajor025);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
+          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor025);
+            border-bottom-color: var(--colorsUtilityMajor100);
+            border-right-color: var(--colorsUtilityMajor025);
+            border-left-color: var(--colorsUtilityMajor025);
+          }
         `;
 
     case "transparent-white":
       return (0, _styledComponents.css)`
           ${_flatTableHeader.default},
-          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
             background-color: var(--colorsUtilityYang100);
             border-right: 1px solid var(--colorsUtilityYang100);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
+          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor100);
+            border-right-color: var(--colorsUtilityYang100);
+            border-left-color: var(--colorsUtilityYang100);
+          }
         `;
     // default theme is "dark"
 
@@ -172,12 +190,19 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
       return (0, _styledComponents.css)`
           ${_flatTableHead.default} ${_flatTableCheckbox.default},
           ${_flatTableHeader.default},
-          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
+          ${_flatTableHead.default} {
             background-color: var(--colorsUtilityMajor400);
             border-right: 1px solid var(--colorsUtilityMajor300);
             color: var(--colorsUtilityYang100);
             border-bottom-color: var(--colorsUtilityMajor300);
           }
+          ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor400);
+            color: var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor300);
+            border-right-color: var(--colorsUtilityMajor300);
+            border-left-color: var(--colorsUtilityMajor300);
+          }
         `;
   }
 }}
@@ -195,24 +220,44 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
     `}
 
   ${({
-  hasStickyHead
+  hasStickyHead,
+  theme
 }) => hasStickyHead && (0, _styledComponents.css)`
-      ${_flatTableHead.default} th {
+      ${_flatTableHead.default} {
         position: sticky;
-        z-index: ${({
-  theme
-}) => theme.zIndex.overlay};
-      }
-
-      ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
-      ${_flatTableHead.default} ${_flatTableCheckbox.default} {
-        z-index: ${({
-  theme
-}) => theme.zIndex.overlay + 2};
         top: 0;
         left: 0;
+        z-index: ${theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT};
       }
     `}
+
+  ${_flatTableHead.default} ${_flatTableRowHeader.StyledFlatTableRowHeader},
+  ${_flatTableHeader.default}.isSticky,
+  ${_flatTableHead.default} ${_flatTableCheckbox.default}.isSticky {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT};
+  }
+
+  thead ${_flatTableHeader.default}.isSticky, ${_flatTableCheckbox.default}.isSticky {
+    border-right: none;
+  }
+
+  ${_flatTableHeader.default}, ${_flatTableCheckbox.default} {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT};
+  }
+
+  tbody
+    ${_flatTableRowHeader.StyledFlatTableRowHeader},
+    ${_flatTableCell.StyledFlatTableCell}.isSticky,
+    tbody
+    ${_flatTableCheckbox.default}.isSticky {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay};
+  }
 `;
 exports.StyledFlatTableWrapper = StyledFlatTableWrapper;
 StyledFlatTableWrapper.defaultProps = {
@@ -220,11 +265,15 @@ StyledFlatTableWrapper.defaultProps = {
 };
 const StyledFlatTableFooter = _styledComponents.default.div`
   ${({
-  hasStickyFooter
+  hasStickyFooter,
+  theme
 }) => hasStickyFooter && (0, _styledComponents.css)`
       position: sticky;
       bottom: 0px;
-      z-index: ${_themes.baseTheme.zIndex.overlay + 1};
+      z-index: ${theme.zIndex.overlay + STICKY_FOOTER_OVERLAY_INCREMENT};
     `}
 `;
-exports.StyledFlatTableFooter = StyledFlatTableFooter;
+exports.StyledFlatTableFooter = StyledFlatTableFooter;
+StyledFlatTableFooter.defaultProps = {
+  theme: _themes.baseTheme
+};

package/lib/components/grouped-character/grouped-character.component.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { TextboxProps } from "../textbox";
+declare type EventValue = {
+    formattedValue: string;
+    rawValue: string;
+};
+declare type CustomTarget = {
+    name?: string;
+    id?: string;
+    value: EventValue;
+};
+export interface CustomEvent extends Omit<React.ChangeEvent<HTMLInputElement>, "target"> {
+    target: CustomTarget;
+}
+export interface GroupedCharacterProps extends Omit<TextboxProps, "onChange" | "onBlur"> {
+    /** Default input value if component is meant to be used as an uncontrolled component */
+    defaultValue?: string;
+    /** pattern by which input value should be grouped */
+    groups: number[];
+    /** Handler for blur event */
+    onBlur?: (ev: CustomEvent) => void;
+    /** Handler for change event if input is meant to be used as a controlled component */
+    onChange?: (ev: CustomEvent) => void;
+    /** character to be used as separator - has to be a 1 character string */
+    separator: string;
+    /** Input value if component is meant to be used as a controlled component */
+    value?: string;
+}
+export declare const GroupedCharacter: ({ defaultValue, groups, onBlur, onChange, separator: rawSeparator, value: externalValue, ...rest }: GroupedCharacterProps) => JSX.Element;
+export default GroupedCharacter;