@yamada-ui/react/dist/cjs/components/autocomplete/autocomplete.cjs.map

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

{"version":3,"file":"autocomplete.cjs","names":["createSlotComponent","autocompleteStyle","XIcon","useGroupItemProps","useAutocomplete","createComboboxItem","createComboboxChildren","useInputBorder","ComboboxDescendantsContext","ComboboxContext","AutocompleteContext","useInputPropsContext","ChevronDownIcon","useComboboxGroupContext","useComboboxGroup","ComboboxGroupContext","styled","useAutocompleteOption","CheckIcon","MinusIcon"],"sources":["../../../../src/components/autocomplete/autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type {\n  ComboboxItem,\n  UseComboboxGroupProps,\n} from \"../../hooks/use-combobox\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { AutocompleteStyle } from \"./autocomplete.style\"\nimport type {\n  UseAutocompleteOptionProps,\n  UseAutocompleteProps,\n  UseAutocompleteReturn,\n} from \"./use-autocomplete\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  ComboboxContext,\n  ComboboxDescendantsContext,\n  ComboboxGroupContext,\n  createComboboxChildren,\n  createComboboxItem,\n  useComboboxGroup,\n  useComboboxGroupContext,\n} from \"../../hooks/use-combobox\"\nimport { cast, isArray } from \"../../utils\"\nimport { useGroupItemProps } from \"../group\"\nimport { CheckIcon, ChevronDownIcon, MinusIcon, XIcon } from \"../icon\"\nimport { InputGroup, useInputBorder, useInputPropsContext } from \"../input\"\nimport { Popover } from \"../popover\"\nimport { autocompleteStyle } from \"./autocomplete.style\"\nimport {\n  AutocompleteContext,\n  useAutocomplete,\n  useAutocompleteOption,\n} from \"./use-autocomplete\"\n\ninterface ComponentContext\n  extends Pick<UseAutocompleteReturn, \"getInputProps\" | \"getSeparatorProps\">,\n    Pick<\n      AutocompleteRootProps,\n      \"emptyIcon\" | \"emptyProps\" | \"groupProps\" | \"inputProps\" | \"optionProps\"\n    > {}\n\nexport interface AutocompleteRootProps<Multiple extends boolean = false>\n  extends Omit<\n      HTMLStyledProps,\n      \"defaultValue\" | \"filter\" | \"offset\" | \"onChange\" | \"ref\" | \"value\"\n    >,\n    UseAutocompleteProps<Multiple>,\n    PopupAnimationProps,\n    ThemeProps<AutocompleteStyle>,\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 empty element.\n   */\n  emptyIcon?: ReactNode\n  /**\n   * The icon to be used in the autocomplete.\n   */\n  icon?: ReactNode\n  /**\n   * Props for content element.\n   */\n  contentProps?: AutocompleteContentProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * Props for empty element.\n   */\n  emptyProps?: AutocompleteEmptyProps\n  /**\n   * Props for group element.\n   */\n  groupProps?: Omit<AutocompleteGroupProps, \"children\" | \"label\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: AutocompleteIconProps\n  /**\n   * The props for the input element.\n   */\n  inputProps?: HTMLStyledProps<\"input\">\n  /**\n   * Props for option element.\n   */\n  optionProps?: Omit<AutocompleteOptionProps, \"children\" | \"value\">\n  /**\n   * Props for root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: AutocompletePropsContext,\n  useComponentContext,\n  usePropsContext: useAutocompletePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<\n  AutocompleteRootProps,\n  AutocompleteStyle,\n  ComponentContext\n>(\"autocomplete\", autocompleteStyle)\n\nexport { AutocompletePropsContext, useAutocompletePropsContext }\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see https://yamada-ui.com/docs/components/autocomplete\n */\nexport const AutocompleteRoot = withProvider(\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ) => {\n    const [\n      groupItemProps,\n      {\n        className,\n        css,\n        colorScheme,\n        animationScheme = \"block-start\",\n        children,\n        clearable = true,\n        clearIcon = <XIcon />,\n        duration,\n        emptyIcon,\n        errorBorderColor,\n        focusBorderColor,\n        icon,\n        items: itemsProp,\n        contentProps,\n        elementProps,\n        emptyProps,\n        groupProps,\n        iconProps,\n        inputProps,\n        optionProps,\n        rootProps,\n        ...rest\n      },\n    ] = useGroupItemProps(props)\n    const items = useMemo<ComboboxItem[]>(() => {\n      if (itemsProp) return itemsProp\n\n      return createComboboxItem(children, {\n        Group: AutocompleteGroup,\n        Label: AutocompleteLabel,\n        Option: AutocompleteOption,\n      })\n    }, [itemsProp, children])\n    const {\n      children: fieldChildren,\n      descendants,\n      items: computedItems,\n      max,\n      value,\n      getClearIconProps,\n      getContentProps,\n      getFieldProps,\n      getIconProps,\n      getInputProps,\n      getRootProps,\n      getSeparatorProps,\n      popoverProps,\n      onActiveDescendant,\n      onClose,\n      onSelect,\n    } = useAutocomplete({ items, ...rest })\n    const mergedPopoverProps = useMemo<Popover.RootProps>(\n      () => ({\n        animationScheme,\n        duration,\n        ...popoverProps,\n      }),\n      [animationScheme, duration, popoverProps],\n    )\n    const computedChildren = useMemo(\n      () =>\n        createComboboxChildren(computedItems, {\n          Empty: AutocompleteEmpty,\n          Group: AutocompleteGroup,\n          Option: AutocompleteOption,\n        }),\n      [computedItems],\n    )\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const comboboxContext = useMemo(\n      () => ({ onActiveDescendant, onClose, onSelect }),\n      [onActiveDescendant, onClose, onSelect],\n    )\n    const autocompleteContext = useMemo(() => ({ max, value }), [value, max])\n    const componentContext = useMemo(\n      () => ({\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      }),\n      [\n        emptyIcon,\n        emptyProps,\n        getInputProps,\n        getSeparatorProps,\n        groupProps,\n        inputProps,\n        optionProps,\n      ],\n    )\n    const hasValue = isArray(value) ? !!value.length : !!value\n\n    return (\n      <ComboboxDescendantsContext value={descendants}>\n        <ComboboxContext value={comboboxContext}>\n          <AutocompleteContext value={autocompleteContext}>\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                    <AutocompleteField {...getFieldProps(varProps)}>\n                      {fieldChildren}\n                    </AutocompleteField>\n                  </Popover.Trigger>\n\n                  <InputGroup.Element\n                    {...{ clickable: clearable && hasValue, ...elementProps }}\n                  >\n                    {clearable && hasValue ? (\n                      <AutocompleteIcon\n                        icon={clearIcon}\n                        {...getClearIconProps(iconProps)}\n                      />\n                    ) : (\n                      <AutocompleteIcon\n                        icon={icon}\n                        {...getIconProps(iconProps)}\n                      />\n                    )}\n                  </InputGroup.Element>\n                </InputGroup.Root>\n\n                <AutocompleteContent\n                  {...cast<AutocompleteContentProps>(\n                    getContentProps(cast<HTMLProps>(contentProps)),\n                  )}\n                >\n                  {computedChildren}\n                </AutocompleteContent>\n              </Popover.Root>\n            </ComponentContext>\n          </AutocompleteContext>\n        </ComboboxContext>\n      </ComboboxDescendantsContext>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n}) as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: AutocompleteRootProps<Multiple>,\n  ): ReactElement\n}>\n\ninterface AutocompleteFieldProps extends HTMLStyledProps {}\n\nconst AutocompleteField = withContext<\"div\", AutocompleteFieldProps>(\n  \"div\",\n  \"field\",\n)({ \"data-group-propagate\": \"\" }, ({ children, ...rest }) => {\n  const { getInputProps, inputProps } = useComponentContext()\n\n  return {\n    ...rest,\n    children: (\n      <>\n        {children}\n        <AutocompleteInput {...getInputProps(inputProps)} />\n      </>\n    ),\n  }\n})\n\ninterface AutocompleteInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst AutocompleteInput = withContext<\"input\", AutocompleteInputProps>(\n  \"input\",\n  \"input\",\n)()\n\ninterface AutocompleteIconProps extends HTMLStyledProps {\n  icon?: ReactNode\n}\n\nconst AutocompleteIcon = withContext<\"div\", AutocompleteIconProps>(\n  \"div\",\n  \"icon\",\n)(undefined, ({ children, icon, ...rest }) => ({\n  children: icon || children || <ChevronDownIcon />,\n  ...rest,\n}))\n\ninterface AutocompleteContentProps extends Popover.ContentProps {}\n\nconst AutocompleteContent = withContext<\"div\", AutocompleteContentProps>(\n  Popover.Content,\n  \"content\",\n)()\n\nexport interface AutocompleteLabelProps extends HTMLStyledProps<\"span\"> {}\n\nexport const AutocompleteLabel = withContext<\"span\", AutocompleteLabelProps>(\n  \"span\",\n  \"label\",\n)(undefined, (props) => {\n  const { getLabelProps } = useComboboxGroupContext()\n\n  return getLabelProps(props)\n})\n\nexport interface AutocompleteGroupProps\n  extends UseComboboxGroupProps,\n    HTMLStyledProps {\n  /**\n   * The label of the group.\n   */\n  label?: ReactNode\n  /**\n   * Props for the label component.\n   */\n  labelProps?: AutocompleteLabelProps\n}\n\nexport const AutocompleteGroup = withContext<\"div\", AutocompleteGroupProps>(\n  ({ children, label, labelProps, ...rest }) => {\n    const { groupProps } = useComponentContext()\n    const { getGroupProps, getLabelProps } = useComboboxGroup({\n      ...groupProps,\n      ...rest,\n    })\n    const context = useMemo(() => ({ getLabelProps }), [getLabelProps])\n\n    return (\n      <ComboboxGroupContext value={context}>\n        <styled.div {...getGroupProps()}>\n          {label ? (\n            <AutocompleteLabel {...labelProps}>{label}</AutocompleteLabel>\n          ) : null}\n          {children}\n        </styled.div>\n      </ComboboxGroupContext>\n    )\n  },\n  \"group\",\n)()\n\nexport interface AutocompleteOptionProps\n  extends UseAutocompleteOptionProps,\n    HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nexport const AutocompleteOption = withContext<\"div\", AutocompleteOptionProps>(\n  ({ children, icon: iconProp, ...rest }) => {\n    const { optionProps: { icon, ...optionProps } = {} } = useComponentContext()\n    const { getIndicatorProps, getOptionProps } = useAutocompleteOption({\n      ...optionProps,\n      ...rest,\n    })\n\n    return (\n      <styled.div {...getOptionProps()}>\n        <AutocompleteIndicator {...getIndicatorProps()}>\n          {iconProp ?? icon ?? <CheckIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"option\",\n)()\n\ninterface AutocompleteEmptyProps extends HTMLStyledProps {\n  /**\n   * The icon to be used in the autocomplete option.\n   */\n  icon?: ReactNode\n}\n\nconst AutocompleteEmpty = withContext<\"div\", AutocompleteEmptyProps>(\n  ({ children, icon, ...rest }) => {\n    const { emptyIcon, emptyProps } = useComponentContext()\n\n    return (\n      <styled.div {...emptyProps} {...rest}>\n        <AutocompleteIndicator>\n          {icon ?? emptyIcon ?? <MinusIcon />}\n        </AutocompleteIndicator>\n        {children}\n      </styled.div>\n    )\n  },\n  \"empty\",\n)()\n\ninterface AutocompleteIndicatorProps extends HTMLStyledProps {}\n\nconst AutocompleteIndicator = withContext<\"div\", AutocompleteIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)()\n"],"mappings":"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"}