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

Spectrum 2 UI components in React

{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAkCM,MAAM,0DAAmB,CAAA,GAAA,oBAAY,EAA8D;AAE1G,MAAM;AAaN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AA0BN,MAAM;AAUC,MAAM,4CAA0B,AAAd,WAAW,GAAI,CAAA,GAAA,iBAAS,EAAqB,SAAS,UAC7E,MAAwB,EAAE,GAAwB;IAElD,CAAC,QAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,QAAO,KAAK;IACnD,IAAI,SACF,KAAK,kBACL,cAAc,EACd,aAAa,kBAAkB,gBAC/B,YAAY,cACZ,UAAU,QACV,OAAO,oBACP,gBAAgB,2BAChB,kBAAkB,cAClB,aAAa,uBACb,YAAY,oBACZ,gBAAgB,UAChB,MAAM,EACN,GAAG,gBACJ,GAAG;IACJ,IAAI,cAAc,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,kBAAU;IAEvC,qBACE,gBAAC,CAAA,GAAA,gBAAY;QACX,KAAK;QACL,YAAY;QACX,GAAG,cAAc;QAClB,OAAO;QACP,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAAsC;YAC1E,UAAU,CAAC,CAAC;2BACZ;kBACA;QACF,GAAG;kBACF,CAAC,cAAC,UAAU,aAAE,SAAS,EAAC;YACvB,qBACE;;kCACE,gBAAC,CAAA,GAAA,yCAAS;wBACR,YAAY;wBACZ,YAAY;wBACZ,MAAM;wBACN,eAAe;wBACf,YAAY;wBACZ,oBAAoB;wBACpB,gBAAgB;kCACf;;kCAGH,iBAAC,CAAA,GAAA,yCAAS;wBACR,MAAK;wBACL,YAAY;wBACZ,WAAW;wBACX,MAAM;wBACN,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;0BAIL;kCAAC;wBAAI;;0CACR,gBAAC;0CACC,cAAA,gBAAC;;0CAEH,gBAAC;gCAAiB,WAAW;gCAAW,YAAY;;;;kCAEtD,gBAAC,CAAA,GAAA,yCAAO;wBACN,MAAM;wBACN,YAAY;wBACZ,WAAW;wBACX,aAAa;kCACZ;;;;QAIT;;AAGN;AAEO,SAAS,wCAAmB,KAAwB;IACzD,qBAAO,gBAAC;QAAI,WAAW;kBAAmB,MAAM,QAAQ;;AAC1D;AAEO,SAAS,0CAAU,KAAuC;IAC/D,qBACE,gBAAC,CAAA,GAAA,gBAAY;QAAE,WAAU;QAAI,GAAG,KAAK;kBAClC,CAAC,wBACA,gBAAC,CAAA,GAAA,kBAAc;gBACb,SAAS;gBACT,WAAW,CAAC,cAAgB,kCAAY;wBAAC,GAAG,WAAW;wBAAE,eAAe,QAAQ,IAAI,KAAK;oBAAS;;;AAI5G;AAEO,SAAS,0CAAiB,KAAgD;IAC/E,OAAO,MAAM,SAAS,iBAAG,gBAAC;QAAI,WAAW;kBAAY,cAAA,gBAAC,CAAA,GAAA,yCAAa;YAAE,YAAY,MAAM,UAAU;;SAAa;AAChH","sources":["packages/@react-spectrum/s2/src/DateField.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  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  ContextValue,\n  DateInputProps,\n  DateSegmentRenderProps,\n  DateValue,\n  FormContext\n} from 'react-aria-components';\nimport {createContext, forwardRef, PropsWithChildren, ReactElement, Ref, useContext} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldErrorIcon, FieldGroup, FieldLabel, HelpText} from './Field';\nimport {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DateFieldProps<T extends DateValue> extends\n  Omit<AriaDateFieldProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,\n  StyleProps,\n  SpectrumLabelableProps,\n  HelpTextProps {\n    /**\n     * The size of the DateField.\n     *\n     * @default 'M'\n     */\n    size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport const DateFieldContext = createContext<ContextValue<Partial<DateFieldProps<any>>, HTMLDivElement>>(null);\n\nconst segmentContainer = style({\n  flexGrow: 1,\n  flexShrink: 1,\n  minWidth: 0,\n  height: 'full',\n  overflowX: 'auto',\n  overflowY: 'hidden',\n  scrollbarWidth: 'none',\n  display: 'flex',\n  alignItems: 'center',\n  textWrap: 'nowrap'\n});\n\nconst dateSegment = style<DateSegmentRenderProps & {isPunctuation: boolean}>({\n  outlineStyle: 'none',\n  caretColor: 'transparent',\n  backgroundColor: {\n    default: 'transparent',\n    isFocused: 'blue-800',\n    forcedColors: {\n      default: 'transparent',\n      isFocused: 'Highlight'\n    }\n  },\n  color: {\n    isFocused: 'white',\n    forcedColors: {\n      isFocused: 'HighlightText'\n    }\n  },\n  borderRadius: '[2px]',\n  paddingX: {\n    default: 2,\n    isPunctuation: 0\n  },\n  paddingY: 2,\n  forcedColorAdjust: 'none'\n});\n\nconst iconStyles = style({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'end'\n});\n\n/**\n * DateFields allow users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(\n  props: DateFieldProps<T>, ref: Ref<HTMLDivElement>\n): ReactElement {\n  [props, ref] = useSpectrumContextProps(props, ref, DateFieldContext);\n  let {\n    label,\n    contextualHelp,\n    description: descriptionMessage,\n    errorMessage,\n    isRequired,\n    size = 'M',\n    labelPosition = 'top',\n    necessityIndicator,\n    labelAlign = 'start',\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    ...dateFieldProps\n  } = props;\n  let formContext = useContext(FormContext);\n\n  return (\n    <AriaDateField\n      ref={ref}\n      isRequired={isRequired}\n      {...dateFieldProps}\n      style={UNSAFE_style}\n      className={(UNSAFE_className || '') + style(field(), getAllowedOverrides())({\n        isInForm: !!formContext,\n        labelPosition,\n        size\n      }, styles)}>\n      {({isDisabled, isInvalid}) => {\n        return (\n          <>\n            <FieldLabel\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n              size={size}\n              labelPosition={labelPosition}\n              labelAlign={labelAlign}\n              necessityIndicator={necessityIndicator}\n              contextualHelp={contextualHelp}>\n              {label}\n            </FieldLabel>\n\n            <FieldGroup\n              role=\"presentation\"\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              size={size}\n              styles={style({\n                ...fieldInput(),\n                textWrap: 'nowrap',\n                paddingX: 'edge-to-text'\n              })({size})}>\n              <DateInputContainer>\n                <DateInput />\n              </DateInputContainer>\n              <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n            </FieldGroup>\n            <HelpText\n              size={size}\n              isDisabled={isDisabled}\n              isInvalid={isInvalid}\n              description={descriptionMessage}>\n              {errorMessage}\n            </HelpText>\n          </>\n        );\n      }}\n    </AriaDateField>\n  );\n});\n\nexport function DateInputContainer(props: PropsWithChildren): ReactElement {\n  return <div className={segmentContainer}>{props.children}</div>;\n}\n\nexport function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {\n  return (\n    <AriaDateInput className=\"\" {...props}>\n      {(segment) => (\n        <AriaDateSegment\n          segment={segment}\n          className={(renderProps) => dateSegment({...renderProps, isPunctuation: segment.type === 'literal'})} />\n      )}\n    </AriaDateInput>\n  );\n}\n\nexport function InvalidIndicator(props: {isInvalid: boolean, isDisabled: boolean}): ReactElement | null {\n  return props.isInvalid ? <div className={iconStyles}><FieldErrorIcon isDisabled={props.isDisabled} /></div> : null;\n}\n"],"names":[],"version":3,"file":"DateField.mjs.map"}