@react-spectrum/textfield 3.0.0-nightly.1658 → 3.0.0-nightly.1663

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 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:not(.spectrum-Textfield--quiet_73bc77).spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77:not(:disabled){resize:vertical}.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);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;resize:none;border-radius:0;overflow-y:hidden}[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)))}[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{border-color:var(--spectrum-textfield-border-color-error-hover,var(--spectrum-semantic-negative-color-state-hover))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77:active{border-color:var(--spectrum-textfield-border-color-error-down,var(--spectrum-semantic-negative-color-state-down))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.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-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.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-border-color-error,var(--spectrum-semantic-negative-color-default))}.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))}
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:not(.spectrum-Textfield--quiet_73bc77,.spectrum-Textfield--readonly_73bc77).spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77:not(:disabled){resize:vertical}.spectrum-Textfield_73bc77.spectrum-Textfield--quiet_73bc77.spectrum-Textfield--multiline_73bc77 .spectrum-Textfield-input_73bc77,.spectrum-Textfield_73bc77.spectrum-Textfield--readonly_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);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;resize:none;border-radius:0;overflow-y:hidden}[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)))}[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{border-color:var(--spectrum-textfield-border-color-error-hover,var(--spectrum-semantic-negative-color-state-hover))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77:active{border-color:var(--spectrum-textfield-border-color-error-down,var(--spectrum-semantic-negative-color-state-down))}.spectrum-Textfield-input_73bc77.spectrum-Textfield--invalid_73bc77.focus-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.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--readonly_73bc77 .spectrum-Textfield-input_73bc77{border-color:var(--spectrum-textfield-quiet-background-color,var(--spectrum-alias-background-color-transparent))}.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-ring_73bc77:not(:active){border-color:var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default));box-shadow:0 0 0 1px var(--spectrum-textfield-border-color-error,var(--spectrum-semantic-negative-color-default))}.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-border-color-error,var(--spectrum-semantic-negative-color-default))}.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
@@ -11,36 +11,18 @@ var $74aPB$reactspectrumlabel = require("@react-spectrum/label");
11
11
  var $74aPB$reactariafocus = require("@react-aria/focus");
12
12
  var $74aPB$reactariainteractions = require("@react-aria/interactions");
13
13
 
14
- function $parcel$exportWildcard(dest, source) {
15
- Object.keys(source).forEach(function(key) {
16
- if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
17
- return;
18
- }
19
-
20
- Object.defineProperty(dest, key, {
21
- enumerable: true,
22
- get: function get() {
23
- return source[key];
24
- }
25
- });
26
- });
27
-
28
- return dest;
14
+ function $parcel$export(e, n, v, s) {
15
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
29
16
  }
30
17
  function $parcel$interopDefault(a) {
31
18
  return a && a.__esModule ? a.default : a;
32
19
  }
33
- function $parcel$export(e, n, v, s) {
34
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
35
- }
36
- var $eec649e464f3832d$exports = {};
37
20
 
38
- $parcel$export($eec649e464f3832d$exports, "TextArea", () => $eec649e464f3832d$export$f5c9f3c2c4054eec);
21
+ $parcel$export(module.exports, "TextArea", () => $eec649e464f3832d$export$f5c9f3c2c4054eec);
22
+ $parcel$export(module.exports, "TextField", () => $34fd51d50eb4b056$export$2c73285ae9390cec);
23
+ $parcel$export(module.exports, "TextFieldBase", () => $86793250183ac29e$export$d22444a338b6e3c2);
39
24
 
40
25
 
41
- var $86793250183ac29e$exports = {};
42
-
43
- $parcel$export($86793250183ac29e$exports, "TextFieldBase", () => $86793250183ac29e$export$d22444a338b6e3c2);
44
26
 
45
27
 
46
28
 
@@ -53,6 +35,7 @@ var $40cb3a00c193680f$exports = {};
53
35
  $parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield-input", () => $40cb3a00c193680f$export$1ac009feb2b0bd0c, (v) => $40cb3a00c193680f$export$1ac009feb2b0bd0c = v);
