@yamada-ui/react/dist/cjs/components/date-picker/date-picker.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"date-picker.cjs","names":["createSlotComponent","datePickerStyle","XIcon","useGroupItemProps","useDatePicker","useInputBorder","useInputPropsContext","useFieldSizing","styled","mergeRefs","CalendarIcon"],"sources":["../../../../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  Direction,\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { DatePickerStyle } from \"./date-picker.style\"\nimport type { UseDatePickerProps, UseDatePickerReturn } from \"./use-date-picker\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useFieldSizing } from \"../../hooks/use-field-sizing\"\nimport { cast, isArray, isDate, isObject, mergeRefs } from \"../../utils\"\nimport { Calendar } from \"../calendar\"\nimport { useGroupItemProps } from \"../group\"\nimport { CalendarIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover } from \"../popover\"\nimport { datePickerStyle } from \"./date-picker.style\"\nimport { useDatePicker } from \"./use-date-picker\"\n\ninterface ComponentContext\n  extends Pick<UseDatePickerReturn, \"getInputProps\" | \"range\" | \"separator\">,\n    Pick<DatePickerProps, \"inputProps\"> {}\n\nexport interface DatePickerProps<\n  Multiple extends boolean = false,\n  Range extends boolean = false,\n> extends Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    UseDatePickerProps<Multiple, Range>,\n    PopupAnimationProps,\n    ThemeProps<DatePickerStyle>,\n    UseInputBorderProps {\n  /**\n   * If `true`, display the clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The icon to be used in the clear button.\n   */\n  clearIcon?: ReactNode\n  /**\n   * The icon to be used in the date picker.\n   */\n  icon?: ReactNode\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end-start'\n   */\n  placement?: Direction\n  /**\n   * The size of the calendar component.\n   */\n  calendarProps?: Calendar.RootProps<Multiple, Range>\n  /**\n   * Props for content element.\n   */\n  contentProps?: DatePickerContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for icon element.\n   */\n  iconProps?: DatePickerIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: DatePickerPropsContext,\n  useComponentContext,\n  usePropsContext: useDatePickerPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<DatePickerProps, DatePickerStyle, ComponentContext>(\n  \"date-picker\",\n  datePickerStyle,\n)\n\nexport { DatePickerPropsContext, useDatePickerPropsContext }\n\n/**\n * `DatePicker` is a component used for users to select a date.\n *\n * @see https://yamada-ui.com/docs/components/date-picker\n */\nexport const DatePicker = withProvider(\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        size,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        calendarProps,\n        contentProps,\n        elementProps,\n        iconProps,\n        inputProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const {\n      children: fieldChildren,\n      range,\n      separator,\n      value,\n      getCalendarProps,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      popoverProps,\n    } = useDatePicker(rest)\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const selectProps = useMemo<Calendar.RootProps[\"selectProps\"]>(\n      () => ({ contentProps: { portalProps: { disabled: true } } }),\n      [],\n    )\n    const componentContext = useMemo(\n      () => ({ range, separator, getInputProps, inputProps }),\n      [getInputProps, inputProps, range, separator],\n    )\n    const hasValue = isArray(value)\n      ? !!value.length\n      : isObject(value) && !isDate(value)\n        ? !!value.end || !!value.start\n        : !!value\n\n    return (\n      <ComponentContext value={componentContext}>\n        <Popover.Root {...mergedPopoverProps}>\n          <InputGroup.Root\n            className={className}\n            css={css}\n            colorScheme={colorScheme}\n            {...getRootProps({ ...groupItemProps, ...rootProps })}\n          >\n            <Popover.Trigger>\n              <DatePickerField {...getFieldProps(varProps)}>\n                {fieldChildren}\n              </DatePickerField>\n            </Popover.Trigger>\n\n            <InputGroup.Element\n              {...{ clickable: clearable && hasValue, ...elementProps }}\n            >\n              {clearable && hasValue ? (\n                <DatePickerIcon\n                  icon={clearIcon}\n                  {...getClearIconProps(iconProps)}\n                />\n              ) : (\n                <DatePickerIcon icon={icon} {...getIconProps(iconProps)} />\n              )}\n            </InputGroup.Element>\n          </InputGroup.Root>\n\n          <DatePickerContent\n            {...cast<DatePickerContentProps>(\n              getContentProps(cast<HTMLProps>(contentProps)),\n            )}\n          >\n            <Calendar.Root\n              colorScheme={colorScheme}\n              size={size}\n              fixed={false}\n              selectProps={selectProps}\n              {...getCalendarProps(calendarProps)}\n            >\n              {children}\n            </Calendar.Root>\n          </DatePickerContent>\n        </Popover.Root>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false, Range extends boolean = false>(\n    props: DatePickerProps<Multiple, Range>,\n  ): ReactElement\n}>\n\ninterface DatePickerFieldProps extends HTMLStyledProps {}\n\nconst DatePickerField = withContext<\"div\", DatePickerFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { range, separator, getInputProps, inputProps } = useComponentContext()\n  const computedChildren = useMemo(() => {\n    if (range) {\n      return (\n        <>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"start\", ...inputProps })}\n          />\n          <DatePickerSeparator>{separator}</DatePickerSeparator>\n          <DatePickerAdjustInput\n            {...getInputProps({ align: \"end\", ...inputProps })}\n          />\n        </>\n      )\n    } else {\n      return (\n        <>\n          {children}\n          <DatePickerInput {...getInputProps(inputProps)} />\n        </>\n      )\n    }\n  }, [children, getInputProps, inputProps, range, separator])\n\n  return {\n    ...rest,\n    children: computedChildren,\n  }\n})\n\ninterface DatePickerInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerInput = withContext<\"input\", DatePickerInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface DatePickerAdjustInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst DatePickerAdjustInput = withContext<\"input\", DatePickerAdjustInputProps>(\n  ({ ref, placeholder, value, ...rest }) => {\n    const { ref: inputRef, text } = useFieldSizing({\n      value: value?.toString() || placeholder,\n    })\n\n    return (\n      <>\n        {text}\n\n        <styled.input\n          ref={mergeRefs(ref, inputRef)}\n          placeholder={placeholder}\n          value={value}\n          {...rest}\n        />\n      </>\n    )\n  },\n  [\"input\", \"adjust\"],\n)()\n\ninterface DatePickerSeparatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst DatePickerSeparator = withContext<\"span\", DatePickerSeparatorProps>(\n  \"span\",\n  \"separator\",\n)()\n\ninterface DatePickerIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst DatePickerIcon = withContext<\"div\", DatePickerIconProps>(\"div\", \"icon\")(\n  undefined,\n  ({ children, icon, ...rest }) => ({\n    children: icon || children || <CalendarIcon />,\n    ...rest,\n  }),\n)\n\ninterface DatePickerContentProps extends Popover.ContentProps {}\n\nconst DatePickerContent = withContext<\"div\", DatePickerContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n"],"mappings":"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"}