@bikdotai/bik-component-library 0.0.687-beta.9 → 0.0.687

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-chips"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./ChipInput.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(r);var l=({onChipsChange:r,placeholder:c,chips:l,label:s,labelColor:u,hintText:d,hintTextColor:h,error:p,inputHeight:y,createChipKeys:C,chipsContainerCustomStyle:f,nativeID:m})=>{const[v,x]=t.useState(!1);return t.useEffect((()=>{document.querySelector(`#${m} input`)?.addEventListener("focus",(()=>{x(!0)})),document.querySelector(`#${m} input`)?.addEventListener("blur",(()=>{x(!1)}))}),[]),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},id:m,children:[s&&e.jsx(i.BodySecondary,{style:{color:v?n.COLORS.content.brand:p?n.COLORS.content.negative:u||n.COLORS.content.primary},children:s}),e.jsx(a.default,{value:l,theme:o.theme(!!p,y,f,v),chipTheme:o.chipTheme,placeholder:0===l.length&&!!c&&!v&&c,onChange:e=>{r(e)},createChipKeys:C||","}),(!!d||!!p)&&e.jsx(i.BodyCaption,{style:{color:p?n.COLORS.content.negative:h||n.COLORS.content.secondary},children:p||d})]})};exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-chips"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./ChipInput.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(r);exports.default=r=>{let{onChipsChange:c,placeholder:s,chips:a,label:u,labelColor:d,hintText:h,hintTextColor:p,error:y,inputHeight:C,createChipKeys:O,chipsContainerCustomStyle:j,nativeID:v}=r;const[f,g]=t.useState(!1);return t.useEffect((()=>{var e,t;null===(e=document.querySelector(`#${v} input`))||void 0===e||e.addEventListener("focus",(()=>{g(!0)})),null===(t=document.querySelector(`#${v} input`))||void 0===t||t.addEventListener("blur",(()=>{g(!1)}))}),[]),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:8},id:v},{children:[u&&e.jsx(i.BodySecondary,Object.assign({style:{color:f?n.COLORS.content.brand:y?n.COLORS.content.negative:d||n.COLORS.content.primary}},{children:u})),e.jsx(l.default,{value:a,theme:o.theme(!!y,C,j,f),chipTheme:o.chipTheme,placeholder:0===a.length&&!!s&&!f&&s,onChange:e=>{c(e)},createChipKeys:O||","}),(!!h||!!y)&&e.jsx(i.BodyCaption,Object.assign({style:{color:y?n.COLORS.content.negative:p||n.COLORS.content.secondary}},{children:y||h}))]}))};

package/dist/cjs/components/input/ChipInput.styled.d.ts

@@ -0,0 +1,66 @@
+export declare const chipTheme: {
+    chip: {
+        padding: string;
+        background: string;
+        border: string;
+        fontSize: number;
+        color: string;
+        fontWeight: number;
+        borderRadius: number;
+        alignItems: string;
+        alignContent: string;
+        justifyContent: string;
+        cursor: string;
+        margin: string;
+        fontFamily: string;
+    };
+    chipRemove: {
+        fontSize: number;
+        fontFamily: string;
+        cursor: string;
+        fontWeight: string;
+        color: string;
+        marginLeft: number;
+        ':hover': {
+            color: string;
+        };
+    };
+};
+export declare const theme: (error?: boolean, height?: number, chipsContainerCustomStyle?: Object, focused?: boolean) => {
+    chipsContainer: {
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+        display: string;
+        position: string;
+        border: string;
+        backgroundColor: string;
+        alignItems: string;
+        flexWrap: string;
+        padding: string;
+        borderRadius: number;
+        ':hover': {
+            border: string;
+        };
+    };
+    container: {
+        flex: number;
+    };
+    containerOpen: {};
+    input: {
+        border: string;
+        outline: string;
+        boxSizing: string;
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: number;
+        height: number;
+        width: string;
+        paddingTop: number;
+        paddingBottom: number;
+    };
+};

