@react-spectrum/s2/dist/ColorField.css.map

Spectrum 2 UI components in React

{"mappings":"AA+EoC;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA","sources":["packages/@react-spectrum/s2/src/ColorField.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  ColorField as AriaColorField,\n  ColorFieldProps as AriaColorFieldProps,\n  ContextValue,\n  InputProps\n} from 'react-aria-components';\nimport {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';\nimport {createFocusableRef} from '@react-spectrum/utils';\nimport {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {\n  /**\n   * The size of the color field.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);\n\n/**\n * A color field allows users to edit a hex color or individual color channel value.\n */\nexport const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);\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    UNSAFE_style,\n    UNSAFE_className = '',\n    styles,\n    ...fieldProps\n  } = props;\n\n  // Expose imperative interface for ref\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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    <AriaColorField\n      {...fieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style(field(), getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, styles)}>\n      {({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        <FieldGroup size={props.size}>\n          <Input ref={inputRef} />\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    </AriaColorField>\n  );\n});\n"],"names":[],"version":3,"file":"ColorField.css.map"}