54
36
  $parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield", () => $40cb3a00c193680f$export$2c8a10299d8b3418, (v) => $40cb3a00c193680f$export$2c8a10299d8b3418 = v);
55
37
  $parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--quiet", () => $40cb3a00c193680f$export$bffd5e3d61a81737, (v) => $40cb3a00c193680f$export$bffd5e3d61a81737 = v);
38
+ $parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--readonly", () => $40cb3a00c193680f$export$ed65520848a7d1ae, (v) => $40cb3a00c193680f$export$ed65520848a7d1ae = v);
56
39
  $parcel$export($40cb3a00c193680f$exports, "spectrum-Textfield--multiline", () => $40cb3a00c193680f$export$9699f1c538a448a0, (v) => $40cb3a00c193680f$export$9699f1c538a448a0 = v);
57
40
  $parcel$export($40cb3a00c193680f$exports, "is-placeholder", () => $40cb3a00c193680f$export$e5b2f5233e4e5194, (v) => $40cb3a00c193680f$export$e5b2f5233e4e5194 = v);
58
41
  $parcel$export($40cb3a00c193680f$exports, "is-hovered", () => $40cb3a00c193680f$export$b8813cd5d7824ce7, (v) => $40cb3a00c193680f$export$b8813cd5d7824ce7 = v);
@@ -69,6 +52,7 @@ $parcel$export($40cb3a00c193680f$exports, "is-disabled", () => $40cb3a00c193680f
69
52
  var $40cb3a00c193680f$export$1ac009feb2b0bd0c;
70
53
  var $40cb3a00c193680f$export$2c8a10299d8b3418;
71
54
  var $40cb3a00c193680f$export$bffd5e3d61a81737;
55
+ var $40cb3a00c193680f$export$ed65520848a7d1ae;
72
56
  var $40cb3a00c193680f$export$9699f1c538a448a0;
73
57
  var $40cb3a00c193680f$export$e5b2f5233e4e5194;
74
58
  var $40cb3a00c193680f$export$b8813cd5d7824ce7;
@@ -85,6 +69,7 @@ var $40cb3a00c193680f$export$d35bc1e505d1ebbf;
85
69
  $40cb3a00c193680f$export$1ac009feb2b0bd0c = "spectrum-Textfield-input_73bc77";
86
70
  $40cb3a00c193680f$export$2c8a10299d8b3418 = "spectrum-Textfield_73bc77";
87
71
  $40cb3a00c193680f$export$bffd5e3d61a81737 = "spectrum-Textfield--quiet_73bc77";
72
+ $40cb3a00c193680f$export$ed65520848a7d1ae = "spectrum-Textfield--readonly_73bc77";
88
73
  $40cb3a00c193680f$export$9699f1c538a448a0 = "spectrum-Textfield--multiline_73bc77";
89
74
  $40cb3a00c193680f$export$e5b2f5233e4e5194 = "is-placeholder_73bc77";
90
75
  $40cb3a00c193680f$export$b8813cd5d7824ce7 = "is-hovered_73bc77";
@@ -102,7 +87,7 @@ $40cb3a00c193680f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
102
87
 
103
88
 
104
89
  function $86793250183ac29e$var$TextFieldBase(props, ref) {
105
- let { label: label , 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: inputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName } = props;
90
+ let { label: label , 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: inputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName , readOnlyText: readOnlyText } = props;
106
91
  let { hoverProps: hoverProps , isHovered: isHovered } = $74aPB$reactariainteractions.useHover({
107
92
  isDisabled: isDisabled
108
93
  });
@@ -163,7 +148,9 @@ function $86793250183ac29e$var$TextFieldBase(props, ref) {
163
148
  descriptionProps: descriptionProps,
164
149
  errorMessageProps: errorMessageProps,
165
150
  showErrorIcon: false,
166
- ref: domRef
151
+ ref: domRef,
152
+ readOnlyText: readOnlyText,
153
+ inputProps: inputProps
167
154
  }, textField));
168
155
  }
