@react-spectrum/s2 3.0.0-nightly-c53ab48ec-250115 → 3.0.0-nightly-1286a652e-250116

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 (157) hide show
  1. package/dist/Accordion.css +1 -5
  2. package/dist/Accordion.css.map +1 -1
  3. package/dist/ActionBar.css +0 -6
  4. package/dist/ActionBar.css.map +1 -1
  5. package/dist/ActionButton.css +0 -6
  6. package/dist/ActionButton.css.map +1 -1
  7. package/dist/ActionButtonGroup.css +1 -5
  8. package/dist/ActionButtonGroup.css.map +1 -1
  9. package/dist/AlertDialog.css +1 -5
  10. package/dist/AlertDialog.css.map +1 -1
  11. package/dist/Avatar.css +1 -5
  12. package/dist/Avatar.css.map +1 -1
  13. package/dist/AvatarGroup.css +0 -6
  14. package/dist/AvatarGroup.css.map +1 -1
  15. package/dist/Badge.css +0 -6
  16. package/dist/Badge.css.map +1 -1
  17. package/dist/Breadcrumbs.cjs +2 -2
  18. package/dist/Breadcrumbs.cjs.map +1 -1
  19. package/dist/Breadcrumbs.css +0 -6
  20. package/dist/Breadcrumbs.css.map +1 -1
  21. package/dist/Breadcrumbs.mjs +2 -2
  22. package/dist/Breadcrumbs.mjs.map +1 -1
  23. package/dist/Button.css +0 -6
  24. package/dist/Button.css.map +1 -1
  25. package/dist/ButtonGroup.css +1 -5
  26. package/dist/ButtonGroup.css.map +1 -1
  27. package/dist/Card.cjs +1 -1
  28. package/dist/Card.cjs.map +1 -1
  29. package/dist/Card.css +0 -6
  30. package/dist/Card.css.map +1 -1
  31. package/dist/Card.mjs +2 -2
  32. package/dist/Card.mjs.map +1 -1
  33. package/dist/CardView.css +1 -5
  34. package/dist/CardView.css.map +1 -1
  35. package/dist/CenterBaseline.css +1 -5
  36. package/dist/CenterBaseline.css.map +1 -1
  37. package/dist/Checkbox.css +0 -6
  38. package/dist/Checkbox.css.map +1 -1
  39. package/dist/CheckboxGroup.css +0 -6
  40. package/dist/CheckboxGroup.css.map +1 -1
  41. package/dist/ClearButton.css +1 -5
  42. package/dist/ClearButton.css.map +1 -1
  43. package/dist/CloseButton.css +1 -5
  44. package/dist/CloseButton.css.map +1 -1
  45. package/dist/ColorArea.css +1 -5
  46. package/dist/ColorArea.css.map +1 -1
  47. package/dist/ColorField.css +0 -6
  48. package/dist/ColorField.css.map +1 -1
  49. package/dist/ColorHandle.css +1 -5
  50. package/dist/ColorHandle.css.map +1 -1
  51. package/dist/ColorSlider.css +0 -6
  52. package/dist/ColorSlider.css.map +1 -1
  53. package/dist/ColorSwatch.css +1 -5
  54. package/dist/ColorSwatch.css.map +1 -1
  55. package/dist/ColorSwatchPicker.css +1 -5
  56. package/dist/ColorSwatchPicker.css.map +1 -1
  57. package/dist/ColorWheel.css +1 -5
  58. package/dist/ColorWheel.css.map +1 -1
  59. package/dist/ComboBox.css +0 -6
  60. package/dist/ComboBox.css.map +1 -1
  61. package/dist/Content.cjs +3 -1
  62. package/dist/Content.cjs.map +1 -1
  63. package/dist/Content.mjs +3 -1
  64. package/dist/Content.mjs.map +1 -1
  65. package/dist/ContextualHelp.css +0 -6
  66. package/dist/ContextualHelp.css.map +1 -1
  67. package/dist/CustomDialog.css +1 -5
  68. package/dist/CustomDialog.css.map +1 -1
  69. package/dist/Dialog.css +0 -6
  70. package/dist/Dialog.css.map +1 -1
  71. package/dist/Disclosure.css +0 -6
  72. package/dist/Disclosure.css.map +1 -1
  73. package/dist/Divider.css +1 -5
  74. package/dist/Divider.css.map +1 -1
  75. package/dist/DropZone.css +0 -6
  76. package/dist/DropZone.css.map +1 -1
  77. package/dist/Field.css +0 -6
  78. package/dist/Field.css.map +1 -1
  79. package/dist/Form.css +1 -5
  80. package/dist/Form.css.map +1 -1
  81. package/dist/FullscreenDialog.css +0 -6
  82. package/dist/FullscreenDialog.css.map +1 -1
  83. package/dist/IllustratedMessage.css +0 -6
  84. package/dist/IllustratedMessage.css.map +1 -1
  85. package/dist/Image.css +1 -5
  86. package/dist/Image.css.map +1 -1
  87. package/dist/InlineAlert.css +0 -6
  88. package/dist/InlineAlert.css.map +1 -1
  89. package/dist/Link.css +0 -6
  90. package/dist/Link.css.map +1 -1
  91. package/dist/Menu.css +0 -6
  92. package/dist/Menu.css.map +1 -1
  93. package/dist/Meter.css +0 -6
  94. package/dist/Meter.css.map +1 -1
  95. package/dist/Modal.css +1 -5
  96. package/dist/Modal.css.map +1 -1
  97. package/dist/NumberField.css +0 -6
  98. package/dist/NumberField.css.map +1 -1
  99. package/dist/Picker.css +0 -6
  100. package/dist/Picker.css.map +1 -1
  101. package/dist/Popover.css +1 -5
  102. package/dist/Popover.css.map +1 -1
  103. package/dist/ProgressBar.css +0 -6
  104. package/dist/ProgressBar.css.map +1 -1
  105. package/dist/ProgressCircle.css +1 -5
  106. package/dist/ProgressCircle.css.map +1 -1
  107. package/dist/Provider.css +1 -5
  108. package/dist/Provider.css.map +1 -1
  109. package/dist/Radio.css +0 -6
  110. package/dist/Radio.css.map +1 -1
  111. package/dist/RadioGroup.css +0 -6
  112. package/dist/RadioGroup.css.map +1 -1
  113. package/dist/SearchField.css +0 -6
  114. package/dist/SearchField.css.map +1 -1
  115. package/dist/SegmentedControl.css +0 -6
  116. package/dist/SegmentedControl.css.map +1 -1
  117. package/dist/Slider.css +0 -6
  118. package/dist/Slider.css.map +1 -1
  119. package/dist/StatusLight.css +0 -6
  120. package/dist/StatusLight.css.map +1 -1
  121. package/dist/Switch.css +0 -6
  122. package/dist/Switch.css.map +1 -1
  123. package/dist/TableView.css +0 -6
  124. package/dist/TableView.css.map +1 -1
  125. package/dist/Tabs.css +0 -6
  126. package/dist/Tabs.css.map +1 -1
  127. package/dist/TagGroup.cjs +2 -2
  128. package/dist/TagGroup.cjs.map +1 -1
  129. package/dist/TagGroup.css +0 -6
  130. package/dist/TagGroup.css.map +1 -1
  131. package/dist/TagGroup.mjs +2 -2
  132. package/dist/TagGroup.mjs.map +1 -1
  133. package/dist/TextField.css +0 -6
  134. package/dist/TextField.css.map +1 -1
  135. package/dist/ToggleButton.css +1 -5
  136. package/dist/ToggleButton.css.map +1 -1
  137. package/dist/Tooltip.css +0 -6
  138. package/dist/Tooltip.css.map +1 -1
  139. package/dist/types.d.ts.map +1 -1
  140. package/icons/Skeleton.cjs +2 -2
  141. package/icons/Skeleton.cjs.map +1 -1
  142. package/icons/Skeleton.css +3 -5
  143. package/icons/Skeleton.css.map +1 -1
  144. package/icons/Skeleton.mjs +3 -3
  145. package/icons/Skeleton.mjs.map +1 -1
  146. package/package.json +19 -19
  147. package/src/Breadcrumbs.tsx +2 -2
  148. package/src/Card.tsx +2 -2
  149. package/src/Content.tsx +2 -1
  150. package/src/Skeleton.tsx +3 -3
  151. package/src/TagGroup.tsx +2 -2
  152. package/style/__tests__/style-macro.test.js +2 -6
  153. package/style/dist/style-macro.cjs +4 -2
  154. package/style/dist/style-macro.cjs.map +1 -1
  155. package/style/dist/style-macro.mjs +4 -2
  156. package/style/dist/style-macro.mjs.map +1 -1
  157. package/style/style-macro.ts +8 -2
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.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 {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n children?: ReactNode,\n styles?: StyleString,\n isHidden?: boolean\n}\n\ninterface HeadingProps extends ContentProps {\n level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeading\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeader\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <div\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n let racContext = useContext(RACTextContext);\n let isSkeleton = useIsSkeleton();\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n if (isHidden) {\n return null;\n }\n\n let text = (\n <TextAria\n {...otherProps}\n ref={domRef}\n // @ts-ignore - compatibility with React < 19\n inert={isSkeleton ? 'true' : undefined}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined}\n data-rsp-slot=\"text\">\n {children}\n </TextAria>\n );\n\n if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n }\n\n return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <KeyboardAria\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <footer\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"Content.mjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Content.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 {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {inertValue} from '@react-aria/utils';\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton, useSkeletonText} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ContentProps extends UnsafeStyles, SlotProps {\n children?: ReactNode,\n styles?: StyleString,\n isHidden?: boolean\n}\n\ninterface HeadingProps extends ContentProps {\n level?: number\n}\n\nexport const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);\n\nexport const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.\nfunction Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeading\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);\n\nexport const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n\n return (\n <RACHeader\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);\n\nexport const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ContentContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <div\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);\n\nexport const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, TextContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;\n let racContext = useContext(RACTextContext);\n let isSkeleton = useIsSkeleton();\n [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);\n if (isHidden) {\n return null;\n }\n\n let text = (\n <TextAria\n {...otherProps}\n ref={domRef}\n // @ts-ignore - compatibility with React < 19\n inert={inertValue(isSkeleton)}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined}\n data-rsp-slot=\"text\">\n {children}\n </TextAria>\n );\n\n if (slot && racContext && 'slots' in racContext && !racContext.slots?.[slot]) {\n return <RACTextContext.Provider value={null}>{text}</RACTextContext.Provider>;\n }\n\n return text;\n});\n\nexport const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <KeyboardAria\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n\nexport const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});\n\nexport const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, FooterContext);\n let domRef = useDOMRef(ref);\n let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;\n if (isHidden) {\n return null;\n }\n return (\n <footer\n {...otherProps}\n ref={domRef}\n className={UNSAFE_className + styles}\n style={UNSAFE_style}\n slot={slot || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"Content.mjs.map"}
@@ -172,8 +172,6 @@
172
172
  }
173
173
  }
