@julseb-lib/react 0.0.19 → 0.0.22
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/index.cjs.js +9 -7
- package/dist/index.es.js +12 -8
- package/dist/index.umd.js +9 -7
- package/dist/lib/components/ComponentsMixins/ComponentsMixins.tsx +11 -9
- package/dist/lib/components/InputContainer/HelperBottom.tsx +8 -1
- package/dist/lib/types/component-items.ts +3 -0
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -277,13 +277,15 @@ React keys must be passed directly to JSX without using spread:
|
|
|
277
277
|
transition: ${P.SHORT};
|
|
278
278
|
color: ${({theme:d})=>m.ColorsHoverDefault(h,d)};
|
|
279
279
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
280
|
+
&:not(:disabled) {
|
|
281
|
+
@media ${I.HOVER} {
|
|
282
|
+
&:hover {
|
|
283
|
+
color: ${({theme:d})=>m.ColorsHoverHover(h,d)};
|
|
284
|
+
}
|
|
284
285
|
|
|
285
|
-
|
|
286
|
-
|
|
286
|
+
&:active {
|
|
287
|
+
color: ${({theme:d})=>m.ColorsHoverActive(h,d)};
|
|
288
|
+
}
|
|
287
289
|
}
|
|
288
290
|
}
|
|
289
291
|
}
|
|
@@ -1711,7 +1713,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
1711
1713
|
`,J2=s(K).attrs({tag:"small"})`
|
|
1712
1714
|
font-style: ${({$fontStyle:l})=>l};
|
|
1713
1715
|
width: ${({$hasIcon:l,$iconSize:e})=>l&&e&&`calc(100% - ${y.stringifyPx(e)} - ${L.XXS})`};
|
|
1714
|
-
`;S([w7,x7,y7,u3,w3,J2]);const Ye=({"data-testid":l,className:e,validation:c})=>{const{status:t,message:h,iconNotPassed:d=a.jsx(d4,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:e&&"ValidationIconBottom",size:U2("small"),color:"danger"}),iconNotPassedSize:r=U2("small"),iconPassed:i=a.jsx(p3,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:e&&"ValidationIconBottom",size:U2("small"),color:"success"}),iconPassedSize:f=U2("small"),iconBaseUrl:o}=c;return!h||!c||t===void 0?null:a.jsxs(u3,{"data-testid":l&&`${l}.ValidationHelper`,className:e&&"ValidationHelper",children:[a.jsx(w3,{"data-testid":l&&`${l}.ValidationHelper.IconContainer`,className:e&&"ValidationIconContainerBottom",$iconSize:t===!1?r:f,children:a.jsx(c2,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:e&&"ValidationIconBottom",icon:t===!1?d:i,size:t===!1?r:f,color:t===!1?"danger":"success",baseUrl:o})}),a.jsx(J2,{"data-testid":l&&`${l}.ValidationHelper.Text`,className:e&&"ValidationTextBottom",$hasIcon:!0,$iconSize:t===!1?r:f,children:h})]})},I2=({"data-testid":l,"aria-label":e,onClick:c,icon:t,iconSize:h=16,iconBaseUrl:d,text:r,disabled:i,inputBackground:f,validationStatus:o,className:p})=>a.jsx(z7,{"aria-label":e,"data-testid":l&&`${l}.Button`,className:p&&"InputButton",onClick:c,disabled:i,as:c?"button":"span",type:"button",$inputBackground:f,$validationStatus:o,$isSpan:!c,$disabled:i,children:t?a.jsx(c2,{icon:t,size:h,"data-testid":l&&`${l}.Button.Icon`,className:p&&"Icon",baseUrl:d}):r}),h0=({"data-testid":l,className:e,hasContainer:c,children:t,hasListOpen:h,isTextArea:d,inputBackground:r,inputVariant:i,validationStatus:f})=>a.jsx(v7,{"data-testid":c&&l?`${l}.Wrapper`:l,className:O(c&&e?"Wrapper":e,{Open:h}),$isTextArea:d,$inputBackground:r,$inputVariant:i,$validationStatus:f,children:t}),I0=v.forwardRef(({"data-testid":l,className:e,children:c,direction:t="down",inputBackground:h,validationStatus:d,isOpen:r,inputVariant:i},f)=>a.jsx(n7,{"data-testid":l&&`${l}.ListInput`,className:O({ListInput:e},{Open:r}),ref:f,$direction:t,$inputBackground:h,$validationStatus:d,$inputVariant:i,children:c})),e0=v.forwardRef(({"data-testid":l,className:e,validationStatus:c,inputBackground:t,children:h,isActive:d,onClick:r,readOnly:i,isHovered:f,...o},p)=>a.jsx(M7,{"data-testid":l&&`${l}.ListItem`,ref:p,className:O({ListItem:e},{Active:d},{Hovered:f}),onClick:r,$readOnly:i,$validationStatus:c,$inputBackground:t,...o,children:h})),B2=({"data-testid":l,className:e,prefix:c,inputBackground:t})=>c?a.jsx(k7,{"data-testid":l&&`${l}.Prefix`,className:e&&"Prefix",$inputBackground:t,children:c}):null,Fe=({"data-testid":l,className:e,suffix:c,inputBackground:t})=>c?a.jsx(b7,{"data-testid":l&&`${l}.Suffix`,className:e&&"Suffix",$inputBackground:t,children:c}):null,L2=v.forwardRef(({"data-testid":l,className:e,children:c,disabled:t},h)=>a.jsx(m7,{"data-testid":l&&`${l}.LeftContainer`,ref:h,className:e&&"LeftContainer",$disabled:t,children:c})),N0=v.forwardRef(({"data-testid":l,className:e,children:c,hasListOpen:t,isParent:h,inputAndListContainerStyle:d},r)=>a.jsx(u7,{"data-testid":l&&(h?l:`${l}.InputAndListContainer`),className:O({InputAndListContainer:e&&!h},{Open:t},h&&e),ref:r,style:d,children:c})),Ue=({"data-testid":l,className:e,helperBottom:c,iconBaseUrl:t})=>{if(typeof c=="string")return a.jsx(J2,{children:c});if(typeof c=="object"){const{element:h,text:d,textColor:r,fontStyle:i,icon:f,iconColor:o="primary",iconSize:p=U2("small")}=c;return h?a.jsx(J2,{children:h}):f?a.jsxs(u3,{"data-testid":l&&`${l}.HelperBottomContainer`,className:e&&"HelperBottomContainer",children:[a.jsx(w3,{"data-testid":l&&`${l}.HelperBottom.IconContainer`,className:e&&"BottomIconContainer",$iconSize:p,children:a.jsx(c2,{"data-testid":l&&`${l}.HelperBottom.IconContainer.Icon`,className:e&&"HelperBottomIcon",icon:f,color:o,size:p||U2("small"),baseUrl:t})}),a.jsx(J2,{"data-testid":l&&`${l}.HelperBottom.Text`,className:e&&"HelperBottomText",color:r,$fontStyle:i,$iconSize:p,$hasIcon:!0,children:c.text})]}):a.jsx(J2,{"data-testid":l&&`${l}.HelperBottom`,className:e&&"HelperBottom",color:r,$fontStyle:i,$hasIcon:!1,children:d})}return null},H7=v.forwardRef(({"data-testid":l,as:e,children:c,id:t,label:h,labelComment:d,helper:r,helperBottom:i,validation:f,counter:o,maxLength:p,value:z,className:n,hasListOpen:b,style:k,iconBaseUrl:g,...C},x)=>a.jsxs(w7,{"data-testid":l,ref:x,as:e,className:O(n,{Open:b}),style:k,...C,children:[(h||d)&&a.jsxs(x7,{"data-testid":l&&`${l}.Label`,className:n&&"Label",htmlFor:t,children:[h&&h,d&&a.jsxs(a.Fragment,{children:[" ",a.jsx(y7,{"data-testid":l&&`${l}.Label.Comment`,className:n&&"Comment",children:d})]})]}),r&&a.jsx(K,{"data-testid":l&&`${l}.Helper`,className:n&&"Helper",children:r}),c,i&&a.jsx(Ue,{"data-testid":l,className:n,helperBottom:i}),o&&a.jsxs(J2,{"data-testid":l&&`${l}.Counter`,className:n&&"Counter",color:"gray",$fontStyle:"italic",children:[z.toString().length,p&&`/${p}`]}),f&&a.jsx(Ye,{"data-testid":l,className:n,validation:f})]})),Ze=`calc(${W.BODY} * ${f2.BODY} * 4 + ${L.XXS} * 2)`,D2=s.input`
|
|
1716
|
+
`;S([w7,x7,y7,u3,w3,J2]);const Ye=({"data-testid":l,className:e,validation:c})=>{const{status:t,message:h,iconNotPassed:d=a.jsx(d4,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:e&&"ValidationIconBottom",size:U2("small"),color:"danger"}),iconNotPassedSize:r=U2("small"),iconPassed:i=a.jsx(p3,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:e&&"ValidationIconBottom",size:U2("small"),color:"success"}),iconPassedSize:f=U2("small"),iconBaseUrl:o}=c;return!h||!c||t===void 0?null:a.jsxs(u3,{"data-testid":l&&`${l}.ValidationHelper`,className:e&&"ValidationHelper",children:[a.jsx(w3,{"data-testid":l&&`${l}.ValidationHelper.IconContainer`,className:e&&"ValidationIconContainerBottom",$iconSize:t===!1?r:f,children:a.jsx(c2,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:e&&"ValidationIconBottom",icon:t===!1?d:i,size:t===!1?r:f,color:t===!1?"danger":"success",baseUrl:o})}),a.jsx(J2,{"data-testid":l&&`${l}.ValidationHelper.Text`,className:e&&"ValidationTextBottom",$hasIcon:!0,$iconSize:t===!1?r:f,children:h})]})},I2=({"data-testid":l,"aria-label":e,onClick:c,icon:t,iconSize:h=16,iconBaseUrl:d,text:r,disabled:i,inputBackground:f,validationStatus:o,className:p})=>a.jsx(z7,{"aria-label":e,"data-testid":l&&`${l}.Button`,className:p&&"InputButton",onClick:c,disabled:i,as:c?"button":"span",type:"button",$inputBackground:f,$validationStatus:o,$isSpan:!c,$disabled:i,children:t?a.jsx(c2,{icon:t,size:h,"data-testid":l&&`${l}.Button.Icon`,className:p&&"Icon",baseUrl:d}):r}),h0=({"data-testid":l,className:e,hasContainer:c,children:t,hasListOpen:h,isTextArea:d,inputBackground:r,inputVariant:i,validationStatus:f})=>a.jsx(v7,{"data-testid":c&&l?`${l}.Wrapper`:l,className:O(c&&e?"Wrapper":e,{Open:h}),$isTextArea:d,$inputBackground:r,$inputVariant:i,$validationStatus:f,children:t}),I0=v.forwardRef(({"data-testid":l,className:e,children:c,direction:t="down",inputBackground:h,validationStatus:d,isOpen:r,inputVariant:i},f)=>a.jsx(n7,{"data-testid":l&&`${l}.ListInput`,className:O({ListInput:e},{Open:r}),ref:f,$direction:t,$inputBackground:h,$validationStatus:d,$inputVariant:i,children:c})),e0=v.forwardRef(({"data-testid":l,className:e,validationStatus:c,inputBackground:t,children:h,isActive:d,onClick:r,readOnly:i,isHovered:f,...o},p)=>a.jsx(M7,{"data-testid":l&&`${l}.ListItem`,ref:p,className:O({ListItem:e},{Active:d},{Hovered:f}),onClick:r,$readOnly:i,$validationStatus:c,$inputBackground:t,...o,children:h})),B2=({"data-testid":l,className:e,prefix:c,inputBackground:t})=>c?a.jsx(k7,{"data-testid":l&&`${l}.Prefix`,className:e&&"Prefix",$inputBackground:t,children:c}):null,Fe=({"data-testid":l,className:e,suffix:c,inputBackground:t})=>c?a.jsx(b7,{"data-testid":l&&`${l}.Suffix`,className:e&&"Suffix",$inputBackground:t,children:c}):null,L2=v.forwardRef(({"data-testid":l,className:e,children:c,disabled:t},h)=>a.jsx(m7,{"data-testid":l&&`${l}.LeftContainer`,ref:h,className:e&&"LeftContainer",$disabled:t,children:c})),N0=v.forwardRef(({"data-testid":l,className:e,children:c,hasListOpen:t,isParent:h,inputAndListContainerStyle:d},r)=>a.jsx(u7,{"data-testid":l&&(h?l:`${l}.InputAndListContainer`),className:O({InputAndListContainer:e&&!h},{Open:t},h&&e),ref:r,style:d,children:c})),Ue=({"data-testid":l,className:e,helperBottom:c,iconBaseUrl:t})=>{if(typeof c=="string")return a.jsx(J2,{children:c});if(typeof c=="object"){const{element:h,text:d,textColor:r,fontStyle:i,icon:f,iconColor:o="primary",iconSize:p=U2("small"),linkColor:z}=c;return h?a.jsx(J2,{linkColor:z,children:h}):f?a.jsxs(u3,{"data-testid":l&&`${l}.HelperBottomContainer`,className:e&&"HelperBottomContainer",children:[a.jsx(w3,{"data-testid":l&&`${l}.HelperBottom.IconContainer`,className:e&&"BottomIconContainer",$iconSize:p,children:a.jsx(c2,{"data-testid":l&&`${l}.HelperBottom.IconContainer.Icon`,className:e&&"HelperBottomIcon",icon:f,color:o,size:p||U2("small"),baseUrl:t})}),a.jsx(J2,{"data-testid":l&&`${l}.HelperBottom.Text`,className:e&&"HelperBottomText",color:r,linkColor:z,$fontStyle:i,$iconSize:p,$hasIcon:!0,children:c.text})]}):a.jsx(J2,{"data-testid":l&&`${l}.HelperBottom`,className:e&&"HelperBottom",color:r,$fontStyle:i,$hasIcon:!1,children:d})}return null},H7=v.forwardRef(({"data-testid":l,as:e,children:c,id:t,label:h,labelComment:d,helper:r,helperBottom:i,validation:f,counter:o,maxLength:p,value:z,className:n,hasListOpen:b,style:k,iconBaseUrl:g,...C},x)=>a.jsxs(w7,{"data-testid":l,ref:x,as:e,className:O(n,{Open:b}),style:k,...C,children:[(h||d)&&a.jsxs(x7,{"data-testid":l&&`${l}.Label`,className:n&&"Label",htmlFor:t,children:[h&&h,d&&a.jsxs(a.Fragment,{children:[" ",a.jsx(y7,{"data-testid":l&&`${l}.Label.Comment`,className:n&&"Comment",children:d})]})]}),r&&a.jsx(K,{"data-testid":l&&`${l}.Helper`,className:n&&"Helper",children:r}),c,i&&a.jsx(Ue,{"data-testid":l,className:n,helperBottom:i}),o&&a.jsxs(J2,{"data-testid":l&&`${l}.Counter`,className:n&&"Counter",color:"gray",$fontStyle:"italic",children:[z.toString().length,p&&`/${p}`]}),f&&a.jsx(Ye,{"data-testid":l,className:n,validation:f})]})),Ze=`calc(${W.BODY} * ${f2.BODY} * 4 + ${L.XXS} * 2)`,D2=s.input`
|
|
1715
1717
|
${W2}
|
|
1716
1718
|
|
|
1717
1719
|
${({$isSelect:l})=>l&&s.css`
|
package/dist/index.es.js
CHANGED
|
@@ -4505,13 +4505,15 @@ const m = new pl(), k3 = ({
|
|
|
4505
4505
|
transition: ${F.SHORT};
|
|
4506
4506
|
color: ${({ theme: d }) => m.ColorsHoverDefault(h, d)};
|
|
4507
4507
|
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4508
|
+
&:not(:disabled) {
|
|
4509
|
+
@media ${S.HOVER} {
|
|
4510
|
+
&:hover {
|
|
4511
|
+
color: ${({ theme: d }) => m.ColorsHoverHover(h, d)};
|
|
4512
|
+
}
|
|
4512
4513
|
|
|
4513
|
-
|
|
4514
|
-
|
|
4514
|
+
&:active {
|
|
4515
|
+
color: ${({ theme: d }) => m.ColorsHoverActive(h, d)};
|
|
4516
|
+
}
|
|
4515
4517
|
}
|
|
4516
4518
|
}
|
|
4517
4519
|
}
|
|
@@ -10988,9 +10990,10 @@ const Gc = ({
|
|
|
10988
10990
|
fontStyle: i,
|
|
10989
10991
|
icon: r,
|
|
10990
10992
|
iconColor: s = "primary",
|
|
10991
|
-
iconSize: o = Q2("small")
|
|
10993
|
+
iconSize: o = Q2("small"),
|
|
10994
|
+
linkColor: p
|
|
10992
10995
|
} = e;
|
|
10993
|
-
return h ? /* @__PURE__ */ a.jsx(i0, { children: h }) : r ? /* @__PURE__ */ a.jsxs(
|
|
10996
|
+
return h ? /* @__PURE__ */ a.jsx(i0, { linkColor: p, children: h }) : r ? /* @__PURE__ */ a.jsxs(
|
|
10994
10997
|
R3,
|
|
10995
10998
|
{
|
|
10996
10999
|
"data-testid": l && `${l}.HelperBottomContainer`,
|
|
@@ -11021,6 +11024,7 @@ const Gc = ({
|
|
|
11021
11024
|
"data-testid": l && `${l}.HelperBottom.Text`,
|
|
11022
11025
|
className: c && "HelperBottomText",
|
|
11023
11026
|
color: f,
|
|
11027
|
+
linkColor: p,
|
|
11024
11028
|
$fontStyle: i,
|
|
11025
11029
|
$iconSize: o,
|
|
11026
11030
|
$hasIcon: !0,
|
package/dist/index.umd.js
CHANGED
|
@@ -277,13 +277,15 @@ React keys must be passed directly to JSX without using spread:
|
|
|
277
277
|
transition: ${P.SHORT};
|
|
278
278
|
color: ${({theme:d})=>s.ColorsHoverDefault(h,d)};
|
|
279
279
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
280
|
+
&:not(:disabled) {
|
|
281
|
+
@media ${N.HOVER} {
|
|
282
|
+
&:hover {
|
|
283
|
+
color: ${({theme:d})=>s.ColorsHoverHover(h,d)};
|
|
284
|
+
}
|
|
284
285
|
|
|
285
|
-
|
|
286
|
-
|
|
286
|
+
&:active {
|
|
287
|
+
color: ${({theme:d})=>s.ColorsHoverActive(h,d)};
|
|
288
|
+
}
|
|
287
289
|
}
|
|
288
290
|
}
|
|
289
291
|
}
|
|
@@ -1711,7 +1713,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
1711
1713
|
`,e0=m(X).attrs({tag:"small"})`
|
|
1712
1714
|
font-style: ${({$fontStyle:l})=>l};
|
|
1713
1715
|
width: ${({$hasIcon:l,$iconSize:c})=>l&&c&&`calc(100% - ${C.stringifyPx(c)} - ${j.XXS})`};
|
|
1714
|
-
`;I([F4,U4,Z4,f3,r3,e0]);const pc=({"data-testid":l,className:c,validation:e})=>{const{status:t,message:h,iconNotPassed:d=a.jsx(x1,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:c&&"ValidationIconBottom",size:F2("small"),color:"danger"}),iconNotPassedSize:f=F2("small"),iconPassed:i=a.jsx(X0,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:c&&"ValidationIconBottom",size:F2("small"),color:"success"}),iconPassedSize:r=F2("small"),iconBaseUrl:o}=e;return!h||!e||t===void 0?null:a.jsxs(f3,{"data-testid":l&&`${l}.ValidationHelper`,className:c&&"ValidationHelper",children:[a.jsx(r3,{"data-testid":l&&`${l}.ValidationHelper.IconContainer`,className:c&&"ValidationIconContainerBottom",$iconSize:t===!1?f:r,children:a.jsx(a2,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:c&&"ValidationIconBottom",icon:t===!1?d:i,size:t===!1?f:r,color:t===!1?"danger":"success",baseUrl:o})}),a.jsx(e0,{"data-testid":l&&`${l}.ValidationHelper.Text`,className:c&&"ValidationTextBottom",$hasIcon:!0,$iconSize:t===!1?f:r,children:h})]})},E2=({"data-testid":l,"aria-label":c,onClick:e,icon:t,iconSize:h=16,iconBaseUrl:d,text:f,disabled:i,inputBackground:r,validationStatus:o,className:z})=>a.jsx(V4,{"aria-label":c,"data-testid":l&&`${l}.Button`,className:z&&"InputButton",onClick:e,disabled:i,as:e?"button":"span",type:"button",$inputBackground:r,$validationStatus:o,$isSpan:!e,$disabled:i,children:t?a.jsx(a2,{icon:t,size:h,"data-testid":l&&`${l}.Button.Icon`,className:z&&"Icon",baseUrl:d}):f}),a0=({"data-testid":l,className:c,hasContainer:e,children:t,hasListOpen:h,isTextArea:d,inputBackground:f,inputVariant:i,validationStatus:r})=>a.jsx(D4,{"data-testid":e&&l?`${l}.Wrapper`:l,className:O(e&&c?"Wrapper":c,{Open:h}),$isTextArea:d,$inputBackground:f,$inputVariant:i,$validationStatus:r,children:t}),R0=v.forwardRef(({"data-testid":l,className:c,children:e,direction:t="down",inputBackground:h,validationStatus:d,isOpen:f,inputVariant:i},r)=>a.jsx(T4,{"data-testid":l&&`${l}.ListInput`,className:O({ListInput:c},{Open:f}),ref:r,$direction:t,$inputBackground:h,$validationStatus:d,$inputVariant:i,children:e})),t0=v.forwardRef(({"data-testid":l,className:c,validationStatus:e,inputBackground:t,children:h,isActive:d,onClick:f,readOnly:i,isHovered:r,...o},z)=>a.jsx(G4,{"data-testid":l&&`${l}.ListItem`,ref:z,className:O({ListItem:c},{Active:d},{Hovered:r}),onClick:f,$readOnly:i,$validationStatus:e,$inputBackground:t,...o,children:h})),O2=({"data-testid":l,className:c,prefix:e,inputBackground:t})=>e?a.jsx(B4,{"data-testid":l&&`${l}.Prefix`,className:c&&"Prefix",$inputBackground:t,children:e}):null,vc=({"data-testid":l,className:c,suffix:e,inputBackground:t})=>e?a.jsx(P4,{"data-testid":l&&`${l}.Suffix`,className:c&&"Suffix",$inputBackground:t,children:e}):null,$2=v.forwardRef(({"data-testid":l,className:c,children:e,disabled:t},h)=>a.jsx(I4,{"data-testid":l&&`${l}.LeftContainer`,ref:h,className:c&&"LeftContainer",$disabled:t,children:e})),L0=v.forwardRef(({"data-testid":l,className:c,children:e,hasListOpen:t,isParent:h,inputAndListContainerStyle:d},f)=>a.jsx(Y4,{"data-testid":l&&(h?l:`${l}.InputAndListContainer`),className:O({InputAndListContainer:c&&!h},{Open:t},h&&c),ref:f,style:d,children:e})),nc=({"data-testid":l,className:c,helperBottom:e,iconBaseUrl:t})=>{if(typeof e=="string")return a.jsx(e0,{children:e});if(typeof e=="object"){const{element:h,text:d,textColor:f,fontStyle:i,icon:r,iconColor:o="primary",iconSize:z=F2("small")}=e;return h?a.jsx(e0,{children:h}):r?a.jsxs(f3,{"data-testid":l&&`${l}.HelperBottomContainer`,className:c&&"HelperBottomContainer",children:[a.jsx(r3,{"data-testid":l&&`${l}.HelperBottom.IconContainer`,className:c&&"BottomIconContainer",$iconSize:z,children:a.jsx(a2,{"data-testid":l&&`${l}.HelperBottom.IconContainer.Icon`,className:c&&"HelperBottomIcon",icon:r,color:o,size:z||F2("small"),baseUrl:t})}),a.jsx(e0,{"data-testid":l&&`${l}.HelperBottom.Text`,className:c&&"HelperBottomText",color:f,$fontStyle:i,$iconSize:z,$hasIcon:!0,children:e.text})]}):a.jsx(e0,{"data-testid":l&&`${l}.HelperBottom`,className:c&&"HelperBottom",color:f,$fontStyle:i,$hasIcon:!1,children:d})}return null},W4=v.forwardRef(({"data-testid":l,as:c,children:e,id:t,label:h,labelComment:d,helper:f,helperBottom:i,validation:r,counter:o,maxLength:z,value:p,className:n,hasListOpen:b,style:k,iconBaseUrl:g,...A},H)=>a.jsxs(F4,{"data-testid":l,ref:H,as:c,className:O(n,{Open:b}),style:k,...A,children:[(h||d)&&a.jsxs(U4,{"data-testid":l&&`${l}.Label`,className:n&&"Label",htmlFor:t,children:[h&&h,d&&a.jsxs(a.Fragment,{children:[" ",a.jsx(Z4,{"data-testid":l&&`${l}.Label.Comment`,className:n&&"Comment",children:d})]})]}),f&&a.jsx(X,{"data-testid":l&&`${l}.Helper`,className:n&&"Helper",children:f}),e,i&&a.jsx(nc,{"data-testid":l,className:n,helperBottom:i}),o&&a.jsxs(e0,{"data-testid":l&&`${l}.Counter`,className:n&&"Counter",color:"gray",$fontStyle:"italic",children:[p.toString().length,z&&`/${z}`]}),r&&a.jsx(pc,{"data-testid":l,className:n,validation:r})]})),Mc=`calc(${K.BODY} * ${m2.BODY} * 4 + ${j.XXS} * 2)`,V2=m.input`
|
|
1716
|
+
`;I([F4,U4,Z4,f3,r3,e0]);const pc=({"data-testid":l,className:c,validation:e})=>{const{status:t,message:h,iconNotPassed:d=a.jsx(x1,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:c&&"ValidationIconBottom",size:F2("small"),color:"danger"}),iconNotPassedSize:f=F2("small"),iconPassed:i=a.jsx(X0,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:c&&"ValidationIconBottom",size:F2("small"),color:"success"}),iconPassedSize:r=F2("small"),iconBaseUrl:o}=e;return!h||!e||t===void 0?null:a.jsxs(f3,{"data-testid":l&&`${l}.ValidationHelper`,className:c&&"ValidationHelper",children:[a.jsx(r3,{"data-testid":l&&`${l}.ValidationHelper.IconContainer`,className:c&&"ValidationIconContainerBottom",$iconSize:t===!1?f:r,children:a.jsx(a2,{"data-testid":l&&`${l}.ValidationHelper.IconContainer.Icon`,className:c&&"ValidationIconBottom",icon:t===!1?d:i,size:t===!1?f:r,color:t===!1?"danger":"success",baseUrl:o})}),a.jsx(e0,{"data-testid":l&&`${l}.ValidationHelper.Text`,className:c&&"ValidationTextBottom",$hasIcon:!0,$iconSize:t===!1?f:r,children:h})]})},E2=({"data-testid":l,"aria-label":c,onClick:e,icon:t,iconSize:h=16,iconBaseUrl:d,text:f,disabled:i,inputBackground:r,validationStatus:o,className:z})=>a.jsx(V4,{"aria-label":c,"data-testid":l&&`${l}.Button`,className:z&&"InputButton",onClick:e,disabled:i,as:e?"button":"span",type:"button",$inputBackground:r,$validationStatus:o,$isSpan:!e,$disabled:i,children:t?a.jsx(a2,{icon:t,size:h,"data-testid":l&&`${l}.Button.Icon`,className:z&&"Icon",baseUrl:d}):f}),a0=({"data-testid":l,className:c,hasContainer:e,children:t,hasListOpen:h,isTextArea:d,inputBackground:f,inputVariant:i,validationStatus:r})=>a.jsx(D4,{"data-testid":e&&l?`${l}.Wrapper`:l,className:O(e&&c?"Wrapper":c,{Open:h}),$isTextArea:d,$inputBackground:f,$inputVariant:i,$validationStatus:r,children:t}),R0=v.forwardRef(({"data-testid":l,className:c,children:e,direction:t="down",inputBackground:h,validationStatus:d,isOpen:f,inputVariant:i},r)=>a.jsx(T4,{"data-testid":l&&`${l}.ListInput`,className:O({ListInput:c},{Open:f}),ref:r,$direction:t,$inputBackground:h,$validationStatus:d,$inputVariant:i,children:e})),t0=v.forwardRef(({"data-testid":l,className:c,validationStatus:e,inputBackground:t,children:h,isActive:d,onClick:f,readOnly:i,isHovered:r,...o},z)=>a.jsx(G4,{"data-testid":l&&`${l}.ListItem`,ref:z,className:O({ListItem:c},{Active:d},{Hovered:r}),onClick:f,$readOnly:i,$validationStatus:e,$inputBackground:t,...o,children:h})),O2=({"data-testid":l,className:c,prefix:e,inputBackground:t})=>e?a.jsx(B4,{"data-testid":l&&`${l}.Prefix`,className:c&&"Prefix",$inputBackground:t,children:e}):null,vc=({"data-testid":l,className:c,suffix:e,inputBackground:t})=>e?a.jsx(P4,{"data-testid":l&&`${l}.Suffix`,className:c&&"Suffix",$inputBackground:t,children:e}):null,$2=v.forwardRef(({"data-testid":l,className:c,children:e,disabled:t},h)=>a.jsx(I4,{"data-testid":l&&`${l}.LeftContainer`,ref:h,className:c&&"LeftContainer",$disabled:t,children:e})),L0=v.forwardRef(({"data-testid":l,className:c,children:e,hasListOpen:t,isParent:h,inputAndListContainerStyle:d},f)=>a.jsx(Y4,{"data-testid":l&&(h?l:`${l}.InputAndListContainer`),className:O({InputAndListContainer:c&&!h},{Open:t},h&&c),ref:f,style:d,children:e})),nc=({"data-testid":l,className:c,helperBottom:e,iconBaseUrl:t})=>{if(typeof e=="string")return a.jsx(e0,{children:e});if(typeof e=="object"){const{element:h,text:d,textColor:f,fontStyle:i,icon:r,iconColor:o="primary",iconSize:z=F2("small"),linkColor:p}=e;return h?a.jsx(e0,{linkColor:p,children:h}):r?a.jsxs(f3,{"data-testid":l&&`${l}.HelperBottomContainer`,className:c&&"HelperBottomContainer",children:[a.jsx(r3,{"data-testid":l&&`${l}.HelperBottom.IconContainer`,className:c&&"BottomIconContainer",$iconSize:z,children:a.jsx(a2,{"data-testid":l&&`${l}.HelperBottom.IconContainer.Icon`,className:c&&"HelperBottomIcon",icon:r,color:o,size:z||F2("small"),baseUrl:t})}),a.jsx(e0,{"data-testid":l&&`${l}.HelperBottom.Text`,className:c&&"HelperBottomText",color:f,linkColor:p,$fontStyle:i,$iconSize:z,$hasIcon:!0,children:e.text})]}):a.jsx(e0,{"data-testid":l&&`${l}.HelperBottom`,className:c&&"HelperBottom",color:f,$fontStyle:i,$hasIcon:!1,children:d})}return null},W4=v.forwardRef(({"data-testid":l,as:c,children:e,id:t,label:h,labelComment:d,helper:f,helperBottom:i,validation:r,counter:o,maxLength:z,value:p,className:n,hasListOpen:b,style:k,iconBaseUrl:g,...A},H)=>a.jsxs(F4,{"data-testid":l,ref:H,as:c,className:O(n,{Open:b}),style:k,...A,children:[(h||d)&&a.jsxs(U4,{"data-testid":l&&`${l}.Label`,className:n&&"Label",htmlFor:t,children:[h&&h,d&&a.jsxs(a.Fragment,{children:[" ",a.jsx(Z4,{"data-testid":l&&`${l}.Label.Comment`,className:n&&"Comment",children:d})]})]}),f&&a.jsx(X,{"data-testid":l&&`${l}.Helper`,className:n&&"Helper",children:f}),e,i&&a.jsx(nc,{"data-testid":l,className:n,helperBottom:i}),o&&a.jsxs(e0,{"data-testid":l&&`${l}.Counter`,className:n&&"Counter",color:"gray",$fontStyle:"italic",children:[p.toString().length,z&&`/${z}`]}),r&&a.jsx(pc,{"data-testid":l,className:n,validation:r})]})),Mc=`calc(${K.BODY} * ${m2.BODY} * 4 + ${j.XXS} * 2)`,V2=m.input`
|
|
1715
1717
|
${U2}
|
|
1716
1718
|
|
|
1717
1719
|
${({$isSelect:l})=>l&&m.css`
|
|
@@ -203,15 +203,17 @@ export const TextBaseMixin = ({
|
|
|
203
203
|
transition: ${TRANSITIONS.SHORT};
|
|
204
204
|
color: ${({ theme }) => Mixins.ColorsHoverDefault($linkColor, theme)};
|
|
205
205
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
206
|
+
&:not(:disabled) {
|
|
207
|
+
@media ${BREAKPOINTS.HOVER} {
|
|
208
|
+
&:hover {
|
|
209
|
+
color: ${({ theme }) =>
|
|
210
|
+
Mixins.ColorsHoverHover($linkColor, theme)};
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
&:active {
|
|
214
|
+
color: ${({ theme }) =>
|
|
215
|
+
Mixins.ColorsHoverActive($linkColor, theme)};
|
|
216
|
+
}
|
|
215
217
|
}
|
|
216
218
|
}
|
|
217
219
|
}
|
|
@@ -29,9 +29,15 @@ export const HelperBottom: FC<ILibHelperBottom> = ({
|
|
|
29
29
|
icon,
|
|
30
30
|
iconColor = "primary",
|
|
31
31
|
iconSize = getIconSizeFromFont("small") as number,
|
|
32
|
+
linkColor,
|
|
32
33
|
} = helperBottom
|
|
33
34
|
|
|
34
|
-
if (element)
|
|
35
|
+
if (element)
|
|
36
|
+
return (
|
|
37
|
+
<StyledHelperBottom linkColor={linkColor}>
|
|
38
|
+
{element}
|
|
39
|
+
</StyledHelperBottom>
|
|
40
|
+
)
|
|
35
41
|
|
|
36
42
|
if (icon)
|
|
37
43
|
return (
|
|
@@ -63,6 +69,7 @@ export const HelperBottom: FC<ILibHelperBottom> = ({
|
|
|
63
69
|
data-testid={testid && `${testid}.HelperBottom.Text`}
|
|
64
70
|
className={className && "HelperBottomText"}
|
|
65
71
|
color={textColor}
|
|
72
|
+
linkColor={linkColor}
|
|
66
73
|
$fontStyle={fontStyle}
|
|
67
74
|
$iconSize={iconSize}
|
|
68
75
|
$hasIcon
|
|
@@ -11,6 +11,7 @@ import type {
|
|
|
11
11
|
ReactChildren,
|
|
12
12
|
LibMessageType,
|
|
13
13
|
CssFontStyle,
|
|
14
|
+
LibColorsHover,
|
|
14
15
|
} from "./"
|
|
15
16
|
|
|
16
17
|
/*====================== Base ======================*/
|
|
@@ -524,6 +525,7 @@ interface HelperBottomWithText {
|
|
|
524
525
|
iconColor?: LibAllColors
|
|
525
526
|
iconSize?: number
|
|
526
527
|
element?: never
|
|
528
|
+
linkColor?: LibColorsHover
|
|
527
529
|
}
|
|
528
530
|
|
|
529
531
|
interface HelperBottomWithElement {
|
|
@@ -534,6 +536,7 @@ interface HelperBottomWithElement {
|
|
|
534
536
|
iconColor?: never
|
|
535
537
|
iconSize?: never
|
|
536
538
|
element: ReactChildren
|
|
539
|
+
linkColor?: LibColorsHover
|
|
537
540
|
}
|
|
538
541
|
|
|
539
542
|
export type LibHelperBottom =
|