169
156
  const $86793250183ac29e$export$d22444a338b6e3c2 = /*#__PURE__*/ $74aPB$react.forwardRef($86793250183ac29e$var$TextFieldBase);
@@ -178,9 +165,11 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
178
165
  // not in stately because this is so we know when to re-measure, which is a spectrum design
179
166
  let [inputValue, setInputValue] = $74aPB$reactstatelyutils.useControlledState(props.value, props.defaultValue, ()=>{
180
167
  });
168
+ var _value, ref1;
169
+ let inputText = (ref1 = (_value = props.value) !== null && _value !== void 0 ? _value : props.defaultValue) !== null && ref1 !== void 0 ? ref1 : '';
181
170
  let inputRef = $74aPB$react.useRef();
182
171
  let onHeightChange = $74aPB$react.useCallback(()=>{
183
- if (isQuiet) {
172
+ if (isQuiet && !isReadOnly) {
184
173
  let input = inputRef.current;
185
174
  let prevAlignment = input.style.alignSelf;
186
175
  input.style.alignSelf = 'start';
@@ -190,6 +179,7 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
190
179
  }
191
180
  }, [
192
181
  isQuiet,
182
+ isReadOnly,
193
183
  inputRef
194
184
  ]);
195
185
  $74aPB$reactariautils.useLayoutEffect(()=>{
@@ -217,7 +207,8 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
217
207
  isDisabled: isDisabled,
218
208
  isQuiet: isQuiet,
219
209
  isReadOnly: isReadOnly,
220
- isRequired: isRequired
210
+ isRequired: isRequired,
211
+ readOnlyText: inputText
221
212
  }));
222
213
  }
223
214
  /**
@@ -227,15 +218,14 @@ function $eec649e464f3832d$var$TextArea(props, ref) {
227
218
  */ let $eec649e464f3832d$export$f5c9f3c2c4054eec = /*#__PURE__*/ ($parcel$interopDefault($74aPB$react)).forwardRef($eec649e464f3832d$var$TextArea);
228
219
 
229
220
 
230
- var $34fd51d50eb4b056$exports = {};
231
-
232
- $parcel$export($34fd51d50eb4b056$exports, "TextField", () => $34fd51d50eb4b056$export$2c73285ae9390cec);
233
221
 
234
222
 
235
223
 
236
224
 
237
225
  function $34fd51d50eb4b056$var$TextField(props, ref) {
238
226
  props = $74aPB$reactspectrumprovider.useProviderProps(props);
227
+ var _value, ref1;
228
+ let inputText = (ref1 = (_value = props.value) !== null && _value !== void 0 ? _value : props.defaultValue) !== null && ref1 !== void 0 ? ref1 : '';
239
229
  let inputRef = $74aPB$react.useRef();
240
230
  let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $74aPB$reactariatextfield.useTextField(props, inputRef);
241
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/TextField.html#help-text');
@@ -246,7 +236,8 @@ function $34fd51d50eb4b056$var$TextField(props, ref) {
246
236
  descriptionProps: descriptionProps,
247
237
  errorMessageProps: errorMessageProps,
248
238
  ref: ref,
249
- inputRef: inputRef
239
+ inputRef: inputRef,
240
+ readOnlyText: inputText
250
241
  }));
251
242
  }