174
174
 
175
- @layer UNSAFE_overrides;
176
-
177
175
  @layer _.b.b {
178
176
  @media not ((hover: hover) and (pointer: fine)) {
179
177
  ._ebj {
@@ -185,8 +183,4 @@
185
183
  }
186
184
  }
187
185
  }
188
-
189
- .\.:not(#a#b) {
190
- all: revert-layer;
191
- }
192
186
  /*# sourceMappingURL=ContextualHelp.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAiEuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjFvB;EAyEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AAjFvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAyEwB;EAAA;IAAA;;;;IAKA;;;;;;AAAA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children?: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
1
+ {"mappings":"ACyCgB;EAAA;;;;EAAA;;;;EAiEuC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQf;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQD;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjFvB;EAyEwB;;;;;;EAAA;;;;EAQD;;;;EAAA;;;;;AAjFvB;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAyEwB;EAAA;IAAA;;;;IAKA","sources":["019fb1fcc3c1598d","packages/@react-spectrum/s2/src/ContextualHelp.tsx"],"sourcesContent":["@import \"3578337ca657fa78\";\n@import \"a023844b8de14349\";\n@import \"3be9de50ea21a4ea\";\n@import \"5266771b1d67e2fb\";\n@import \"ccaa61f08a335ea7\";\n","import {ActionButton} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {ContentContext, FooterContext, HeadingContext} from './Content';\nimport {ContextValue, DEFAULT_SLOT, Provider, Dialog as RACDialog, TextContext} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {dialogInner} from './Dialog';\nimport {DialogTrigger, DialogTriggerProps} from './DialogTrigger';\nimport {filterDOMProps, mergeProps, useLabels} from '@react-aria/utils';\nimport HelpIcon from '../s2wf-icons/S2_Icon_HelpCircle_20_N.svg';\nimport InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {PopoverBase, PopoverDialogProps} from './Popover';\nimport {space, style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils' with { type: 'macro' };\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ContextualHelpStyleProps {\n /**\n * Indicates whether contents are informative or provides helpful guidance.\n *\n * @default 'help'\n */\n variant?: 'info' | 'help'\n}\nexport interface ContextualHelpProps extends\n Pick<DialogTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange'>,\n Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,\n ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {\n /** Contents of the Contextual Help popover. */\n children?: ReactNode,\n /**\n * The size of the ActionButton.\n *\n * @default 'XS'\n */\n size?: 'XS' | 'S'\n}\n\nconst popover = style({\n fontFamily: 'sans',\n minWidth: 218,\n width: 218,\n padding: 24\n});\n\nexport const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * Contextual help shows a user extra information about the state of an adjacent component, or a total view.\n */\nexport const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);\n let {\n children,\n defaultOpen,\n // containerPadding = 24, // See popover() above. Issue noted in Popover.tsx.\n size = 'XS',\n crossOffset,\n isOpen,\n offset = 8,\n onOpenChange,\n placement = 'bottom start',\n shouldFlip,\n UNSAFE_className,\n UNSAFE_style,\n styles,\n variant = 'help'\n } = props;\n\n // In a FieldLabel we're getting the context's aria-labeledby, so we need to\n // manually set the aria-label after useLabels() to keep the order of label\n // then ContextualHelp variant\n let labelProps = useLabels(props);\n let label = stringFormatter.format(`contextualhelp.${variant}`);\n labelProps['aria-label'] = labelProps['aria-label'] ? labelProps['aria-label'] + ' ' + label : label;\n\n let buttonProps = filterDOMProps(props, {labelable: true});\n\n return (\n <DialogTrigger\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}>\n <ActionButton\n slot={null}\n ref={ref}\n size={size}\n {...mergeProps(buttonProps, labelProps)}\n UNSAFE_style={UNSAFE_style}\n UNSAFE_className={UNSAFE_className}\n styles={styles}\n isQuiet>\n {variant === 'info' ? <InfoIcon /> : <HelpIcon />}\n </ActionButton>\n <PopoverBase\n placement={placement}\n shouldFlip={shouldFlip}\n // not working => containerPadding={containerPadding}\n offset={offset}\n crossOffset={crossOffset}\n hideArrow\n UNSAFE_className={popover}>\n <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>\n <Provider\n values={[\n [TextContext, {\n slots: {\n [DEFAULT_SLOT]: {}\n }\n }],\n [HeadingContext, {styles: style({\n font: 'heading-xs',\n margin: 0,\n marginBottom: space(8) // This only makes it 10px on mobile and should be 12px\n })}],\n [ContentContext, {styles: style({\n font: 'body-sm'\n })}],\n [FooterContext, {styles: style({\n font: 'body-sm',\n marginTop: 16\n })}]\n ]}>\n {children}\n </Provider>\n </RACDialog>\n </PopoverBase>\n </DialogTrigger>\n );\n});\n"],"names":[],"version":3,"file":"ContextualHelp.css.map"}
@@ -1,7 +1,3 @@
1
- .\.:not(#a#b) {
2
- all: revert-layer;
3
- }
4
-
5
1
  @layer _.a {
6
2
  .Eh {
7
3
  padding-top: 1.5rem;
@@ -88,7 +84,7 @@
88
84
  }
89
85
  }
