@react-spectrum/s2 3.0.0-nightly-4baa1b08e-241029 → 3.0.0-nightly-dcc0752f8-241031
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/ActionButton.cjs +10 -32
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +20 -60
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +10 -32
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/Avatar.cjs +2 -4
- package/dist/Avatar.cjs.map +1 -1
- package/dist/Avatar.css +4 -16
- package/dist/Avatar.css.map +1 -1
- package/dist/Avatar.mjs +2 -4
- package/dist/Avatar.mjs.map +1 -1
- package/dist/Badge.cjs +5 -16
- package/dist/Badge.cjs.map +1 -1
- package/dist/Badge.css +10 -30
- package/dist/Badge.css.map +1 -1
- package/dist/Badge.mjs +5 -16
- package/dist/Badge.mjs.map +1 -1
- package/dist/Breadcrumbs.cjs +12 -41
- package/dist/Breadcrumbs.cjs.map +1 -1
- package/dist/Breadcrumbs.css +38 -86
- package/dist/Breadcrumbs.css.map +1 -1
- package/dist/Breadcrumbs.mjs +12 -41
- package/dist/Breadcrumbs.mjs.map +1 -1
- package/dist/Button.cjs +19 -59
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +37 -113
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +19 -59
- package/dist/Button.mjs.map +1 -1
- package/dist/Card.cjs +27 -67
- package/dist/Card.cjs.map +1 -1
- package/dist/Card.css +42 -117
- package/dist/Card.css.map +1 -1
- package/dist/Card.mjs +27 -67
- package/dist/Card.mjs.map +1 -1
- package/dist/Checkbox.cjs +9 -27
- package/dist/Checkbox.cjs.map +1 -1
- package/dist/Checkbox.css +17 -49
- package/dist/Checkbox.css.map +1 -1
- package/dist/Checkbox.mjs +9 -27
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/CheckboxGroup.cjs +5 -16
- package/dist/CheckboxGroup.cjs.map +1 -1
- package/dist/CheckboxGroup.css +10 -30
- package/dist/CheckboxGroup.css.map +1 -1
- package/dist/CheckboxGroup.mjs +5 -16
- package/dist/CheckboxGroup.mjs.map +1 -1
- package/dist/ClearButton.cjs +6 -17
- package/dist/ClearButton.cjs.map +1 -1
- package/dist/ClearButton.css +11 -35
- package/dist/ClearButton.css.map +1 -1
- package/dist/ClearButton.mjs +6 -17
- package/dist/ClearButton.mjs.map +1 -1
- package/dist/CloseButton.cjs +10 -32
- package/dist/CloseButton.cjs.map +1 -1
- package/dist/CloseButton.css +20 -64
- package/dist/CloseButton.css.map +1 -1
- package/dist/CloseButton.mjs +10 -32
- package/dist/CloseButton.mjs.map +1 -1
- package/dist/ColorArea.cjs +4 -16
- package/dist/ColorArea.cjs.map +1 -1
- package/dist/ColorArea.css +8 -28
- package/dist/ColorArea.css.map +1 -1
- package/dist/ColorArea.mjs +4 -16
- package/dist/ColorArea.mjs.map +1 -1
- package/dist/ColorField.cjs +5 -16
- package/dist/ColorField.cjs.map +1 -1
- package/dist/ColorField.css +10 -30
- package/dist/ColorField.css.map +1 -1
- package/dist/ColorField.mjs +5 -16
- package/dist/ColorField.mjs.map +1 -1
- package/dist/ColorHandle.cjs +5 -15
- package/dist/ColorHandle.cjs.map +1 -1
- package/dist/ColorHandle.css +10 -30
- package/dist/ColorHandle.css.map +1 -1
- package/dist/ColorHandle.mjs +5 -15
- package/dist/ColorHandle.mjs.map +1 -1
- package/dist/ColorSlider.cjs +6 -17
- package/dist/ColorSlider.cjs.map +1 -1
- package/dist/ColorSlider.css +34 -50
- package/dist/ColorSlider.css.map +1 -1
- package/dist/ColorSlider.mjs +6 -17
- package/dist/ColorSlider.mjs.map +1 -1
- package/dist/ColorSwatch.cjs +8 -26
- package/dist/ColorSwatch.cjs.map +1 -1
- package/dist/ColorSwatch.css +16 -52
- package/dist/ColorSwatch.css.map +1 -1
- package/dist/ColorSwatch.mjs +8 -26
- package/dist/ColorSwatch.mjs.map +1 -1
- package/dist/ColorSwatchPicker.cjs +6 -16
- package/dist/ColorSwatchPicker.cjs.map +1 -1
- package/dist/ColorSwatchPicker.css +8 -28
- package/dist/ColorSwatchPicker.css.map +1 -1
- package/dist/ColorSwatchPicker.mjs +6 -16
- package/dist/ColorSwatchPicker.mjs.map +1 -1
- package/dist/ComboBox.cjs +23 -72
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +64 -152
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +24 -73
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +1 -1
- package/dist/ContextualHelp.css +2 -6
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +1 -1
- package/dist/Dialog.cjs +2 -2
- package/dist/Dialog.css +2 -2
- package/dist/Dialog.mjs +2 -2
- package/dist/Disclosure.cjs +22 -61
- package/dist/Disclosure.cjs.map +1 -1
- package/dist/Disclosure.css +47 -91
- package/dist/Disclosure.css.map +1 -1
- package/dist/Disclosure.mjs +22 -61
- package/dist/Disclosure.mjs.map +1 -1
- package/dist/DropZone.cjs +2 -4
- package/dist/DropZone.cjs.map +1 -1
- package/dist/DropZone.css +4 -16
- package/dist/DropZone.css.map +1 -1
- package/dist/DropZone.mjs +2 -4
- package/dist/DropZone.mjs.map +1 -1
- package/dist/Field.cjs +16 -47
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +31 -95
- package/dist/Field.css.map +1 -1
- package/dist/Field.mjs +16 -47
- package/dist/Field.mjs.map +1 -1
- package/dist/IllustratedMessage.cjs +6 -20
- package/dist/IllustratedMessage.cjs.map +1 -1
- package/dist/IllustratedMessage.css +10 -24
- package/dist/IllustratedMessage.css.map +1 -1
- package/dist/IllustratedMessage.mjs +6 -20
- package/dist/IllustratedMessage.mjs.map +1 -1
- package/dist/Image.cjs +2 -2
- package/dist/Image.css +2 -2
- package/dist/Image.mjs +2 -2
- package/dist/InlineAlert.cjs +2 -5
- package/dist/InlineAlert.cjs.map +1 -1
- package/dist/InlineAlert.css +11 -15
- package/dist/InlineAlert.css.map +1 -1
- package/dist/InlineAlert.mjs +2 -5
- package/dist/InlineAlert.mjs.map +1 -1
- package/dist/Menu.cjs +23 -68
- package/dist/Menu.cjs.map +1 -1
- package/dist/Menu.css +32 -96
- package/dist/Menu.css.map +1 -1
- package/dist/Menu.mjs +24 -69
- package/dist/Menu.mjs.map +1 -1
- package/dist/Meter.cjs +22 -68
- package/dist/Meter.cjs.map +1 -1
- package/dist/Meter.css +63 -139
- package/dist/Meter.css.map +1 -1
- package/dist/Meter.mjs +22 -68
- package/dist/Meter.mjs.map +1 -1
- package/dist/Modal.cjs +2 -2
- package/dist/Modal.css +2 -2
- package/dist/Modal.mjs +2 -2
- package/dist/NumberField.cjs +23 -71
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +63 -146
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +23 -71
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +24 -68
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +50 -130
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +25 -69
- package/dist/Picker.mjs.map +1 -1
- package/dist/ProgressBar.cjs +23 -69
- package/dist/ProgressBar.cjs.map +1 -1
- package/dist/ProgressBar.css +64 -140
- package/dist/ProgressBar.css.map +1 -1
- package/dist/ProgressBar.mjs +23 -69
- package/dist/ProgressBar.mjs.map +1 -1
- package/dist/ProgressCircle.cjs +6 -20
- package/dist/ProgressCircle.cjs.map +1 -1
- package/dist/ProgressCircle.css +12 -40
- package/dist/ProgressCircle.css.map +1 -1
- package/dist/ProgressCircle.mjs +6 -20
- package/dist/ProgressCircle.mjs.map +1 -1
- package/dist/Provider.css +7 -0
- package/dist/Provider.css.map +1 -1
- package/dist/Radio.cjs +8 -26
- package/dist/Radio.cjs.map +1 -1
- package/dist/Radio.css +16 -48
- package/dist/Radio.css.map +1 -1
- package/dist/Radio.mjs +8 -26
- package/dist/Radio.mjs.map +1 -1
- package/dist/RadioGroup.cjs +5 -16
- package/dist/RadioGroup.cjs.map +1 -1
- package/dist/RadioGroup.css +10 -30
- package/dist/RadioGroup.css.map +1 -1
- package/dist/RadioGroup.mjs +5 -16
- package/dist/RadioGroup.mjs.map +1 -1
- package/dist/SearchField.cjs +5 -16
- package/dist/SearchField.cjs.map +1 -1
- package/dist/SearchField.css +10 -30
- package/dist/SearchField.css.map +1 -1
- package/dist/SearchField.mjs +5 -16
- package/dist/SearchField.mjs.map +1 -1
- package/dist/SegmentedControl.cjs +8 -14
- package/dist/SegmentedControl.cjs.map +1 -1
- package/dist/SegmentedControl.css +9 -29
- package/dist/SegmentedControl.css.map +1 -1
- package/dist/SegmentedControl.mjs +8 -14
- package/dist/SegmentedControl.mjs.map +1 -1
- package/dist/Slider.cjs +63 -196
- package/dist/Slider.cjs.map +1 -1
- package/dist/Slider.css +61 -181
- package/dist/Slider.css.map +1 -1
- package/dist/Slider.mjs +63 -196
- package/dist/Slider.mjs.map +1 -1
- package/dist/StatusLight.cjs +9 -27
- package/dist/StatusLight.cjs.map +1 -1
- package/dist/StatusLight.css +17 -49
- package/dist/StatusLight.css.map +1 -1
- package/dist/StatusLight.mjs +9 -27
- package/dist/StatusLight.mjs.map +1 -1
- package/dist/Switch.cjs +6 -15
- package/dist/Switch.cjs.map +1 -1
- package/dist/Switch.css +10 -26
- package/dist/Switch.css.map +1 -1
- package/dist/Switch.mjs +6 -15
- package/dist/Switch.mjs.map +1 -1
- package/dist/TableView.cjs +42 -86
- package/dist/TableView.cjs.map +1 -1
- package/dist/TableView.css +65 -129
- package/dist/TableView.css.map +1 -1
- package/dist/TableView.mjs +42 -86
- package/dist/TableView.mjs.map +1 -1
- package/dist/Tabs.cjs +4 -15
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +18 -34
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +4 -15
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TagGroup.cjs +14 -37
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +23 -67
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +14 -37
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +11 -34
- package/dist/TextField.cjs.map +1 -1
- package/dist/TextField.css +22 -66
- package/dist/TextField.css.map +1 -1
- package/dist/TextField.mjs +11 -34
- package/dist/TextField.mjs.map +1 -1
- package/dist/Tooltip.cjs +2 -4
- package/dist/Tooltip.cjs.map +1 -1
- package/dist/Tooltip.css +4 -12
- package/dist/Tooltip.css.map +1 -1
- package/dist/Tooltip.mjs +2 -4
- package/dist/Tooltip.mjs.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +17 -17
- package/page.css +7 -0
- package/src/ComboBox.tsx +3 -3
- package/src/Menu.tsx +5 -5
- package/src/Picker.tsx +3 -3
- package/src/page.macro.ts +11 -0
- package/style/dist/spectrum-theme.cjs +2 -8
- package/style/dist/spectrum-theme.cjs.map +1 -1
- package/style/dist/spectrum-theme.mjs +2 -8
- package/style/dist/spectrum-theme.mjs.map +1 -1
- package/style/dist/types.d.ts +1 -4
- package/style/dist/types.d.ts.map +1 -1
- package/style/spectrum-theme.ts +4 -4
package/dist/TextField.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n TextArea as AriaTextArea,\n TextAreaContext as AriaTextAreaContext,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n ContextValue,\n InputContext,\n useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The size of the text field.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\nfunction TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}>\n <Input />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nlet _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\nfunction TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}\n fieldGroupCss={style({\n alignItems: 'baseline',\n height: 'auto'\n })}>\n <TextAreaInput />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = forwardRef(TextArea);\nexport {_TextArea as TextArea};\n\nfunction TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n description,\n errorMessage,\n necessityIndicator,\n labelPosition = 'top',\n labelAlign = 'start',\n fieldGroupCss,\n UNSAFE_style,\n UNSAFE_className = '',\n ...textFieldProps\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 return (\n <AriaTextField\n {...textFieldProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n size: props.size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {/* TODO: set GroupContext in RAC TextField */}\n <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n {children}\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n </FieldGroup>\n <HelpText\n size={props.size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}>\n {errorMessage}\n </HelpText>\n </>))}\n </AriaTextField>\n );\n}\n\nlet _TextFieldBase = forwardRef(TextFieldBase);\n\nfunction TextAreaInput() {\n // Force re-render when value changes so we update the height.\n useSlottedContext(AriaTextAreaContext) ?? {};\n let onHeightChange = (input: HTMLTextAreaElement) => {\n // TODO: only do this if an explicit height is not given?\n if (input) {\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n };\n\n return (\n <AriaTextArea\n ref={onHeightChange}\n // Workaround for baseline alignment bug in Safari.\n // https://bugs.webkit.org/show_bug.cgi?id=142968\n placeholder=\" \"\n className={style({\n paddingX: 0,\n paddingY: centerPadding(),\n minHeight: 'control',\n boxSizing: 'border-box',\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n lineHeight: '[inherit]',\n flexGrow: 1,\n minWidth: 0,\n outlineStyle: 'none',\n borderStyle: 'none',\n resize: 'none',\n overflowX: 'hidden'\n })} />\n );\n}\n"],"names":[],"version":3,"file":"TextField.cjs.map"}
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAiCM,MAAM,0DAAmB,CAAA,GAAA,0BAAY,EAA8C;AAE1F,SAAS,gCAAU,KAAqB,EAAE,GAAsB;IAC9D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,qBACE,gCAAC;QACE,GAAG,KAAK;QACT,KAAK;kBACL,cAAA,gCAAC,CAAA,GAAA,+BAAI;;AAGX;AAEA;;;;CAIC,GACD,IAAI,0DAAa,CAAA,GAAA,uBAAS,EAAE;AAKrB,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAkE;AAE7G,SAAS,+BAAS,KAAoB,EAAE,GAA2C;IACjF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,qBACE,gCAAC;QACE,GAAG,KAAK;QACT,KAAK;QACL,aAAa;kBAIb,cAAA,gCAAC;;AAGP;AAEA;;;;CAIC,GACD,IAAI,0DAAY,CAAA,GAAA,uBAAS,EAAE;AAG3B,SAAS,oCAAc,KAA0E,EAAE,GAA8D;IAC/J,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAkB;IACpC,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,wBACb,aAAa,gBACb,YAAY,oBACZ,mBAAmB,IACnB,GAAG,gBACJ,GAAG;IAEJ,sCAAsC;IACtC,CAAA,GAAA,gCAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,4CAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gCAAC,CAAA,GAAA,oCAAY;QACV,GAAG,cAAc;QAClB,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAClE,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,cAAC,UAAU,aAAE,SAAS,EAAC,iBAAM;;kCAC1E,gCAAC,CAAA,GAAA,oCAAS;wBACR,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAGH,iCAAC,CAAA,GAAA,oCAAS;wBAAE,MAAK;wBAAe,YAAY;wBAAY,WAAW;wBAAW,MAAM,MAAM,IAAI;wBAAE,QAAQ;;0CACtG,gCAAC,CAAA,GAAA,uCAAW,EAAE,QAAQ;0CACnB,CAAA,oBACC,gCAAC,CAAA,GAAA,uCAAW,EAAE,QAAQ;wCAAC,OAAO;4CAAC,GAAG,GAAG;4CAAE,KAAK,CAAA,GAAA,+BAAQ,EAAG,KAAa,KAAK;wCAAS;kDAC/E;;;4BAIN,2BAAa,gCAAC,CAAA,GAAA,wCAAa;gCAAE,YAAY;;;;kCAE5C,gCAAC,CAAA,GAAA,kCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX;AAEA,IAAI,qDAAiB,CAAA,GAAA,uBAAS,EAAE;AAEhC,SAAS;IACP,8DAA8D;IAC9D,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,0CAAkB;IACpC,IAAI,iBAAiB,CAAC;QACpB,yDAAyD;QACzD,IAAI,OAAO;YACT,IAAI,gBAAgB,MAAM,KAAK,CAAC,SAAS;YACzC,IAAI,eAAe,MAAM,KAAK,CAAC,QAAQ;YACvC,6FAA6F;YAC7F,2EAA2E;YAC3E,mFAAmF;YACnF,IAAI,YAAY,mBAAmB,MAAM,KAAK;YAC9C,IAAI,CAAC,WACH,MAAM,KAAK,CAAC,QAAQ,GAAG;YAEzB,MAAM,KAAK,CAAC,SAAS,GAAG;YACxB,MAAM,KAAK,CAAC,MAAM,GAAG;YACrB,+DAA+D;YAC/D,MAAM,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,MAAM,YAAY,GAAI,CAAA,MAAM,YAAY,GAAG,MAAM,YAAY,AAAD,EAAG,EAAE,CAAC;YAC1F,MAAM,KAAK,CAAC,QAAQ,GAAG;YACvB,MAAM,KAAK,CAAC,SAAS,GAAG;QAC1B;IACF;IAEA,qBACE,gCAAC,CAAA,GAAA,mCAAW;QACV,KAAK;QACL,mDAAmD;QACnD,iDAAiD;QACjD,aAAY;QACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBN","sources":["packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n TextArea as AriaTextArea,\n TextAreaContext as AriaTextAreaContext,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n ContextValue,\n InputContext,\n useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The size of the text field.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\nfunction TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}>\n <Input />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nlet _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\nfunction TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}\n fieldGroupCss={style({\n alignItems: 'baseline',\n height: 'auto'\n })}>\n <TextAreaInput />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = forwardRef(TextArea);\nexport {_TextArea as TextArea};\n\nfunction TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n description,\n errorMessage,\n necessityIndicator,\n labelPosition = 'top',\n labelAlign = 'start',\n fieldGroupCss,\n UNSAFE_style,\n UNSAFE_className = '',\n ...textFieldProps\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 return (\n <AriaTextField\n {...textFieldProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n size: props.size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {/* TODO: set GroupContext in RAC TextField */}\n <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n {children}\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n </FieldGroup>\n <HelpText\n size={props.size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}>\n {errorMessage}\n </HelpText>\n </>))}\n </AriaTextField>\n );\n}\n\nlet _TextFieldBase = forwardRef(TextFieldBase);\n\nfunction TextAreaInput() {\n // Force re-render when value changes so we update the height.\n useSlottedContext(AriaTextAreaContext) ?? {};\n let onHeightChange = (input: HTMLTextAreaElement) => {\n // TODO: only do this if an explicit height is not given?\n if (input) {\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n };\n\n return (\n <AriaTextArea\n ref={onHeightChange}\n // Workaround for baseline alignment bug in Safari.\n // https://bugs.webkit.org/show_bug.cgi?id=142968\n placeholder=\" \"\n className={style({\n paddingX: 0,\n paddingY: centerPadding(),\n minHeight: 'control',\n boxSizing: 'border-box',\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n lineHeight: '[inherit]',\n flexGrow: 1,\n minWidth: 0,\n outlineStyle: 'none',\n borderStyle: 'none',\n resize: 'none',\n overflowX: 'hidden'\n })} />\n );\n}\n"],"names":[],"version":3,"file":"TextField.cjs.map"}
|
package/dist/TextField.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
@layer _.a {
|
|
2
|
-
.
|
|
2
|
+
.kF {
|
|
3
3
|
height: auto;
|
|
4
4
|
}
|
|
5
5
|
|
|
@@ -74,24 +74,24 @@
|
|
|
74
74
|
line-height: 1.3;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
.-aqrvqh_k-
|
|
78
|
-
--field-height: 2rem;
|
|
77
|
+
.-aqrvqh_k-j {
|
|
78
|
+
--field-height: calc(2rem * var(--s2-scale));
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
.-aqrvqh_k-
|
|
82
|
-
--field-height: 1.25rem;
|
|
81
|
+
.-aqrvqh_k-g {
|
|
82
|
+
--field-height: calc(1.25rem * var(--s2-scale));
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
.-aqrvqh_k-
|
|
86
|
-
--field-height: 1.5rem;
|
|
85
|
+
.-aqrvqh_k-h {
|
|
86
|
+
--field-height: calc(1.5rem * var(--s2-scale));
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
.-aqrvqh_k-
|
|
90
|
-
--field-height: 2.5rem;
|
|
89
|
+
.-aqrvqh_k-l {
|
|
90
|
+
--field-height: calc(2.5rem * var(--s2-scale));
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.-aqrvqh_k-
|
|
94
|
-
--field-height: 3rem;
|
|
93
|
+
.-aqrvqh_k-n {
|
|
94
|
+
--field-height: calc(3rem * var(--s2-scale));
|
|
95
95
|
}
|
|
96
96
|
|
|
97
97
|
.-_1inj1bc_i--prjw07 {
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
.qa {
|
|
164
|
-
min-width:
|
|
164
|
+
min-width: calc(0rem * var(--s2-scale));
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
._La {
|
|
@@ -180,24 +180,24 @@
|
|
|
180
180
|
overflow-x: hidden;
|
|
181
181
|
}
|
|
182
182
|
|
|
183
|
-
.-_375tou_o-
|
|
184
|
-
--o: 2rem;
|
|
183
|
+
.-_375tou_o-j {
|
|
184
|
+
--o: calc(2rem * var(--s2-scale));
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
.-_375tou_o-
|
|
188
|
-
--o: 1.25rem;
|
|
187
|
+
.-_375tou_o-g {
|
|
188
|
+
--o: calc(1.25rem * var(--s2-scale));
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
.-_375tou_o-
|
|
192
|
-
--o: 1.5rem;
|
|
191
|
+
.-_375tou_o-h {
|
|
192
|
+
--o: calc(1.5rem * var(--s2-scale));
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
.-_375tou_o-
|
|
196
|
-
--o: 2.5rem;
|
|
195
|
+
.-_375tou_o-l {
|
|
196
|
+
--o: calc(2.5rem * var(--s2-scale));
|
|
197
197
|
}
|
|
198
198
|
|
|
199
|
-
.-_375tou_o-
|
|
200
|
-
--o: 3rem;
|
|
199
|
+
.-_375tou_o-n {
|
|
200
|
+
--o: calc(3rem * var(--s2-scale));
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
203
|
|
|
@@ -230,50 +230,6 @@
|
|
|
230
230
|
._dbj {
|
|
231
231
|
font-size: 1.375rem;
|
|
232
232
|
}
|
|
233
|
-
|
|
234
|
-
.-aqrvqh_k-br {
|
|
235
|
-
--field-height: 2.5rem;
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
.-aqrvqh_k-bl {
|
|
239
|
-
--field-height: 1.5625rem;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
.-aqrvqh_k-bn {
|
|
243
|
-
--field-height: 1.875rem;
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.-aqrvqh_k-bu {
|
|
247
|
-
--field-height: 3.125rem;
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
.-aqrvqh_k-by {
|
|
251
|
-
--field-height: 3.75rem;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.qba {
|
|
255
|
-
min-width: 0;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.-_375tou_o-br {
|
|
259
|
-
--o: 2.5rem;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.-_375tou_o-bl {
|
|
263
|
-
--o: 1.5625rem;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
.-_375tou_o-bn {
|
|
267
|
-
--o: 1.875rem;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
.-_375tou_o-bu {
|
|
271
|
-
--o: 3.125rem;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
.-_375tou_o-by {
|
|
275
|
-
--o: 3.75rem;
|
|
276
|
-
}
|
|
277
233
|
}
|
|
278
234
|
}
|
|
279
235
|
|
package/dist/TextField.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC0EqB;EAAA;;;;EAqDe;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5HI;EAqDe;;;;;AArDf;;AAqDe;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA
|
|
1
|
+
{"mappings":"AC0EqB;EAAA;;;;EAqDe;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuEnB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA5HI;EAqDe;;;;;AArDf;;AAqDe;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAuEnB","sources":["b5f6eedb906c59d7","packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["@import \"ab36e6acf2667a8b\";\n@import \"67d58da798418a3e\";\n@import \"83cde29013713f83\";\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 TextArea as AriaTextArea,\n TextAreaContext as AriaTextAreaContext,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n ContextValue,\n InputContext,\n useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The size of the text field.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\nfunction TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}>\n <Input />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nlet _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\nfunction TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}\n fieldGroupCss={style({\n alignItems: 'baseline',\n height: 'auto'\n })}>\n <TextAreaInput />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = forwardRef(TextArea);\nexport {_TextArea as TextArea};\n\nfunction TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n description,\n errorMessage,\n necessityIndicator,\n labelPosition = 'top',\n labelAlign = 'start',\n fieldGroupCss,\n UNSAFE_style,\n UNSAFE_className = '',\n ...textFieldProps\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 return (\n <AriaTextField\n {...textFieldProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n size: props.size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {/* TODO: set GroupContext in RAC TextField */}\n <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n {children}\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n </FieldGroup>\n <HelpText\n size={props.size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}>\n {errorMessage}\n </HelpText>\n </>))}\n </AriaTextField>\n );\n}\n\nlet _TextFieldBase = forwardRef(TextFieldBase);\n\nfunction TextAreaInput() {\n // Force re-render when value changes so we update the height.\n useSlottedContext(AriaTextAreaContext) ?? {};\n let onHeightChange = (input: HTMLTextAreaElement) => {\n // TODO: only do this if an explicit height is not given?\n if (input) {\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n };\n\n return (\n <AriaTextArea\n ref={onHeightChange}\n // Workaround for baseline alignment bug in Safari.\n // https://bugs.webkit.org/show_bug.cgi?id=142968\n placeholder=\" \"\n className={style({\n paddingX: 0,\n paddingY: centerPadding(),\n minHeight: 'control',\n boxSizing: 'border-box',\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n lineHeight: '[inherit]',\n flexGrow: 1,\n minWidth: 0,\n outlineStyle: 'none',\n borderStyle: 'none',\n resize: 'none',\n overflowX: 'hidden'\n })} />\n );\n}\n"],"names":[],"version":3,"file":"TextField.css.map"}
|
package/dist/TextField.mjs
CHANGED
|
@@ -46,7 +46,7 @@ function $d946f50010ba937f$var$TextArea(props, ref) {
|
|
|
46
46
|
return /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$var$_TextFieldBase, {
|
|
47
47
|
...props,
|
|
48
48
|
ref: ref,
|
|
49
|
-
fieldGroupCss: " . _1d
|
|
49
|
+
fieldGroupCss: " . _1d kF",
|
|
50
50
|
children: /*#__PURE__*/ (0, $fsr8S$jsx)($d946f50010ba937f$var$TextAreaInput, {})
|
|
51
51
|
});
|
|
52
52
|
}
|
|
@@ -122,22 +122,11 @@ function $d946f50010ba937f$var$TextFieldBase(props, ref) {
|
|
|
122
122
|
rules += ' _1d';
|
|
123
123
|
rules += ' _f-1x99dlob';
|
|
124
124
|
rules += ' _fa';
|
|
125
|
-
if (props.size === "XL")
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
rules += ' -aqrvqh_k-r';
|
|
131
|
-
} else if (props.size === "S") {
|
|
132
|
-
rules += ' -aqrvqh_k-bn';
|
|
133
|
-
rules += ' -aqrvqh_k-m';
|
|
134
|
-
} else if (props.size === "XS") {
|
|
135
|
-
rules += ' -aqrvqh_k-bl';
|
|
136
|
-
rules += ' -aqrvqh_k-k';
|
|
137
|
-
} else {
|
|
138
|
-
rules += ' -aqrvqh_k-br';
|
|
139
|
-
rules += ' -aqrvqh_k-q';
|
|
140
|
-
}
|
|
125
|
+
if (props.size === "XL") rules += ' -aqrvqh_k-n';
|
|
126
|
+
else if (props.size === "L") rules += ' -aqrvqh_k-l';
|
|
127
|
+
else if (props.size === "S") rules += ' -aqrvqh_k-h';
|
|
128
|
+
else if (props.size === "XS") rules += ' -aqrvqh_k-g';
|
|
129
|
+
else rules += ' -aqrvqh_k-j';
|
|
141
130
|
rules += ' -_1inj1bc_i--prjw07';
|
|
142
131
|
rules += ' je';
|
|
143
132
|
rules += ' __R-yksgrp';
|
|
@@ -233,28 +222,16 @@ function $d946f50010ba937f$var$TextAreaInput() {
|
|
|
233
222
|
rules += ' _e-17zqamw';
|
|
234
223
|
rules += ' _f-17zqamw';
|
|
235
224
|
rules += ' _9-3t1y';
|
|
236
|
-
rules += ' qba';
|
|
237
225
|
rules += ' qa';
|
|
238
226
|
rules += ' _La';
|
|
239
227
|
rules += ' wf';
|
|
240
228
|
rules += ' __Ia';
|
|
241
229
|
rules += ' __vb';
|
|
242
|
-
if (props.size === "XL")
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
rules += ' -_375tou_o-r';
|
|
248
|
-
} else if (props.size === "S") {
|
|
249
|
-
rules += ' -_375tou_o-bn';
|
|
250
|
-
rules += ' -_375tou_o-m';
|
|
251
|
-
} else if (props.size === "XS") {
|
|
252
|
-
rules += ' -_375tou_o-bl';
|
|
253
|
-
rules += ' -_375tou_o-k';
|
|
254
|
-
} else {
|
|
255
|
-
rules += ' -_375tou_o-br';
|
|
256
|
-
rules += ' -_375tou_o-q';
|
|
257
|
-
}
|
|
230
|
+
if (props.size === "XL") rules += ' -_375tou_o-n';
|
|
231
|
+
else if (props.size === "L") rules += ' -_375tou_o-l';
|
|
232
|
+
else if (props.size === "S") rules += ' -_375tou_o-h';
|
|
233
|
+
else if (props.size === "XS") rules += ' -_375tou_o-g';
|
|
234
|
+
else rules += ' -_375tou_o-j';
|
|
258
235
|
return rules;
|
|
259
236
|
}
|
|
260
237
|
});
|
package/dist/TextField.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n TextArea as AriaTextArea,\n TextAreaContext as AriaTextAreaContext,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n ContextValue,\n InputContext,\n useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The size of the text field.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\nfunction TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}>\n <Input />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nlet _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\nfunction TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}\n fieldGroupCss={style({\n alignItems: 'baseline',\n height: 'auto'\n })}>\n <TextAreaInput />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = forwardRef(TextArea);\nexport {_TextArea as TextArea};\n\nfunction TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n description,\n errorMessage,\n necessityIndicator,\n labelPosition = 'top',\n labelAlign = 'start',\n fieldGroupCss,\n UNSAFE_style,\n UNSAFE_className = '',\n ...textFieldProps\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 return (\n <AriaTextField\n {...textFieldProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n size: props.size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {/* TODO: set GroupContext in RAC TextField */}\n <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n {children}\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n </FieldGroup>\n <HelpText\n size={props.size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}>\n {errorMessage}\n </HelpText>\n </>))}\n </AriaTextField>\n );\n}\n\nlet _TextFieldBase = forwardRef(TextFieldBase);\n\nfunction TextAreaInput() {\n // Force re-render when value changes so we update the height.\n useSlottedContext(AriaTextAreaContext) ?? {};\n let onHeightChange = (input: HTMLTextAreaElement) => {\n // TODO: only do this if an explicit height is not given?\n if (input) {\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n };\n\n return (\n <AriaTextArea\n ref={onHeightChange}\n // Workaround for baseline alignment bug in Safari.\n // https://bugs.webkit.org/show_bug.cgi?id=142968\n placeholder=\" \"\n className={style({\n paddingX: 0,\n paddingY: centerPadding(),\n minHeight: 'control',\n boxSizing: 'border-box',\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n lineHeight: '[inherit]',\n flexGrow: 1,\n minWidth: 0,\n outlineStyle: 'none',\n borderStyle: 'none',\n resize: 'none',\n overflowX: 'hidden'\n })} />\n );\n}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/TextField.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n TextArea as AriaTextArea,\n TextAreaContext as AriaTextAreaContext,\n TextField as AriaTextField,\n TextFieldProps as AriaTextFieldProps,\n composeRenderProps,\n ContextValue,\n InputContext,\n useSlottedContext\n} from 'react-aria-components';\nimport {centerPadding, field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {mergeRefs} from '@react-aria/utils';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'className' | 'style'>, StyleProps, SpectrumLabelableProps, HelpTextProps {\n /**\n * The size of the text field.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);\n\nfunction TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}>\n <Input />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextFields are text inputs that allow users to input custom text entries\n * with a keyboard. Various decorations can be displayed around the field to\n * communicate the entry requirements.\n */\nlet _TextField = forwardRef(TextField);\nexport {_TextField as TextField};\n\nexport interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}\n\nexport const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);\n\nfunction TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {\n [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);\n return (\n <_TextFieldBase\n {...props}\n ref={ref}\n fieldGroupCss={style({\n alignItems: 'baseline',\n height: 'auto'\n })}>\n <TextAreaInput />\n </_TextFieldBase>\n );\n}\n\n/**\n * TextAreas are multiline text inputs, useful for cases where users have\n * a sizable amount of text to enter. They allow for all customizations that\n * are available to text fields.\n */\nlet _TextArea = forwardRef(TextArea);\nexport {_TextArea as TextArea};\n\nfunction TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {\n let inputRef = useRef<HTMLInputElement>(null);\n let domRef = useRef<HTMLDivElement>(null);\n let formContext = useContext(FormContext);\n props = useFormProps(props);\n let {\n label,\n description,\n errorMessage,\n necessityIndicator,\n labelPosition = 'top',\n labelAlign = 'start',\n fieldGroupCss,\n UNSAFE_style,\n UNSAFE_className = '',\n ...textFieldProps\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 return (\n <AriaTextField\n {...textFieldProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + style(field(), getAllowedOverrides())({\n size: props.size,\n labelPosition,\n isInForm: !!formContext\n }, props.styles)}>\n {composeRenderProps(props.children, (children, {isDisabled, isInvalid}) => (<>\n <FieldLabel\n isDisabled={isDisabled}\n isRequired={props.isRequired}\n size={props.size}\n labelPosition={labelPosition}\n labelAlign={labelAlign}\n necessityIndicator={necessityIndicator}\n contextualHelp={props.contextualHelp}>\n {label}\n </FieldLabel>\n {/* TODO: set GroupContext in RAC TextField */}\n <FieldGroup role=\"presentation\" isDisabled={isDisabled} isInvalid={isInvalid} size={props.size} styles={fieldGroupCss}>\n <InputContext.Consumer>\n {ctx => (\n <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>\n {children}\n </InputContext.Provider>\n )}\n </InputContext.Consumer>\n {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}\n </FieldGroup>\n <HelpText\n size={props.size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={description}>\n {errorMessage}\n </HelpText>\n </>))}\n </AriaTextField>\n );\n}\n\nlet _TextFieldBase = forwardRef(TextFieldBase);\n\nfunction TextAreaInput() {\n // Force re-render when value changes so we update the height.\n useSlottedContext(AriaTextAreaContext) ?? {};\n let onHeightChange = (input: HTMLTextAreaElement) => {\n // TODO: only do this if an explicit height is not given?\n if (input) {\n let prevAlignment = input.style.alignSelf;\n let prevOverflow = input.style.overflow;\n // Firefox scroll position is lost when overflow: 'hidden' is applied so we skip applying it.\n // The measure/applied height is also incorrect/reset if we turn on and off\n // overflow: hidden in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n let isFirefox = 'MozAppearance' in input.style;\n if (!isFirefox) {\n input.style.overflow = 'hidden';\n }\n input.style.alignSelf = 'start';\n input.style.height = 'auto';\n // offsetHeight - clientHeight accounts for the border/padding.\n input.style.height = `${input.scrollHeight + (input.offsetHeight - input.clientHeight)}px`;\n input.style.overflow = prevOverflow;\n input.style.alignSelf = prevAlignment;\n }\n };\n\n return (\n <AriaTextArea\n ref={onHeightChange}\n // Workaround for baseline alignment bug in Safari.\n // https://bugs.webkit.org/show_bug.cgi?id=142968\n placeholder=\" \"\n className={style({\n paddingX: 0,\n paddingY: centerPadding(),\n minHeight: 'control',\n boxSizing: 'border-box',\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n lineHeight: '[inherit]',\n flexGrow: 1,\n minWidth: 0,\n outlineStyle: 'none',\n borderStyle: 'none',\n resize: 'none',\n overflowX: 'hidden'\n })} />\n );\n}\n"],"names":[],"version":3,"file":"TextField.mjs.map"}
|
package/dist/Tooltip.cjs
CHANGED
|
@@ -36,8 +36,7 @@ const $d3b6a84aebe66f8d$var$tooltip = function anonymous(props) {
|
|
|
36
36
|
else rules += ' _A-10jn6wd';
|
|
37
37
|
rules += ' _2d';
|
|
38
38
|
rules += ' _1c';
|
|
39
|
-
rules += '
|
|
40
|
-
rules += ' rJ';
|
|
39
|
+
rules += ' rv';
|
|
41
40
|
rules += ' o-375tou';
|
|
42
41
|
rules += ' __na';
|
|
43
42
|
rules += ' _c-bc1l9oh';
|
|
@@ -92,8 +91,7 @@ const $d3b6a84aebe66f8d$var$tooltip = function anonymous(props) {
|
|
|
92
91
|
else if (props.placement === "left") rules += ' -s75z34_A-a';
|
|
93
92
|
else if (props.placement === "bottom") rules += ' -s75z34_A-K';
|
|
94
93
|
else if (props.placement === "top") rules += ' -s75z34_A-c';
|
|
95
|
-
rules += ' -_375tou_o-
|
|
96
|
-
rules += ' -_375tou_o-m';
|
|
94
|
+
rules += ' -_375tou_o-h';
|
|
97
95
|
rules += ' -_375tp0_u-ab';
|
|
98
96
|
rules += ' -_375tp1_v-ab';
|
|
99
97
|
return rules;
|
package/dist/Tooltip.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoCD,MAAM;AAYN,MAAM
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoCD,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEN,MAAM;;;;;;;;;;;;AAmBN,IAAI,oEAAgC,CAAA,GAAA,0BAAY,EAAuB,CAAC;AAExE,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,YAAC,QAAQ,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IACtD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,eAChB,WAAW,UACX,MAAM,aACN,YAAY,mBACZ,UAAU,EACX,GAAG,CAAA,GAAA,uBAAS,EAAE;IACf,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,4CAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,oCAAQ;IAClC,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,qBAAO,EAAE;IAE/C,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,wBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;YACT,IAAI,uBAAuB,OAAO,gBAAgB,CAAC,IAAI,YAAY;YACnE,IAAI,yBAAyB,IAC3B,gBAAgB,SAAS,sBAAsB;QAEnD;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gCAAC,CAAA,GAAA,kCAAU;QACR,GAAG,KAAK;QACT,qBAAqB;QACrB,kBAAkB;QAClB,aAAa;QACb,QAAQ;QACR,WAAW;QACX,YAAY;QACZ,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBAChF,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,uCAAW;kCACV,cAAA,gCAAC;4BAAI,WAAW,kCAAY;4BAAc,OAAM;4BAA6B,OAAM;4BAAK,QAAO;4BAAI,SAAQ;sCACzG,cAAA,gCAAC;gCAAK,GAAE;;;;oBAGX;;;;AAKX;AAOO,SAAS,0CAAe,KAA0B;IACvD,IAAI,oBACF,gBAAgB,eAChB,WAAW,UACX,MAAM,aACN,SAAS,cACT,UAAU,EACV,GAAG,cACJ,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,yCAAiB;QAAG,GAAG,YAAY;kBAClC,cAAA,gCAAC,oDAA8B,QAAQ;YACrC,OAAO;gBACL,kBAAkB;gBAClB,aAAa;gBACb,QAAQ;gBACR,WAAW;gBACX,YAAY;YACd;sBACC,MAAM,QAAQ;;;AAIvB;AAGA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,uBAAS,EAAE;AAOnB,SAAS,0CAAgB,KAAgB;IAC9C,qBAAO,gCAAC;AACV","sources":["packages/@react-spectrum/s2/src/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Tooltip as AriaTooltip,\n TooltipProps as AriaTooltipProps,\n TooltipTrigger as AriaTooltipTrigger,\n TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n OverlayArrow,\n TooltipRenderProps,\n useLocale\n} from 'react-aria-components';\nimport {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorScheme} from '@react-types/provider';\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';\nimport {DOMRef} from '@react-types/shared';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {\n /** The content of the tooltip. */\n children?: ReactNode,\n /**\n * The placement of the element with respect to its anchor element.\n *\n * @default 'top'\n */\n placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'\n}\n\nexport interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' | 'offset' | 'crossOffset' | 'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {\n /** The content of the tooltip. */\n children?: ReactNode\n}\n\nconst slide = keyframes(`\n from {\n transform: translate(var(--originX), var(--originY));\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n`);\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n ...colorScheme(),\n justifyContent: 'center',\n alignItems: 'center',\n maxWidth: 160,\n minHeight: 24,\n boxSizing: 'border-box',\n font: 'ui-sm',\n color: {\n default: 'gray-25',\n forcedColors: 'ButtonText'\n },\n borderWidth: {\n forcedColors: 1\n },\n borderStyle: {\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: 'transparent'\n },\n backgroundColor: 'neutral',\n borderRadius: 'control',\n paddingX: 'edge-to-text',\n paddingY: centerPadding(),\n margin: 8,\n animation: {\n isEntering: slide,\n isExiting: slide\n },\n animationDuration: {\n isEntering: 200,\n isExiting: 200\n },\n animationDirection: {\n isEntering: 'normal',\n isExiting: 'reverse'\n },\n animationTimingFunction: {\n isExiting: 'in'\n },\n '--originX': {\n type: 'marginTop',\n value: {\n placement: {\n top: 0,\n bottom: 0,\n left: 4,\n right: -4\n }\n }\n },\n '--originY': {\n type: 'marginTop',\n value: {\n placement: {\n top: 4,\n bottom: -4,\n left: 0,\n right: -0\n }\n }\n }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n display: 'block',\n fill: 'gray-800',\n rotate: {\n placement: {\n top: 0,\n bottom: '180deg',\n left: '-90deg',\n right: '90deg'\n }\n },\n translateX: {\n placement: {\n left: '[-25%]',\n right: '[25%]'\n }\n }\n});\n\nlet InternalTooltipTriggerContext = createContext<TooltipTriggerProps>({});\n\nfunction Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {\n let {children, UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useDOMRef(ref);\n let {\n containerPadding,\n crossOffset,\n offset,\n placement = 'top',\n shouldFlip\n } = useContext(InternalTooltipTriggerContext);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n let [borderRadius, setBorderRadius] = useState(0);\n\n // TODO: should we pass through lang and dir props in RAC?\n let tooltipRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n let spectrumBorderRadius = window.getComputedStyle(el).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [locale, direction, domRef]);\n\n return (\n <AriaTooltip\n {...props}\n arrowBoundaryOffset={borderRadius}\n containerPadding={containerPadding}\n crossOffset={crossOffset}\n offset={offset}\n placement={placement}\n shouldFlip={shouldFlip}\n ref={tooltipRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>\n {renderProps => (\n <>\n <OverlayArrow>\n <svg className={arrowStyles(renderProps)} xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n <path d=\"M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z\" />\n </svg>\n </OverlayArrow>\n {children}\n </>\n )}\n </AriaTooltip>\n );\n}\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps) {\n let {\n containerPadding,\n crossOffset,\n offset,\n placement,\n shouldFlip,\n ...triggerProps\n } = props;\n\n return (\n <AriaTooltipTrigger {...triggerProps}>\n <InternalTooltipTriggerContext.Provider\n value={{\n containerPadding: containerPadding,\n crossOffset: crossOffset,\n offset: offset,\n placement: placement,\n shouldFlip: shouldFlip\n }}>\n {props.children}\n </InternalTooltipTriggerContext.Provider>\n </AriaTooltipTrigger>\n );\n}\n\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedTooltip(props: ICombined) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.cjs.map"}
|
package/dist/Tooltip.css
CHANGED
|
@@ -48,8 +48,8 @@
|
|
|
48
48
|
align-items: center;
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
.
|
|
52
|
-
max-width: 10rem;
|
|
51
|
+
.rv {
|
|
52
|
+
max-width: calc(10rem * var(--s2-scale));
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.o-375tou {
|
|
@@ -190,8 +190,8 @@
|
|
|
190
190
|
--originY: 0rem;
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
.-_375tou_o-
|
|
194
|
-
--o: 1.5rem;
|
|
193
|
+
.-_375tou_o-h {
|
|
194
|
+
--o: calc(1.5rem * var(--s2-scale));
|
|
195
195
|
}
|
|
196
196
|
|
|
197
197
|
._Za {
|
|
@@ -279,17 +279,9 @@
|
|
|
279
279
|
|
|
280
280
|
@layer _.b.b {
|
|
281
281
|
@media not ((hover: hover) and (pointer: fine)) {
|
|
282
|
-
.rbM {
|
|
283
|
-
max-width: 12.5rem;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
282
|
._dbd {
|
|
287
283
|
font-size: .9375rem;
|
|
288
284
|
}
|
|
289
|
-
|
|
290
|
-
.-_375tou_o-bn {
|
|
291
|
-
--o: 1.875rem;
|
|
292
|
-
}
|
|
293
285
|
}
|
|
294
286
|
}
|
|
295
287
|
|
package/dist/Tooltip.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AC8Cc;;;;;;;;;;;;AAYE;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiEI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;AAjEJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA
|
|
1
|
+
{"mappings":"AC8Cc;;;;;;;;;;;;AAYE;EAAA;;;;EAAA;;;;;;EAAA;IAAA;;;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiEI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;;AAjEJ;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiEI","sources":["aa7688246f893a38","packages/@react-spectrum/s2/src/Tooltip.tsx"],"sourcesContent":["@import \"98a0a1b80e895d38\";\n@import \"c07030e64bc8758c\";\n@import \"1e9ed49e5bafc79c\";\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 Tooltip as AriaTooltip,\n TooltipProps as AriaTooltipProps,\n TooltipTrigger as AriaTooltipTrigger,\n TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n OverlayArrow,\n TooltipRenderProps,\n useLocale\n} from 'react-aria-components';\nimport {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorScheme} from '@react-types/provider';\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';\nimport {DOMRef} from '@react-types/shared';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {\n /** The content of the tooltip. */\n children?: ReactNode,\n /**\n * The placement of the element with respect to its anchor element.\n *\n * @default 'top'\n */\n placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'\n}\n\nexport interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' | 'offset' | 'crossOffset' | 'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {\n /** The content of the tooltip. */\n children?: ReactNode\n}\n\nconst slide = keyframes(`\n from {\n transform: translate(var(--originX), var(--originY));\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n`);\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n ...colorScheme(),\n justifyContent: 'center',\n alignItems: 'center',\n maxWidth: 160,\n minHeight: 24,\n boxSizing: 'border-box',\n font: 'ui-sm',\n color: {\n default: 'gray-25',\n forcedColors: 'ButtonText'\n },\n borderWidth: {\n forcedColors: 1\n },\n borderStyle: {\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: 'transparent'\n },\n backgroundColor: 'neutral',\n borderRadius: 'control',\n paddingX: 'edge-to-text',\n paddingY: centerPadding(),\n margin: 8,\n animation: {\n isEntering: slide,\n isExiting: slide\n },\n animationDuration: {\n isEntering: 200,\n isExiting: 200\n },\n animationDirection: {\n isEntering: 'normal',\n isExiting: 'reverse'\n },\n animationTimingFunction: {\n isExiting: 'in'\n },\n '--originX': {\n type: 'marginTop',\n value: {\n placement: {\n top: 0,\n bottom: 0,\n left: 4,\n right: -4\n }\n }\n },\n '--originY': {\n type: 'marginTop',\n value: {\n placement: {\n top: 4,\n bottom: -4,\n left: 0,\n right: -0\n }\n }\n }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n display: 'block',\n fill: 'gray-800',\n rotate: {\n placement: {\n top: 0,\n bottom: '180deg',\n left: '-90deg',\n right: '90deg'\n }\n },\n translateX: {\n placement: {\n left: '[-25%]',\n right: '[25%]'\n }\n }\n});\n\nlet InternalTooltipTriggerContext = createContext<TooltipTriggerProps>({});\n\nfunction Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {\n let {children, UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useDOMRef(ref);\n let {\n containerPadding,\n crossOffset,\n offset,\n placement = 'top',\n shouldFlip\n } = useContext(InternalTooltipTriggerContext);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n let [borderRadius, setBorderRadius] = useState(0);\n\n // TODO: should we pass through lang and dir props in RAC?\n let tooltipRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n let spectrumBorderRadius = window.getComputedStyle(el).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [locale, direction, domRef]);\n\n return (\n <AriaTooltip\n {...props}\n arrowBoundaryOffset={borderRadius}\n containerPadding={containerPadding}\n crossOffset={crossOffset}\n offset={offset}\n placement={placement}\n shouldFlip={shouldFlip}\n ref={tooltipRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>\n {renderProps => (\n <>\n <OverlayArrow>\n <svg className={arrowStyles(renderProps)} xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n <path d=\"M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z\" />\n </svg>\n </OverlayArrow>\n {children}\n </>\n )}\n </AriaTooltip>\n );\n}\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps) {\n let {\n containerPadding,\n crossOffset,\n offset,\n placement,\n shouldFlip,\n ...triggerProps\n } = props;\n\n return (\n <AriaTooltipTrigger {...triggerProps}>\n <InternalTooltipTriggerContext.Provider\n value={{\n containerPadding: containerPadding,\n crossOffset: crossOffset,\n offset: offset,\n placement: placement,\n shouldFlip: shouldFlip\n }}>\n {props.children}\n </InternalTooltipTriggerContext.Provider>\n </AriaTooltipTrigger>\n );\n}\n\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedTooltip(props: ICombined) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.css.map"}
|
package/dist/Tooltip.mjs
CHANGED
|
@@ -29,8 +29,7 @@ const $4c20647d6e5d8fdf$var$tooltip = function anonymous(props) {
|
|
|
29
29
|
else rules += ' _A-10jn6wd';
|
|
30
30
|
rules += ' _2d';
|
|
31
31
|
rules += ' _1c';
|
|
32
|
-
rules += '
|
|
33
|
-
rules += ' rJ';
|
|
32
|
+
rules += ' rv';
|
|
34
33
|
rules += ' o-375tou';
|
|
35
34
|
rules += ' __na';
|
|
36
35
|
rules += ' _c-bc1l9oh';
|
|
@@ -85,8 +84,7 @@ const $4c20647d6e5d8fdf$var$tooltip = function anonymous(props) {
|
|
|
85
84
|
else if (props.placement === "left") rules += ' -s75z34_A-a';
|
|
86
85
|
else if (props.placement === "bottom") rules += ' -s75z34_A-K';
|
|
87
86
|
else if (props.placement === "top") rules += ' -s75z34_A-c';
|
|
88
|
-
rules += ' -_375tou_o-
|
|
89
|
-
rules += ' -_375tou_o-m';
|
|
87
|
+
rules += ' -_375tou_o-h';
|
|
90
88
|
rules += ' -_375tp0_u-ab';
|
|
91
89
|
rules += ' -_375tp1_v-ab';
|
|
92
90
|
return rules;
|
package/dist/Tooltip.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoCD,MAAM;AAYN,MAAM
|
|
1
|
+
{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoCD,MAAM;AAYN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEN,MAAM;;;;;;;;;;;;AAmBN,IAAI,oEAAgC,CAAA,GAAA,oBAAY,EAAuB,CAAC;AAExE,SAAS,8BAAQ,KAAmB,EAAE,GAA2B;IAC/D,IAAI,YAAC,QAAQ,gBAAE,YAAY,oBAAE,mBAAmB,IAAG,GAAG;IACtD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,eAChB,WAAW,UACX,MAAM,aACN,YAAY,mBACZ,UAAU,EACX,GAAG,CAAA,GAAA,iBAAS,EAAE;IACf,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAiB;IAC9C,IAAI,UAAC,MAAM,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAClC,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAE;IAE/C,0DAA0D;IAC1D,IAAI,aAAa,CAAA,GAAA,kBAAU,EAAE,CAAC;QAC3B,OAA4C,OAAO,GAAG;QACvD,IAAI,IAAI;YACN,GAAG,IAAI,GAAG;YACV,GAAG,GAAG,GAAG;YACT,IAAI,uBAAuB,OAAO,gBAAgB,CAAC,IAAI,YAAY;YACnE,IAAI,yBAAyB,IAC3B,gBAAgB,SAAS,sBAAsB;QAEnD;IACF,GAAG;QAAC;QAAQ;QAAW;KAAO;IAE9B,qBACE,gBAAC,CAAA,GAAA,cAAU;QACR,GAAG,KAAK;QACT,qBAAqB;QACrB,kBAAkB;QAClB,aAAa;QACb,QAAQ;QACR,WAAW;QACX,YAAY;QACZ,KAAK;QACL,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;6BAAE;YAAW;kBAChF,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,mBAAW;kCACV,cAAA,gBAAC;4BAAI,WAAW,kCAAY;4BAAc,OAAM;4BAA6B,OAAM;4BAAK,QAAO;4BAAI,SAAQ;sCACzG,cAAA,gBAAC;gCAAK,GAAE;;;;oBAGX;;;;AAKX;AAOO,SAAS,0CAAe,KAA0B;IACvD,IAAI,oBACF,gBAAgB,eAChB,WAAW,UACX,MAAM,aACN,SAAS,cACT,UAAU,EACV,GAAG,cACJ,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,qBAAiB;QAAG,GAAG,YAAY;kBAClC,cAAA,gBAAC,oDAA8B,QAAQ;YACrC,OAAO;gBACL,kBAAkB;gBAClB,aAAa;gBACb,QAAQ;gBACR,WAAW;gBACX,YAAY;YACd;sBACC,MAAM,QAAQ;;;AAIvB;AAGA;;CAEC,GACD,IAAI,0DAAW,CAAA,GAAA,iBAAS,EAAE;AAOnB,SAAS,0CAAgB,KAAgB;IAC9C,qBAAO,gBAAC;AACV","sources":["packages/@react-spectrum/s2/src/Tooltip.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n Tooltip as AriaTooltip,\n TooltipProps as AriaTooltipProps,\n TooltipTrigger as AriaTooltipTrigger,\n TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,\n OverlayArrow,\n TooltipRenderProps,\n useLocale\n} from 'react-aria-components';\nimport {centerPadding, colorScheme, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ColorScheme} from '@react-types/provider';\nimport {ColorSchemeContext} from './Provider';\nimport {createContext, forwardRef, MutableRefObject, ReactNode, useCallback, useContext, useState} from 'react';\nimport {DOMRef} from '@react-types/shared';\nimport {keyframes} from '../style/style-macro' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\n\nexport interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {\n /** The content of the tooltip. */\n children?: ReactNode,\n /**\n * The placement of the element with respect to its anchor element.\n *\n * @default 'top'\n */\n placement?: 'start' | 'end' | 'right' | 'left' | 'top' | 'bottom'\n}\n\nexport interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' | 'offset' | 'crossOffset' | 'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {\n /** The content of the tooltip. */\n children?: ReactNode\n}\n\nconst slide = keyframes(`\n from {\n transform: translate(var(--originX), var(--originY));\n opacity: 0;\n }\n\n to {\n transform: translateY(0);\n opacity: 1;\n }\n`);\n\nconst tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({\n ...colorScheme(),\n justifyContent: 'center',\n alignItems: 'center',\n maxWidth: 160,\n minHeight: 24,\n boxSizing: 'border-box',\n font: 'ui-sm',\n color: {\n default: 'gray-25',\n forcedColors: 'ButtonText'\n },\n borderWidth: {\n forcedColors: 1\n },\n borderStyle: {\n forcedColors: 'solid'\n },\n borderColor: {\n forcedColors: 'transparent'\n },\n backgroundColor: 'neutral',\n borderRadius: 'control',\n paddingX: 'edge-to-text',\n paddingY: centerPadding(),\n margin: 8,\n animation: {\n isEntering: slide,\n isExiting: slide\n },\n animationDuration: {\n isEntering: 200,\n isExiting: 200\n },\n animationDirection: {\n isEntering: 'normal',\n isExiting: 'reverse'\n },\n animationTimingFunction: {\n isExiting: 'in'\n },\n '--originX': {\n type: 'marginTop',\n value: {\n placement: {\n top: 0,\n bottom: 0,\n left: 4,\n right: -4\n }\n }\n },\n '--originY': {\n type: 'marginTop',\n value: {\n placement: {\n top: 4,\n bottom: -4,\n left: 0,\n right: -0\n }\n }\n }\n});\n\nconst arrowStyles = style<TooltipRenderProps>({\n display: 'block',\n fill: 'gray-800',\n rotate: {\n placement: {\n top: 0,\n bottom: '180deg',\n left: '-90deg',\n right: '90deg'\n }\n },\n translateX: {\n placement: {\n left: '[-25%]',\n right: '[25%]'\n }\n }\n});\n\nlet InternalTooltipTriggerContext = createContext<TooltipTriggerProps>({});\n\nfunction Tooltip(props: TooltipProps, ref: DOMRef<HTMLDivElement>) {\n let {children, UNSAFE_style, UNSAFE_className = ''} = props;\n let domRef = useDOMRef(ref);\n let {\n containerPadding,\n crossOffset,\n offset,\n placement = 'top',\n shouldFlip\n } = useContext(InternalTooltipTriggerContext);\n let colorScheme = useContext(ColorSchemeContext);\n let {locale, direction} = useLocale();\n let [borderRadius, setBorderRadius] = useState(0);\n\n // TODO: should we pass through lang and dir props in RAC?\n let tooltipRef = useCallback((el: HTMLDivElement) => {\n (domRef as MutableRefObject<HTMLDivElement>).current = el;\n if (el) {\n el.lang = locale;\n el.dir = direction;\n let spectrumBorderRadius = window.getComputedStyle(el).borderRadius;\n if (spectrumBorderRadius !== '') {\n setBorderRadius(parseInt(spectrumBorderRadius, 10));\n }\n }\n }, [locale, direction, domRef]);\n\n return (\n <AriaTooltip\n {...props}\n arrowBoundaryOffset={borderRadius}\n containerPadding={containerPadding}\n crossOffset={crossOffset}\n offset={offset}\n placement={placement}\n shouldFlip={shouldFlip}\n ref={tooltipRef}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>\n {renderProps => (\n <>\n <OverlayArrow>\n <svg className={arrowStyles(renderProps)} xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n <path d=\"M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z\" />\n </svg>\n </OverlayArrow>\n {children}\n </>\n )}\n </AriaTooltip>\n );\n}\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps) {\n let {\n containerPadding,\n crossOffset,\n offset,\n placement,\n shouldFlip,\n ...triggerProps\n } = props;\n\n return (\n <AriaTooltipTrigger {...triggerProps}>\n <InternalTooltipTriggerContext.Provider\n value={{\n containerPadding: containerPadding,\n crossOffset: crossOffset,\n offset: offset,\n placement: placement,\n shouldFlip: shouldFlip\n }}>\n {props.children}\n </InternalTooltipTriggerContext.Provider>\n </AriaTooltipTrigger>\n );\n}\n\n\n/**\n * Display container for Tooltip content. Has a directional arrow dependent on its placement.\n */\nlet _Tooltip = forwardRef(Tooltip);\nexport {_Tooltip as Tooltip};\n\n\n// This is purely so that storybook generates the types for both Menu and MenuTrigger\ninterface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function CombinedTooltip(props: ICombined) {\n return <div />;\n}\n"],"names":[],"version":3,"file":"Tooltip.mjs.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties, ReactNode, JSX, ComponentType, Context, FunctionComponent, SVGProps, RefObject, RefAttributes, ForwardRefExoticComponent, JSXElementConstructor, ReactElement, ReactPortal, HTMLAttributeReferrerPolicy } from "react";
|
|
2
2
|
import { AriaLabelingProps, DOMProps, DOMRefValue, SpectrumLabelableProps, FocusableRefValue, LinkDOMProps, LoadingState, HelpTextProps, Orientation, ValueBase, LabelPosition, InputDOMProps, RangeValue } from "@react-types/shared";
|
|
3
|
-
import { ContextValue, SlotProps, FormProps as _FormProps1, ButtonProps as _ButtonProps1, DisclosurePanelProps as _DisclosurePanelProps1, DisclosureProps as _DisclosureProps1, DisclosureGroupProps, CheckboxProps as _CheckboxProps1, SeparatorProps, PopoverProps as _PopoverProps1, MenuItemProps as _MenuItemProps1, MenuProps as _MenuProps1, MenuTriggerProps as _MenuTriggerProps1, SubmenuTriggerProps as _SubmenuTriggerProps1,
|
|
3
|
+
import { ContextValue, SlotProps, FormProps as _FormProps1, ButtonProps as _ButtonProps1, DisclosurePanelProps as _DisclosurePanelProps1, DisclosureProps as _DisclosureProps1, DisclosureGroupProps, CheckboxProps as _CheckboxProps1, SeparatorProps, PopoverProps as _PopoverProps1, MenuItemProps as _MenuItemProps1, MenuProps as _MenuProps1, MenuSectionProps as _MenuSectionProps1, MenuTriggerProps as _MenuTriggerProps1, SubmenuTriggerProps as _SubmenuTriggerProps1, ProgressBarProps as _ProgressBarProps1, LinkProps as _LinkProps1, DialogProps as _DialogProps1, BreadcrumbsProps as _BreadcrumbsProps1, GridListItemProps, GridListProps, DialogTriggerProps as _DialogTriggerProps1, CheckboxGroupProps as _CheckboxGroupProps1, ColorAreaProps as _ColorAreaProps1, ColorFieldProps as _ColorFieldProps1, ColorSliderProps as _ColorSliderProps1, ColorSwatchProps as _ColorSwatchProps1, ColorWheelProps as _ColorWheelProps1, SelectProps, ListBoxItemProps, ListBoxProps, SectionProps, ComboBoxProps as _ComboBoxProps1, DropZoneProps as _DropZoneProps1, MeterProps as _MeterProps1, NumberFieldProps as _NumberFieldProps1, RadioProps as _RadioProps1, RadioGroupProps as _RadioGroupProps1, SliderProps as _SliderProps1, SearchFieldProps as _SearchFieldProps1, SwitchProps as _SwitchProps1, Key, CellProps as _CellProps1, ColumnProps as _ColumnProps1, RowProps as _RowProps1, TableBodyProps as _TableBodyProps1, TableHeaderProps as _TableHeaderProps1, TableProps, TabListProps as _TabListProps1, TabPanelProps as _TabPanelProps1, TabProps as _TabProps1, TabsProps as _TabsProps1, TagGroupProps as _TagGroupProps1, TagProps as _TagProps1, TagListProps, TextFieldProps as _TextFieldProps1, ToggleButtonProps as _ToggleButtonProps1, TooltipProps as _TooltipProps1, TooltipTriggerComponentProps } from "react-aria-components";
|
|
4
4
|
import { ColorScheme, Router } from "@react-types/provider";
|
|
5
5
|
import { AriaBreadcrumbItemProps } from "react-aria";
|
|
6
6
|
import { TextFieldRef } from "@react-types/textfield";
|
|
@@ -366,7 +366,7 @@ export const MenuContext: Context<ContextValue<MenuProps<any>, DOMRefValue<HTMLD
|
|
|
366
366
|
* Menus display a list of actions or options that a user can choose.
|
|
367
367
|
*/
|
|
368
368
|
export let Menu: <T extends object>(props: MenuProps<T> & RefAttributes<DOMRefValue<HTMLDivElement>>) => ReactElement | null;
|
|
369
|
-
export interface MenuSectionProps<T extends object> extends
|
|
369
|
+
export interface MenuSectionProps<T extends object> extends _MenuSectionProps1<T> {
|
|
370
370
|
}
|
|
371
371
|
export function MenuSection<T extends object>(props: MenuSectionProps<T>): JSX.Element;
|
|
372
372
|
export interface MenuItemProps extends Omit<_MenuItemProps1, 'children' | 'style' | 'className'>, StyleProps {
|