252
243
  /**
@@ -257,9 +248,6 @@ function $34fd51d50eb4b056$var$TextField(props, ref) {
257
248
 
258
249
 
259
250
 
260
- $parcel$exportWildcard(module.exports, $eec649e464f3832d$exports);
261
- $parcel$exportWildcard(module.exports, $34fd51d50eb4b056$exports);
262
- $parcel$exportWildcard(module.exports, $86793250183ac29e$exports);
263
251
 
264
252
 
265
253
  //# sourceMappingURL=main.js.map
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 * from './TextArea';\nexport * from './TextField';\nexport * from './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\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {RefObject, 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: RefObject<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\n let inputRef = useRef<HTMLTextAreaElement>();\n\n let onHeightChange = useCallback(() => {\n if (isQuiet) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n input.style.height = `${input.scrollHeight}px`;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, inputRef]);\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 label,\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,\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 inputRef = inputRef || 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 if (label) {\n textField = React.cloneElement(textField, mergeProps(textField.props, {\n className: multiLine ? 'spectrum-Field-field--multiline' : ''\n }));\n }\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\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, RefObject, 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: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>();\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';\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, {RefObject, 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: RefObject<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 // 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\n let inputText = props.value ?? props.defaultValue ?? ''; \n let inputRef = useRef<HTMLTextAreaElement>();\n\n let onHeightChange = useCallback(() => {\n if (isQuiet && !isReadOnly) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n input.style.height = `${input.scrollHeight}px`;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, isReadOnly, inputRef]);\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 readOnlyText={inputText} />\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 readOnlyText?: string\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n label,\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,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n readOnlyText\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n inputRef = inputRef || 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 if (label) {\n textField = React.cloneElement(textField, mergeProps(textField.props, {\n className: multiLine ? 'spectrum-Field-field--multiline' : ''\n }));\n }\n \n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n showErrorIcon={false}\n ref={domRef}\n readOnlyText={readOnlyText}\n inputProps={inputProps}>\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, RefObject, 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: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let inputText = props.value ?? props.defaultValue ?? ''; \n let inputRef = useRef<HTMLInputElement>();\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 readOnlyText={inputText} />\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
@@ -11,20 +11,14 @@ import {Field as $evhxb$Field} from "@react-spectrum/label";
11
11
  import {FocusRing as $evhxb$FocusRing} from "@react-aria/focus";
12
12
  import {useHover as $evhxb$useHover} from "@react-aria/interactions";
13
13
 
14
- function $parcel$export(e, n, v, s) {
15
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
16
- }
17
14
  function $parcel$interopDefault(a) {
18
15
  return a && a.__esModule ? a.default : a;
19
16
  }
20
- var $cc187bf91f8eea73$exports = {};
21
-
22
- $parcel$export($cc187bf91f8eea73$exports, "TextArea", () => $cc187bf91f8eea73$export$f5c9f3c2c4054eec);
23
-
17
+ function $parcel$export(e, n, v, s) {
18
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
+ }
24
20
 
25
- var $599adb75312e6492$exports = {};
26
21
 
27
- $parcel$export($599adb75312e6492$exports, "TextFieldBase", () => $599adb75312e6492$export$d22444a338b6e3c2);
28
22
 
29
23
 
30
24
 
@@ -37,6 +31,7 @@ var $c14528ddc146317f$exports = {};
37
31
  $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield-input", () => $c14528ddc146317f$export$1ac009feb2b0bd0c, (v) => $c14528ddc146317f$export$1ac009feb2b0bd0c = v);
38
32
  $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield", () => $c14528ddc146317f$export$2c8a10299d8b3418, (v) => $c14528ddc146317f$export$2c8a10299d8b3418 = v);
39
33
  $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--quiet", () => $c14528ddc146317f$export$bffd5e3d61a81737, (v) => $c14528ddc146317f$export$bffd5e3d61a81737 = v);
34
+ $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--readonly", () => $c14528ddc146317f$export$ed65520848a7d1ae, (v) => $c14528ddc146317f$export$ed65520848a7d1ae = v);
40
35
  $parcel$export($c14528ddc146317f$exports, "spectrum-Textfield--multiline", () => $c14528ddc146317f$export$9699f1c538a448a0, (v) => $c14528ddc146317f$export$9699f1c538a448a0 = v);
41
36
  $parcel$export($c14528ddc146317f$exports, "is-placeholder", () => $c14528ddc146317f$export$e5b2f5233e4e5194, (v) => $c14528ddc146317f$export$e5b2f5233e4e5194 = v);
42
37
  $parcel$export($c14528ddc146317f$exports, "is-hovered", () => $c14528ddc146317f$export$b8813cd5d7824ce7, (v) => $c14528ddc146317f$export$b8813cd5d7824ce7 = v);
@@ -53,6 +48,7 @@ $parcel$export($c14528ddc146317f$exports, "is-disabled", () => $c14528ddc146317f
53
48
  var $c14528ddc146317f$export$1ac009feb2b0bd0c;
54
49
  var $c14528ddc146317f$export$2c8a10299d8b3418;
55
50
  var $c14528ddc146317f$export$bffd5e3d61a81737;
51
+ var $c14528ddc146317f$export$ed65520848a7d1ae;
56
52
  var $c14528ddc146317f$export$9699f1c538a448a0;
57
53
  var $c14528ddc146317f$export$e5b2f5233e4e5194;
58
54
  var $c14528ddc146317f$export$b8813cd5d7824ce7;
@@ -69,6 +65,7 @@ var $c14528ddc146317f$export$d35bc1e505d1ebbf;
69
65
  $c14528ddc146317f$export$1ac009feb2b0bd0c = "spectrum-Textfield-input_73bc77";
70
66
  $c14528ddc146317f$export$2c8a10299d8b3418 = "spectrum-Textfield_73bc77";
71
67
  $c14528ddc146317f$export$bffd5e3d61a81737 = "spectrum-Textfield--quiet_73bc77";
68
+ $c14528ddc146317f$export$ed65520848a7d1ae = "spectrum-Textfield--readonly_73bc77";
72
69
  $c14528ddc146317f$export$9699f1c538a448a0 = "spectrum-Textfield--multiline_73bc77";
73
70
  $c14528ddc146317f$export$e5b2f5233e4e5194 = "is-placeholder_73bc77";
74
71
  $c14528ddc146317f$export$b8813cd5d7824ce7 = "is-hovered_73bc77";
@@ -86,7 +83,7 @@ $c14528ddc146317f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
86
83
 
87
84
 
88
85
  function $599adb75312e6492$var$TextFieldBase(props, ref) {
89
- let { label: label , 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: inputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName } = props;
86
+ let { label: label , 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: inputRef , isLoading: isLoading , loadingIndicator: loadingIndicator , validationIconClassName: validationIconClassName , readOnlyText: readOnlyText } = props;
90
87
  let { hoverProps: hoverProps , isHovered: isHovered } = $evhxb$useHover({
91
88
  isDisabled: isDisabled
92
89
  });
@@ -147,7 +144,9 @@ function $599adb75312e6492$var$TextFieldBase(props, ref) {
147
144
  descriptionProps: descriptionProps,
148
145
  errorMessageProps: errorMessageProps,
149
146
  showErrorIcon: false,
150
- ref: domRef
147
+ ref: domRef,
148
+ readOnlyText: readOnlyText,
149
+ inputProps: inputProps
151
150
  }, textField));
152
151
  }
153
152
  const $599adb75312e6492$export$d22444a338b6e3c2 = /*#__PURE__*/ $evhxb$forwardRef($599adb75312e6492$var$TextFieldBase);