90
86
 
91
- @layer _.b, UNSAFE_overrides;
87
+ @layer _.b;
92
88
 
93
89
  @layer _.b.c {
94
90
  @media (width >= 640px) {
@@ -1 +1 @@
1
- {"mappings":"AAsCoB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CustomDialog.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 {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n /**\n * The size of the Dialog.\n */\n size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n /**\n * Whether the Dialog is dismissible.\n */\n isDismissible?: boolean,\n /** Whether pressing the escape key to close the dialog should be disabled. */\n isKeyboardDismissDisabled?: boolean,\n /**\n * The amount of padding around the contents of the dialog.\n * @default 'default'\n */\n padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n padding: {\n padding: {\n default: {\n default: 24,\n sm: 32\n },\n none: 0\n }\n },\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n let {\n size,\n isDismissible,\n isKeyboardDismissDisabled,\n padding = 'default'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n <RACDialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle({padding}, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </RACDialog>\n </Modal>\n );\n});\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}
1
+ {"mappings":"AAsCoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["packages/@react-spectrum/s2/src/CustomDialog.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 {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n /**\n * The size of the Dialog.\n */\n size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',\n /**\n * Whether the Dialog is dismissible.\n */\n isDismissible?: boolean,\n /** Whether pressing the escape key to close the dialog should be disabled. */\n isKeyboardDismissDisabled?: boolean,\n /**\n * The amount of padding around the contents of the dialog.\n * @default 'default'\n */\n padding?: 'default' | 'none'\n}\n\nconst dialogStyle = style({\n padding: {\n padding: {\n default: {\n default: 24,\n sm: 32\n },\n none: 0\n }\n },\n boxSizing: 'border-box',\n outlineStyle: 'none',\n borderRadius: '[inherit]',\n overflow: 'auto',\n position: 'relative',\n size: 'full',\n maxSize: '[inherit]'\n}, getAllowedOverrides({height: true}));\n\n/**\n * A CustomDialog is a floating window with a custom layout.\n */\nexport const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {\n let {\n size,\n isDismissible,\n isKeyboardDismissDisabled,\n padding = 'default'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n <RACDialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogStyle({padding}, props.styles)}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {children}\n </OverlayTriggerStateContext.Provider>\n ))}\n </RACDialog>\n </Modal>\n );\n});\n"],"names":[],"version":3,"file":"CustomDialog.css.map"}
package/dist/Dialog.css CHANGED
@@ -224,8 +224,6 @@
224
224
  }
225
225
  }
226
226
 
227
- @layer UNSAFE_overrides;
228
-
229
227
  @layer _.c {
230
228
  ._d-enzwzjc:lang(he) {
231
229
  font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -297,8 +295,4 @@
297
295
  }
298
296
  }
299
297
  }
300
-
301
- .\.:not(#a#b) {
302
- all: revert-layer;
303
- }
304
298
  /*# sourceMappingURL=Dialog.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACwCc;EAAA;;;;EAAA;;;;EAAA;;;;EAME;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAMD;;;;EAkBA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAKO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCU;;;;EAiBZ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7JX;EAME;;;;;;EAAA;;;;EAwBD;;;;EAUY;;;;EA+DA;;;;EAAA;;;;EAsDF;;;;;AA7JX;;AAME;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAMD;;;;IAIE;;;;;;AAAA;EAAA;IAAA;;;;;;AAuFU;EAAA;IAAA;;;;IAAA;;;;;;AAqCU","sources":["ebf76300d207adbd","packages/@react-spectrum/s2/src/Dialog.tsx"],"sourcesContent":["@import \"41c4aa1296799ea1\";\n@import \"b6cb6ab59865bde8\";\n@import \"c2aa69bcd8dab7fb\";\n@import \"e9cdd4f3ada8c5d9\";\n@import \"722603297b70d86b\";\n@import \"d1b118504b390ed5\";\n@import \"a59d0f5a0e9cb2ac\";\n@import \"26ac236cb46f8555\";\n@import \"8b070308c4891c21\";\n@import \"5ec9bfe5eed7daff\";\n@import \"7eb24a82f7ffd3c6\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n /**\n * Whether the Dialog is dismissible.\n */\n isDismissible?: boolean,\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** Whether pressing the escape key to close the dialog should be disabled. */\n isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n width: 'full',\n height: 140,\n objectFit: 'cover'\n});\n\nconst heading = style({\n flexGrow: 1,\n marginY: 0,\n font: 'heading'\n});\n\nconst header = style({\n font: 'body-lg'\n});\n\nconst content = style({\n flexGrow: 1,\n overflowY: {\n default: 'auto',\n // Make the whole dialog scroll rather than only the content when the height it small.\n '@media (height < 400)': 'visible'\n },\n font: 'body',\n // TODO: adjust margin on mobile?\n marginX: {\n default: 32\n }\n});\n\nconst footer = style({\n flexGrow: 1,\n font: 'body'\n});\n\nconst buttonGroup = style({\n marginStart: 'auto',\n maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n maxHeight: '[inherit]',\n boxSizing: 'border-box',\n outlineStyle: 'none',\n fontFamily: 'sans',\n borderRadius: '[inherit]',\n overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n let domRef = useDOMRef(ref);\n\n return (\n <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n <RACDialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogInner}>\n {composeRenderProps(props.children, (children) => (\n // Render the children multiple times inside the wrappers we need to implement the layout.\n // Each instance hides certain children so that they are all rendered in the correct locations.\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {/* Hero image */}\n <Provider\n values={[\n [ImageContext, {styles: image}],\n [HeadingContext, {isHidden: true}],\n [HeaderContext, {isHidden: true}],\n [ContentContext, {isHidden: true}],\n [FooterContext, {isHidden: true}],\n [ButtonGroupContext, {isHidden: true}]\n ]}>\n {children}\n </Provider>\n {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n <div\n className={style({\n // Wrapper that creates the margin for the dismiss button.\n display: 'flex',\n alignItems: 'start',\n columnGap: 12,\n marginStart: {\n default: 32\n },\n marginEnd: {\n default: 32,\n isDismissible: 12\n },\n marginTop: {\n default: 12 // margin to dismiss button\n }\n })({isDismissible: props.isDismissible})}>\n <div\n className={style({\n // Wrapper for heading, header, and button group.\n // This swaps orientation from horizontal to vertical at small screen sizes.\n display: 'flex',\n flexGrow: 1,\n marginTop: {\n default: 20, // 32 - 12 (handled above)\n ':empty': 0\n },\n marginBottom: {\n default: 16,\n ':empty': 0\n },\n columnGap: 24,\n rowGap: 8,\n flexDirection: {\n default: 'column',\n sm: 'row'\n },\n alignItems: {\n default: 'start',\n sm: 'center'\n }\n })}>\n <Provider\n values={[\n [ImageContext, {hidden: true}],\n [HeadingContext, {styles: heading}],\n [HeaderContext, {styles: header}],\n [ContentContext, {isHidden: true}],\n [FooterContext, {isHidden: true}],\n [ButtonGroupContext, {isHidden: true}]\n ]}>\n {children}\n </Provider>\n </div>\n {props.isDismissible && \n <CloseButton styles={style({marginBottom: 12})} />\n }\n </div>\n {/* Main content */}\n <Provider\n values={[\n [ImageContext, {hidden: true}],\n [HeadingContext, {isHidden: true}],\n [HeaderContext, {isHidden: true}],\n [ContentContext, {styles: content}],\n [FooterContext, {isHidden: true}],\n [ButtonGroupContext, {isHidden: true}]\n ]}>\n {children}\n </Provider>\n {/* Footer and button group */}\n <div\n className={style({\n display: 'flex',\n paddingX: {\n default: 32\n },\n paddingBottom: {\n default: 32\n },\n paddingTop: {\n default: 32,\n ':empty': 0\n },\n gap: 24,\n alignItems: 'center',\n flexWrap: 'wrap'\n })}>\n <Provider\n values={[\n [ImageContext, {hidden: true}],\n [HeadingContext, {isHidden: true}],\n [HeaderContext, {isHidden: true}],\n [ContentContext, {isHidden: true}],\n [FooterContext, {styles: footer}],\n [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n ]}>\n {children}\n </Provider>\n </div>\n </OverlayTriggerStateContext.Provider>\n ))}\n </RACDialog>\n </Modal>\n );\n});\n"],"names":[],"version":3,"file":"Dialog.css.map"}
1
+ {"mappings":"ACwCc;EAAA;;;;EAAA;;;;EAAA;;;;EAME;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAMD;;;;EAkBA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAKK;;;;EAAA;;;;EAKO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiBE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCU;;;;EAiBZ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7JX;EAME;;;;;;EAAA;;;;EAwBD;;;;EAUY;;;;EA+DA;;;;EAAA;;;;EAsDF;;;;;AAvJT;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAMD;;;;IAIE;;;;;;AAAA;EAAA;IAAA;;;;;;AAuFU;EAAA;IAAA;;;;IAAA","sources":["ebf76300d207adbd","packages/@react-spectrum/s2/src/Dialog.tsx"],"sourcesContent":["@import \"41c4aa1296799ea1\";\n@import \"b6cb6ab59865bde8\";\n@import \"c2aa69bcd8dab7fb\";\n@import \"e9cdd4f3ada8c5d9\";\n@import \"722603297b70d86b\";\n@import \"d1b118504b390ed5\";\n@import \"a59d0f5a0e9cb2ac\";\n@import \"26ac236cb46f8555\";\n@import \"8b070308c4891c21\";\n@import \"5ec9bfe5eed7daff\";\n@import \"7eb24a82f7ffd3c6\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {CloseButton} from './CloseButton';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, FooterContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {ImageContext} from './Image';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n /**\n * Whether the Dialog is dismissible.\n */\n isDismissible?: boolean,\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /** Whether pressing the escape key to close the dialog should be disabled. */\n isKeyboardDismissDisabled?: boolean\n}\n\nconst image = style({\n width: 'full',\n height: 140,\n objectFit: 'cover'\n});\n\nconst heading = style({\n flexGrow: 1,\n marginY: 0,\n font: 'heading'\n});\n\nconst header = style({\n font: 'body-lg'\n});\n\nconst content = style({\n flexGrow: 1,\n overflowY: {\n default: 'auto',\n // Make the whole dialog scroll rather than only the content when the height it small.\n '@media (height < 400)': 'visible'\n },\n font: 'body',\n // TODO: adjust margin on mobile?\n marginX: {\n default: 32\n }\n});\n\nconst footer = style({\n flexGrow: 1,\n font: 'body'\n});\n\nconst buttonGroup = style({\n marginStart: 'auto',\n maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n maxHeight: '[inherit]',\n boxSizing: 'border-box',\n outlineStyle: 'none',\n fontFamily: 'sans',\n borderRadius: '[inherit]',\n overflow: 'auto'\n});\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {\n let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;\n let domRef = useDOMRef(ref);\n\n return (\n <Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n <RACDialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogInner}>\n {composeRenderProps(props.children, (children) => (\n // Render the children multiple times inside the wrappers we need to implement the layout.\n // Each instance hides certain children so that they are all rendered in the correct locations.\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n {/* Hero image */}\n <Provider\n values={[\n [ImageContext, {styles: image}],\n [HeadingContext, {isHidden: true}],\n [HeaderContext, {isHidden: true}],\n [ContentContext, {isHidden: true}],\n [FooterContext, {isHidden: true}],\n [ButtonGroupContext, {isHidden: true}]\n ]}>\n {children}\n </Provider>\n {/* Top header: heading, header, dismiss button, and button group (in fullscreen dialogs). */}\n <div\n className={style({\n // Wrapper that creates the margin for the dismiss button.\n display: 'flex',\n alignItems: 'start',\n columnGap: 12,\n marginStart: {\n default: 32\n },\n marginEnd: {\n default: 32,\n isDismissible: 12\n },\n marginTop: {\n default: 12 // margin to dismiss button\n }\n })({isDismissible: props.isDismissible})}>\n <div\n className={style({\n // Wrapper for heading, header, and button group.\n // This swaps orientation from horizontal to vertical at small screen sizes.\n display: 'flex',\n flexGrow: 1,\n marginTop: {\n default: 20, // 32 - 12 (handled above)\n ':empty': 0\n },\n marginBottom: {\n default: 16,\n ':empty': 0\n },\n columnGap: 24,\n rowGap: 8,\n flexDirection: {\n default: 'column',\n sm: 'row'\n },\n alignItems: {\n default: 'start',\n sm: 'center'\n }\n })}>\n <Provider\n values={[\n [ImageContext, {hidden: true}],\n [HeadingContext, {styles: heading}],\n [HeaderContext, {styles: header}],\n [ContentContext, {isHidden: true}],\n [FooterContext, {isHidden: true}],\n [ButtonGroupContext, {isHidden: true}]\n ]}>\n {children}\n </Provider>\n </div>\n {props.isDismissible && \n <CloseButton styles={style({marginBottom: 12})} />\n }\n </div>\n {/* Main content */}\n <Provider\n values={[\n [ImageContext, {hidden: true}],\n [HeadingContext, {isHidden: true}],\n [HeaderContext, {isHidden: true}],\n [ContentContext, {styles: content}],\n [FooterContext, {isHidden: true}],\n [ButtonGroupContext, {isHidden: true}]\n ]}>\n {children}\n </Provider>\n {/* Footer and button group */}\n <div\n className={style({\n display: 'flex',\n paddingX: {\n default: 32\n },\n paddingBottom: {\n default: 32\n },\n paddingTop: {\n default: 32,\n ':empty': 0\n },\n gap: 24,\n alignItems: 'center',\n flexWrap: 'wrap'\n })}>\n <Provider\n values={[\n [ImageContext, {hidden: true}],\n [HeadingContext, {isHidden: true}],\n [HeaderContext, {isHidden: true}],\n [ContentContext, {isHidden: true}],\n [FooterContext, {styles: footer}],\n [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]\n ]}>\n {children}\n </Provider>\n </div>\n </OverlayTriggerStateContext.Provider>\n ))}\n </RACDialog>\n </Modal>\n );\n});\n"],"names":[],"version":3,"file":"Dialog.css.map"}
@@ -358,8 +358,6 @@
358
358
  }
359
359
  }
360
360
 
361
- @layer UNSAFE_overrides;
362
-
363
361
  @layer _.c {
364
362
  ._d-enzwzjc:lang(he) {
365
363
  font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -427,8 +425,4 @@
427
425
  }
428
426
  }
429
427
  }
