@react-spectrum/s2 3.0.0-nightly-1457dedc6-250313 → 3.0.0-nightly-9d471e48d-250314

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.
Files changed (106) hide show
  1. package/dist/ActionBar.cjs.map +1 -1
  2. package/dist/ActionBar.css.map +1 -1
  3. package/dist/ActionBar.mjs.map +1 -1
  4. package/dist/Add.cjs.map +1 -1
  5. package/dist/Add.mjs.map +1 -1
  6. package/dist/Asterisk.cjs.map +1 -1
  7. package/dist/Asterisk.mjs.map +1 -1
  8. package/dist/CenterBaseline.cjs.map +1 -1
  9. package/dist/CenterBaseline.css.map +1 -1
  10. package/dist/CenterBaseline.mjs.map +1 -1
  11. package/dist/Checkmark.cjs.map +1 -1
  12. package/dist/Checkmark.mjs.map +1 -1
  13. package/dist/Chevron.cjs.map +1 -1
  14. package/dist/Chevron.mjs.map +1 -1
  15. package/dist/ColorHandle.cjs.map +1 -1
  16. package/dist/ColorHandle.css.map +1 -1
  17. package/dist/ColorHandle.mjs.map +1 -1
  18. package/dist/ComboBox.cjs.map +1 -1
  19. package/dist/ComboBox.css.map +1 -1
  20. package/dist/ComboBox.mjs.map +1 -1
  21. package/dist/Cross.cjs.map +1 -1
  22. package/dist/Cross.mjs.map +1 -1
  23. package/dist/Dash.cjs.map +1 -1
  24. package/dist/Dash.mjs.map +1 -1
  25. package/dist/DialogContainer.cjs.map +1 -1
  26. package/dist/DialogContainer.mjs.map +1 -1
  27. package/dist/DialogTrigger.cjs.map +1 -1
  28. package/dist/DialogTrigger.mjs.map +1 -1
  29. package/dist/Field.cjs.map +1 -1
  30. package/dist/Field.css.map +1 -1
  31. package/dist/Field.mjs.map +1 -1
  32. package/dist/ImageCoordinator.cjs.map +1 -1
  33. package/dist/ImageCoordinator.mjs.map +1 -1
  34. package/dist/LinkOut.cjs.map +1 -1
  35. package/dist/LinkOut.mjs.map +1 -1
  36. package/dist/Menu.cjs.map +1 -1
  37. package/dist/Menu.css.map +1 -1
  38. package/dist/Menu.mjs.map +1 -1
  39. package/dist/Picker.cjs.map +1 -1
  40. package/dist/Picker.css.map +1 -1
  41. package/dist/Picker.mjs.map +1 -1
  42. package/dist/Provider.cjs.map +1 -1
  43. package/dist/Provider.css.map +1 -1
  44. package/dist/Provider.mjs.map +1 -1
  45. package/dist/Slider.cjs.map +1 -1
  46. package/dist/Slider.css.map +1 -1
  47. package/dist/Slider.mjs.map +1 -1
  48. package/dist/Tabs.cjs +1 -0
  49. package/dist/Tabs.cjs.map +1 -1
  50. package/dist/Tabs.css.map +1 -1
  51. package/dist/Tabs.mjs +1 -0
  52. package/dist/Tabs.mjs.map +1 -1
  53. package/dist/TabsPicker.cjs.map +1 -1
  54. package/dist/TabsPicker.css.map +1 -1
  55. package/dist/TabsPicker.mjs.map +1 -1
  56. package/dist/Tooltip.cjs.map +1 -1
  57. package/dist/Tooltip.css.map +1 -1
  58. package/dist/Tooltip.mjs.map +1 -1
  59. package/dist/TreeView.cjs.map +1 -1
  60. package/dist/TreeView.css.map +1 -1
  61. package/dist/TreeView.mjs.map +1 -1
  62. package/dist/pressScale.cjs.map +1 -1
  63. package/dist/pressScale.mjs.map +1 -1
  64. package/dist/types.d.ts +20 -20
  65. package/dist/types.d.ts.map +1 -1
  66. package/icons/Skeleton.cjs.map +1 -1
  67. package/icons/Skeleton.css.map +1 -1
  68. package/icons/Skeleton.mjs.map +1 -1
  69. package/package.json +18 -18
  70. package/src/ActionBar.tsx +9 -2
  71. package/src/Calendar.tsx +2 -1
  72. package/src/CenterBaseline.tsx +1 -1
  73. package/src/ColorHandle.tsx +2 -2
  74. package/src/ComboBox.tsx +2 -2
  75. package/src/DateField.tsx +1 -1
  76. package/src/DatePicker.tsx +1 -1
  77. package/src/DateRangePicker.tsx +1 -1
  78. package/src/DialogContainer.tsx +2 -2
  79. package/src/DialogTrigger.tsx +2 -1
  80. package/src/Field.tsx +2 -2
  81. package/src/ImageCoordinator.tsx +3 -3
  82. package/src/ListBox.tsx +3 -2
  83. package/src/Menu.tsx +5 -5
  84. package/src/Picker.tsx +2 -2
  85. package/src/Provider.tsx +1 -1
  86. package/src/RangeCalendar.tsx +2 -1
  87. package/src/Skeleton.tsx +4 -4
  88. package/src/Slider.tsx +1 -1
  89. package/src/Tabs.tsx +4 -3
  90. package/src/TabsPicker.tsx +1 -1
  91. package/src/TimeField.tsx +1 -1
  92. package/src/Toolbar.tsx +2 -1
  93. package/src/Tooltip.tsx +2 -2
  94. package/src/TreeView.tsx +2 -2
  95. package/src/page.macro.ts +3 -3
  96. package/src/pressScale.ts +1 -1
  97. package/src/style-utils.ts +2 -2
  98. package/style/dist/spectrum-theme.cjs.map +1 -1
  99. package/style/dist/spectrum-theme.mjs.map +1 -1
  100. package/style/dist/style-macro.cjs.map +1 -1
  101. package/style/dist/style-macro.mjs.map +1 -1
  102. package/style/dist/types.d.ts +4 -4
  103. package/style/dist/types.d.ts.map +1 -1
  104. package/style/spectrum-theme.ts +5 -5
  105. package/style/style-macro.ts +3 -3
  106. package/style/tokens.ts +22 -6
