@bikdotai/bik-component-library 0.0.324 → 0.0.325
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/cjs/components/input/Input.d.ts +1 -0
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +0 -1
- package/dist/esm/components/input/Input.d.ts +1 -0
- package/dist/esm/components/input/Input.js +1 -1
- package/package.json +1 -1
|
@@ -49,5 +49,6 @@ export interface InputProps {
|
|
|
49
49
|
skipFocus?: boolean;
|
|
50
50
|
version?: '1.0' | '2.0';
|
|
51
51
|
textControl?: boolean;
|
|
52
|
+
noMaxCharCheck?: boolean;
|
|
52
53
|
}
|
|
53
54
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
|
|
@@ -1 +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"),o=require("./Input.styled.js");const a=t.forwardRef(((a,u)=>{var c,d,v,h,x;const{placeholder:p,leftIcon:f,rightIcon:j,labelText:g,maxCharLimit:y,isRequired:I,hintText:
|
|
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"),o=require("./Input.styled.js");const a=t.forwardRef(((a,u)=>{var c,d,v,h,x;const{placeholder:p,leftIcon:f,rightIcon:j,labelText:g,maxCharLimit:y,isRequired:I,hintText:C,type:b,state:m,validate:S,variant:w,button:E,suffixText:O,prefixText:k,onChangeText:q,value:F,noErrorHint:H,reset:M,rangeValidation:T,noKeyDownChange:B,version:R,noMaxCharCheck:A}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},a),L=null==f?void 0:f.icon,z=null==j?void 0:j.icon,[D,K]=t.useState(!1),[P,W]=t.useState(!1),[_,N]=t.useState(),V="small"===w?"18px":"22px",G=t.useContext(s.InputStyleContext),[J,Q]=t.useState(),U=t.useRef(null),X=null!=u?u:U;t.useEffect((()=>{Q(F)}),[F]),t.useEffect((()=>{var e;X.current&&(null===(e=a.onReferenceInit)||void 0===e||e.call(a,X.current))}),[X]),t.useEffect((()=>{M&&Q("")}),[M]),t.useEffect((()=>{var e;W(!!a.isActive),a.isActive&&(null===(e=X.current)||void 0===e||e.focus())}),[a.isActive]),t.useEffect((()=>{N(a.errorMessage)}),[a.errorMessage]),t.useEffect((()=>{var e;K(!1),("invalid"===a.state||_)&&K(!0),"active"===a.state&&(null===(e=X.current)||void 0===e||e.focus())}),[a.state,_]),t.useEffect((()=>{K(!!_)}),[_]);const Y=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)}},Z=e=>{const t=y||("zip"===b?6:60);B||q(F||"",e),A||![8].includes(e.which)&&t>0&&e.target.value.length===t&&e.preventDefault()},$=e=>{const t=e.target.value;q(t,e),a.textControl||Q(t);const n=S||i.validateInput;if(!n||!i.isFunction(n))return;const[r,l]=n(t,b,T);K(!r),N(a.errorMessage?a.errorMessage:l)},ee=e=>{var t;a.skipFocus||W(!0),Y(null===(t=a.onFocus)||void 0===t?void 0:t.call(a,e))},te=e=>{var t;a.skipFocus||W(!1),Y(null===(t=a.onBlur)||void 0===t?void 0:t.call(a,e))},ne=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==b&&e.jsx("input",{id:a.id,style:null!==(t=null==G?void 0:G.input)&&void 0!==t?t:{},ref:X,type:["phonenumber","zip","number"].includes(b)?"number":b,value:J,onFocus:e=>ee(e),onBlur:e=>te(e),placeholder:p||"Enter here",onChange:$,onKeyDown:e=>Z(e)}),"multiline"===b&&e.jsx("textarea",{value:J,ref:X,onFocus:e=>ee(e),onBlur:e=>te(e),placeholder:p||"Enter here",onChange:$,onKeyDown:e=>Z(e),maxLength:y>0?y:void 0})]})};return e.jsxs(o.RootContainer,Object.assign({width:a.width,height:a.height,state:m,type:b,style:null!==(c=null==G?void 0:G.RootContainer)&&void 0!==c?c:{}},{children:[!H&&(!!C||!!_)&&e.jsxs(o.InputFooter,Object.assign({invalid:!!_},{children:[!!_&&e.jsx(l.default,{width:16,height:16}),_||C]})),e.jsxs(o.InputWrapper,Object.assign({variant:w,state:m,width:a.width,isActive:"active"===m||P,isInvalid:D,style:null!==(d=null==G?void 0:G.InputWrapper)&&void 0!==d?d:{},version:R},{children:[!!L&&e.jsx(o.IconHolder,Object.assign({variant:w,iconSize:V,onClick:()=>Y(null==f?void 0:f.callback),isLeft:!0,style:null!==(v=null==G?void 0:G.IconHolder)&&void 0!==v?v:{}},{children:e.jsx(L,{})})),!!k&&e.jsx(o.PrefixHolder,Object.assign({variant:w},{children:k})),"default"===w&&e.jsx(o.InputContainer,{children:ne()}),"small"===w&&e.jsx(o.InputContainerSmall,{children:ne()}),!!z&&e.jsx(o.IconHolder,Object.assign({variant:w,iconSize:V,onClick:()=>Y(null==j?void 0:j.callback),isLeft:!1},{children:e.jsx(z,{})})),!!O&&e.jsx(o.SuffixHolder,Object.assign({variant:w},{children:O})),E&&E.text&&e.jsx(n.Button,{buttonText:E.text,onClick:()=>Y(null==E?void 0:E.onClick)})]})),(!!g||!!y)&&e.jsxs(o.InputHeader,Object.assign({invalid:D},{children:[e.jsxs(r.BodySecondary,{children:[g,I?e.jsx("span",{children:"*"}):""]}),y>0&&e.jsxs(o.MaxCharStyle,{children:[null!==(x=null===(h=a.value)||void 0===h?void 0:h.length)&&void 0!==x?x:0,"/",y]})]}))]}))}));a.displayName="Input",exports.Input=a;
|
|
@@ -49,5 +49,6 @@ export interface InputProps {
|
|
|
49
49
|
skipFocus?: boolean;
|
|
50
50
|
version?: '1.0' | '2.0';
|
|
51
51
|
textControl?: boolean;
|
|
52
|
+
noMaxCharCheck?: boolean;
|
|
52
53
|
}
|
|
53
54
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as n,Fragment as t}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as d}from"../TypographyStyle.js";import v from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as m,IconHolder as f,PrefixHolder as x,InputContainer as b,InputContainerSmall as y,SuffixHolder as j,InputHeader as C,MaxCharStyle as I}from"./Input.styled.js";const w=i(((i,w)=>{var O,
|
|
1
|
+
import{jsxs as e,jsx as n,Fragment as t}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as d}from"../TypographyStyle.js";import v from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as m,IconHolder as f,PrefixHolder as x,InputContainer as b,InputContainerSmall as y,SuffixHolder as j,InputHeader as C,MaxCharStyle as I}from"./Input.styled.js";const w=i(((i,w)=>{var k,O,T,A,F;const{placeholder:L,leftIcon:M,rightIcon:z,labelText:B,maxCharLimit:D,isRequired:S,hintText:E,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==M?void 0:M.icon,_=null==z?void 0:z.icon,[ee,ne]=l(!1),[te,ie]=l(!1),[le,re]=l(),oe="small"===q?"18px":"22px",ae=r(h),[se,ce]=l(),ue=o(null),de=null!=w?w:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;de.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,de.current))}),[de]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=de.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{re(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;ne(!1),("invalid"===i.state||le)&&ne(!0),"active"===i.state&&(null===(e=de.current)||void 0===e||e.focus())}),[i.state,le]),a((()=>{ne(!!le)}),[le]);const ve=function(e){if(c(e)){for(var n=arguments.length,t=new Array(n>1?n-1:0),i=1;i<n;i++)t[i-1]=arguments[i];e(...t)}},he=e=>{const n=D||("zip"===K?6:60);X||W(G||"",e),Z||![8].includes(e.which)&&n>0&&e.target.value.length===n&&e.preventDefault()},pe=e=>{const n=e.target.value;W(n,e),i.textControl||ce(n);const t=H||u;if(!t||!c(t))return;const[l,r]=t(n,K,U);ne(!l),re(i.errorMessage?i.errorMessage:r)},ge=e=>{var n;i.skipFocus||ie(!0),ve(null===(n=i.onFocus)||void 0===n?void 0:n.call(i,e))},me=e=>{var n;i.skipFocus||ie(!1),ve(null===(n=i.onBlur)||void 0===n?void 0:n.call(i,e))},fe=()=>{var l;return e(t,{children:["multiline"!==K&&n("input",{id:i.id,style:null!==(l=null==ae?void 0:ae.input)&&void 0!==l?l:{},ref:de,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>ge(e),onBlur:e=>me(e),placeholder:L||"Enter here",onChange:pe,onKeyDown:e=>he(e)}),"multiline"===K&&n("textarea",{value:se,ref:de,onFocus:e=>ge(e),onBlur:e=>me(e),placeholder:L||"Enter here",onChange:pe,onKeyDown:e=>he(e),maxLength:D>0?D:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(k=null==ae?void 0:ae.RootContainer)&&void 0!==k?k:{}},{children:[!J&&(!!E||!!le)&&e(g,Object.assign({invalid:!!le},{children:[!!le&&n(v,{width:16,height:16}),le||E]})),e(m,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||te,isInvalid:ee,style:null!==(O=null==ae?void 0:ae.InputWrapper)&&void 0!==O?O:{},version:Y},{children:[!!$&&n(f,Object.assign({variant:q,iconSize:oe,onClick:()=>ve(null==M?void 0:M.callback),isLeft:!0,style:null!==(T=null==ae?void 0:ae.IconHolder)&&void 0!==T?T:{}},{children:n($,{})})),!!V&&n(x,Object.assign({variant:q},{children:V})),"default"===q&&n(b,{children:fe()}),"small"===q&&n(y,{children:fe()}),!!_&&n(f,Object.assign({variant:q,iconSize:oe,onClick:()=>ve(null==z?void 0:z.callback),isLeft:!1},{children:n(_,{})})),!!P&&n(j,Object.assign({variant:q},{children:P})),N&&N.text&&n(s,{buttonText:N.text,onClick:()=>ve(null==N?void 0:N.onClick)})]})),(!!B||!!D)&&e(C,Object.assign({invalid:ee},{children:[e(d,{children:[B,S?n("span",{children:"*"}):""]}),D>0&&e(I,{children:[null!==(F=null===(A=i.value)||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",D]})]}))]}))}));w.displayName="Input";export{w as Input};
|