430
-
431
- .\.:not(#a#b) {
432
- all: revert-layer;
433
- }
434
428
  /*# sourceMappingURL=Disclosure.css.map */
@@ -1 +1 @@
1
- {"mappings":"AC2CmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsEE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQA;;;;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;;;;EA4EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApQD;EAAA;;;;EAAA;;;;EA8EE;;;;EAsLD;;;;EAAA;;;;;AApQD;;AA8EE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsLD;;;;;;AA1GE","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\n@import \"879f5cdc449bf13e\";\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 {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n /**\n * The size of the disclosure.\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the disclosures.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /** Whether the disclosure should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */\n children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n color: 'heading',\n borderTopWidth: {\n default: 1,\n isQuiet: 0\n },\n borderBottomWidth: {\n default: 1,\n isQuiet: 0,\n isInGroup: {\n default: 0,\n ':last-child': {\n default: 1,\n isQuiet: 0\n }\n }\n },\n borderStartWidth: 0,\n borderEndWidth: 0,\n borderStyle: 'solid',\n borderColor: 'gray-200',\n minWidth: 200\n}, getAllowedOverrides());\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nexport const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n let {\n size = 'M',\n density = 'regular',\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let isInGroup = useContext(DisclosureContext) !== null;\n\n return (\n <Provider\n values={[\n [DisclosureContext, {size, isQuiet, density}]\n ]}>\n <RACDisclosure\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n {props.children}\n </RACDisclosure>\n </Provider>\n );\n});\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n /** The heading level of the disclosure header.\n * \n * @default 3\n */\n level?: number,\n /** The contents of the disclosure header. */\n children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n children: React.ReactNode\n}\n\nconst headingStyle = style({\n margin: 0,\n flexGrow: 1,\n display: 'flex',\n flexShrink: 1,\n minWidth: 0\n});\n\nconst buttonStyles = style({\n ...focusRing(),\n outlineOffset: -2,\n font: 'heading',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n fontWeight: 'bold',\n fontSize: {\n size: {\n S: 'heading-xs',\n M: 'heading-sm',\n L: 'heading',\n XL: 'heading-lg'\n }\n },\n lineHeight: 'ui',\n display: 'flex',\n flexGrow: 1,\n alignItems: 'baseline',\n paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n paddingY: centerPadding(),\n gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n minHeight: {\n // compact is equivalent to 'control', but other densities have more padding.\n size: {\n S: {\n density: {\n compact: 24,\n regular: 32,\n spacious: 40\n }\n },\n M: {\n density: {\n compact: 32,\n regular: 40,\n spacious: 48\n }\n },\n L: {\n density: {\n compact: 40,\n regular: 48,\n spacious: 56\n }\n },\n XL: {\n density: {\n compact: 48,\n regular: 56,\n spacious: 64\n }\n }\n }\n },\n width: 'full',\n backgroundColor: {\n default: 'transparent',\n isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n },\n transition: 'default',\n borderWidth: 0,\n borderRadius: {\n // Only rounded for keyboard focus and quiet.\n default: 'none',\n isFocusVisible: 'control',\n isQuiet: 'control'\n },\n textAlign: 'start',\n disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n rotate: {\n isRTL: 180,\n isExpanded: 90\n },\n transition: 'default',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n let {\n UNSAFE_className,\n UNSAFE_style,\n children\n } = props;\n let domRef = useDOMRef(ref);\n let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n let mapSize = {\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n };\n\n // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container\n let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n if (density === 'compact') {\n newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n }\n\n return (\n <Provider\n values={[\n [ActionButtonContext, {size: newSize, isQuiet}],\n [InternalDisclosureHeader, {}]\n ]}>\n <div\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n ref={domRef}>\n {children}\n </div>\n </Provider>\n );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nexport const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n let {\n level = 3,\n UNSAFE_style,\n UNSAFE_className = '',\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n const domProps = filterDOMProps(otherProps);\n let {direction} = useLocale();\n let {isExpanded} = useContext(DisclosureStateContext)!;\n let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n let isRTL = direction === 'rtl';\n\n let buttonTrigger = (\n <Heading\n {...domProps}\n level={level}\n ref={domRef}\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + headingStyle}>\n <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n <CenterBaseline>\n <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n </CenterBaseline>\n {props.children}\n </Button>\n </Heading>\n );\n let ctx = useContext(InternalDisclosureHeader);\n if (ctx) {\n return buttonTrigger;\n }\n\n return (\n <DisclosureHeader>\n {buttonTrigger}\n </DisclosureHeader>\n );\n});\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n children: React.ReactNode\n}\n\nconst panelStyles = style({\n font: 'body',\n paddingTop: {\n isExpanded: 8\n },\n paddingBottom: {\n isExpanded: 16\n },\n paddingX: {\n isExpanded: {\n size: {\n S: 8,\n M: 9,\n L: 12,\n XL: 15\n }\n }\n }\n});\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nexport const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n let {\n UNSAFE_style,\n UNSAFE_className = '',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n let {size} = useSlottedContext(DisclosureContext)!;\n let {isExpanded} = useContext(DisclosureStateContext)!;\n let panelRef = useDOMRef(ref);\n return (\n <RACDisclosurePanel\n {...domProps}\n ref={panelRef}\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n {props.children}\n </RACDisclosurePanel>\n );\n});\n\n"],"names":[],"version":3,"file":"Disclosure.css.map"}
1
+ {"mappings":"AC2CmB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsEE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQA;;;;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;;;;EA4EC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CwB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6D1B;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApQD;EAAA;;;;EAAA;;;;EA8EE;;;;EAsLD;;;;EAAA;;;;;AAtLC;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAsLD","sources":["af82a6f8008c749b","packages/@react-spectrum/s2/src/Disclosure.tsx"],"sourcesContent":["@import \"02b9b02b69a441b2\";\n@import \"80d1cf6aba9342e9\";\n@import \"d47c144c912b2c65\";\n@import \"54c3947845455457\";\n@import \"47e48706d70658de\";\n@import \"879f5cdc449bf13e\";\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 {ActionButtonContext} from './ActionButton';\nimport {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';\nimport {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';\nimport {CenterBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };\nimport Chevron from '../ui-icons/Chevron';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {focusRing, lightDark, style} from '../style' with { type: 'macro' };\nimport React, {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'children'>, StyleProps {\n /**\n * The size of the disclosure.\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The amount of space between the disclosures.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /** Whether the disclosure should be displayed with a quiet style. */\n isQuiet?: boolean,\n /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */\n children: ReactNode\n}\n\nexport const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst disclosure = style({\n color: 'heading',\n borderTopWidth: {\n default: 1,\n isQuiet: 0\n },\n borderBottomWidth: {\n default: 1,\n isQuiet: 0,\n isInGroup: {\n default: 0,\n ':last-child': {\n default: 1,\n isQuiet: 0\n }\n }\n },\n borderStartWidth: 0,\n borderEndWidth: 0,\n borderStyle: 'solid',\n borderColor: 'gray-200',\n minWidth: 200\n}, getAllowedOverrides());\n\n/**\n * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.\n */\nexport const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);\n let {\n size = 'M',\n density = 'regular',\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = ''\n } = props;\n let domRef = useDOMRef(ref);\n\n let isInGroup = useContext(DisclosureContext) !== null;\n\n return (\n <Provider\n values={[\n [DisclosureContext, {size, isQuiet, density}]\n ]}>\n <RACDisclosure\n {...props}\n ref={domRef}\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + disclosure({isQuiet, isInGroup}, props.styles)}>\n {props.children}\n </RACDisclosure>\n </Provider>\n );\n});\n\nexport interface DisclosureTitleProps extends UnsafeStyles, DOMProps {\n /** The heading level of the disclosure header.\n * \n * @default 3\n */\n level?: number,\n /** The contents of the disclosure header. */\n children: React.ReactNode\n}\n\ninterface DisclosureHeaderProps extends UnsafeStyles, DOMProps {\n children: React.ReactNode\n}\n\nconst headingStyle = style({\n margin: 0,\n flexGrow: 1,\n display: 'flex',\n flexShrink: 1,\n minWidth: 0\n});\n\nconst buttonStyles = style({\n ...focusRing(),\n outlineOffset: -2,\n font: 'heading',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n fontWeight: 'bold',\n fontSize: {\n size: {\n S: 'heading-xs',\n M: 'heading-sm',\n L: 'heading',\n XL: 'heading-lg'\n }\n },\n lineHeight: 'ui',\n display: 'flex',\n flexGrow: 1,\n alignItems: 'baseline',\n paddingX: '[calc(self(minHeight) * 3/8 - 1px)]',\n paddingY: centerPadding(),\n gap: '[calc(self(minHeight) * 3/8 - 1px)]',\n minHeight: {\n // compact is equivalent to 'control', but other densities have more padding.\n size: {\n S: {\n density: {\n compact: 24,\n regular: 32,\n spacious: 40\n }\n },\n M: {\n density: {\n compact: 32,\n regular: 40,\n spacious: 48\n }\n },\n L: {\n density: {\n compact: 40,\n regular: 48,\n spacious: 56\n }\n },\n XL: {\n density: {\n compact: 48,\n regular: 56,\n spacious: 64\n }\n }\n }\n },\n width: 'full',\n backgroundColor: {\n default: 'transparent',\n isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),\n isHovered: lightDark('transparent-black-100', 'transparent-white-100'),\n isPressed: lightDark('transparent-black-300', 'transparent-white-300')\n },\n transition: 'default',\n borderWidth: 0,\n borderRadius: {\n // Only rounded for keyboard focus and quiet.\n default: 'none',\n isFocusVisible: 'control',\n isQuiet: 'control'\n },\n textAlign: 'start',\n disableTapHighlight: true\n});\n\nconst chevronStyles = style({\n rotate: {\n isRTL: 180,\n isExpanded: 90\n },\n transition: 'default',\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n flexShrink: 0\n});\n\nconst InternalDisclosureHeader = createContext<{} | null>(null);\n\nfunction DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {\n let {\n UNSAFE_className,\n UNSAFE_style,\n children\n } = props;\n let domRef = useDOMRef(ref);\n let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;\n\n let mapSize = {\n S: 'XS',\n M: 'S',\n L: 'M',\n XL: 'L'\n };\n\n // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container\n let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;\n if (density === 'compact') {\n newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';\n }\n\n return (\n <Provider\n values={[\n [ActionButtonContext, {size: newSize, isQuiet}],\n [InternalDisclosureHeader, {}]\n ]}>\n <div\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}\n ref={domRef}>\n {children}\n </div>\n </Provider>\n );\n}\n\n/**\n * A wrapper element for the disclosure title that can contain other elements not part of the trigger.\n */\nexport const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);\n\n/**\n * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.\n */\nexport const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {\n let {\n level = 3,\n UNSAFE_style,\n UNSAFE_className = '',\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n const domProps = filterDOMProps(otherProps);\n let {direction} = useLocale();\n let {isExpanded} = useContext(DisclosureStateContext)!;\n let {size, density, isQuiet} = useSlottedContext(DisclosureContext)!;\n let isRTL = direction === 'rtl';\n\n let buttonTrigger = (\n <Heading\n {...domProps}\n level={level}\n ref={domRef}\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + headingStyle}>\n <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot=\"trigger\">\n <CenterBaseline>\n <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden=\"true\" />\n </CenterBaseline>\n {props.children}\n </Button>\n </Heading>\n );\n let ctx = useContext(InternalDisclosureHeader);\n if (ctx) {\n return buttonTrigger;\n }\n\n return (\n <DisclosureHeader>\n {buttonTrigger}\n </DisclosureHeader>\n );\n});\n\nexport interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {\n children: React.ReactNode\n}\n\nconst panelStyles = style({\n font: 'body',\n paddingTop: {\n isExpanded: 8\n },\n paddingBottom: {\n isExpanded: 16\n },\n paddingX: {\n isExpanded: {\n size: {\n S: 8,\n M: 9,\n L: 12,\n XL: 15\n }\n }\n }\n});\n\n/**\n * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.\n */\nexport const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {\n let {\n UNSAFE_style,\n UNSAFE_className = '',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n let {size} = useSlottedContext(DisclosureContext)!;\n let {isExpanded} = useContext(DisclosureStateContext)!;\n let panelRef = useDOMRef(ref);\n return (\n <RACDisclosurePanel\n {...domProps}\n ref={panelRef}\n style={UNSAFE_style}\n className={(UNSAFE_className ?? '') + panelStyles({size, isExpanded})}>\n {props.children}\n </RACDisclosurePanel>\n );\n});\n\n"],"names":[],"version":3,"file":"Disclosure.css.map"}
package/dist/Divider.css CHANGED
@@ -1,7 +1,3 @@
1
- .\.:not(#a#b) {
2
- all: revert-layer;
3
- }
4
-
5
1
  @layer _.a {
6
2
  .-_1de2x0q_b-c {
7
3
  --s2-container-bg: white;
@@ -92,7 +88,7 @@
92
88
  }
93
89
  }
