@react-spectrum/s2/dist/SearchField.mjs.map

Spectrum 2 UI components in React

{"mappings":";;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AAiCM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAyD;AAKhG,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAsB;IACtH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACvC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SACF,KAAK,eACL,WAAW,gBACX,YAAY,sBACZ,kBAAkB,iBAClB,gBAAgB,mBAChB,aAAa,2BACb,mBAAmB,kBACnB,YAAY,EACZ,GAAG,kBACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,aAAK,EAAkB;IACpC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IAExC,sCAAsC;IACtC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,yBAAiB,EAAE,QAAQ,SAAS;YACvC;gBACE,IAAI,SAAS,OAAO,EAClB,SAAS,OAAO,CAAC,MAAM;YAE3B;YACA;gBACE,OAAO,SAAS,OAAO;YACzB;QACF,CAAA;IAEA,qBACE,gBAAC,CAAA,GAAA,kBAAc;QACZ,GAAG,gBAAgB;QACpB,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAaJ;YACxB,MAAM,MAAM,IAAI;2BAChB;YACA,UAAU,CAAC,CAAC;QACd,GAAG,MAAM,MAAM;kBACd,CAAC,cAAC,UAAU,aAAE,SAAS,WAAE,OAAO,EAAC,iBAAM;;oBACrC,uBAAS,gBAAC,CAAA,GAAA,yCAAS;wBAClB,YAAY;wBACZ,YAAY,MAAM,UAAU;wBAC5B,MAAM,MAAM,IAAI;wBAChB,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB,MAAM,cAAc;kCACnC;;kCAEH,iBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,MAAM,MAAM,IAAI;wBAChB,MAAM;;0CAKN,gBAAC,CAAA,GAAA,eAAO;gCACN,QAAQ;oCACN;wCAAC,CAAA,GAAA,yCAAU;wCAAG;4CACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;gDACrB,MAAM;gDACN,MAAM;4CAQR;4CACA,MAAM;wCAIR;qCAAE;iCACH;0CACD,cAAA,gBAAC,CAAA,GAAA,wCAAS;;0CAEZ,gBAAC,CAAA,GAAA,yCAAI;gCAAE,KAAK;gCAAU,gBAAgB;;4BACrC,CAAC,WAAW,CAAC,iBAAiB,UAAU,kBAAI,gBAAC,CAAA,GAAA,yCAAU;gCAAE,MAAM,MAAM,IAAI;;;;kCAE5E,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM,MAAM,IAAI;wBAChB,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;;AAKX","sources":["packages/@react-spectrum/s2/src/SearchField.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  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  ContextValue,\n  InputProps,\n  Provider\n} from 'react-aria-components';\nimport {baseColor, fontRelative, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ClearButton} from './ClearButton';\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 {FieldGroup, FieldLabel, HelpText, Input} from './Field';\nimport {FormContext, useFormProps} from './Form';\nimport {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {\n  /**\n   * The size of the SearchField.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);\n\n/**\n * A SearchField is a text field designed for searches.\n */\nexport const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);\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_className = '',\n    UNSAFE_style,\n    ...searchFieldProps\n  } = props;\n\n  let domRef = useRef<HTMLDivElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\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    <AriaSearchField\n      {...searchFieldProps}\n      ref={domRef}\n      style={UNSAFE_style}\n      className={UNSAFE_className + style({\n        ...field(),\n        '--iconMargin': {\n          type: 'marginTop',\n          value: fontRelative(-2)\n        },\n        color: {\n          default: baseColor('neutral'),\n          isDisabled: {\n            default: 'disabled',\n            forcedColors: 'GrayText'\n          }\n        }\n      }, getAllowedOverrides())({\n        size: props.size,\n        labelPosition,\n        isInForm: !!formContext\n      }, props.styles)}>\n      {({isDisabled, isInvalid, isEmpty}) => (<>\n        {label && <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\n          isDisabled={isDisabled}\n          size={props.size}\n          styles={style({\n            borderRadius: 'full',\n            paddingStart: 'pill',\n            paddingEnd: 0\n          })}>\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({\n                  slot: 'icon',\n                  styles: style({\n                    flexShrink: 0,\n                    marginEnd: 'text-to-visual',\n                    '--iconPrimary': {\n                      type: 'fill',\n                      value: 'currentColor'\n                    }\n                  })\n                }),\n                styles: style({\n                  size: fontRelative(20),\n                  marginStart: '--iconMargin'\n                })\n              }]\n            ]}>\n            <SearchIcon />\n          </Provider>\n          <Input ref={inputRef} UNSAFE_className={raw('&::-webkit-search-cancel-button { display: none }')} />\n          {!isEmpty && !searchFieldProps.isReadOnly && <ClearButton size={props.size} />}\n        </FieldGroup>\n        <HelpText\n          size={props.size}\n          isDisabled={isDisabled}\n          isInvalid={isInvalid}\n          description={description}>\n          {errorMessage}\n        </HelpText>\n      </>)}\n    </AriaSearchField>\n  );\n});\n"],"names":[],"version":3,"file":"SearchField.mjs.map"}