@bikdotai/bik-component-library 0.0.13-xx-79 → 0.0.13

package/dist/cjs/components/{QueryBuilder/components/Connectors/Connector.styled.js → dropdown/opennedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js}

@@ -1,6 +1,8 @@
 "use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("styled-components")).default.div`
 	display: flex;
+	padding: 8px 16px;
 	flex-direction: row;
-	gap: 12px;
-	align-items: start;
-`;exports.Container=t;
+	align-items: center;
+	justify-content: end;
+	box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12);
+`;exports.BottomBarContainer=t;

package/dist/cjs/components/dropdown/opennedDropdown/components/searchbox/SearchBox.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../../../input/Input.js"),n=require("../../../../input/context/InputStyleProvider.js"),o=require("../../../../../constants/Theme.js"),i=require("../../../../../assets/icons/cross.svg.js"),s=require("../../../../../assets/icons/search.svg.js");exports.SearchBox=c=>{let{onSearch:u}=c;const a=r.createRef();return e.jsx(n.InputStyleContext.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+o.COLORS.stroke.primary,padding:"12px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:e.jsx(t.Input,{ref:a,placeholder:"Search",leftIcon:{icon:()=>e.jsx(s.default,{width:24,height:24,color:o.COLORS.content.placeholder})},rightIcon:{icon:()=>{var r;return(null===(r=null==a?void 0:a.current)||void 0===r?void 0:r.value)?e.jsx(i.default,{onClick:()=>{a.current&&(a.current.value=""),u("")},width:24,height:24,color:o.COLORS.content.placeholder}):e.jsx(e.Fragment,{})}},onChangeText:u})}))};

package/dist/cjs/components/dropdown/opennedDropdown/components/searchbox/SearchZeroState.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../zeroState/ZeroState.js");exports.SearchZeroState=t=>{let{searchedString:o}=t;return e.jsx(r.ZeroState,{title:"No results found",subTitle:`Sorry we could not find any results for "${null!=o?o:""}"`})};

package/dist/cjs/components/dropdown/opennedDropdown/utils/iterationOnOptions.d.ts

@@ -0,0 +1,24 @@
+import { DropdownOption, SingleOption } from '../../type';
+export declare function iterateOnOptions(options: DropdownOption[], newVal: SingleOption, checkCB?: (optionForValidation: SingleOption) => boolean): ({
+    options: {
+        label?: string | undefined;
+        value?: string | undefined;
+        descriptions?: string | undefined;
+        selected?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isFreeForm?: boolean | undefined;
+    }[];
+    label?: string | undefined;
+    value?: string | undefined;
+    descriptions?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+} | {
+    label?: string | undefined;
+    value?: string | undefined;
+    descriptions?: string | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    isFreeForm?: boolean | undefined;
+})[];

package/dist/cjs/components/dropdown/type.d.ts