94
90
 
95
- @layer _.b, UNSAFE_overrides;
91
+ @layer _.b;
96
92
 
97
93
  @layer _.b.a {
98
94
  @media (forced-colors: active) {
@@ -1 +1 @@
1
- {"mappings":"AA4CuB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Divider.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 {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n /**\n * How thick the Divider should be.\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /**\n * How thick the Divider should be.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** The static color style to apply. Useful when the Divider appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n ...staticColor(),\n alignSelf: 'stretch',\n backgroundColor: {\n default: 'gray-200',\n size: {\n L: 'gray-800'\n },\n isStaticColor: {\n default: 'transparent-overlay-200',\n size: {\n L: 'transparent-overlay-800'\n }\n },\n forcedColors: 'ButtonBorder'\n },\n borderStyle: 'none',\n borderRadius: 'full',\n margin: 0,\n height: {\n orientation: {\n horizontal: {\n // These should be px not rems, because we're emulating a border.\n default: '[2px]',\n size: {\n S: '[1px]',\n L: '[4px]'\n }\n }\n }\n },\n width: {\n orientation: {\n vertical: {\n default: '[2px]',\n size: {\n S: '[1px]',\n L: '[4px]'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n let domRef = useDOMRef(ref);\n\n return (\n <RACSeparator\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + divider({\n size: props.size || 'M',\n orientation: props.orientation || 'horizontal',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor\n }, props.styles)} />\n );\n});\n"],"names":[],"version":3,"file":"Divider.css.map"}
1
+ {"mappings":"AA4CuB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA","sources":["packages/@react-spectrum/s2/src/Divider.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 {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n/*\n * Adding as it's own type to deal with size being a part of the theme so we\n * can type style() and it's parameters.\n */\ninterface DividerSpectrumProps {\n /**\n * How thick the Divider should be.\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L',\n /**\n * How thick the Divider should be.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** The static color style to apply. Useful when the Divider appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\n// TODO: allow overriding height (only when orientation is vertical)??\nexport interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}\n\nexport const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);\n\nexport const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({\n ...staticColor(),\n alignSelf: 'stretch',\n backgroundColor: {\n default: 'gray-200',\n size: {\n L: 'gray-800'\n },\n isStaticColor: {\n default: 'transparent-overlay-200',\n size: {\n L: 'transparent-overlay-800'\n }\n },\n forcedColors: 'ButtonBorder'\n },\n borderStyle: 'none',\n borderRadius: 'full',\n margin: 0,\n height: {\n orientation: {\n horizontal: {\n // These should be px not rems, because we're emulating a border.\n default: '[2px]',\n size: {\n S: '[1px]',\n L: '[4px]'\n }\n }\n }\n },\n width: {\n orientation: {\n vertical: {\n default: '[2px]',\n size: {\n S: '[1px]',\n L: '[4px]'\n }\n }\n }\n }\n}, getAllowedOverrides());\n\n/**\n * Dividers bring clarity to a layout by grouping and dividing content in close proximity.\n * They can also be used to establish rhythm and hierarchy.\n */\nexport const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {\n [props, ref] = useSpectrumContextProps(props, ref, DividerContext);\n let domRef = useDOMRef(ref);\n\n return (\n <RACSeparator\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + divider({\n size: props.size || 'M',\n orientation: props.orientation || 'horizontal',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor\n }, props.styles)} />\n );\n});\n"],"names":[],"version":3,"file":"Divider.css.map"}
package/dist/DropZone.css CHANGED
@@ -227,10 +227,4 @@
227
227
  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
228
228
  }
