@react-spectrum/textfield 3.8.0 → 3.9.1
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/main.css +1 -1
- package/dist/main.js +112 -67
- package/dist/main.js.map +1 -1
- package/dist/module.js +113 -68
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +1 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/TextFieldBase.tsx +39 -25
package/dist/main.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.spectrum-Textfield-input_73bc77{font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(ar){font-family:adobe-arabic,myriad-arabic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(he){font-family:adobe-hebrew,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(zh-Hans),.spectrum-Textfield-input_73bc77:lang(zh){font-family:adobe-clean-han-simplified-c,SimSun,Heiti SC Light,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(ko){font-family:adobe-clean-han-korean,Malgun Gothic,Apple Gothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(ja){font-family:adobe-clean-han-japanese,Yu Gothic,メイリオ,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro W3,Osaka,MSPゴシック,MS PGothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield_73bc77{min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));display:inline-flex;position:relative}.spectrum-Textfield_73bc77.spectrum-Textfield--quiet_73bc77.spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));overflow-x:hidden}.spectrum-Textfield-input_73bc77{box-sizing:border-box;border:var(--spectrum-textfield-border-size,var(--spectrum-alias-border-size-thin))solid;border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);text-indent:0;width:100%;height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));vertical-align:top;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,130ms)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,130ms)ease-in-out;-webkit-appearance:none;-moz-appearance:textfield;outline:0;margin:0;overflow:visible}.spectrum-Textfield-input_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-placeholder_73bc77{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));font-synthesis:none;transition:color var(--spectrum-global-animation-duration-100,130ms)ease-in-out;opacity:1}.spectrum-Textfield-input_73bc77::-moz-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,130ms)ease-in-out;opacity:1}.spectrum-Textfield-input_73bc77:lang(ja)::placeholder,.spectrum-Textfield-input_73bc77:lang(ja).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(zh)::placeholder,.spectrum-Textfield-input_73bc77:lang(zh).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(ko)::placeholder,.spectrum-Textfield-input_73bc77:lang(ko).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(ar)::placeholder,.spectrum-Textfield-input_73bc77:lang(ar).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(he)::placeholder,.spectrum-Textfield-input_73bc77:lang(he).is-placeholder_73bc77{font-style:normal}.spectrum-Textfield-input_73bc77:lang(ja)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(zh)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(ko)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(ar)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(he)::-moz-placeholder{font-style:normal}.spectrum-Textfield-input_73bc77.is-hovered_73bc77::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.spectrum-Textfield-input_73bc77:disabled{resize:none;opacity:1}.spectrum-Textfield-input_73bc77:disabled::placeholder,.spectrum-Textfield-input_73bc77:disabled.is-placeholder_73bc77{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.spectrum-Textfield-input_73bc77::-ms-clear{width:0;height:0}.spectrum-Textfield-input_73bc77::-webkit-inner-spin-button,.spectrum-Textfield-input_73bc77::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.spectrum-Textfield-input_73bc77:-moz-ui-invalid{box-shadow:none}.spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77{height:auto;min-height:var(--spectrum-global-dimension-size-700);padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);resize:none;overflow:auto}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{padding-left:var(--spectrum-textfield-quiet-padding-x,0)}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77,[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{padding-right:var(--spectrum-textfield-quiet-padding-x,0)}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{padding-left:var(--spectrum-textfield-quiet-padding-x,0)}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{border-width:0 0 var(--spectrum-textfield-quiet-border-size,var(--spectrum-alias-border-size-thin))0;border-radius:0}[dir=ltr] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-input_73bc77{padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=rtl] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-input_73bc77{padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=ltr] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77{padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=rtl] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77{padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=ltr] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-input_73bc77{padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=rtl] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-input_73bc77{padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.spectrum-Textfield-wrapper_73bc77 .spectrum-Textfield--multiline_73bc77{min-height:0;flex:auto}.spectrum-Textfield-wrapper_73bc77 .spectrum-Textfield--multiline_73bc77.spectrum-Textfield--quiet_73bc77{max-height:100%;flex:0 auto}.spectrum-Textfield-wrapper_73bc77 .spectrum-Textfield--multiline_73bc77.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{max-height:100%}[dir=ltr] .spectrum-Textfield-validationIcon_73bc77{padding-right:calc(var(--spectrum-global-dimension-size-150)/2)}[dir=rtl] .spectrum-Textfield-validationIcon_73bc77{padding-left:calc(var(--spectrum-global-dimension-size-150)/2)}.spectrum-Textfield-validationIcon_73bc77{pointer-events:all;transition:color var(--spectrum-global-animation-duration-100,130ms)ease-in-out;position:absolute}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-validationIcon_73bc77{padding-right:0}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-validationIcon_73bc77{padding-left:0}[dir=ltr] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{right:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)}[dir=rtl] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{left:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)}.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{width:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));height:var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225));top:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225))/2)}[dir=ltr] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{right:var(--spectrum-global-dimension-size-150)}[dir=rtl] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{left:var(--spectrum-global-dimension-size-150)}.spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{width:var(--spectrum-icon-checkmark-medium-width);height:var(--spectrum-icon-checkmark-medium-height);top:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-checkmark-medium-height)/2)}[dir=ltr] .spectrum-Textfield-icon_73bc77{left:var(--spectrum-global-dimension-size-150)}[dir=rtl] .spectrum-Textfield-icon_73bc77{right:var(--spectrum-global-dimension-size-150)}.spectrum-Textfield-icon_73bc77{height:var(--spectrum-icon-info-medium-height,var(--spectrum-global-dimension-size-225));width:var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225));top:var(--spectrum-global-dimension-size-85);transition:fill var(--spectrum-global-animation-duration-100,130ms)ease-in-out;display:block;position:absolute}[dir=ltr] .spectrum-Textfield-inputIcon_73bc77{padding-left:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}[dir=rtl] .spectrum-Textfield-inputIcon_73bc77{padding-right:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77~.spectrum-Textfield-icon_73bc77{left:0}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77~.spectrum-Textfield-icon_73bc77{right:0}.spectrum-Textfield-inputIcon_73bc77.spectrum-Textfield--multiline_73bc77{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}[dir=ltr] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{right:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2 + var(--spectrum-global-dimension-size-150)/2)}[dir=rtl] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{left:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2 + var(--spectrum-global-dimension-size-150)/2)}.spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{top:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-loader-circle-small-width,var(--spectrum-global-dimension-static-size-200))/2);position:absolute}[dir=ltr] .spectrum-Textfield--quiet_73bc77.spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{padding-right:0}[dir=rtl] .spectrum-Textfield--quiet_73bc77.spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{padding-left:0}.spectrum-Textfield-input_73bc77{background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}.spectrum-Textfield-input_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}.spectrum-Textfield-input_73bc77.is-hovered_73bc77{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none}.spectrum-Textfield-input_73bc77.is-hovered_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-hovered_73bc77.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}.spectrum-Textfield-input_73bc77.is-hovered_73bc77~.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color-hover,var(--spectrum-global-color-gray-900))}.spectrum-Textfield-input_73bc77:active{background-color:var(--spectrum-textfield-background-color-down,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-mouse-focus));color:var(--spectrum-textfield-text-color-down,var(--spectrum-alias-text-color-down))}.spectrum-Textfield-input_73bc77:active::placeholder,.spectrum-Textfield-input_73bc77:active.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}.spectrum-Textfield-input_73bc77:active~.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color-down,var(--spectrum-alias-icon-color-down))}.spectrum-Textfield-input_73bc77:focus,.spectrum-Textfield-input_73bc77.is-focused_73bc77{border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-mouse-focus))}.spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-input_73bc77[disabled],.spectrum-Textfield-input_73bc77.is-disabled_73bc77{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.spectrum-Textfield-input_73bc77[disabled]::placeholder,.spectrum-Textfield-input_73bc77[disabled].is-placeholder_73bc77,.spectrum-Textfield-input_73bc77.is-disabled_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-disabled_73bc77.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.spectrum-Textfield-input_73bc77[disabled]~.spectrum-Textfield-icon_73bc77,.spectrum-Textfield-input_73bc77.is-disabled_73bc77~.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.is-hovered_73bc77,.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77:active,.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77:focus,.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.is-focused_73bc77{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-alias-border-color))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.is-hovered_73bc77{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-alias-border-color-hover))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-mouse-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77:focus,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.is-focused_73bc77{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77:disabled,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.is-disabled_73bc77{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77:focus{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color,var(--spectrum-alias-icon-color))}.spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{fill:var(--spectrum-alert-success-icon-color,var(--spectrum-semantic-positive-color-icon))}.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{fill:var(--spectrum-alert-error-icon-color,var(--spectrum-semantic-negative-color-icon))}@media (forced-colors:active){.spectrum-Textfield-input_73bc77{--spectrum-textfield-text-color-disabled:GrayText;--spectrum-textfield-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-key-focus:Highlight;--spectrum-textfield-border-color-key-focus:Highlight;--spectrum-textfield-placeholder-text-color:GrayText;--spectrum-textfield-placeholder-text-color-hover:GrayText}.spectrum-Textfield-input_73bc77.focus-ring_73bc77,.spectrum-Textfield-input_73bc77.focus-ring_73bc77{outline:2px solid Highlight}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77{forced-color-adjust:none;box-shadow:0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));outline:0}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77 .spectrum-Textfield-input_73bc77,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77 .spectrum-Textfield-input_73bc77{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}}
|
1
|
+
.spectrum-Textfield-input_73bc77{font-family:adobe-clean-ux,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(ar){font-family:adobe-arabic,myriad-arabic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(he){font-family:adobe-hebrew,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(zh-Hans),.spectrum-Textfield-input_73bc77:lang(zh){font-family:adobe-clean-han-simplified-c,SimSun,Heiti SC Light,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(ko){font-family:adobe-clean-han-korean,Malgun Gothic,Apple Gothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield-input_73bc77:lang(ja){font-family:adobe-clean-han-japanese,Yu Gothic,メイリオ,ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro W3,Osaka,MSPゴシック,MS PGothic,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.spectrum-Textfield_73bc77{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.spectrum-Textfield_73bc77:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-Textfield_73bc77.focus-ring_73bc77:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.spectrum-Textfield--quiet_73bc77:after{border-radius:0}.spectrum-Textfield--quiet_73bc77.focus-ring_73bc77:after{margin:0 0 calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size))0;box-shadow:0 var(--spectrum-focus-ring-size)0 var(--spectrum-focus-ring-color)}.spectrum-Textfield_73bc77{min-width:var(--spectrum-textfield-min-width,var(--spectrum-global-dimension-size-600));width:var(--spectrum-alias-single-line-width,var(--spectrum-global-dimension-size-2400));display:inline-flex;position:relative}.spectrum-Textfield_73bc77.spectrum-Textfield--quiet_73bc77.spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));overflow-x:hidden}.spectrum-Textfield-input_73bc77{box-sizing:border-box;border:var(--spectrum-alias-input-border-size)solid;border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);text-indent:0;width:100%;height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));vertical-align:top;font-size:var(--spectrum-textfield-text-size,var(--spectrum-alias-font-size-default));line-height:var(--spectrum-textfield-text-line-height,var(--spectrum-alias-body-text-line-height));text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s)ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-in-out;-webkit-appearance:none;-moz-appearance:textfield;outline:none;margin:0;overflow:visible}.spectrum-Textfield-input_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-placeholder_73bc77{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));font-synthesis:none;transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;opacity:1}.spectrum-Textfield-input_73bc77::-moz-placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular));font-style:var(--spectrum-textfield-placeholder-text-font-style,var(--spectrum-global-font-style-italic));transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;opacity:1}.spectrum-Textfield-input_73bc77:lang(ja)::placeholder,.spectrum-Textfield-input_73bc77:lang(ja).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(zh)::placeholder,.spectrum-Textfield-input_73bc77:lang(zh).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(ko)::placeholder,.spectrum-Textfield-input_73bc77:lang(ko).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(ar)::placeholder,.spectrum-Textfield-input_73bc77:lang(ar).is-placeholder_73bc77,.spectrum-Textfield-input_73bc77:lang(he)::placeholder,.spectrum-Textfield-input_73bc77:lang(he).is-placeholder_73bc77{font-style:normal}.spectrum-Textfield-input_73bc77:lang(ja)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(zh)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(ko)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(ar)::-moz-placeholder,.spectrum-Textfield-input_73bc77:lang(he)::-moz-placeholder{font-style:normal}.spectrum-Textfield-input_73bc77.is-hovered_73bc77::placeholder{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.spectrum-Textfield-input_73bc77:disabled{resize:none;opacity:1}.spectrum-Textfield-input_73bc77:disabled::placeholder,.spectrum-Textfield-input_73bc77:disabled.is-placeholder_73bc77{font-weight:var(--spectrum-textfield-placeholder-text-font-weight,var(--spectrum-global-font-weight-regular))}.spectrum-Textfield-input_73bc77::-ms-clear{width:0;height:0}.spectrum-Textfield-input_73bc77::-webkit-inner-spin-button,.spectrum-Textfield-input_73bc77::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.spectrum-Textfield-input_73bc77:-moz-ui-invalid{box-shadow:none}.spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77{height:auto;min-height:var(--spectrum-global-dimension-size-700);padding:3px var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))5px calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) - 1px);resize:none;overflow:auto}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{padding-left:var(--spectrum-textfield-quiet-padding-x,0)}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77,[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{padding-right:var(--spectrum-textfield-quiet-padding-x,0)}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{padding-left:var(--spectrum-textfield-quiet-padding-x,0)}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{border-width:0 0 var(--spectrum-alias-input-border-size)0;border-radius:0}[dir=ltr] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-input_73bc77{padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=rtl] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-input_73bc77{padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=ltr] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77{padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=rtl] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77{padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=ltr] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-input_73bc77{padding-right:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}[dir=rtl] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-input_73bc77{padding-left:calc(var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.spectrum-Textfield-wrapper_73bc77.spectrum-Textfield-wrapper--quiet_73bc77{-ms-grid-rows:auto;grid-template-rows:auto}.spectrum-Textfield-wrapper_73bc77 .spectrum-Textfield--multiline_73bc77{min-height:0;flex:auto}.spectrum-Textfield-wrapper_73bc77 .spectrum-Textfield--multiline_73bc77.spectrum-Textfield--quiet_73bc77{max-height:100%;flex:0 auto}.spectrum-Textfield-wrapper_73bc77 .spectrum-Textfield--multiline_73bc77.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{max-height:100%}[dir=ltr] .spectrum-Textfield-validationIcon_73bc77{padding-right:calc(var(--spectrum-global-dimension-size-150)/2)}[dir=rtl] .spectrum-Textfield-validationIcon_73bc77{padding-left:calc(var(--spectrum-global-dimension-size-150)/2)}.spectrum-Textfield-validationIcon_73bc77{pointer-events:all;transition:color var(--spectrum-global-animation-duration-100,.13s)ease-in-out;position:absolute}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-validationIcon_73bc77{padding-right:0}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-validationIcon_73bc77{padding-left:0}[dir=ltr] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{right:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)}[dir=rtl] .spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{left:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2)}.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{width:var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225));height:var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225));top:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-height,var(--spectrum-global-dimension-size-225))/2)}[dir=ltr] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{right:var(--spectrum-global-dimension-size-150)}[dir=rtl] .spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{left:var(--spectrum-global-dimension-size-150)}.spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{width:var(--spectrum-icon-checkmark-medium-width);height:var(--spectrum-icon-checkmark-medium-height);top:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-checkmark-medium-height)/2)}[dir=ltr] .spectrum-Textfield-icon_73bc77{left:var(--spectrum-global-dimension-size-150)}[dir=rtl] .spectrum-Textfield-icon_73bc77{right:var(--spectrum-global-dimension-size-150)}.spectrum-Textfield-icon_73bc77{height:var(--spectrum-icon-info-medium-height,var(--spectrum-global-dimension-size-225));width:var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225));top:var(--spectrum-global-dimension-size-85);transition:fill var(--spectrum-global-animation-duration-100,.13s)ease-in-out;display:block;position:absolute}[dir=ltr] .spectrum-Textfield-inputIcon_73bc77{padding-left:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}[dir=rtl] .spectrum-Textfield-inputIcon_73bc77{padding-right:calc(var(--spectrum-global-dimension-size-150) + var(--spectrum-global-dimension-size-225) + var(--spectrum-global-dimension-size-65))}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77{padding-left:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77{padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-info-medium-width,var(--spectrum-global-dimension-size-225)))}[dir=ltr] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77~.spectrum-Textfield-icon_73bc77{left:0}[dir=rtl] .spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-inputIcon_73bc77~.spectrum-Textfield-icon_73bc77{right:0}.spectrum-Textfield-inputIcon_73bc77.spectrum-Textfield--multiline_73bc77{height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height));min-height:var(--spectrum-textfield-height,var(--spectrum-alias-single-line-height))}[dir=ltr] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{right:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2 + var(--spectrum-global-dimension-size-150)/2)}[dir=rtl] .spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{left:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225))/2 + var(--spectrum-global-dimension-size-150)/2)}.spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{top:calc(var(--spectrum-textfield-icon-frame)/2 - var(--spectrum-loader-circle-small-width,var(--spectrum-global-dimension-static-size-200))/2);position:absolute}[dir=ltr] .spectrum-Textfield--quiet_73bc77.spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{padding-right:0}[dir=rtl] .spectrum-Textfield--quiet_73bc77.spectrum-Textfield--loadable_73bc77 .spectrum-Textfield-circleLoader_73bc77{padding-left:0}.spectrum-Textfield-input_73bc77{background-color:var(--spectrum-textfield-background-color,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color,var(--spectrum-alias-border-color));color:var(--spectrum-textfield-text-color,var(--spectrum-alias-text-color))}.spectrum-Textfield-input_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color,var(--spectrum-alias-placeholder-text-color))}.spectrum-Textfield-input_73bc77.is-hovered_73bc77{border-color:var(--spectrum-textfield-border-color-hover,var(--spectrum-alias-border-color-hover));box-shadow:none}.spectrum-Textfield-input_73bc77.is-hovered_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-hovered_73bc77.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color-hover,var(--spectrum-alias-placeholder-text-color-hover))}.spectrum-Textfield-input_73bc77.is-hovered_73bc77~.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color-hover,var(--spectrum-global-color-gray-900))}.spectrum-Textfield-input_73bc77:active{background-color:var(--spectrum-textfield-background-color-down,var(--spectrum-global-color-gray-50));border-color:var(--spectrum-textfield-border-color-down,var(--spectrum-alias-border-color-mouse-focus));color:var(--spectrum-textfield-text-color-down,var(--spectrum-alias-text-color-down))}.spectrum-Textfield-input_73bc77:active::placeholder,.spectrum-Textfield-input_73bc77:active.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color-down,var(--spectrum-alias-placeholder-text-color-down))}.spectrum-Textfield-input_73bc77:active~.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color-down,var(--spectrum-alias-icon-color-down))}.spectrum-Textfield-input_73bc77:focus,.spectrum-Textfield-input_73bc77.is-focused_73bc77{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-input_73bc77[disabled],.spectrum-Textfield-input_73bc77.is-disabled_73bc77{background-color:var(--spectrum-textfield-background-color-disabled,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-textfield-border-color-disabled,var(--spectrum-alias-border-color-transparent));color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled));-webkit-text-fill-color:var(--spectrum-textfield-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.spectrum-Textfield-input_73bc77[disabled]::placeholder,.spectrum-Textfield-input_73bc77[disabled].is-placeholder_73bc77,.spectrum-Textfield-input_73bc77.is-disabled_73bc77::placeholder,.spectrum-Textfield-input_73bc77.is-disabled_73bc77.is-placeholder_73bc77{color:var(--spectrum-textfield-placeholder-text-color-disabled,var(--spectrum-alias-text-color-disabled))}.spectrum-Textfield-input_73bc77[disabled]~.spectrum-Textfield-icon_73bc77,.spectrum-Textfield-input_73bc77.is-disabled_73bc77~.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color-disabled,var(--spectrum-global-color-gray-500))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.is-hovered_73bc77,.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77:active,.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77:focus,.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.is-focused_73bc77{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77{background-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color,var(--spectrum-alias-border-color))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.is-hovered_73bc77{border-color:var(--spectrum-textfield-quiet-border-color-hover,var(--spectrum-alias-border-color-hover))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77:active{border-color:var(--spectrum-textfield-quiet-border-color-down,var(--spectrum-alias-border-color-mouse-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77:focus,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.is-focused_73bc77{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 1px 0 var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77:disabled,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.is-disabled_73bc77{background-color:var(--spectrum-textfield-quiet-background-color-disabled,var(--spectrum-alias-background-color-transparent));border-color:var(--spectrum-textfield-quiet-border-color-disabled,var(--spectrum-alias-border-color-mid))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77{border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77.is-hovered_73bc77{border-color:var(--spectrum-textfield-border-color-error-hover,var(--spectrum-semantic-negative-color-state-hover))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77:active{border-color:var(--spectrum-textfield-border-color-error-down,var(--spectrum-semantic-negative-color-state-down))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77:focus{border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield--quiet_73bc77.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77:not(:active){box-shadow:0 1px 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}.spectrum-Textfield-icon_73bc77{fill:var(--spectrum-textfield-icon-color,var(--spectrum-alias-icon-color))}.spectrum-Textfield--valid_73bc77 .spectrum-Textfield-validationIcon_73bc77{fill:var(--spectrum-alert-success-icon-color,var(--spectrum-semantic-positive-color-icon))}.spectrum-Textfield--invalid_73bc77 .spectrum-Textfield-validationIcon_73bc77{fill:var(--spectrum-alert-error-icon-color,var(--spectrum-semantic-negative-color-icon))}@media (forced-colors:active){.spectrum-Textfield-input_73bc77{--spectrum-textfield-text-color-disabled:GrayText;--spectrum-textfield-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-disabled:GrayText;--spectrum-textfield-quiet-border-color-key-focus:Highlight;--spectrum-textfield-border-color-key-focus:Highlight;--spectrum-textfield-placeholder-text-color:GrayText;--spectrum-textfield-placeholder-text-color-hover:GrayText}.spectrum-Textfield-input_73bc77.focus-ring_73bc77,.spectrum-Textfield-input_73bc77.focus-ring_73bc77{outline:2px solid Highlight}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77{forced-color-adjust:none;box-shadow:0 1px 0 0 var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus));outline:0}.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77 .spectrum-Textfield-input_73bc77,.spectrum-Textfield--quiet_73bc77 .spectrum-Textfield-input_73bc77.focus-ring_73bc77 .spectrum-Textfield-input_73bc77{border-color:var(--spectrum-textfield-quiet-border-color-key-focus,var(--spectrum-alias-border-color-focus))}}
|
package/dist/main.js
CHANGED
@@ -21,10 +21,40 @@ function $parcel$interopDefault(a) {
|
|
21
21
|
$parcel$export(module.exports, "TextArea", () => $eec649e464f3832d$export$f5c9f3c2c4054eec);
|
22
22
|
$parcel$export(module.exports, "TextField", () => $34fd51d50eb4b056$export$2c73285ae9390cec);
|
23
23
|
$parcel$export(module.exports, "TextFieldBase", () => $86793250183ac29e$export$d22444a338b6e3c2);
|
24
|
+
/*
|
25
|
+
* Copyright 2020 Adobe. All rights reserved.
|
26
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
27
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
28
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
29
|
+
*
|
30
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
31
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
32
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
33
|
+
* governing permissions and limitations under the License.
|
34
|
+
*/ /// <reference types="css-module-types" />
|
35
|
+
/*
|
36
|
+
* Copyright 2020 Adobe. All rights reserved.
|
37
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
38
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
39
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
40
|
+
*
|
41
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
42
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
43
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
44
|
+
* governing permissions and limitations under the License.
|
45
|
+
*/
|
24
46
|
|
25
|
-
|
26
|
-
|
27
|
-
|
47
|
+
/*
|
48
|
+
* Copyright 2020 Adobe. All rights reserved.
|
49
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
50
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
51
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
52
|
+
*
|
53
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
54
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
55
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
56
|
+
* governing permissions and limitations under the License.
|
57
|
+
*/
|
28
58
|
|
29
59
|
|
30
60
|
|
@@ -34,6 +64,7 @@ var $40cb3a00c193680f$exports = {};
|
|
34
64
|
|
35
65
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-input", () => $40cb3a00c193680f$export$1ac009feb2b0bd0c, (v) => $40cb3a00c193680f$export$1ac009feb2b0bd0c = v);
|
36
66
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield", () => $40cb3a00c193680f$export$2c8a10299d8b3418, (v) => $40cb3a00c193680f$export$2c8a10299d8b3418 = v);
|
67
|
+
$parcel$export($40cb3a00c193680f$exports, "focus-ring", () => $40cb3a00c193680f$export$f39a09f249340e2a, (v) => $40cb3a00c193680f$export$f39a09f249340e2a = v);
|
37
68
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--quiet", () => $40cb3a00c193680f$export$bffd5e3d61a81737, (v) => $40cb3a00c193680f$export$bffd5e3d61a81737 = v);
|
38
69
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--multiline", () => $40cb3a00c193680f$export$9699f1c538a448a0, (v) => $40cb3a00c193680f$export$9699f1c538a448a0 = v);
|
39
70
|
$parcel$export($40cb3a00c193680f$exports, "is-placeholder", () => $40cb3a00c193680f$export$e5b2f5233e4e5194, (v) => $40cb3a00c193680f$export$e5b2f5233e4e5194 = v);
|
@@ -42,15 +73,16 @@ $parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--valid", () => $40
|
|
42
73
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--invalid", () => $40cb3a00c193680f$export$58e50b10d30123df, (v) => $40cb3a00c193680f$export$58e50b10d30123df = v);
|
43
74
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--loadable", () => $40cb3a00c193680f$export$14fd30fea6f1348c, (v) => $40cb3a00c193680f$export$14fd30fea6f1348c = v);
|
44
75
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-wrapper", () => $40cb3a00c193680f$export$dd1165e0e6012973, (v) => $40cb3a00c193680f$export$dd1165e0e6012973 = v);
|
76
|
+
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-wrapper--quiet", () => $40cb3a00c193680f$export$9fcb3d6af94a9d12, (v) => $40cb3a00c193680f$export$9fcb3d6af94a9d12 = v);
|
45
77
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-validationIcon", () => $40cb3a00c193680f$export$cf0ead5b44db0da3, (v) => $40cb3a00c193680f$export$cf0ead5b44db0da3 = v);
|
46
78
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-icon", () => $40cb3a00c193680f$export$222d1ccd1870be1d, (v) => $40cb3a00c193680f$export$222d1ccd1870be1d = v);
|
47
79
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-inputIcon", () => $40cb3a00c193680f$export$c1cdcaa5fe76a871, (v) => $40cb3a00c193680f$export$c1cdcaa5fe76a871 = v);
|
48
80
|
$parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-circleLoader", () => $40cb3a00c193680f$export$82a249fb4d6127, (v) => $40cb3a00c193680f$export$82a249fb4d6127 = v);
|
49
81
|
$parcel$export($40cb3a00c193680f$exports, "is-focused", () => $40cb3a00c193680f$export$e7dc768d35940237, (v) => $40cb3a00c193680f$export$e7dc768d35940237 = v);
|
50
|
-
$parcel$export($40cb3a00c193680f$exports, "focus-ring", () => $40cb3a00c193680f$export$f39a09f249340e2a, (v) => $40cb3a00c193680f$export$f39a09f249340e2a = v);
|
51
82
|
$parcel$export($40cb3a00c193680f$exports, "is-disabled", () => $40cb3a00c193680f$export$d35bc1e505d1ebbf, (v) => $40cb3a00c193680f$export$d35bc1e505d1ebbf = v);
|
52
83
|
var $40cb3a00c193680f$export$1ac009feb2b0bd0c;
|
53
84
|
var $40cb3a00c193680f$export$2c8a10299d8b3418;
|
85
|
+
var $40cb3a00c193680f$export$f39a09f249340e2a;
|
54
86
|
var $40cb3a00c193680f$export$bffd5e3d61a81737;
|
55
87
|
var $40cb3a00c193680f$export$9699f1c538a448a0;
|
56
88
|
var $40cb3a00c193680f$export$e5b2f5233e4e5194;
|
@@ -59,15 +91,16 @@ var $40cb3a00c193680f$export$c2abbc3f970170b7;
|
|
59
91
|
var $40cb3a00c193680f$export$58e50b10d30123df;
|
60
92
|
var $40cb3a00c193680f$export$14fd30fea6f1348c;
|
61
93
|
var $40cb3a00c193680f$export$dd1165e0e6012973;
|
94
|
+
var $40cb3a00c193680f$export$9fcb3d6af94a9d12;
|
62
95
|
var $40cb3a00c193680f$export$cf0ead5b44db0da3;
|
63
96
|
var $40cb3a00c193680f$export$222d1ccd1870be1d;
|
64
97
|
var $40cb3a00c193680f$export$c1cdcaa5fe76a871;
|
65
98
|
var $40cb3a00c193680f$export$82a249fb4d6127;
|
66
99
|
var $40cb3a00c193680f$export$e7dc768d35940237;
|
67
|
-
var $40cb3a00c193680f$export$f39a09f249340e2a;
|
68
100
|
var $40cb3a00c193680f$export$d35bc1e505d1ebbf;
|
69
101
|
$40cb3a00c193680f$export$1ac009feb2b0bd0c = "spectrum-Textfield-input_73bc77";
|
70
102
|
$40cb3a00c193680f$export$2c8a10299d8b3418 = "spectrum-Textfield_73bc77";
|
103
|
+
$40cb3a00c193680f$export$f39a09f249340e2a = "focus-ring_73bc77";
|
71
104
|
$40cb3a00c193680f$export$bffd5e3d61a81737 = "spectrum-Textfield--quiet_73bc77";
|
72
105
|
$40cb3a00c193680f$export$9699f1c538a448a0 = "spectrum-Textfield--multiline_73bc77";
|
73
106
|
$40cb3a00c193680f$export$e5b2f5233e4e5194 = "is-placeholder_73bc77";
|
@@ -76,93 +109,95 @@ $40cb3a00c193680f$export$c2abbc3f970170b7 = "spectrum-Textfield--valid_73bc77";
|
|
76
109
|
$40cb3a00c193680f$export$58e50b10d30123df = "spectrum-Textfield--invalid_73bc77";
|
77
110
|
$40cb3a00c193680f$export$14fd30fea6f1348c = "spectrum-Textfield--loadable_73bc77";
|
78
111
|
$40cb3a00c193680f$export$dd1165e0e6012973 = "spectrum-Textfield-wrapper_73bc77";
|
112
|
+
$40cb3a00c193680f$export$9fcb3d6af94a9d12 = "spectrum-Textfield-wrapper--quiet_73bc77";
|
79
113
|
$40cb3a00c193680f$export$cf0ead5b44db0da3 = "spectrum-Textfield-validationIcon_73bc77";
|
80
114
|
$40cb3a00c193680f$export$222d1ccd1870be1d = "spectrum-Textfield-icon_73bc77";
|
81
115
|
$40cb3a00c193680f$export$c1cdcaa5fe76a871 = "spectrum-Textfield-inputIcon_73bc77";
|
82
116
|
$40cb3a00c193680f$export$82a249fb4d6127 = "spectrum-Textfield-circleLoader_73bc77";
|
83
117
|
$40cb3a00c193680f$export$e7dc768d35940237 = "is-focused_73bc77";
|
84
|
-
$40cb3a00c193680f$export$f39a09f249340e2a = "focus-ring_73bc77";
|
85
118
|
$40cb3a00c193680f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
|
86
119
|
|
87
120
|
|
88
121
|
|
122
|
+
|
89
123
|
function $86793250183ac29e$var$TextFieldBase(props, ref) {
|
90
|
-
let { validationState: validationState , icon: icon , isQuiet: isQuiet = false , isDisabled: isDisabled , multiLine: multiLine , autoFocus: autoFocus , inputClassName: inputClassName , wrapperChildren: wrapperChildren , labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps , inputRef: userInputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName } = props;
|
91
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $74aPB$reactariainteractions.useHover({
|
124
|
+
let { validationState: validationState , icon: icon , isQuiet: isQuiet = false , isDisabled: isDisabled , multiLine: multiLine , autoFocus: autoFocus , inputClassName: inputClassName , wrapperChildren: wrapperChildren , labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps , inputRef: userInputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName , disableFocusRing: disableFocusRing } = props;
|
125
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = (0, $74aPB$reactariainteractions.useHover)({
|
92
126
|
isDisabled: isDisabled
|
93
127
|
});
|
94
|
-
let domRef = $74aPB$react.useRef(null);
|
95
|
-
let defaultInputRef = $74aPB$react.useRef(null);
|
128
|
+
let domRef = (0, $74aPB$react.useRef)(null);
|
129
|
+
let defaultInputRef = (0, $74aPB$react.useRef)(null);
|
96
130
|
let inputRef = userInputRef || defaultInputRef;
|
97
131
|
// Expose imperative interface for ref
|
98
|
-
$74aPB$react.useImperativeHandle(ref, ()=>({
|
99
|
-
|
132
|
+
(0, $74aPB$react.useImperativeHandle)(ref, ()=>({
|
133
|
+
...(0, $74aPB$reactspectrumutils.createFocusableRef)(domRef, inputRef),
|
100
134
|
select () {
|
101
135
|
if (inputRef.current) inputRef.current.select();
|
102
136
|
},
|
103
137
|
getInputElement () {
|
104
138
|
return inputRef.current;
|
105
139
|
}
|
106
|
-
})
|
107
|
-
|
108
|
-
let
|
109
|
-
let isInvalid = validationState === 'invalid';
|
140
|
+
}));
|
141
|
+
let ElementType = multiLine ? "textarea" : "input";
|
142
|
+
let isInvalid = validationState === "invalid" && !isDisabled;
|
110
143
|
if (icon) {
|
111
|
-
let UNSAFE_className = $74aPB$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)), icon.props && icon.props.UNSAFE_className,
|
112
|
-
icon = /*#__PURE__*/ $74aPB$react.cloneElement(icon, {
|
144
|
+
let UNSAFE_className = (0, $74aPB$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), icon.props && icon.props.UNSAFE_className, "spectrum-Textfield-icon");
|
145
|
+
icon = /*#__PURE__*/ (0, $74aPB$react.cloneElement)(icon, {
|
113
146
|
UNSAFE_className: UNSAFE_className,
|
114
|
-
size:
|
147
|
+
size: "S"
|
115
148
|
});
|
116
149
|
}
|
117
|
-
let validationIcon = isInvalid ? /*#__PURE__*/ ($parcel$interopDefault($74aPB$react)).createElement(($parcel$interopDefault($74aPB$spectrumiconsuiAlertMedium)), null) : /*#__PURE__*/ ($parcel$interopDefault($74aPB$react)).createElement(($parcel$interopDefault($74aPB$spectrumiconsuiCheckmarkMedium)), null);
|
118
|
-
let validation = /*#__PURE__*/ $74aPB$react.cloneElement(validationIcon, {
|
119
|
-
UNSAFE_className: $74aPB$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
150
|
+
let validationIcon = isInvalid ? /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement((0, ($parcel$interopDefault($74aPB$spectrumiconsuiAlertMedium))), null) : /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement((0, ($parcel$interopDefault($74aPB$spectrumiconsuiCheckmarkMedium))), null);
|
151
|
+
let validation = /*#__PURE__*/ (0, $74aPB$react.cloneElement)(validationIcon, {
|
152
|
+
UNSAFE_className: (0, $74aPB$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-validationIcon", validationIconClassName)
|
120
153
|
});
|
121
|
-
let
|
122
|
-
className: $74aPB$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)), 'spectrum-Textfield', {
|
123
|
-
'spectrum-Textfield--invalid': isInvalid,
|
124
|
-
'spectrum-Textfield--valid': validationState === 'valid',
|
125
|
-
'spectrum-Textfield--loadable': loadingIndicator,
|
126
|
-
'spectrum-Textfield--quiet': isQuiet,
|
127
|
-
'spectrum-Textfield--multiline': multiLine
|
128
|
-
})
|
129
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($74aPB$react)).createElement($74aPB$reactariafocus.FocusRing, {
|
130
|
-
focusRingClass: $74aPB$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)), 'focus-ring'),
|
154
|
+
let { focusProps: focusProps , isFocusVisible: isFocusVisible } = (0, $74aPB$reactariafocus.useFocusRing)({
|
131
155
|
isTextInput: true,
|
132
156
|
autoFocus: autoFocus
|
133
|
-
}
|
134
|
-
|
157
|
+
});
|
158
|
+
let textField = /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement("div", {
|
159
|
+
className: (0, $74aPB$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield", {
|
160
|
+
"spectrum-Textfield--invalid": isInvalid,
|
161
|
+
"spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
|
162
|
+
"spectrum-Textfield--loadable": loadingIndicator,
|
163
|
+
"spectrum-Textfield--quiet": isQuiet,
|
164
|
+
"spectrum-Textfield--multiline": multiLine,
|
165
|
+
"focus-ring": !disableFocusRing && isFocusVisible
|
166
|
+
})
|
167
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement(ElementType, {
|
168
|
+
...(0, $74aPB$reactariautils.mergeProps)(inputProps, hoverProps, focusProps),
|
135
169
|
ref: inputRef,
|
136
170
|
rows: multiLine ? 1 : undefined,
|
137
|
-
className: $74aPB$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
138
|
-
|
139
|
-
|
171
|
+
className: (0, $74aPB$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-input", {
|
172
|
+
"spectrum-Textfield-inputIcon": icon,
|
173
|
+
"is-hovered": isHovered
|
140
174
|
}, inputClassName)
|
141
|
-
})
|
142
|
-
return
|
175
|
+
}), icon, validationState && !isLoading && !isDisabled ? validation : null, isLoading && loadingIndicator, wrapperChildren);
|
176
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement((0, $74aPB$reactspectrumlabel.Field), {
|
143
177
|
...props,
|
144
178
|
labelProps: labelProps,
|
145
179
|
descriptionProps: descriptionProps,
|
146
180
|
errorMessageProps: errorMessageProps,
|
147
|
-
wrapperClassName: $74aPB$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
181
|
+
wrapperClassName: (0, $74aPB$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-wrapper", {
|
182
|
+
"spectrum-Textfield-wrapper--quiet": isQuiet
|
183
|
+
}),
|
148
184
|
showErrorIcon: false,
|
149
185
|
ref: domRef
|
150
|
-
}, textField)
|
186
|
+
}, textField);
|
151
187
|
}
|
152
|
-
const $86793250183ac29e$export$d22444a338b6e3c2 = /*#__PURE__*/ $74aPB$react.forwardRef($86793250183ac29e$var$TextFieldBase);
|
188
|
+
const $86793250183ac29e$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $74aPB$react.forwardRef)($86793250183ac29e$var$TextFieldBase);
|
153
189
|
|
154
190
|
|
155
191
|
|
156
192
|
|
157
193
|
|
158
194
|
function $eec649e464f3832d$var$TextArea(props, ref) {
|
159
|
-
props = $74aPB$reactspectrumprovider.useProviderProps(props);
|
195
|
+
props = (0, $74aPB$reactspectrumprovider.useProviderProps)(props);
|
160
196
|
let { isDisabled: isDisabled = false , isQuiet: isQuiet = false , isReadOnly: isReadOnly = false , isRequired: isRequired = false , onChange: onChange , ...otherProps } = props;
|
161
197
|
// not in stately because this is so we know when to re-measure, which is a spectrum design
|
162
|
-
let [inputValue, setInputValue] = $74aPB$reactstatelyutils.useControlledState(props.value, props.defaultValue, ()=>{
|
163
|
-
|
164
|
-
let
|
165
|
-
let onHeightChange = $74aPB$react.useCallback(()=>{
|
198
|
+
let [inputValue, setInputValue] = (0, $74aPB$reactstatelyutils.useControlledState)(props.value, props.defaultValue, ()=>{});
|
199
|
+
let inputRef = (0, $74aPB$react.useRef)(null);
|
200
|
+
let onHeightChange = (0, $74aPB$react.useCallback)(()=>{
|
166
201
|
// Quiet textareas always grow based on their text content.
|
167
202
|
// Standard textareas also grow by default, unless an explicit height is set.
|
168
203
|
if ((isQuiet || !props.height) && inputRef.current) {
|
@@ -172,10 +207,10 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
|
|
172
207
|
// Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
|
173
208
|
// The measure/applied height is also incorrect/reset if we turn on and off
|
174
209
|
// overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
|
175
|
-
let isFirefox =
|
176
|
-
if (!isFirefox) input.style.overflow =
|
177
|
-
input.style.alignSelf =
|
178
|
-
input.style.height =
|
210
|
+
let isFirefox = "MozAppearance" in input.style;
|
211
|
+
if (!isFirefox) input.style.overflow = "hidden";
|
212
|
+
input.style.alignSelf = "start";
|
213
|
+
input.style.height = "auto";
|
179
214
|
// offsetHeight - clientHeight accounts for the border/padding.
|
180
215
|
input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
|
181
216
|
input.style.overflow = prevOverflow;
|
@@ -186,20 +221,20 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
|
|
186
221
|
inputRef,
|
187
222
|
props.height
|
188
223
|
]);
|
189
|
-
$74aPB$reactariautils.useLayoutEffect(()=>{
|
224
|
+
(0, $74aPB$reactariautils.useLayoutEffect)(()=>{
|
190
225
|
if (inputRef.current) onHeightChange();
|
191
226
|
}, [
|
192
227
|
onHeightChange,
|
193
228
|
inputValue,
|
194
229
|
inputRef
|
195
230
|
]);
|
196
|
-
if (props.placeholder) console.warn(
|
197
|
-
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $74aPB$reactariatextfield.useTextField({
|
231
|
+
if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text");
|
232
|
+
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $74aPB$reactariatextfield.useTextField)({
|
198
233
|
...props,
|
199
|
-
onChange: $74aPB$reactariautils.chain(onChange, setInputValue),
|
200
|
-
inputElementType:
|
234
|
+
onChange: (0, $74aPB$reactariautils.chain)(onChange, setInputValue),
|
235
|
+
inputElementType: "textarea"
|
201
236
|
}, inputRef);
|
202
|
-
return
|
237
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement((0, $86793250183ac29e$export$d22444a338b6e3c2), {
|
203
238
|
...otherProps,
|
204
239
|
ref: ref,
|
205
240
|
inputRef: inputRef,
|
@@ -212,25 +247,35 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
|
|
212
247
|
isQuiet: isQuiet,
|
213
248
|
isReadOnly: isReadOnly,
|
214
249
|
isRequired: isRequired
|
215
|
-
})
|
250
|
+
});
|
216
251
|
}
|
217
252
|
/**
|
218
253
|
* TextAreas are multiline text inputs, useful for cases where users have
|
219
254
|
* a sizable amount of text to enter. They allow for all customizations that
|
220
255
|
* are available to text fields.
|
221
|
-
*/ let $eec649e464f3832d$export$f5c9f3c2c4054eec = /*#__PURE__*/ ($parcel$interopDefault($74aPB$react)).forwardRef($eec649e464f3832d$var$TextArea);
|
222
|
-
|
256
|
+
*/ let $eec649e464f3832d$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).forwardRef($eec649e464f3832d$var$TextArea);
|
223
257
|
|
224
258
|
|
259
|
+
/*
|
260
|
+
* Copyright 2020 Adobe. All rights reserved.
|
261
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
262
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
263
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
264
|
+
*
|
265
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
266
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
267
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
268
|
+
* governing permissions and limitations under the License.
|
269
|
+
*/
|
225
270
|
|
226
271
|
|
227
272
|
|
228
273
|
function $34fd51d50eb4b056$var$TextField(props, ref) {
|
229
|
-
props = $74aPB$reactspectrumprovider.useProviderProps(props);
|
230
|
-
let inputRef = $74aPB$react.useRef(null);
|
231
|
-
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $74aPB$reactariatextfield.useTextField(props, inputRef);
|
232
|
-
if (props.placeholder) console.warn(
|
233
|
-
return
|
274
|
+
props = (0, $74aPB$reactspectrumprovider.useProviderProps)(props);
|
275
|
+
let inputRef = (0, $74aPB$react.useRef)(null);
|
276
|
+
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $74aPB$reactariatextfield.useTextField)(props, inputRef);
|
277
|
+
if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text");
|
278
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($74aPB$react))).createElement((0, $86793250183ac29e$export$d22444a338b6e3c2), {
|
234
279
|
...props,
|
235
280
|
labelProps: labelProps,
|
236
281
|
inputProps: inputProps,
|
@@ -238,13 +283,13 @@ function $34fd51d50eb4b056$var$TextField(props, ref) {
|
|
238
283
|
errorMessageProps: errorMessageProps,
|
239
284
|
ref: ref,
|
240
285
|
inputRef: inputRef
|
241
|
-
})
|
286
|
+
});
|
242
287
|
}
|
243
288
|
/**
|
244
289
|
* TextFields are text inputs that allow users to input custom text entries
|
245
290
|
* with a keyboard. Various decorations can be displayed around the field to
|
246
291
|
* communicate the entry requirements.
|
247
|
-
*/ const $34fd51d50eb4b056$export$2c73285ae9390cec = /*#__PURE__*/ $74aPB$react.forwardRef($34fd51d50eb4b056$var$TextField);
|
292
|
+
*/ const $34fd51d50eb4b056$export$2c73285ae9390cec = /*#__PURE__*/ (0, $74aPB$react.forwardRef)($34fd51d50eb4b056$var$TextField);
|
248
293
|
|
249
294
|
|
250
295
|
|
package/dist/main.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid';\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid',\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine\n }\n )\n }>\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} isTextInput autoFocus={autoFocus}>\n <ElementType\n {...mergeProps(inputProps, hoverProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n </FocusRing>\n {icon}\n {validationState && !isLoading ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={classNames(styles, 'spectrum-Textfield-wrapper')}\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n ref={ref}\n inputRef={inputRef} />\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"main.js.map"}
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean,\n disableFocusRing?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n disableFocusRing\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid' && !isDisabled;\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let {focusProps, isFocusVisible} = useFocusRing({\n isTextInput: true,\n autoFocus\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine,\n 'focus-ring': !disableFocusRing && isFocusVisible\n }\n )\n }>\n <ElementType\n {...mergeProps(inputProps, hoverProps, focusProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n {icon}\n {validationState && !isLoading && !isDisabled ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Textfield-wrapper',\n {\n 'spectrum-Textfield-wrapper--quiet': isQuiet\n }\n )\n }\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n ref={ref}\n inputRef={inputRef} />\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
@@ -8,7 +8,7 @@ import $evhxb$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
|
|
8
8
|
import $evhxb$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
9
9
|
import {createFocusableRef as $evhxb$createFocusableRef, classNames as $evhxb$classNames} from "@react-spectrum/utils";
|
10
10
|
import {Field as $evhxb$Field} from "@react-spectrum/label";
|
11
|
-
import {
|
11
|
+
import {useFocusRing as $evhxb$useFocusRing} from "@react-aria/focus";
|
12
12
|
import {useHover as $evhxb$useHover} from "@react-aria/interactions";
|
13
13
|
|
14
14
|
function $parcel$interopDefault(a) {
|
@@ -17,10 +17,40 @@ function $parcel$interopDefault(a) {
|
|
17
17
|
function $parcel$export(e, n, v, s) {
|
18
18
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
19
19
|
}
|
20
|
+
/*
|
21
|
+
* Copyright 2020 Adobe. All rights reserved.
|
22
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
23
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
24
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
25
|
+
*
|
26
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
27
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
28
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
29
|
+
* governing permissions and limitations under the License.
|
30
|
+
*/ /// <reference types="css-module-types" />
|
31
|
+
/*
|
32
|
+
* Copyright 2020 Adobe. All rights reserved.
|
33
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
34
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
35
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
36
|
+
*
|
37
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
38
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
39
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
40
|
+
* governing permissions and limitations under the License.
|
41
|
+
*/
|
20
42
|
|
21
|
-
|
22
|
-
|
23
|
-
|
43
|
+
/*
|
44
|
+
* Copyright 2020 Adobe. All rights reserved.
|
45
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
46
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
47
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
48
|
+
*
|
49
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
50
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
51
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
52
|
+
* governing permissions and limitations under the License.
|
53
|
+
*/
|
24
54
|
|
25
55
|
|
26
56
|
|
@@ -30,6 +60,7 @@ var $c14528ddc146317f$exports = {};
|
|
30
60
|
|
31
61
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-input", () => $c14528ddc146317f$export$1ac009feb2b0bd0c, (v) => $c14528ddc146317f$export$1ac009feb2b0bd0c = v);
|
32
62
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield", () => $c14528ddc146317f$export$2c8a10299d8b3418, (v) => $c14528ddc146317f$export$2c8a10299d8b3418 = v);
|
63
|
+
$parcel$export($c14528ddc146317f$exports, "focus-ring", () => $c14528ddc146317f$export$f39a09f249340e2a, (v) => $c14528ddc146317f$export$f39a09f249340e2a = v);
|
33
64
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--quiet", () => $c14528ddc146317f$export$bffd5e3d61a81737, (v) => $c14528ddc146317f$export$bffd5e3d61a81737 = v);
|
34
65
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--multiline", () => $c14528ddc146317f$export$9699f1c538a448a0, (v) => $c14528ddc146317f$export$9699f1c538a448a0 = v);
|
35
66
|
$parcel$export($c14528ddc146317f$exports, "is-placeholder", () => $c14528ddc146317f$export$e5b2f5233e4e5194, (v) => $c14528ddc146317f$export$e5b2f5233e4e5194 = v);
|
@@ -38,15 +69,16 @@ $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--valid", () => $c1
|
|
38
69
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--invalid", () => $c14528ddc146317f$export$58e50b10d30123df, (v) => $c14528ddc146317f$export$58e50b10d30123df = v);
|
39
70
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--loadable", () => $c14528ddc146317f$export$14fd30fea6f1348c, (v) => $c14528ddc146317f$export$14fd30fea6f1348c = v);
|
40
71
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-wrapper", () => $c14528ddc146317f$export$dd1165e0e6012973, (v) => $c14528ddc146317f$export$dd1165e0e6012973 = v);
|
72
|
+
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-wrapper--quiet", () => $c14528ddc146317f$export$9fcb3d6af94a9d12, (v) => $c14528ddc146317f$export$9fcb3d6af94a9d12 = v);
|
41
73
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-validationIcon", () => $c14528ddc146317f$export$cf0ead5b44db0da3, (v) => $c14528ddc146317f$export$cf0ead5b44db0da3 = v);
|
42
74
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-icon", () => $c14528ddc146317f$export$222d1ccd1870be1d, (v) => $c14528ddc146317f$export$222d1ccd1870be1d = v);
|
43
75
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-inputIcon", () => $c14528ddc146317f$export$c1cdcaa5fe76a871, (v) => $c14528ddc146317f$export$c1cdcaa5fe76a871 = v);
|
44
76
|
$parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-circleLoader", () => $c14528ddc146317f$export$82a249fb4d6127, (v) => $c14528ddc146317f$export$82a249fb4d6127 = v);
|
45
77
|
$parcel$export($c14528ddc146317f$exports, "is-focused", () => $c14528ddc146317f$export$e7dc768d35940237, (v) => $c14528ddc146317f$export$e7dc768d35940237 = v);
|
46
|
-
$parcel$export($c14528ddc146317f$exports, "focus-ring", () => $c14528ddc146317f$export$f39a09f249340e2a, (v) => $c14528ddc146317f$export$f39a09f249340e2a = v);
|
47
78
|
$parcel$export($c14528ddc146317f$exports, "is-disabled", () => $c14528ddc146317f$export$d35bc1e505d1ebbf, (v) => $c14528ddc146317f$export$d35bc1e505d1ebbf = v);
|
48
79
|
var $c14528ddc146317f$export$1ac009feb2b0bd0c;
|
49
80
|
var $c14528ddc146317f$export$2c8a10299d8b3418;
|
81
|
+
var $c14528ddc146317f$export$f39a09f249340e2a;
|
50
82
|
var $c14528ddc146317f$export$bffd5e3d61a81737;
|
51
83
|
var $c14528ddc146317f$export$9699f1c538a448a0;
|
52
84
|
var $c14528ddc146317f$export$e5b2f5233e4e5194;
|
@@ -55,15 +87,16 @@ var $c14528ddc146317f$export$c2abbc3f970170b7;
|
|
55
87
|
var $c14528ddc146317f$export$58e50b10d30123df;
|
56
88
|
var $c14528ddc146317f$export$14fd30fea6f1348c;
|
57
89
|
var $c14528ddc146317f$export$dd1165e0e6012973;
|
90
|
+
var $c14528ddc146317f$export$9fcb3d6af94a9d12;
|
58
91
|
var $c14528ddc146317f$export$cf0ead5b44db0da3;
|
59
92
|
var $c14528ddc146317f$export$222d1ccd1870be1d;
|
60
93
|
var $c14528ddc146317f$export$c1cdcaa5fe76a871;
|
61
94
|
var $c14528ddc146317f$export$82a249fb4d6127;
|
62
95
|
var $c14528ddc146317f$export$e7dc768d35940237;
|
63
|
-
var $c14528ddc146317f$export$f39a09f249340e2a;
|
64
96
|
var $c14528ddc146317f$export$d35bc1e505d1ebbf;
|
65
97
|
$c14528ddc146317f$export$1ac009feb2b0bd0c = "spectrum-Textfield-input_73bc77";
|
66
98
|
$c14528ddc146317f$export$2c8a10299d8b3418 = "spectrum-Textfield_73bc77";
|
99
|
+
$c14528ddc146317f$export$f39a09f249340e2a = "focus-ring_73bc77";
|
67
100
|
$c14528ddc146317f$export$bffd5e3d61a81737 = "spectrum-Textfield--quiet_73bc77";
|
68
101
|
$c14528ddc146317f$export$9699f1c538a448a0 = "spectrum-Textfield--multiline_73bc77";
|
69
102
|
$c14528ddc146317f$export$e5b2f5233e4e5194 = "is-placeholder_73bc77";
|
@@ -72,93 +105,95 @@ $c14528ddc146317f$export$c2abbc3f970170b7 = "spectrum-Textfield--valid_73bc77";
|
|
72
105
|
$c14528ddc146317f$export$58e50b10d30123df = "spectrum-Textfield--invalid_73bc77";
|
73
106
|
$c14528ddc146317f$export$14fd30fea6f1348c = "spectrum-Textfield--loadable_73bc77";
|
74
107
|
$c14528ddc146317f$export$dd1165e0e6012973 = "spectrum-Textfield-wrapper_73bc77";
|
108
|
+
$c14528ddc146317f$export$9fcb3d6af94a9d12 = "spectrum-Textfield-wrapper--quiet_73bc77";
|
75
109
|
$c14528ddc146317f$export$cf0ead5b44db0da3 = "spectrum-Textfield-validationIcon_73bc77";
|
76
110
|
$c14528ddc146317f$export$222d1ccd1870be1d = "spectrum-Textfield-icon_73bc77";
|
77
111
|
$c14528ddc146317f$export$c1cdcaa5fe76a871 = "spectrum-Textfield-inputIcon_73bc77";
|
78
112
|
$c14528ddc146317f$export$82a249fb4d6127 = "spectrum-Textfield-circleLoader_73bc77";
|
79
113
|
$c14528ddc146317f$export$e7dc768d35940237 = "is-focused_73bc77";
|
80
|
-
$c14528ddc146317f$export$f39a09f249340e2a = "focus-ring_73bc77";
|
81
114
|
$c14528ddc146317f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
|
82
115
|
|
83
116
|
|
84
117
|
|
118
|
+
|
85
119
|
function $599adb75312e6492$var$TextFieldBase(props, ref) {
|
86
|
-
let { validationState: validationState , icon: icon , isQuiet: isQuiet = false , isDisabled: isDisabled , multiLine: multiLine , autoFocus: autoFocus , inputClassName: inputClassName , wrapperChildren: wrapperChildren , labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps , inputRef: userInputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName } = props;
|
87
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $evhxb$useHover({
|
120
|
+
let { validationState: validationState , icon: icon , isQuiet: isQuiet = false , isDisabled: isDisabled , multiLine: multiLine , autoFocus: autoFocus , inputClassName: inputClassName , wrapperChildren: wrapperChildren , labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps , inputRef: userInputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName , disableFocusRing: disableFocusRing } = props;
|
121
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = (0, $evhxb$useHover)({
|
88
122
|
isDisabled: isDisabled
|
89
123
|
});
|
90
|
-
let domRef = $evhxb$useRef(null);
|
91
|
-
let defaultInputRef = $evhxb$useRef(null);
|
124
|
+
let domRef = (0, $evhxb$useRef)(null);
|
125
|
+
let defaultInputRef = (0, $evhxb$useRef)(null);
|
92
126
|
let inputRef = userInputRef || defaultInputRef;
|
93
127
|
// Expose imperative interface for ref
|
94
|
-
$evhxb$useImperativeHandle(ref, ()=>({
|
95
|
-
|
128
|
+
(0, $evhxb$useImperativeHandle)(ref, ()=>({
|
129
|
+
...(0, $evhxb$createFocusableRef)(domRef, inputRef),
|
96
130
|
select () {
|
97
131
|
if (inputRef.current) inputRef.current.select();
|
98
132
|
},
|
99
133
|
getInputElement () {
|
100
134
|
return inputRef.current;
|
101
135
|
}
|
102
|
-
})
|
103
|
-
|
104
|
-
let
|
105
|
-
let isInvalid = validationState === 'invalid';
|
136
|
+
}));
|
137
|
+
let ElementType = multiLine ? "textarea" : "input";
|
138
|
+
let isInvalid = validationState === "invalid" && !isDisabled;
|
106
139
|
if (icon) {
|
107
|
-
let UNSAFE_className = $evhxb$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), icon.props && icon.props.UNSAFE_className,
|
108
|
-
icon = /*#__PURE__*/ $evhxb$cloneElement(icon, {
|
140
|
+
let UNSAFE_className = (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), icon.props && icon.props.UNSAFE_className, "spectrum-Textfield-icon");
|
141
|
+
icon = /*#__PURE__*/ (0, $evhxb$cloneElement)(icon, {
|
109
142
|
UNSAFE_className: UNSAFE_className,
|
110
|
-
size:
|
143
|
+
size: "S"
|
111
144
|
});
|
112
145
|
}
|
113
|
-
let validationIcon = isInvalid ? /*#__PURE__*/ $evhxb$react.createElement($evhxb$spectrumiconsuiAlertMedium, null) : /*#__PURE__*/ $evhxb$react.createElement($evhxb$spectrumiconsuiCheckmarkMedium, null);
|
114
|
-
let validation = /*#__PURE__*/ $evhxb$cloneElement(validationIcon, {
|
115
|
-
UNSAFE_className: $evhxb$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)),
|
146
|
+
let validationIcon = isInvalid ? /*#__PURE__*/ (0, $evhxb$react).createElement((0, $evhxb$spectrumiconsuiAlertMedium), null) : /*#__PURE__*/ (0, $evhxb$react).createElement((0, $evhxb$spectrumiconsuiCheckmarkMedium), null);
|
147
|
+
let validation = /*#__PURE__*/ (0, $evhxb$cloneElement)(validationIcon, {
|
148
|
+
UNSAFE_className: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield-validationIcon", validationIconClassName)
|
116
149
|
});
|
117
|
-
let
|
118
|
-
className: $evhxb$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'spectrum-Textfield', {
|
119
|
-
'spectrum-Textfield--invalid': isInvalid,
|
120
|
-
'spectrum-Textfield--valid': validationState === 'valid',
|
121
|
-
'spectrum-Textfield--loadable': loadingIndicator,
|
122
|
-
'spectrum-Textfield--quiet': isQuiet,
|
123
|
-
'spectrum-Textfield--multiline': multiLine
|
124
|
-
})
|
125
|
-
}, /*#__PURE__*/ $evhxb$react.createElement($evhxb$FocusRing, {
|
126
|
-
focusRingClass: $evhxb$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)), 'focus-ring'),
|
150
|
+
let { focusProps: focusProps , isFocusVisible: isFocusVisible } = (0, $evhxb$useFocusRing)({
|
127
151
|
isTextInput: true,
|
128
152
|
autoFocus: autoFocus
|
129
|
-
}
|
130
|
-
|
153
|
+
});
|
154
|
+
let textField = /*#__PURE__*/ (0, $evhxb$react).createElement("div", {
|
155
|
+
className: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield", {
|
156
|
+
"spectrum-Textfield--invalid": isInvalid,
|
157
|
+
"spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
|
158
|
+
"spectrum-Textfield--loadable": loadingIndicator,
|
159
|
+
"spectrum-Textfield--quiet": isQuiet,
|
160
|
+
"spectrum-Textfield--multiline": multiLine,
|
161
|
+
"focus-ring": !disableFocusRing && isFocusVisible
|
162
|
+
})
|
163
|
+
}, /*#__PURE__*/ (0, $evhxb$react).createElement(ElementType, {
|
164
|
+
...(0, $evhxb$mergeProps)(inputProps, hoverProps, focusProps),
|
131
165
|
ref: inputRef,
|
132
166
|
rows: multiLine ? 1 : undefined,
|
133
|
-
className: $evhxb$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)),
|
134
|
-
|
135
|
-
|
167
|
+
className: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield-input", {
|
168
|
+
"spectrum-Textfield-inputIcon": icon,
|
169
|
+
"is-hovered": isHovered
|
136
170
|
}, inputClassName)
|
137
|
-
})
|
138
|
-
return
|
171
|
+
}), icon, validationState && !isLoading && !isDisabled ? validation : null, isLoading && loadingIndicator, wrapperChildren);
|
172
|
+
return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $evhxb$Field), {
|
139
173
|
...props,
|
140
174
|
labelProps: labelProps,
|
141
175
|
descriptionProps: descriptionProps,
|
142
176
|
errorMessageProps: errorMessageProps,
|
143
|
-
wrapperClassName: $evhxb$classNames((/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports)),
|
177
|
+
wrapperClassName: (0, $evhxb$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c14528ddc146317f$exports))), "spectrum-Textfield-wrapper", {
|
178
|
+
"spectrum-Textfield-wrapper--quiet": isQuiet
|
179
|
+
}),
|
144
180
|
showErrorIcon: false,
|
145
181
|
ref: domRef
|
146
|
-
}, textField)
|
182
|
+
}, textField);
|
147
183
|
}
|
148
|
-
const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ $evhxb$forwardRef($599adb75312e6492$var$TextFieldBase);
|
184
|
+
const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ (0, $evhxb$forwardRef)($599adb75312e6492$var$TextFieldBase);
|
149
185
|
|
150
186
|
|
151
187
|
|
152
188
|
|
153
189
|
|
154
190
|
function $cc187bf91f8eea73$var$TextArea(props, ref) {
|
155
|
-
props = $evhxb$useProviderProps(props);
|
191
|
+
props = (0, $evhxb$useProviderProps)(props);
|
156
192
|
let { isDisabled: isDisabled = false , isQuiet: isQuiet = false , isReadOnly: isReadOnly = false , isRequired: isRequired = false , onChange: onChange , ...otherProps } = props;
|
157
193
|
// not in stately because this is so we know when to re-measure, which is a spectrum design
|
158
|
-
let [inputValue, setInputValue] = $evhxb$useControlledState(props.value, props.defaultValue, ()=>{
|
159
|
-
|
160
|
-
let
|
161
|
-
let onHeightChange = $evhxb$useCallback(()=>{
|
194
|
+
let [inputValue, setInputValue] = (0, $evhxb$useControlledState)(props.value, props.defaultValue, ()=>{});
|
195
|
+
let inputRef = (0, $evhxb$useRef)(null);
|
196
|
+
let onHeightChange = (0, $evhxb$useCallback)(()=>{
|
162
197
|
// Quiet textareas always grow based on their text content.
|
163
198
|
// Standard textareas also grow by default, unless an explicit height is set.
|
164
199
|
if ((isQuiet || !props.height) && inputRef.current) {
|
@@ -168,10 +203,10 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
|
|
168
203
|
// Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.
|
169
204
|
// The measure/applied height is also incorrect/reset if we turn on and off
|
170
205
|
// overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062
|
171
|
-
let isFirefox =
|
172
|
-
if (!isFirefox) input.style.overflow =
|
173
|
-
input.style.alignSelf =
|
174
|
-
input.style.height =
|
206
|
+
let isFirefox = "MozAppearance" in input.style;
|
207
|
+
if (!isFirefox) input.style.overflow = "hidden";
|
208
|
+
input.style.alignSelf = "start";
|
209
|
+
input.style.height = "auto";
|
175
210
|
// offsetHeight - clientHeight accounts for the border/padding.
|
176
211
|
input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;
|
177
212
|
input.style.overflow = prevOverflow;
|
@@ -182,20 +217,20 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
|
|
182
217
|
inputRef,
|
183
218
|
props.height
|
184
219
|
]);
|
185
|
-
$evhxb$useLayoutEffect(()=>{
|
220
|
+
(0, $evhxb$useLayoutEffect)(()=>{
|
186
221
|
if (inputRef.current) onHeightChange();
|
187
222
|
}, [
|
188
223
|
onHeightChange,
|
189
224
|
inputValue,
|
190
225
|
inputRef
|
191
226
|
]);
|
192
|
-
if (props.placeholder) console.warn(
|
193
|
-
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $evhxb$useTextField({
|
227
|
+
if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text");
|
228
|
+
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $evhxb$useTextField)({
|
194
229
|
...props,
|
195
|
-
onChange: $evhxb$chain(onChange, setInputValue),
|
196
|
-
inputElementType:
|
230
|
+
onChange: (0, $evhxb$chain)(onChange, setInputValue),
|
231
|
+
inputElementType: "textarea"
|
197
232
|
}, inputRef);
|
198
|
-
return
|
233
|
+
return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
|
199
234
|
...otherProps,
|
200
235
|
ref: ref,
|
201
236
|
inputRef: inputRef,
|
@@ -208,25 +243,35 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
|
|
208
243
|
isQuiet: isQuiet,
|
209
244
|
isReadOnly: isReadOnly,
|
210
245
|
isRequired: isRequired
|
211
|
-
})
|
246
|
+
});
|
212
247
|
}
|
213
248
|
/**
|
214
249
|
* TextAreas are multiline text inputs, useful for cases where users have
|
215
250
|
* a sizable amount of text to enter. They allow for all customizations that
|
216
251
|
* are available to text fields.
|
217
|
-
*/ let $cc187bf91f8eea73$export$f5c9f3c2c4054eec = /*#__PURE__*/ $evhxb$react.forwardRef($cc187bf91f8eea73$var$TextArea);
|
218
|
-
|
252
|
+
*/ let $cc187bf91f8eea73$export$f5c9f3c2c4054eec = /*#__PURE__*/ (0, $evhxb$react).forwardRef($cc187bf91f8eea73$var$TextArea);
|
219
253
|
|
220
254
|
|
255
|
+
/*
|
256
|
+
* Copyright 2020 Adobe. All rights reserved.
|
257
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
258
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
259
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
260
|
+
*
|
261
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
262
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
263
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
264
|
+
* governing permissions and limitations under the License.
|
265
|
+
*/
|
221
266
|
|
222
267
|
|
223
268
|
|
224
269
|
function $265457f9427aa380$var$TextField(props, ref) {
|
225
|
-
props = $evhxb$useProviderProps(props);
|
226
|
-
let inputRef = $evhxb$useRef(null);
|
227
|
-
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $evhxb$useTextField(props, inputRef);
|
228
|
-
if (props.placeholder) console.warn(
|
229
|
-
return
|
270
|
+
props = (0, $evhxb$useProviderProps)(props);
|
271
|
+
let inputRef = (0, $evhxb$useRef)(null);
|
272
|
+
let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $evhxb$useTextField)(props, inputRef);
|
273
|
+
if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text");
|
274
|
+
return /*#__PURE__*/ (0, $evhxb$react).createElement((0, $599adb75312e6492$export$d22444a338b6e3c2), {
|
230
275
|
...props,
|
231
276
|
labelProps: labelProps,
|
232
277
|
inputProps: inputProps,
|
@@ -234,13 +279,13 @@ function $265457f9427aa380$var$TextField(props, ref) {
|
|
234
279
|
errorMessageProps: errorMessageProps,
|
235
280
|
ref: ref,
|
236
281
|
inputRef: inputRef
|
237
|
-
})
|
282
|
+
});
|
238
283
|
}
|
239
284
|
/**
|
240
285
|
* TextFields are text inputs that allow users to input custom text entries
|
241
286
|
* with a keyboard. Various decorations can be displayed around the field to
|
242
287
|
* communicate the entry requirements.
|
243
|
-
*/ const $265457f9427aa380$export$2c73285ae9390cec = /*#__PURE__*/ $evhxb$forwardRef($265457f9427aa380$var$TextField);
|
288
|
+
*/ const $265457f9427aa380$export$2c73285ae9390cec = /*#__PURE__*/ (0, $evhxb$forwardRef)($265457f9427aa380$var$TextField);
|
244
289
|
|
245
290
|
|
246
291
|
|
package/dist/module.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {FocusRing} from '@react-aria/focus';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid';\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid',\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine\n }\n )\n }>\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')} isTextInput autoFocus={autoFocus}>\n <ElementType\n {...mergeProps(inputProps, hoverProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n </FocusRing>\n {icon}\n {validationState && !isLoading ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={classNames(styles, 'spectrum-Textfield-wrapper')}\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n ref={ref}\n inputRef={inputRef} />\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"module.js.map"}
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@adobe/spectrum-css-temp/components/textfield/vars.css","packages/@react-spectrum/textfield/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {Ref, useCallback, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useControlledState} from '@react-stately/utils';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n let {\n isDisabled = false,\n isQuiet = false,\n isReadOnly = false,\n isRequired = false,\n onChange,\n ...otherProps\n } = props;\n\n // not in stately because this is so we know when to re-measure, which is a spectrum design\n let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});\n let inputRef = useRef<HTMLTextAreaElement>(null);\n\n let onHeightChange = useCallback(() => {\n // Quiet textareas always grow based on their text content.\n // Standard textareas also grow by default, unless an explicit height is set.\n if ((isQuiet || !props.height) && inputRef.current) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, inputRef, props.height]);\n\n useLayoutEffect(() => {\n if (inputRef.current) {\n onHeightChange();\n }\n }, [onHeightChange, inputValue, inputRef]);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextArea.html#help-text');\n }\n\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField({\n ...props,\n onChange: chain(onChange, setInputValue),\n inputElementType: 'textarea'\n }, inputRef);\n\n return (\n <TextFieldBase\n {...otherProps}\n ref={ref}\n inputRef={inputRef}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n multiLine\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n isReadOnly={isReadOnly}\n isRequired={isRequired} />\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = React.forwardRef(TextArea);\nexport {_TextArea as TextArea};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';\nimport {classNames, createFocusableRef} from '@react-spectrum/utils';\nimport {Field} from '@react-spectrum/label';\nimport {mergeProps} from '@react-aria/utils';\nimport {PressEvents} from '@react-types/shared';\nimport React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useHover} from '@react-aria/interactions';\n\ninterface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {\n wrapperChildren?: ReactElement | ReactElement[],\n inputClassName?: string,\n validationIconClassName?: string,\n multiLine?: boolean,\n labelProps?: LabelHTMLAttributes<HTMLLabelElement>,\n inputProps: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>,\n descriptionProps?: HTMLAttributes<HTMLElement>,\n errorMessageProps?: HTMLAttributes<HTMLElement>,\n inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,\n loadingIndicator?: ReactElement,\n isLoading?: boolean,\n disableFocusRing?: boolean\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n validationState,\n icon,\n isQuiet = false,\n isDisabled,\n multiLine,\n autoFocus,\n inputClassName,\n wrapperChildren,\n labelProps,\n inputProps,\n descriptionProps,\n errorMessageProps,\n inputRef: userInputRef,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n disableFocusRing\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n let inputRef = userInputRef || defaultInputRef;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';\n let isInvalid = validationState === 'invalid' && !isDisabled;\n\n if (icon) {\n let UNSAFE_className = classNames(\n styles,\n icon.props && icon.props.UNSAFE_className,\n 'spectrum-Textfield-icon'\n );\n\n icon = cloneElement(icon, {\n UNSAFE_className,\n size: 'S'\n });\n }\n\n let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;\n let validation = cloneElement(validationIcon, {\n UNSAFE_className: classNames(\n styles,\n 'spectrum-Textfield-validationIcon',\n validationIconClassName\n )\n });\n\n let {focusProps, isFocusVisible} = useFocusRing({\n isTextInput: true,\n autoFocus\n });\n\n let textField = (\n <div\n className={\n classNames(\n styles,\n 'spectrum-Textfield',\n {\n 'spectrum-Textfield--invalid': isInvalid,\n 'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,\n 'spectrum-Textfield--loadable': loadingIndicator,\n 'spectrum-Textfield--quiet': isQuiet,\n 'spectrum-Textfield--multiline': multiLine,\n 'focus-ring': !disableFocusRing && isFocusVisible\n }\n )\n }>\n <ElementType\n {...mergeProps(inputProps, hoverProps, focusProps)}\n ref={inputRef as any}\n rows={multiLine ? 1 : undefined}\n className={\n classNames(\n styles,\n 'spectrum-Textfield-input',\n {\n 'spectrum-Textfield-inputIcon': icon,\n 'is-hovered': isHovered\n },\n inputClassName\n )\n } />\n {icon}\n {validationState && !isLoading && !isDisabled ? validation : null}\n {isLoading && loadingIndicator}\n {wrapperChildren}\n </div>\n );\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n wrapperClassName={\n classNames(\n styles,\n 'spectrum-Textfield-wrapper',\n {\n 'spectrum-Textfield-wrapper--quiet': isQuiet\n }\n )\n }\n showErrorIcon={false}\n ref={domRef}>\n {textField}\n </Field>\n );\n}\n\nconst _TextFieldBase = forwardRef(TextFieldBase);\nexport {_TextFieldBase as TextFieldBase};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n@import './skin.css';\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport React, {forwardRef, Ref, useRef} from 'react';\nimport {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';\nimport {TextFieldBase} from './TextFieldBase';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useTextField} from '@react-aria/textfield';\n\nfunction TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/TextField.html#help-text');\n }\n\n return (\n <TextFieldBase\n {...props}\n labelProps={labelProps}\n inputProps={inputProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n ref={ref}\n inputRef={inputRef} />\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nconst _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n"],"names":[],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts
CHANGED
@@ -13,6 +13,7 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
|
|
13
13
|
inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>;
|
14
14
|
loadingIndicator?: ReactElement;
|
15
15
|
isLoading?: boolean;
|
16
|
+
disableFocusRing?: boolean;
|
16
17
|
}
|
17
18
|
export const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<TextFieldRef>>;
|
18
19
|
/**
|
package/dist/types.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"mappings":";;;AAwBA,4BAA6B,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,WAAW;IACxF,eAAe,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,GAAG,uBAAuB,mBAAmB,CAAC,CAAC;IAChG,gBAAgB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,UAAU,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;
|
1
|
+
{"mappings":";;;AAwBA,4BAA6B,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAAE,WAAW;IACxF,eAAe,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,oBAAoB,gBAAgB,CAAC,CAAC;IACnD,UAAU,EAAE,oBAAoB,gBAAgB,CAAC,GAAG,uBAAuB,mBAAmB,CAAC,CAAC;IAChG,gBAAgB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,eAAe,WAAW,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,UAAU,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAkID,OAAA,MAAM,sGAA0C,CAAC;AC5EjD;;;;GAIG;AACH,OAAA,IAAI,qGAAsC,CAAC;ACxD3C;;;;GAIG;AACH,OAAA,MAAM,sGAAkC,CAAC;AC5BzC,YAAY,EAAC,sBAAsB,EAAC,MAAM,wBAAwB,CAAC","sources":["packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextFieldBase.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextArea.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/TextField.tsx","packages/@react-spectrum/textfield/src/packages/@react-spectrum/textfield/src/index.ts","packages/@react-spectrum/textfield/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {TextArea} from './TextArea';\nexport {TextField} from './TextField';\nexport {TextFieldBase} from './TextFieldBase';\nexport type {SpectrumTextFieldProps} from '@react-types/textfield';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@react-spectrum/textfield",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.9.1",
|
4
4
|
"description": "Spectrum UI components in React",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "dist/main.js",
|
@@ -31,18 +31,18 @@
|
|
31
31
|
"url": "https://github.com/adobe/react-spectrum"
|
32
32
|
},
|
33
33
|
"dependencies": {
|
34
|
-
"@
|
35
|
-
"@react-aria/
|
36
|
-
"@react-aria/
|
37
|
-
"@react-aria/
|
38
|
-
"@react-aria/
|
39
|
-
"@react-
|
40
|
-
"@react-spectrum/
|
41
|
-
"@react-
|
42
|
-
"@react-
|
43
|
-
"@react-types/
|
44
|
-
"@
|
45
|
-
"@
|
34
|
+
"@react-aria/focus": "^3.10.1",
|
35
|
+
"@react-aria/i18n": "^3.6.3",
|
36
|
+
"@react-aria/interactions": "^3.13.1",
|
37
|
+
"@react-aria/textfield": "^3.8.1",
|
38
|
+
"@react-aria/utils": "^3.14.2",
|
39
|
+
"@react-spectrum/label": "^3.10.0",
|
40
|
+
"@react-spectrum/utils": "^3.8.1",
|
41
|
+
"@react-stately/utils": "^3.5.2",
|
42
|
+
"@react-types/shared": "^3.16.0",
|
43
|
+
"@react-types/textfield": "^3.6.2",
|
44
|
+
"@spectrum-icons/ui": "^3.4.1",
|
45
|
+
"@swc/helpers": "^0.4.14"
|
46
46
|
},
|
47
47
|
"devDependencies": {
|
48
48
|
"@adobe/spectrum-css-temp": "3.0.0-alpha.1",
|
@@ -55,5 +55,5 @@
|
|
55
55
|
"publishConfig": {
|
56
56
|
"access": "public"
|
57
57
|
},
|
58
|
-
"gitHead": "
|
58
|
+
"gitHead": "5480d76bd815e239366f92852c76b6831ad2a4fd"
|
59
59
|
}
|
package/src/TextFieldBase.tsx
CHANGED
@@ -14,12 +14,12 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
|
|
14
14
|
import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
|
15
15
|
import {classNames, createFocusableRef} from '@react-spectrum/utils';
|
16
16
|
import {Field} from '@react-spectrum/label';
|
17
|
-
import {FocusRing} from '@react-aria/focus';
|
18
17
|
import {mergeProps} from '@react-aria/utils';
|
19
18
|
import {PressEvents} from '@react-types/shared';
|
20
19
|
import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, RefObject, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
|
21
20
|
import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
|
22
21
|
import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
|
22
|
+
import {useFocusRing} from '@react-aria/focus';
|
23
23
|
import {useHover} from '@react-aria/interactions';
|
24
24
|
|
25
25
|
interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, PressEvents {
|
@@ -33,7 +33,8 @@ interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange'>, P
|
|
33
33
|
errorMessageProps?: HTMLAttributes<HTMLElement>,
|
34
34
|
inputRef?: RefObject<HTMLInputElement | HTMLTextAreaElement>,
|
35
35
|
loadingIndicator?: ReactElement,
|
36
|
-
isLoading?: boolean
|
36
|
+
isLoading?: boolean,
|
37
|
+
disableFocusRing?: boolean
|
37
38
|
}
|
38
39
|
|
39
40
|
function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
|
@@ -53,7 +54,8 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
|
|
53
54
|
inputRef: userInputRef,
|
54
55
|
isLoading,
|
55
56
|
loadingIndicator,
|
56
|
-
validationIconClassName
|
57
|
+
validationIconClassName,
|
58
|
+
disableFocusRing
|
57
59
|
} = props;
|
58
60
|
let {hoverProps, isHovered} = useHover({isDisabled});
|
59
61
|
let domRef = useRef<HTMLDivElement>(null);
|
@@ -74,7 +76,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
|
|
74
76
|
}));
|
75
77
|
|
76
78
|
let ElementType: React.ElementType = multiLine ? 'textarea' : 'input';
|
77
|
-
let isInvalid = validationState === 'invalid';
|
79
|
+
let isInvalid = validationState === 'invalid' && !isDisabled;
|
78
80
|
|
79
81
|
if (icon) {
|
80
82
|
let UNSAFE_className = classNames(
|
@@ -98,6 +100,11 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
|
|
98
100
|
)
|
99
101
|
});
|
100
102
|
|
103
|
+
let {focusProps, isFocusVisible} = useFocusRing({
|
104
|
+
isTextInput: true,
|
105
|
+
autoFocus
|
106
|
+
});
|
107
|
+
|
101
108
|
let textField = (
|
102
109
|
<div
|
103
110
|
className={
|
@@ -106,32 +113,31 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
|
|
106
113
|
'spectrum-Textfield',
|
107
114
|
{
|
108
115
|
'spectrum-Textfield--invalid': isInvalid,
|
109
|
-
'spectrum-Textfield--valid': validationState === 'valid',
|
116
|
+
'spectrum-Textfield--valid': validationState === 'valid' && !isDisabled,
|
110
117
|
'spectrum-Textfield--loadable': loadingIndicator,
|
111
118
|
'spectrum-Textfield--quiet': isQuiet,
|
112
|
-
'spectrum-Textfield--multiline': multiLine
|
119
|
+
'spectrum-Textfield--multiline': multiLine,
|
120
|
+
'focus-ring': !disableFocusRing && isFocusVisible
|
113
121
|
}
|
114
122
|
)
|
115
123
|
}>
|
116
|
-
<
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
} />
|
132
|
-
</FocusRing>
|
124
|
+
<ElementType
|
125
|
+
{...mergeProps(inputProps, hoverProps, focusProps)}
|
126
|
+
ref={inputRef as any}
|
127
|
+
rows={multiLine ? 1 : undefined}
|
128
|
+
className={
|
129
|
+
classNames(
|
130
|
+
styles,
|
131
|
+
'spectrum-Textfield-input',
|
132
|
+
{
|
133
|
+
'spectrum-Textfield-inputIcon': icon,
|
134
|
+
'is-hovered': isHovered
|
135
|
+
},
|
136
|
+
inputClassName
|
137
|
+
)
|
138
|
+
} />
|
133
139
|
{icon}
|
134
|
-
{validationState && !isLoading ? validation : null}
|
140
|
+
{validationState && !isLoading && !isDisabled ? validation : null}
|
135
141
|
{isLoading && loadingIndicator}
|
136
142
|
{wrapperChildren}
|
137
143
|
</div>
|
@@ -143,7 +149,15 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
|
|
143
149
|
labelProps={labelProps}
|
144
150
|
descriptionProps={descriptionProps}
|
145
151
|
errorMessageProps={errorMessageProps}
|
146
|
-
wrapperClassName={
|
152
|
+
wrapperClassName={
|
153
|
+
classNames(
|
154
|
+
styles,
|
155
|
+
'spectrum-Textfield-wrapper',
|
156
|
+
{
|
157
|
+
'spectrum-Textfield-wrapper--quiet': isQuiet
|
158
|
+
}
|
159
|
+
)
|
160
|
+
}
|
147
161
|
showErrorIcon={false}
|
148
162
|
ref={domRef}>
|
149
163
|
{textField}
|