@@ -1 +1 @@
1
- {"mappings":"ACiGoB;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;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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 {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\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 // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
1
+ {"mappings":"ACiGoB;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;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\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 {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\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 // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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 {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\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 // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/ComboBox.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 {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\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 // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps): ReactNode {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAWc,kDAAe,KAA2F;IACvH,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAO;gBAAG,GAAG,UAAU;;QACjC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAQ;gBAAG,GAAG,UAAU;;QAClC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAS;gBAAG,GAAG,UAAU;;QACnC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAU;gBAAG,GAAG,UAAU;;QACpC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;IAClC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Cross.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 Cross_L from './S2_CrossSize200.svg';\nimport Cross_M from './S2_CrossSize100.svg';\nimport Cross_S from './S2_CrossSize75.svg';\nimport Cross_XL from './S2_CrossSize300.svg';\nimport Cross_XXL from './S2_CrossSize400.svg';\nimport Cross_XXXL from './S2_CrossSize500.svg';\nimport Cross_XXXXL from './S2_CrossSize600.svg';\nimport {SVGProps} from 'react';\n\nexport default function Cross(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}) {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Cross_M {...otherProps} />;\n case 'L':\n return <Cross_L {...otherProps} />;\n case 'XL':\n return <Cross_XL {...otherProps} />;\n case 'XXL':\n return <Cross_XXL {...otherProps} />;\n case 'XXXL':\n return <Cross_XXXL {...otherProps} />;\n case 'XXXXL':\n return <Cross_XXXXL {...otherProps} />;\n case 'S':\n return <Cross_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Cross.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAWc,kDAAe,KAA2F;IACvH,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAO;gBAAG,GAAG,UAAU;;QACjC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAQ;gBAAG,GAAG,UAAU;;QAClC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAS;gBAAG,GAAG,UAAU;;QACnC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAU;gBAAG,GAAG,UAAU;;QACpC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;IAClC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Cross.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 Cross_L from './S2_CrossSize200.svg';\nimport Cross_M from './S2_CrossSize100.svg';\nimport Cross_S from './S2_CrossSize75.svg';\nimport Cross_XL from './S2_CrossSize300.svg';\nimport Cross_XXL from './S2_CrossSize400.svg';\nimport Cross_XXXL from './S2_CrossSize500.svg';\nimport Cross_XXXXL from './S2_CrossSize600.svg';\nimport {ReactNode, SVGProps} from 'react';\n\nexport default function Cross(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}): ReactNode {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Cross_M {...otherProps} />;\n case 'L':\n return <Cross_L {...otherProps} />;\n case 'XL':\n return <Cross_XL {...otherProps} />;\n case 'XXL':\n return <Cross_XXL {...otherProps} />;\n case 'XXXL':\n return <Cross_XXXL {...otherProps} />;\n case 'XXXXL':\n return <Cross_XXXXL {...otherProps} />;\n case 'S':\n return <Cross_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Cross.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAWc,kDAAe,KAA2F;IACvH,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAO;gBAAG,GAAG,UAAU;;QACjC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAQ;gBAAG,GAAG,UAAU;;QAClC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAS;gBAAG,GAAG,UAAU;;QACnC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAU;gBAAG,GAAG,UAAU;;QACpC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;IAClC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Cross.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 Cross_L from './S2_CrossSize200.svg';\nimport Cross_M from './S2_CrossSize100.svg';\nimport Cross_S from './S2_CrossSize75.svg';\nimport Cross_XL from './S2_CrossSize300.svg';\nimport Cross_XXL from './S2_CrossSize400.svg';\nimport Cross_XXXL from './S2_CrossSize500.svg';\nimport Cross_XXXXL from './S2_CrossSize600.svg';\nimport {SVGProps} from 'react';\n\nexport default function Cross(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}) {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Cross_M {...otherProps} />;\n case 'L':\n return <Cross_L {...otherProps} />;\n case 'XL':\n return <Cross_XL {...otherProps} />;\n case 'XXL':\n return <Cross_XXL {...otherProps} />;\n case 'XXXL':\n return <Cross_XXXL {...otherProps} />;\n case 'XXXXL':\n return <Cross_XXXXL {...otherProps} />;\n case 'S':\n return <Cross_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Cross.mjs.map"}
1
+ {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAWc,kDAAe,KAA2F;IACvH,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAO;gBAAG,GAAG,UAAU;;QACjC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAQ;gBAAG,GAAG,UAAU;;QAClC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAS;gBAAG,GAAG,UAAU;;QACnC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAU;gBAAG,GAAG,UAAU;;QACpC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;IAClC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Cross.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 Cross_L from './S2_CrossSize200.svg';\nimport Cross_M from './S2_CrossSize100.svg';\nimport Cross_S from './S2_CrossSize75.svg';\nimport Cross_XL from './S2_CrossSize300.svg';\nimport Cross_XXL from './S2_CrossSize400.svg';\nimport Cross_XXXL from './S2_CrossSize500.svg';\nimport Cross_XXXXL from './S2_CrossSize600.svg';\nimport {ReactNode, SVGProps} from 'react';\n\nexport default function Cross(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XXL' | 'XXXL' | 'XXXXL' | 'S'}): ReactNode {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Cross_M {...otherProps} />;\n case 'L':\n return <Cross_L {...otherProps} />;\n case 'XL':\n return <Cross_XL {...otherProps} />;\n case 'XXL':\n return <Cross_XXL {...otherProps} />;\n case 'XXXL':\n return <Cross_XXXL {...otherProps} />;\n case 'XXXXL':\n return <Cross_XXXXL {...otherProps} />;\n case 'S':\n return <Cross_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Cross.mjs.map"}
package/dist/Dash.cjs.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AASc,kDAAc,KAAuE;IAClG,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAK;gBAAG,GAAG,UAAU;;IACjC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Dash.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 Dash_L from './S2_DashSize200.svg';\nimport Dash_M from './S2_DashSize100.svg';\nimport Dash_S from './S2_DashSize75.svg';\nimport Dash_XL from './S2_DashSize300.svg';\nimport Dash_XS from './S2_DashSize50.svg';\nimport {SVGProps} from 'react';\n\nexport default function Dash(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XS' | 'S'}) {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Dash_M {...otherProps} />;\n case 'L':\n return <Dash_L {...otherProps} />;\n case 'XL':\n return <Dash_XL {...otherProps} />;\n case 'XS':\n return <Dash_XS {...otherProps} />;\n case 'S':\n return <Dash_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Dash.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AASc,kDAAc,KAAuE;IAClG,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gCAAC,CAAA,GAAA,iCAAK;gBAAG,GAAG,UAAU;;IACjC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Dash.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 Dash_L from './S2_DashSize200.svg';\nimport Dash_M from './S2_DashSize100.svg';\nimport Dash_S from './S2_DashSize75.svg';\nimport Dash_XL from './S2_DashSize300.svg';\nimport Dash_XS from './S2_DashSize50.svg';\nimport {ReactNode, SVGProps} from 'react';\n\nexport default function Dash(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XS' | 'S'}): ReactNode {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Dash_M {...otherProps} />;\n case 'L':\n return <Dash_L {...otherProps} />;\n case 'XL':\n return <Dash_XL {...otherProps} />;\n case 'XS':\n return <Dash_XS {...otherProps} />;\n case 'S':\n return <Dash_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Dash.cjs.map"}
package/dist/Dash.mjs.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AASc,kDAAc,KAAuE;IAClG,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAK;gBAAG,GAAG,UAAU;;IACjC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Dash.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 Dash_L from './S2_DashSize200.svg';\nimport Dash_M from './S2_DashSize100.svg';\nimport Dash_S from './S2_DashSize75.svg';\nimport Dash_XL from './S2_DashSize300.svg';\nimport Dash_XS from './S2_DashSize50.svg';\nimport {SVGProps} from 'react';\n\nexport default function Dash(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XS' | 'S'}) {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Dash_M {...otherProps} />;\n case 'L':\n return <Dash_L {...otherProps} />;\n case 'XL':\n return <Dash_XL {...otherProps} />;\n case 'XS':\n return <Dash_XS {...otherProps} />;\n case 'S':\n return <Dash_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Dash.mjs.map"}
1
+ {"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AASc,kDAAc,KAAuE;IAClG,IAAI,QAAC,OAAO,KAAK,GAAG,YAAW,GAAG;IAClC,OAAQ;QACN,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAK;gBAAG,GAAG,UAAU;;QAC/B,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAM;gBAAG,GAAG,UAAU;;QAChC,KAAK;YACH,qBAAO,gBAAC,CAAA,GAAA,wCAAK;gBAAG,GAAG,UAAU;;IACjC;AACF","sources":["packages/@react-spectrum/s2/ui-icons/Dash.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 Dash_L from './S2_DashSize200.svg';\nimport Dash_M from './S2_DashSize100.svg';\nimport Dash_S from './S2_DashSize75.svg';\nimport Dash_XL from './S2_DashSize300.svg';\nimport Dash_XS from './S2_DashSize50.svg';\nimport {ReactNode, SVGProps} from 'react';\n\nexport default function Dash(props: SVGProps<SVGSVGElement> & {size?: 'M' | 'L' | 'XL' | 'XS' | 'S'}): ReactNode {\n let {size = 'M', ...otherProps} = props;\n switch (size) {\n case 'M':\n return <Dash_M {...otherProps} />;\n case 'L':\n return <Dash_L {...otherProps} />;\n case 'XL':\n return <Dash_XL {...otherProps} />;\n case 'XS':\n return <Dash_XS {...otherProps} />;\n case 'S':\n return <Dash_S {...otherProps} />;\n }\n}\n"],"names":[],"version":3,"file":"Dash.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAaM,SAAS,0CAAgB,KAA2B;IACzD,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACxC,IAAI,WAAW,MAAM,GAAG,GACtB,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAuB;IAE9D,6EAA6E;IAC7E,0DAA0D;IAC1D,IAAI,QAAkC;IACtC,IAAI,MAAM,OAAO,CAAC,WAChB,QAAQ,SAAS,IAAI,CAAC,CAAA,GAAA,sCAAI,EAAE,cAAc;SACrC,kBAAI,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC,WAC9B,QAAQ;IAGV,IAAI,SAAS,UAAU,WACrB,aAAa;IAGf,IAAI,eAAe,CAAC;QAClB,IAAI,CAAC,QACH;IAEJ;IAEA,qBACE,gCAAC,CAAA,GAAA,uCAAW,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ,CAAC,CAAC;0BAAO;QAAY;kBACzD;;AAGP;AASO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,uCAAW;IAC3C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,OAAO;QACL;YACE,SAAS,eAAe;QAC1B;IACF;AACF","sources":["packages/@react-spectrum/s2/src/DialogContainer.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 {ModalContext, useSlottedContext} from 'react-aria-components';\nimport React, {ReactElement, useState} from 'react';\nimport {SpectrumDialogContainerProps} from '@react-types/dialog';\n\nexport interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding\n * it in a modal. Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: DialogContainerProps) {\n let {\n children,\n onDismiss\n } = props;\n\n let childArray = React.Children.toArray(children);\n if (childArray.length > 1) {\n throw new Error('Only a single child can be passed to DialogContainer.');\n }\n\n let [lastChild, setLastChild] = useState<ReactElement | null>(null);\n\n // React.Children.toArray mutates the children, and we need them to be stable\n // between renders so that the lastChild comparison works.\n let child: ReactElement | undefined = undefined;\n if (Array.isArray(children)) {\n child = children.find(React.isValidElement);\n } else if (React.isValidElement(children)) {\n child = children;\n }\n\n if (child && child !== lastChild) {\n setLastChild(child);\n }\n\n let onOpenChange = (isOpen: boolean) => {\n if (!isOpen) {\n onDismiss();\n }\n };\n\n return (\n <ModalContext.Provider value={{isOpen: !!child, onOpenChange}}>\n {lastChild}\n </ModalContext.Provider>\n );\n}\n\nexport interface DialogContainerValue {\n /**\n * A handler to programmatically dismiss the dialog.\n */\n dismiss(): void\n}\n\nexport function useDialogContainer(): DialogContainerValue {\n let context = useSlottedContext(ModalContext);\n if (!context) {\n throw new Error('Cannot call useDialogContext outside a <DialogTrigger> or <DialogContainer>.');\n }\n\n return {\n dismiss() {\n context?.onOpenChange?.(false);\n }\n };\n}\n"],"names":[],"version":3,"file":"DialogContainer.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAaM,SAAS,0CAAgB,KAA2B;IACzD,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACxC,IAAI,WAAW,MAAM,GAAG,GACtB,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,qBAAO,EAAuB;IAE9D,6EAA6E;IAC7E,0DAA0D;IAC1D,IAAI,QAAkC;IACtC,IAAI,MAAM,OAAO,CAAC,WAChB,QAAQ,SAAS,IAAI,CAAC,CAAA,GAAA,sCAAI,EAAE,cAAc;SACrC,kBAAI,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC,WAC9B,QAAQ;IAGV,IAAI,SAAS,UAAU,WACrB,aAAa;IAGf,IAAI,eAAe,CAAC;QAClB,IAAI,CAAC,QACH;IAEJ;IAEA,qBACE,gCAAC,CAAA,GAAA,uCAAW,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ,CAAC,CAAC;0BAAO;QAAY;kBACzD;;AAGP;AASO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,uCAAW;IAC3C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,OAAO;QACL;YACE,SAAS,eAAe;QAC1B;IACF;AACF","sources":["packages/@react-spectrum/s2/src/DialogContainer.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 {ModalContext, useSlottedContext} from 'react-aria-components';\nimport React, {ReactElement, ReactNode, useState} from 'react';\nimport {SpectrumDialogContainerProps} from '@react-types/dialog';\n\nexport interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding\n * it in a modal. Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: DialogContainerProps): ReactNode {\n let {\n children,\n onDismiss\n } = props;\n\n let childArray = React.Children.toArray(children);\n if (childArray.length > 1) {\n throw new Error('Only a single child can be passed to DialogContainer.');\n }\n\n let [lastChild, setLastChild] = useState<ReactElement | null>(null);\n\n // React.Children.toArray mutates the children, and we need them to be stable\n // between renders so that the lastChild comparison works.\n let child: ReactElement | undefined = undefined;\n if (Array.isArray(children)) {\n child = children.find(React.isValidElement);\n } else if (React.isValidElement(children)) {\n child = children;\n }\n\n if (child && child !== lastChild) {\n setLastChild(child);\n }\n\n let onOpenChange = (isOpen: boolean) => {\n if (!isOpen) {\n onDismiss();\n }\n };\n\n return (\n <ModalContext.Provider value={{isOpen: !!child, onOpenChange}}>\n {lastChild}\n </ModalContext.Provider>\n );\n}\n\nexport interface DialogContainerValue {\n /**\n * A handler to programmatically dismiss the dialog.\n */\n dismiss(): void\n}\n\nexport function useDialogContainer(): DialogContainerValue {\n let context = useSlottedContext(ModalContext);\n if (!context) {\n throw new Error('Cannot call useDialogContext outside a <DialogTrigger> or <DialogContainer>.');\n }\n\n return {\n dismiss() {\n context?.onOpenChange?.(false);\n }\n };\n}\n"],"names":[],"version":3,"file":"DialogContainer.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAaM,SAAS,0CAAgB,KAA2B;IACzD,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACxC,IAAI,WAAW,MAAM,GAAG,GACtB,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,eAAO,EAAuB;IAE9D,6EAA6E;IAC7E,0DAA0D;IAC1D,IAAI,QAAkC;IACtC,IAAI,MAAM,OAAO,CAAC,WAChB,QAAQ,SAAS,IAAI,CAAC,CAAA,GAAA,YAAI,EAAE,cAAc;SACrC,kBAAI,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC,WAC9B,QAAQ;IAGV,IAAI,SAAS,UAAU,WACrB,aAAa;IAGf,IAAI,eAAe,CAAC;QAClB,IAAI,CAAC,QACH;IAEJ;IAEA,qBACE,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ,CAAC,CAAC;0BAAO;QAAY;kBACzD;;AAGP;AASO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,mBAAW;IAC3C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,OAAO;QACL;YACE,SAAS,eAAe;QAC1B;IACF;AACF","sources":["packages/@react-spectrum/s2/src/DialogContainer.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 {ModalContext, useSlottedContext} from 'react-aria-components';\nimport React, {ReactElement, useState} from 'react';\nimport {SpectrumDialogContainerProps} from '@react-types/dialog';\n\nexport interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding\n * it in a modal. Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: DialogContainerProps) {\n let {\n children,\n onDismiss\n } = props;\n\n let childArray = React.Children.toArray(children);\n if (childArray.length > 1) {\n throw new Error('Only a single child can be passed to DialogContainer.');\n }\n\n let [lastChild, setLastChild] = useState<ReactElement | null>(null);\n\n // React.Children.toArray mutates the children, and we need them to be stable\n // between renders so that the lastChild comparison works.\n let child: ReactElement | undefined = undefined;\n if (Array.isArray(children)) {\n child = children.find(React.isValidElement);\n } else if (React.isValidElement(children)) {\n child = children;\n }\n\n if (child && child !== lastChild) {\n setLastChild(child);\n }\n\n let onOpenChange = (isOpen: boolean) => {\n if (!isOpen) {\n onDismiss();\n }\n };\n\n return (\n <ModalContext.Provider value={{isOpen: !!child, onOpenChange}}>\n {lastChild}\n </ModalContext.Provider>\n );\n}\n\nexport interface DialogContainerValue {\n /**\n * A handler to programmatically dismiss the dialog.\n */\n dismiss(): void\n}\n\nexport function useDialogContainer(): DialogContainerValue {\n let context = useSlottedContext(ModalContext);\n if (!context) {\n throw new Error('Cannot call useDialogContext outside a <DialogTrigger> or <DialogContainer>.');\n }\n\n return {\n dismiss() {\n context?.onOpenChange?.(false);\n }\n };\n}\n"],"names":[],"version":3,"file":"DialogContainer.mjs.map"}
1
+ {"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAaM,SAAS,0CAAgB,KAA2B;IACzD,IAAI,YACF,QAAQ,aACR,SAAS,EACV,GAAG;IAEJ,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC;IACxC,IAAI,WAAW,MAAM,GAAG,GACtB,MAAM,IAAI,MAAM;IAGlB,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,eAAO,EAAuB;IAE9D,6EAA6E;IAC7E,0DAA0D;IAC1D,IAAI,QAAkC;IACtC,IAAI,MAAM,OAAO,CAAC,WAChB,QAAQ,SAAS,IAAI,CAAC,CAAA,GAAA,YAAI,EAAE,cAAc;SACrC,kBAAI,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC,WAC9B,QAAQ;IAGV,IAAI,SAAS,UAAU,WACrB,aAAa;IAGf,IAAI,eAAe,CAAC;QAClB,IAAI,CAAC,QACH;IAEJ;IAEA,qBACE,gBAAC,CAAA,GAAA,mBAAW,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ,CAAC,CAAC;0BAAO;QAAY;kBACzD;;AAGP;AASO,SAAS;IACd,IAAI,UAAU,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,mBAAW;IAC3C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM;IAGlB,OAAO;QACL;YACE,SAAS,eAAe;QAC1B;IACF;AACF","sources":["packages/@react-spectrum/s2/src/DialogContainer.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 {ModalContext, useSlottedContext} from 'react-aria-components';\nimport React, {ReactElement, ReactNode, useState} from 'react';\nimport {SpectrumDialogContainerProps} from '@react-types/dialog';\n\nexport interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages showing and hiding\n * it in a modal. Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: DialogContainerProps): ReactNode {\n let {\n children,\n onDismiss\n } = props;\n\n let childArray = React.Children.toArray(children);\n if (childArray.length > 1) {\n throw new Error('Only a single child can be passed to DialogContainer.');\n }\n\n let [lastChild, setLastChild] = useState<ReactElement | null>(null);\n\n // React.Children.toArray mutates the children, and we need them to be stable\n // between renders so that the lastChild comparison works.\n let child: ReactElement | undefined = undefined;\n if (Array.isArray(children)) {\n child = children.find(React.isValidElement);\n } else if (React.isValidElement(children)) {\n child = children;\n }\n\n if (child && child !== lastChild) {\n setLastChild(child);\n }\n\n let onOpenChange = (isOpen: boolean) => {\n if (!isOpen) {\n onDismiss();\n }\n };\n\n return (\n <ModalContext.Provider value={{isOpen: !!child, onOpenChange}}>\n {lastChild}\n </ModalContext.Provider>\n );\n}\n\nexport interface DialogContainerValue {\n /**\n * A handler to programmatically dismiss the dialog.\n */\n dismiss(): void\n}\n\nexport function useDialogContainer(): DialogContainerValue {\n let context = useSlottedContext(ModalContext);\n if (!context) {\n throw new Error('Cannot call useDialogContext outside a <DialogTrigger> or <DialogContainer>.');\n }\n\n return {\n dismiss() {\n context?.onOpenChange?.(false);\n }\n };\n}\n"],"names":[],"version":3,"file":"DialogContainer.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAYM,SAAS,0CAAc,KAAyB;IACrD,qBACE,gCAAC,CAAA,GAAA,wCAAgB;QAAG,GAAG,KAAK;kBAG1B,cAAA,gCAAC,CAAA,GAAA,2CAAa;YAAE,WAAW;sBACxB,MAAM,QAAQ;;;AAIvB","sources":["packages/@react-spectrum/s2/src/DialogTrigger.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 {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';\nimport {PressResponder} from '@react-aria/interactions';\n\nexport interface DialogTriggerProps extends AriaDialogTriggerProps {}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n return (\n <AriaDialogTrigger {...props}>\n {/* RAC sets isPressed via PressResponder when the dialog is open.\n We don't want press scaling to appear to get \"stuck\", so override this. */}\n <PressResponder isPressed={false}>\n {props.children}\n </PressResponder>\n </AriaDialogTrigger>\n );\n}\n"],"names":[],"version":3,"file":"DialogTrigger.cjs.map"}
1
+ {"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAaM,SAAS,0CAAc,KAAyB;IACrD,qBACE,gCAAC,CAAA,GAAA,wCAAgB;QAAG,GAAG,KAAK;kBAG1B,cAAA,gCAAC,CAAA,GAAA,2CAAa;YAAE,WAAW;sBACxB,MAAM,QAAQ;;;AAIvB","sources":["packages/@react-spectrum/s2/src/DialogTrigger.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 {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';\nimport {PressResponder} from '@react-aria/interactions';\nimport {ReactNode} from 'react';\n\nexport interface DialogTriggerProps extends AriaDialogTriggerProps {}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps): ReactNode {\n return (\n <AriaDialogTrigger {...props}>\n {/* RAC sets isPressed via PressResponder when the dialog is open.\n We don't want press scaling to appear to get \"stuck\", so override this. */}\n <PressResponder isPressed={false}>\n {props.children}\n </PressResponder>\n </AriaDialogTrigger>\n );\n}\n"],"names":[],"version":3,"file":"DialogTrigger.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAYM,SAAS,0CAAc,KAAyB;IACrD,qBACE,gBAAC,CAAA,GAAA,oBAAgB;QAAG,GAAG,KAAK;kBAG1B,cAAA,gBAAC,CAAA,GAAA,qBAAa;YAAE,WAAW;sBACxB,MAAM,QAAQ;;;AAIvB","sources":["packages/@react-spectrum/s2/src/DialogTrigger.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 {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';\nimport {PressResponder} from '@react-aria/interactions';\n\nexport interface DialogTriggerProps extends AriaDialogTriggerProps {}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n return (\n <AriaDialogTrigger {...props}>\n {/* RAC sets isPressed via PressResponder when the dialog is open.\n We don't want press scaling to appear to get \"stuck\", so override this. */}\n <PressResponder isPressed={false}>\n {props.children}\n </PressResponder>\n </AriaDialogTrigger>\n );\n}\n"],"names":[],"version":3,"file":"DialogTrigger.mjs.map"}
1
+ {"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAaM,SAAS,0CAAc,KAAyB;IACrD,qBACE,gBAAC,CAAA,GAAA,oBAAgB;QAAG,GAAG,KAAK;kBAG1B,cAAA,gBAAC,CAAA,GAAA,qBAAa;YAAE,WAAW;sBACxB,MAAM,QAAQ;;;AAIvB","sources":["packages/@react-spectrum/s2/src/DialogTrigger.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 {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';\nimport {PressResponder} from '@react-aria/interactions';\nimport {ReactNode} from 'react';\n\nexport interface DialogTriggerProps extends AriaDialogTriggerProps {}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps): ReactNode {\n return (\n <AriaDialogTrigger {...props}>\n {/* RAC sets isPressed via PressResponder when the dialog is open.\n We don't want press scaling to appear to get \"stuck\", so override this. */}\n <PressResponder isPressed={false}>\n {props.children}\n </PressResponder>\n </AriaDialogTrigger>\n );\n}\n"],"names":[],"version":3,"file":"DialogTrigger.mjs.map"}
@@ -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 {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 ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: '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: '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\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\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>}) {\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}) {\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.cjs.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 {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 ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: '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: '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\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\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.cjs.map"}
@@ -1 +1 @@
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;;;;EAwEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BzB;;;;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;;;;EA8DH;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PD;EAoLM;;;;EAAA;;;;;AA3J2B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2J3B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEL;;;;;;AApOgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IAAA;;;;IAgKL;;;;;;AAhKK;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 {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 ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: '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: '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\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\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>}) {\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}) {\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"}
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;;;;EAwEuB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0BzB;;;;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;;;;EA8DH;;;;EAAA;;;;EAWF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PD;EAoLM;;;;EAAA;;;;;AA3J2B;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA2J3B;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAyEL;;;;;;AApOgC;EAAA;IAAA;;;;IAyDzB;;;;IAAA;;;;IAAA;;;;IAgKL;;;;;;AAhKK;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 {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 ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: '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: '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\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\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"}
@@ -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 {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 ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: '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: '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\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\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>}) {\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}) {\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 {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 ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: '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: '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\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\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 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/ImageCoordinator.tsx"],"sourcesContent":["import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';\n\nexport interface ImageCoordinatorProps {\n /** Children within the ImageCoordinator. */\n children: ReactNode,\n /**\n * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.\n * @default 5000\n */\n timeout?: number,\n /**\n * A group of images to coordinate between, matching the group passed to the `<Image>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\ninterface ImageGroupValue {\n revealAll: boolean,\n register(url: string): void,\n unregister(url: string): void,\n load(url: string): void\n}\n\nconst defaultContext: ImageGroupValue = {\n revealAll: true,\n register() {},\n unregister() {},\n load() {}\n};\n\nexport const DefaultImageGroup = createImageGroup();\n\nexport function createImageGroup(): ImageGroup {\n return createContext(defaultContext);\n}\n\ninterface State {\n loadedAll: boolean,\n timedOut: boolean,\n loadStartTime: number,\n loaded: Map<string, boolean>\n}\n\ntype Action = \n | {type: 'register', url: string}\n | {type: 'unregister', url: string}\n | {type: 'load', url: string}\n | {type: 'timeout'};\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'register': {\n if (state.loaded.get(action.url) !== false) {\n let loaded = new Map(state.loaded);\n loaded.set(action.url, false);\n return {\n loadedAll: false,\n // If we had previously loaded all items, then reset the timed out state\n // since this is the first item of a new batch.\n timedOut: state.loadedAll ? false : state.timedOut,\n loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,\n loaded\n };\n }\n return state;\n }\n case 'unregister': {\n if (state.loaded.has(action.url)) {\n let loaded = new Map(state.loaded);\n loaded.delete(action.url);\n return {\n loadedAll: isAllLoaded(loaded),\n timedOut: state.timedOut,\n loadStartTime: state.loadStartTime,\n loaded\n };\n }\n return state;\n }\n case 'load': {\n if (state.loaded.get(action.url) === false) {\n let loaded = new Map(state.loaded);\n loaded.set(action.url, true);\n return {\n loadedAll: isAllLoaded(loaded),\n timedOut: state.timedOut,\n loadStartTime: state.loadStartTime,\n loaded\n };\n }\n return state;\n }\n case 'timeout': {\n if (!state.loadedAll && !state.timedOut) {\n return {\n ...state,\n timedOut: true\n };\n }\n return state;\n }\n default:\n return state;\n }\n}\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n for (let isLoaded of loaded.values()) {\n if (!isLoaded) {\n return false;\n }\n }\n return true;\n}\n\n/**\n * An ImageCoordinator coordinates loading behavior for a group of images.\n * Images within an ImageCoordinator are revealed together once all of them have loaded.\n */\nexport function ImageCoordinator(props: ImageCoordinatorProps) {\n // If we are already inside another ImageCoordinator, just pass\n // through children and coordinate loading at the root.\n let ctx = useContext(props.group || DefaultImageGroup);\n if (ctx !== defaultContext) {\n return props.children;\n }\n\n return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps) {\n let {children, timeout = 5000, group = DefaultImageGroup} = props;\n let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {\n loadedAll: true,\n timedOut: false,\n loadStartTime: 0,\n loaded: new Map()\n });\n \n let register = useCallback((url: string) => dispatch({type: 'register', url}), []);\n let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);\n let load = useCallback((url: string) => dispatch({type: 'load', url}), []);\n\n useEffect(() => {\n if (!loadedAll) {\n let timeoutId = setTimeout(() => {\n dispatch({type: 'timeout'});\n }, loadStartTime + timeout - Date.now());\n\n return () => clearTimeout(timeoutId);\n }\n }, [loadStartTime, loadedAll, timeout]);\n\n let revealAll = loadedAll || timedOut;\n return useMemo(() => (\n <group.Provider value={{revealAll, register, unregister, load}}>\n {children}\n </group.Provider>\n ), [group, children, revealAll, register, unregister, load]);\n}\n"],"names":[],"version":3,"file":"ImageCoordinator.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/ImageCoordinator.tsx"],"sourcesContent":["import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';\n\nexport interface ImageCoordinatorProps {\n /** Children within the ImageCoordinator. */\n children: ReactNode,\n /**\n * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.\n * @default 5000\n */\n timeout?: number,\n /**\n * A group of images to coordinate between, matching the group passed to the `<Image>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\ninterface ImageGroupValue {\n revealAll: boolean,\n register(url: string): void,\n unregister(url: string): void,\n load(url: string): void\n}\n\nconst defaultContext: ImageGroupValue = {\n revealAll: true,\n register() {},\n unregister() {},\n load() {}\n};\n\nexport const DefaultImageGroup = createImageGroup();\n\nexport function createImageGroup(): ImageGroup {\n return createContext(defaultContext);\n}\n\ninterface State {\n loadedAll: boolean,\n timedOut: boolean,\n loadStartTime: number,\n loaded: Map<string, boolean>\n}\n\ntype Action =\n | {type: 'register', url: string}\n | {type: 'unregister', url: string}\n | {type: 'load', url: string}\n | {type: 'timeout'};\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'register': {\n if (state.loaded.get(action.url) !== false) {\n let loaded = new Map(state.loaded);\n loaded.set(action.url, false);\n return {\n loadedAll: false,\n // If we had previously loaded all items, then reset the timed out state\n // since this is the first item of a new batch.\n timedOut: state.loadedAll ? false : state.timedOut,\n loadStartTime: state.loadedAll ? Date.now() : state.loadStartTime,\n loaded\n };\n }\n return state;\n }\n case 'unregister': {\n if (state.loaded.has(action.url)) {\n let loaded = new Map(state.loaded);\n loaded.delete(action.url);\n return {\n loadedAll: isAllLoaded(loaded),\n timedOut: state.timedOut,\n loadStartTime: state.loadStartTime,\n loaded\n };\n }\n return state;\n }\n case 'load': {\n if (state.loaded.get(action.url) === false) {\n let loaded = new Map(state.loaded);\n loaded.set(action.url, true);\n return {\n loadedAll: isAllLoaded(loaded),\n timedOut: state.timedOut,\n loadStartTime: state.loadStartTime,\n loaded\n };\n }\n return state;\n }\n case 'timeout': {\n if (!state.loadedAll && !state.timedOut) {\n return {\n ...state,\n timedOut: true\n };\n }\n return state;\n }\n default:\n return state;\n }\n}\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n for (let isLoaded of loaded.values()) {\n if (!isLoaded) {\n return false;\n }\n }\n return true;\n}\n\n/**\n * An ImageCoordinator coordinates loading behavior for a group of images.\n * Images within an ImageCoordinator are revealed together once all of them have loaded.\n */\nexport function ImageCoordinator(props: ImageCoordinatorProps): ReactNode {\n // If we are already inside another ImageCoordinator, just pass\n // through children and coordinate loading at the root.\n let ctx = useContext(props.group || DefaultImageGroup);\n if (ctx !== defaultContext) {\n return props.children;\n }\n\n return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps) {\n let {children, timeout = 5000, group = DefaultImageGroup} = props;\n let [{loadedAll, timedOut, loadStartTime}, dispatch] = useReducer(reducer, {\n loadedAll: true,\n timedOut: false,\n loadStartTime: 0,\n loaded: new Map()\n });\n\n let register = useCallback((url: string) => dispatch({type: 'register', url}), []);\n let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);\n let load = useCallback((url: string) => dispatch({type: 'load', url}), []);\n\n useEffect(() => {\n if (!loadedAll) {\n let timeoutId = setTimeout(() => {\n dispatch({type: 'timeout'});\n }, loadStartTime + timeout - Date.now());\n\n return () => clearTimeout(timeoutId);\n }\n }, [loadStartTime, loadedAll, timeout]);\n\n let revealAll = loadedAll || timedOut;\n return useMemo(() => (\n <group.Provider value={{revealAll, register, unregister, load}}>\n {children}\n </group.Provider>\n ), [group, children, revealAll, register, unregister, load]);\n}\n"],"names":[],"version":3,"file":"ImageCoordinator.cjs.map"}