@yamada-ui/autocomplete 1.5.4-dev-20240929142808 → 1.5.4-dev-20241001120721
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/autocomplete-create.js +4 -4
- package/dist/autocomplete-create.js.map +1 -1
- package/dist/autocomplete-create.mjs +1 -1
- package/dist/autocomplete-empty.js +4 -4
- package/dist/autocomplete-empty.js.map +1 -1
- package/dist/autocomplete-empty.mjs +1 -1
- package/dist/autocomplete-option.js +4 -4
- package/dist/autocomplete-option.js.map +1 -1
- package/dist/autocomplete-option.mjs +1 -1
- package/dist/autocomplete.js +12 -12
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.mjs +5 -5
- package/dist/{chunk-CCOWDDFS.mjs → chunk-5GKGL6BL.mjs} +5 -5
- package/dist/chunk-5GKGL6BL.mjs.map +1 -0
- package/dist/{chunk-UNGOVJSY.mjs → chunk-HZECQUHV.mjs} +4 -4
- package/dist/{chunk-PCQMCEHL.mjs → chunk-OLOU5HFC.mjs} +2 -2
- package/dist/{chunk-E3Y2E2TK.mjs → chunk-Q2HZVVOI.mjs} +5 -5
- package/dist/chunk-Q2HZVVOI.mjs.map +1 -0
- package/dist/{chunk-7OWUOQZD.mjs → chunk-QPIWG4ZF.mjs} +4 -4
- package/dist/{chunk-2WVIW6HR.mjs → chunk-S2HFYJVI.mjs} +5 -5
- package/dist/chunk-S2HFYJVI.mjs.map +1 -0
- package/dist/index.js +12 -12
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -6
- package/dist/multi-autocomplete.js +12 -12
- package/dist/multi-autocomplete.js.map +1 -1
- package/dist/multi-autocomplete.mjs +5 -5
- package/dist/use-autocomplete.js +4 -4
- package/dist/use-autocomplete.js.map +1 -1
- package/dist/use-autocomplete.mjs +2 -2
- package/package.json +3 -3
- package/dist/chunk-2WVIW6HR.mjs.map +0 -1
- package/dist/chunk-CCOWDDFS.mjs.map +0 -1
- package/dist/chunk-E3Y2E2TK.mjs.map +0 -1
- /package/dist/{chunk-UNGOVJSY.mjs.map → chunk-HZECQUHV.mjs.map} +0 -0
- /package/dist/{chunk-PCQMCEHL.mjs.map → chunk-OLOU5HFC.mjs.map} +0 -0
- /package/dist/{chunk-7OWUOQZD.mjs.map → chunk-QPIWG4ZF.mjs.map} +0 -0
@@ -197,7 +197,7 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
|
|
197
197
|
__css: css,
|
198
198
|
...getCreateProps(rest, ref),
|
199
199
|
children: [
|
200
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
200
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompletePlusIcon, {}) }) : null,
|
201
201
|
icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children: (0, import_utils4.runIfFunc)(children, inputValue) }) : (0, import_utils4.runIfFunc)(children, inputValue)
|
202
202
|
]
|
203
203
|
}
|
@@ -206,15 +206,15 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
|
|
206
206
|
);
|
207
207
|
AutocompleteCreate.displayName = "AutocompleteCreate";
|
208
208
|
AutocompleteCreate.__ui__ = "AutocompleteCreate";
|
209
|
-
var
|
209
|
+
var AutocompletePlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
210
210
|
"path",
|
211
211
|
{
|
212
212
|
fill: "currentColor",
|
213
213
|
d: "M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141 c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27 c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435 c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z"
|
214
214
|
}
|
215
215
|
) });
|
216
|
-
|
217
|
-
|
216
|
+
AutocompletePlusIcon.displayName = "AutocompletePlusIcon";
|
217
|
+
AutocompletePlusIcon.__ui__ = "AutocompletePlusIcon";
|
218
218
|
// Annotate the CommonJS export names for ESM import in node:
|
219
219
|
0 && (module.exports = {
|
220
220
|
AutocompleteCreate
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-create.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteCreate } from \"./use-autocomplete-option\"\n\ninterface AutocompleteCreateOptions {\n /**\n * The autocomplete create option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete create option.\n */\n children?: string | ((inputValue: string) => string)\n}\n\nexport interface AutocompleteCreateProps\n extends Omit<HTMLUIProps<\"li\">, \"children\">,\n AutocompleteCreateOptions {}\n\nexport const AutocompleteCreate = forwardRef<AutocompleteCreateProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { inputValue, styles } = useAutocompleteContext()\n const { getCreateProps } = useAutocompleteCreate()\n\n children ??= inputValue\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--create\", className)}\n __css={css}\n {...getCreateProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>{icon || <PlusIcon />}</AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {runIfFunc(children, inputValue)}\n </ui.span>\n ) : (\n runIfFunc(children, inputValue)\n )}\n </ui.li>\n )\n },\n)\n\nAutocompleteCreate.displayName = \"AutocompleteCreate\"\nAutocompleteCreate.__ui__ = \"AutocompleteCreate\"\n\nconst PlusIcon: FC = () => (\n <svg viewBox=\"0 0 45.402 45.402\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141 c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27 c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435 c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z\"\n />\n </svg>\n)\n\nPlusIcon.displayName = \"PlusIcon\"\nPlusIcon.__ui__ = \"PlusIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n > {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes<HTMLInputElement>\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: { [key: string]: any }\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n useAutocompleteContext,\n useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n /**\n * The value of the autocomplete option.\n */\n value?: string\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the autocomplete option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the autocomplete option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n }, [optionValue])\n\n const getOptionProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n id,\n role: \"option\",\n ...computedProps,\n ...props,\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/autocomplete-create.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteCreate } from \"./use-autocomplete-option\"\n\ninterface AutocompleteCreateOptions {\n /**\n * The autocomplete create option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete create option.\n */\n children?: string | ((inputValue: string) => string)\n}\n\nexport interface AutocompleteCreateProps\n extends Omit<HTMLUIProps<\"li\">, \"children\">,\n AutocompleteCreateOptions {}\n\nexport const AutocompleteCreate = forwardRef<AutocompleteCreateProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { inputValue, styles } = useAutocompleteContext()\n const { getCreateProps } = useAutocompleteCreate()\n\n children ??= inputValue\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--create\", className)}\n __css={css}\n {...getCreateProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>\n {icon || <AutocompletePlusIcon />}\n </AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {runIfFunc(children, inputValue)}\n </ui.span>\n ) : (\n runIfFunc(children, inputValue)\n )}\n </ui.li>\n )\n },\n)\n\nAutocompleteCreate.displayName = \"AutocompleteCreate\"\nAutocompleteCreate.__ui__ = \"AutocompleteCreate\"\n\nconst AutocompletePlusIcon: FC = () => (\n <svg viewBox=\"0 0 45.402 45.402\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141 c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27 c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435 c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z\"\n />\n </svg>\n)\n\nAutocompletePlusIcon.displayName = \"AutocompletePlusIcon\"\nAutocompletePlusIcon.__ui__ = \"AutocompletePlusIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n > {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes<HTMLInputElement>\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: { [key: string]: any }\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n useAutocompleteContext,\n useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n /**\n * The value of the autocomplete option.\n */\n value?: string\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the autocomplete option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the autocomplete option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n }, [optionValue])\n\n const getOptionProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n id,\n role: \"option\",\n ...computedProps,\n ...props,\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","import_jsx_runtime"]}
|
@@ -196,7 +196,7 @@ var AutocompleteEmpty = (0, import_core2.forwardRef)(
|
|
196
196
|
__css: css,
|
197
197
|
...getEmptyProps(rest, ref),
|
198
198
|
children: [
|
199
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
199
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteMinusIcon, {}) }) : null,
|
200
200
|
icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
|
201
201
|
]
|
202
202
|
}
|
@@ -205,15 +205,15 @@ var AutocompleteEmpty = (0, import_core2.forwardRef)(
|
|
205
205
|
);
|
206
206
|
AutocompleteEmpty.displayName = "AutocompleteEmpty";
|
207
207
|
AutocompleteEmpty.__ui__ = "AutocompleteEmpty";
|
208
|
-
var
|
208
|
+
var AutocompleteMinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
209
209
|
"path",
|
210
210
|
{
|
211
211
|
fill: "currentColor",
|
212
212
|
d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
|
213
213
|
}
|
214
214
|
) });
|
215
|
-
|
216
|
-
|
215
|
+
AutocompleteMinusIcon.displayName = "AutocompleteMinusIcon";
|
216
|
+
AutocompleteMinusIcon.__ui__ = "AutocompleteMinusIcon";
|
217
217
|
// Annotate the CommonJS export names for ESM import in node:
|
218
218
|
0 && (module.exports = {
|
219
219
|
AutocompleteEmpty
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-empty.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteEmpty } from \"./use-autocomplete-option\"\n\ninterface AutocompleteEmptyOptions {\n /**\n * The autocomplete empty option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete empty option.\n */\n children?: string\n}\n\nexport interface AutocompleteEmptyProps\n extends Omit<HTMLUIProps<\"li\">, \"children\">,\n AutocompleteEmptyOptions {}\n\nexport const AutocompleteEmpty = forwardRef<AutocompleteEmptyProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { emptyMessage, styles } = useAutocompleteContext()\n const { getEmptyProps } = useAutocompleteEmpty()\n\n children ??= emptyMessage\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n pointerEvents: \"none\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--empty\", className)}\n __css={css}\n {...getEmptyProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>{icon || <MinusIcon />}</AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {children}\n </ui.span>\n ) : (\n children\n )}\n </ui.li>\n )\n },\n)\n\nAutocompleteEmpty.displayName = \"AutocompleteEmpty\"\nAutocompleteEmpty.__ui__ = \"AutocompleteEmpty\"\n\nconst MinusIcon: FC = () => (\n <svg viewBox=\"0 0 448 512\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z\"\n />\n </svg>\n)\n\nMinusIcon.displayName = \"MinusIcon\"\nMinusIcon.__ui__ = \"MinusIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n > {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes<HTMLInputElement>\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: { [key: string]: any }\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n useAutocompleteContext,\n useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n /**\n * The value of the autocomplete option.\n */\n value?: string\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the autocomplete option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the autocomplete option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n }, [optionValue])\n\n const getOptionProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n id,\n role: \"option\",\n ...computedProps,\n ...props,\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/autocomplete-empty.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteEmpty } from \"./use-autocomplete-option\"\n\ninterface AutocompleteEmptyOptions {\n /**\n * The autocomplete empty option icon to use.\n */\n icon?: ReactElement\n /**\n * The label of the autocomplete empty option.\n */\n children?: string\n}\n\nexport interface AutocompleteEmptyProps\n extends Omit<HTMLUIProps<\"li\">, \"children\">,\n AutocompleteEmptyOptions {}\n\nexport const AutocompleteEmpty = forwardRef<AutocompleteEmptyProps, \"li\">(\n ({ className, icon, children, ...rest }, ref) => {\n const { emptyMessage, styles } = useAutocompleteContext()\n const { getEmptyProps } = useAutocompleteEmpty()\n\n children ??= emptyMessage\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n pointerEvents: \"none\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item--empty\", className)}\n __css={css}\n {...getEmptyProps(rest, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon>\n {icon || <AutocompleteMinusIcon />}\n </AutocompleteItemIcon>\n ) : null}\n {icon ? (\n <ui.span style={{ pointerEvents: \"none\", flex: 1 }} lineClamp={1}>\n {children}\n </ui.span>\n ) : (\n children\n )}\n </ui.li>\n )\n },\n)\n\nAutocompleteEmpty.displayName = \"AutocompleteEmpty\"\nAutocompleteEmpty.__ui__ = \"AutocompleteEmpty\"\n\nconst AutocompleteMinusIcon: FC = () => (\n <svg viewBox=\"0 0 448 512\" width=\"1em\" height=\"1em\">\n <path\n fill=\"currentColor\"\n d=\"M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z\"\n />\n </svg>\n)\n\nAutocompleteMinusIcon.displayName = \"AutocompleteMinusIcon\"\nAutocompleteMinusIcon.__ui__ = \"AutocompleteMinusIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n > {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes<HTMLInputElement>\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: { [key: string]: any }\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n useAutocompleteContext,\n useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n /**\n * The value of the autocomplete option.\n */\n value?: string\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the autocomplete option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the autocomplete option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n }, [optionValue])\n\n const getOptionProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n id,\n role: \"option\",\n ...computedProps,\n ...props,\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","import_jsx_runtime"]}
|
@@ -295,7 +295,7 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
|
|
295
295
|
__css: css,
|
296
296
|
...getOptionProps({}, ref),
|
297
297
|
children: [
|
298
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
298
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteCheckIcon, {}) }) : null,
|
299
299
|
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { flex: 1 }, "data-label": true, children })
|
300
300
|
]
|
301
301
|
}
|
@@ -304,15 +304,15 @@ var AutocompleteOption = (0, import_core2.forwardRef)(
|
|
304
304
|
);
|
305
305
|
AutocompleteOption.displayName = "AutocompleteOption";
|
306
306
|
AutocompleteOption.__ui__ = "AutocompleteOption";
|
307
|
-
var
|
307
|
+
var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
308
308
|
"polygon",
|
309
309
|
{
|
310
310
|
fill: "currentColor",
|
311
311
|
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
|
312
312
|
}
|
313
313
|
) });
|
314
|
-
|
315
|
-
|
314
|
+
AutocompleteCheckIcon.displayName = "AutocompleteCheckIcon";
|
315
|
+
AutocompleteCheckIcon.__ui__ = "AutocompleteCheckIcon";
|
316
316
|
// Annotate the CommonJS export names for ESM import in node:
|
317
317
|
0 && (module.exports = {
|
318
318
|
AutocompleteOption
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-option.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n /**\n * The autocomplete option icon to use.\n */\n icon?: ReactElement\n}\n\nexport interface AutocompleteOptionProps\n extends UseAutocompleteOptionProps,\n AutocompleteOptionOptions {}\n\nexport const AutocompleteOption = forwardRef<AutocompleteOptionProps, \"li\">(\n ({ className, icon, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n const { isSelected, customIcon, children, getOptionProps } =\n useAutocompleteOption(rest)\n\n icon ??= customIcon\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item\", className)}\n __css={css}\n {...getOptionProps({}, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon opacity={isSelected ? 1 : 0}>\n {icon || <CheckIcon />}\n </AutocompleteItemIcon>\n ) : null}\n\n <ui.span style={{ flex: 1 }} data-label>\n {children}\n </ui.span>\n </ui.li>\n )\n },\n)\n\nAutocompleteOption.displayName = \"AutocompleteOption\"\nAutocompleteOption.__ui__ = \"AutocompleteOption\"\n\nconst CheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n\nCheckIcon.displayName = \"CheckIcon\"\nCheckIcon.__ui__ = \"CheckIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n > {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes<HTMLInputElement>\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: { [key: string]: any }\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n useAutocompleteContext,\n useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n /**\n * The value of the autocomplete option.\n */\n value?: string\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the autocomplete option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the autocomplete option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n }, [optionValue])\n\n const getOptionProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n id,\n role: \"option\",\n ...computedProps,\n ...props,\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","props","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/autocomplete-option.tsx","../src/autocomplete-context.ts","../src/autocomplete-icon.tsx","../src/use-autocomplete-option.ts"],"sourcesContent":["import type { CSSUIObject, FC } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type { ReactElement } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n /**\n * The autocomplete option icon to use.\n */\n icon?: ReactElement\n}\n\nexport interface AutocompleteOptionProps\n extends UseAutocompleteOptionProps,\n AutocompleteOptionOptions {}\n\nexport const AutocompleteOption = forwardRef<AutocompleteOptionProps, \"li\">(\n ({ className, icon, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n const { isSelected, customIcon, children, getOptionProps } =\n useAutocompleteOption(rest)\n\n icon ??= customIcon\n\n const css: CSSUIObject = {\n textDecoration: \"none\",\n color: \"inherit\",\n userSelect: \"none\",\n display: \"flex\",\n width: \"100%\",\n alignItems: \"center\",\n textAlign: \"start\",\n flex: \"0 0 auto\",\n outline: 0,\n gap: \"0.75rem\",\n ...styles.item,\n }\n\n return (\n <ui.li\n className={cx(\"ui-autocomplete__item\", className)}\n __css={css}\n {...getOptionProps({}, ref)}\n >\n {icon !== null ? (\n <AutocompleteItemIcon opacity={isSelected ? 1 : 0}>\n {icon || <AutocompleteCheckIcon />}\n </AutocompleteItemIcon>\n ) : null}\n\n <ui.span style={{ flex: 1 }} data-label>\n {children}\n </ui.span>\n </ui.li>\n )\n },\n)\n\nAutocompleteOption.displayName = \"AutocompleteOption\"\nAutocompleteOption.__ui__ = \"AutocompleteOption\"\n\nconst AutocompleteCheckIcon: FC = () => (\n <svg viewBox=\"0 0 14 14\" width=\"1em\" height=\"1em\">\n <polygon\n fill=\"currentColor\"\n points=\"5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\"\n />\n </svg>\n)\n\nAutocompleteCheckIcon.displayName = \"AutocompleteCheckIcon\"\nAutocompleteCheckIcon.__ui__ = \"AutocompleteCheckIcon\"\n","import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\nimport type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendantsContext: useAutocompleteDescendantsContext,\n useDescendants: useAutocompleteDescendants,\n useDescendant: useAutocompleteDescendant,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"value\" | \"defaultValue\" | \"onChange\" | \"onCreate\"\n > {\n value: string | string[]\n label: string | string[] | undefined\n inputValue: string\n isHit: boolean\n isEmpty: boolean\n isAllSelected: boolean\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n inputProps: DOMAttributes<HTMLInputElement>\n isOpen: boolean\n onOpen: () => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n focusedIndex: number\n setFocusedIndex: Dispatch<SetStateAction<number>>\n listRef: RefObject<HTMLUListElement>\n inputRef: RefObject<HTMLInputElement>\n formControlProps: { [key: string]: any }\n styles: { [key: string]: CSSUIObject }\n}\n\nexport const [AutocompleteProvider, useAutocompleteContext] =\n createContext<AutocompleteContext>({\n name: \"AutocompleteContext\",\n errorMessage: `useAutocompleteContext returned is 'undefined'. Seems you forgot to wrap the components in \"<Autocomplete />\" or \"<MultiAutocomplete />\"`,\n })\n","import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport type { HTMLAttributes } from \"react\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n cursor: \"pointer\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n focusable: false,\n \"aria-hidden\": true,\n style: {\n maxWidth: \"1em\",\n maxHeight: \"1em\",\n color: \"currentColor\",\n },\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const isDisabled = props.disabled\n\n const rest = useClickable({\n ref,\n isDisabled,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n aria-label=\"Clear value\"\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon w=\"0.5em\" h=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n flexShrink: 0,\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontSize: \"0.85em\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n","import type { HTMLUIProps, PropGetter } from \"@yamada-ui/core\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport type { CSSProperties, MouseEvent } from \"react\"\nimport { useCallback, useId, useRef } from \"react\"\nimport {\n useAutocompleteContext,\n useAutocompleteDescendant,\n} from \"./autocomplete-context\"\n\nconst isTargetOption = (target: EventTarget | null): boolean =>\n isHTMLElement(target) && !!target?.getAttribute(\"role\")?.startsWith(\"option\")\n\nexport interface UseAutocompleteOptionProps\n extends Omit<HTMLUIProps<\"li\">, \"value\" | \"children\"> {\n /**\n * The value of the autocomplete option.\n */\n value?: string\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the autocomplete option will be disabled.\n *\n * @default false\n */\n isDisabled?: boolean\n /**\n * If `true`, the autocomplete option will be focusable.\n *\n * @default false\n */\n isFocusable?: boolean\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n value,\n omitSelectedValues,\n onChange,\n onChangeLabel,\n focusedIndex,\n setFocusedIndex,\n onClose,\n closeOnSelect: generalCloseOnSelect,\n optionProps,\n inputRef,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n icon: customIcon,\n isDisabled,\n isFocusable,\n closeOnSelect: customCloseOnSelect,\n children,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { index, register, descendants } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n\n const isMulti = isArray(value)\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\n\n const isSelected =\n !isDuplicated &&\n (!isMulti\n ? (optionValue ?? \"\") === value\n : value.includes(optionValue ?? \"\"))\n const isTarget = \"target\" in (itemRef.current?.dataset ?? {})\n const isFocused = index === focusedIndex\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLLIElement>) => {\n ev.stopPropagation()\n\n if (isDisabled) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? generalCloseOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n generalCloseOnSelect,\n onClose,\n inputRef,\n ],\n )\n\n useUpdateEffect(() => {\n if (isSelected) onChangeLabel(optionValue ?? \"\", { runOmit: false })\n }, [optionValue])\n\n const getOptionProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref: mergeRefs(itemRef, ref, register),\n id,\n role: \"option\",\n ...computedProps,\n ...props,\n tabIndex: -1,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n \"data-focus\": dataAttr(isFocused),\n \"data-disabled\": dataAttr(isDisabled),\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n isSelected,\n isFocused,\n customIcon,\n children,\n getOptionProps,\n }\n}\n\nexport type UseAutocompleteOptionReturn = ReturnType<\n typeof useAutocompleteOption\n>\n\nexport const useAutocompleteCreate = () => {\n const { isHit, onCreate } = useAutocompleteContext()\n\n const getCreateProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n onClick: handlerAll(props.onClick, onCreate),\n }\n },\n [isHit, onCreate],\n )\n\n return { getCreateProps }\n}\n\nexport type UseAutocompleteCreateReturn = ReturnType<\n typeof useAutocompleteCreate\n>\n\nexport const useAutocompleteEmpty = () => {\n const { isHit, isEmpty } = useAutocompleteContext()\n\n const getEmptyProps: PropGetter<\"li\"> = useCallback(\n (props = {}, ref = null) => {\n const style: CSSProperties = {\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }\n\n return {\n ref,\n ...props,\n tabIndex: -1,\n style: isHit && !isEmpty ? style : undefined,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":"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","names":["import_core","import_utils","import_utils","import_utils","import_react","props","import_jsx_runtime"]}
|
package/dist/autocomplete.js
CHANGED
@@ -355,7 +355,7 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
|
|
355
355
|
__css: css,
|
356
356
|
...getCreateProps(rest, ref),
|
357
357
|
children: [
|
358
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
358
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AutocompletePlusIcon, {}) }) : null,
|
359
359
|
icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children: (0, import_utils4.runIfFunc)(children, inputValue) }) : (0, import_utils4.runIfFunc)(children, inputValue)
|
360
360
|
]
|
361
361
|
}
|
@@ -364,15 +364,15 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
|
|
364
364
|
);
|
365
365
|
AutocompleteCreate.displayName = "AutocompleteCreate";
|
366
366
|
AutocompleteCreate.__ui__ = "AutocompleteCreate";
|
367
|
-
var
|
367
|
+
var AutocompletePlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 45.402 45.402", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
368
368
|
"path",
|
369
369
|
{
|
370
370
|
fill: "currentColor",
|
371
371
|
d: "M41.267,18.557H26.832V4.134C26.832,1.851,24.99,0,22.707,0c-2.283,0-4.124,1.851-4.124,4.135v14.432H4.141 c-2.283,0-4.139,1.851-4.138,4.135c-0.001,1.141,0.46,2.187,1.207,2.934c0.748,0.749,1.78,1.222,2.92,1.222h14.453V41.27 c0,1.142,0.453,2.176,1.201,2.922c0.748,0.748,1.777,1.211,2.919,1.211c2.282,0,4.129-1.851,4.129-4.133V26.857h14.435 c2.283,0,4.134-1.867,4.133-4.15C45.399,20.425,43.548,18.557,41.267,18.557z"
|
372
372
|
}
|
373
373
|
) });
|
374
|
-
|
375
|
-
|
374
|
+
AutocompletePlusIcon.displayName = "AutocompletePlusIcon";
|
375
|
+
AutocompletePlusIcon.__ui__ = "AutocompletePlusIcon";
|
376
376
|
|
377
377
|
// src/autocomplete-empty.tsx
|
378
378
|
var import_core3 = require("@yamada-ui/core");
|
@@ -404,7 +404,7 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
|
|
404
404
|
__css: css,
|
405
405
|
...getEmptyProps(rest, ref),
|
406
406
|
children: [
|
407
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
407
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteItemIcon, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AutocompleteMinusIcon, {}) }) : null,
|
408
408
|
icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.ui.span, { style: { pointerEvents: "none", flex: 1 }, lineClamp: 1, children }) : children
|
409
409
|
]
|
410
410
|
}
|
@@ -413,15 +413,15 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
|
|
413
413
|
);
|
414
414
|
AutocompleteEmpty.displayName = "AutocompleteEmpty";
|
415
415
|
AutocompleteEmpty.__ui__ = "AutocompleteEmpty";
|
416
|
-
var
|
416
|
+
var AutocompleteMinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
417
417
|
"path",
|
418
418
|
{
|
419
419
|
fill: "currentColor",
|
420
420
|
d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
|
421
421
|
}
|
422
422
|
) });
|
423
|
-
|
424
|
-
|
423
|
+
AutocompleteMinusIcon.displayName = "AutocompleteMinusIcon";
|
424
|
+
AutocompleteMinusIcon.__ui__ = "AutocompleteMinusIcon";
|
425
425
|
|
426
426
|
// src/autocomplete-list.tsx
|
427
427
|
var import_core4 = require("@yamada-ui/core");
|
@@ -602,7 +602,7 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
|
|
602
602
|
__css: css,
|
603
603
|
...getOptionProps({}, ref),
|
604
604
|
children: [
|
605
|
-
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
605
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteItemIcon, { opacity: isSelected ? 1 : 0, children: icon || /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AutocompleteCheckIcon, {}) }) : null,
|
606
606
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core5.ui.span, { style: { flex: 1 }, "data-label": true, children })
|
607
607
|
]
|
608
608
|
}
|
@@ -611,15 +611,15 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
|
|
611
611
|
);
|
612
612
|
AutocompleteOption.displayName = "AutocompleteOption";
|
613
613
|
AutocompleteOption.__ui__ = "AutocompleteOption";
|
614
|
-
var
|
614
|
+
var AutocompleteCheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
615
615
|
"polygon",
|
616
616
|
{
|
617
617
|
fill: "currentColor",
|
618
618
|
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
|
619
619
|
}
|
620
620
|
) });
|
621
|
-
|
622
|
-
|
621
|
+
AutocompleteCheckIcon.displayName = "AutocompleteCheckIcon";
|
622
|
+
AutocompleteCheckIcon.__ui__ = "AutocompleteCheckIcon";
|
623
623
|
|
624
624
|
// src/autocomplete-option-group.tsx
|
625
625
|
var import_core7 = require("@yamada-ui/core");
|