carbon-react 111.8.5 → 111.9.1

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

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

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

@@ -8,6 +8,9 @@ import { baseTheme } from "../../style/themes";
 import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
 import cellSizes from "./cell-sizes.style";
 import Box from "../box";
+const HEADER_OVERLAY_INCREMENT = 3;
+const STICKY_FOOTER_OVERLAY_INCREMENT = 1;
+const ROW_HEADER_OVERLAY_INCREMENT = 5;
 const StyledTableContainer = styled.div`
   ${({
   width,
@@ -15,7 +18,7 @@ const StyledTableContainer = styled.div`
 }) => width && css`
       width: ${width};
 
-      ${overflowX && `overflow-x: ${overflowX}`}
+      ${overflowX && `overflow-x: ${overflowX};`}
     `}
 `;
 const StyledFlatTable = styled.table`
@@ -112,34 +115,49 @@ const StyledFlatTableWrapper = styled(Box)`
     case "light":
       return css`
           ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
             background-color: var(--colorsUtilityMajor100);
             border-right: 1px solid var(--colorsUtilityMajor150);
             border-bottom-color: var(--colorsUtilityMajor150);
           }
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor100);
+            border-bottom-color: var(--colorsUtilityMajor150);
+            border-right-color: var(--colorsUtilityMajor150);
+            border-left-color: var(--colorsUtilityMajor150);
+          }
         `;
 
     case "transparent-base":
       return css`
           ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
             background-color: var(--colorsUtilityMajor025);
             border-right: 1px solid var(--colorsUtilityMajor025);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor025);
+            border-bottom-color: var(--colorsUtilityMajor100);
+            border-right-color: var(--colorsUtilityMajor025);
+            border-left-color: var(--colorsUtilityMajor025);
+          }
         `;
 
     case "transparent-white":
       return css`
           ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
             background-color: var(--colorsUtilityYang100);
             border-right: 1px solid var(--colorsUtilityYang100);
             border-bottom-color: var(--colorsUtilityMajor100);
           }
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor100);
+            border-right-color: var(--colorsUtilityYang100);
+            border-left-color: var(--colorsUtilityYang100);
+          }
         `;
     // default theme is "dark"
 
@@ -147,12 +165,19 @@ const StyledFlatTableWrapper = styled(Box)`
       return css`
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox},
           ${StyledFlatTableHeader},
-          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
+          ${StyledFlatTableHead} {
             background-color: var(--colorsUtilityMajor400);
             border-right: 1px solid var(--colorsUtilityMajor300);
             color: var(--colorsUtilityYang100);
             border-bottom-color: var(--colorsUtilityMajor300);
           }
+          ${StyledFlatTableHead} ${StyledFlatTableRowHeader} {
+            background-color: var(--colorsUtilityMajor400);
+            color: var(--colorsUtilityYang100);
+            border-bottom-color: var(--colorsUtilityMajor300);
+            border-right-color: var(--colorsUtilityMajor300);
+            border-left-color: var(--colorsUtilityMajor300);
+          }
         `;
   }
 }}
@@ -170,35 +195,59 @@ const StyledFlatTableWrapper = styled(Box)`
     `}
 
   ${({
-  hasStickyHead
+  hasStickyHead,
+  theme
 }) => hasStickyHead && css`
-      ${StyledFlatTableHead} th {
+      ${StyledFlatTableHead} {
         position: sticky;
-        z-index: ${({
-  theme
-}) => theme.zIndex.overlay};
-      }
-
-      ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
-      ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
-        z-index: ${({
-  theme
-}) => theme.zIndex.overlay + 2};
         top: 0;
         left: 0;
+        z-index: ${theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT};
       }
     `}
+
+  ${StyledFlatTableHead} ${StyledFlatTableRowHeader},
+  ${StyledFlatTableHeader}.isSticky,
+  ${StyledFlatTableHead} ${StyledFlatTableCheckbox}.isSticky {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay + ROW_HEADER_OVERLAY_INCREMENT};
+  }
+
+  thead ${StyledFlatTableHeader}.isSticky, ${StyledFlatTableCheckbox}.isSticky {
+    border-right: none;
+  }
+
+  ${StyledFlatTableHeader}, ${StyledFlatTableCheckbox} {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay + HEADER_OVERLAY_INCREMENT};
+  }
+
+  tbody
+    ${StyledFlatTableRowHeader},
+    ${StyledFlatTableCell}.isSticky,
+    tbody
+    ${StyledFlatTableCheckbox}.isSticky {
+    z-index: ${({
+  theme
+}) => theme.zIndex.overlay};
+  }
 `;
 StyledFlatTableWrapper.defaultProps = {
   theme: baseTheme
 };
 const StyledFlatTableFooter = styled.div`
   ${({
-  hasStickyFooter
+  hasStickyFooter,
+  theme
 }) => hasStickyFooter && css`
       position: sticky;
       bottom: 0px;
-      z-index: ${baseTheme.zIndex.overlay + 1};
+      z-index: ${theme.zIndex.overlay + STICKY_FOOTER_OVERLAY_INCREMENT};
     `}
 `;
+StyledFlatTableFooter.defaultProps = {
+  theme: baseTheme
+};
 export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer };

package/esm/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;