{"version":3,"sources":["../src/multi-select.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport type {\n  CSSProperties,\n  FC,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n} from \"react\"\nimport type { SelectIconProps } from \"./select-icon\"\nimport type { SelectListProps } from \"./select-list\"\nimport type { UseSelectProps } from \"./use-select\"\nimport {\n  forwardRef,\n  omitThemeProps,\n  ui,\n  useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { cx, handlerAll, runIfFunc } from \"@yamada-ui/utils\"\nimport { cloneElement, useMemo } from \"react\"\nimport { SelectClearIcon, SelectIcon } from \"./select-icon\"\nimport { SelectList } from \"./select-list\"\nimport {\n  SelectDescendantsContextProvider,\n  SelectProvider,\n  useSelect,\n  useSelectContext,\n} from \"./use-select\"\n\ninterface MultiSelectOptions {\n  /**\n   * If `true`, display the multi select clear icon.\n   *\n   * @default true\n   */\n  clearable?: boolean\n  /**\n   * The custom display value to use.\n   */\n  component?: FC<{\n    index: number\n    label: string\n    value: string\n    onRemove: MouseEventHandler<HTMLElement>\n  }>\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   * The footer of the multi select content element.\n   */\n  footer?: FC<{ value: string[] | undefined; onClose: () => void }> | ReactNode\n  /**\n   * The header of the multi select content element.\n   */\n  header?: FC<{ value: string[] | undefined; onClose: () => void }> | ReactNode\n  /**\n   * If `true`, display the multi select 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 multi select clear icon element.\n   */\n  clearIconProps?: SelectIconProps\n  /**\n   * Props for multi select container element.\n   */\n  containerProps?: Omit<HTMLUIProps, \"children\">\n  /**\n   * Props for multi select field element.\n   */\n  fieldProps?: Omit<MultiSelectFieldProps, \"children\">\n  /**\n   * Props for multi select icon element.\n   */\n  iconProps?: SelectIconProps\n  /**\n   * Props for multi select list element.\n   */\n  listProps?: Omit<SelectListProps, \"children\">\n  /**\n   * Props to be forwarded to the portal component.\n   *\n   * @default '{ disabled: true }'\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport interface MultiSelectProps\n  extends ThemeProps<\"MultiSelect\">,\n    Omit<UseSelectProps<string[]>, \"placeholderInOptions\">,\n    MultiSelectOptions {}\n\n/**\n * `MultiSelect` is a component used for allowing users to select multiple values from a list of options.\n *\n * @see Docs https://yamada-ui.com/components/forms/multi-select\n */\nexport const MultiSelect = forwardRef<MultiSelectProps, \"div\">((props, ref) => {\n  const [styles, mergedProps] = useComponentMultiStyle(\"MultiSelect\", props)\n  const {\n    className,\n    isClearable = true,\n    clearable = isClearable,\n    closeOnSelect = false,\n    color,\n    component,\n    defaultValue = [],\n    footer,\n    h,\n    header,\n    height = h,\n    minH,\n    minHeight = minH,\n    separator,\n    clearIconProps,\n    containerProps,\n    fieldProps,\n    iconProps,\n    listProps,\n    portalProps = { disabled: true },\n    ...computedProps\n  } = omitThemeProps(mergedProps)\n  const {\n    children,\n    descendants,\n    empty,\n    placeholder,\n    value,\n    formControlProps,\n    getContainerProps,\n    getFieldProps,\n    getPopoverProps,\n    onClear,\n    onClose,\n    ...rest\n  } = useSelect<string[]>({\n    ...computedProps,\n    closeOnSelect,\n    defaultValue,\n    placeholderInOptions: false,\n  })\n  const css: CSSUIObject = {\n    color,\n    h: \"fit-content\",\n    w: \"100%\",\n    ...styles.container,\n  }\n\n  return (\n    <SelectDescendantsContextProvider value={descendants}>\n      <SelectProvider value={{ ...rest, placeholder, styles, value, onClose }}>\n        <Popover {...getPopoverProps()}>\n          <ui.div\n            className={cx(\"ui-multi-select\", className)}\n            __css={css}\n            {...getContainerProps(containerProps)}\n          >\n            <ui.div\n              className=\"ui-multi-select__inner\"\n              __css={{ position: \"relative\", ...styles.inner }}\n            >\n              <PopoverTrigger>\n                <MultiSelectField\n                  component={component}\n                  height={height}\n                  minHeight={minHeight}\n                  separator={separator}\n                  {...getFieldProps(fieldProps, ref)}\n                />\n              </PopoverTrigger>\n\n              {clearable && value.length ? (\n                <SelectClearIcon\n                  {...clearIconProps}\n                  onClick={handlerAll(clearIconProps?.onClick, onClear)}\n                  {...formControlProps}\n                />\n              ) : (\n                <SelectIcon {...iconProps} {...formControlProps} />\n              )}\n            </ui.div>\n\n            {!empty ? (\n              <Portal {...portalProps}>\n                <SelectList\n                  footer={runIfFunc(footer, { value, onClose })}\n                  header={runIfFunc(header, { value, onClose })}\n                  {...listProps}\n                >\n                  {children}\n                </SelectList>\n              </Portal>\n            ) : null}\n          </ui.div>\n        </Popover>\n      </SelectProvider>\n    </SelectDescendantsContextProvider>\n  )\n})\n\nMultiSelect.displayName = \"MultiSelect\"\nMultiSelect.__ui__ = \"MultiSelect\"\n\ninterface MultiSelectFieldProps\n  extends HTMLUIProps,\n    Pick<MultiSelectOptions, \"component\" | \"separator\"> {}\n\nconst MultiSelectField = forwardRef<MultiSelectFieldProps, \"div\">(\n  (\n    {\n      className,\n      component,\n      isTruncated,\n      lineClamp = 1,\n      separator = \",\",\n      ...rest\n    },\n    ref,\n  ) => {\n    const { label, placeholder, styles, value, onChange } = useSelectContext()\n\n    const cloneChildren = useMemo(() => {\n      if (!label?.length)\n        return <ui.span lineClamp={lineClamp}>{placeholder}</ui.span>\n\n      if (component) {\n        return (\n          <ui.span isTruncated={isTruncated} lineClamp={lineClamp}>\n            {(label as string[]).map((label, index) => {\n              const onRemove: MouseEventHandler<HTMLElement> = (e) => {\n                e.stopPropagation()\n\n                onChange(value[index] ?? \"\")\n              }\n\n              const el = component({\n                index,\n                label,\n                value: value[index] ?? \"\",\n                onRemove,\n              }) as null | ReactElement\n\n              const style: CSSProperties = {\n                marginBlockEnd: \"0.125rem\",\n                marginBlockStart: \"0.125rem\",\n                marginInlineEnd: \"0.25rem\",\n              }\n\n              return el\n                ? cloneElement(el as ReactElement, { key: index, style })\n                : null\n            })}\n          </ui.span>\n        )\n      } else {\n        return (\n          <ui.span isTruncated={isTruncated} lineClamp={lineClamp}>\n            {(label as string[]).map((value, index) => {\n              const isLast = label.length === index + 1\n\n              return (\n                <ui.span\n                  key={index}\n                  dangerouslySetInnerHTML={{\n                    __html: `${value}${!isLast ? separator : \"\"}`,\n                  }}\n                  display=\"inline\"\n                  me=\"0.25rem\"\n                />\n              )\n            })}\n          </ui.span>\n        )\n      }\n    }, [\n      label,\n      isTruncated,\n      lineClamp,\n      onChange,\n      placeholder,\n      separator,\n      component,\n      value,\n    ])\n\n    const css: CSSUIObject = {\n      alignItems: \"center\",\n      display: \"flex\",\n      pe: \"2rem\",\n      ...styles.field,\n    }\n\n    if (label?.length && component) css.py = \"0.125rem\"\n\n    return (\n      <ui.div\n        ref={ref}\n        className={cx(\"ui-multi-select__field\", className)}\n        __css={css}\n        {...rest}\n      >\n        {cloneChildren}\n      </ui.div>\n    )\n  },\n)\n\nMultiSelectField.displayName = \"MultiSelectField\"\nMultiSelectField.__ui__ = \"MultiSelectField\"\n"],"mappings":"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","names":["label","_a","value"]}