@@ -162,9 +161,11 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
162
161
  // not in stately because this is so we know when to re-measure, which is a spectrum design
163
162
  let [inputValue, setInputValue] = $evhxb$useControlledState(props.value, props.defaultValue, ()=>{
164
163
  });
164
+ var _value, ref1;
165
+ let inputText = (ref1 = (_value = props.value) !== null && _value !== void 0 ? _value : props.defaultValue) !== null && ref1 !== void 0 ? ref1 : '';
165
166
  let inputRef = $evhxb$useRef();
166
167
  let onHeightChange = $evhxb$useCallback(()=>{
167
- if (isQuiet) {
168
+ if (isQuiet && !isReadOnly) {
168
169
  let input = inputRef.current;
169
170
  let prevAlignment = input.style.alignSelf;
170
171
  input.style.alignSelf = 'start';
@@ -174,6 +175,7 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
174
175
  }
175
176
  }, [
176
177
  isQuiet,
178
+ isReadOnly,
177
179
  inputRef
178
180
  ]);
179
181
  $evhxb$useLayoutEffect(()=>{
@@ -201,7 +203,8 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
201
203
  isDisabled: isDisabled,
202
204
  isQuiet: isQuiet,
203
205
  isReadOnly: isReadOnly,
204
- isRequired: isRequired
206
+ isRequired: isRequired,
207
+ readOnlyText: inputText
205
208
  }));
