UNPKG

@react-spectrum/s2

Version:

Spectrum 2 UI components in React

github.com/adobe/react-spectrum

adobe/react-spectrum

1 lines • 12.9 kB
1
{"mappings":"AC2EiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBiC;;;;EAgC9B;;;;EAAA;;;;EAyBK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BlB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8DV;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9NgC;EAqJpB;;;;EAAA;;;;;AArJoB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAqJpB;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEZ;;;;;;AA9NgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IA0JL;;;;;;AA1JK;EAAA;IAAA","sources":["18dc2c1262434547","packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["@import \"5451fbb197e5f742\";\n@import \"4c96520903762dec\";\n@import \"dec1ed3fcae5e2a0\";\n@import \"7f2f9d36b130a0fc\";\n@import \"d78be91638043334\";\n@import \"1287e36439fa04a9\";\n@import \"ae2e3271ad92acb6\";\n@import \"657c7598b6083861\";\n@import \"227d65898b7fdc0f\";\n@import \"312761f7202cddfd\";\n@import \"bf76db767f0fbbad\";\n","/*\n * Copyright 2024 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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {control, controlFont, fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n isDisabled?: boolean,\n isRequired?: boolean,\n size?: 'S' | 'M' | 'L' | 'XL',\n necessityIndicator?: NecessityIndicator,\n labelAlign?: Alignment,\n labelPosition?: 'top' | 'side',\n includeNecessityIndicatorInAccessibilityName?: boolean,\n staticColor?: 'white' | 'black' | 'auto',\n contextualHelp?: ReactNode,\n isQuiet?: boolean,\n children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isDisabled,\n isRequired,\n size = 'M',\n necessityIndicator = 'icon',\n includeNecessityIndicatorInAccessibilityName = false,\n labelAlign,\n labelPosition,\n staticColor,\n contextualHelp,\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = '',\n ...labelProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let contextualHelpId = useId();\n let fallbackLabelPropsId = useId();\n if (contextualHelp && !labelProps.id) {\n labelProps.id = fallbackLabelPropsId;\n }\n\n if (!props.children) {\n return null;\n }\n\n return (\n <div\n className={style({\n gridArea: 'label',\n display: 'inline',\n textAlign: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n },\n paddingBottom: {\n labelPosition: {\n top: '--field-gap'\n }\n },\n contain: {\n labelPosition: {\n top: 'inline-size'\n },\n isQuiet: 'none'\n }\n })({labelAlign, labelPosition, isQuiet})}>\n <Label\n {...labelProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n {props.children}\n {(isRequired || necessityIndicator === 'label') && (\n <span className={style({whiteSpace: 'nowrap'})}>\n &nbsp;\n {necessityIndicator === 'icon' &&\n <AsteriskIcon\n size={size === 'S' ? 'M' : size}\n className={style({\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n })}\n aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n }\n {necessityIndicator === 'label' &&\n /* The necessity label is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here.\n */\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n </span>\n }\n </span>\n )}\n </Label>\n {contextualHelp && (\n <span className={style({whiteSpace: 'nowrap'})}>\n &nbsp;\n <CenterBaseline\n styles={style({\n display: 'inline-flex',\n height: 0\n })}>\n <ContextualHelpContext.Provider\n value={{\n id: contextualHelpId,\n 'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n }}>\n {contextualHelp}\n </ContextualHelpContext.Provider>\n </CenterBaseline>\n </span>\n )}\n </div>\n );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n size?: 'S' | 'M' | 'L' | 'XL',\n children: ReactNode,\n styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n ...focusRing(),\n ...control({shape: 'default'}),\n ...fieldInput(),\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: baseColor('negative'),\n isFocusWithin: {\n default: 'gray-900',\n isInvalid: 'negative-1000',\n forcedColors: 'Highlight'\n },\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n backgroundColor: 'gray-25',\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled'\n },\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n return (\n <Group\n ref={ref}\n {...props}\n onPointerDown={(e) => {\n // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n onPointerUp={e => {\n if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n props.styles\n )} />\n );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n return (\n <RACInput\n {...otherProps}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style({\n padding: 0,\n backgroundColor: 'transparent',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n flexGrow: 1,\n flexShrink: 1,\n minWidth: 0,\n width: 'full',\n outlineStyle: 'none',\n borderStyle: 'none',\n truncate: true\n }), styles)} />\n );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n size?: 'S' | 'M' | 'L' | 'XL',\n isDisabled?: boolean,\n isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n description?: ReactNode,\n showErrorIcon?: boolean\n}\n\nexport const helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: controlFont(),\n color: {\n default: 'neutral-subdued',\n isInvalid: 'negative',\n isDisabled: 'disabled'\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n contain: 'inline-size',\n paddingTop: '--field-gap',\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}): ReactNode {\n let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n let domErrorRef = useDOMRef(props.errorRef || null);\n\n if (!props.isInvalid && props.description) {\n return (\n <Text\n slot=\"description\"\n ref={domDescriptionRef}\n className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n {props.description}\n </Text>\n );\n }\n\n return (\n <FieldError\n {...props}\n ref={domErrorRef}\n className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n {props.showErrorIcon &&\n <CenterBaseline>\n <AlertIcon />\n </CenterBaseline>\n }\n <span>{children || validationErrors.join(' ')}</span>\n </>))}\n </FieldError>\n );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {\n return (\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({\n slot: 'icon',\n styles: style({\n order: 0,\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'negative',\n forcedColors: 'ButtonText'\n }\n }\n })}),\n styles: style({\n size: fontRelative(20),\n marginStart: 'text-to-visual',\n marginEnd: fontRelative(-2),\n flexShrink: 0\n })\n }]\n ]}>\n {!props.isDisabled && <AlertIcon />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"Field.css.map"}