229
229
  }
230
-
231
- @layer UNSAFE_overrides;
232
-
233
- .\.:not(#a#b) {
234
- all: revert-layer;
235
- }
236
230
  /*# sourceMappingURL=DropZone.css.map */
@@ -1 +1 @@
1
- {"mappings":"AC2CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;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;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAwBF","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\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 {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children?: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}
1
+ {"mappings":"AC2CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;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;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\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 {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children?: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}
package/dist/Field.css CHANGED
@@ -478,8 +478,6 @@
478
478
  }
479
479
  }
480
480
 
481
- @layer UNSAFE_overrides;
482
-
483
481
  @layer _.c {
484
482
  ._d-enzwzjc:lang(he) {
485
483
  font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
@@ -583,8 +581,4 @@
583
581
  }
584
582
  }
585
583
  }
586
-
587
- .\.:not(#a#b) {
588
- all: revert-layer;
589
- }
590
584
  /*# sourceMappingURL=Field.css.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;;;;;AApLN;;AAyBiC;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;;;;;;AAwEuB","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>}) {\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"}
package/dist/Form.css CHANGED
@@ -1,7 +1,3 @@
1
- .\.:not(#a#b) {
2
- all: revert-layer;
3
- }
4
-
5
1
  @layer _.a {
6
2
  ._0f {
7
3
  display: grid;
@@ -40,5 +36,5 @@
40
36
  }
41
37
  }
42
38
 
43
- @layer _.b, UNSAFE_overrides;
39
+ @layer _.b;
44
40
  /*# sourceMappingURL=Form.css.map */