206
209
  }
207
210
  /**
@@ -211,15 +214,14 @@ function $cc187bf91f8eea73$var$TextArea(props, ref) {
211
214
  */ let $cc187bf91f8eea73$export$f5c9f3c2c4054eec = /*#__PURE__*/ $evhxb$react.forwardRef($cc187bf91f8eea73$var$TextArea);
212
215
 
213
216
 
214
- var $265457f9427aa380$exports = {};
215
-
216
- $parcel$export($265457f9427aa380$exports, "TextField", () => $265457f9427aa380$export$2c73285ae9390cec);
217
217
 
218
218
 
219
219
 
220
220
 
221
221
  function $265457f9427aa380$var$TextField(props, ref) {
222
222
  props = $evhxb$useProviderProps(props);
223
+ var _value, ref1;
224
+ let inputText = (ref1 = (_value = props.value) !== null && _value !== void 0 ? _value : props.defaultValue) !== null && ref1 !== void 0 ? ref1 : '';
223
225
  let inputRef = $evhxb$useRef();
224
226
  let { labelProps: labelProps , inputProps: inputProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $evhxb$useTextField(props, inputRef);
225
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/TextField.html#help-text');
@@ -230,7 +232,8 @@ function $265457f9427aa380$var$TextField(props, ref) {
230
232
  descriptionProps: descriptionProps,
231
233
  errorMessageProps: errorMessageProps,
232
234
  ref: ref,
233
- inputRef: inputRef
235
+ inputRef: inputRef,
236
+ readOnlyText: inputText
234
237
  }));
235
238
  }
