@react-spectrum/s2 0.10.0 → 0.11.0
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/Accordion.cjs +2 -2
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +2 -2
- package/dist/ActionBar.cjs +62 -62
- package/dist/ActionBar.css +61 -61
- package/dist/ActionBar.mjs +62 -62
- package/dist/ActionButton.cjs +202 -202
- package/dist/ActionButton.css +138 -138
- package/dist/ActionButton.mjs +202 -202
- package/dist/ActionButtonGroup.cjs +15 -15
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +15 -15
- package/dist/Add.cjs +10 -10
- package/dist/Add.css +6 -6
- package/dist/Add.mjs +10 -10
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Asterisk.cjs +6 -6
- package/dist/Asterisk.css +4 -4
- package/dist/Asterisk.mjs +6 -6
- package/dist/Avatar.cjs +14 -14
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +14 -14
- package/dist/AvatarGroup.cjs +134 -134
- package/dist/AvatarGroup.css +33 -33
- package/dist/AvatarGroup.mjs +134 -134
- package/dist/Badge.cjs +206 -206
- package/dist/Badge.css +127 -127
- package/dist/Badge.mjs +206 -206
- package/dist/Breadcrumbs.cjs +254 -254
- package/dist/Breadcrumbs.css +109 -109
- package/dist/Breadcrumbs.mjs +254 -254
- package/dist/Button.cjs +341 -341
- package/dist/Button.css +177 -177
- package/dist/Button.mjs +341 -341
- package/dist/ButtonGroup.cjs +20 -20
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +20 -20
- package/dist/Calendar.cjs +151 -139
- package/dist/Calendar.cjs.map +1 -1
- package/dist/Calendar.css +134 -134
- package/dist/Calendar.css.map +1 -1
- package/dist/Calendar.mjs +153 -141
- package/dist/Calendar.mjs.map +1 -1
- package/dist/Card.cjs +304 -304
- package/dist/Card.css +209 -209
- package/dist/Card.mjs +304 -304
- package/dist/CardView.cjs +16 -16
- package/dist/CardView.css +16 -16
- package/dist/CardView.mjs +16 -16
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +170 -170
- package/dist/Checkbox.css +92 -92
- package/dist/Checkbox.mjs +170 -170
- package/dist/CheckboxGroup.cjs +45 -45
- package/dist/CheckboxGroup.css +38 -38
- package/dist/CheckboxGroup.mjs +45 -45
- package/dist/Checkmark.cjs +12 -12
- package/dist/Checkmark.css +8 -8
- package/dist/Checkmark.mjs +12 -12
- package/dist/Chevron.cjs +12 -12
- package/dist/Chevron.css +10 -10
- package/dist/Chevron.mjs +12 -12
- package/dist/ClearButton.cjs +29 -29
- package/dist/ClearButton.css +29 -29
- package/dist/ClearButton.mjs +29 -29
- package/dist/CloseButton.cjs +54 -54
- package/dist/CloseButton.css +46 -46
- package/dist/CloseButton.mjs +54 -54
- package/dist/ColorArea.cjs +16 -16
- package/dist/ColorArea.css +16 -16
- package/dist/ColorArea.mjs +16 -16
- package/dist/ColorField.cjs +32 -32
- package/dist/ColorField.css +28 -28
- package/dist/ColorField.mjs +32 -32
- package/dist/ColorHandle.cjs +27 -27
- package/dist/ColorHandle.css +42 -42
- package/dist/ColorHandle.mjs +27 -27
- package/dist/ColorSlider.cjs +118 -118
- package/dist/ColorSlider.css +54 -54
- package/dist/ColorSlider.mjs +118 -118
- package/dist/ColorSwatch.cjs +29 -29
- package/dist/ColorSwatch.css +29 -29
- package/dist/ColorSwatch.mjs +29 -29
- package/dist/ColorSwatchPicker.cjs +27 -27
- package/dist/ColorSwatchPicker.css +46 -46
- package/dist/ColorSwatchPicker.mjs +27 -27
- package/dist/ColorWheel.cjs +26 -26
- package/dist/ColorWheel.css +17 -17
- package/dist/ColorWheel.mjs +26 -26
- package/dist/ComboBox.cjs +415 -400
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +181 -181
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +415 -400
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.css +60 -60
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/Cross.cjs +14 -14
- package/dist/Cross.css +10 -10
- package/dist/Cross.mjs +14 -14
- package/dist/CustomDialog.cjs +25 -25
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +25 -25
- package/dist/Dash.cjs +10 -10
- package/dist/Dash.css +6 -6
- package/dist/Dash.mjs +10 -10
- package/dist/DateField.cjs +73 -73
- package/dist/DateField.css +77 -77
- package/dist/DateField.mjs +73 -73
- package/dist/DatePicker.cjs +182 -185
- package/dist/DatePicker.cjs.map +1 -1
- package/dist/DatePicker.css +126 -126
- package/dist/DatePicker.css.map +1 -1
- package/dist/DatePicker.mjs +182 -185
- package/dist/DatePicker.mjs.map +1 -1
- package/dist/DateRangePicker.cjs +58 -61
- package/dist/DateRangePicker.cjs.map +1 -1
- package/dist/DateRangePicker.css +60 -60
- package/dist/DateRangePicker.css.map +1 -1
- package/dist/DateRangePicker.mjs +58 -61
- package/dist/DateRangePicker.mjs.map +1 -1
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +82 -82
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +135 -135
- package/dist/Disclosure.css +106 -106
- package/dist/Disclosure.mjs +135 -135
- package/dist/Divider.cjs +25 -25
- package/dist/Divider.css +25 -25
- package/dist/Divider.mjs +25 -25
- package/dist/DropZone.cjs +62 -62
- package/dist/DropZone.css +58 -58
- package/dist/DropZone.mjs +62 -62
- package/dist/Field.cjs +370 -370
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +142 -142
- package/dist/Field.mjs +370 -370
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +9 -9
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +9 -9
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +91 -91
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +256 -256
- package/dist/IllustratedMessage.css +78 -78
- package/dist/IllustratedMessage.mjs +256 -256
- package/dist/Image.cjs +13 -13
- package/dist/Image.css +14 -14
- package/dist/Image.mjs +13 -13
- package/dist/InlineAlert.cjs +117 -117
- package/dist/InlineAlert.css +98 -98
- package/dist/InlineAlert.mjs +117 -117
- package/dist/Link.cjs +54 -54
- package/dist/Link.css +46 -46
- package/dist/Link.mjs +54 -54
- package/dist/LinkOut.cjs +8 -8
- package/dist/LinkOut.css +8 -8
- package/dist/LinkOut.mjs +8 -8
- package/dist/Menu.cjs +459 -459
- package/dist/Menu.css +185 -185
- package/dist/Menu.mjs +459 -459
- package/dist/Meter.cjs +163 -163
- package/dist/Meter.css +93 -93
- package/dist/Meter.mjs +163 -163
- package/dist/Modal.cjs +58 -58
- package/dist/Modal.css +50 -50
- package/dist/Modal.mjs +58 -58
- package/dist/NotificationBadge.cjs +58 -58
- package/dist/NotificationBadge.css +51 -51
- package/dist/NotificationBadge.mjs +58 -58
- package/dist/NumberField.cjs +115 -115
- package/dist/NumberField.css +100 -100
- package/dist/NumberField.mjs +115 -115
- package/dist/Picker.cjs +283 -283
- package/dist/Picker.css +169 -169
- package/dist/Picker.mjs +283 -283
- package/dist/Popover.cjs +86 -86
- package/dist/Popover.css +66 -66
- package/dist/Popover.mjs +86 -86
- package/dist/ProgressBar.cjs +173 -173
- package/dist/ProgressBar.css +101 -101
- package/dist/ProgressBar.mjs +173 -173
- package/dist/ProgressCircle.cjs +31 -31
- package/dist/ProgressCircle.css +24 -24
- package/dist/ProgressCircle.mjs +31 -31
- package/dist/Provider.cjs +11 -11
- package/dist/Provider.css +10 -10
- package/dist/Provider.mjs +11 -11
- package/dist/Radio.cjs +154 -154
- package/dist/Radio.css +79 -79
- package/dist/Radio.mjs +154 -154
- package/dist/RadioGroup.cjs +42 -42
- package/dist/RadioGroup.css +38 -38
- package/dist/RadioGroup.mjs +42 -42
- package/dist/RangeCalendar.cjs +32 -20
- package/dist/RangeCalendar.cjs.map +1 -1
- package/dist/RangeCalendar.css +10 -10
- package/dist/RangeCalendar.css.map +1 -1
- package/dist/RangeCalendar.mjs +34 -22
- package/dist/RangeCalendar.mjs.map +1 -1
- package/dist/SearchField.cjs +42 -42
- package/dist/SearchField.css +46 -46
- package/dist/SearchField.mjs +42 -42
- package/dist/SegmentedControl.cjs +181 -181
- package/dist/SegmentedControl.css +118 -118
- package/dist/SegmentedControl.mjs +181 -181
- package/dist/SelectBoxGroup.cjs +342 -0
- package/dist/SelectBoxGroup.cjs.map +1 -0
- package/dist/SelectBoxGroup.css +503 -0
- package/dist/SelectBoxGroup.css.map +1 -0
- package/dist/SelectBoxGroup.mjs +335 -0
- package/dist/SelectBoxGroup.mjs.map +1 -0
- package/dist/SkeletonCollection.cjs +6 -1
- package/dist/SkeletonCollection.cjs.map +1 -1
- package/dist/SkeletonCollection.mjs +7 -2
- package/dist/SkeletonCollection.mjs.map +1 -1
- package/dist/Slider.cjs +299 -299
- package/dist/Slider.css +151 -151
- package/dist/Slider.mjs +299 -299
- package/dist/StatusLight.cjs +125 -125
- package/dist/StatusLight.css +61 -61
- package/dist/StatusLight.mjs +125 -125
- package/dist/Switch.cjs +162 -162
- package/dist/Switch.css +74 -74
- package/dist/Switch.mjs +162 -162
- package/dist/TableView.cjs +319 -319
- package/dist/TableView.css +172 -172
- package/dist/TableView.mjs +319 -319
- package/dist/Tabs.cjs +213 -188
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +105 -101
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +213 -188
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +127 -127
- package/dist/TabsPicker.css +111 -111
- package/dist/TabsPicker.mjs +127 -127
- package/dist/TagGroup.cjs +213 -213
- package/dist/TagGroup.css +147 -147
- package/dist/TagGroup.mjs +213 -213
- package/dist/TextField.cjs +59 -59
- package/dist/TextField.css +54 -54
- package/dist/TextField.mjs +59 -59
- package/dist/TimeField.cjs +52 -52
- package/dist/TimeField.css +48 -48
- package/dist/TimeField.mjs +52 -52
- package/dist/Toast.cjs +120 -120
- package/dist/Toast.css +107 -107
- package/dist/Toast.mjs +120 -120
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +83 -83
- package/dist/Tooltip.css +70 -70
- package/dist/Tooltip.mjs +83 -83
- package/dist/TreeView.cjs +146 -146
- package/dist/TreeView.css +147 -147
- package/dist/TreeView.mjs +146 -146
- package/dist/main.cjs +5 -0
- package/dist/main.cjs.map +1 -1
- package/dist/module.mjs +3 -1
- package/dist/module.mjs.map +1 -1
- package/dist/types.d.ts +43 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Icon.cjs +10 -10
- package/icons/Icon.css +9 -9
- package/icons/Icon.mjs +10 -10
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.mjs +2 -2
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +21 -21
- package/src/Calendar.tsx +13 -6
- package/src/ComboBox.tsx +20 -5
- package/src/DatePicker.tsx +1 -7
- package/src/DateRangePicker.tsx +1 -7
- package/src/RangeCalendar.tsx +13 -6
- package/src/SelectBoxGroup.tsx +408 -0
- package/src/SkeletonCollection.tsx +6 -2
- package/src/Tabs.tsx +49 -24
- package/src/index.ts +2 -0
- package/style/__tests__/style-macro.test.js +162 -166
- package/style/dist/main.cjs +24 -24
- package/style/dist/module.mjs +13 -13
- package/style/dist/properties.mjs +3 -3
- package/style/dist/spectrum-theme.cjs +219 -219
- package/style/dist/spectrum-theme.mjs +210 -210
- package/style/dist/style-macro.cjs +80 -80
- package/style/dist/style-macro.mjs +75 -75
package/dist/Field.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["/*\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 \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 \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 shouldTurnOffFocusRing?: boolean\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 let {shouldTurnOffFocusRing, ...otherProps} = props;\n return (\n <Group\n ref={ref}\n {...otherProps}\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({\n ...renderProps,\n isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,\n isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,\n size: props.size || 'M'\n }),\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.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.tsx"],"sourcesContent":["/*\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 \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 \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 shouldTurnOffFocusRing?: boolean\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 let {shouldTurnOffFocusRing, ...otherProps} = props;\n return (\n <Group\n ref={ref}\n {...otherProps}\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({\n ...renderProps,\n isFocusWithin: shouldTurnOffFocusRing ? false : renderProps.isFocusWithin,\n isFocusVisible: shouldTurnOffFocusRing ? false : renderProps.isFocusVisible,\n size: props.size || 'M'\n }),\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.mjs.map"}
|
package/dist/Form.cjs
CHANGED
|
@@ -60,15 +60,15 @@ const $bfa4962d90c8af48$export$a7fed597f4b8afd8 = /*#__PURE__*/ (0, $hYK64$react
|
|
|
60
60
|
className: (props.UNSAFE_className || '') + function anonymous(props, overrides) {
|
|
61
61
|
let rules = " ";
|
|
62
62
|
rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g) || []).join('');
|
|
63
|
-
rules += '
|
|
64
|
-
if (props.labelPosition === "side") rules += '
|
|
65
|
-
else if (props.labelPosition === "top") rules += '
|
|
66
|
-
if (props.size === "XL") rules += '
|
|
67
|
-
else if (props.size === "L") rules += '
|
|
68
|
-
else if (props.size === "M") rules += '
|
|
69
|
-
else if (props.size === "S") rules += '
|
|
70
|
-
else if (props.size === "XS") rules += '
|
|
71
|
-
rules += '
|
|
63
|
+
rules += ' se11';
|
|
64
|
+
if (props.labelPosition === "side") rules += ' Dfzkwne11';
|
|
65
|
+
else if (props.labelPosition === "top") rules += ' DS1aTJb11';
|
|
66
|
+
if (props.size === "XL") rules += ' Un11';
|
|
67
|
+
else if (props.size === "L") rules += ' Up11';
|
|
68
|
+
else if (props.size === "M") rules += ' Uj11';
|
|
69
|
+
else if (props.size === "S") rules += ' Ui11';
|
|
70
|
+
else if (props.size === "XS") rules += ' Ul11';
|
|
71
|
+
rules += ' qf11';
|
|
72
72
|
return rules;
|
|
73
73
|
}({
|
|
74
74
|
labelPosition: labelPosition,
|
package/dist/Form.css
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.se11 {
|
|
3
3
|
display: grid;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.
|
|
6
|
+
.DS1aTJb11 {
|
|
7
7
|
grid-template-columns: [field] 1fr;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.Dfzkwne11 {
|
|
11
11
|
grid-template-columns: [label] auto[field] 1fr;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
14
|
+
.Ul11 {
|
|
15
15
|
row-gap: 1rem;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.
|
|
18
|
+
.Ui11 {
|
|
19
19
|
row-gap: 1.25rem;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.
|
|
22
|
+
.Uj11 {
|
|
23
23
|
row-gap: 1.5rem;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
.
|
|
26
|
+
.Up11 {
|
|
27
27
|
row-gap: 2rem;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.
|
|
30
|
+
.Un11 {
|
|
31
31
|
row-gap: 2.5rem;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
34
|
+
.qf11 {
|
|
35
35
|
column-gap: .714286em;
|
|
36
36
|
}
|
|
37
37
|
}
|
package/dist/Form.mjs
CHANGED
|
@@ -52,15 +52,15 @@ const $9b916426527cebe7$export$a7fed597f4b8afd8 = /*#__PURE__*/ (0, $i5kLT$forwa
|
|
|
52
52
|
className: (props.UNSAFE_className || '') + function anonymous(props, overrides) {
|
|
53
53
|
let rules = " ";
|
|
54
54
|
rules += ((overrides || '').match(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g) || []).join('');
|
|
55
|
-
rules += '
|
|
56
|
-
if (props.labelPosition === "side") rules += '
|
|
57
|
-
else if (props.labelPosition === "top") rules += '
|
|
58
|
-
if (props.size === "XL") rules += '
|
|
59
|
-
else if (props.size === "L") rules += '
|
|
60
|
-
else if (props.size === "M") rules += '
|
|
61
|
-
else if (props.size === "S") rules += '
|
|
62
|
-
else if (props.size === "XS") rules += '
|
|
63
|
-
rules += '
|
|
55
|
+
rules += ' se11';
|
|
56
|
+
if (props.labelPosition === "side") rules += ' Dfzkwne11';
|
|
57
|
+
else if (props.labelPosition === "top") rules += ' DS1aTJb11';
|
|
58
|
+
if (props.size === "XL") rules += ' Un11';
|
|
59
|
+
else if (props.size === "L") rules += ' Up11';
|
|
60
|
+
else if (props.size === "M") rules += ' Uj11';
|
|
61
|
+
else if (props.size === "S") rules += ' Ui11';
|
|
62
|
+
else if (props.size === "XS") rules += ' Ul11';
|
|
63
|
+
rules += ' qf11';
|
|
64
64
|
return rules;
|
|
65
65
|
}({
|
|
66
66
|
labelPosition: labelPosition,
|
|
@@ -30,11 +30,11 @@ $parcel$export(module.exports, "FullscreenDialog", () => $59876d274d9473a9$expor
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
const $59876d274d9473a9$var$heading = "
|
|
34
|
-
const $59876d274d9473a9$var$header = "
|
|
35
|
-
const $59876d274d9473a9$var$content = "
|
|
36
|
-
const $59876d274d9473a9$var$buttonGroup = "
|
|
37
|
-
const $59876d274d9473a9$export$6af31f836f9aa6f2 = "
|
|
33
|
+
const $59876d274d9473a9$var$heading = " zPCJngb11 yPCJngb11 BPCJngb11 APCJngb11 _ub11 Jy11 Gy11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-g11 vx11 we11 xe11 _xa11 wX0cczbd11 xX0cczbd11 _xX0cczba11 wezxGHbd11 xezxGHbd11 _xezxGHba11 wfe11 xfe11 _xfa11 wfX0cczbd11 xfX0cczbd11 _xfX0cczba11 wfezxGHbd11 xfezxGHbd11 _xfezxGHba11 _Fd11 _FezxGHba11 _FnuYUweb11 po11";
|
|
34
|
+
const $59876d274d9473a9$var$header = " z6Akec11 y6Akec11 B6Akec11 A6Akec11 InM11 HnM11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-e11 vx11 wb11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11";
|
|
35
|
+
const $59876d274d9473a9$var$content = " zk52g2d11 yk52g2d11 Bk52g2d11 Ak52g2d11 _ub11 Pa11 Pme11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 -_6BNtrc-d11 vx11 wb11 xb11 _xa11 _Fb11 _FnuYUwec11 pt11";
|
|
36
|
+
const $59876d274d9473a9$var$buttonGroup = " z4AkfTc11 y4AkfTc11 B4AkfTc11 A4AkfTc11 IM11 La11";
|
|
37
|
+
const $59876d274d9473a9$export$6af31f836f9aa6f2 = " se11 CQpyMed11 Cns3y4td11 DM8Mfn11 Dn4w1sLc11 EH21CE11 EnFjesNe11 Th11 Tnk11 Qh11 Qnk11 Sh11 Snk11 Rh11 Rnk11 ql11 qnj11 K40ub4c11 Fb11 _oa11 _Le11 uk11 uch11 udi11 uea11 ugb11 uhd11 uje11 u2NhKxcl11 uic11 oi11 ni11 ki11 ji11 _Na11 Pa11";
|
|
38
38
|
const $59876d274d9473a9$export$7082b7e805d2626f = /*#__PURE__*/ (0, $Yi1VH$react.forwardRef)(function FullscreenDialog(props, ref) {
|
|
39
39
|
let { variant: variant = 'fullscreen', isKeyboardDismissDisabled: isKeyboardDismissDisabled } = props;
|
|
40
40
|
let domRef = (0, $Yi1VH$reactspectrumutils.useDOMRef)(ref);
|