@yamada-ui/autocomplete 1.6.0-dev-20241011151311 → 1.6.0-dev-20241011162311
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/autocomplete-context.d.mts +2 -4
- package/dist/autocomplete-context.d.ts +2 -4
- package/dist/autocomplete-context.js.map +1 -1
- package/dist/autocomplete-context.mjs +1 -1
- package/dist/autocomplete-create.js.map +1 -1
- package/dist/autocomplete-create.mjs +4 -4
- package/dist/autocomplete-empty.js.map +1 -1
- package/dist/autocomplete-empty.mjs +4 -4
- package/dist/autocomplete-icon.js.map +1 -1
- package/dist/autocomplete-icon.mjs +2 -2
- package/dist/autocomplete-list.js.map +1 -1
- package/dist/autocomplete-list.mjs +3 -3
- package/dist/autocomplete-option-group.js.map +1 -1
- package/dist/autocomplete-option-group.mjs +3 -3
- package/dist/autocomplete-option.js +11 -14
- package/dist/autocomplete-option.js.map +1 -1
- package/dist/autocomplete-option.mjs +4 -4
- package/dist/autocomplete.d.mts +0 -1
- package/dist/autocomplete.d.ts +0 -1
- package/dist/autocomplete.js +51 -88
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.mjs +12 -12
- package/dist/{chunk-WERCEZNJ.mjs → chunk-352YZTOO.mjs} +39 -62
- package/dist/chunk-352YZTOO.mjs.map +1 -0
- package/dist/{chunk-V6YCG642.mjs → chunk-6OTUOEYS.mjs} +2 -2
- package/dist/{chunk-67X7JKWL.mjs → chunk-7QON6ZHO.mjs} +2 -2
- package/dist/{chunk-7LZUXESV.mjs → chunk-HUY7Q3WA.mjs} +14 -25
- package/dist/chunk-HUY7Q3WA.mjs.map +1 -0
- package/dist/{chunk-K5HCHHCJ.mjs → chunk-J6UKIKNL.mjs} +4 -4
- package/dist/{chunk-AIBJWPRA.mjs → chunk-KWIJUSLC.mjs} +4 -4
- package/dist/{chunk-Q33EMTO2.mjs → chunk-OY5JVCQQ.mjs} +14 -24
- package/dist/chunk-OY5JVCQQ.mjs.map +1 -0
- package/dist/{chunk-2HJUFFCU.mjs → chunk-PKRO525W.mjs} +4 -4
- package/dist/{chunk-VTBUO5SK.mjs → chunk-WJ4P4B2E.mjs} +3 -3
- package/dist/{chunk-4SBNPEK7.mjs → chunk-WNN655FX.mjs} +3 -3
- package/dist/{chunk-TR4X4EEG.mjs → chunk-X2PFHBZY.mjs} +2 -2
- package/dist/{chunk-WDQYM4FP.mjs → chunk-ZNO5RUVT.mjs} +1 -1
- package/dist/chunk-ZNO5RUVT.mjs.map +1 -0
- package/dist/{chunk-6OLHNK7O.mjs → chunk-ZXALWDKQ.mjs} +14 -18
- package/dist/chunk-ZXALWDKQ.mjs.map +1 -0
- package/dist/index.d.mts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +57 -105
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13 -13
- package/dist/multi-autocomplete.d.mts +0 -1
- package/dist/multi-autocomplete.d.ts +0 -1
- package/dist/multi-autocomplete.js +51 -89
- package/dist/multi-autocomplete.js.map +1 -1
- package/dist/multi-autocomplete.mjs +12 -12
- package/dist/use-autocomplete-list.js.map +1 -1
- package/dist/use-autocomplete-list.mjs +2 -2
- package/dist/use-autocomplete-option-group.js.map +1 -1
- package/dist/use-autocomplete-option-group.mjs +2 -2
- package/dist/use-autocomplete-option.js +11 -14
- package/dist/use-autocomplete-option.js.map +1 -1
- package/dist/use-autocomplete-option.mjs +2 -2
- package/dist/use-autocomplete.d.mts +11 -16
- package/dist/use-autocomplete.d.ts +11 -16
- package/dist/use-autocomplete.js +45 -72
- package/dist/use-autocomplete.js.map +1 -1
- package/dist/use-autocomplete.mjs +7 -7
- package/package.json +13 -13
- package/dist/chunk-6OLHNK7O.mjs.map +0 -1
- package/dist/chunk-7LZUXESV.mjs.map +0 -1
- package/dist/chunk-Q33EMTO2.mjs.map +0 -1
- package/dist/chunk-WDQYM4FP.mjs.map +0 -1
- package/dist/chunk-WERCEZNJ.mjs.map +0 -1
- /package/dist/{chunk-V6YCG642.mjs.map → chunk-6OTUOEYS.mjs.map} +0 -0
- /package/dist/{chunk-67X7JKWL.mjs.map → chunk-7QON6ZHO.mjs.map} +0 -0
- /package/dist/{chunk-K5HCHHCJ.mjs.map → chunk-J6UKIKNL.mjs.map} +0 -0
- /package/dist/{chunk-AIBJWPRA.mjs.map → chunk-KWIJUSLC.mjs.map} +0 -0
- /package/dist/{chunk-2HJUFFCU.mjs.map → chunk-PKRO525W.mjs.map} +0 -0
- /package/dist/{chunk-VTBUO5SK.mjs.map → chunk-WJ4P4B2E.mjs.map} +0 -0
- /package/dist/{chunk-4SBNPEK7.mjs.map → chunk-WNN655FX.mjs.map} +0 -0
- /package/dist/{chunk-TR4X4EEG.mjs.map → chunk-X2PFHBZY.mjs.map} +0 -0
@@ -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 type { ReactElement } from \"react\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n /**\n * The autocomplete option icon to use.\n */\n icon?: null | 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 { children, customIcon, isSelected, getOptionProps } =\n useAutocompleteOption(rest)\n\n icon ??= customIcon\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n color: \"inherit\",\n display: \"flex\",\n flex: \"0 0 auto\",\n gap: \"0.75rem\",\n outline: 0,\n textAlign: \"start\",\n textDecoration: \"none\",\n userSelect: \"none\",\n width: \"100%\",\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 height=\"1em\" viewBox=\"0 0 14 14\" width=\"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 type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { ChangeOptions, UseAutocompleteProps } from \"./use-autocomplete\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendant: useAutocompleteDescendant,\n useDescendants: useAutocompleteDescendants,\n useDescendantsContext: useAutocompleteDescendantsContext,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"defaultValue\" | \"onChange\" | \"onCreate\" | \"value\"\n > {\n focusedIndex: number\n inputRef: RefObject<HTMLInputElement>\n inputValue: string\n isAllSelected: boolean\n isEmpty: boolean\n isHit: boolean\n isOpen: boolean\n label: string | string[] | undefined\n listRef: RefObject<HTMLUListElement>\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n value: string | string[]\n formControlProps: { [key: string]: any }\n inputProps: DOMAttributes<HTMLInputElement>\n onChange: (newValue: string, options?: ChangeOptions) => void\n onChangeLabel: (newValue: string, options?: ChangeOptions) => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n onOpen: () => void\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 type { HTMLAttributes } from \"react\"\nimport { forwardRef, ui } 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 { 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 alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n maxHeight: \"1em\",\n maxWidth: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-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 className={cx(\"ui-autocomplete__icon--clear\", className)}\n aria-label=\"Clear value\"\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon h=\"0.5em\" w=\"0.5em\" />}\n </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 alignItems: \"center\",\n display: \"inline-flex\",\n flexShrink: 0,\n fontSize: \"0.85em\",\n justifyContent: \"center\",\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 type { CSSProperties, MouseEvent } from \"react\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n isNumber,\n isString,\n isUndefined,\n mergeRefs,\n useUpdateEffect,\n} from \"@yamada-ui/utils\"\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\">, \"children\" | \"value\"> {\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\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 * The value of the autocomplete option.\n */\n value?: string\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n closeOnSelect: generalCloseOnSelect,\n focusedIndex,\n inputRef,\n omitSelectedValues,\n setFocusedIndex,\n value,\n optionProps,\n onChange,\n onChangeLabel,\n onClose,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n children,\n closeOnSelect: customCloseOnSelect,\n icon: customIcon,\n isDisabled,\n isFocusable,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { descendants, index, register } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n const isMulti = isArray(value)\n\n if (isUndefined(optionValue)) {\n if (isString(children) || isNumber(children)) {\n optionValue = children.toString()\n } else {\n console.warn(\n `${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n }: Cannot infer the option value of complex children. Pass a \\`value\\` prop or use a plain string as children to <Option>.`,\n )\n }\n }\n\n const isDuplicated = !isMulti\n ? frontValues.some(({ node }) => node.dataset.value === (optionValue ?? \"\"))\n : false\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 margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }\n\n return {\n id,\n ref: mergeRefs(itemRef, ref, register),\n role: \"option\",\n ...computedProps,\n ...props,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-disabled\": dataAttr(isDisabled),\n \"data-focus\": dataAttr(isFocused),\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n tabIndex: -1,\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 children,\n customIcon,\n isFocused,\n isSelected,\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 margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }\n\n return {\n ref,\n ...props,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n tabIndex: -1,\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 { isEmpty, isHit } = 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 margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }\n\n return {\n ref,\n ...props,\n style: isHit && !isEmpty ? style : undefined,\n tabIndex: -1,\n }\n },\n [isHit, isEmpty],\n )\n\n return { getEmptyProps }\n}\n\nexport type UseAutocompleteEmptyReturn = ReturnType<typeof useAutocompleteEmpty>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,IAAAA,eAA+B;AAC/B,IAAAC,gBAAmB;;;ACDnB,4BAAiC;AACjC,mBAA8B;AAEvB,IAAM;AAAA,EACX,4BAA4B;AAAA,EAC5B,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,uBAAuB;AACzB,QAAI,wCAAiB;AAkCd,IAAM,CAAC,sBAAsB,sBAAsB,QACxD,4BAAmC;AAAA,EACjC,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;;;AC/CH,kBAA+B;AAC/B,kBAAuC;AACvC,2BAA6B;AAC7B,IAAAC,gBAAqD;AACrD,mBAAqC;AA2Ce;AAtC7C,IAAM,uBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,KAAK,GAAG,QAAQ;AAChD,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAE1C,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,IACL;AAEA,UAAM,oBAAgB,gCAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc;AAAA,MAAI,CAAC,cACvC,2BAAa,OAAO;AAAA,QAClB,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,UAAU;AAAA,QACZ;AAAA,QACA,eAAe;AAAA,QACf,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,kBAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,4CAAe,QAAQ,IAAI,gBAAgB,4CAAC,2BAAY;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;AAMnB,IAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,EAAE,OAAO,IAAI,uBAAuB;AAE1C,QAAM,aAAa,MAAM;AAEzB,QAAM,WAAO,mCAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,kBAAG,gCAAgC,SAAS;AAAA,MACvD,cAAW;AAAA,MACX,OAAO,OAAO;AAAA,MACb,GAAG;AAAA,MAEH,wCAAY,4CAAC,yBAAU,GAAE,SAAQ,GAAE,SAAQ;AAAA;AAAA,EAC9C;AAEJ;AAEA,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;AAIxB,IAAM,2BAAuB,wBAGlC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AACjC,QAAM,EAAE,OAAO,IAAI,uBAAuB;AAE1C,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,kBAAG,+BAA+B,SAAS;AAAA,MACtD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,SAAS;;;ACvH9B,IAAAC,gBAWO;AACP,IAAAC,gBAA2C;AAM3C,IAAM,iBAAiB,CAAC,WAAqC;AApB7D;AAqBE,0CAAc,MAAM,KAAK,CAAC,GAAC,YAAO,aAAa,MAAM,MAA1B,mBAA6B,WAAW;AAAA;AAgC9D,IAAM,wBAAwB,CAAC,UAAsC;AArD5E;AAsDE,QAAM;AAAA,IACJ,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAC3B,QAAM,SAAK,qBAAM;AAEjB,MAAI;AAAA,IACF;AAAA,IACA,eAAe;AAAA,IACf,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,EAAE,GAAG,aAAa,GAAG,MAAM;AAE/B,QAAM,gBAAgB,CAAC,CAAC,cAAc,CAAC;AAEvC,QAAM,cAAU,sBAAsB,IAAI;AAE1C,QAAM,EAAE,aAAa,OAAO,SAAS,IAAI,0BAA0B;AAAA,IACjE,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,SAAS,YAAY,OAAO;AAClC,QAAM,cAAc,OAAO,MAAM,GAAG,KAAK;AACzC,QAAM,cAAU,uBAAQ,KAAK;AAE7B,UAAI,2BAAY,WAAW,GAAG;AAC5B,YAAI,wBAAS,QAAQ,SAAK,wBAAS,QAAQ,GAAG;AAC5C,oBAAc,SAAS,SAAS;AAAA,IAClC,OAAO;AACL,cAAQ;AAAA,QACN,GACE,CAAC,UAAU,iBAAiB,mBAC9B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,UAClB,YAAY,KAAK,CAAC,EAAE,KAAK,MAAM,KAAK,QAAQ,WAAW,oCAAe,GAAG,IACzE;AACJ,QAAM,aACJ,CAAC,iBACA,CAAC,WACG,oCAAe,QAAQ,QACxB,MAAM,SAAS,oCAAe,EAAE;AACtC,QAAM,WAAW,cAAa,mBAAQ,YAAR,mBAAiB,YAAjB,YAA4B,CAAC;AAC3D,QAAM,YAAY,UAAU;AAE5B,QAAM,cAAU;AAAA,IACd,CAAC,OAAkC;AACjC,SAAG,gBAAgB;AAEnB,UAAI,YAAY;AACd,YAAI,SAAS,QAAS,UAAS,QAAQ,MAAM;AAE7C;AAAA,MACF;AAEA,UAAI,CAAC,eAAe,GAAG,aAAa,GAAG;AACrC,YAAI,SAAS,QAAS,UAAS,QAAQ,MAAM;AAE7C;AAAA,MACF;AAEA,sBAAgB,KAAK;AAErB,eAAS,oCAAe,EAAE;AAE1B,UAAI,SAAS,QAAS,UAAS,QAAQ,MAAM;AAE7C,UAAI,oDAAuB,qBAAsB,SAAQ;AAEzD,UAAI,mBAAoB,aAAY,KAAK;AAAA,IAC3C;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,qCAAgB,MAAM;AACpB,QAAI,WAAY,eAAc,oCAAe,IAAI,EAAE,SAAS,MAAM,CAAC;AAAA,EACrE,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,qBAAmC;AAAA,IACvC,CAACC,SAAQ,CAAC,GAAG,MAAM,SAAS;AAC1B,YAAM,QAAuB;AAAA,QAC3B,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAEA,aAAO;AAAA,QACL;AAAA,QACA,SAAK,yBAAU,SAAS,KAAK,QAAQ;AAAA,QACrC,MAAM;AAAA,QACN,GAAG;AAAA,QACH,GAAGA;AAAA,QACH,OACE,CAAC,YAAa,sBAAsB,aAAc,QAAQ;AAAA,QAC5D,gBAAgB;AAAA,QAChB,qBAAiB,wBAAS,UAAU;AAAA,QACpC,qBAAiB,wBAAS,UAAU;AAAA,QACpC,kBAAc,wBAAS,SAAS;AAAA,QAChC,mBAAe,wBAAS,IAAI;AAAA,QAC5B,cAAc,oCAAe;AAAA,QAC7B,UAAU;AAAA,QACV,aAAS,0BAAW,cAAc,SAASA,OAAM,SAAS,OAAO;AAAA,MACnE;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AHzKM,IAAAC,sBAAA;AAvBC,IAAM,yBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,UAAU,YAAY,YAAY,eAAe,IACvD,sBAAsB,IAAI;AAE5B,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QACC,eAAW,kBAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG,eAAe,CAAC,GAAG,GAAG;AAAA,QAEzB;AAAA,mBAAS,OACR,6CAAC,wBAAqB,SAAS,aAAa,IAAI,GAC7C,kBAAQ,6CAAC,yBAAsB,GAClC,IACE;AAAA,UAEJ,6CAAC,gBAAG,MAAH,EAAQ,OAAO,EAAE,MAAM,EAAE,GAAG,cAAU,MACpC,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,mBAAmB,cAAc;AACjC,mBAAmB,SAAS;AAE5B,IAAM,wBAA4B,MAChC,6CAAC,SAAI,QAAO,OAAM,SAAQ,aAAY,OAAM,OAC1C;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,QAAO;AAAA;AACT,GACF;AAGF,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;","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 type { ReactElement } from \"react\"\nimport type { UseAutocompleteOptionProps } from \"./use-autocomplete-option\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { AutocompleteItemIcon } from \"./autocomplete-icon\"\nimport { useAutocompleteOption } from \"./use-autocomplete-option\"\n\ninterface AutocompleteOptionOptions {\n /**\n * The autocomplete option icon to use.\n */\n icon?: null | 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 { children, customIcon, isSelected, getOptionProps } =\n useAutocompleteOption(rest)\n\n icon ??= customIcon\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n color: \"inherit\",\n display: \"flex\",\n flex: \"0 0 auto\",\n gap: \"0.75rem\",\n outline: 0,\n textAlign: \"start\",\n textDecoration: \"none\",\n userSelect: \"none\",\n width: \"100%\",\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 height=\"1em\" viewBox=\"0 0 14 14\" width=\"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 type { Dispatch, DOMAttributes, RefObject, SetStateAction } from \"react\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport const {\n DescendantsContextProvider: AutocompleteDescendantsContextProvider,\n useDescendant: useAutocompleteDescendant,\n useDescendants: useAutocompleteDescendants,\n useDescendantsContext: useAutocompleteDescendantsContext,\n} = createDescendant()\n\ninterface AutocompleteContext\n extends Omit<\n UseAutocompleteProps,\n \"defaultValue\" | \"onChange\" | \"onCreate\" | \"value\"\n > {\n focusedIndex: number\n inputRef: RefObject<HTMLInputElement>\n inputValue: string\n isAllSelected: boolean\n isEmpty: boolean\n isHit: boolean\n isOpen: boolean\n label: string | string[] | undefined\n listRef: RefObject<HTMLUListElement>\n pickOptions: (value: string) => void\n rebirthOptions: (runFocus?: boolean) => void\n setFocusedIndex: Dispatch<SetStateAction<number>>\n styles: { [key: string]: CSSUIObject | undefined }\n value: string | string[]\n formControlProps: { [key: string]: any }\n inputProps: DOMAttributes<HTMLInputElement>\n onChange: (newValue: string, runRebirth?: boolean) => void\n onClose: () => void\n onCreate: () => void\n onFocusFirst: () => void\n onFocusLast: () => void\n onFocusNext: (index?: number) => void\n onFocusPrev: (index?: number) => void\n onOpen: () => void\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 type { HTMLAttributes } from \"react\"\nimport { forwardRef, ui } 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 { 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 alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n maxHeight: \"1em\",\n maxWidth: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-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 className={cx(\"ui-autocomplete__icon--clear\", className)}\n aria-label=\"Clear value\"\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon h=\"0.5em\" w=\"0.5em\" />}\n </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 alignItems: \"center\",\n display: \"inline-flex\",\n flexShrink: 0,\n fontSize: \"0.85em\",\n justifyContent: \"center\",\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 type { CSSProperties, MouseEvent } from \"react\"\nimport {\n ariaAttr,\n dataAttr,\n handlerAll,\n isArray,\n isHTMLElement,\n isNumber,\n isString,\n isUndefined,\n mergeRefs,\n} from \"@yamada-ui/utils\"\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\">, \"children\" | \"value\"> {\n /**\n * The label of the autocomplete option.\n */\n children?: string\n /**\n * If `true`, the list element will be closed when selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\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 * The value of the autocomplete option.\n */\n value?: string\n}\n\nexport const useAutocompleteOption = (props: UseAutocompleteOptionProps) => {\n const {\n closeOnSelect,\n focusedIndex,\n inputRef,\n omitSelectedValues,\n setFocusedIndex,\n value,\n optionProps,\n onChange,\n onClose,\n onFocusNext,\n } = useAutocompleteContext()\n const id = useId()\n\n let {\n children,\n closeOnSelect: customCloseOnSelect,\n icon: customIcon,\n isDisabled,\n isFocusable,\n value: optionValue,\n ...computedProps\n } = { ...optionProps, ...props }\n\n const trulyDisabled = !!isDisabled && !isFocusable\n\n const itemRef = useRef<HTMLLIElement>(null)\n\n const { descendants, index, register } = useAutocompleteDescendant({\n disabled: trulyDisabled,\n })\n\n const values = descendants.values()\n const frontValues = values.slice(0, index)\n const isMulti = isArray(value)\n\n if (isUndefined(optionValue)) {\n if (isString(children) || isNumber(children)) {\n optionValue = children.toString()\n } else {\n console.warn(\n `${\n !isMulti ? \"Autocomplete\" : \"MultiAutocomplete\"\n }: Cannot infer the option value of complex children. Pass a \\`value\\` prop or use a plain string as children to <Option>.`,\n )\n }\n }\n\n const isDuplicated = frontValues.some(\n ({ node }) => node.dataset.value === (optionValue ?? \"\"),\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 || !isTargetOption(ev.currentTarget)) {\n if (inputRef.current) inputRef.current.focus()\n\n return\n }\n\n if (!isDuplicated) setFocusedIndex(index)\n\n onChange(optionValue ?? \"\")\n\n if (inputRef.current) inputRef.current.focus()\n\n if (customCloseOnSelect ?? closeOnSelect) onClose()\n\n if (omitSelectedValues) onFocusNext(index)\n },\n [\n isDuplicated,\n onFocusNext,\n omitSelectedValues,\n isDisabled,\n optionValue,\n setFocusedIndex,\n index,\n onChange,\n customCloseOnSelect,\n closeOnSelect,\n onClose,\n inputRef,\n ],\n )\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 margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }\n\n return {\n id,\n ref: mergeRefs(itemRef, ref, register),\n role: \"option\",\n ...computedProps,\n ...props,\n style:\n !isTarget || (omitSelectedValues && isSelected) ? style : undefined,\n \"aria-checked\": isSelected,\n \"aria-disabled\": ariaAttr(isDisabled),\n \"data-disabled\": dataAttr(isDisabled),\n \"data-duplicated\": dataAttr(isDuplicated),\n \"data-focus\": dataAttr(isFocused),\n \"data-target\": dataAttr(true),\n \"data-value\": optionValue ?? \"\",\n tabIndex: -1,\n onClick: handlerAll(computedProps.onClick, props.onClick, onClick),\n }\n },\n [\n id,\n isDuplicated,\n optionValue,\n computedProps,\n isDisabled,\n isFocused,\n isSelected,\n isTarget,\n omitSelectedValues,\n onClick,\n register,\n ],\n )\n\n return {\n children,\n customIcon,\n isFocused,\n isSelected,\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 margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }\n\n return {\n ref,\n ...props,\n style: isHit ? style : undefined,\n \"data-focus\": dataAttr(!isHit),\n tabIndex: -1,\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 { isEmpty, isHit } = 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 margin: \"-1px\",\n overflow: \"hidden\",\n padding: \"0px\",\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n }\n\n return {\n ref,\n ...props,\n style: isHit && !isEmpty ? style : undefined,\n tabIndex: -1,\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,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
AutocompleteOption
|
4
|
-
} from "./chunk-
|
5
|
-
import "./chunk-
|
6
|
-
import "./chunk-
|
7
|
-
import "./chunk-
|
4
|
+
} from "./chunk-KWIJUSLC.mjs";
|
5
|
+
import "./chunk-ZXALWDKQ.mjs";
|
6
|
+
import "./chunk-6OTUOEYS.mjs";
|
7
|
+
import "./chunk-ZNO5RUVT.mjs";
|
8
8
|
export {
|
9
9
|
AutocompleteOption
|
10
10
|
};
|
package/dist/autocomplete.d.mts
CHANGED
@@ -9,7 +9,6 @@ import { AutocompleteIconProps } from './autocomplete-icon.mjs';
|
|
9
9
|
import { AutocompleteListProps } from './autocomplete-list.mjs';
|
10
10
|
import { UseAutocompleteProps } from './use-autocomplete.mjs';
|
11
11
|
import '@yamada-ui/use-descendant';
|
12
|
-
import 'react/jsx-runtime';
|
13
12
|
import '@yamada-ui/form-control';
|
14
13
|
import '@yamada-ui/popover';
|
15
14
|
import '@yamada-ui/utils';
|
package/dist/autocomplete.d.ts
CHANGED
@@ -9,7 +9,6 @@ import { AutocompleteIconProps } from './autocomplete-icon.js';
|
|
9
9
|
import { AutocompleteListProps } from './autocomplete-list.js';
|
10
10
|
import { UseAutocompleteProps } from './use-autocomplete.js';
|
11
11
|
import '@yamada-ui/use-descendant';
|
12
|
-
import 'react/jsx-runtime';
|
13
12
|
import '@yamada-ui/form-control';
|
14
13
|
import '@yamada-ui/popover';
|
15
14
|
import '@yamada-ui/utils';
|
package/dist/autocomplete.js
CHANGED
@@ -154,7 +154,7 @@ var isTargetOption = (target) => {
|
|
154
154
|
var useAutocompleteOption = (props) => {
|
155
155
|
var _a, _b;
|
156
156
|
const {
|
157
|
-
closeOnSelect
|
157
|
+
closeOnSelect,
|
158
158
|
focusedIndex,
|
159
159
|
inputRef,
|
160
160
|
omitSelectedValues,
|
@@ -162,7 +162,6 @@ var useAutocompleteOption = (props) => {
|
|
162
162
|
value,
|
163
163
|
optionProps,
|
164
164
|
onChange,
|
165
|
-
onChangeLabel,
|
166
165
|
onClose,
|
167
166
|
onFocusNext
|
168
167
|
} = useAutocompleteContext();
|
@@ -193,28 +192,27 @@ var useAutocompleteOption = (props) => {
|
|
193
192
|
);
|
194
193
|
}
|
195
194
|
}
|
196
|
-
const isDuplicated =
|
195
|
+
const isDuplicated = frontValues.some(
|
196
|
+
({ node }) => node.dataset.value === (optionValue != null ? optionValue : "")
|
197
|
+
);
|
197
198
|
const isSelected = !isDuplicated && (!isMulti ? (optionValue != null ? optionValue : "") === value : value.includes(optionValue != null ? optionValue : ""));
|
198
199
|
const isTarget = "target" in ((_b = (_a = itemRef.current) == null ? void 0 : _a.dataset) != null ? _b : {});
|
199
200
|
const isFocused = index === focusedIndex;
|
200
201
|
const onClick = (0, import_react2.useCallback)(
|
201
202
|
(ev) => {
|
202
203
|
ev.stopPropagation();
|
203
|
-
if (isDisabled) {
|
204
|
-
if (inputRef.current) inputRef.current.focus();
|
205
|
-
return;
|
206
|
-
}
|
207
|
-
if (!isTargetOption(ev.currentTarget)) {
|
204
|
+
if (isDisabled || !isTargetOption(ev.currentTarget)) {
|
208
205
|
if (inputRef.current) inputRef.current.focus();
|
209
206
|
return;
|
210
207
|
}
|
211
|
-
setFocusedIndex(index);
|
208
|
+
if (!isDuplicated) setFocusedIndex(index);
|
212
209
|
onChange(optionValue != null ? optionValue : "");
|
213
210
|
if (inputRef.current) inputRef.current.focus();
|
214
|
-
if (customCloseOnSelect != null ? customCloseOnSelect :
|
211
|
+
if (customCloseOnSelect != null ? customCloseOnSelect : closeOnSelect) onClose();
|
215
212
|
if (omitSelectedValues) onFocusNext(index);
|
216
213
|
},
|
217
214
|
[
|
215
|
+
isDuplicated,
|
218
216
|
onFocusNext,
|
219
217
|
omitSelectedValues,
|
220
218
|
isDisabled,
|
@@ -223,14 +221,11 @@ var useAutocompleteOption = (props) => {
|
|
223
221
|
index,
|
224
222
|
onChange,
|
225
223
|
customCloseOnSelect,
|
226
|
-
|
224
|
+
closeOnSelect,
|
227
225
|
onClose,
|
228
226
|
inputRef
|
229
227
|
]
|
230
228
|
);
|
231
|
-
(0, import_utils3.useUpdateEffect)(() => {
|
232
|
-
if (isSelected) onChangeLabel(optionValue != null ? optionValue : "", { runOmit: false });
|
233
|
-
}, [optionValue]);
|
234
229
|
const getOptionProps = (0, import_react2.useCallback)(
|
235
230
|
(props2 = {}, ref = null) => {
|
236
231
|
const style = {
|
@@ -254,6 +249,7 @@ var useAutocompleteOption = (props) => {
|
|
254
249
|
"aria-checked": isSelected,
|
255
250
|
"aria-disabled": (0, import_utils3.ariaAttr)(isDisabled),
|
256
251
|
"data-disabled": (0, import_utils3.dataAttr)(isDisabled),
|
252
|
+
"data-duplicated": (0, import_utils3.dataAttr)(isDuplicated),
|
257
253
|
"data-focus": (0, import_utils3.dataAttr)(isFocused),
|
258
254
|
"data-target": (0, import_utils3.dataAttr)(true),
|
259
255
|
"data-value": optionValue != null ? optionValue : "",
|
@@ -263,6 +259,7 @@ var useAutocompleteOption = (props) => {
|
|
263
259
|
},
|
264
260
|
[
|
265
261
|
id,
|
262
|
+
isDuplicated,
|
266
263
|
optionValue,
|
267
264
|
computedProps,
|
268
265
|
isDisabled,
|
@@ -982,15 +979,23 @@ var useAutocomplete = (props) => {
|
|
982
979
|
);
|
983
980
|
const validChildren = (0, import_utils11.getValidChildren)(children);
|
984
981
|
const computedChildren = (0, import_react5.useMemo)(
|
985
|
-
() => resolvedItems == null ? void 0 : resolvedItems.map((item,
|
982
|
+
() => resolvedItems == null ? void 0 : resolvedItems.map((item, index) => {
|
986
983
|
if ("value" in item) {
|
987
984
|
const { label: label2, value: value2, ...props2 } = item;
|
988
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 },
|
985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props2, children: label2 }, index);
|
989
986
|
} else if ("items" in item) {
|
990
987
|
const { items: items2 = [], label: label2, ...props2 } = item;
|
991
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
989
|
+
AutocompleteOptionGroup,
|
990
|
+
{
|
991
|
+
label: label2,
|
992
|
+
...props2,
|
993
|
+
children: items2.map(({ label: label3, value: value2, ...props3 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AutocompleteOption, { value: value2, ...props3, children: label3 }, index2))
|
994
|
+
},
|
995
|
+
index
|
996
|
+
);
|
992
997
|
}
|
993
|
-
}),
|
998
|
+
}).filter(Boolean),
|
994
999
|
[resolvedItems]
|
995
1000
|
);
|
996
1001
|
const isEmpty = !validChildren.length && !(computedChildren == null ? void 0 : computedChildren.length);
|
@@ -1169,50 +1174,29 @@ var useAutocomplete = (props) => {
|
|
1169
1174
|
},
|
1170
1175
|
[descendants, onFocusFirst]
|
1171
1176
|
);
|
1172
|
-
const
|
1173
|
-
(
|
1174
|
-
const
|
1175
|
-
|
1176
|
-
const
|
1177
|
+
const onChangeLabel = (0, import_react5.useCallback)(
|
1178
|
+
(newValue) => {
|
1179
|
+
const values = descendants.values();
|
1180
|
+
if (!values.length) return;
|
1181
|
+
const resolvedValues = (0, import_utils11.isArray)(newValue) ? newValue : [newValue];
|
1182
|
+
const selectedLabel = resolvedValues.map((value2) => {
|
1177
1183
|
var _a, _b;
|
1178
|
-
const { node } = (_a =
|
1184
|
+
const { node } = (_a = values.find(({ node: node2 }) => node2.dataset.value === value2)) != null ? _a : {};
|
1179
1185
|
if (node) {
|
1180
|
-
const
|
1186
|
+
const { textContent } = (_b = Array.from(node.children).find(
|
1181
1187
|
(child) => child.getAttribute("data-label") !== null
|
1182
|
-
);
|
1183
|
-
return
|
1188
|
+
)) != null ? _b : {};
|
1189
|
+
return textContent;
|
1184
1190
|
} else {
|
1185
1191
|
return allowFree ? value2 : void 0;
|
1186
1192
|
}
|
1187
|
-
}).filter(
|
1188
|
-
|
1189
|
-
},
|
1190
|
-
[allowFree, descendants]
|
1191
|
-
);
|
1192
|
-
const onChangeLabel = (0, import_react5.useCallback)(
|
1193
|
-
(newValue, { forceUpdate, runOmit = true } = {}) => {
|
1194
|
-
const selectedValues2 = getSelectedValues(newValue);
|
1195
|
-
if (!forceUpdate && !selectedValues2.length) return;
|
1196
|
-
setLabel((prev) => {
|
1197
|
-
if (!isMulti) {
|
1198
|
-
return selectedValues2[0];
|
1199
|
-
} else {
|
1200
|
-
selectedValues2.forEach((selectedValue) => {
|
1201
|
-
const isSelected = (0, import_utils11.isArray)(prev) && prev.includes(selectedValue);
|
1202
|
-
if (!isSelected) {
|
1203
|
-
prev = [...(0, import_utils11.isArray)(prev) ? prev : [], selectedValue];
|
1204
|
-
} else if (runOmit) {
|
1205
|
-
prev = (0, import_utils11.isArray)(prev) ? prev.filter((value2) => value2 !== selectedValue) : void 0;
|
1206
|
-
}
|
1207
|
-
});
|
1208
|
-
return prev;
|
1209
|
-
}
|
1210
|
-
});
|
1193
|
+
}).filter((label2) => !(0, import_utils11.isUndefined)(label2));
|
1194
|
+
setLabel(!isMulti ? selectedLabel[0] : selectedLabel);
|
1211
1195
|
},
|
1212
|
-
[
|
1196
|
+
[allowFree, descendants, isMulti]
|
1213
1197
|
);
|
1214
1198
|
const onChange = (0, import_react5.useCallback)(
|
1215
|
-
(newValue,
|
1199
|
+
(newValue, runRebirth = true) => {
|
1216
1200
|
setValue((prev) => {
|
1217
1201
|
let next;
|
1218
1202
|
if (!(0, import_utils11.isArray)(prev)) {
|
@@ -1234,14 +1218,13 @@ var useAutocomplete = (props) => {
|
|
1234
1218
|
return format((_a = node.textContent) != null ? _a : "").includes(newValue);
|
1235
1219
|
}
|
1236
1220
|
).length > 0;
|
1237
|
-
|
1238
|
-
if (allowFree || isHit2) setInputValue("");
|
1221
|
+
if (allowCreate || allowFree || isHit2) setInputValue("");
|
1239
1222
|
if (isMulti && runRebirth) rebirthOptions(false);
|
1240
1223
|
},
|
1241
1224
|
[
|
1242
1225
|
allowFree,
|
1226
|
+
allowCreate,
|
1243
1227
|
isMulti,
|
1244
|
-
onChangeLabel,
|
1245
1228
|
rebirthOptions,
|
1246
1229
|
setValue,
|
1247
1230
|
descendants,
|
@@ -1352,7 +1335,7 @@ var useAutocomplete = (props) => {
|
|
1352
1335
|
const relatedTarget = (0, import_utils11.getEventRelatedTarget)(ev);
|
1353
1336
|
if ((0, import_utils11.isContains)(containerRef.current, relatedTarget)) return;
|
1354
1337
|
if (!closeOnBlur && isHit) return;
|
1355
|
-
if (allowFree && !!inputValue) onChange(inputValue,
|
1338
|
+
if (allowFree && !!inputValue) onChange(inputValue, false);
|
1356
1339
|
setInputValue("");
|
1357
1340
|
if (isOpen) onClose();
|
1358
1341
|
},
|
@@ -1360,7 +1343,7 @@ var useAutocomplete = (props) => {
|
|
1360
1343
|
);
|
1361
1344
|
const onDelete = (0, import_react5.useCallback)(() => {
|
1362
1345
|
if (!isMulti) {
|
1363
|
-
onChange(""
|
1346
|
+
onChange("");
|
1364
1347
|
} else {
|
1365
1348
|
onChange(value[value.length - 1]);
|
1366
1349
|
}
|
@@ -1447,18 +1430,9 @@ var useAutocomplete = (props) => {
|
|
1447
1430
|
onClose,
|
1448
1431
|
maxSelectValues
|
1449
1432
|
]);
|
1450
|
-
(0,
|
1451
|
-
|
1452
|
-
|
1453
|
-
if (JSON.stringify((_a = prevValue.current) != null ? _a : []) === JSON.stringify(value))
|
1454
|
-
return;
|
1455
|
-
const label2 = getSelectedValues(value);
|
1456
|
-
setLabel(label2);
|
1457
|
-
} else {
|
1458
|
-
if (prevValue.current === value) return;
|
1459
|
-
onChangeLabel(value, { runOmit: false });
|
1460
|
-
}
|
1461
|
-
}, [isMulti, value, onChangeLabel, getSelectedValues]);
|
1433
|
+
(0, import_utils11.useSafeLayoutEffect)(() => {
|
1434
|
+
onChangeLabel(value);
|
1435
|
+
}, [value]);
|
1462
1436
|
(0, import_utils11.useUpdateEffect)(() => {
|
1463
1437
|
if (isOpen || allowFree) return;
|
1464
1438
|
setFocusedIndex(-1);
|
@@ -1565,8 +1539,8 @@ var useAutocomplete = (props) => {
|
|
1565
1539
|
id,
|
1566
1540
|
allowCreate,
|
1567
1541
|
allowFree,
|
1542
|
+
children: children != null ? children : computedChildren,
|
1568
1543
|
closeOnSelect,
|
1569
|
-
computedChildren,
|
1570
1544
|
descendants,
|
1571
1545
|
emptyMessage,
|
1572
1546
|
focusedIndex,
|
@@ -1590,7 +1564,6 @@ var useAutocomplete = (props) => {
|
|
1590
1564
|
inputProps,
|
1591
1565
|
optionProps,
|
1592
1566
|
onChange,
|
1593
|
-
onChangeLabel,
|
1594
1567
|
onClear,
|
1595
1568
|
onClose,
|
1596
1569
|
onCompositionEnd,
|
@@ -1684,7 +1657,6 @@ var Autocomplete = (0, import_core9.forwardRef)(
|
|
1684
1657
|
const [styles, mergedProps] = (0, import_core9.useComponentMultiStyle)("Autocomplete", props);
|
1685
1658
|
let {
|
1686
1659
|
className,
|
1687
|
-
children,
|
1688
1660
|
color,
|
1689
1661
|
defaultValue = "",
|
1690
1662
|
footer,
|
@@ -1706,7 +1678,7 @@ var Autocomplete = (0, import_core9.forwardRef)(
|
|
1706
1678
|
} = (0, import_core9.omitThemeProps)(mergedProps);
|
1707
1679
|
const {
|
1708
1680
|
allowCreate,
|
1709
|
-
|
1681
|
+
children,
|
1710
1682
|
descendants,
|
1711
1683
|
inputValue,
|
1712
1684
|
isEmpty,
|
@@ -1717,7 +1689,7 @@ var Autocomplete = (0, import_core9.forwardRef)(
|
|
1717
1689
|
getPopoverProps,
|
1718
1690
|
onClose,
|
1719
1691
|
...rest
|
1720
|
-
} = useAutocomplete({ ...computedProps,
|
1692
|
+
} = useAutocomplete({ ...computedProps, defaultValue });
|
1721
1693
|
h != null ? h : h = height;
|
1722
1694
|
minH != null ? minH : minH = minHeight;
|
1723
1695
|
const css = {
|
@@ -1765,26 +1737,17 @@ var Autocomplete = (0, import_core9.forwardRef)(
|
|
1765
1737
|
]
|
1766
1738
|
}
|
1767
1739
|
),
|
1768
|
-
|
1740
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
1769
1741
|
AutocompleteList,
|
1770
1742
|
{
|
1771
1743
|
footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
|
1772
1744
|
header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
|
1773
1745
|
contentProps,
|
1774
1746
|
...listProps,
|
1775
|
-
children: [
|
1747
|
+
children: !isEmpty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
1776
1748
|
allowCreate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps }),
|
1777
|
-
children
|
1778
|
-
]
|
1779
|
-
}
|
1780
|
-
) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
1781
|
-
AutocompleteList,
|
1782
|
-
{
|
1783
|
-
footer: (0, import_utils12.runIfFunc)(footer, { value, onClose }),
|
1784
|
-
header: (0, import_utils12.runIfFunc)(header, { value, onClose }),
|
1785
|
-
contentProps,
|
1786
|
-
...listProps,
|
1787
|
-
children: allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
|
1749
|
+
children
|
1750
|
+
] }) : allowCreate && inputValue ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteCreate, { ...createProps }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AutocompleteEmpty, { ...emptyProps })
|
1788
1751
|
}
|
1789
1752
|
) })
|
1790
1753
|
]
|