@oc-digital/react-component-library 5.2.0-beta.8 → 6.0.0-beta.1

package/build/EditableTable/EditableTable.types.d.ts

@@ -1,7 +1,6 @@
 import { CellProps, HeaderGroup, Row, TableBodyPropGetter, TableBodyProps, TablePropGetter, TableProps } from "react-table";
 import { SchemaOf } from "yup";
 import React from "react";
-import { VirtualItem } from "react-virtual/types";
 export type IAlignment = "left" | "right" | "inherit" | "center" | "justify";
 export type RowData = {
     [key: string]: any;
@@ -70,8 +69,8 @@ export interface IEssentialRenderFnProps {
     value: TableCellValues;
     onChange: (e: any) => void;
     onBlur: any;
-    prefix?: React.ReactNode | React.JSXElementConstructor<any>;
-    suffix?: React.ReactNode | React.JSXElementConstructor<any>;
+    prefix?: React.ReactNode | React.JSXElementConstructor<any> | Element;
+    suffix?: React.ReactNode | React.JSXElementConstructor<any> | Element;
     numberField?: boolean;
     textAlign?: IAlignment;
     fixedDecimalScale?: boolean;
@@ -92,9 +91,6 @@ export interface ITableContentProps extends Pick<IEditableTableProps, "disabled"
     rowsToRender: Row<RowData>[];
     disabled: boolean;
     includeRowSelect: boolean;
-    paddingTop: number;
-    paddingBottom: number;
-    virtualRows: VirtualItem[];
     isAllRowsSelected: boolean;
     selectedFlatRows: Row<RowData>[];
 }

package/build/EditableTable/components/TableTextInput.d.ts

@@ -4,12 +4,13 @@ export interface ITableTextInputProps {
     value: string | number | null | undefined;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    prefix?: string | JSX.Element | null;
-    suffix?: string | JSX.Element | null;
-    textAlign?: "left" | "right" | "center";
+    prefix?: string | React.ReactElement | JSX.Element | null;
+    suffix?: string | React.ReactElement | JSX.Element | null;
+    textAlign?: "start" | "end" | "left" | "right" | "center" | "justify" | "match-parent" | "inherit";
     numberField?: boolean;
     fixedDecimalScale?: boolean;
     error?: string | false;
     disabled?: boolean;
+    fullWidth?: boolean;
 }
-export declare const TableTextInput: ({ name, value, onChange, onBlur, prefix, suffix, textAlign, numberField, fixedDecimalScale, error, disabled, }: ITableTextInputProps) => JSX.Element;
+export declare const TableTextInput: ({ name, value, onChange, onBlur, prefix, suffix, textAlign, numberField, fixedDecimalScale, error, disabled, fullWidth, }: ITableTextInputProps) => JSX.Element;

package/build/EditableTable/components/utils/getTextWidth.d.ts

@@ -3,4 +3,4 @@
  *
  * When using this to size inputs, the input must have CSS box-sizing: content-box
  */
-export declare function getTextWidth(text: string, element: HTMLElement): string;
+export declare function getTextWidth(text: string, element: HTMLElement, maxWidth?: number): string;

package/build/TextField/TextField.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-import { NumberFormatProps } from "react-number-format";
+import { NumericFormatProps } from "react-number-format";
 import { ITextFieldProps } from "./TextField.types";
 declare const TextField: React.FC<ITextFieldProps>;
 export default TextField;
-interface INumberFormatProps extends Omit<NumberFormatProps, "onChange"> {
+interface INumberFormatProps extends Omit<NumericFormatProps, "onChange"> {
     onChange: (event: {
         target: {
             name: string;

package/build/assets/index-DCUzKTQq.css

@@ -0,0 +1,78 @@
+.input {
+  background: transparent;
+  border: 0;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  transition: border-bottom 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    margin-top 200ms cubic-bezier(0.4, 0, 0.2, 1) 0m;
+  margin-top: 0;
+  min-width: 3ch;
+  max-width: 20ch;
+  box-sizing: content-box;
+
+  &:hover {
+    border-bottom: 1px solid rgb(158, 158, 158);
+    margin-top: 1px;
+  }
+
+  &:focus {
+    outline: none;
+    border-bottom: 2px solid rgb(115, 196, 202);
+    margin-top: 2px;
+  }
+
+  &[data-valid="false"] {
+    border-bottom-color: #d32f2f !important;
+  }
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  width: fit-content;
+  margin: auto;
+}
+
+.error {
+  color: #d32f2f;
+  display: block;
+  text-align: center;
+}
+
+.checkbox {
+  accent-color: rgb(115, 196, 202);
+  margin: 0;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  border-radius: 5rem;
+  width: 38px;
+  height: 38px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  &:active {
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+
+.disabled.label {
+  &:hover {
+    background: unset;
+  }
+
+  &:active {
+    background: unset;
+  }
+}