236
239
  /**
@@ -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 * from './TextArea';\nexport * from './TextField';\nexport * from './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\nimport {chain, useLayoutEffect} from '@react-aria/utils';\nimport React, {RefObject, 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: RefObject<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\n let inputRef = useRef<HTMLTextAreaElement>();\n\n let onHeightChange = useCallback(() => {\n if (isQuiet) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n input.style.height = `${input.scrollHeight}px`;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, inputRef]);\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 label,\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,\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 inputRef = inputRef || 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 if (label) {\n textField = React.cloneElement(textField, mergeProps(textField.props, {\n className: multiLine ? 'spectrum-Field-field--multiline' : ''\n }));\n }\n\n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\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, RefObject, 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: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n\n let inputRef = useRef<HTMLInputElement>();\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';\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, {RefObject, 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: RefObject<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 // 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\n let inputText = props.value ?? props.defaultValue ?? ''; \n let inputRef = useRef<HTMLTextAreaElement>();\n\n let onHeightChange = useCallback(() => {\n if (isQuiet && !isReadOnly) {\n let input = inputRef.current;\n let prevAlignment = input.style.alignSelf;\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n input.style.height = `${input.scrollHeight}px`;\n input.style.alignSelf = prevAlignment;\n }\n }, [isQuiet, isReadOnly, inputRef]);\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 readOnlyText={inputText} />\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 readOnlyText?: string\n}\n\nfunction TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {\n let {\n label,\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,\n isLoading,\n loadingIndicator,\n validationIconClassName,\n readOnlyText\n } = props;\n let {hoverProps, isHovered} = useHover({isDisabled});\n let domRef = useRef<HTMLDivElement>(null);\n let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n inputRef = inputRef || 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 if (label) {\n textField = React.cloneElement(textField, mergeProps(textField.props, {\n className: multiLine ? 'spectrum-Field-field--multiline' : ''\n }));\n }\n \n return (\n <Field\n {...props}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n showErrorIcon={false}\n ref={domRef}\n readOnlyText={readOnlyText}\n inputProps={inputProps}>\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, RefObject, 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: RefObject<TextFieldRef>) {\n props = useProviderProps(props);\n let inputText = props.value ?? props.defaultValue ?? ''; \n let inputRef = useRef<HTMLInputElement>();\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 readOnlyText={inputText} />\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
+ readOnlyText?: string;
16
17
  }
17
18
  export const TextFieldBase: React.ForwardRefExoticComponent<TextFieldBaseProps & React.RefAttributes<TextFieldRef>>;
18
19
  /**
@@ -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;CACpB;AA2HD,OAAA,MAAM,sGAA0C,CAAC;AC/EjD;;;;GAIG;AACH,OAAA,IAAI,qGAAsC,CAAC;AC7C3C;;;;GAIG;AACH,OAAA,MAAM,sGAAkC,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 * from './TextArea';\nexport * from './TextField';\nexport * from './TextFieldBase';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
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,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AA8HD,OAAA,MAAM,sGAA0C,CAAC;AClFjD;;;;GAIG;AACH,OAAA,IAAI,qGAAsC,CAAC;AC7C3C;;;;GAIG;AACH,OAAA,MAAM,sGAAkC,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';\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.0.0-nightly.1658+a5a9d95db",
3
+ "version": "3.0.0-nightly.1663+2a6c48eb0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -32,21 +32,21 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@babel/runtime": "^7.6.2",
35
- "@react-aria/focus": "3.0.0-nightly.1658+a5a9d95db",
36
- "@react-aria/i18n": "3.0.0-nightly.1658+a5a9d95db",
37
- "@react-aria/interactions": "3.0.0-nightly.1658+a5a9d95db",
38
- "@react-aria/textfield": "3.0.0-nightly.1658+a5a9d95db",
39
- "@react-aria/utils": "3.0.0-nightly.1658+a5a9d95db",
40
- "@react-spectrum/label": "3.6.2-nightly.3358+a5a9d95db",
41
- "@react-spectrum/utils": "3.0.0-nightly.1658+a5a9d95db",
42
- "@react-stately/utils": "3.0.0-nightly.1658+a5a9d95db",
43
- "@react-types/shared": "3.0.0-nightly.1658+a5a9d95db",
44
- "@react-types/textfield": "3.0.0-nightly.1658+a5a9d95db",
45
- "@spectrum-icons/ui": "3.0.0-nightly.1658+a5a9d95db"
35
+ "@react-aria/focus": "3.0.0-nightly.1663+2a6c48eb0",
36
+ "@react-aria/i18n": "3.0.0-nightly.1663+2a6c48eb0",
37
+ "@react-aria/interactions": "3.0.0-nightly.1663+2a6c48eb0",
38
+ "@react-aria/textfield": "3.0.0-nightly.1663+2a6c48eb0",
39
+ "@react-aria/utils": "3.0.0-nightly.1663+2a6c48eb0",
40
+ "@react-spectrum/label": "3.6.2-nightly.3363+2a6c48eb0",
41
+ "@react-spectrum/utils": "3.0.0-nightly.1663+2a6c48eb0",
42
+ "@react-stately/utils": "3.0.0-nightly.1663+2a6c48eb0",
43
+ "@react-types/shared": "3.0.0-nightly.1663+2a6c48eb0",
44
+ "@react-types/textfield": "3.0.0-nightly.1663+2a6c48eb0",
45
+ "@spectrum-icons/ui": "3.0.0-nightly.1663+2a6c48eb0"
46
46
  },
47
47
  "devDependencies": {
48
- "@adobe/spectrum-css-temp": "3.0.0-nightly.1658+a5a9d95db",
49
- "@spectrum-icons/workflow": "3.0.0-nightly.1658+a5a9d95db"
48
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.1663+2a6c48eb0",
49
+ "@spectrum-icons/workflow": "3.0.0-nightly.1663+2a6c48eb0"
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@react-spectrum/provider": "^3.0.0",
@@ -55,5 +55,5 @@
55
55
  "publishConfig": {
56
56
  "access": "public"
57
57
  },
58
- "gitHead": "a5a9d95db94da277dca6267cca8bbe55dd6ccc69"
58
+ "gitHead": "2a6c48eb0099671cf9b530ec3d75882c549e9cb5"
59
59
  }
package/src/TextArea.tsx CHANGED
@@ -28,14 +28,14 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
28
28
  onChange,
29
29
  ...otherProps
30
30
  } = props;
31
-
32
31
  // not in stately because this is so we know when to re-measure, which is a spectrum design
33
32
  let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});
34
33
 
34
+ let inputText = props.value ?? props.defaultValue ?? '';
35
35
  let inputRef = useRef<HTMLTextAreaElement>();
36
36
 
37
37
  let onHeightChange = useCallback(() => {
38
- if (isQuiet) {
38
+ if (isQuiet && !isReadOnly) {
39
39
  let input = inputRef.current;
40
40
  let prevAlignment = input.style.alignSelf;
41
41
  input.style.alignSelf = 'start';
@@ -43,7 +43,7 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
43
43
  input.style.height = `${input.scrollHeight}px`;
44
44
  input.style.alignSelf = prevAlignment;
45
45
  }
46
- }, [isQuiet, inputRef]);
46
+ }, [isQuiet, isReadOnly, inputRef]);
47
47
 
48
48
  useLayoutEffect(() => {
49
49
  if (inputRef.current) {
@@ -74,7 +74,8 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
74
74
  isDisabled={isDisabled}
75
75
  isQuiet={isQuiet}
76
76
  isReadOnly={isReadOnly}
77
- isRequired={isRequired} />
77
+ isRequired={isRequired}
78
+ readOnlyText={inputText} />
78
79
  );
79
80
  }
80
81
 
package/src/TextField.tsx CHANGED
@@ -18,14 +18,14 @@ import {useTextField} from '@react-aria/textfield';
18
18
 
19
19
  function TextField(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
20
20
  props = useProviderProps(props);
21
-
21
+ let inputText = props.value ?? props.defaultValue ?? '';
22
22
  let inputRef = useRef<HTMLInputElement>();
23
23
  let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);
24
24
 
25
25
  if (props.placeholder) {
26
26
  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');
27
27
  }
28
-
28
+
29
29
  return (
30
30
  <TextFieldBase
31
31
  {...props}
@@ -34,7 +34,8 @@ function TextField(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>)
34
34
  descriptionProps={descriptionProps}
35
35
  errorMessageProps={errorMessageProps}
36
36
  ref={ref}
37
- inputRef={inputRef} />
37
+ inputRef={inputRef}
38
+ readOnlyText={inputText} />
38
39
  );
39
40
  }
40
41
 
@@ -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
+ readOnlyText?: string
37
38
  }
38
39
 
39
40
  function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
@@ -54,13 +55,14 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
54
55
  inputRef,
55
56
  isLoading,
56
57
  loadingIndicator,
57
- validationIconClassName
58
+ validationIconClassName,
59
+ readOnlyText
58
60
  } = props;
59
61
  let {hoverProps, isHovered} = useHover({isDisabled});
60
62
  let domRef = useRef<HTMLDivElement>(null);
61
63
  let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
62
64
  inputRef = inputRef || defaultInputRef;
63
-
65
+
64
66
  // Expose imperative interface for ref
65
67
  useImperativeHandle(ref, () => ({
66
68
  ...createFocusableRef(domRef, inputRef),
@@ -143,7 +145,7 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
143
145
  className: multiLine ? 'spectrum-Field-field--multiline' : ''
144
146
  }));
145
147
  }
146
-
148
+
147
149
  return (
148
150
  <Field
149
151
  {...props}
@@ -151,7 +153,9 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
151
153
  descriptionProps={descriptionProps}
152
154
  errorMessageProps={errorMessageProps}
153
155
  showErrorIcon={false}
154
- ref={domRef}>
156
+ ref={domRef}
157
+ readOnlyText={readOnlyText}
158
+ inputProps={inputProps}>
155
159
  {textField}
156
160
  </Field>
157
161
  );
package/src/index.ts CHANGED
@@ -12,6 +12,6 @@
12
12
 
13
13
  /// <reference types="css-module-types" />
14
14
 
15
- export * from './TextArea';
16
- export * from './TextField';
17
- export * from './TextFieldBase';
15
+ export {TextArea} from './TextArea';
16
+ export {TextField} from './TextField';
17
+ export {TextFieldBase} from './TextFieldBase';