@react-spectrum/s2 3.0.0-nightly-1b425caa2-250114 → 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.
- package/dist/Accordion.css +1 -5
- package/dist/Accordion.css.map +1 -1
- package/dist/ActionBar.cjs +3 -4
- package/dist/ActionBar.cjs.map +1 -1
- package/dist/ActionBar.css +9 -15
- package/dist/ActionBar.css.map +1 -1
- package/dist/ActionBar.mjs +3 -4
- package/dist/ActionBar.mjs.map +1 -1
- package/dist/ActionButton.css +0 -6
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButtonGroup.css +1 -5
- package/dist/ActionButtonGroup.css.map +1 -1
- package/dist/AlertDialog.css +1 -5
- package/dist/AlertDialog.css.map +1 -1
- package/dist/Avatar.css +1 -5
- package/dist/Avatar.css.map +1 -1
- package/dist/AvatarGroup.css +0 -6
- package/dist/AvatarGroup.css.map +1 -1
- package/dist/Badge.css +0 -6
- package/dist/Badge.css.map +1 -1
- package/dist/Breadcrumbs.cjs +2 -2
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +0 -6
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +2 -2
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.css +0 -6
- package/dist/Button.css.map +1 -1
- package/dist/ButtonGroup.css +1 -5
- package/dist/ButtonGroup.css.map +1 -1
- package/dist/Card.cjs +1 -1
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +0 -6
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +2 -2
- package/dist/Card.mjs.map +1 -1
- package/dist/CardView.css +1 -5
- package/dist/CardView.css.map +1 -1
- package/dist/CenterBaseline.css +1 -5
- package/dist/CenterBaseline.css.map +1 -1
- package/dist/Checkbox.css +0 -6
- package/dist/Checkbox.css.map +1 -1
- package/dist/CheckboxGroup.css +0 -6
- package/dist/CheckboxGroup.css.map +1 -1
- package/dist/ClearButton.css +1 -5
- package/dist/ClearButton.css.map +1 -1
- package/dist/CloseButton.css +1 -5
- package/dist/CloseButton.css.map +1 -1
- package/dist/ColorArea.css +1 -5
- package/dist/ColorArea.css.map +1 -1
- package/dist/ColorField.css +0 -6
- package/dist/ColorField.css.map +1 -1
- package/dist/ColorHandle.css +1 -5
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorSlider.css +0 -6
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSwatch.css +1 -5
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatchPicker.css +1 -5
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorWheel.css +1 -5
- package/dist/ColorWheel.css.map +1 -1
- package/dist/ComboBox.css +0 -6
- package/dist/ComboBox.css.map +1 -1
- package/dist/Content.cjs +3 -1
- package/dist/Content.cjs.map +1 -1
- package/dist/Content.mjs +3 -1
- package/dist/Content.mjs.map +1 -1
- package/dist/ContextualHelp.css +0 -6
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/CustomDialog.css +1 -5
- package/dist/CustomDialog.css.map +1 -1
- package/dist/Dialog.css +0 -6
- package/dist/Dialog.css.map +1 -1
- package/dist/Disclosure.css +0 -6
- package/dist/Disclosure.css.map +1 -1
- package/dist/Divider.css +1 -5
- package/dist/Divider.css.map +1 -1
- package/dist/DropZone.css +0 -6
- package/dist/DropZone.css.map +1 -1
- package/dist/Field.css +0 -6
- package/dist/Field.css.map +1 -1
- package/dist/Form.css +1 -5
- package/dist/Form.css.map +1 -1
- package/dist/FullscreenDialog.css +0 -6
- package/dist/FullscreenDialog.css.map +1 -1
- package/dist/IllustratedMessage.css +0 -6
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/Image.css +1 -5
- package/dist/Image.css.map +1 -1
- package/dist/InlineAlert.css +0 -6
- package/dist/InlineAlert.css.map +1 -1
- package/dist/Link.css +0 -6
- package/dist/Link.css.map +1 -1
- package/dist/Menu.css +0 -6
- package/dist/Menu.css.map +1 -1
- package/dist/Meter.css +0 -6
- package/dist/Meter.css.map +1 -1
- package/dist/Modal.css +1 -5
- package/dist/Modal.css.map +1 -1
- package/dist/NumberField.css +0 -6
- package/dist/NumberField.css.map +1 -1
- package/dist/Picker.css +0 -6
- package/dist/Picker.css.map +1 -1
- package/dist/Popover.css +1 -5
- package/dist/Popover.css.map +1 -1
- package/dist/ProgressBar.css +0 -6
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressCircle.css +1 -5
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/Provider.css +1 -5
- package/dist/Provider.css.map +1 -1
- package/dist/Radio.css +0 -6
- package/dist/Radio.css.map +1 -1
- package/dist/RadioGroup.css +0 -6
- package/dist/RadioGroup.css.map +1 -1
- package/dist/SearchField.css +0 -6
- package/dist/SearchField.css.map +1 -1
- package/dist/SegmentedControl.css +0 -6
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/Slider.css +0 -6
- package/dist/Slider.css.map +1 -1
- package/dist/StatusLight.css +0 -6
- package/dist/StatusLight.css.map +1 -1
- package/dist/Switch.css +0 -6
- package/dist/Switch.css.map +1 -1
- package/dist/TableView.css +0 -6
- package/dist/TableView.css.map +1 -1
- package/dist/Tabs.css +0 -6
- package/dist/Tabs.css.map +1 -1
- package/dist/TagGroup.cjs +2 -2
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +0 -6
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +2 -2
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.css +0 -6
- package/dist/TextField.css.map +1 -1
- package/dist/ToggleButton.css +1 -5
- package/dist/ToggleButton.css.map +1 -1
- package/dist/Tooltip.css +0 -6
- package/dist/Tooltip.css.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/icons/Skeleton.cjs +2 -2
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +3 -5
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +3 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +19 -22
- package/src/ActionBar.tsx +3 -6
- package/src/Breadcrumbs.tsx +2 -2
- package/src/Card.tsx +2 -2
- package/src/Content.tsx +2 -1
- package/src/Skeleton.tsx +3 -3
- package/src/TagGroup.tsx +2 -2
- package/style/__tests__/style-macro.test.js +2 -6
- package/style/dist/style-macro.cjs +4 -2
- package/style/dist/style-macro.cjs.map +1 -1
- package/style/dist/style-macro.mjs +4 -2
- package/style/dist/style-macro.mjs.map +1 -1
- package/style/style-macro.ts +8 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC6D0C;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtCmB;;AAsBV;EAAA;IAAA
|
|
1
|
+
{"mappings":"AC6D0C;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBV;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgBT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtCmB;;AAsBV;EAAA;IAAA","sources":["26baf334ec196f8c","packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx"],"sourcesContent":["@import \"e16c0c8e50c537a4\";\n@import \"6325f62168102e9d\";\n@import \"aa108d3a66fddade\";\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 {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, ContextValue, SlotProps} from 'react-aria-components';\nimport {Color} from '@react-types/color';\nimport {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';\nimport {createContext, forwardRef, ReactElement, ReactNode} from 'react';\nimport {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';\nimport {focusRing, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, StyleProps, SlotProps {\n /** The ColorSwatches within the ColorSwatchPicker. */\n children: ReactNode,\n /**\n * The amount of padding between the swatches.\n * @default 'regular'\n */\n density?: 'compact' | 'regular' | 'spacious',\n /**\n * The size of the color swatches.\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L',\n /**\n * The corner rounding of the color swatches.\n * @default 'none'\n */\n rounding?: 'none' | 'default' | 'full'\n}\n\nexport const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.\n */\nexport const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);\n let {\n density = 'regular',\n size = 'M',\n rounding = 'none',\n ...otherProps\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <AriaColorSwatchPicker\n {...otherProps}\n ref={domRef}\n className={props.UNSAFE_className + style({\n display: 'flex',\n flexWrap: 'wrap',\n gap: {\n density: {\n compact: space(2),\n regular: 4,\n spacious: space(6)\n }\n }\n }, getAllowedOverrides())({density}, props.styles)}>\n <InternalColorSwatchContext.Provider value={{useWrapper, size, rounding}}>\n {props.children}\n </InternalColorSwatchContext.Provider>\n </AriaColorSwatchPicker>\n );\n});\n\nfunction useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {\n return (\n <AriaColorSwatchPickerItem\n color={color}\n className={renderProps => style({\n ...focusRing(),\n position: 'relative',\n borderRadius: {\n rounding: {\n none: 'none',\n default: 'sm',\n full: 'full'\n }\n }\n })({...renderProps, rounding})}>\n {({isSelected}) => (<>\n {swatch}\n {isSelected && (\n <div\n aria-hidden\n className={style({\n position: 'absolute',\n pointerEvents: 'none',\n inset: 0,\n boxSizing: 'border-box',\n borderColor: 'gray-900',\n borderStyle: 'solid',\n borderWidth: 2,\n outlineColor: 'gray-25',\n outlineStyle: 'solid',\n outlineWidth: 2,\n outlineOffset: -4,\n forcedColorAdjust: 'none',\n borderRadius: '[inherit]'\n })} />\n )}\n </>)}\n </AriaColorSwatchPickerItem>\n );\n}\n"],"names":[],"version":3,"file":"ColorSwatchPicker.css.map"}
|
package/dist/ColorWheel.css
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
@layer _.b
|
|
67
|
+
@layer _.b;
|
|
68
68
|
|
|
69
69
|
@layer _.b.a {
|
|
70
70
|
@media (forced-colors: active) {
|
|
@@ -73,8 +73,4 @@
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
|
|
77
|
-
.\.:not(#a#b) {
|
|
78
|
-
all: revert-layer;
|
|
79
|
-
}
|
|
80
76
|
/*# sourceMappingURL=ColorWheel.css.map */
|
package/dist/ColorWheel.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC4DqB;EAAA;;;;EAAA;;;;EAkBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBA;;AAAA;EAAA;IAAA
|
|
1
|
+
{"mappings":"AC4DqB;EAAA;;;;EAAA;;;;EAkBA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBA;;AAAA;EAAA;IAAA","sources":["08c4afb7d0604130","packages/@react-spectrum/s2/src/ColorWheel.tsx"],"sourcesContent":["@import \"54eced5f2b164503\";\n@import \"1e65bf1fcba37015\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ColorWheel as AriaColorWheel,\n ColorWheelProps as AriaColorWheelProps,\n ColorWheelTrack,\n ContextValue\n} from 'react-aria-components';\nimport {ColorHandle} from './ColorHandle';\nimport {createContext, forwardRef} from 'react';\nimport {DOMRef, DOMRefValue} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleProps} from './style-utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' | 'className' | 'style' | 'outerRadius' | 'innerRadius'>, StyleProps {\n /**\n * @default 192\n */\n size?: number\n}\n\nexport const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);\n let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;\n let containerRef = useDOMRef(ref);\n // TODO: how to do mobile scaling?\n let {size = 192} = props;\n let outerRadius = Math.max(size, 175) / 2;\n let thickness = 24;\n let innerRadius = outerRadius - 24;\n return (\n <AriaColorWheel \n {...props}\n outerRadius={outerRadius}\n innerRadius={innerRadius}\n ref={containerRef}\n style={UNSAFE_style}\n className={UNSAFE_className + styles}>\n {({isDisabled, state}) => (<>\n <ColorWheelTrack\n style={({defaultStyle, isDisabled}) => ({\n background: isDisabled ? undefined : defaultStyle.background\n })}\n className={style({\n // Outer border\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineOffset: -1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n },\n backgroundColor: {\n isDisabled: 'disabled'\n }\n })} />\n <div\n className={style({\n // Inner border\n position: 'absolute',\n inset: 24,\n pointerEvents: 'none',\n borderRadius: 'full',\n outlineColor: {\n default: 'gray-1000/10',\n forcedColors: 'ButtonBorder'\n },\n outlineWidth: 1,\n outlineStyle: {\n default: 'solid',\n isDisabled: 'none'\n }\n })({isDisabled})} />\n <ColorHandle\n containerRef={containerRef}\n getPosition={() => {\n let {x, y} = state.getThumbPosition(outerRadius - thickness / 2);\n return {\n x: (outerRadius + x) / (outerRadius * 2),\n y: (outerRadius + y) / (outerRadius * 2)\n };\n }} />\n </>)}\n </AriaColorWheel>\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.css.map"}
|
package/dist/ComboBox.css
CHANGED
|
@@ -317,8 +317,6 @@
|
|
|
317
317
|
}
|
|
318
318
|
}
|
|
319
319
|
|
|
320
|
-
@layer UNSAFE_overrides;
|
|
321
|
-
|
|
322
320
|
@layer _.b.a {
|
|
323
321
|
@media (forced-colors: active) {
|
|
324
322
|
._Pag {
|
|
@@ -382,8 +380,4 @@
|
|
|
382
380
|
}
|
|
383
381
|
}
|
|
384
382
|
}
|
|
385
|
-
|
|
386
|
-
.\.:not(#a#b) {
|
|
387
|
-
all: revert-layer;
|
|
388
|
-
}
|
|
389
383
|
/*# sourceMappingURL=ComboBox.css.map */
|
package/dist/ComboBox.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"ACiGoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA;;;;;;AAkDA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
|
|
1
|
+
{"mappings":"ACiGoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CD;;;;EAAA;;;;EAAA;;;;EAsFiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBd;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDA;;;;EAAA;;;;;AA3MF;EAiIgB;;;;;AAjIhB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiIgB;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAwBd;EAAA;IAAA","sources":["13beeca66baffd35","packages/@react-spectrum/s2/src/ComboBox.tsx"],"sourcesContent":["@import \"434b6dc809c84a70\";\n@import \"9807be49da09aafb\";\n@import \"affe2b90434aec6a\";\n@import \"96ebc07fe89537d3\";\n@import \"85ea669da1afabc2\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n ComboBox as AriaComboBox,\n ComboBoxProps as AriaComboBoxProps,\n ListBoxSection as AriaListBoxSection,\n PopoverProps as AriaPopoverProps,\n Button,\n ContextValue,\n InputContext,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SectionProps\n} from 'react-aria-components';\nimport {baseColor, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n Divider,\n icon,\n iconCenterWrapper,\n label,\n menuitem,\n section,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {menu} from './Picker';\nimport {mergeRefs, useResizeObserver} from '@react-aria/utils';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface ComboboxStyleProps {\n /**\n * The size of the Combobox.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\nexport interface ComboBoxProps<T extends object> extends\n Omit<AriaComboBoxProps<T>, 'children' | 'style' | 'className' | 'defaultFilter' | 'allowsEmptyCollection'>,\n ComboboxStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n HelpTextProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number\n}\n\nexport const ComboBoxContext = createContext<ContextValue<Partial<ComboBoxProps<any>>, TextFieldRef>>(null);\n\nconst inputButton = style({\n display: 'flex',\n outlineStyle: 'none',\n textAlign: 'center',\n borderStyle: 'none',\n borderRadius: 'control-sm',\n alignItems: 'center',\n justifyContent: 'center',\n size: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonFace'\n }\n }\n});\n\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nlet InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});\n\n/**\n * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let buttonRef = useRef<HTMLButtonElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n menuWidth,\n label,\n description: descriptionMessage,\n errorMessage,\n children,\n items,\n size = 'M',\n labelPosition = 'top',\n labelAlign = 'start',\n necessityIndicator,\n UNSAFE_className = '',\n UNSAFE_style,\n ...pickerProps\n } = props;\n\n // Expose imperative interface for ref\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(domRef, inputRef),\n select() {\n if (inputRef.current) {\n inputRef.current.select();\n }\n },\n getInputElement() {\n return inputRef.current;\n }\n }));\n\n // Better way to encode this into a style? need to account for flipping\n let menuOffset: number;\n if (size === 'S') {\n menuOffset = 6;\n } else if (size === 'M') {\n menuOffset = 6;\n } else if (size === 'L') {\n menuOffset = 7;\n } else {\n menuOffset = 8;\n }\n\n let triggerRef = useRef<HTMLDivElement>(null);\n // Make menu width match input + button\n let [triggerWidth, setTriggerWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (triggerRef.current) {\n let inputRect = triggerRef.current.getBoundingClientRect();\n let minX = inputRect.left;\n let maxX = inputRect.right;\n setTriggerWidth((maxX - minX) + 'px');\n }\n }, [triggerRef, setTriggerWidth]);\n\n useResizeObserver({\n ref: triggerRef,\n onResize: onResize\n });\n\n return (\n <AriaComboBox\n {...pickerProps}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n isInForm: !!formContext,\n labelPosition,\n size\n }, props.styles)}>\n {({isDisabled, isOpen, isRequired, isInvalid}) => (\n <>\n <InternalComboboxContext.Provider value={{size}}>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={isRequired}\n size={size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n <FieldGroup\n ref={triggerRef}\n role=\"presentation\"\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n paddingStart: 'edge-to-text',\n // better way to do this one? it's not actually half, they are\n // [9, 4], [12, 6], [15, 8], [18, 8]\n // also noticed that our measurement is including the border, making the padding too much\n paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'\n })({size})}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n <Input />\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while ComboBox is open.\n // @ts-ignore\n isPressed={false}\n style={renderProps => pressScale(buttonRef)(renderProps)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n </FieldGroup>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n <PopoverBase\n hideArrow\n triggerRef={triggerRef}\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n UNSAFE_style={{\n width: menuWidth ? `${menuWidth}px` : undefined,\n // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out\n '--trigger-width': `calc(${triggerWidth} - 2px)`\n } as CSSProperties}\n styles={style({\n minWidth: '[var(--trigger-width)]',\n width: '[var(--trigger-width)]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n 'description': {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu({size})}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </InternalComboboxContext.Provider>\n </>\n )}\n </AriaComboBox>\n );\n});\n\n\nexport interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\n\nconst checkmarkIconSize = {\n S: 'XS',\n M: 'M',\n L: 'L',\n XL: 'XL'\n} as const;\n\nexport function ComboBoxItem(props: ComboBoxItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n let {size} = useContext(InternalComboboxContext);\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <>\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}\n }\n }],\n [TextContext, {\n slots: {\n label: {styles: label({size})},\n description: {styles: description({...renderProps, size})}\n }\n }]\n ]}>\n {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text slot=\"label\">{children}</Text> : children}\n </Provider>\n </>\n );\n }}\n </ListBoxItem>\n );\n}\n\nexport interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}\nexport function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {\n let {size} = useContext(InternalComboboxContext);\n return (\n <>\n <AriaListBoxSection\n {...props}\n className={section({size})}>\n {props.children}\n </AriaListBoxSection>\n <Divider />\n </>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.css.map"}
|
package/dist/Content.cjs
CHANGED
|
@@ -3,6 +3,7 @@ var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
|
|
|
3
3
|
var $bwC5I$reactjsxruntime = require("react/jsx-runtime");
|
|
4
4
|
var $bwC5I$reactariacomponents = require("react-aria-components");
|
|
5
5
|
var $bwC5I$react = require("react");
|
|
6
|
+
var $bwC5I$reactariautils = require("@react-aria/utils");
|
|
6
7
|
var $bwC5I$reactspectrumutils = require("@react-spectrum/utils");
|
|
7
8
|
|
|
8
9
|
|
|
@@ -38,6 +39,7 @@ $parcel$export(module.exports, "Footer", () => $6367bc87eb7d24ad$export$a06f1c67
|
|
|
38
39
|
|
|
39
40
|
|
|
40
41
|
|
|
42
|
+
|
|
41
43
|
const $6367bc87eb7d24ad$export$d688439359537581 = /*#__PURE__*/ (0, $bwC5I$react.createContext)(null);
|
|
42
44
|
const $6367bc87eb7d24ad$export$a8a3e93435678ff9 = /*#__PURE__*/ (0, $bwC5I$react.forwardRef)(function Heading(props, ref) {
|
|
43
45
|
[props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $6367bc87eb7d24ad$export$d688439359537581);
|
|
@@ -93,7 +95,7 @@ const $6367bc87eb7d24ad$export$5f1af8db9871e1d6 = /*#__PURE__*/ (0, $bwC5I$react
|
|
|
93
95
|
...otherProps,
|
|
94
96
|
ref: domRef,
|
|
95
97
|
// @ts-ignore - compatibility with React < 19
|
|
96
|
-
inert: isSkeleton
|
|
98
|
+
inert: (0, $bwC5I$reactariautils.inertValue)(isSkeleton),
|
|
97
99
|
className: UNSAFE_className + styles,
|
|
98
100
|
style: UNSAFE_style,
|
|
99
101
|
slot: slot || undefined,
|
package/dist/Content.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
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.cjs.map"}
|
package/dist/Content.mjs
CHANGED
|
@@ -3,6 +3,7 @@ import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} fr
|
|
|
3
3
|
import {jsx as $7TVeb$jsx} from "react/jsx-runtime";
|
|
4
4
|
import {Heading as $7TVeb$Heading, Header as $7TVeb$Header, TextContext as $7TVeb$TextContext, Text as $7TVeb$Text, Keyboard as $7TVeb$Keyboard} from "react-aria-components";
|
|
5
5
|
import {createContext as $7TVeb$createContext, forwardRef as $7TVeb$forwardRef, useContext as $7TVeb$useContext} from "react";
|
|
6
|
+
import {inertValue as $7TVeb$inertValue} from "@react-aria/utils";
|
|
6
7
|
import {useDOMRef as $7TVeb$useDOMRef} from "@react-spectrum/utils";
|
|
7
8
|
|
|
8
9
|
/*
|
|
@@ -21,6 +22,7 @@ import {useDOMRef as $7TVeb$useDOMRef} from "@react-spectrum/utils";
|
|
|
21
22
|
|
|
22
23
|
|
|
23
24
|
|
|
25
|
+
|
|
24
26
|
const $8e847109a6ab556d$export$d688439359537581 = /*#__PURE__*/ (0, $7TVeb$createContext)(null);
|
|
25
27
|
const $8e847109a6ab556d$export$a8a3e93435678ff9 = /*#__PURE__*/ (0, $7TVeb$forwardRef)(function Heading(props, ref) {
|
|
26
28
|
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $8e847109a6ab556d$export$d688439359537581);
|
|
@@ -76,7 +78,7 @@ const $8e847109a6ab556d$export$5f1af8db9871e1d6 = /*#__PURE__*/ (0, $7TVeb$forwa
|
|
|
76
78
|
...otherProps,
|
|
77
79
|
ref: domRef,
|
|
78
80
|
// @ts-ignore - compatibility with React < 19
|
|
79
|
-
inert: isSkeleton
|
|
81
|
+
inert: (0, $7TVeb$inertValue)(isSkeleton),
|
|
80
82
|
className: UNSAFE_className + styles,
|
|
81
83
|
style: UNSAFE_style,
|
|
82
84
|
slot: slot || undefined,
|
package/dist/Content.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
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"}
|
package/dist/ContextualHelp.css
CHANGED
|
@@ -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;;;;;
|
|
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"}
|
package/dist/CustomDialog.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAsCoB
|
|
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 */
|
package/dist/Dialog.css.map
CHANGED
|
@@ -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;;;;;
|
|
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"}
|
package/dist/Disclosure.css
CHANGED
|
@@ -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 */
|
package/dist/Disclosure.css.map
CHANGED
|
@@ -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
package/dist/Divider.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4CuB
|
|
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