@@ -1,32 +1,25 @@
-/// <reference types="react" />
-import { Placement } from '@popperjs/core';
 export interface OpenDropdownProps {
-    defaultOptions?: DropdownOption[];
     options: DropdownOption[];
     isSearchable?: boolean;
     error?: string;
     isMultiSelect?: boolean;
-    width?: string;
+    width?: number | string;
     height?: number | string;
     allowFreeForm?: boolean;
     onClose?: () => void;
-    onSelect?: (option: DropdownOption | DropdownOption[]) => void;
-    placement?: Placement;
+    onSelect?: (option: SingleOption | SingleOption[]) => void;
 }
 export type GroupedOption = {
     label?: string;
     options: (SingleOption | MultiSelectOption)[];
 };
 export type SingleOption = {
-    label: string;
-    value: string;
-    description?: string | null;
+    label?: string;
+    value?: string;
+    descriptions?: string;
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;
-    subText?: string;
-    trailingIcon?: JSX.Element;
-    customComponent?: JSX.Element;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/cjs/components/fab-menu/FABMenu.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { DropdownOption } from '../dropdown/type';
-import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from '../floating-action-button/FloatingActionButton.styles';
-import { Placement } from '../tooltips';
+import { DropdownOption, SingleOption } from '../dropdown/type';
+import { FAB_POSITION } from '../floating-action-button/FloatingActionButton.styles';
+import { TooltipPlacement } from '../tooltips';
 export declare const FABMenu: React.FC<{
-    onSelect: (selected: DropdownOption | DropdownOption[]) => void;
+    onSelect: (selected: SingleOption | SingleOption[]) => void;
     menuOptions: DropdownOption[];
     buttonWidth?: number;
     buttonHeight?: number;
@@ -14,11 +14,8 @@ export declare const FABMenu: React.FC<{
     buttonIcon?: JSX.Element;
     buttonPaddingHorizontal?: number;
     buttonPaddingVertical?: number;
-    tooltipPlacement?: Placement;
+    tooltipPlacement?: TooltipPlacement;
     tooltipText?: string;
-    tooltipWidth?: number;
     zIndex?: number;
     isRound?: boolean;
-    dropPosition?: DROP_POSITION;
-    menuAligment?: MENU_ALIGNMENT;
 }>;

package/dist/cjs/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:p,menuHeight:c,buttonIcon:a,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tooltipWidth:A}=i;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:a,width:r,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:h,tooltipPlacement:b,tooltipText:m,zIndex:x,isRound:P,dropPosition:j,menuAligment:w,tootipWidth:A},{children:t.jsx(o.OpenedDropdown,{options:d,height:c||90,width:`${p}px`,onSelect:e})}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("../dropdown/opennedDropdown/components/OpennedDropdown.js"),n=require("../floating-action-button/FloatingActionButton.js");require("../floating-action-button/FloatingActionButton.styles.js");exports.FABMenu=e=>{const{onSelect:i,menuOptions:r,buttonWidth:d,buttonHeight:u,buttonColor:l,buttonPosition:s,menuWidth:c,menuHeight:a,buttonIcon:p,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P}=e;return t.jsx("div",{children:t.jsx(n.FloatingActionButton,Object.assign({icon:p,width:d,height:u,color:l,position:s,buttonPaddingHorizontal:g,buttonPaddingVertical:b,tooltipPlacement:h,tooltipText:x,zIndex:j,isRound:P},{children:t.jsx(o.OpennedDropdown,{options:r,height:a||90,width:c,onSelect:i})}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.d.ts

@@ -1,7 +1,7 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import React from 'react';
-import { Placement } from '../tooltips';
-import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from './FloatingActionButton.styles';
+import { TooltipPlacement } from '../tooltips/CustomisedTooltip';
+import { FAB_POSITION } from './FloatingActionButton.styles';
 export declare const FloatingActionButton: React.FC<{
     onClick?: () => void;
     children?: React.ReactNode;
@@ -13,10 +13,7 @@ export declare const FloatingActionButton: React.FC<{
     buttonPaddingHorizontal?: number;
     buttonPaddingVertical?: number;
     tooltipText?: string;
-    tooltipPlacement?: Placement;
+    tooltipPlacement?: TooltipPlacement;
     zIndex?: number;
     isRound?: boolean;
-    dropPosition?: DROP_POSITION;
-    menuAligment?: MENU_ALIGNMENT;
-    tootipWidth?: number;
 }>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react"),i=require("react-bootstrap"),n=require("../../constants/Theme.js"),e=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),s=require("../../assets/icons/question-mark.svg.js"),l=require("./FloatingActionButton.styles.js");const c=o=>{const{width:i,height:c,color:d,onClick:a,icon:h,tooltipPlacement:p,tooltipText:g,tootipWidth:u,isRound:j}=o;return g?t.jsx(e.Tooltip,Object.assign({tooltipContent:t.jsx(l.TooltipStyled,Object.assign({tooltipWidth:u},{children:t.jsx(r.BodyCaption,Object.assign({color:n.COLORS.content.primaryInverse},{children:o.tooltipText}))})),placement:p,body:""},{children:t.jsx(l.FloatingActionButtonContainer,Object.assign({width:i,height:c,color:d,onClick:a,isRound:j},{children:h||t.jsx(s.default,{width:22,height:22})}))})):t.jsx(t.Fragment,{children:t.jsx(l.FloatingActionButtonContainer,Object.assign({width:i,height:c,color:d,onClick:a,isRound:j},{children:h||t.jsx(s.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:r,onClick:s,children:d,tooltipText:a,isRound:h=!0,width:p=48,height:g=48,color:u=n.COLORS.background.inverse,position:j=l.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:O=20,zIndex:T=1,tooltipPlacement:b="right",dropPosition:m=l.DROP_POSITION.DOWN,menuAligment:w=l.MENU_ALIGNMENT.END,tootipWidth:C}=e,[P,y]=o.useState(!1);return t.jsx(t.Fragment,{children:t.jsx(l.FloatingActionButtonOuterContainer,Object.assign({width:p,height:g,color:u,position:j,buttonPaddingHorizontal:x,buttonPaddingVertical:O,zIndex:T},{children:t.jsx(l.StyledDropdown,Object.assign({onToggle:(t,o)=>{y(t)},drop:m,align:w},{children:d?t.jsxs(t.Fragment,{children:[t.jsx(l.DropdownToggleContainer,Object.assign({drop:m},{children:t.jsx(c,{width:p,height:g,color:u,tooltipPlacement:b,onClick:s,tooltipText:a,icon:r,position:j,isRound:h,isDropdownOpen:P,tootipWidth:C})})),t.jsx(i.Dropdown.Menu,{children:d})]}):t.jsx(c,{width:p,height:g,color:u,tooltipPlacement:b,onClick:s,tooltipText:a,icon:r,position:j,isRound:h,isDropdownOpen:P,tootipWidth:C})}))}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),o=require("react-bootstrap"),i=require("../../constants/Theme.js"),n=require("../tooltips/CustomisedTooltip.js"),e=require("../../assets/icons/question-mark.svg.js"),r=require("./FloatingActionButton.styles.js");const s=o=>{const{width:i,height:s,color:l,onClick:c,icon:d,tooltipPlacement:a,tooltipText:h,isRound:u}=o;return h?t.jsx(n.CustomisedTooltip,{tooltipContent:t.jsx(t.Fragment,{children:h}),tooltipTriggerContent:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})})),tooltipPlacement:a,showOnHover:!0}):t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonContainer,Object.assign({width:i,height:s,color:l,onClick:c,isRound:u},{children:d||t.jsx(e.default,{width:22,height:22})}))})};exports.FloatingActionButton=e=>{const{icon:l,onClick:c,children:d,tooltipText:a,isRound:h=!0,width:u=48,height:g=48,color:p=i.COLORS.background.inverse,position:j=r.FAB_POSITION.TOP_LEFT,buttonPaddingHorizontal:x=20,buttonPaddingVertical:m=20,zIndex:C=1,tooltipPlacement:w=n.TooltipPlacement.Auto}=e;return t.jsx(t.Fragment,{children:t.jsx(r.FloatingActionButtonOuterContainer,Object.assign({width:u,height:g,color:p,position:j,buttonPaddingHorizontal:x,buttonPaddingVertical:m,zIndex:C},{children:t.jsx(r.StyledDropdown,{children:d?t.jsxs(t.Fragment,{children:[t.jsx(r.DropdownToggleContainer,{children:t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})}),t.jsx(o.Dropdown.Menu,{children:d})]}):t.jsx(s,{width:u,height:g,color:p,tooltipPlacement:w,onClick:c,tooltipText:a,icon:l,position:j,isRound:h})})}))})};

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.d.ts

@@ -5,23 +5,11 @@ export declare enum FAB_POSITION {
     BOTTOM_LEFT = "bottom left",
     BOTTOM_RIGHT = "botton right"
 }
-export declare enum DROP_POSITION {
-    UP = "up",
-    UP_CENTERED = "up-centered",
-    START = "start",
-    END = "end",
-    DOWN = "down",
-    DOWN_CENTERED = "down-centered"
-}
-export declare enum MENU_ALIGNMENT {
-    START = "start",
-    END = "end"
-}
 export declare const FloatingActionButtonContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
     height: number;
     color: string;
-    isRound?: boolean | undefined;
+    isRound: boolean;
 }, never>;
 export declare const FloatingActionButtonOuterContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
@@ -45,6 +33,3 @@ export declare const StyledDropdown: import("styled-components").StyledComponent
     height?: string | undefined;
 }, never>;
 export declare const DropdownToggleContainer: import("styled-components").StyledComponent<import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"button", import("react-bootstrap/esm/DropdownToggle").DropdownToggleProps>, any, {}, never>;
-export declare const TooltipStyled: import("styled-components").StyledComponent<"div", any, {
-    tooltipWidth?: number | undefined;
-}, never>;

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n,d,p=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right",exports.DROP_POSITION=void 0,(n=exports.DROP_POSITION||(exports.DROP_POSITION={})).UP="up",n.UP_CENTERED="up-centered",n.START="start",n.END="end",n.DOWN="down",n.DOWN_CENTERED="down-centered",exports.MENU_ALIGNMENT=void 0,(d=exports.MENU_ALIGNMENT||(exports.MENU_ALIGNMENT={})).START="start",d.END="end";const a=p.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i,n=r(o);exports.FAB_POSITION=void 0,(i=exports.FAB_POSITION||(exports.FAB_POSITION={})).TOP_LEFT="top left",i.TOP_RIGHT="top right",i.BOTTOM_LEFT="bottom left",i.BOTTOM_RIGHT="botton right";const d=n.default.div`
 	width: ${t=>t.width}px;
 	height: ${t=>t.height}px;
 	background: ${t=>t.color};
@@ -7,7 +7,7 @@
 	align-items: center;
 	cursor: pointer;
 	display: flex;
-`,s=p.default.div`
+`,a=n.default.div`
 	display: flex;
 	border-radius: 50%;
 	flex-direction: column;
@@ -17,7 +17,7 @@
 	height: ${t=>t.height}px;
 	z-index: ${t=>t.zIndex};
 	${t=>t.position===exports.FAB_POSITION.BOTTOM_RIGHT?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.BOTTOM_LEFT?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_LEFT?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:t.position===exports.FAB_POSITION.TOP_RIGHT?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
-`,l=p.default(t.Dropdown)`
+`,p=n.default(t.Dropdown)`
 	.filter-container {
 		.single-row {
 			display: flex;
@@ -41,7 +41,7 @@
 		flex-direction: row;
 		align-items: center;
 		justify-content: space-between;
-		padding: 6px 0px;
+		padding: 6px 8px;
 		background: ${t=>"true"===t.active?e.COLORS.background.positive.light:e.COLORS.surface.standard};
 		color: ${t=>"true"===t.active?e.COLORS.content.positive:e.COLORS.content.primary};
 	}
@@ -62,12 +62,7 @@
 
 	.dropdown-toggle::after {
 		border-top: 0.3em solid ${e.COLORS.content.primary};
-		display: none !important;
-	}
-
-	.dropdown-toggle::before {
-		border-top: 0.3em solid ${e.COLORS.content.primary};
-		display: none !important;
+		display: none;
 	}
 	.dropdown-menu {
 		min-width: 12rem;
@@ -79,7 +74,7 @@
 		text-decoration: none;
 		background-color: ${e.COLORS.background.positive.light};
 	}
-`,c=p.default(t.Dropdown.Toggle)`
+`,s=n.default(t.Dropdown.Toggle)`
 	border-radius: 4px;
 	display: flex;
 	flex-direction: row;
@@ -89,11 +84,4 @@
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
-`,O=p.default.div`
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-radius: 4px;
-	padding: 8px;
-	background-color: ${e.COLORS.content.primary};
-	color: ${e.COLORS.content.primaryInverse};
-	width: ${t=>t.tooltipWidth?t.tooltipWidth+"px":"120px"};
-`;exports.DropdownToggleContainer=c,exports.FloatingActionButtonContainer=a,exports.FloatingActionButtonOuterContainer=s,exports.StyledDropdown=l,exports.TooltipStyled=O;
+`;exports.DropdownToggleContainer=s,exports.FloatingActionButtonContainer=d,exports.FloatingActionButtonOuterContainer=a,exports.StyledDropdown=p;

package/dist/cjs/components/image-compress/ImageCompress.d.ts

@@ -1,11 +1,7 @@
-export interface CompressImageOptions {
-    maxSizeMB?: number;
-}
 export interface CompressImageReturnType {
     base64: string;
     compressedFile: File;
 }
 export declare class ImageService {
-    static base64ToImage: (base64String: string) => File;
-    static compressImage: (file: File, options?: CompressImageOptions) => Promise<CompressImageReturnType>;
+    static compressImage: (file: File) => Promise<CompressImageReturnType>;
 }

package/dist/cjs/components/image-compress/ImageCompress.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"base64ToImage",{enumerable:!0,configurable:!0,writable:!0,value:e=>{const r=atob(e.split(",")[1]),t=e.split(",")[0].split(":")[1].split(";")[0],i=new ArrayBuffer(r.length),a=new Uint8Array(i);for(let e=0;e<r.length;e++)a[e]=r.charCodeAt(e);const o=new Blob([i],{type:t});return new File([o],"image",{type:t})}}),Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:(r,i)=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,a="";const o=i?i.maxSizeMB:r.size/1024/1024*.8;try{const i={maxSizeMB:o,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>.1&&(e=yield t.default(r,i)),a=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:a,compressedFile:e}}))}),exports.ImageService=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(require("browser-image-compression"));class i{}Object.defineProperty(i,"compressImage",{enumerable:!0,configurable:!0,writable:!0,value:r=>e.__awaiter(void 0,void 0,void 0,(function*(){let e=r,i="";try{const a={maxSizeMB:r.size/1024/1024*.8,maxWidthOrHeight:1920,useWebWorker:!0};r.size/1024/1024>1&&(e=yield t.default(r,a)),i=yield t.default.getDataUrlFromFile(e)}catch(e){console.error(e)}return{base64:i,compressedFile:e}}))}),exports.ImageService=i;

package/dist/cjs/components/input/Input.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 export type InputVariant = 'default' | 'small';
 export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'none';
-export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline';
 export interface InputProps {
-    noErrorHint?: boolean;
     placeholder?: string;
     variant?: InputVariant;
     width?: string;
@@ -27,7 +26,7 @@ export interface InputProps {
         validate:  function takes the input and returns boolean + string (error message in case of invalid input)
      **/
     validate?: (input?: string | number) => [boolean, string];
-    onChangeText: (input: string, event?: Event) => void;
+    onChangeText: (input: string) => void;
     button?: {
         text: string;
         onClick?: () => void;
@@ -35,18 +34,5 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
-    reset?: boolean;
-    onBlur?: (e: any) => void;
-    onFocus?: () => void;
-    isActive?: boolean;
-    id?: string;
-    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
-    rangeValidation?: {
-        min: number;
-        max: number;
-    };
 }
-export declare const Input: {
-    (props: InputProps): JSX.Element;
-    displayName: string;
-};
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/cjs/components/input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("./Input-helper.js"),r=require("../TypographyStyle.js"),l=require("../../assets/icons/errorInfo.svg.js"),s=require("./context/InputStyleProvider.js"),a=require("./Input.styled.js");const o=o=>{var u,c,d,v;const{placeholder:h,leftIcon:x,rightIcon:p,labelText:f,maxCharLimit:j,isRequired:g,hintText:y,type:I,state:b,validate:C,variant:m,button:S,suffixText:E,prefixText:O,onChangeText:q,value:w,noErrorHint:F,reset:H,rangeValidation:T}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==x?void 0:x.icon,B=null==p?void 0:p.icon,[A,R]=t.useState(!1),[z,L]=t.useState(!1),[M,D]=t.useState(),P="small"===m?"18px":"22px",K=t.useContext(s.InputStyleContext),[W,_]=t.useState(),N=t.useRef();t.useEffect((()=>{_(w)}),[w]),t.useEffect((()=>{var e;N.current&&(null===(e=o.onReferenceInit)||void 0===e||e.call(o,N.current))}),[N]),t.useEffect((()=>{H&&_("")}),[H]),t.useEffect((()=>{var e;L(!!o.isActive),o.isActive&&(null===(e=N.current)||void 0===e||e.focus())}),[o.isActive]),t.useEffect((()=>{D(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{var e;R(!1),("invalid"===o.state||M)&&R(!0),"active"===o.state&&(null===(e=N.current)||void 0===e||e.focus())}),[o.state,M]),t.useEffect((()=>{R(!!M)}),[M]);const V=function(e){if(i.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];e(...n)}},G=e=>{const t=j||("zip"===I?6:60);q(w||"",e),![8].includes(e.which)&&t>0&&e.target.value.length===t&&e.preventDefault()},J=e=>{const t=e.target.value;q(t,e),_(t);const n=C||i.validateInput;if(!n||!i.isFunction(n))return;const[r,l]=n(t,I,T);R(!r),D(l)},Q=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{id:o.id,style:null!==(t=null==K?void 0:K.input)&&void 0!==t?t:{},ref:N,type:["phonenumber","zip","number"].includes(I)?"number":I,value:W,onFocus:()=>(L(!0),void V(o.onFocus)),onBlur:e=>(e=>{var t;L(!1),V(null===(t=o.onBlur)||void 0===t?void 0:t.call(o,e))})(e),placeholder:h||"Enter here",onChange:J,onKeyDown:e=>G(e)}),"multiline"===I&&e.jsx("textarea",{value:W,ref:N,onFocus:()=>L(!0),onBlur:()=>L(!1),placeholder:h||"Enter here",onChange:J,onKeyDown:e=>G(e)})]})};return e.jsxs(a.RootContainer,Object.assign({width:o.width,height:o.height,state:b,type:I,style:null!==(u=null==K?void 0:K.RootContainer)&&void 0!==u?u:{}},{children:[!F&&(!!y||!!M)&&e.jsxs(a.InputFooter,Object.assign({invalid:!!M},{children:[!!M&&e.jsx(l.default,{width:16,height:16}),M||y]})),e.jsxs(a.InputWrapper,Object.assign({variant:m,state:b,width:o.width,isActive:"active"===b||z,isInvalid:A,style:null!==(c=null==K?void 0:K.InputWrapper)&&void 0!==c?c:{}},{children:[!!k&&e.jsx(a.IconHolder,Object.assign({variant:m,iconSize:P,onClick:()=>V(null==x?void 0:x.callback),isLeft:!0,style:null!==(d=null==K?void 0:K.IconHolder)&&void 0!==d?d:{}},{children:e.jsx(k,{})})),!!O&&e.jsx(a.PrefixHolder,Object.assign({variant:m},{children:O})),"default"===m&&e.jsx(a.InputContainer,{children:Q()}),"small"===m&&e.jsx(a.InputContainerSmall,{children:Q()}),!!B&&e.jsx(a.IconHolder,Object.assign({variant:m,iconSize:P,onClick:()=>V(null==p?void 0:p.callback),isLeft:!1},{children:e.jsx(B,{})})),!!E&&e.jsx(a.SuffixHolder,Object.assign({variant:m},{children:E})),S&&S.text&&e.jsx(n.Button,{buttonText:S.text,onClick:()=>V(null==S?void 0:S.onClick)})]})),(!!f||!!j)&&"default"===m&&e.jsxs(a.InputHeader,Object.assign({invalid:A},{children:[e.jsxs(r.BodySecondary,{children:[f,g?e.jsx("span",{children:"*"}):""]}),j>0&&e.jsxs(a.MaxCharStyle,{children:[null===(v=o.value)||void 0===v?void 0:v.length,"/",j]})]}))]}))};o.displayName="Input",exports.Input=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("../../assets/icons/errorInfo.svg.js"),l=require("./context/InputStyleProvider.js"),s=require("./Input.styled.js");const a=e=>e&&"function"==typeof e,o=t.forwardRef(((o,u)=>{var c,d,x;const{placeholder:h,leftIcon:v,rightIcon:j,labelText:p,maxCharLimit:f,isRequired:g,hintText:y,type:I,state:b,validate:C,variant:S,button:m,suffixText:O,prefixText:w,onChangeText:q,value:T}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},o),k=null==v?void 0:v.icon,E=null==j?void 0:j.icon,[H,B]=t.useState(""),[F,L]=t.useState(!1),[M,R]=t.useState(!1),[D,P]=t.useState(),z="small"===S?"18px":"22px",A=t.useContext(l.InputStyleContext);t.useEffect((()=>{P(o.errorMessage)}),[o.errorMessage]),t.useEffect((()=>{L(!1),("invalid"===o.state||D)&&L(!0)}),[o.state,D]),t.useEffect((()=>{L(!!D)}),[D]),t.useEffect((()=>{if(q(H),!C||!a(C))return;const[e,t]=C(H);L(!e),P(t)}),[H]);const K=function(e){if(a(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},W=e=>{![8].includes(e.which)&&f>0&&e.target.value.length===f&&e.preventDefault()},_=e=>{B(e.target.value)},N=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==I&&e.jsx("input",{style:null!==(t=null==A?void 0:A.input)&&void 0!==t?t:{},ref:u,type:I,value:T,onFocus:()=>R(!0),onBlur:()=>R(!1),placeholder:h||"Enter here",onChange:_,onKeyDown:e=>W(e)}),"multiline"===I&&e.jsx("textarea",{value:T,ref:u,onFocus:()=>R(!0),onBlur:()=>R(!1),placeholder:h||"Enter here",onChange:_,onKeyDown:e=>W(e)})]})};return e.jsxs(s.RootContainer,Object.assign({width:o.width,height:o.height,state:b,type:I,style:null!==(c=null==A?void 0:A.RootContainer)&&void 0!==c?c:{}},{children:[(!!y||!!D)&&e.jsxs(s.InputFooter,Object.assign({invalid:!!D},{children:[!!D&&e.jsx(r.default,{}),D||y]})),e.jsxs(s.InputWrapper,Object.assign({variant:S,state:b,width:o.width,isActive:"active"===b||M,isInvalid:F,style:null!==(d=null==A?void 0:A.InputWrapper)&&void 0!==d?d:{}},{children:[!!k&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:z,onClick:()=>K(null==v?void 0:v.callback),isLeft:!0,style:null!==(x=null==A?void 0:A.IconHolder)&&void 0!==x?x:{}},{children:e.jsx(k,{})})),!!w&&e.jsx(s.PrefixHolder,Object.assign({variant:S},{children:w})),"default"===S&&e.jsx(s.InputContainer,{children:N()}),"small"===S&&e.jsx(s.InputContainerSmall,{children:N()}),!!E&&e.jsx(s.IconHolder,Object.assign({variant:S,iconSize:z,onClick:()=>K(null==v?void 0:v.callback),isLeft:!1},{children:e.jsx(E,{})})),!!O&&e.jsx(s.SuffixHolder,Object.assign({variant:S},{children:O})),m&&m.text&&e.jsx(n.Button,{buttonText:m.text,onClick:()=>K(null==m?void 0:m.onClick)})]})),(!!p||!!f)&&"default"===S&&e.jsxs(s.InputHeader,Object.assign({invalid:F},{children:[e.jsxs(i.BodySecondary,{children:[p,g?e.jsx("span",{children:"*"}):""]}),f>0&&e.jsxs(s.MaxCharStyle,{children:[H.length,"/",f]})]}))]}))}));o.displayName="Input",exports.Input=o;