package/dist/Form.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAqFkD;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/Form.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 {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';\nimport {DOMRef, SpectrumLabelableProps} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\n\ninterface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {\n /**\n * Size of the Form elements.\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** Whether the Form elements are disabled. */\n isDisabled?: boolean,\n /** Whether the Form elements are rendered with their emphasized style. */\n isEmphasized?: boolean\n}\n\nexport interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'children'>, StyleProps {\n children?: ReactNode\n}\n\nexport const FormContext = createContext<FormStyleProps | null>(null);\nexport function useFormProps<T extends FormStyleProps>(props: T): T {\n let ctx = useContext(FormContext);\n let isSkeleton = useIsSkeleton();\n return useMemo(() => {\n let result: T = props;\n if (ctx || isSkeleton) {\n result = {...props};\n }\n\n if (ctx) {\n // This is a subset of mergeProps. We just need to merge non-undefined values.\n for (let key in ctx) {\n if (result[key] === undefined) {\n result[key] = ctx[key];\n }\n }\n }\n\n // Skeleton always wins over local props.\n if (isSkeleton) {\n result.isDisabled = true;\n }\n\n return result;\n }, [ctx, props, isSkeleton]);\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nexport const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {\n let {\n labelPosition = 'top',\n labelAlign,\n necessityIndicator,\n isRequired,\n isDisabled,\n isEmphasized,\n size = 'M',\n ...formProps\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACForm\n {...formProps}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + style({\n display: 'grid',\n gridTemplateColumns: {\n labelPosition: {\n top: ['[field] 1fr'],\n side: ['[label] auto', '[field] 1fr']\n }\n },\n // TODO: confirm when we have tokens\n rowGap: {\n size: {\n XS: 16,\n S: 20,\n M: 24,\n L: 32,\n XL: 40\n }\n },\n columnGap: 'text-to-control'\n }, getAllowedOverrides())({labelPosition, size}, props.styles)}>\n <FormContext.Provider\n value={{\n labelPosition,\n labelAlign,\n necessityIndicator,\n isRequired,\n isDisabled,\n isEmphasized,\n size\n }}>\n {props.children}\n </FormContext.Provider>\n </RACForm>\n );\n});\n"],"names":[],"version":3,"file":"Form.css.map"}
1
+ {"mappings":"AAqFkD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/Form.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 {createContext, forwardRef, ReactNode, useContext, useMemo} from 'react';\nimport {DOMRef, SpectrumLabelableProps} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {Form as RACForm, FormProps as RACFormProps} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\n\ninterface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'contextualHelp'> {\n /**\n * Size of the Form elements.\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** Whether the Form elements are disabled. */\n isDisabled?: boolean,\n /** Whether the Form elements are rendered with their emphasized style. */\n isEmphasized?: boolean\n}\n\nexport interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'children'>, StyleProps {\n children?: ReactNode\n}\n\nexport const FormContext = createContext<FormStyleProps | null>(null);\nexport function useFormProps<T extends FormStyleProps>(props: T): T {\n let ctx = useContext(FormContext);\n let isSkeleton = useIsSkeleton();\n return useMemo(() => {\n let result: T = props;\n if (ctx || isSkeleton) {\n result = {...props};\n }\n\n if (ctx) {\n // This is a subset of mergeProps. We just need to merge non-undefined values.\n for (let key in ctx) {\n if (result[key] === undefined) {\n result[key] = ctx[key];\n }\n }\n }\n\n // Skeleton always wins over local props.\n if (isSkeleton) {\n result.isDisabled = true;\n }\n\n return result;\n }, [ctx, props, isSkeleton]);\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nexport const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {\n let {\n labelPosition = 'top',\n labelAlign,\n necessityIndicator,\n isRequired,\n isDisabled,\n isEmphasized,\n size = 'M',\n ...formProps\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACForm\n {...formProps}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + style({\n display: 'grid',\n gridTemplateColumns: {\n labelPosition: {\n top: ['[field] 1fr'],\n side: ['[label] auto', '[field] 1fr']\n }\n },\n // TODO: confirm when we have tokens\n rowGap: {\n size: {\n XS: 16,\n S: 20,\n M: 24,\n L: 32,\n XL: 40\n }\n },\n columnGap: 'text-to-control'\n }, getAllowedOverrides())({labelPosition, size}, props.styles)}>\n <FormContext.Provider\n value={{\n labelPosition,\n labelAlign,\n necessityIndicator,\n isRequired,\n isDisabled,\n isEmphasized,\n size\n }}>\n {props.children}\n </FormContext.Provider>\n </RACForm>\n );\n});\n"],"names":[],"version":3,"file":"Form.css.map"}
@@ -265,8 +265,6 @@
265
265
  }
266
266
  }
267
267
 
268
- @layer UNSAFE_overrides;
269
-
270
268
  @layer _.b.b {
271
269
  @media not ((hover: hover) and (pointer: fine)) {
272
270
  ._ebm {
@@ -336,8 +334,4 @@
336
334
  }
337
335
  }
338
336
  }
339
-
340
- .\.:not(#a#b) {
341
- all: revert-layer;
342
- }
343
337
  /*# sourceMappingURL=FullscreenDialog.css.map */
