@leafygreen-ui/form-field
Advanced tools
@leafygreen-ui/form-field - npm Package Compare versions
Comparing version 1.2.2 to 1.2.3
| # @leafygreen-ui/form-field | ||
| ## 1.2.3 | ||
| ### Patch Changes | ||
| - 3273045c: Correctly sets the `readOnly` prop in the `useFormFieldProps` hook. Previously, `readOnly` was only added to an input if `disabled` was true. Now, passing the `readOnly` prop adds it to the resulting input. | ||
| - Updated dependencies [ae44834e] | ||
| - @leafygreen-ui/icon@12.4.0 | ||
| ## 1.2.2 | ||
@@ -4,0 +12,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import e,{useContext as n,forwardRef as r}from"react";import{css as t,cx as i}from"@leafygreen-ui/emotion";import a,{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import{Size as l,spacing as s,typeScales as d,Variant as c,color as u,fontFamilies as p,fontWeights as f,transitionDuration as b,focusRing as m,hoverRing as g}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as h,Error as v,Body as y,Label as x,Description as w}from"@leafygreen-ui/typography";import k from"@leafygreen-ui/icon";import{useIdAllocator as O}from"@leafygreen-ui/hooks";import{createUniqueClassName as E,Theme as z}from"@leafygreen-ui/lib";import{palette as N}from"@leafygreen-ui/palette";var j="lg-form_field",S={root:j,description:"".concat(j,"-description"),errorMessage:"".concat(j,"-error_message"),feedback:"".concat(j,"-feedback"),input:"".concat(j,"-input"),label:"".concat(j,"-label"),optional:"".concat(j,"-optional"),successMessage:"".concat(j,"-success_message")},P={error:"This input needs your attention",success:"Success"};function F(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function M(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?F(Object(r),!0).forEach((function(n){I(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):F(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,r){return(n=D(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function H(){return H=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},H.apply(this,arguments)}function V(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function L(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var _,C,T,W,X,q,A,B,G,J,K={None:"none",Error:"error",Valid:"valid"},Q={disabled:!1,size:l.Default,state:K.None},R=e.createContext(Q),U=function(n){var r=n.value,t=n.children;return e.createElement(R.Provider,{value:r},t)},Y=function(){return n(R)},Z=function(e){var n=e.baseFontSize,r=e.size;return r===l.XSmall||r===l.Small?t(_||(_=L(["\n font-size: ","px;\n line-height: ","px;\n "])),d.body1.fontSize,d.body1.lineHeight):r===l.Default?t(C||(C=L(["\n font-size: ","px;\n line-height: ","px;\n "])),n,d.body1.lineHeight):r===l.Large?t(T||(T=L(["\n font-size: ","px;\n line-height: ","px;\n "])),d.large.fontSize,d.large.lineHeight):void 0},$=function(e){return e===K.Error?c.Error:e===K.Valid?c.Success:c.Primary},ee=t(W||(W=L(["\n display: flex;\n flex-direction: column;\n"]))),ne=t(X||(X=L(["\n margin-bottom: ","px;\n"])),s[100]),re=t(q||(q=L(["\n display: flex;\n gap: ","px;\n"])),s[100]),te=t(A||(A=L(["\n padding-top: ","px;\n"])),s[100]),ie=t(B||(B=L(["\n opacity: 0;\n"]))),ae=t(G||(G=L(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),oe=function(e){return t(J||(J=L(["\n height: ","px;\n "])),e===l.Large?d.large.lineHeight:d.body1.lineHeight)},le=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],se=function(n){var r=n.baseFontSize,t=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,d=n.id,c=n.size,p=n.state,f=n.successMessage,b=V(n,le),m=o().theme,g=h(r),x=Z({baseFontSize:g,size:c}),w=p===K.Error,O=(w||p===K.Valid)&&!t,E=O?{glyph:w?"Warning":"Checkmark",fill:u[m].icon[$(p)].default,title:w?"Error":"Valid"}:void 0;return e.createElement("div",H({id:d,"data-lgid":S.feedback,"data-testid":S.feedback,className:i(re,I(I({},te,O),ie,s)),"aria-live":"polite","aria-relevant":"all"},b),O&&e.createElement(e.Fragment,null,E&&e.createElement("div",{className:i(ae,oe(c))},e.createElement(k,H({},E,{"aria-hidden":!0}))),w?e.createElement(v,{"data-lgid":S.errorMessage,"data-testid":S.errorMessage,className:x},a):e.createElement(y,{"data-lgid":S.successMessage,"data-testid":S.successMessage,className:x},f)))};se.displayName="FormFieldFeedback";var de,ce,ue,pe,fe,be,me,ge,he,ve,ye,xe,we,ke,Oe,Ee,ze=["label","description","state","id","disabled"],Ne=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],je=r((function(n,r){var t=n.label,o=n.description,s=n.children,d=n.baseFontSize,c=n.state,u=void 0===c?K.None:c,p=n.size,f=void 0===p?l.Default:p,b=n.disabled,m=void 0!==b&&b,g=n.errorMessage,v=void 0===g?P.error:g,y=n.successMessage,k=void 0===y?P.success:y,E=n.className,z=n.darkMode,N=n.optional,j=n.id,F=V(n,Ne),D=h(d),L=Z({baseFontSize:D,size:f}),_=function(e){var n,r=e.label,t=e.description,i=e.state,a=e.id,o=e.disabled,l=V(e,ze),s=O({prefix:S.label}),d=O({prefix:S.description}),c=O({prefix:S.feedback}),u=O({prefix:S.input}),p=null!=a?a:u,f=i===K.Error,b=i!==K.None,m=r?s:l["aria-labelledby"],g=r||m?void 0:l["aria-label"];return{labelId:s,descriptionId:d,feedbackId:c,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":"".concat(t?d:""," ").concat(b?c:"").trim(),"aria-label":g,"aria-disabled":o,readOnly:o,"aria-invalid":null!==(n=l["aria-invalid"])&&void 0!==n?n:f}}}(M({label:t,description:o,state:u,id:j,disabled:m},F)),C=_.labelId,T=_.descriptionId,W=_.feedbackId,X=_.inputId,q=_.inputProps,A={baseFontSize:D,disabled:m,errorMessage:v,id:W,size:f,state:u,successMessage:k};return e.createElement(a,{darkMode:z},e.createElement(U,{value:{disabled:m,size:f,state:u,inputProps:q,optional:N}},e.createElement("div",H({className:i(L,E),ref:r},F),e.createElement("div",{className:i(ee,I({},ne,!(!t&&!o)))},t&&e.createElement(x,{"data-testid":S.label,className:L,htmlFor:X,id:C,disabled:m},t),o&&e.createElement(w,{"data-testid":S.description,className:L,id:T,disabled:m},o)),s,e.createElement(se,A))))}));je.displayName="FormField";var Se=E("form-field-input"),Pe=E("form-field-icon"),Fe=function(e){return"0 0 0 100px ".concat(e," inset")},Me=t(de||(de=L(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-size: inherit;\n line-height: inherit;\n font-family: ",";\n width: 100%;\n height: 36px;\n font-weight: ",";\n border: 1px solid;\n z-index: 1;\n outline: none;\n border-radius: 6px;\n transition: ","ms ease-in-out;\n transition-property: border-color, box-shadow;\n z-index: 0;\n\n & ."," {\n font-family: ",";\n color: inherit;\n background-color: inherit;\n font-size: inherit;\n line-height: inherit;\n outline: none;\n border: none;\n }\n\n & ."," svg,\n & svg {\n min-height: 16px;\n min-width: 16px;\n }\n"])),s[1],p.default,f.regular,b.default,Se,p.default,Pe),De=function(e){return t(ue||(ue=L(["\n @supports selector(:has(a, b)) {\n &:focus-within:not(:has(.",":focus)) {\n ",'\n }\n }\n\n /* Fallback for when "has" is unsupported */\n @supports not selector(:has(a, b)) {\n &:focus-within {\n ',"\n }\n }\n"])),Pe,e,e)},Ie=I(I({},z.Light,De("\n {\n box-shadow: ".concat(m.light.input,";\n border-color: ").concat(N.white,";\n }\n "))),z.Dark,De("\n {\n box-shadow: ".concat(m.dark.input,";\n border-color: ").concat(N.gray.dark4,";\n }\n "))),He="&:has(button.".concat(Pe,")"),Ve=I(I(I(I({},l.XSmall,t(pe||(pe=L(["\n height: 22px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[200],He,s[100])),l.Small,t(fe||(fe=L(["\n height: 28px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[200],He,s[100])),l.Default,t(be||(be=L(["\n height: 36px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[300],He,s[150])),l.Large,t(me||(me=L(["\n height: 48px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[300],He,s[200]));function Le(e){var n=e.disabled,r=e.size,a=e.state,o=e.theme;return i(Me,function(e){var n=e===z.Dark?N.gray.dark4:u.light.background.primary.default;return t(ce||(ce=L(["\n color: ",";\n background: ",";\n border: 1px solid;\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n font-weight: ",";\n color: ",";\n }\n }\n "])),u[e].text.primary.default,n,Se,u[e].text.primary.default,n,u[e].border.primary.default,u[e].text.primary.default,Fe(n),Fe(n),m[e].input,u[e].border.primary.focus,Fe(n),g[e].gray,f.regular,u[e].text.placeholder.default)}(o),Ve[r],I(I({},i(function(e){var n=e.theme,r=e.state;return I(I(I({},K.Error,t(ge||(ge=L(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),u[n].border.error.default,g[n].red)),K.None,t(he||(he=L(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),u[n].border.primary.default,g[n].gray)),K.Valid,t(ve||(ve=L(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),u[n].border.success.default,g[n].green))[r]}({theme:o,state:a}),Ie[o]),!n),function(e){return t(ye||(ye=L(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: inherit;\n }\n }\n\n & ."," {\n cursor: not-allowed;\n pointer-events: none;\n color: ",";\n\n &::placeholder {\n color: inherit;\n }\n\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n appearance: none;\n\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: inherit;\n }\n }\n }\n "])),u[e].text.disabled.default,u[e].background.disabled.default,u[e].border.disabled.default,Se,u[e].text.disabled.default,u[e].border.disabled.hover,u[e].text.disabled.hover,Fe(u[e].background.disabled.hover))}(o),n))}var _e=t(xe||(xe=L(["\n width: 100%;\n"]))),Ce=t(we||(we=L(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),s[100]),Te=function(e){return t(ke||(ke=L(["\n color: ",";\n "])),u[e].icon.disabled.default)},We=function(e){return t(Oe||(Oe=L(["\n color: ",";\n "])),u[e].icon.secondary.default)},Xe=function(e){return t(Ee||(Ee=L(["\n color: ",";\n\n font-size: 12px;\n line-height: 12px;\n font-style: italic;\n font-weight: ",";\n display: flex;\n align-items: center;\n > p {\n margin: 0;\n }\n "])),u[e].text.secondary.default,f.regular)},qe=["contentEnd","className","children"],Ae=r((function(n,r){var t=n.contentEnd,a=n.className,s=n.children,d=V(n,qe),c=o().theme,u=Y(),p=u.disabled,f=u.size,b=u.state,m=u.inputProps,g=u.optional,h=Le({disabled:p,size:null!=f?f:l.Default,state:b,theme:c}),v=e.cloneElement(s,M(M({},m),{},{className:i(Se,s.props.className)})),y=b===K.None&&!p&&g,x=y||t;return e.createElement("div",H({},d,{ref:r,className:i(h,a)}),e.createElement("div",{className:_e},v),x&&e.createElement("div",{className:Ce},y&&e.createElement("div",{"data-lgid":S.optional,className:Xe(c)},e.createElement("p",null,"Optional")),t&&e.cloneElement(t,{className:i(Pe,We(c),I({},Te(c),p),t.props.className)})))}));Ae.displayName="FormFieldInputWrapper";export{P as DEFAULT_MESSAGES,je as FormField,R as FormFieldContext,se as FormFieldFeedback,Ae as FormFieldInputContainer,U as FormFieldProvider,K as FormFieldState,S as LGIDS_FORM_FIELD,Q as defaultFormFieldContext,Y as useFormFieldContext}; | ||
| import e,{useContext as n,forwardRef as r}from"react";import{css as t,cx as i}from"@leafygreen-ui/emotion";import a,{useDarkMode as o}from"@leafygreen-ui/leafygreen-provider";import{Size as l,spacing as s,typeScales as d,Variant as c,color as u,fontFamilies as p,fontWeights as f,transitionDuration as b,focusRing as m,hoverRing as g}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as h,Error as y,Body as v,Label as x,Description as w}from"@leafygreen-ui/typography";import O from"@leafygreen-ui/icon";import{useIdAllocator as k}from"@leafygreen-ui/hooks";import{createUniqueClassName as E,Theme as z}from"@leafygreen-ui/lib";import{palette as N}from"@leafygreen-ui/palette";var j="lg-form_field",S={root:j,description:"".concat(j,"-description"),errorMessage:"".concat(j,"-error_message"),feedback:"".concat(j,"-feedback"),input:"".concat(j,"-input"),label:"".concat(j,"-label"),optional:"".concat(j,"-optional"),successMessage:"".concat(j,"-success_message")},P={error:"This input needs your attention",success:"Success"};function F(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function M(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?F(Object(r),!0).forEach((function(n){I(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):F(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,r){return(n=D(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function H(){return H=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},H.apply(this,arguments)}function V(e,n){if(null==e)return{};var r,t,i=function(e,n){if(null==e)return{};var r,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||(i[r]=e[r]);return i}(e,n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(t=0;t<a.length;t++)r=a[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}function L(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var _,C,T,W,X,q,A,B,G,J,K={None:"none",Error:"error",Valid:"valid"},Q={disabled:!1,size:l.Default,state:K.None},R=e.createContext(Q),U=function(n){var r=n.value,t=n.children;return e.createElement(R.Provider,{value:r},t)},Y=function(){return n(R)},Z=function(e){var n=e.baseFontSize,r=e.size;return r===l.XSmall||r===l.Small?t(_||(_=L(["\n font-size: ","px;\n line-height: ","px;\n "])),d.body1.fontSize,d.body1.lineHeight):r===l.Default?t(C||(C=L(["\n font-size: ","px;\n line-height: ","px;\n "])),n,d.body1.lineHeight):r===l.Large?t(T||(T=L(["\n font-size: ","px;\n line-height: ","px;\n "])),d.large.fontSize,d.large.lineHeight):void 0},$=function(e){return e===K.Error?c.Error:e===K.Valid?c.Success:c.Primary},ee=t(W||(W=L(["\n display: flex;\n flex-direction: column;\n"]))),ne=t(X||(X=L(["\n margin-bottom: ","px;\n"])),s[100]),re=t(q||(q=L(["\n display: flex;\n gap: ","px;\n"])),s[100]),te=t(A||(A=L(["\n padding-top: ","px;\n"])),s[100]),ie=t(B||(B=L(["\n opacity: 0;\n"]))),ae=t(G||(G=L(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),oe=function(e){return t(J||(J=L(["\n height: ","px;\n "])),e===l.Large?d.large.lineHeight:d.body1.lineHeight)},le=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],se=function(n){var r=n.baseFontSize,t=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,d=n.id,c=n.size,p=n.state,f=n.successMessage,b=V(n,le),m=o().theme,g=h(r),x=Z({baseFontSize:g,size:c}),w=p===K.Error,k=(w||p===K.Valid)&&!t,E=k?{glyph:w?"Warning":"Checkmark",fill:u[m].icon[$(p)].default,title:w?"Error":"Valid"}:void 0;return e.createElement("div",H({id:d,"data-lgid":S.feedback,"data-testid":S.feedback,className:i(re,I(I({},te,k),ie,s)),"aria-live":"polite","aria-relevant":"all"},b),k&&e.createElement(e.Fragment,null,E&&e.createElement("div",{className:i(ae,oe(c))},e.createElement(O,H({},E,{"aria-hidden":!0}))),w?e.createElement(y,{"data-lgid":S.errorMessage,"data-testid":S.errorMessage,className:x},a):e.createElement(v,{"data-lgid":S.successMessage,"data-testid":S.successMessage,className:x},f)))};se.displayName="FormFieldFeedback";var de,ce,ue,pe,fe,be,me,ge,he,ye,ve,xe,we,Oe,ke,Ee,ze=["label","description","state","id","disabled"],Ne=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],je=r((function(n,r){var t=n.label,o=n.description,s=n.children,d=n.baseFontSize,c=n.state,u=void 0===c?K.None:c,p=n.size,f=void 0===p?l.Default:p,b=n.disabled,m=void 0!==b&&b,g=n.errorMessage,y=void 0===g?P.error:g,v=n.successMessage,O=void 0===v?P.success:v,E=n.className,z=n.darkMode,N=n.optional,j=n.id,F=V(n,Ne),D=h(d),L=Z({baseFontSize:D,size:f}),_=function(e){var n,r=e.label,t=e.description,i=e.state,a=e.id,o=e.disabled,l=V(e,ze),s=k({prefix:S.label}),d=k({prefix:S.description}),c=k({prefix:S.feedback}),u=k({prefix:S.input}),p=null!=a?a:u,f=i===K.Error,b=i!==K.None,m=r?s:l["aria-labelledby"],g=r||m?void 0:l["aria-label"],h="".concat(t?d:""," ").concat(b?c:"").trim(),y=null!==(n=l["aria-invalid"])&&void 0!==n?n:f;return{labelId:s,descriptionId:d,feedbackId:c,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":h,"aria-label":g,"aria-disabled":o,readOnly:l.readOnly?l.readOnly:o,"aria-invalid":y}}}(M({label:t,description:o,state:u,id:j,disabled:m},F)),C=_.labelId,T=_.descriptionId,W=_.feedbackId,X=_.inputId,q=_.inputProps,A={baseFontSize:D,disabled:m,errorMessage:y,id:W,size:f,state:u,successMessage:O};return e.createElement(a,{darkMode:z},e.createElement(U,{value:{disabled:m,size:f,state:u,inputProps:q,optional:N}},e.createElement("div",H({className:i(L,E),ref:r},F),e.createElement("div",{className:i(ee,I({},ne,!(!t&&!o)))},t&&e.createElement(x,{"data-testid":S.label,className:L,htmlFor:X,id:C,disabled:m},t),o&&e.createElement(w,{"data-testid":S.description,className:L,id:T,disabled:m},o)),s,e.createElement(se,A))))}));je.displayName="FormField";var Se=E("form-field-input"),Pe=E("form-field-icon"),Fe=function(e){return"0 0 0 100px ".concat(e," inset")},Me=t(de||(de=L(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-size: inherit;\n line-height: inherit;\n font-family: ",";\n width: 100%;\n height: 36px;\n font-weight: ",";\n border: 1px solid;\n z-index: 1;\n outline: none;\n border-radius: 6px;\n transition: ","ms ease-in-out;\n transition-property: border-color, box-shadow;\n z-index: 0;\n\n & ."," {\n font-family: ",";\n color: inherit;\n background-color: inherit;\n font-size: inherit;\n line-height: inherit;\n outline: none;\n border: none;\n }\n\n & ."," svg,\n & svg {\n min-height: 16px;\n min-width: 16px;\n }\n"])),s[1],p.default,f.regular,b.default,Se,p.default,Pe),De=function(e){return t(ue||(ue=L(["\n @supports selector(:has(a, b)) {\n &:focus-within:not(:has(.",":focus)) {\n ",'\n }\n }\n\n /* Fallback for when "has" is unsupported */\n @supports not selector(:has(a, b)) {\n &:focus-within {\n ',"\n }\n }\n"])),Pe,e,e)},Ie=I(I({},z.Light,De("\n {\n box-shadow: ".concat(m.light.input,";\n border-color: ").concat(N.white,";\n }\n "))),z.Dark,De("\n {\n box-shadow: ".concat(m.dark.input,";\n border-color: ").concat(N.gray.dark4,";\n }\n "))),He="&:has(button.".concat(Pe,")"),Ve=I(I(I(I({},l.XSmall,t(pe||(pe=L(["\n height: 22px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[200],He,s[100])),l.Small,t(fe||(fe=L(["\n height: 28px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[200],He,s[100])),l.Default,t(be||(be=L(["\n height: 36px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[300],He,s[150])),l.Large,t(me||(me=L(["\n height: 48px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),s[300],He,s[200]));function Le(e){var n=e.disabled,r=e.size,a=e.state,o=e.theme;return i(Me,function(e){var n=e===z.Dark?N.gray.dark4:u.light.background.primary.default;return t(ce||(ce=L(["\n color: ",";\n background: ",";\n border: 1px solid;\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n font-weight: ",";\n color: ",";\n }\n }\n "])),u[e].text.primary.default,n,Se,u[e].text.primary.default,n,u[e].border.primary.default,u[e].text.primary.default,Fe(n),Fe(n),m[e].input,u[e].border.primary.focus,Fe(n),g[e].gray,f.regular,u[e].text.placeholder.default)}(o),Ve[r],I(I({},i(function(e){var n=e.theme,r=e.state;return I(I(I({},K.Error,t(ge||(ge=L(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),u[n].border.error.default,g[n].red)),K.None,t(he||(he=L(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),u[n].border.primary.default,g[n].gray)),K.Valid,t(ye||(ye=L(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),u[n].border.success.default,g[n].green))[r]}({theme:o,state:a}),Ie[o]),!n),function(e){return t(ve||(ve=L(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: inherit;\n }\n }\n\n & ."," {\n cursor: not-allowed;\n pointer-events: none;\n color: ",";\n\n &::placeholder {\n color: inherit;\n }\n\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n appearance: none;\n\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: inherit;\n }\n }\n }\n "])),u[e].text.disabled.default,u[e].background.disabled.default,u[e].border.disabled.default,Se,u[e].text.disabled.default,u[e].border.disabled.hover,u[e].text.disabled.hover,Fe(u[e].background.disabled.hover))}(o),n))}var _e=t(xe||(xe=L(["\n width: 100%;\n"]))),Ce=t(we||(we=L(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),s[100]),Te=function(e){return t(Oe||(Oe=L(["\n color: ",";\n "])),u[e].icon.disabled.default)},We=function(e){return t(ke||(ke=L(["\n color: ",";\n "])),u[e].icon.secondary.default)},Xe=function(e){return t(Ee||(Ee=L(["\n color: ",";\n\n font-size: 12px;\n line-height: 12px;\n font-style: italic;\n font-weight: ",";\n display: flex;\n align-items: center;\n > p {\n margin: 0;\n }\n "])),u[e].text.secondary.default,f.regular)},qe=["contentEnd","className","children"],Ae=r((function(n,r){var t=n.contentEnd,a=n.className,s=n.children,d=V(n,qe),c=o().theme,u=Y(),p=u.disabled,f=u.size,b=u.state,m=u.inputProps,g=u.optional,h=Le({disabled:p,size:null!=f?f:l.Default,state:b,theme:c}),y=e.cloneElement(s,M(M({},m),{},{className:i(Se,s.props.className)})),v=b===K.None&&!p&&g,x=v||t;return e.createElement("div",H({},d,{ref:r,className:i(h,a)}),e.createElement("div",{className:_e},y),x&&e.createElement("div",{className:Ce},v&&e.createElement("div",{"data-lgid":S.optional,className:Xe(c)},e.createElement("p",null,"Optional")),t&&e.cloneElement(t,{className:i(Pe,We(c),I({},Te(c),p),t.props.className)})))}));Ae.displayName="FormFieldInputWrapper";export{P as DEFAULT_MESSAGES,je as FormField,R as FormFieldContext,se as FormFieldFeedback,Ae as FormFieldInputContainer,U as FormFieldProvider,K as FormFieldState,S as LGIDS_FORM_FIELD,Q as defaultFormFieldContext,Y as useFormFieldContext}; | ||
| //# sourceMappingURL=index.js.map |
@@ -26,2 +26,3 @@ import React from 'react'; | ||
| optional?: boolean | undefined; | ||
| readOnly?: boolean | undefined; | ||
| }, "ref"> | Omit<Omit<import("@leafygreen-ui/lib").HTMLElementProps<"div", never>, "children"> & { | ||
@@ -41,2 +42,3 @@ label?: React.ReactNode; | ||
| optional?: boolean | undefined; | ||
| readOnly?: boolean | undefined; | ||
| }, "ref"> | Omit<Omit<import("@leafygreen-ui/lib").HTMLElementProps<"div", never>, "children"> & { | ||
@@ -56,3 +58,4 @@ label?: React.ReactNode; | ||
| optional?: boolean | undefined; | ||
| readOnly?: boolean | undefined; | ||
| }, "ref">) & React.RefAttributes<HTMLDivElement>>; | ||
| //# sourceMappingURL=FormField.d.ts.map |
@@ -80,4 +80,8 @@ /// <reference types="react" /> | ||
| optional?: boolean; | ||
| /** | ||
| * Whether or not the field is readonly. | ||
| */ | ||
| readOnly?: boolean; | ||
| }; | ||
| export {}; | ||
| //# sourceMappingURL=FormField.types.d.ts.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/icon","@leafygreen-ui/hooks","@leafygreen-ui/lib","@leafygreen-ui/palette"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/form-field"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,r,t,a,i,o,l,s,c){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n),f=d(t),p=d(o),g="lg-form_field",b={root:g,description:"".concat(g,"-description"),errorMessage:"".concat(g,"-error_message"),feedback:"".concat(g,"-feedback"),input:"".concat(g,"-input"),label:"".concat(g,"-label"),optional:"".concat(g,"-optional"),successMessage:"".concat(g,"-success_message")},h={error:"This input needs your attention",success:"Success"};function m(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function y(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?m(Object(r),!0).forEach((function(n){v(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function x(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function v(e,n,r){return(n=x(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},S.apply(this,arguments)}function z(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},i=Object.keys(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function F(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var k,w,E,O,N,j,M,P,D,I,q={None:"none",Error:"error",Valid:"valid"},R={disabled:!1,size:a.Size.Default,state:q.None},C=u.default.createContext(R),L=function(e){var n=e.value,r=e.children;return u.default.createElement(C.Provider,{value:n},r)},T=function(){return n.useContext(C)},V=function(e){var n=e.baseFontSize,t=e.size;return t===a.Size.XSmall||t===a.Size.Small?r.css(k||(k=F(["\n font-size: ","px;\n line-height: ","px;\n "])),a.typeScales.body1.fontSize,a.typeScales.body1.lineHeight):t===a.Size.Default?r.css(w||(w=F(["\n font-size: ","px;\n line-height: ","px;\n "])),n,a.typeScales.body1.lineHeight):t===a.Size.Large?r.css(E||(E=F(["\n font-size: ","px;\n line-height: ","px;\n "])),a.typeScales.large.fontSize,a.typeScales.large.lineHeight):void 0},A=function(e){return e===q.Error?a.Variant.Error:e===q.Valid?a.Variant.Success:a.Variant.Primary},_=r.css(O||(O=F(["\n display: flex;\n flex-direction: column;\n"]))),H=r.css(N||(N=F(["\n margin-bottom: ","px;\n"])),a.spacing[100]),U=r.css(j||(j=F(["\n display: flex;\n gap: ","px;\n"])),a.spacing[100]),W=r.css(M||(M=F(["\n padding-top: ","px;\n"])),a.spacing[100]),B=r.css(P||(P=F(["\n opacity: 0;\n"]))),G=r.css(D||(D=F(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),X=function(e){return r.css(I||(I=F(["\n height: ","px;\n "])),e===a.Size.Large?a.typeScales.large.lineHeight:a.typeScales.body1.lineHeight)},J=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],K=function(e){var n=e.baseFontSize,o=e.disabled,l=e.errorMessage,s=e.hideFeedback,c=void 0!==s&&s,d=e.id,f=e.size,g=e.state,h=e.successMessage,m=z(e,J),y=t.useDarkMode().theme,x=i.useUpdatedBaseFontSize(n),F=V({baseFontSize:x,size:f}),k=g===q.Error,w=(k||g===q.Valid)&&!o,E=w?{glyph:k?"Warning":"Checkmark",fill:a.color[y].icon[A(g)].default,title:k?"Error":"Valid"}:void 0;return u.default.createElement("div",S({id:d,"data-lgid":b.feedback,"data-testid":b.feedback,className:r.cx(U,v(v({},W,w),B,c)),"aria-live":"polite","aria-relevant":"all"},m),w&&u.default.createElement(u.default.Fragment,null,E&&u.default.createElement("div",{className:r.cx(G,X(f))},u.default.createElement(p.default,S({},E,{"aria-hidden":!0}))),k?u.default.createElement(i.Error,{"data-lgid":b.errorMessage,"data-testid":b.errorMessage,className:F},l):u.default.createElement(i.Body,{"data-lgid":b.successMessage,"data-testid":b.successMessage,className:F},h)))};K.displayName="FormFieldFeedback";var Q,Y,Z,$,ee,ne,re,te,ae,ie,oe,le,se,ce,de,ue,fe=["label","description","state","id","disabled"],pe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],ge=n.forwardRef((function(e,n){var t=e.label,o=e.description,s=e.children,c=e.baseFontSize,d=e.state,p=void 0===d?q.None:d,g=e.size,m=void 0===g?a.Size.Default:g,x=e.disabled,F=void 0!==x&&x,k=e.errorMessage,w=void 0===k?h.error:k,E=e.successMessage,O=void 0===E?h.success:E,N=e.className,j=e.darkMode,M=e.optional,P=e.id,D=z(e,pe),I=i.useUpdatedBaseFontSize(c),R=V({baseFontSize:I,size:m}),C=function(e){var n,r=e.label,t=e.description,a=e.state,i=e.id,o=e.disabled,s=z(e,fe),c=l.useIdAllocator({prefix:b.label}),d=l.useIdAllocator({prefix:b.description}),u=l.useIdAllocator({prefix:b.feedback}),f=l.useIdAllocator({prefix:b.input}),p=null!=i?i:f,g=a===q.Error,h=a!==q.None,m=r?c:s["aria-labelledby"],y=r||m?void 0:s["aria-label"];return{labelId:c,descriptionId:d,feedbackId:u,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":"".concat(t?d:""," ").concat(h?u:"").trim(),"aria-label":y,"aria-disabled":o,readOnly:o,"aria-invalid":null!==(n=s["aria-invalid"])&&void 0!==n?n:g}}}(y({label:t,description:o,state:p,id:P,disabled:F},D)),T=C.labelId,A=C.descriptionId,U=C.feedbackId,W=C.inputId,B=C.inputProps,G={baseFontSize:I,disabled:F,errorMessage:w,id:U,size:m,state:p,successMessage:O};return u.default.createElement(f.default,{darkMode:j},u.default.createElement(L,{value:{disabled:F,size:m,state:p,inputProps:B,optional:M}},u.default.createElement("div",S({className:r.cx(R,N),ref:n},D),u.default.createElement("div",{className:r.cx(_,v({},H,!(!t&&!o)))},t&&u.default.createElement(i.Label,{"data-testid":b.label,className:R,htmlFor:W,id:T,disabled:F},t),o&&u.default.createElement(i.Description,{"data-testid":b.description,className:R,id:A,disabled:F},o)),s,u.default.createElement(K,G))))}));ge.displayName="FormField";var be=s.createUniqueClassName("form-field-input"),he=s.createUniqueClassName("form-field-icon"),me=function(e){return"0 0 0 100px ".concat(e," inset")},ye=r.css(Q||(Q=F(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-size: inherit;\n line-height: inherit;\n font-family: ",";\n width: 100%;\n height: 36px;\n font-weight: ",";\n border: 1px solid;\n z-index: 1;\n outline: none;\n border-radius: 6px;\n transition: ","ms ease-in-out;\n transition-property: border-color, box-shadow;\n z-index: 0;\n\n & ."," {\n font-family: ",";\n color: inherit;\n background-color: inherit;\n font-size: inherit;\n line-height: inherit;\n outline: none;\n border: none;\n }\n\n & ."," svg,\n & svg {\n min-height: 16px;\n min-width: 16px;\n }\n"])),a.spacing[1],a.fontFamilies.default,a.fontWeights.regular,a.transitionDuration.default,be,a.fontFamilies.default,he),xe=function(e){return r.css(Z||(Z=F(["\n @supports selector(:has(a, b)) {\n &:focus-within:not(:has(.",":focus)) {\n ",'\n }\n }\n\n /* Fallback for when "has" is unsupported */\n @supports not selector(:has(a, b)) {\n &:focus-within {\n ',"\n }\n }\n"])),he,e,e)},ve=v(v({},s.Theme.Light,xe("\n {\n box-shadow: ".concat(a.focusRing.light.input,";\n border-color: ").concat(c.palette.white,";\n }\n "))),s.Theme.Dark,xe("\n {\n box-shadow: ".concat(a.focusRing.dark.input,";\n border-color: ").concat(c.palette.gray.dark4,";\n }\n "))),Se="&:has(button.".concat(he,")"),ze=v(v(v(v({},a.Size.XSmall,r.css($||($=F(["\n height: 22px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[200],Se,a.spacing[100])),a.Size.Small,r.css(ee||(ee=F(["\n height: 28px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[200],Se,a.spacing[100])),a.Size.Default,r.css(ne||(ne=F(["\n height: 36px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[300],Se,a.spacing[150])),a.Size.Large,r.css(re||(re=F(["\n height: 48px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[300],Se,a.spacing[200]));function Fe(e){var n=e.disabled,t=e.size,i=e.state,o=e.theme;return r.cx(ye,function(e){var n=e===s.Theme.Dark?c.palette.gray.dark4:a.color.light.background.primary.default;return r.css(Y||(Y=F(["\n color: ",";\n background: ",";\n border: 1px solid;\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n font-weight: ",";\n color: ",";\n }\n }\n "])),a.color[e].text.primary.default,n,be,a.color[e].text.primary.default,n,a.color[e].border.primary.default,a.color[e].text.primary.default,me(n),me(n),a.focusRing[e].input,a.color[e].border.primary.focus,me(n),a.hoverRing[e].gray,a.fontWeights.regular,a.color[e].text.placeholder.default)}(o),ze[t],v(v({},r.cx(function(e){var n=e.theme,t=e.state;return v(v(v({},q.Error,r.css(te||(te=F(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),a.color[n].border.error.default,a.hoverRing[n].red)),q.None,r.css(ae||(ae=F(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),a.color[n].border.primary.default,a.hoverRing[n].gray)),q.Valid,r.css(ie||(ie=F(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),a.color[n].border.success.default,a.hoverRing[n].green))[t]}({theme:o,state:i}),ve[o]),!n),function(e){return r.css(oe||(oe=F(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: inherit;\n }\n }\n\n & ."," {\n cursor: not-allowed;\n pointer-events: none;\n color: ",";\n\n &::placeholder {\n color: inherit;\n }\n\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n appearance: none;\n\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: inherit;\n }\n }\n }\n "])),a.color[e].text.disabled.default,a.color[e].background.disabled.default,a.color[e].border.disabled.default,be,a.color[e].text.disabled.default,a.color[e].border.disabled.hover,a.color[e].text.disabled.hover,me(a.color[e].background.disabled.hover))}(o),n))}var ke=r.css(le||(le=F(["\n width: 100%;\n"]))),we=r.css(se||(se=F(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),a.spacing[100]),Ee=function(e){return r.css(ce||(ce=F(["\n color: ",";\n "])),a.color[e].icon.disabled.default)},Oe=function(e){return r.css(de||(de=F(["\n color: ",";\n "])),a.color[e].icon.secondary.default)},Ne=function(e){return r.css(ue||(ue=F(["\n color: ",";\n\n font-size: 12px;\n line-height: 12px;\n font-style: italic;\n font-weight: ",";\n display: flex;\n align-items: center;\n > p {\n margin: 0;\n }\n "])),a.color[e].text.secondary.default,a.fontWeights.regular)},je=["contentEnd","className","children"],Me=n.forwardRef((function(e,n){var i=e.contentEnd,o=e.className,l=e.children,s=z(e,je),c=t.useDarkMode().theme,d=T(),f=d.disabled,p=d.size,g=d.state,h=d.inputProps,m=d.optional,x=Fe({disabled:f,size:null!=p?p:a.Size.Default,state:g,theme:c}),F=u.default.cloneElement(l,y(y({},h),{},{className:r.cx(be,l.props.className)})),k=g===q.None&&!f&&m,w=k||i;return u.default.createElement("div",S({},s,{ref:n,className:r.cx(x,o)}),u.default.createElement("div",{className:ke},F),w&&u.default.createElement("div",{className:we},k&&u.default.createElement("div",{"data-lgid":b.optional,className:Ne(c)},u.default.createElement("p",null,"Optional")),i&&u.default.cloneElement(i,{className:r.cx(he,Oe(c),v({},Ee(c),f),i.props.className)})))}));Me.displayName="FormFieldInputWrapper",e.DEFAULT_MESSAGES=h,e.FormField=ge,e.FormFieldContext=C,e.FormFieldFeedback=K,e.FormFieldInputContainer=Me,e.FormFieldProvider=L,e.FormFieldState=q,e.LGIDS_FORM_FIELD=b,e.defaultFormFieldContext=R,e.useFormFieldContext=T})); | ||
| !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/typography"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","@leafygreen-ui/emotion","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/typography","@leafygreen-ui/icon","@leafygreen-ui/hooks","@leafygreen-ui/lib","@leafygreen-ui/palette"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/form-field"]={},e.React,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/typography"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,n,r,t,a,i,o,l,s,c){"use strict";function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(n),f=d(t),p=d(o),g="lg-form_field",b={root:g,description:"".concat(g,"-description"),errorMessage:"".concat(g,"-error_message"),feedback:"".concat(g,"-feedback"),input:"".concat(g,"-input"),label:"".concat(g,"-label"),optional:"".concat(g,"-optional"),successMessage:"".concat(g,"-success_message")},h={error:"This input needs your attention",success:"Success"};function m(e,n){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),r.push.apply(r,t)}return r}function y(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?m(Object(r),!0).forEach((function(n){v(e,n,r[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):m(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))}))}return e}function x(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,n);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function v(e,n,r){return(n=x(n))in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function S(){return S=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},S.apply(this,arguments)}function z(e,n){if(null==e)return{};var r,t,a=function(e,n){if(null==e)return{};var r,t,a={},i=Object.keys(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||(a[r]=e[r]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t<i.length;t++)r=i[t],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function F(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var k,w,E,O,N,j,M,P,D,I,q={None:"none",Error:"error",Valid:"valid"},R={disabled:!1,size:a.Size.Default,state:q.None},C=u.default.createContext(R),L=function(e){var n=e.value,r=e.children;return u.default.createElement(C.Provider,{value:n},r)},T=function(){return n.useContext(C)},V=function(e){var n=e.baseFontSize,t=e.size;return t===a.Size.XSmall||t===a.Size.Small?r.css(k||(k=F(["\n font-size: ","px;\n line-height: ","px;\n "])),a.typeScales.body1.fontSize,a.typeScales.body1.lineHeight):t===a.Size.Default?r.css(w||(w=F(["\n font-size: ","px;\n line-height: ","px;\n "])),n,a.typeScales.body1.lineHeight):t===a.Size.Large?r.css(E||(E=F(["\n font-size: ","px;\n line-height: ","px;\n "])),a.typeScales.large.fontSize,a.typeScales.large.lineHeight):void 0},A=function(e){return e===q.Error?a.Variant.Error:e===q.Valid?a.Variant.Success:a.Variant.Primary},_=r.css(O||(O=F(["\n display: flex;\n flex-direction: column;\n"]))),H=r.css(N||(N=F(["\n margin-bottom: ","px;\n"])),a.spacing[100]),U=r.css(j||(j=F(["\n display: flex;\n gap: ","px;\n"])),a.spacing[100]),W=r.css(M||(M=F(["\n padding-top: ","px;\n"])),a.spacing[100]),B=r.css(P||(P=F(["\n opacity: 0;\n"]))),G=r.css(D||(D=F(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),X=function(e){return r.css(I||(I=F(["\n height: ","px;\n "])),e===a.Size.Large?a.typeScales.large.lineHeight:a.typeScales.body1.lineHeight)},J=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],K=function(e){var n=e.baseFontSize,o=e.disabled,l=e.errorMessage,s=e.hideFeedback,c=void 0!==s&&s,d=e.id,f=e.size,g=e.state,h=e.successMessage,m=z(e,J),y=t.useDarkMode().theme,x=i.useUpdatedBaseFontSize(n),F=V({baseFontSize:x,size:f}),k=g===q.Error,w=(k||g===q.Valid)&&!o,E=w?{glyph:k?"Warning":"Checkmark",fill:a.color[y].icon[A(g)].default,title:k?"Error":"Valid"}:void 0;return u.default.createElement("div",S({id:d,"data-lgid":b.feedback,"data-testid":b.feedback,className:r.cx(U,v(v({},W,w),B,c)),"aria-live":"polite","aria-relevant":"all"},m),w&&u.default.createElement(u.default.Fragment,null,E&&u.default.createElement("div",{className:r.cx(G,X(f))},u.default.createElement(p.default,S({},E,{"aria-hidden":!0}))),k?u.default.createElement(i.Error,{"data-lgid":b.errorMessage,"data-testid":b.errorMessage,className:F},l):u.default.createElement(i.Body,{"data-lgid":b.successMessage,"data-testid":b.successMessage,className:F},h)))};K.displayName="FormFieldFeedback";var Q,Y,Z,$,ee,ne,re,te,ae,ie,oe,le,se,ce,de,ue,fe=["label","description","state","id","disabled"],pe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],ge=n.forwardRef((function(e,n){var t=e.label,o=e.description,s=e.children,c=e.baseFontSize,d=e.state,p=void 0===d?q.None:d,g=e.size,m=void 0===g?a.Size.Default:g,x=e.disabled,F=void 0!==x&&x,k=e.errorMessage,w=void 0===k?h.error:k,E=e.successMessage,O=void 0===E?h.success:E,N=e.className,j=e.darkMode,M=e.optional,P=e.id,D=z(e,pe),I=i.useUpdatedBaseFontSize(c),R=V({baseFontSize:I,size:m}),C=function(e){var n,r=e.label,t=e.description,a=e.state,i=e.id,o=e.disabled,s=z(e,fe),c=l.useIdAllocator({prefix:b.label}),d=l.useIdAllocator({prefix:b.description}),u=l.useIdAllocator({prefix:b.feedback}),f=l.useIdAllocator({prefix:b.input}),p=null!=i?i:f,g=a===q.Error,h=a!==q.None,m=r?c:s["aria-labelledby"],y=r||m?void 0:s["aria-label"],x="".concat(t?d:""," ").concat(h?u:"").trim(),v=null!==(n=s["aria-invalid"])&&void 0!==n?n:g;return{labelId:c,descriptionId:d,feedbackId:u,inputId:p,inputProps:{id:p,"aria-labelledby":m,"aria-describedby":x,"aria-label":y,"aria-disabled":o,readOnly:s.readOnly?s.readOnly:o,"aria-invalid":v}}}(y({label:t,description:o,state:p,id:P,disabled:F},D)),T=C.labelId,A=C.descriptionId,U=C.feedbackId,W=C.inputId,B=C.inputProps,G={baseFontSize:I,disabled:F,errorMessage:w,id:U,size:m,state:p,successMessage:O};return u.default.createElement(f.default,{darkMode:j},u.default.createElement(L,{value:{disabled:F,size:m,state:p,inputProps:B,optional:M}},u.default.createElement("div",S({className:r.cx(R,N),ref:n},D),u.default.createElement("div",{className:r.cx(_,v({},H,!(!t&&!o)))},t&&u.default.createElement(i.Label,{"data-testid":b.label,className:R,htmlFor:W,id:T,disabled:F},t),o&&u.default.createElement(i.Description,{"data-testid":b.description,className:R,id:A,disabled:F},o)),s,u.default.createElement(K,G))))}));ge.displayName="FormField";var be=s.createUniqueClassName("form-field-input"),he=s.createUniqueClassName("form-field-icon"),me=function(e){return"0 0 0 100px ".concat(e," inset")},ye=r.css(Q||(Q=F(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-size: inherit;\n line-height: inherit;\n font-family: ",";\n width: 100%;\n height: 36px;\n font-weight: ",";\n border: 1px solid;\n z-index: 1;\n outline: none;\n border-radius: 6px;\n transition: ","ms ease-in-out;\n transition-property: border-color, box-shadow;\n z-index: 0;\n\n & ."," {\n font-family: ",";\n color: inherit;\n background-color: inherit;\n font-size: inherit;\n line-height: inherit;\n outline: none;\n border: none;\n }\n\n & ."," svg,\n & svg {\n min-height: 16px;\n min-width: 16px;\n }\n"])),a.spacing[1],a.fontFamilies.default,a.fontWeights.regular,a.transitionDuration.default,be,a.fontFamilies.default,he),xe=function(e){return r.css(Z||(Z=F(["\n @supports selector(:has(a, b)) {\n &:focus-within:not(:has(.",":focus)) {\n ",'\n }\n }\n\n /* Fallback for when "has" is unsupported */\n @supports not selector(:has(a, b)) {\n &:focus-within {\n ',"\n }\n }\n"])),he,e,e)},ve=v(v({},s.Theme.Light,xe("\n {\n box-shadow: ".concat(a.focusRing.light.input,";\n border-color: ").concat(c.palette.white,";\n }\n "))),s.Theme.Dark,xe("\n {\n box-shadow: ".concat(a.focusRing.dark.input,";\n border-color: ").concat(c.palette.gray.dark4,";\n }\n "))),Se="&:has(button.".concat(he,")"),ze=v(v(v(v({},a.Size.XSmall,r.css($||($=F(["\n height: 22px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[200],Se,a.spacing[100])),a.Size.Small,r.css(ee||(ee=F(["\n height: 28px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[200],Se,a.spacing[100])),a.Size.Default,r.css(ne||(ne=F(["\n height: 36px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[300],Se,a.spacing[150])),a.Size.Large,r.css(re||(re=F(["\n height: 48px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),a.spacing[300],Se,a.spacing[200]));function Fe(e){var n=e.disabled,t=e.size,i=e.state,o=e.theme;return r.cx(ye,function(e){var n=e===s.Theme.Dark?c.palette.gray.dark4:a.color.light.background.primary.default;return r.css(Y||(Y=F(["\n color: ",";\n background: ",";\n border: 1px solid;\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n font-weight: ",";\n color: ",";\n }\n }\n "])),a.color[e].text.primary.default,n,be,a.color[e].text.primary.default,n,a.color[e].border.primary.default,a.color[e].text.primary.default,me(n),me(n),a.focusRing[e].input,a.color[e].border.primary.focus,me(n),a.hoverRing[e].gray,a.fontWeights.regular,a.color[e].text.placeholder.default)}(o),ze[t],v(v({},r.cx(function(e){var n=e.theme,t=e.state;return v(v(v({},q.Error,r.css(te||(te=F(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),a.color[n].border.error.default,a.hoverRing[n].red)),q.None,r.css(ae||(ae=F(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),a.color[n].border.primary.default,a.hoverRing[n].gray)),q.Valid,r.css(ie||(ie=F(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),a.color[n].border.success.default,a.hoverRing[n].green))[t]}({theme:o,state:i}),ve[o]),!n),function(e){return r.css(oe||(oe=F(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: inherit;\n }\n }\n\n & ."," {\n cursor: not-allowed;\n pointer-events: none;\n color: ",";\n\n &::placeholder {\n color: inherit;\n }\n\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n appearance: none;\n\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: inherit;\n }\n }\n }\n "])),a.color[e].text.disabled.default,a.color[e].background.disabled.default,a.color[e].border.disabled.default,be,a.color[e].text.disabled.default,a.color[e].border.disabled.hover,a.color[e].text.disabled.hover,me(a.color[e].background.disabled.hover))}(o),n))}var ke=r.css(le||(le=F(["\n width: 100%;\n"]))),we=r.css(se||(se=F(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),a.spacing[100]),Ee=function(e){return r.css(ce||(ce=F(["\n color: ",";\n "])),a.color[e].icon.disabled.default)},Oe=function(e){return r.css(de||(de=F(["\n color: ",";\n "])),a.color[e].icon.secondary.default)},Ne=function(e){return r.css(ue||(ue=F(["\n color: ",";\n\n font-size: 12px;\n line-height: 12px;\n font-style: italic;\n font-weight: ",";\n display: flex;\n align-items: center;\n > p {\n margin: 0;\n }\n "])),a.color[e].text.secondary.default,a.fontWeights.regular)},je=["contentEnd","className","children"],Me=n.forwardRef((function(e,n){var i=e.contentEnd,o=e.className,l=e.children,s=z(e,je),c=t.useDarkMode().theme,d=T(),f=d.disabled,p=d.size,g=d.state,h=d.inputProps,m=d.optional,x=Fe({disabled:f,size:null!=p?p:a.Size.Default,state:g,theme:c}),F=u.default.cloneElement(l,y(y({},h),{},{className:r.cx(be,l.props.className)})),k=g===q.None&&!f&&m,w=k||i;return u.default.createElement("div",S({},s,{ref:n,className:r.cx(x,o)}),u.default.createElement("div",{className:ke},F),w&&u.default.createElement("div",{className:we},k&&u.default.createElement("div",{"data-lgid":b.optional,className:Ne(c)},u.default.createElement("p",null,"Optional")),i&&u.default.cloneElement(i,{className:r.cx(he,Oe(c),v({},Ee(c),f),i.props.className)})))}));Me.displayName="FormFieldInputWrapper",e.DEFAULT_MESSAGES=h,e.FormField=ge,e.FormFieldContext=C,e.FormFieldFeedback=K,e.FormFieldInputContainer=Me,e.FormFieldProvider=L,e.FormFieldState=q,e.LGIDS_FORM_FIELD=b,e.defaultFormFieldContext=R,e.useFormFieldContext=T})); | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@leafygreen-ui/form-field", | ||
| "version": "1.2.2", | ||
| "version": "1.2.3", | ||
| "description": "LeafyGreen UI Kit Form Field", | ||
@@ -20,3 +20,3 @@ "main": "./dist/index.js", | ||
| "@leafygreen-ui/hooks": "^8.1.3", | ||
| "@leafygreen-ui/icon": "^12.2.0", | ||
| "@leafygreen-ui/icon": "^12.4.0", | ||
| "@leafygreen-ui/lib": "^13.4.0", | ||
@@ -23,0 +23,0 @@ "@leafygreen-ui/palette": "^4.0.10", |
@@ -101,2 +101,7 @@ import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib'; | ||
| optional?: boolean; | ||
| /** | ||
| * Whether or not the field is readonly. | ||
| */ | ||
| readOnly?: boolean; | ||
| }; |
@@ -57,3 +57,3 @@ import { useIdAllocator } from '@leafygreen-ui/hooks'; | ||
| 'aria-disabled': disabled, | ||
| readOnly: disabled, | ||
| readOnly: rest.readOnly ? rest.readOnly : disabled, | ||
| 'aria-invalid': ariaInvalid, | ||
@@ -60,0 +60,0 @@ }; |
@@ -1,1 +0,1 @@ | ||
| import e,{useContext as n,forwardRef as t}from"react";import r from"@leafygreen-ui/button";import{css as a,cx as i}from"@leafygreen-ui/emotion";import o,{glyphs as l}from"@leafygreen-ui/icon";import s from"@leafygreen-ui/icon-button";import c,{useDarkMode as d}from"@leafygreen-ui/leafygreen-provider";import{Size as p,spacing as u,typeScales as b,Variant as f,color as m,fontFamilies as g,fontWeights as h,transitionDuration as y,focusRing as v,hoverRing as x}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as E,Error as z,Body as k,Label as w,Description as O}from"@leafygreen-ui/typography";import{useIdAllocator as N}from"@leafygreen-ui/hooks";import{createUniqueClassName as S,Theme as j}from"@leafygreen-ui/lib";import{palette as M}from"@leafygreen-ui/palette";function F(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function P(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?F(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):F(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,t){return(n=D(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function C(){return C=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},C.apply(this,arguments)}function L(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function H(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var V,X,T,W,_,A,B,G,q,J,K="lg-form_field",Q={root:K,description:"".concat(K,"-description"),errorMessage:"".concat(K,"-error_message"),feedback:"".concat(K,"-feedback"),input:"".concat(K,"-input"),label:"".concat(K,"-label"),optional:"".concat(K,"-optional"),successMessage:"".concat(K,"-success_message")},R="This input needs your attention",U="Success",Y={None:"none",Error:"error",Valid:"valid"},Z={disabled:!1,size:p.Default,state:Y.None},$=e.createContext(Z),ee=function(n){var t=n.value,r=n.children;return e.createElement($.Provider,{value:t},r)},ne=function(){return n($)},te=function(e){var n=e.baseFontSize,t=e.size;return t===p.XSmall||t===p.Small?a(V||(V=H(["\n font-size: ","px;\n line-height: ","px;\n "])),b.body1.fontSize,b.body1.lineHeight):t===p.Default?a(X||(X=H(["\n font-size: ","px;\n line-height: ","px;\n "])),n,b.body1.lineHeight):t===p.Large?a(T||(T=H(["\n font-size: ","px;\n line-height: ","px;\n "])),b.large.fontSize,b.large.lineHeight):void 0},re=function(e){return e===Y.Error?f.Error:e===Y.Valid?f.Success:f.Primary},ae=a(W||(W=H(["\n display: flex;\n flex-direction: column;\n"]))),ie=a(_||(_=H(["\n margin-bottom: ","px;\n"])),u[100]),oe=a(A||(A=H(["\n display: flex;\n gap: ","px;\n"])),u[100]),le=a(B||(B=H(["\n padding-top: ","px;\n"])),u[100]),se=a(G||(G=H(["\n opacity: 0;\n"]))),ce=a(q||(q=H(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),de=function(e){return a(J||(J=H(["\n height: ","px;\n "])),e===p.Large?b.large.lineHeight:b.body1.lineHeight)},pe=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],ue=function(n){var t=n.baseFontSize,r=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,c=n.id,p=n.size,u=n.state,b=n.successMessage,f=L(n,pe),g=d().theme,h=E(t),y=te({baseFontSize:h,size:p}),v=u===Y.Error,x=(v||u===Y.Valid)&&!r,w=x?{glyph:v?"Warning":"Checkmark",fill:m[g].icon[re(u)].default,title:v?"Error":"Valid"}:void 0;return e.createElement("div",C({id:c,"data-lgid":Q.feedback,"data-testid":Q.feedback,className:i(oe,I(I({},le,x),se,s)),"aria-live":"polite","aria-relevant":"all"},f),x&&e.createElement(e.Fragment,null,w&&e.createElement("div",{className:i(ce,de(p))},e.createElement(o,C({},w,{"aria-hidden":!0}))),v?e.createElement(z,{"data-lgid":Q.errorMessage,"data-testid":Q.errorMessage,className:y},a):e.createElement(k,{"data-lgid":Q.successMessage,"data-testid":Q.successMessage,className:y},b)))};ue.displayName="FormFieldFeedback";var be,fe,me,ge,he,ye,ve,xe,Ee,ze,ke,we,Oe,Ne,Se,je,Me=["label","description","state","id","disabled"],Fe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],Pe=t((function(n,t){var r=n.label,a=n.description,o=n.children,l=n.baseFontSize,s=n.state,d=void 0===s?Y.None:s,u=n.size,b=void 0===u?p.Default:u,f=n.disabled,m=void 0!==f&&f,g=n.errorMessage,h=void 0===g?R:g,y=n.successMessage,v=void 0===y?U:y,x=n.className,z=n.darkMode,k=n.optional,S=n.id,j=L(n,Fe),M=E(l),F=te({baseFontSize:M,size:b}),D=function(e){var n,t=e.label,r=e.description,a=e.state,i=e.id,o=e.disabled,l=L(e,Me),s=N({prefix:Q.label}),c=N({prefix:Q.description}),d=N({prefix:Q.feedback}),p=N({prefix:Q.input}),u=null!=i?i:p,b=a===Y.Error,f=a!==Y.None,m=t?s:l["aria-labelledby"],g=t||m?void 0:l["aria-label"];return{labelId:s,descriptionId:c,feedbackId:d,inputId:u,inputProps:{id:u,"aria-labelledby":m,"aria-describedby":"".concat(r?c:""," ").concat(f?d:"").trim(),"aria-label":g,"aria-disabled":o,readOnly:o,"aria-invalid":null!==(n=l["aria-invalid"])&&void 0!==n?n:b}}}(P({label:r,description:a,state:d,id:S,disabled:m},j)),H=D.labelId,V=D.descriptionId,X=D.feedbackId,T=D.inputId,W=D.inputProps,_={baseFontSize:M,disabled:m,errorMessage:h,id:X,size:b,state:d,successMessage:v};return e.createElement(c,{darkMode:z},e.createElement(ee,{value:{disabled:m,size:b,state:d,inputProps:W,optional:k}},e.createElement("div",C({className:i(F,x),ref:t},j),e.createElement("div",{className:i(ae,I({},ie,!(!r&&!a)))},r&&e.createElement(w,{"data-testid":Q.label,className:F,htmlFor:T,id:H,disabled:m},r),a&&e.createElement(O,{"data-testid":Q.description,className:F,id:V,disabled:m},a)),o,e.createElement(ue,_))))}));Pe.displayName="FormField";var De=S("form-field-input"),Ie=S("form-field-icon"),Ce=function(e){return"0 0 0 100px ".concat(e," inset")},Le=a(be||(be=H(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-size: inherit;\n line-height: inherit;\n font-family: ",";\n width: 100%;\n height: 36px;\n font-weight: ",";\n border: 1px solid;\n z-index: 1;\n outline: none;\n border-radius: 6px;\n transition: ","ms ease-in-out;\n transition-property: border-color, box-shadow;\n z-index: 0;\n\n & ."," {\n font-family: ",";\n color: inherit;\n background-color: inherit;\n font-size: inherit;\n line-height: inherit;\n outline: none;\n border: none;\n }\n\n & ."," svg,\n & svg {\n min-height: 16px;\n min-width: 16px;\n }\n"])),u[1],g.default,h.regular,y.default,De,g.default,Ie),He=function(e){return a(me||(me=H(["\n @supports selector(:has(a, b)) {\n &:focus-within:not(:has(.",":focus)) {\n ",'\n }\n }\n\n /* Fallback for when "has" is unsupported */\n @supports not selector(:has(a, b)) {\n &:focus-within {\n ',"\n }\n }\n"])),Ie,e,e)},Ve=I(I({},j.Light,He("\n {\n box-shadow: ".concat(v.light.input,";\n border-color: ").concat(M.white,";\n }\n "))),j.Dark,He("\n {\n box-shadow: ".concat(v.dark.input,";\n border-color: ").concat(M.gray.dark4,";\n }\n "))),Xe="&:has(button.".concat(Ie,")"),Te=I(I(I(I({},p.XSmall,a(ge||(ge=H(["\n height: 22px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[200],Xe,u[100])),p.Small,a(he||(he=H(["\n height: 28px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[200],Xe,u[100])),p.Default,a(ye||(ye=H(["\n height: 36px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[300],Xe,u[150])),p.Large,a(ve||(ve=H(["\n height: 48px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[300],Xe,u[200]));function We(e){var n=e.disabled,t=e.size,r=e.state,o=e.theme;return i(Le,function(e){var n=e===j.Dark?M.gray.dark4:m.light.background.primary.default;return a(fe||(fe=H(["\n color: ",";\n background: ",";\n border: 1px solid;\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n font-weight: ",";\n color: ",";\n }\n }\n "])),m[e].text.primary.default,n,De,m[e].text.primary.default,n,m[e].border.primary.default,m[e].text.primary.default,Ce(n),Ce(n),v[e].input,m[e].border.primary.focus,Ce(n),x[e].gray,h.regular,m[e].text.placeholder.default)}(o),Te[t],I(I({},i(function(e){var n=e.theme,t=e.state;return I(I(I({},Y.Error,a(xe||(xe=H(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),m[n].border.error.default,x[n].red)),Y.None,a(Ee||(Ee=H(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),m[n].border.primary.default,x[n].gray)),Y.Valid,a(ze||(ze=H(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),m[n].border.success.default,x[n].green))[t]}({theme:o,state:r}),Ve[o]),!n),function(e){return a(ke||(ke=H(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: inherit;\n }\n }\n\n & ."," {\n cursor: not-allowed;\n pointer-events: none;\n color: ",";\n\n &::placeholder {\n color: inherit;\n }\n\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n appearance: none;\n\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: inherit;\n }\n }\n }\n "])),m[e].text.disabled.default,m[e].background.disabled.default,m[e].border.disabled.default,De,m[e].text.disabled.default,m[e].border.disabled.hover,m[e].text.disabled.hover,Ce(m[e].background.disabled.hover))}(o),n))}var _e,Ae=a(we||(we=H(["\n width: 100%;\n"]))),Be=a(Oe||(Oe=H(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),u[100]),Ge=function(e){return a(Ne||(Ne=H(["\n color: ",";\n "])),m[e].icon.disabled.default)},qe=function(e){return a(Se||(Se=H(["\n color: ",";\n "])),m[e].icon.secondary.default)},Je=function(e){return a(je||(je=H(["\n color: ",";\n\n font-size: 12px;\n line-height: 12px;\n font-style: italic;\n font-weight: ",";\n display: flex;\n align-items: center;\n > p {\n margin: 0;\n }\n "])),m[e].text.secondary.default,h.regular)},Ke=["contentEnd","className","children"],Qe=t((function(n,t){var r=n.contentEnd,a=n.className,o=n.children,l=L(n,Ke),s=d().theme,c=ne(),u=c.disabled,b=c.size,f=c.state,m=c.inputProps,g=c.optional,h=We({disabled:u,size:null!=b?b:p.Default,state:f,theme:s}),y=e.cloneElement(o,P(P({},m),{},{className:i(De,o.props.className)})),v=f===Y.None&&!u&&g,x=v||r;return e.createElement("div",C({},l,{ref:t,className:i(h,a)}),e.createElement("div",{className:Ae},y),x&&e.createElement("div",{className:Be},v&&e.createElement("div",{"data-lgid":Q.optional,className:Je(s)},e.createElement("p",null,"Optional")),r&&e.cloneElement(r,{className:i(Ie,qe(s),I({},Ge(s),u),r.props.className)})))}));Qe.displayName="FormFieldInputWrapper";var Re=["label","description","state","size","disabled","glyph"],Ue=["label","description","state","size","disabled","glyph"],Ye=["glyph"],Ze={title:"Components/FormField",component:Pe,parameters:{default:"LiveExample",generate:{storyNames:["LargeSize","DefaultSize","SmallSize","XSmallSize"],combineArgs:{darkMode:[!1,!0],optional:[!1,!0],description:[void 0,"Description"],contentEnd:[void 0,e.createElement(o,{glyph:"Cloud",key:""})],state:Object.values(Y),disabled:[!1,!0]},excludeCombinations:[{disabled:!0,state:Y.Error}],args:{children:e.createElement("input",{placeholder:"placeholder"})},decorator:function(n,t){return e.createElement(c,{darkMode:null==t?void 0:t.args.darkMode},e.createElement(n,null,e.createElement(Qe,{contentEnd:null==t?void 0:t.args.contentEnd},null==t?void 0:t.args.children)))}}},args:{label:"Label",description:"Description",errorMessage:"This is a notification",successMessage:"Success",size:p.Default,state:Y.None,glyph:"Beaker"},argTypes:{darkMode:{control:"boolean"},label:{control:"text"},description:{control:"text"},errorMessage:{control:"text"},successMessage:{control:"text"},size:{control:"select",options:Object.values(p)},state:{control:"select",options:Object.values(Y)},glyph:{control:"select",options:Object.keys(l)}}},$e=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,s=n.glyph,c=L(n,Re);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},c),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(o,{glyph:s})},e.createElement("input",{placeholder:"placeholder"})))},en=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,c=n.glyph,d=L(n,Ue);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},d),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:c}))},e.createElement("input",{placeholder:"placeholder"})))},nn=function(n){n.glyph;var t=L(n,Ye);return e.createElement(Pe,t,e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement("span",{className:a(_e||(_e=H(["\n display: flex;\n align-items: center;\n gap: 0;\n "])))},e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:"XWithCircle"})),e.createElement(o,{glyph:"CaretDown"}))},e.createElement("input",{placeholder:"placeholder"})))},tn=function(n){var t=ne().inputProps;return e.createElement(r,{rightGlyph:e.createElement(o,C({glyph:n.glyph},t))},"Click Me")},rn=function(n){return e.createElement(Pe,n,e.createElement(tn,n))},an=function(){return e.createElement(e.Fragment,null)};an.parameters={generate:{args:{size:p.Large}}};var on=function(){return e.createElement(e.Fragment,null)};on.parameters={generate:{args:{size:p.Default}}};var ln=function(){return e.createElement(e.Fragment,null)};ln.parameters={generate:{args:{size:p.Small}}};var sn=function(){return e.createElement(e.Fragment,null)};sn.parameters={generate:{args:{size:p.XSmall}}};export{rn as Custom_ButtonInput,nn as Custom_TwoIcons,on as DefaultSize,an as LargeSize,$e as LiveExample,ln as SmallSize,en as WithIconButton,sn as XSmallSize,Ze as default}; | ||
| import e,{useContext as n,forwardRef as t}from"react";import r from"@leafygreen-ui/button";import{css as a,cx as i}from"@leafygreen-ui/emotion";import o,{glyphs as l}from"@leafygreen-ui/icon";import s from"@leafygreen-ui/icon-button";import c,{useDarkMode as d}from"@leafygreen-ui/leafygreen-provider";import{Size as p,spacing as u,typeScales as b,Variant as f,color as m,fontFamilies as g,fontWeights as h,transitionDuration as y,focusRing as v,hoverRing as x}from"@leafygreen-ui/tokens";import{useUpdatedBaseFontSize as E,Error as z,Body as k,Label as w,Description as O}from"@leafygreen-ui/typography";import{useIdAllocator as N}from"@leafygreen-ui/hooks";import{createUniqueClassName as S,Theme as j}from"@leafygreen-ui/lib";import{palette as M}from"@leafygreen-ui/palette";function F(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function P(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?F(Object(t),!0).forEach((function(n){I(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):F(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function D(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n);if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof n?n:n+""}function I(e,n,t){return(n=D(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function C(){return C=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},C.apply(this,arguments)}function L(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function H(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var V,X,T,W,_,A,B,G,q,J,K="lg-form_field",Q={root:K,description:"".concat(K,"-description"),errorMessage:"".concat(K,"-error_message"),feedback:"".concat(K,"-feedback"),input:"".concat(K,"-input"),label:"".concat(K,"-label"),optional:"".concat(K,"-optional"),successMessage:"".concat(K,"-success_message")},R="This input needs your attention",U="Success",Y={None:"none",Error:"error",Valid:"valid"},Z={disabled:!1,size:p.Default,state:Y.None},$=e.createContext(Z),ee=function(n){var t=n.value,r=n.children;return e.createElement($.Provider,{value:t},r)},ne=function(){return n($)},te=function(e){var n=e.baseFontSize,t=e.size;return t===p.XSmall||t===p.Small?a(V||(V=H(["\n font-size: ","px;\n line-height: ","px;\n "])),b.body1.fontSize,b.body1.lineHeight):t===p.Default?a(X||(X=H(["\n font-size: ","px;\n line-height: ","px;\n "])),n,b.body1.lineHeight):t===p.Large?a(T||(T=H(["\n font-size: ","px;\n line-height: ","px;\n "])),b.large.fontSize,b.large.lineHeight):void 0},re=function(e){return e===Y.Error?f.Error:e===Y.Valid?f.Success:f.Primary},ae=a(W||(W=H(["\n display: flex;\n flex-direction: column;\n"]))),ie=a(_||(_=H(["\n margin-bottom: ","px;\n"])),u[100]),oe=a(A||(A=H(["\n display: flex;\n gap: ","px;\n"])),u[100]),le=a(B||(B=H(["\n padding-top: ","px;\n"])),u[100]),se=a(G||(G=H(["\n opacity: 0;\n"]))),ce=a(q||(q=H(["\n display: flex;\n justify-content: center;\n align-items: center;\n"]))),de=function(e){return a(J||(J=H(["\n height: ","px;\n "])),e===p.Large?b.large.lineHeight:b.body1.lineHeight)},pe=["baseFontSize","disabled","errorMessage","hideFeedback","id","size","state","successMessage"],ue=function(n){var t=n.baseFontSize,r=n.disabled,a=n.errorMessage,l=n.hideFeedback,s=void 0!==l&&l,c=n.id,p=n.size,u=n.state,b=n.successMessage,f=L(n,pe),g=d().theme,h=E(t),y=te({baseFontSize:h,size:p}),v=u===Y.Error,x=(v||u===Y.Valid)&&!r,w=x?{glyph:v?"Warning":"Checkmark",fill:m[g].icon[re(u)].default,title:v?"Error":"Valid"}:void 0;return e.createElement("div",C({id:c,"data-lgid":Q.feedback,"data-testid":Q.feedback,className:i(oe,I(I({},le,x),se,s)),"aria-live":"polite","aria-relevant":"all"},f),x&&e.createElement(e.Fragment,null,w&&e.createElement("div",{className:i(ce,de(p))},e.createElement(o,C({},w,{"aria-hidden":!0}))),v?e.createElement(z,{"data-lgid":Q.errorMessage,"data-testid":Q.errorMessage,className:y},a):e.createElement(k,{"data-lgid":Q.successMessage,"data-testid":Q.successMessage,className:y},b)))};ue.displayName="FormFieldFeedback";var be,fe,me,ge,he,ye,ve,xe,Ee,ze,ke,we,Oe,Ne,Se,je,Me=["label","description","state","id","disabled"],Fe=["label","description","children","baseFontSize","state","size","disabled","errorMessage","successMessage","className","darkMode","optional","id"],Pe=t((function(n,t){var r=n.label,a=n.description,o=n.children,l=n.baseFontSize,s=n.state,d=void 0===s?Y.None:s,u=n.size,b=void 0===u?p.Default:u,f=n.disabled,m=void 0!==f&&f,g=n.errorMessage,h=void 0===g?R:g,y=n.successMessage,v=void 0===y?U:y,x=n.className,z=n.darkMode,k=n.optional,S=n.id,j=L(n,Fe),M=E(l),F=te({baseFontSize:M,size:b}),D=function(e){var n,t=e.label,r=e.description,a=e.state,i=e.id,o=e.disabled,l=L(e,Me),s=N({prefix:Q.label}),c=N({prefix:Q.description}),d=N({prefix:Q.feedback}),p=N({prefix:Q.input}),u=null!=i?i:p,b=a===Y.Error,f=a!==Y.None,m=t?s:l["aria-labelledby"],g=t||m?void 0:l["aria-label"],h="".concat(r?c:""," ").concat(f?d:"").trim(),y=null!==(n=l["aria-invalid"])&&void 0!==n?n:b;return{labelId:s,descriptionId:c,feedbackId:d,inputId:u,inputProps:{id:u,"aria-labelledby":m,"aria-describedby":h,"aria-label":g,"aria-disabled":o,readOnly:l.readOnly?l.readOnly:o,"aria-invalid":y}}}(P({label:r,description:a,state:d,id:S,disabled:m},j)),H=D.labelId,V=D.descriptionId,X=D.feedbackId,T=D.inputId,W=D.inputProps,_={baseFontSize:M,disabled:m,errorMessage:h,id:X,size:b,state:d,successMessage:v};return e.createElement(c,{darkMode:z},e.createElement(ee,{value:{disabled:m,size:b,state:d,inputProps:W,optional:k}},e.createElement("div",C({className:i(F,x),ref:t},j),e.createElement("div",{className:i(ae,I({},ie,!(!r&&!a)))},r&&e.createElement(w,{"data-testid":Q.label,className:F,htmlFor:T,id:H,disabled:m},r),a&&e.createElement(O,{"data-testid":Q.description,className:F,id:V,disabled:m},a)),o,e.createElement(ue,_))))}));Pe.displayName="FormField";var De=S("form-field-input"),Ie=S("form-field-icon"),Ce=function(e){return"0 0 0 100px ".concat(e," inset")},Le=a(be||(be=H(["\n display: flex;\n align-items: center;\n gap: ","px;\n font-size: inherit;\n line-height: inherit;\n font-family: ",";\n width: 100%;\n height: 36px;\n font-weight: ",";\n border: 1px solid;\n z-index: 1;\n outline: none;\n border-radius: 6px;\n transition: ","ms ease-in-out;\n transition-property: border-color, box-shadow;\n z-index: 0;\n\n & ."," {\n font-family: ",";\n color: inherit;\n background-color: inherit;\n font-size: inherit;\n line-height: inherit;\n outline: none;\n border: none;\n }\n\n & ."," svg,\n & svg {\n min-height: 16px;\n min-width: 16px;\n }\n"])),u[1],g.default,h.regular,y.default,De,g.default,Ie),He=function(e){return a(me||(me=H(["\n @supports selector(:has(a, b)) {\n &:focus-within:not(:has(.",":focus)) {\n ",'\n }\n }\n\n /* Fallback for when "has" is unsupported */\n @supports not selector(:has(a, b)) {\n &:focus-within {\n ',"\n }\n }\n"])),Ie,e,e)},Ve=I(I({},j.Light,He("\n {\n box-shadow: ".concat(v.light.input,";\n border-color: ").concat(M.white,";\n }\n "))),j.Dark,He("\n {\n box-shadow: ".concat(v.dark.input,";\n border-color: ").concat(M.gray.dark4,";\n }\n "))),Xe="&:has(button.".concat(Ie,")"),Te=I(I(I(I({},p.XSmall,a(ge||(ge=H(["\n height: 22px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[200],Xe,u[100])),p.Small,a(he||(he=H(["\n height: 28px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[200],Xe,u[100])),p.Default,a(ye||(ye=H(["\n height: 36px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[300],Xe,u[150])),p.Large,a(ve||(ve=H(["\n height: 48px;\n padding-inline: ","px;\n\n "," {\n padding-inline-end: ","px;\n }\n "])),u[300],Xe,u[200]));function We(e){var n=e.disabled,t=e.size,r=e.state,o=e.theme;return i(Le,function(e){var n=e===j.Dark?M.gray.dark4:m.light.background.primary.default;return a(fe||(fe=H(["\n color: ",";\n background: ",";\n border: 1px solid;\n\n & ."," {\n &:-webkit-autofill {\n color: ",";\n background: ",";\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n\n &:focus {\n box-shadow: ",",\n ",";\n border-color: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: ",",\n ",";\n }\n }\n\n &::placeholder {\n font-weight: ",";\n color: ",";\n }\n }\n "])),m[e].text.primary.default,n,De,m[e].text.primary.default,n,m[e].border.primary.default,m[e].text.primary.default,Ce(n),Ce(n),v[e].input,m[e].border.primary.focus,Ce(n),x[e].gray,h.regular,m[e].text.placeholder.default)}(o),Te[t],I(I({},i(function(e){var n=e.theme,t=e.state;return I(I(I({},Y.Error,a(xe||(xe=H(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),m[n].border.error.default,x[n].red)),Y.None,a(Ee||(Ee=H(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),m[n].border.primary.default,x[n].gray)),Y.Valid,a(ze||(ze=H(["\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: ",";\n }\n }\n "])),m[n].border.success.default,x[n].green))[t]}({theme:o,state:r}),Ve[o]),!n),function(e){return a(ke||(ke=H(["\n cursor: not-allowed;\n color: ",";\n background-color: ",";\n border-color: ",";\n\n &:hover,\n &:active {\n &:not(:focus) {\n box-shadow: inherit;\n }\n }\n\n & ."," {\n cursor: not-allowed;\n pointer-events: none;\n color: ",";\n\n &::placeholder {\n color: inherit;\n }\n\n &:-webkit-autofill {\n &,\n &:hover,\n &:focus {\n appearance: none;\n\n border: 1px solid ",";\n -webkit-text-fill-color: ",";\n box-shadow: ",";\n }\n\n &:hover:not(:focus) {\n box-shadow: inherit;\n }\n }\n }\n "])),m[e].text.disabled.default,m[e].background.disabled.default,m[e].border.disabled.default,De,m[e].text.disabled.default,m[e].border.disabled.hover,m[e].text.disabled.hover,Ce(m[e].background.disabled.hover))}(o),n))}var _e,Ae=a(we||(we=H(["\n width: 100%;\n"]))),Be=a(Oe||(Oe=H(["\n display: flex;\n align-items: center;\n gap: ","px;\n"])),u[100]),Ge=function(e){return a(Ne||(Ne=H(["\n color: ",";\n "])),m[e].icon.disabled.default)},qe=function(e){return a(Se||(Se=H(["\n color: ",";\n "])),m[e].icon.secondary.default)},Je=function(e){return a(je||(je=H(["\n color: ",";\n\n font-size: 12px;\n line-height: 12px;\n font-style: italic;\n font-weight: ",";\n display: flex;\n align-items: center;\n > p {\n margin: 0;\n }\n "])),m[e].text.secondary.default,h.regular)},Ke=["contentEnd","className","children"],Qe=t((function(n,t){var r=n.contentEnd,a=n.className,o=n.children,l=L(n,Ke),s=d().theme,c=ne(),u=c.disabled,b=c.size,f=c.state,m=c.inputProps,g=c.optional,h=We({disabled:u,size:null!=b?b:p.Default,state:f,theme:s}),y=e.cloneElement(o,P(P({},m),{},{className:i(De,o.props.className)})),v=f===Y.None&&!u&&g,x=v||r;return e.createElement("div",C({},l,{ref:t,className:i(h,a)}),e.createElement("div",{className:Ae},y),x&&e.createElement("div",{className:Be},v&&e.createElement("div",{"data-lgid":Q.optional,className:Je(s)},e.createElement("p",null,"Optional")),r&&e.cloneElement(r,{className:i(Ie,qe(s),I({},Ge(s),u),r.props.className)})))}));Qe.displayName="FormFieldInputWrapper";var Re=["label","description","state","size","disabled","glyph"],Ue=["label","description","state","size","disabled","glyph"],Ye=["glyph"],Ze={title:"Components/FormField",component:Pe,parameters:{default:"LiveExample",generate:{storyNames:["LargeSize","DefaultSize","SmallSize","XSmallSize"],combineArgs:{darkMode:[!1,!0],optional:[!1,!0],description:[void 0,"Description"],contentEnd:[void 0,e.createElement(o,{glyph:"Cloud",key:""})],state:Object.values(Y),disabled:[!1,!0]},excludeCombinations:[{disabled:!0,state:Y.Error}],args:{children:e.createElement("input",{placeholder:"placeholder"})},decorator:function(n,t){return e.createElement(c,{darkMode:null==t?void 0:t.args.darkMode},e.createElement(n,null,e.createElement(Qe,{contentEnd:null==t?void 0:t.args.contentEnd},null==t?void 0:t.args.children)))}}},args:{label:"Label",description:"Description",errorMessage:"This is a notification",successMessage:"Success",size:p.Default,state:Y.None,glyph:"Beaker"},argTypes:{darkMode:{control:"boolean"},label:{control:"text"},description:{control:"text"},errorMessage:{control:"text"},successMessage:{control:"text"},size:{control:"select",options:Object.values(p)},state:{control:"select",options:Object.values(Y)},glyph:{control:"select",options:Object.keys(l)}}},$e=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,s=n.glyph,c=L(n,Re);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},c),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(o,{glyph:s})},e.createElement("input",{placeholder:"placeholder"})))},en=function(n){var t=n.label,r=n.description,a=n.state,i=n.size,l=n.disabled,c=n.glyph,d=L(n,Ue);return e.createElement(Pe,C({label:t,description:r,state:a,size:i,disabled:l},d),e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:c}))},e.createElement("input",{placeholder:"placeholder"})))},nn=function(n){n.glyph;var t=L(n,Ye);return e.createElement(Pe,t,e.createElement(Qe,{role:"combobox",tabIndex:-1,contentEnd:e.createElement("span",{className:a(_e||(_e=H(["\n display: flex;\n align-items: center;\n gap: 0;\n "])))},e.createElement(s,{"aria-label":"Icon"},e.createElement(o,{glyph:"XWithCircle"})),e.createElement(o,{glyph:"CaretDown"}))},e.createElement("input",{placeholder:"placeholder"})))},tn=function(n){var t=ne().inputProps;return e.createElement(r,{rightGlyph:e.createElement(o,C({glyph:n.glyph},t))},"Click Me")},rn=function(n){return e.createElement(Pe,n,e.createElement(tn,n))},an=function(){return e.createElement(e.Fragment,null)};an.parameters={generate:{args:{size:p.Large}}};var on=function(){return e.createElement(e.Fragment,null)};on.parameters={generate:{args:{size:p.Default}}};var ln=function(){return e.createElement(e.Fragment,null)};ln.parameters={generate:{args:{size:p.Small}}};var sn=function(){return e.createElement(e.Fragment,null)};sn.parameters={generate:{args:{size:p.XSmall}}};export{rn as Custom_ButtonInput,nn as Custom_TwoIcons,on as DefaultSize,an as LargeSize,$e as LiveExample,ln as SmallSize,en as WithIconButton,sn as XSmallSize,Ze as default}; |
@@ -306,2 +306,21 @@ [ | ||
| "tags": {} | ||
| }, | ||
| "readOnly": { | ||
| "name": "readOnly", | ||
| "defaultValue": null, | ||
| "description": "Whether or not the field is readonly.", | ||
| "required": false, | ||
| "type": { | ||
| "name": "enum", | ||
| "raw": "boolean", | ||
| "value": [ | ||
| { | ||
| "value": "false" | ||
| }, | ||
| { | ||
| "value": "true" | ||
| } | ||
| ] | ||
| }, | ||
| "tags": {} | ||
| } | ||
@@ -308,0 +327,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.37%
219486
- Lines of code
- increased by2.57%
2836
Dependency changes
Updated@leafygreen-ui/icon@^12.4.0