@yamada-ui/calendar/dist/chunk-2IG6CI7K.mjs.map

Yamada UI calendar component

{"version":3,"sources":["../src/date-picker.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { IconProps } from \"@yamada-ui/icon\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type { ReactNode, RefAttributes } from \"react\"\nimport type { UseDatePickerProps } from \"./use-date-picker\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { CloseIcon, Icon } from \"@yamada-ui/icon\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport {\n  cx,\n  getValidChildren,\n  isValidElement,\n  mergeRefs,\n  runIfFunc,\n} from \"@yamada-ui/utils\"\nimport { cloneElement, useRef } from \"react\"\nimport { Calendar } from \"./calendar\"\nimport {\n  DatePickerProvider,\n  useDatePicker,\n  useDatePickerContext,\n} from \"./use-date-picker\"\n\ninterface DatePickerOptions {\n  children?: FC<{ value: Date | undefined; onClose: () => void }> | ReactNode\n  /**\n   * If `true`, display the date 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   * 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 month picker container element.\n   */\n  contentProps?: Omit<MotionProps, \"children\">\n  /**\n   * Props for date picker field element.\n   */\n  fieldProps?: Omit<DatePickerFieldProps, \"children\" | \"inputProps\">\n  /**\n   * Props for date picker icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * Props for date picker input element.\n   */\n  inputProps?: DatePickerFieldProps[\"inputProps\"]\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ disabled: true }'\n   *\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport interface DatePickerProps\n  extends ThemeProps<\"DatePicker\">,\n    DatePickerOptions,\n    UseDatePickerProps {}\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see Docs https://yamada-ui.com/components/forms/date-picker\n */\nexport const DatePicker = forwardRef<DatePickerProps, \"input\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"DatePicker\", props)\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    clearIconProps,\n    containerProps,\n    contentProps,\n    fieldProps,\n    iconProps,\n    inputProps,\n    portalProps = { disabled: true },\n    ...computedProps\n  } = omitThemeProps(mergedProps)\n  const {\n    value,\n    getCalendarProps,\n    getContainerProps,\n    getFieldProps,\n    getIconProps,\n    getInputProps,\n    getPopoverProps,\n    onClose,\n  } = useDatePicker(computedProps)\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-date-picker\", className)}\n          __css={css}\n          {...getContainerProps(containerProps)}\n        >\n          <ui.div\n            className=\"ui-date-picker__inner\"\n            __css={{ position: \"relative\", ...styles.inner }}\n          >\n            <DatePickerField\n              {...getFieldProps({ height, minHeight, ...fieldProps }, ref)}\n              inputProps={getInputProps(inputProps)}\n            />\n\n            {clearable && value ? (\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-date-picker__content\"\n              __css={{ ...styles.content }}\n              {...contentProps}\n            >\n              <Calendar\n                className=\"ui-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\nDatePicker.displayName = \"DatePicker\"\nDatePicker.__ui__ = \"DatePicker\"\n\ninterface DatePickerFieldOptions {\n  inputProps?: HTMLUIProps<\"input\"> & RefAttributes<HTMLInputElement>\n}\n\nexport interface DatePickerFieldProps\n  extends HTMLUIProps,\n    DatePickerFieldOptions {}\n\nexport const DatePickerField = forwardRef<DatePickerFieldProps, \"input\">(\n  ({ className, inputProps, ...rest }, ref) => {\n    const styles = useDatePickerContext()\n    const { ref: inputRef, ...computedInputProps } = inputProps ?? {}\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-date-picker__field\", className)}\n          __css={css}\n          {...rest}\n        >\n          <ui.input\n            ref={mergeRefs(ref, inputRef)}\n            className=\"ui-date-picker__field__input\"\n            aria-label=\"Input date value\"\n            display=\"inline-block\"\n            w=\"100%\"\n            {...computedInputProps}\n          />\n        </ui.div>\n      </PopoverTrigger>\n    )\n  },\n)\n\nDatePickerField.displayName = \"DatePickerField\"\nDatePickerField.__ui__ = \"DatePickerField\"\n\nexport interface DatePickerIconProps extends Omit<HTMLUIProps, \"clear\"> {}\n\nexport const DatePickerIcon = forwardRef<DatePickerIconProps, \"div\">(\n  ({ className, children, __css, ...rest }, ref) => {\n    const styles = useDatePickerContext()\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      cursor: \"pointer\",\n      display: \"inline-flex\",\n      justifyContent: \"center\",\n      pointerEvents: \"none\",\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translateY(-50%)\",\n      ...styles.icon,\n      ...__css,\n    }\n\n    const validChildren = getValidChildren(children)\n\n    const cloneChildren = validChildren.map((child) =>\n      cloneElement(child, {\n        style: {\n          color: \"currentColor\",\n          maxHeight: \"1em\",\n          maxWidth: \"1em\",\n        },\n        \"aria-hidden\": true,\n        focusable: false,\n      }),\n    )\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-date-picker__icon\", className)}\n        __css={css}\n        {...rest}\n      >\n        {isValidElement(children) ? cloneChildren : <DatePickerCalendarIcon />}\n      </ui.div>\n    )\n  },\n)\n\nDatePickerIcon.displayName = \"DatePickerIcon\"\nDatePickerIcon.__ui__ = \"DatePickerIcon\"\n\nexport interface DatePickerCalendarIconProps extends IconProps {}\n\nexport const DatePickerCalendarIcon: FC<DatePickerCalendarIconProps> = ({\n  className,\n  ...rest\n}) => {\n  return (\n    <Icon\n      className={cx(\"ui-date-picker__icon__calendar\", className)}\n      viewBox=\"0 0 24 24\"\n      {...rest}\n    >\n      <path\n        d=\"M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z\"\n        fill=\"currentColor\"\n      />\n    </Icon>\n  )\n}\n\nDatePickerCalendarIcon.displayName = \"DatePickerCalendarIcon\"\nDatePickerCalendarIcon.__ui__ = \"DatePickerCalendarIcon\"\n\nexport interface DatePickerClearIconProps extends DatePickerIconProps {\n  disabled?: boolean\n}\n\nexport const DatePickerClearIcon: FC<DatePickerClearIconProps> = ({\n  className,\n  children,\n  ...props\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const styles = useDatePickerContext()\n\n  const disabled = props.disabled\n\n  const rest = useClickable({\n    ref,\n    disabled,\n    ...props,\n  })\n\n  return (\n    <DatePickerIcon\n      className={cx(\"ui-date-picker__icon--clear\", className)}\n      aria-label=\"Clear value\"\n      __css={styles.clearIcon}\n      {...rest}\n    >\n      {children ?? <CloseIcon h=\"0.5em\" w=\"0.5em\" />}\n    </DatePickerIcon>\n  )\n}\n\nDatePickerClearIcon.displayName = \"DatePickerClearIcon\"\nDatePickerClearIcon.__ui__ = \"DatePickerClearIcon\"\n"],"mappings":"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","names":[]}