@@ -1 +1 @@
1
- {"mappings":"ACiCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAWG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMO;;;;EAAA;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhCX;EAAA;;;;;;EAAA;;;;EAeC;;;;EAiBU;;;;;AAhCX;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAOD;;;;IAQE;;;;;;AARF;EAAA;IAAA;;;;IAAA;;;;IAyBY;;;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAjBV;EAAA;IAAA;;;;;;AAWG","sources":["08b4ee4dfdd3fb23","packages/@react-spectrum/s2/src/FullscreenDialog.tsx"],"sourcesContent":["@import \"eeaa872c96a96271\";\n@import \"73747769865790da\";\n@import \"b069e4051c7a440c\";\n@import \"38e814a136cf19ae\";\n@import \"1bc91e670be29799\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n /**\n * The variant of fullscreen dialog to display.\n * @default \"fullscreen\"\n */\n variant?: 'fullscreen' | 'fullscreenTakeover',\n /** Whether pressing the escape key to close the dialog should be disabled. */\n isKeyboardDismissDisabled?: boolean\n}\n\nconst heading = style({\n gridArea: 'heading',\n flexGrow: 1,\n marginY: 0,\n font: 'heading'\n});\n\nconst header = style({\n gridArea: 'header',\n marginX: {\n sm: 'auto'\n },\n font: 'body-lg'\n});\n\nconst content = style({\n gridArea: 'content',\n flexGrow: 1,\n overflowY: {\n default: 'auto',\n // Make the whole dialog scroll rather than only the content when the height it small.\n '@media (height < 400)': 'visible'\n },\n font: 'body'\n});\n\nconst buttonGroup = style({\n gridArea: 'buttons',\n marginStart: 'auto',\n maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n display: 'grid',\n gridTemplateAreas: {\n // Button group moves to the bottom on small screens.\n default: [\n 'heading',\n 'header',\n '.',\n 'content',\n '.',\n 'buttons'\n ],\n sm: [\n 'heading header buttons',\n '. . .',\n 'content content content'\n ]\n },\n gridTemplateColumns: {\n default: ['1fr'],\n sm: ['auto', '1fr', 'auto']\n },\n gridTemplateRows: {\n default: [\n 'auto',\n 'auto',\n 24,\n '1fr',\n 24,\n 'auto'\n ],\n sm: [\n 'auto',\n 32,\n '1fr'\n ]\n },\n padding: {\n default: 24,\n sm: 32\n },\n columnGap: {\n default: 16,\n sm: 24\n },\n maxHeight: '[inherit]',\n height: 'full',\n boxSizing: 'border-box',\n outlineStyle: 'none',\n fontFamily: 'sans',\n borderRadius: '[inherit]',\n overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {\n let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n let domRef = useDOMRef(ref);\n\n return (\n <Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n <RACDialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogInner}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n <Provider\n values={[\n [HeadingContext, {styles: heading}],\n [HeaderContext, {styles: header}],\n [ContentContext, {styles: content}],\n [ButtonGroupContext, {styles: buttonGroup}]\n ]}>\n {children}\n </Provider>\n </OverlayTriggerStateContext.Provider>\n ))}\n </RACDialog>\n </Modal>\n );\n});\n\n"],"names":[],"version":3,"file":"FullscreenDialog.css.map"}
1
+ {"mappings":"ACiCgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAWG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAMO;;;;EAAA;;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhCX;EAAA;;;;;;EAAA;;;;EAeC;;;;EAiBU;;;;;AAhCX;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAOD;;;;IAQE;;;;;;AARF;EAAA;IAAA;;;;IAAA;;;;IAyBY;;;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAjBV;EAAA;IAAA","sources":["08b4ee4dfdd3fb23","packages/@react-spectrum/s2/src/FullscreenDialog.tsx"],"sourcesContent":["@import \"eeaa872c96a96271\";\n@import \"73747769865790da\";\n@import \"b069e4051c7a440c\";\n@import \"38e814a136cf19ae\";\n@import \"1bc91e670be29799\";\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 {ButtonGroupContext} from './ButtonGroup';\nimport {composeRenderProps, OverlayTriggerStateContext, Provider, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';\nimport {ContentContext, HeaderContext, HeadingContext} from './Content';\nimport {DOMRef} from '@react-types/shared';\nimport {forwardRef} from 'react';\nimport {Modal} from './Modal';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\n\n// TODO: what style overrides should be allowed?\nexport interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {\n /**\n * The variant of fullscreen dialog to display.\n * @default \"fullscreen\"\n */\n variant?: 'fullscreen' | 'fullscreenTakeover',\n /** Whether pressing the escape key to close the dialog should be disabled. */\n isKeyboardDismissDisabled?: boolean\n}\n\nconst heading = style({\n gridArea: 'heading',\n flexGrow: 1,\n marginY: 0,\n font: 'heading'\n});\n\nconst header = style({\n gridArea: 'header',\n marginX: {\n sm: 'auto'\n },\n font: 'body-lg'\n});\n\nconst content = style({\n gridArea: 'content',\n flexGrow: 1,\n overflowY: {\n default: 'auto',\n // Make the whole dialog scroll rather than only the content when the height it small.\n '@media (height < 400)': 'visible'\n },\n font: 'body'\n});\n\nconst buttonGroup = style({\n gridArea: 'buttons',\n marginStart: 'auto',\n maxWidth: 'full'\n});\n\nexport const dialogInner = style({\n display: 'grid',\n gridTemplateAreas: {\n // Button group moves to the bottom on small screens.\n default: [\n 'heading',\n 'header',\n '.',\n 'content',\n '.',\n 'buttons'\n ],\n sm: [\n 'heading header buttons',\n '. . .',\n 'content content content'\n ]\n },\n gridTemplateColumns: {\n default: ['1fr'],\n sm: ['auto', '1fr', 'auto']\n },\n gridTemplateRows: {\n default: [\n 'auto',\n 'auto',\n 24,\n '1fr',\n 24,\n 'auto'\n ],\n sm: [\n 'auto',\n 32,\n '1fr'\n ]\n },\n padding: {\n default: 24,\n sm: 32\n },\n columnGap: {\n default: 16,\n sm: 24\n },\n maxHeight: '[inherit]',\n height: 'full',\n boxSizing: 'border-box',\n outlineStyle: 'none',\n fontFamily: 'sans',\n borderRadius: '[inherit]',\n overflow: 'auto'\n});\n\n/**\n * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.\n */\nexport const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {\n let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;\n let domRef = useDOMRef(ref);\n\n return (\n <Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>\n <RACDialog\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + dialogInner}>\n {composeRenderProps(props.children, (children) => (\n // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.\n <OverlayTriggerStateContext.Provider value={null}>\n <Provider\n values={[\n [HeadingContext, {styles: heading}],\n [HeaderContext, {styles: header}],\n [ContentContext, {styles: content}],\n [ButtonGroupContext, {styles: buttonGroup}]\n ]}>\n {children}\n </Provider>\n </OverlayTriggerStateContext.Provider>\n ))}\n </RACDialog>\n </Modal>\n );\n});\n\n"],"names":[],"version":3,"file":"FullscreenDialog.css.map"}
@@ -314,8 +314,6 @@
314
314
  }
315
315
  }
316
316
 
317
- @layer UNSAFE_overrides;
318
-
319
317
  @layer _.b.b {
320
318
  @media not ((hover: hover) and (pointer: fine)) {
321
319
  ._ebb {
@@ -347,8 +345,4 @@
347
345
  }
348
346
  }
349
347
  }
350
-
351
- .\.:not(#a#b) {
352
- all: revert-layer;
353
- }
354
348
  /*# sourceMappingURL=IllustratedMessage.css.map */