@yamada-ui/calendar/dist/chunk-HG2LURYM.mjs.map

Yamada UI calendar component

{"version":3,"sources":["../src/range-date-picker.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { ReactNode, RefAttributes } from \"react\"\nimport type { DatePickerIconProps } from \"./date-picker\"\nimport type { UseRangeDatePickerProps } from \"./use-range-date-picker\"\nimport {\n  forwardRef,\n  layoutStyleProperties,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport {\n  cx,\n  dataAttr,\n  mergeRefs,\n  runIfFunc,\n  splitObject,\n} from \"@yamada-ui/utils\"\nimport { Calendar } from \"./calendar\"\nimport { DatePickerClearIcon, DatePickerIcon } from \"./date-picker\"\nimport { DatePickerProvider, useDatePickerContext } from \"./use-date-picker\"\nimport { useRangeDatePicker } from \"./use-range-date-picker\"\n\ninterface RangeDatePickerOptions {\n  children?: FC<{ value: [Date?, Date?]; onClose: () => void }> | ReactNode\n  /**\n   * If `true`, display the month picker clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * If `true`, display the date picker clear icon.\n   *\n   * @default true\n   *\n   * @deprecated Use `clearable` instead.\n   */\n  isClearable?: boolean\n  /**\n   * The visual separator between each value.\n   *\n   * @default '-'\n   */\n  separator?: string\n  /**\n   * Props for date picker clear icon element.\n   */\n  clearIconProps?: DatePickerIconProps\n  /**\n   * Props for date picker container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for date picker container element.\n   */\n  contentProps?: Omit<MotionProps, \"children\">\n  /**\n   * Props for date picker end input element.\n   */\n  endInputProps?: HTMLUIProps<\"input\">\n  /**\n   * Props for date picker field element.\n   */\n  fieldProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for date picker icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ disabled: true }'\n   *\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Props for date picker start input element.\n   */\n  startInputProps?: HTMLUIProps<\"input\">\n}\n\nexport interface RangeDatePickerProps\n  extends ThemeProps<\"DatePicker\">,\n    RangeDatePickerOptions,\n    UseRangeDatePickerProps {}\n\n/**\n * `RangeDatePicker` is a component used for users to select a range of dates.\n *\n * @see Docs https://yamada-ui.com/components/forms/range-date-picker\n */\nexport const RangeDatePicker = forwardRef<RangeDatePickerProps, \"input\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useComponentMultiStyle(\n      \"RangeDatePicker\",\n      props,\n    )\n    const {\n      className,\n      children,\n      isClearable = true,\n      clearable = isClearable,\n      color,\n      h,\n      height = h,\n      minH,\n      minHeight = minH,\n      separator,\n      clearIconProps,\n      containerProps,\n      contentProps,\n      endInputProps,\n      fieldProps,\n      iconProps,\n      portalProps = { disabled: true },\n      startInputProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n    const {\n      value,\n      getCalendarProps,\n      getContainerProps,\n      getEndInputProps,\n      getFieldProps,\n      getIconProps,\n      getPopoverProps,\n      getStartInputProps,\n      onClose,\n    } = useRangeDatePicker(computedProps)\n    const [startValue, endValue] = value\n    const css: CSSUIObject = {\n      color,\n      h: \"fit-content\",\n      w: \"100%\",\n      ...styles.container,\n    }\n\n    return (\n      <DatePickerProvider value={styles}>\n        <Popover {...getPopoverProps()}>\n          <ui.div\n            className={cx(\"ui-range-date-picker\", className)}\n            __css={css}\n            {...getContainerProps(containerProps)}\n          >\n            <ui.div\n              className=\"ui-range-date-picker__inner\"\n              __css={{ position: \"relative\", ...styles.inner }}\n            >\n              <RangeDatePickerField\n                separator={separator}\n                value={value}\n                {...getFieldProps({ height, minHeight, ...fieldProps })}\n                endInputProps={getEndInputProps(endInputProps)}\n                startInputProps={getStartInputProps(startInputProps, ref)}\n              />\n\n              {clearable && (!!startValue || !!endValue) ? (\n                <DatePickerClearIcon\n                  {...getIconProps({ clear: true, ...clearIconProps })}\n                />\n              ) : (\n                <DatePickerIcon\n                  {...getIconProps({ clear: false, ...iconProps })}\n                />\n              )}\n            </ui.div>\n\n            <Portal {...portalProps}>\n              <PopoverContent\n                as=\"div\"\n                className=\"ui-range-date-picker__content\"\n                __css={{ ...styles.content }}\n                {...contentProps}\n              >\n                <Calendar\n                  className=\"ui-range-date-picker__calendar\"\n                  {...getCalendarProps()}\n                />\n\n                {runIfFunc(children, { value, onClose })}\n              </PopoverContent>\n            </Portal>\n          </ui.div>\n        </Popover>\n      </DatePickerProvider>\n    )\n  },\n)\n\nRangeDatePicker.displayName = \"RangeDatePicker\"\nRangeDatePicker.__ui__ = \"RangeDatePicker\"\n\ninterface RangeDatePickerFieldOptions {\n  value: [Date?, Date?] | undefined\n}\n\nexport interface RangeDatePickerFieldProps\n  extends HTMLUIProps,\n    Pick<\n      RangeDatePickerProps,\n      \"endInputProps\" | \"separator\" | \"startInputProps\"\n    >,\n    RangeDatePickerFieldOptions {}\n\nexport const RangeDatePickerField = forwardRef<\n  RangeDatePickerFieldProps,\n  \"input\"\n>(\n  (\n    {\n      className,\n      separator = \"-\",\n      value = [],\n      endInputProps,\n      startInputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const styles = useDatePickerContext()\n\n    const [startValue, endValue] = value\n    const {\n      ref: startInputRef,\n      placeholder: startPlaceholder,\n      ...computedStartInputProps\n    } = (startInputProps ?? {}) as HTMLUIProps<\"input\"> &\n      RefAttributes<HTMLInputElement>\n    const { placeholder: endPlaceholder, ...computedEndInputProps } =\n      endInputProps ?? {}\n    const hasPlaceholder = !!startPlaceholder || !!endPlaceholder\n    const hasValue = !!startValue || !!endValue\n    const hasSeparator = hasPlaceholder || hasValue\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      pe: \"2rem\",\n      ...styles.field,\n    }\n\n    return (\n      <PopoverTrigger>\n        <ui.div\n          className={cx(\"ui-range-date-picker__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          <AutosizingInput\n            ref={mergeRefs(ref, startInputRef)}\n            className=\"ui-range-date-picker__field__start-input\"\n            aria-label=\"Start date\"\n            placeholder={startPlaceholder}\n            {...computedStartInputProps}\n          />\n\n          {hasSeparator && !!separator ? (\n            <ui.span\n              data-placeholder={dataAttr(!startValue)}\n              marginInline=\"0.25rem\"\n            >\n              {separator}\n            </ui.span>\n          ) : null}\n\n          <AutosizingInput\n            className=\"ui-range-date-picker__field__end-input\"\n            aria-label=\"End date\"\n            placeholder={endPlaceholder}\n            {...computedEndInputProps}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nRangeDatePickerField.displayName = \"RangeDatePickerField\"\nRangeDatePickerField.__ui__ = \"RangeDatePickerField\"\n\ninterface AutosizingInputProps extends HTMLUIProps<\"input\"> {}\n\nconst AutosizingInput = forwardRef<AutosizingInputProps, \"input\">(\n  ({ className, placeholder, value, ...rest }, ref) => {\n    const [containerProps, inputProps] = splitObject(\n      rest,\n      layoutStyleProperties,\n    )\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"inline-flex\",\n      position: \"relative\",\n    }\n\n    return (\n      <ui.div className={className} __css={css} {...containerProps}>\n        <ui.span data-placeholder={dataAttr(!value)} opacity={value ? 0 : 1}>\n          {value || placeholder}\n        </ui.span>\n\n        <ui.input\n          ref={ref}\n          left=\"0\"\n          position=\"absolute\"\n          value={value}\n          w=\"100%\"\n          {...inputProps}\n        />\n      </ui.div>\n    )\n  },\n)\n\nAutosizingInput.displayName = \"AutosizingInput\"\nAutosizingInput.__ui__ = \"AutosizingInput\"\n"],"mappings":"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","names":[]}