@oc-digital/react-component-library 5.2.0-beta.4 → 5.2.0-beta.40

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

@@ -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/styled/Input.d.ts

@@ -3,3 +3,19 @@ export declare const Input: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const NumericFormatInput: import("@emotion/styled").StyledComponent<import("react-number-format/types/types").InternalNumberFormatBase & {
+    thousandSeparator?: string | boolean | undefined;
+    decimalSeparator?: string | undefined;
+    allowedDecimalSeparators?: string[] | undefined;
+    thousandsGroupStyle?: "none" | "thousand" | "lakh" | "wan" | undefined;
+    decimalScale?: number | undefined;
+    fixedDecimalScale?: boolean | undefined;
+    allowNegative?: boolean | undefined;
+    allowLeadingZeros?: boolean | undefined;
+    suffix?: string | undefined;
+    prefix?: string | undefined;
+} & Omit<import("react-number-format").InputAttributes, never> & Omit<unknown, "defaultValue" | "value" | "type" | "onChange" | "prefix" | "inputMode" | "onFocus" | "onBlur" | "onKeyDown" | "onMouseUp" | "ref" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "isCharacterSame" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
+    customInput?: import("react").ComponentType<unknown> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

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