package/dist/cjs/components/input/ChipInput.styled.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");const r={chip:{padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.COLORS.content.secondary,marginLeft:6,":hover":{color:e.COLORS.content.secondary}}};exports.chipTheme=r,exports.theme=(r,o,n,t)=>({chipsContainer:{display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.COLORS.stroke.brand}`},...n??{}},container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");const r={chip:{padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.COLORS.content.secondary,marginLeft:6,":hover":{color:e.COLORS.content.secondary}}};exports.chipTheme=r,exports.theme=(r,o,n,t)=>({chipsContainer:Object.assign({display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.COLORS.stroke.brand}`}},null!=n?n:{}),container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});

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

@@ -0,0 +1,6 @@
+import { InputTypeI } from "./Input";
+export declare const isFunction: (fn: any) => boolean;
+export declare const validateInput: (inputText: string | number, type: InputTypeI, rangeValidation?: {
+    min?: number;
+    max?: number;
+}) => [boolean, string];

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("phone");exports.isFunction=e=>e&&"function"==typeof e,exports.validateInput=(n,r,t={})=>{let i;const a=["phonenumber","zip","number"].includes(r),u=a?n?Number(n):null:n;if(null==u||""===u)return[!0,""];if(a&&String(u).length&&(t.min&&u<t.min||t.max&&u>t.max))return[!1,`Enter valid number between ${t.min} and ${t.max}`];if("email"===r)return i=/(.+)@(.+){2,}\.(.+){2,}/,u.match(i)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return i=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,u.match(i)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return u>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(u).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(u));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return u?.trim().length>0?[!0,""]:[!1,"Enter a valid data"]};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("phone");exports.isFunction=e=>e&&"function"==typeof e,exports.validateInput=function(n,r){let t,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};const a=["phonenumber","zip","number"].includes(r),u=a?n?Number(n):null:n;if(null==u||""===u)return[!0,""];if(a&&String(u).length&&(i.min&&u<i.min||i.max&&u>i.max))return[!1,`Enter valid number between ${i.min} and ${i.max}`];if("email"===r)return t=/(.+)@(.+){2,}\.(.+){2,}/,u.match(t)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return t=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,u.match(t)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return u>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(u).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(u));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return(null==u?void 0:u.trim().length)>0?[!0,""]:[!1,"Enter a valid data"]};

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

@@ -1,76 +1,72 @@
-import React__default from 'react';
-import { ButtonProps } from '../button/model.js';
-
-type InputVariant = 'default' | 'small' | 'x-small';
-type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
-type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
-interface InputProps {
-    'data-test'?: string;
-    noErrorHint?: boolean;
-    placeholder?: string;
-    variant?: InputVariant;
-    width?: string;
-    height?: string;
-    leftIcon?: {
-        icon: React__default.FC;
-        callback?: () => void;
-    };
-    rightIcon?: {
-        icon: React__default.FC;
-        callback?: () => void;
-    };
-    labelElement?: React__default.ReactNode;
-    labelText?: string;
-    maxCharLimit?: number;
-    isRequired?: boolean;
-    errorMessage?: string;
-    hintText?: string;
-    state?: InputStateI;
-    type?: InputTypeI;
-    /**
-        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;
-    button?: {
-        text: string;
-        onClick?: () => void;
-        buttonProps?: ButtonProps;
-    };
-    suffixText?: string;
-    prefixText?: string;
-    value?: string;
-    reset?: boolean;
-    onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
-    onClick?: (e: any) => void;
-    isActive?: boolean;
-    id?: string;
-    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
-    rangeValidation?: {
-        min: number;
-        max: number;
-    };
-    noKeyDownChange?: boolean;
-    skipFocus?: boolean;
-    version?: '1.0' | '2.0';
-    textControl?: boolean;
-    noMaxCharCheck?: boolean;
-    tooltipText?: string;
-    autoGrow?: boolean;
-    minHeight?: string;
-    maxHeight?: string;
-    labelTextBold?: boolean;
-    truncateText?: boolean;
-    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
-    hightlightInputColor?: string;
-    onKeyDownEvent?: (e: Event) => void;
-    hideInputHeader?: boolean;
-    hideBorder?: boolean;
-    inputWrapperStyles?: React__default.CSSProperties;
-    minCharsToTrigger?: number;
-}
-declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
-
-export { Input };
-export type { InputProps, InputStateI, InputTypeI, InputVariant };
+import React from 'react';
+import { ButtonProps } from '../button/model';
+export type InputVariant = 'default' | 'small' | 'x-small';
+export type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+export type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+export interface InputProps {
+    'data-test'?: string;
+    noErrorHint?: boolean;
+    placeholder?: string;
+    variant?: InputVariant;
+    width?: string;
+    height?: string;
+    leftIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    rightIcon?: {
+        icon: React.FC;
+        callback?: () => void;
+    };
+    labelElement?: React.ReactNode;
+    labelText?: string;
+    maxCharLimit?: number;
+    isRequired?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    state?: InputStateI;
+    type?: InputTypeI;
+    /**
+        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;
+    button?: {
+        text: string;
+        onClick?: () => void;
+        buttonProps?: ButtonProps;
+    };
+    suffixText?: string;
+    prefixText?: string;
+    value?: string;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
+    tooltipText?: string;
+    autoGrow?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
+    hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
+    hideInputHeader?: boolean;
+    hideBorder?: boolean;
+    inputWrapperStyles?: React.CSSProperties;
+    minCharsToTrigger?: number;
+}
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;

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("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),r=require("./Input-helper.js"),s=require("../tooltips/Tooltip.js"),a=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),l=require("../../assets/icons/errorInfo.svg.js"),c=require("./context/InputStyleProvider.js"),u=require("./Input.styled.js");const h=n.forwardRef(((h,d)=>{const{placeholder:p,leftIcon:x,rightIcon:g,labelText:f,maxCharLimit:v,isRequired:j,hintText:m,type:y,state:C,validate:T,variant:I,button:b,suffixText:S,prefixText:w,onChangeText:E,value:k,noErrorHint:H,reset:q,rangeValidation:B,noKeyDownChange:L,version:O,noMaxCharCheck:M,labelElement:F,autoGrow:P,minHeight:R,maxHeight:D,labelTextBold:z,truncateText:A,maxCharLimitPosition:K,hightlightInputColor:N,onKeyDownEvent:_,hideInputHeader:W,hideBorder:G,inputWrapperStyles:V,minCharsToTrigger:$}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,...h},J=x?.icon,Q=g?.icon,[U,X]=n.useState(!1),[Y,Z]=n.useState(!1),[ee,te]=n.useState(),ne="x-small"===I?"12px":"small"===I?"18px":"22px",ie=n.useContext(c.InputStyleContext),[re,se]=n.useState(),ae=n.useRef(null),oe=d??ae;n.useEffect((()=>{se(k),!k&&P&&(oe.current.style.height=R||"48px")}),[k]),n.useEffect((()=>{oe.current&&h.onReferenceInit?.(oe.current)}),[oe]),n.useEffect((()=>{const e=oe.current;if(e&&["phonenumber","zip","number"].includes(y))return e.addEventListener("wheel",he,{passive:!1}),()=>{e.removeEventListener("wheel",he)}}),[]),n.useEffect((()=>{q&&se("")}),[q]),n.useEffect((()=>{Z(!!h.isActive),h.isActive&&oe.current?.focus()}),[h.isActive]),n.useEffect((()=>{te(h.errorMessage)}),[h.errorMessage]),n.useEffect((()=>{X(!1),("invalid"===h.state||ee||"disabled-invalid"===h.state)&&X(!0),"active"===h.state&&oe.current?.focus()}),[h.state,ee]),n.useEffect((()=>{X(!!ee||"invalid"===h.state)}),[ee,h.state]);const le=(e,...t)=>{r.isFunction(e)&&e(...t)},ce=()=>"zip"===y?6:2e3,ue=e=>{const t=0!==v?v:ce(),n=$,i=e.target.value;_&&(!i.length||i.length>=n)&&_(e),L||i.length&&!(i.length>=n)||E(k||"",e),M||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},he=e=>{e.preventDefault()},de=e=>{let t=e.target.value;const n=0!==v?v+1:ce(),i=$;if(!M&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),h.textControl||se(t),i&&t&&t.length<i)return;E(t,e),P&&(oe.current.style.height=`${oe.current.scrollHeight}px`,t||(oe.current.style.height=R||"48px"));const s=T||r.validateInput;if(!s||!r.isFunction(s))return;const[a,o]=s(t,y,B);X(!a),te(h.errorMessage?h.errorMessage:o)},pe=e=>{h.skipFocus||Z(!0),le(h.onFocus?.(e))},xe=e=>{h.skipFocus||Z(!1),le(h.onBlur?.(e))},ge=()=>e.jsxs(e.Fragment,{children:["multiline"!==y&&e.jsx("input",{className:A?"truncate-class":"","data-test":h["data-test"],id:h.id,style:ie?.input??{},ref:oe,type:["phonenumber","zip","number"].includes(y)?"number":y,value:re,onFocus:e=>pe(e),onBlur:e=>xe(e),placeholder:p||"Enter here",onChange:de,onClick:e=>le(h.onClick),onKeyDown:e=>ue(e)}),"multiline"===y&&e.jsx("textarea",{"data-test":h["data-test"],value:re,ref:oe,onFocus:e=>pe(e),onBlur:e=>xe(e),onClick:e=>le(h.onClick),placeholder:p||"Enter here",onChange:de,onKeyDown:e=>ue(e),maxLength:v>0?v:void 0})]});return e.jsxs(u.RootContainer,{width:h.width,height:h.height,state:C,type:y,style:ie?.RootContainer??{},children:[e.jsxs("div",{className:"flex-align-center",children:[!H&&(!!m||!!ee)&&e.jsxs(u.InputFooter,{invalid:!!ee,children:[!!ee&&e.jsx(l.default,{width:16,height:16}),ee||m]}),v>0&&"BOTTOM"===K&&e.jsxs(u.MaxCharStyle,{position:"BOTTOM",children:[(k??"").toString()?.length??0,"/",v]})]}),e.jsxs(u.InputWrapper,{variant:I,state:C,width:h.width,isActive:"active"===C||Y,isInvalid:U,style:ie?.InputWrapper??V??{},version:O,height:h.height,hightlightInputColor:N,hideBorder:G,children:[!!J&&e.jsx(u.IconHolder,{variant:I,iconSize:ne,onClick:()=>le(x?.callback),isLeft:!0,style:ie?.IconHolder??{},children:e.jsx(J,{})}),!!w&&e.jsx(u.PrefixHolder,{variant:I,children:w}),"default"===I&&e.jsx(u.InputContainer,{height:h.height,type:h.type,minHeight:R,maxHeight:D,autoGrow:P,children:ge()}),["x-small","small"].includes(I)&&e.jsx(u.InputContainerSmall,{height:h.height,type:h.type,children:ge()}),!!Q&&e.jsx(u.IconHolder,{variant:I,iconSize:ne,onClick:()=>le(g?.callback),isLeft:!1,children:e.jsx(Q,{})}),!!S&&e.jsx(u.SuffixHolder,{variant:I,children:S}),b&&b.text&&e.jsx(i.Button,{buttonText:b.text,onClick:()=>le(b?.onClick)}),b&&b.buttonProps&&e.jsx(i.Button,{...b.buttonProps})]}),!W&&(!!f||!!v)&&e.jsxs(u.InputHeader,{invalid:U,children:[F&&F,e.jsxs("div",{className:"label__container",children:[z?e.jsxs(a.TitleSmall,{children:[f,j?e.jsx("span",{children:"*"}):""]}):e.jsxs(a.BodySecondary,{children:[f,j?e.jsx("span",{children:"*"}):""]}),h.tooltipText&&e.jsx(s.Tooltip,{body:h.tooltipText,placement:"top",children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:U?o.COLORS.content.negative:o.COLORS.content.primary})})})]}),v>0&&"TOP"===K&&e.jsxs(u.MaxCharStyle,{children:[(k??"").toString()?.length??0,"/",v]})]})]})}));h.displayName="Input",exports.Input=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),l=require("./Input-helper.js"),r=require("../tooltips/Tooltip.js"),s=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),a=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,g,p,x,j,f,m,b;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:T,maxCharLimit:I,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:q,button:B,suffixText:L,prefixText:M,onChangeText:F,value:P,noErrorHint:R,reset:D,rangeValidation:z,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:V,labelTextBold:$,truncateText:J,maxCharLimitPosition:Q,hightlightInputColor:U,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),ne=null==C?void 0:C.icon,ie=null==O?void 0:O.icon,[le,re]=n.useState(!1),[se,oe]=n.useState(!1),[ae,ue]=n.useState(),ce="x-small"===q?"12px":"small"===q?"18px":"22px",de=n.useContext(u.InputStyleContext),[he,ve]=n.useState(),ge=n.useRef(null),pe=null!=h?h:ge;n.useEffect((()=>{ve(P),!P&&W&&(pe.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;pe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,pe.current))}),[pe]),n.useEffect((()=>{const e=pe.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",me,{passive:!1}),()=>{e.removeEventListener("wheel",me)}}),[]),n.useEffect((()=>{D&&ve("")}),[D]),n.useEffect((()=>{var e;oe(!!d.isActive),d.isActive&&(null===(e=pe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{ue(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;re(!1),("invalid"===d.state||ae||"disabled-invalid"===d.state)&&re(!0),"active"===d.state&&(null===(e=pe.current)||void 0===e||e.focus())}),[d.state,ae]),n.useEffect((()=>{re(!!ae||"invalid"===d.state)}),[ae,d.state]);const xe=function(e){if(l.isFunction(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)}},je=()=>"zip"===E?6:2e3,fe=e=>{const t=0!==I?I:je(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||F(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},me=e=>{e.preventDefault()},be=e=>{let t=e.target.value;const n=0!==I?I+1:je(),i=te;if(!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||ve(t),i&&t&&t.length<i)return;F(t,e),W&&(pe.current.style.height=`${pe.current.scrollHeight}px`,t||(pe.current.style.height=G||"48px"));const r=H||l.validateInput;if(!r||!l.isFunction(r))return;const[s,o]=r(t,E,z);re(!s),ue(d.errorMessage?d.errorMessage:o)},ye=e=>{var t;d.skipFocus||oe(!0),xe(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Ce=e=>{var t;d.skipFocus||oe(!1),xe(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Oe=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:J?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==de?void 0:de.input)&&void 0!==t?t:{},ref:pe,type:["phonenumber","zip","number"].includes(E)?"number":E,value:he,onFocus:e=>ye(e),onBlur:e=>Ce(e),placeholder:y||"Enter here",onChange:be,onClick:e=>xe(d.onClick),onKeyDown:e=>fe(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:he,ref:pe,onFocus:e=>ye(e),onBlur:e=>Ce(e),onClick:e=>xe(d.onClick),placeholder:y||"Enter here",onChange:be,onKeyDown:e=>fe(e),maxLength:I>0?I:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==de?void 0:de.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!ae)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!ae},{children:[!!ae&&e.jsx(a.default,{width:16,height:16}),ae||w]})),I>0&&"BOTTOM"===Q&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(p=null===(g=(null!=P?P:"").toString())||void 0===g?void 0:g.length)&&void 0!==p?p:0,"/",I]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||se,isInvalid:le,style:null!==(j=null!==(x=null==de?void 0:de.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:U,hideBorder:Z},{children:[!!ne&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:ce,onClick:()=>xe(null==C?void 0:C.callback),isLeft:!0,style:null!==(f=null==de?void 0:de.IconHolder)&&void 0!==f?f:{}},{children:e.jsx(ne,{})})),!!M&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:M})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:V,autoGrow:W},{children:Oe()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Oe()})),!!ie&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:ce,onClick:()=>xe(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(ie,{})})),!!L&&e.jsx(c.SuffixHolder,Object.assign({variant:q},{children:L})),B&&B.text&&e.jsx(i.Button,{buttonText:B.text,onClick:()=>xe(null==B?void 0:B.onClick)}),B&&B.buttonProps&&e.jsx(i.Button,Object.assign({},B.buttonProps))]})),!Y&&(!!T||!!I)&&e.jsxs(c.InputHeader,Object.assign({invalid:le},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[$?e.jsxs(s.TitleSmall,{children:[T,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(s.BodySecondary,{children:[T,S?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(r.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:le?o.COLORS.content.negative:o.COLORS.content.primary})})}))]})),I>0&&"TOP"===Q&&e.jsxs(c.MaxCharStyle,{children:[null!==(b=null===(m=(null!=P?P:"").toString())||void 0===m?void 0:m.length)&&void 0!==b?b:0,"/",I]})]}))]}))}));d.displayName="Input",exports.Input=d;

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

@@ -0,0 +1,128 @@
+/// <reference types="react" />
+import { InputStateI, InputTypeI, InputVariant } from "./Input";
+export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width?: string | undefined;
+    height?: string | undefined;
+    isActive?: boolean | undefined;
+    isInvalid?: boolean | undefined;
+    state?: InputStateI | undefined;
+    variant?: InputVariant | undefined;
+    version?: "1.0" | "2.0" | undefined;
+    hightlightInputColor?: string | undefined;
+    hideBorder?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconHolder: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isLeft?: boolean | undefined;
+    iconSize?: string | undefined;
+    variant?: InputVariant | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const InputContainer: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+    autoGrow?: boolean | undefined;
+    minHeight?: string | undefined;
+    maxHeight?: string | undefined;
+}, {}, {}>;
+export declare const InputContainerSmall: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+}, {}, {}>;
+export declare const InputHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    invalid?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MaxCharStyle: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    position?: string | undefined;
+}, {}, {}>;
+export declare const InputFooter: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    invalid?: boolean | undefined;
+}, {}, {}>;
+export declare const RootContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width?: string | undefined;
+    height?: string | undefined;
+    state?: InputStateI | undefined;
+    type: InputTypeI;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PrefixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    variant?: InputVariant | undefined;
+}, {}, {}>;
+export declare const SuffixHolder: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    variant?: InputVariant | undefined;
+}, {}, {}>;