@oc-digital/react-component-library 5.2.0-beta.9 → 6.0.0-beta.10

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

@@ -70,8 +70,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;

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

@@ -1,15 +1,18 @@
-/// <reference types="react" />
+import { PureComponent } from "react";
 export interface ITableTextInputProps {
     name?: string;
     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 class TableTextInput extends PureComponent<ITableTextInputProps> {
+    render(): JSX.Element;
 }
-export declare const TableTextInput: ({ name, value, onChange, onBlur, prefix, suffix, textAlign, numberField, fixedDecimalScale, error, disabled, }: ITableTextInputProps) => JSX.Element;

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

@@ -1,6 +1,13 @@
+/**
+ * Optimised for TableTextField.
+ *
+ * Instead of accepting a HTMLElement, which would require a re-render to get the correct width,
+ * this function is oprimised to accept only the text and max width.
+ */
+export declare function getTableTextInputTextWidth(text: string, maxWidth?: number): string;
 /**
  * Calculates the width of a given string in pixels (perfect result)
  *
  * 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/EditableTable/defaultCells.d.ts

@@ -10,6 +10,7 @@ interface INonEditableField extends Pick<IEssentialRenderFnProps, "numberField"
     styling?: string;
     inputStyling?: string;
     widthOverride?: string | undefined;
+    fullWidth?: boolean;
 }
 export declare const NonEditableField: React.FC<INonEditableField>;
 interface ITableSelect extends IEssentialRenderFnProps {

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;
+  }
+}