UNPKG

@react-spectrum/s2

Version:

Spectrum 2 UI components in React

github.com/adobe/react-spectrum

adobe/react-spectrum

1 lines • 11.6 kB
1
{"mappings":"ACgEoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoDK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CmB;;;;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;;;;EA8BtB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBU;;;;EAqCb;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA2CC;;;;EAAA;;;;EAAA;;;;;AApOA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA4HE;EAAA;IAAA","sources":["d4ca8e646fea5360","packages/@react-spectrum/s2/src/DatePicker.tsx"],"sourcesContent":["@import \"54172f634399832c\";\n@import \"fa2321f9143b745c\";\n@import \"8b549979924a612a\";\n@import \"b86e209972e15459\";\n@import \"8b256a2bed52f067\";\n@import \"5e26ccdc056a4ced\";\n@import \"fb93b5d68257fecd\";\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 DatePicker as AriaDatePicker,\n DatePickerProps as AriaDatePickerProps,\n Button,\n ButtonRenderProps,\n ContextValue,\n DateValue,\n Dialog,\n FormContext,\n OverlayTriggerStateContext,\n PopoverProps,\n Provider,\n TimeValue\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, space, style} from '../style' with {type: 'macro'};\nimport {Calendar, CalendarProps, IconContext, TimeField} from '../';\nimport CalendarIcon from '../s2wf-icons/S2_Icon_Calendar_20_N.svg';\nimport {controlBorderRadius, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactElement, ReactNode, Ref, useContext, useRef, useState} from 'react';\nimport {DateInput, DateInputContainer, InvalidIndicator} from './DateField';\nimport {FieldGroup, FieldLabel, HelpText} from './Field';\nimport {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {Popover} from './Popover';\nimport {pressScale} from './pressScale';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\n\nexport interface DatePickerProps<T extends DateValue> extends\n Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,\n Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,\n Pick<PopoverProps, 'shouldFlip'>,\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 * The maximum number of months to display at once in the calendar popover, if screen space permits.\n * @default 1\n */\n maxVisibleMonths?: number\n}\n\nexport const DatePickerContext = createContext<ContextValue<Partial<DatePickerProps<any>>, HTMLDivElement>>(null);\n\nconst inputButton = style<ButtonRenderProps & {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL'}>({\n ...focusRing(),\n ...controlBorderRadius('sm'),\n position: 'relative',\n font: {\n size: {\n S: 'ui-sm',\n M: 'ui',\n L: 'ui-lg',\n XL: 'ui-xl'\n }\n },\n cursor: 'default',\n display: 'flex',\n textAlign: 'center',\n borderStyle: 'none',\n alignItems: 'center',\n justifyContent: 'center',\n width: {\n size: {\n S: 16,\n M: 20,\n L: 24,\n XL: 32\n }\n },\n height: 'auto',\n marginStart: 'text-to-control',\n aspectRatio: 'square',\n flexShrink: 0,\n transition: {\n default: 'default',\n forcedColors: 'none'\n },\n backgroundColor: {\n default: baseColor('gray-100'),\n isOpen: 'gray-200',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isOpen: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n color: {\n default: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: 'ButtonFace'\n }\n});\n\nexport const timeField = style({\n flexShrink: 1,\n flexGrow: 0,\n minWidth: 0,\n width: 'unset'\n});\n\n/**\n * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(\n props: DatePickerProps<T>, ref: Ref<HTMLDivElement>\n): ReactElement {\n [props, ref] = useSpectrumContextProps(props, ref, DatePickerContext);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\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 placeholderValue,\n maxVisibleMonths = 1,\n createCalendar,\n ...dateFieldProps\n } = props;\n let formContext = useContext(FormContext);\n let [buttonHasFocus, setButtonHasFocus] = useState(false);\n\n return (\n <AriaDatePicker\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, isOpen, state}) => {\n let placeholder: DateValue | undefined = placeholderValue ?? undefined;\n let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : undefined;\n let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : undefined;\n let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : undefined;\n let timeGranularity = state.granularity === 'hour' || state.granularity === 'minute' || state.granularity === 'second' ? state.granularity : undefined;\n let showTimeField = !!timeGranularity;\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 <FieldGroup\n role=\"presentation\"\n shouldTurnOffFocusRing={buttonHasFocus}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n size={size}\n styles={style({\n ...fieldInput(),\n textWrap: 'nowrap',\n paddingStart: 'edge-to-text',\n paddingEnd: {\n size: {\n S: 2,\n M: 4,\n L: space(6),\n XL: space(6)\n }\n }\n })({size})}>\n <DateInputContainer>\n <DateInput />\n </DateInputContainer>\n <InvalidIndicator isInvalid={isInvalid} isDisabled={isDisabled} />\n <CalendarButton isOpen={isOpen} size={size} setButtonHasFocus={setButtonHasFocus} />\n </FieldGroup>\n <CalendarPopover shouldFlip={props.shouldFlip}>\n <Calendar\n visibleMonths={maxVisibleMonths}\n createCalendar={createCalendar} />\n {showTimeField && (\n <div className={style({display: 'flex', gap: 16, contain: 'inline-size'})}>\n <TimeField\n styles={timeField}\n label={stringFormatter.format('datepicker.time')}\n value={state.timeValue}\n // TODO: why do i need the cast?\n onChange={v => state.setTimeValue(v as TimeValue)}\n placeholderValue={timePlaceholder}\n granularity={timeGranularity}\n minValue={timeMinValue}\n maxValue={timeMaxValue}\n hourCycle={props.hourCycle}\n hideTimeZone={props.hideTimeZone} />\n </div>\n )}\n </CalendarPopover>\n <HelpText\n size={size}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n description={descriptionMessage}>\n {errorMessage}\n </HelpText>\n </>\n );\n }}\n </AriaDatePicker>\n );\n});\n\nexport function CalendarPopover(props: Omit<PopoverProps, 'children'> & {children: ReactNode}): ReactElement {\n return (\n <Popover\n {...props}\n hideArrow\n padding=\"none\">\n <div\n className={style({\n paddingX: 16,\n paddingY: 32,\n overflow: 'auto',\n display: 'flex',\n flexDirection: 'column',\n gap: 16,\n boxSizing: 'border-box',\n size: 'full'\n })}>\n <Dialog>\n <Provider\n values={[\n [OverlayTriggerStateContext, null]\n ]}>\n {props.children}\n </Provider>\n </Dialog>\n </div>\n </Popover>\n );\n}\n\n\nexport function CalendarButton(props: {isOpen: boolean, size: 'S' | 'M' | 'L' | 'XL', setButtonHasFocus: (hasFocus: boolean) => void}): ReactElement {\n let buttonRef = useRef<HTMLButtonElement>(null);\n let {isOpen, size, setButtonHasFocus} = props;\n return (\n <Button\n ref={buttonRef}\n // Prevent press scale from sticking while DatePicker is open.\n // @ts-ignore\n isPressed={false}\n onFocusChange={setButtonHasFocus}\n style={pressScale(buttonRef)}\n className={renderProps => inputButton({\n ...renderProps,\n size,\n isOpen\n })}>\n <Provider\n values={[\n [IconContext, {\n styles: style({\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n size: fontRelative(14)\n })\n }]\n ]}>\n <CalendarIcon />\n </Provider>\n </Button>\n );\n}\n"],"names":[],"version":3,"file":"DatePicker.css.map"}