@yamada-ui/autocomplete 1.5.3-dev-20240927133030 → 1.5.3-dev-20240927160413
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 +34 -0
- package/dist/autocomplete-create.js.map +1 -1
- package/dist/autocomplete-create.mjs +2 -2
- package/dist/autocomplete-empty.js +34 -0
- package/dist/autocomplete-empty.js.map +1 -1
- package/dist/autocomplete-empty.mjs +2 -2
- package/dist/autocomplete-icon.d.mts +1 -2
- package/dist/autocomplete-icon.d.ts +1 -2
- package/dist/autocomplete-icon.js +6 -0
- package/dist/autocomplete-icon.js.map +1 -1
- package/dist/autocomplete-icon.mjs +1 -1
- package/dist/autocomplete-list.js +2 -0
- package/dist/autocomplete-list.js.map +1 -1
- package/dist/autocomplete-list.mjs +1 -1
- package/dist/autocomplete-option-group.js +2 -0
- package/dist/autocomplete-option-group.js.map +1 -1
- package/dist/autocomplete-option-group.mjs +1 -1
- package/dist/autocomplete-option.js +34 -0
- package/dist/autocomplete-option.js.map +1 -1
- package/dist/autocomplete-option.mjs +2 -2
- package/dist/autocomplete.js +50 -0
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.mjs +8 -8
- package/dist/{chunk-3UWNE3MN.mjs → chunk-2GOTGBRK.mjs} +6 -2
- package/dist/chunk-2GOTGBRK.mjs.map +1 -0
- package/dist/{chunk-HL2KEBRX.mjs → chunk-5MMUZ2XQ.mjs} +3 -1
- package/dist/{chunk-HL2KEBRX.mjs.map → chunk-5MMUZ2XQ.mjs.map} +1 -1
- package/dist/{chunk-MB4ABPZP.mjs → chunk-6F3LT7J6.mjs} +3 -1
- package/dist/{chunk-MB4ABPZP.mjs.map → chunk-6F3LT7J6.mjs.map} +1 -1
- package/dist/{chunk-JXFXCGZK.mjs → chunk-7SWSKLSA.mjs} +7 -1
- package/dist/chunk-7SWSKLSA.mjs.map +1 -0
- package/dist/{chunk-4PUN44UX.mjs → chunk-K42L5QVM.mjs} +10 -6
- package/dist/{chunk-4PUN44UX.mjs.map → chunk-K42L5QVM.mjs.map} +1 -1
- package/dist/{chunk-V3FMPDN3.mjs → chunk-OTVG42AD.mjs} +6 -2
- package/dist/{chunk-V3FMPDN3.mjs.map → chunk-OTVG42AD.mjs.map} +1 -1
- package/dist/{chunk-JKW73NYF.mjs → chunk-YEFQMSJM.mjs} +3 -3
- package/dist/{chunk-XLSSDAC6.mjs → chunk-ZTDA3B2B.mjs} +6 -2
- package/dist/{chunk-XLSSDAC6.mjs.map → chunk-ZTDA3B2B.mjs.map} +1 -1
- package/dist/{chunk-5VBRK4H6.mjs → chunk-ZZSGPNV3.mjs} +10 -6
- package/dist/{chunk-5VBRK4H6.mjs.map → chunk-ZZSGPNV3.mjs.map} +1 -1
- package/dist/index.js +30 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +9 -9
- package/dist/multi-autocomplete.js +26 -0
- package/dist/multi-autocomplete.js.map +1 -1
- package/dist/multi-autocomplete.mjs +8 -8
- package/dist/use-autocomplete.js +36 -0
- package/dist/use-autocomplete.js.map +1 -1
- package/dist/use-autocomplete.mjs +4 -4
- package/package.json +13 -13
- package/dist/chunk-3UWNE3MN.mjs.map +0 -1
- package/dist/chunk-JXFXCGZK.mjs.map +0 -1
- /package/dist/{chunk-JKW73NYF.mjs.map → chunk-YEFQMSJM.mjs.map} +0 -0
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-list.tsx"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { useAutocompleteList } from \"./use-autocomplete-list\"\n\nexport interface AutocompleteListProps extends HTMLUIProps<\"ul\"> {\n contentProps?: MotionPropsWithoutChildren\n header?: ReactNode\n footer?: ReactNode\n}\n\nexport const AutocompleteList = forwardRef<AutocompleteListProps, \"ul\">(\n (\n {\n className,\n w,\n width,\n minW,\n minWidth,\n maxW,\n maxWidth,\n contentProps,\n header,\n footer,\n children,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useAutocompleteContext()\n const { onAnimationComplete, getListProps } = useAutocompleteList()\n\n width ??= w\n width ??= (styles.list?.width ?? styles.list?.w) as CSSUIProps[\"width\"]\n minWidth ??= minW\n minWidth ??= (styles.list?.minWidth ??\n styles.list?.minW) as CSSUIProps[\"minWidth\"]\n maxWidth ??= maxW\n maxWidth ??= (styles.list?.maxWidth ??\n styles.list?.maxW) as CSSUIProps[\"maxWidth\"]\n\n return (\n <PopoverContent\n as=\"div\"\n className=\"ui-autocomplete__popover\"\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n __css={{ ...styles.content, width, minWidth, maxWidth }}\n {...contentProps}\n onAnimationComplete={handlerAll(\n contentProps?.onAnimationComplete,\n onAnimationComplete,\n )}\n >\n {header ? (\n <ui.div\n className=\"ui-autocomplete__header\"\n __css={{ ...styles.header }}\n >\n {header}\n </ui.div>\n ) : null}\n\n <ui.ul\n className={cx(\"ui-autocomplete__list\", className)}\n __css={{ ...styles.list }}\n {...getListProps(rest, ref)}\n >\n {children}\n </ui.ul>\n\n {footer ? (\n <ui.div\n className=\"ui-autocomplete__footer\"\n __css={{ ...styles.footer }}\n >\n {footer}\n </ui.div>\n ) : null}\n </PopoverContent>\n )\n },\n)\n"],"mappings":";;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAE/B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,kBAAkB;AA0CzB,SAcI,KAdJ;AA/BC,IAAM,mBAAmB;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAhCP;AAiCI,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,qBAAqB,aAAa,IAAI,oBAAoB;AAElE,oCAAU;AACV,qCAAW,kBAAO,SAAP,mBAAa,UAAb,aAAsB,YAAO,SAAP,mBAAa;AAC9C,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AACf,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS,OAAO,UAAU,SAAS;AAAA,QACrD,GAAG;AAAA,QACJ,qBAAqB;AAAA,UACnB,6CAAc;AAAA,UACd;AAAA,QACF;AAAA,QAEC;AAAA,mBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEJ;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,cACvB,GAAG,aAAa,MAAM,GAAG;AAAA,cAEzB;AAAA;AAAA,UACH;AAAA,UAEC,SACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":[]}
|
1
|
+
{"version":3,"sources":["../src/autocomplete-list.tsx"],"sourcesContent":["import type { CSSUIProps, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { MotionPropsWithoutChildren } from \"@yamada-ui/motion\"\nimport { PopoverContent } from \"@yamada-ui/popover\"\nimport { cx, handlerAll } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport { useAutocompleteList } from \"./use-autocomplete-list\"\n\nexport interface AutocompleteListProps extends HTMLUIProps<\"ul\"> {\n contentProps?: MotionPropsWithoutChildren\n header?: ReactNode\n footer?: ReactNode\n}\n\nexport const AutocompleteList = forwardRef<AutocompleteListProps, \"ul\">(\n (\n {\n className,\n w,\n width,\n minW,\n minWidth,\n maxW,\n maxWidth,\n contentProps,\n header,\n footer,\n children,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useAutocompleteContext()\n const { onAnimationComplete, getListProps } = useAutocompleteList()\n\n width ??= w\n width ??= (styles.list?.width ?? styles.list?.w) as CSSUIProps[\"width\"]\n minWidth ??= minW\n minWidth ??= (styles.list?.minWidth ??\n styles.list?.minW) as CSSUIProps[\"minWidth\"]\n maxWidth ??= maxW\n maxWidth ??= (styles.list?.maxWidth ??\n styles.list?.maxW) as CSSUIProps[\"maxWidth\"]\n\n return (\n <PopoverContent\n as=\"div\"\n className=\"ui-autocomplete__popover\"\n width={width}\n minWidth={minWidth}\n maxWidth={maxWidth}\n __css={{ ...styles.content, width, minWidth, maxWidth }}\n {...contentProps}\n onAnimationComplete={handlerAll(\n contentProps?.onAnimationComplete,\n onAnimationComplete,\n )}\n >\n {header ? (\n <ui.div\n className=\"ui-autocomplete__header\"\n __css={{ ...styles.header }}\n >\n {header}\n </ui.div>\n ) : null}\n\n <ui.ul\n className={cx(\"ui-autocomplete__list\", className)}\n __css={{ ...styles.list }}\n {...getListProps(rest, ref)}\n >\n {children}\n </ui.ul>\n\n {footer ? (\n <ui.div\n className=\"ui-autocomplete__footer\"\n __css={{ ...styles.footer }}\n >\n {footer}\n </ui.div>\n ) : null}\n </PopoverContent>\n )\n },\n)\n\nAutocompleteList.displayName = \"AutocompleteList\"\nAutocompleteList.__ui__ = \"AutocompleteList\"\n"],"mappings":";;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAE/B,SAAS,sBAAsB;AAC/B,SAAS,IAAI,kBAAkB;AA0CzB,SAcI,KAdJ;AA/BC,IAAM,mBAAmB;AAAA,EAC9B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AAhCP;AAiCI,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,qBAAqB,aAAa,IAAI,oBAAoB;AAElE,oCAAU;AACV,qCAAW,kBAAO,SAAP,mBAAa,UAAb,aAAsB,YAAO,SAAP,mBAAa;AAC9C,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AACf,6CAAa;AACb,8CAAc,kBAAO,SAAP,mBAAa,aAAb,aACZ,YAAO,SAAP,mBAAa;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,GAAG,OAAO,SAAS,OAAO,UAAU,SAAS;AAAA,QACrD,GAAG;AAAA,QACJ,qBAAqB;AAAA,UACnB,6CAAc;AAAA,UACd;AAAA,QACF;AAAA,QAEC;AAAA,mBACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA,UAEJ;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,cAChD,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,cACvB,GAAG,aAAa,MAAM,GAAG;AAAA,cAEzB;AAAA;AAAA,UACH;AAAA,UAEC,SACC;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,OAAO;AAAA,cAEzB;AAAA;AAAA,UACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":[]}
|
@@ -61,8 +61,10 @@ var AutocompleteOptionGroup = forwardRef(
|
|
61
61
|
);
|
62
62
|
}
|
63
63
|
);
|
64
|
+
AutocompleteOptionGroup.displayName = "AutocompleteOptionGroup";
|
65
|
+
AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
|
64
66
|
|
65
67
|
export {
|
66
68
|
AutocompleteOptionGroup
|
67
69
|
};
|
68
|
-
//# sourceMappingURL=chunk-
|
70
|
+
//# sourceMappingURL=chunk-6F3LT7J6.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-option-group.tsx"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport type { UseAutocompleteOptionGroupProps } from \"./use-autocomplete-option-group\"\nimport { useAutocompleteOptionGroup } from \"./use-autocomplete-option-group\"\n\ninterface AutocompleteOptionGroupOptions\n extends UseAutocompleteOptionGroupProps {\n /**\n * Props for autocomplete option group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface AutocompleteOptionGroupProps\n extends HTMLUIProps<\"ul\">,\n AutocompleteOptionGroupOptions {}\n\nexport const AutocompleteOptionGroup = forwardRef<\n AutocompleteOptionGroupProps,\n \"ul\"\n>(\n (\n {\n className,\n color,\n h,\n height,\n minH,\n minHeight,\n children,\n labelProps,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useAutocompleteContext()\n const { label, getContainerProps, getGroupProps } =\n useAutocompleteOptionGroup(rest)\n\n h ??= height\n minH ??= minHeight\n\n return (\n <ui.li\n className={cx(\n \"ui-autocomplete__item\",\n \"ui-autocomplete__item--group\",\n className,\n )}\n __css={{ w: \"100%\", h: \"fit-content\", color }}\n {...getContainerProps()}\n >\n <ui.span\n className=\"ui-autocomplete__item__group-label\"\n __css={styles.groupLabel}\n lineClamp={1}\n {...labelProps}\n >\n {label}\n </ui.span>\n\n <ui.ul\n {...getGroupProps({}, ref)}\n className=\"ui-autocomplete__item__group\"\n __css={{ h, minH, ...styles.group }}\n >\n {children}\n </ui.ul>\n </ui.li>\n )\n },\n)\n"],"mappings":";;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AA2Cb,SASE,KATF;AA1BC,IAAM,0BAA0B;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,OAAO,mBAAmB,cAAc,IAC9C,2BAA2B,IAAI;AAEjC,wBAAM;AACN,iCAAS;AAET,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,QAAQ,GAAG,eAAe,MAAM;AAAA,QAC3C,GAAG,kBAAkB;AAAA,QAEtB;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,OAAO;AAAA,cACd,WAAW;AAAA,cACV,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACE,GAAG,cAAc,CAAC,GAAG,GAAG;AAAA,cACzB,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,cAEjC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":[]}
|
1
|
+
{"version":3,"sources":["../src/autocomplete-option-group.tsx"],"sourcesContent":["import type { HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\nimport type { UseAutocompleteOptionGroupProps } from \"./use-autocomplete-option-group\"\nimport { useAutocompleteOptionGroup } from \"./use-autocomplete-option-group\"\n\ninterface AutocompleteOptionGroupOptions\n extends UseAutocompleteOptionGroupProps {\n /**\n * Props for autocomplete option group element.\n */\n labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface AutocompleteOptionGroupProps\n extends HTMLUIProps<\"ul\">,\n AutocompleteOptionGroupOptions {}\n\nexport const AutocompleteOptionGroup = forwardRef<\n AutocompleteOptionGroupProps,\n \"ul\"\n>(\n (\n {\n className,\n color,\n h,\n height,\n minH,\n minHeight,\n children,\n labelProps,\n ...rest\n },\n ref,\n ) => {\n const { styles } = useAutocompleteContext()\n const { label, getContainerProps, getGroupProps } =\n useAutocompleteOptionGroup(rest)\n\n h ??= height\n minH ??= minHeight\n\n return (\n <ui.li\n className={cx(\n \"ui-autocomplete__item\",\n \"ui-autocomplete__item--group\",\n className,\n )}\n __css={{ w: \"100%\", h: \"fit-content\", color }}\n {...getContainerProps()}\n >\n <ui.span\n className=\"ui-autocomplete__item__group-label\"\n __css={styles.groupLabel}\n lineClamp={1}\n {...labelProps}\n >\n {label}\n </ui.span>\n\n <ui.ul\n {...getGroupProps({}, ref)}\n className=\"ui-autocomplete__item__group\"\n __css={{ h, minH, ...styles.group }}\n >\n {children}\n </ui.ul>\n </ui.li>\n )\n },\n)\n\nAutocompleteOptionGroup.displayName = \"AutocompleteOptionGroup\"\nAutocompleteOptionGroup.__ui__ = \"AutocompleteOptionGroup\"\n"],"mappings":";;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AA2Cb,SASE,KATF;AA1BC,IAAM,0BAA0B;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,OAAO,mBAAmB,cAAc,IAC9C,2BAA2B,IAAI;AAEjC,wBAAM;AACN,iCAAS;AAET,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO,EAAE,GAAG,QAAQ,GAAG,eAAe,MAAM;AAAA,QAC3C,GAAG,kBAAkB;AAAA,QAEtB;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,OAAO;AAAA,cACd,WAAW;AAAA,cACV,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACE,GAAG,cAAc,CAAC,GAAG,GAAG;AAAA,cACzB,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,MAAM,GAAG,OAAO,MAAM;AAAA,cAEjC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,wBAAwB,cAAc;AACtC,wBAAwB,SAAS;","names":[]}
|
@@ -49,6 +49,8 @@ var AutocompleteIcon = forwardRef(
|
|
49
49
|
);
|
50
50
|
}
|
51
51
|
);
|
52
|
+
AutocompleteIcon.displayName = "AutocompleteIcon";
|
53
|
+
AutocompleteIcon.__ui__ = "AutocompleteIcon";
|
52
54
|
var AutocompleteClearIcon = ({
|
53
55
|
className,
|
54
56
|
children,
|
@@ -73,6 +75,8 @@ var AutocompleteClearIcon = ({
|
|
73
75
|
}
|
74
76
|
);
|
75
77
|
};
|
78
|
+
AutocompleteClearIcon.displayName = "AutocompleteClearIcon";
|
79
|
+
AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
|
76
80
|
var AutocompleteItemIcon = forwardRef(({ className, ...rest }, ref) => {
|
77
81
|
const { styles } = useAutocompleteContext();
|
78
82
|
const css = {
|
@@ -93,10 +97,12 @@ var AutocompleteItemIcon = forwardRef(({ className, ...rest }, ref) => {
|
|
93
97
|
}
|
94
98
|
);
|
95
99
|
});
|
100
|
+
AutocompleteItemIcon.displayName = "AutocompleteItemIcon";
|
101
|
+
AutocompleteItemIcon.__ui__ = "AutocompleteItemIcon";
|
96
102
|
|
97
103
|
export {
|
98
104
|
AutocompleteIcon,
|
99
105
|
AutocompleteClearIcon,
|
100
106
|
AutocompleteItemIcon
|
101
107
|
};
|
102
|
-
//# sourceMappingURL=chunk-
|
108
|
+
//# sourceMappingURL=chunk-7SWSKLSA.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/autocomplete-icon.tsx"],"sourcesContent":["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"],"mappings":";;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,aAAa,iBAAiB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,IAAI,kBAAkB,sBAAsB;AAErD,SAAS,cAAc,cAAc;AA2Ce;AAtC7C,IAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,KAAK,GAAG,QAAQ;AAChD,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAE1C,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,IACL;AAEA,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc;AAAA,MAAI,CAAC,UACvC,aAAa,OAAO;AAAA,QAClB,WAAW;AAAA,QACX,eAAe;AAAA,QACf,OAAO;AAAA,UACL,UAAU;AAAA,UACV,WAAW;AAAA,UACX,OAAO;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG;AAAA,QAEH,yBAAe,QAAQ,IAAI,gBAAgB,oBAAC,eAAY;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,MAAM,OAAuB,IAAI;AACvC,QAAM,EAAE,OAAO,IAAI,uBAAuB;AAE1C,QAAM,aAAa,MAAM;AAEzB,QAAM,OAAO,aAAa;AAAA,IACxB;AAAA,IACA;AAAA,IACA,GAAI;AAAA,EACN,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACvD,OAAO,OAAO;AAAA,MACb,GAAG;AAAA,MAEH,wCAAY,oBAAC,aAAU,GAAE,SAAQ,GAAE,SAAQ;AAAA;AAAA,EAC9C;AAEJ;AAEA,sBAAsB,cAAc;AACpC,sBAAsB,SAAS;AAIxB,IAAM,uBAAuB,WAGlC,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AACjC,QAAM,EAAE,OAAO,IAAI,uBAAuB;AAE1C,QAAM,MAAmB;AAAA,IACvB,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACtD,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,SAAS;","names":[]}
|
@@ -2,20 +2,20 @@
|
|
2
2
|
import {
|
3
3
|
useAutocomplete,
|
4
4
|
useAutocompleteInput
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-YEFQMSJM.mjs";
|
6
6
|
import {
|
7
7
|
AutocompleteCreate
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-2GOTGBRK.mjs";
|
9
9
|
import {
|
10
10
|
AutocompleteEmpty
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-ZTDA3B2B.mjs";
|
12
12
|
import {
|
13
13
|
AutocompleteList
|
14
|
-
} from "./chunk-
|
14
|
+
} from "./chunk-5MMUZ2XQ.mjs";
|
15
15
|
import {
|
16
16
|
AutocompleteClearIcon,
|
17
17
|
AutocompleteIcon
|
18
|
-
} from "./chunk-
|
18
|
+
} from "./chunk-7SWSKLSA.mjs";
|
19
19
|
import {
|
20
20
|
AutocompleteDescendantsContextProvider,
|
21
21
|
AutocompleteProvider,
|
@@ -174,6 +174,8 @@ var MultiAutocomplete = forwardRef(
|
|
174
174
|
) });
|
175
175
|
}
|
176
176
|
);
|
177
|
+
MultiAutocomplete.displayName = "MultiAutocomplete";
|
178
|
+
MultiAutocomplete.__ui__ = "MultiAutocomplete";
|
177
179
|
var MultiAutocompleteField = forwardRef(
|
178
180
|
({
|
179
181
|
className,
|
@@ -260,8 +262,10 @@ var MultiAutocompleteField = forwardRef(
|
|
260
262
|
) });
|
261
263
|
}
|
262
264
|
);
|
265
|
+
MultiAutocompleteField.displayName = "MultiAutocompleteField";
|
266
|
+
MultiAutocompleteField.__ui__ = "MultiAutocompleteField";
|
263
267
|
|
264
268
|
export {
|
265
269
|
MultiAutocomplete
|
266
270
|
};
|
267
|
-
//# sourceMappingURL=chunk-
|
271
|
+
//# sourceMappingURL=chunk-K42L5QVM.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/multi-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { cx, handlerAll, runIfFunc } from \"@yamada-ui/utils\"\nimport type {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\"\nimport { cloneElement, useMemo } from \"react\"\nimport {\n AutocompleteDescendantsContextProvider,\n AutocompleteProvider,\n useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport { AutocompleteClearIcon, AutocompleteIcon } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface MultiAutocompleteOptions {\n /**\n * The visual separator between each value.\n *\n * @default ','\n */\n separator?: string\n /**\n * The custom display value to use.\n */\n component?: FC<{\n value: string | number\n label: string\n index: number\n onRemove: MouseEventHandler<HTMLElement>\n }>\n /**\n * If `true`, keep the placeholder.\n *\n * @default false\n */\n keepPlaceholder?: boolean\n /**\n * If `true`, display the select clear icon.\n *\n * @default true\n */\n isClearable?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for multi autocomplete container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for multi autocomplete content element.\n */\n contentProps?: Omit<MotionProps, \"children\">\n /**\n * Props for multi autocomplete list element.\n */\n listProps?: Omit<AutocompleteListProps, \"children\">\n /**\n * Props for multi autocomplete field element.\n */\n fieldProps?: Omit<\n MultiAutocompleteFieldProps,\n \"component\" | \"separator\" | \"keepPlaceholder\" | \"inputProps\" | \"children\"\n >\n /**\n * Props for multi autocomplete input element.\n */\n inputProps?: HTMLUIProps<\"input\">\n /**\n * Props for multi autocomplete icon element.\n */\n iconProps?: AutocompleteIconProps\n /**\n * Props for multi autocomplete clear icon element.\n */\n clearIconProps?: AutocompleteIconProps\n /**\n * Props to be forwarded to the portal component.\n *\n * @default '{ isDisabled: true }'\n *\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * Props for autocomplete create element.\n */\n createProps?: Omit<AutocompleteCreateProps, \"children\">\n /**\n * Props for autocomplete empty element.\n */\n emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n /**\n * The header of the autocomplete content element.\n */\n header?: ReactNode | FC<{ value: string[] | undefined; onClose: () => void }>\n /**\n * The footer of the autocomplete content element.\n */\n footer?: ReactNode | FC<{ value: string[] | undefined; onClose: () => void }>\n}\n\nexport interface MultiAutocompleteProps\n extends ThemeProps<\"MultiAutocomplete\">,\n Omit<UseAutocompleteProps<string[]>, \"closeOnSelect\">,\n MultiAutocompleteOptions {}\n\n/**\n * `MultiAutocomplete` is a component used to display suggestions based on user text input and to obtain multiple values.\n *\n * @see Docs https://yamada-ui.com/components/forms/multi-autocomplete\n */\nexport const MultiAutocomplete = forwardRef<MultiAutocompleteProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"MultiAutocomplete\",\n props,\n )\n let {\n className,\n defaultValue = [],\n component,\n separator,\n isClearable = true,\n color,\n h,\n height,\n minH,\n minHeight,\n closeOnSelect = false,\n keepPlaceholder = false,\n containerProps,\n contentProps,\n listProps,\n fieldProps,\n inputProps,\n iconProps,\n clearIconProps,\n portalProps = { isDisabled: true },\n createProps,\n emptyProps,\n header,\n footer,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const {\n value,\n onClose,\n descendants,\n formControlProps,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n allowCreate,\n isEmpty,\n inputValue,\n computedChildren,\n onClear,\n ...rest\n } = useAutocomplete<string[]>({\n ...computedProps,\n defaultValue,\n closeOnSelect,\n children,\n })\n\n h ??= height\n minH ??= minHeight\n\n const css: CSSUIObject = {\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }\n\n return (\n <AutocompleteDescendantsContextProvider value={descendants}>\n <AutocompleteProvider\n value={{\n ...rest,\n value,\n onClose,\n formControlProps,\n inputValue,\n allowCreate,\n isEmpty,\n styles,\n }}\n >\n <Popover {...getPopoverProps()}>\n <ui.div\n className={cx(\"ui-multi-autocomplete\", className)}\n __css={css}\n {...getContainerProps(containerProps)}\n >\n <ui.div\n className=\"ui-multi-autocomplete__inner\"\n __css={{ position: \"relative\", ...styles.inner }}\n >\n <MultiAutocompleteField\n component={component}\n separator={separator}\n keepPlaceholder={keepPlaceholder}\n h={h}\n minH={minH}\n inputProps={inputProps}\n {...getFieldProps(fieldProps, ref)}\n />\n\n {isClearable && value.length ? (\n <AutocompleteClearIcon\n {...clearIconProps}\n onClick={handlerAll(clearIconProps?.onClick, onClear)}\n {...formControlProps}\n />\n ) : (\n <AutocompleteIcon {...iconProps} {...formControlProps} />\n )}\n </ui.div>\n\n {!isEmpty ? (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n\n {children ?? computedChildren}\n </AutocompleteList>\n </Portal>\n ) : (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate && inputValue ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n </AutocompleteList>\n </Portal>\n )}\n </ui.div>\n </Popover>\n </AutocompleteProvider>\n </AutocompleteDescendantsContextProvider>\n )\n },\n)\n\ninterface MultiAutocompleteFieldProps\n extends HTMLUIProps,\n Pick<\n MultiAutocompleteProps,\n \"component\" | \"separator\" | \"keepPlaceholder\" | \"inputProps\"\n > {}\n\nconst MultiAutocompleteField = forwardRef<MultiAutocompleteFieldProps, \"input\">(\n (\n {\n className,\n component,\n separator = \",\",\n keepPlaceholder,\n h,\n minH,\n placeholder,\n inputProps,\n ...rest\n },\n ref,\n ) => {\n const { value, label, inputValue, onChange, isOpen, inputRef, styles } =\n useAutocompleteContext()\n\n const { getInputProps } = useAutocompleteInput()\n\n const cloneChildren = useMemo(() => {\n if (!label?.length) return null\n\n if (component) {\n return (label as string[]).map((label, index) => {\n const onRemove: MouseEventHandler<HTMLElement> = (ev) => {\n ev.stopPropagation()\n\n onChange(value[index])\n\n if (inputRef.current) inputRef.current.focus()\n }\n\n const el = component({\n value: value[index],\n label,\n index,\n onRemove,\n })\n\n const style: CSSProperties = {\n marginBlockStart: \"0.125rem\",\n marginBlockEnd: \"0.125rem\",\n marginInlineEnd: \"0.25rem\",\n }\n\n return el\n ? cloneElement(el as ReactElement, { key: index, style })\n : null\n })\n } else {\n return (label as string[]).map((value, index) => {\n const isLast = label.length === index + 1\n\n return (\n <ui.span key={index} display=\"inline-block\" me=\"0.25rem\">\n {value}\n {!isLast || isOpen ? separator : null}\n </ui.span>\n )\n })\n }\n }, [label, component, value, onChange, isOpen, inputRef, separator])\n\n const css: CSSUIObject = {\n pe: \"2rem\",\n h,\n minH,\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n ...styles.field,\n cursor: \"text\",\n }\n\n return (\n <PopoverTrigger>\n <ui.div\n className={cx(\"ui-multi-autocomplete__field\", className)}\n __css={css}\n py={label?.length && component ? \"0.125rem\" : undefined}\n {...rest}\n >\n {cloneChildren}\n\n <ui.input\n aria-label=\"Input value\"\n className=\"ui-multi-autocomplete__field__input\"\n display=\"inline-block\"\n flex=\"1\"\n minW=\"0px\"\n overflow=\"hidden\"\n marginBlockStart=\"0.125rem\"\n marginBlockEnd=\"0.125rem\"\n aria-multiselectable=\"true\"\n placeholder={\n !label || !label?.length || (keepPlaceholder && isOpen)\n ? placeholder\n : undefined\n }\n {...getInputProps({ ...inputProps, value: inputValue ?? \"\" }, ref)}\n />\n </ui.div>\n </PopoverTrigger>\n )\n },\n)\n"],"mappings":"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","names":["label","value"]}
|
1
|
+
{"version":3,"sources":["../src/multi-autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { cx, handlerAll, runIfFunc } from \"@yamada-ui/utils\"\nimport type {\n CSSProperties,\n FC,\n MouseEventHandler,\n ReactElement,\n ReactNode,\n} from \"react\"\nimport { cloneElement, useMemo } from \"react\"\nimport {\n AutocompleteDescendantsContextProvider,\n AutocompleteProvider,\n useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport { AutocompleteClearIcon, AutocompleteIcon } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface MultiAutocompleteOptions {\n /**\n * The visual separator between each value.\n *\n * @default ','\n */\n separator?: string\n /**\n * The custom display value to use.\n */\n component?: FC<{\n value: string | number\n label: string\n index: number\n onRemove: MouseEventHandler<HTMLElement>\n }>\n /**\n * If `true`, keep the placeholder.\n *\n * @default false\n */\n keepPlaceholder?: boolean\n /**\n * If `true`, display the select clear icon.\n *\n * @default true\n */\n isClearable?: boolean\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for multi autocomplete container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for multi autocomplete content element.\n */\n contentProps?: Omit<MotionProps, \"children\">\n /**\n * Props for multi autocomplete list element.\n */\n listProps?: Omit<AutocompleteListProps, \"children\">\n /**\n * Props for multi autocomplete field element.\n */\n fieldProps?: Omit<\n MultiAutocompleteFieldProps,\n \"component\" | \"separator\" | \"keepPlaceholder\" | \"inputProps\" | \"children\"\n >\n /**\n * Props for multi autocomplete input element.\n */\n inputProps?: HTMLUIProps<\"input\">\n /**\n * Props for multi autocomplete icon element.\n */\n iconProps?: AutocompleteIconProps\n /**\n * Props for multi autocomplete clear icon element.\n */\n clearIconProps?: AutocompleteIconProps\n /**\n * Props to be forwarded to the portal component.\n *\n * @default '{ isDisabled: true }'\n *\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * If `true`, the list element will be closed when value is selected.\n *\n * @default false\n */\n closeOnSelect?: boolean\n /**\n * Props for autocomplete create element.\n */\n createProps?: Omit<AutocompleteCreateProps, \"children\">\n /**\n * Props for autocomplete empty element.\n */\n emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n /**\n * The header of the autocomplete content element.\n */\n header?: ReactNode | FC<{ value: string[] | undefined; onClose: () => void }>\n /**\n * The footer of the autocomplete content element.\n */\n footer?: ReactNode | FC<{ value: string[] | undefined; onClose: () => void }>\n}\n\nexport interface MultiAutocompleteProps\n extends ThemeProps<\"MultiAutocomplete\">,\n Omit<UseAutocompleteProps<string[]>, \"closeOnSelect\">,\n MultiAutocompleteOptions {}\n\n/**\n * `MultiAutocomplete` is a component used to display suggestions based on user text input and to obtain multiple values.\n *\n * @see Docs https://yamada-ui.com/components/forms/multi-autocomplete\n */\nexport const MultiAutocomplete = forwardRef<MultiAutocompleteProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\n \"MultiAutocomplete\",\n props,\n )\n let {\n className,\n defaultValue = [],\n component,\n separator,\n isClearable = true,\n color,\n h,\n height,\n minH,\n minHeight,\n closeOnSelect = false,\n keepPlaceholder = false,\n containerProps,\n contentProps,\n listProps,\n fieldProps,\n inputProps,\n iconProps,\n clearIconProps,\n portalProps = { isDisabled: true },\n createProps,\n emptyProps,\n header,\n footer,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const {\n value,\n onClose,\n descendants,\n formControlProps,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n allowCreate,\n isEmpty,\n inputValue,\n computedChildren,\n onClear,\n ...rest\n } = useAutocomplete<string[]>({\n ...computedProps,\n defaultValue,\n closeOnSelect,\n children,\n })\n\n h ??= height\n minH ??= minHeight\n\n const css: CSSUIObject = {\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }\n\n return (\n <AutocompleteDescendantsContextProvider value={descendants}>\n <AutocompleteProvider\n value={{\n ...rest,\n value,\n onClose,\n formControlProps,\n inputValue,\n allowCreate,\n isEmpty,\n styles,\n }}\n >\n <Popover {...getPopoverProps()}>\n <ui.div\n className={cx(\"ui-multi-autocomplete\", className)}\n __css={css}\n {...getContainerProps(containerProps)}\n >\n <ui.div\n className=\"ui-multi-autocomplete__inner\"\n __css={{ position: \"relative\", ...styles.inner }}\n >\n <MultiAutocompleteField\n component={component}\n separator={separator}\n keepPlaceholder={keepPlaceholder}\n h={h}\n minH={minH}\n inputProps={inputProps}\n {...getFieldProps(fieldProps, ref)}\n />\n\n {isClearable && value.length ? (\n <AutocompleteClearIcon\n {...clearIconProps}\n onClick={handlerAll(clearIconProps?.onClick, onClear)}\n {...formControlProps}\n />\n ) : (\n <AutocompleteIcon {...iconProps} {...formControlProps} />\n )}\n </ui.div>\n\n {!isEmpty ? (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n\n {children ?? computedChildren}\n </AutocompleteList>\n </Portal>\n ) : (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate && inputValue ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n </AutocompleteList>\n </Portal>\n )}\n </ui.div>\n </Popover>\n </AutocompleteProvider>\n </AutocompleteDescendantsContextProvider>\n )\n },\n)\n\nMultiAutocomplete.displayName = \"MultiAutocomplete\"\nMultiAutocomplete.__ui__ = \"MultiAutocomplete\"\n\ninterface MultiAutocompleteFieldProps\n extends HTMLUIProps,\n Pick<\n MultiAutocompleteProps,\n \"component\" | \"separator\" | \"keepPlaceholder\" | \"inputProps\"\n > {}\n\nconst MultiAutocompleteField = forwardRef<MultiAutocompleteFieldProps, \"input\">(\n (\n {\n className,\n component,\n separator = \",\",\n keepPlaceholder,\n h,\n minH,\n placeholder,\n inputProps,\n ...rest\n },\n ref,\n ) => {\n const { value, label, inputValue, onChange, isOpen, inputRef, styles } =\n useAutocompleteContext()\n\n const { getInputProps } = useAutocompleteInput()\n\n const cloneChildren = useMemo(() => {\n if (!label?.length) return null\n\n if (component) {\n return (label as string[]).map((label, index) => {\n const onRemove: MouseEventHandler<HTMLElement> = (ev) => {\n ev.stopPropagation()\n\n onChange(value[index])\n\n if (inputRef.current) inputRef.current.focus()\n }\n\n const el = component({\n value: value[index],\n label,\n index,\n onRemove,\n })\n\n const style: CSSProperties = {\n marginBlockStart: \"0.125rem\",\n marginBlockEnd: \"0.125rem\",\n marginInlineEnd: \"0.25rem\",\n }\n\n return el\n ? cloneElement(el as ReactElement, { key: index, style })\n : null\n })\n } else {\n return (label as string[]).map((value, index) => {\n const isLast = label.length === index + 1\n\n return (\n <ui.span key={index} display=\"inline-block\" me=\"0.25rem\">\n {value}\n {!isLast || isOpen ? separator : null}\n </ui.span>\n )\n })\n }\n }, [label, component, value, onChange, isOpen, inputRef, separator])\n\n const css: CSSUIObject = {\n pe: \"2rem\",\n h,\n minH,\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n ...styles.field,\n cursor: \"text\",\n }\n\n return (\n <PopoverTrigger>\n <ui.div\n className={cx(\"ui-multi-autocomplete__field\", className)}\n __css={css}\n py={label?.length && component ? \"0.125rem\" : undefined}\n {...rest}\n >\n {cloneChildren}\n\n <ui.input\n aria-label=\"Input value\"\n className=\"ui-multi-autocomplete__field__input\"\n display=\"inline-block\"\n flex=\"1\"\n minW=\"0px\"\n overflow=\"hidden\"\n marginBlockStart=\"0.125rem\"\n marginBlockEnd=\"0.125rem\"\n aria-multiselectable=\"true\"\n placeholder={\n !label || !label?.length || (keepPlaceholder && isOpen)\n ? placeholder\n : undefined\n }\n {...getInputProps({ ...inputProps, value: inputValue ?? \"\" }, ref)}\n />\n </ui.div>\n </PopoverTrigger>\n )\n },\n)\n\nMultiAutocompleteField.displayName = \"MultiAutocompleteField\"\nMultiAutocompleteField.__ui__ = \"MultiAutocompleteField\"\n"],"mappings":"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","names":["label","value"]}
|
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
} from "./chunk-2JAGPELI.mjs";
|
5
5
|
import {
|
6
6
|
AutocompleteItemIcon
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-7SWSKLSA.mjs";
|
8
8
|
import {
|
9
9
|
useAutocompleteContext
|
10
10
|
} from "./chunk-JPUKYLBW.mjs";
|
@@ -45,6 +45,8 @@ var AutocompleteOption = forwardRef(
|
|
45
45
|
);
|
46
46
|
}
|
47
47
|
);
|
48
|
+
AutocompleteOption.displayName = "AutocompleteOption";
|
49
|
+
AutocompleteOption.__ui__ = "AutocompleteOption";
|
48
50
|
var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ jsx(
|
49
51
|
"polygon",
|
50
52
|
{
|
@@ -52,8 +54,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", width:
|
|
52
54
|
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
|
53
55
|
}
|
54
56
|
) });
|
57
|
+
CheckIcon.displayName = "CheckIcon";
|
58
|
+
CheckIcon.__ui__ = "CheckIcon";
|
55
59
|
|
56
60
|
export {
|
57
61
|
AutocompleteOption
|
58
62
|
};
|
59
|
-
//# sourceMappingURL=chunk-
|
63
|
+
//# sourceMappingURL=chunk-OTVG42AD.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-option.tsx"],"sourcesContent":["import type { CSSUIObject } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type {
|
1
|
+
{"version":3,"sources":["../src/autocomplete-option.tsx"],"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"],"mappings":";;;;;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AAyCb,SAOe,KAPf;AAvBC,IAAM,qBAAqB;AAAA,EAChC,CAAC,EAAE,WAAW,MAAM,GAAG,KAAK,GAAG,QAAQ;AACrC,UAAM,EAAE,OAAO,IAAI,uBAAuB;AAC1C,UAAM,EAAE,YAAY,YAAY,UAAU,eAAe,IACvD,sBAAsB,IAAI;AAE5B,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,QAChD,OAAO;AAAA,QACN,GAAG,eAAe,CAAC,GAAG,GAAG;AAAA,QAEzB;AAAA,mBAAS,OACR,oBAAC,wBAAqB,SAAS,aAAa,IAAI,GAC7C,kBAAQ,oBAAC,aAAU,GACtB,IACE;AAAA,UAEJ,oBAAC,GAAG,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,YAAgB,MACpB,oBAAC,SAAI,SAAQ,aAAY,OAAM,OAAM,QAAO,OAC1C;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,QAAO;AAAA;AACT,GACF;AAGF,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
"use client"
|
2
2
|
import {
|
3
3
|
AutocompleteOptionGroup
|
4
|
-
} from "./chunk-
|
4
|
+
} from "./chunk-6F3LT7J6.mjs";
|
5
5
|
import {
|
6
6
|
AutocompleteOption
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-OTVG42AD.mjs";
|
8
8
|
import {
|
9
9
|
useAutocompleteContext,
|
10
10
|
useAutocompleteDescendants,
|
@@ -956,4 +956,4 @@ export {
|
|
956
956
|
useAutocomplete,
|
957
957
|
useAutocompleteInput
|
958
958
|
};
|
959
|
-
//# sourceMappingURL=chunk-
|
959
|
+
//# sourceMappingURL=chunk-YEFQMSJM.mjs.map
|
@@ -4,7 +4,7 @@ import {
|
|
4
4
|
} from "./chunk-2JAGPELI.mjs";
|
5
5
|
import {
|
6
6
|
AutocompleteItemIcon
|
7
|
-
} from "./chunk-
|
7
|
+
} from "./chunk-7SWSKLSA.mjs";
|
8
8
|
import {
|
9
9
|
useAutocompleteContext
|
10
10
|
} from "./chunk-JPUKYLBW.mjs";
|
@@ -46,6 +46,8 @@ var AutocompleteEmpty = forwardRef(
|
|
46
46
|
);
|
47
47
|
}
|
48
48
|
);
|
49
|
+
AutocompleteEmpty.displayName = "AutocompleteEmpty";
|
50
|
+
AutocompleteEmpty.__ui__ = "AutocompleteEmpty";
|
49
51
|
var MinusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ jsx(
|
50
52
|
"path",
|
51
53
|
{
|
@@ -53,8 +55,10 @@ var MinusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 448 512", width
|
|
53
55
|
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"
|
54
56
|
}
|
55
57
|
) });
|
58
|
+
MinusIcon.displayName = "MinusIcon";
|
59
|
+
MinusIcon.__ui__ = "MinusIcon";
|
56
60
|
|
57
61
|
export {
|
58
62
|
AutocompleteEmpty
|
59
63
|
};
|
60
|
-
//# sourceMappingURL=chunk-
|
64
|
+
//# sourceMappingURL=chunk-ZTDA3B2B.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete-empty.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\nimport type {
|
1
|
+
{"version":3,"sources":["../src/autocomplete-empty.tsx"],"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"],"mappings":";;;;;;;;;;;;AACA,SAAS,IAAI,kBAAkB;AAC/B,SAAS,UAAU;AA4Cb,SAMmC,KANnC;AAvBC,IAAM,oBAAoB;AAAA,EAC/B,CAAC,EAAE,WAAW,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ;AAC/C,UAAM,EAAE,cAAc,OAAO,IAAI,uBAAuB;AACxD,UAAM,EAAE,cAAc,IAAI,qBAAqB;AAE/C,6CAAa;AAEb,UAAM,MAAmB;AAAA,MACvB,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,KAAK;AAAA,MACL,eAAe;AAAA,MACf,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,QACvD,OAAO;AAAA,QACN,GAAG,cAAc,MAAM,GAAG;AAAA,QAE1B;AAAA,mBAAS,OACR,oBAAC,wBAAsB,kBAAQ,oBAAC,aAAU,GAAG,IAC3C;AAAA,UACH,OACC,oBAAC,GAAG,MAAH,EAAQ,OAAO,EAAE,eAAe,QAAQ,MAAM,EAAE,GAAG,WAAW,GAC5D,UACH,IAEA;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,kBAAkB,cAAc;AAChC,kBAAkB,SAAS;AAE3B,IAAM,YAAgB,MACpB,oBAAC,SAAI,SAAQ,eAAc,OAAM,OAAM,QAAO,OAC5C;AAAA,EAAC;AAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA;AACJ,GACF;AAGF,UAAU,cAAc;AACxB,UAAU,SAAS;","names":[]}
|
@@ -2,19 +2,19 @@
|
|
2
2
|
import {
|
3
3
|
useAutocomplete,
|
4
4
|
useAutocompleteInput
|
5
|
-
} from "./chunk-
|
5
|
+
} from "./chunk-YEFQMSJM.mjs";
|
6
6
|
import {
|
7
7
|
AutocompleteCreate
|
8
|
-
} from "./chunk-
|
8
|
+
} from "./chunk-2GOTGBRK.mjs";
|
9
9
|
import {
|
10
10
|
AutocompleteEmpty
|
11
|
-
} from "./chunk-
|
11
|
+
} from "./chunk-ZTDA3B2B.mjs";
|
12
12
|
import {
|
13
13
|
AutocompleteList
|
14
|
-
} from "./chunk-
|
14
|
+
} from "./chunk-5MMUZ2XQ.mjs";
|
15
15
|
import {
|
16
16
|
AutocompleteIcon
|
17
|
-
} from "./chunk-
|
17
|
+
} from "./chunk-7SWSKLSA.mjs";
|
18
18
|
import {
|
19
19
|
AutocompleteDescendantsContextProvider,
|
20
20
|
AutocompleteProvider,
|
@@ -147,6 +147,8 @@ var Autocomplete = forwardRef(
|
|
147
147
|
) });
|
148
148
|
}
|
149
149
|
);
|
150
|
+
Autocomplete.displayName = "Autocomplete";
|
151
|
+
Autocomplete.__ui__ = "Autocomplete";
|
150
152
|
var AutocompleteField = forwardRef(
|
151
153
|
({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
|
152
154
|
const { label, inputValue, styles } = useAutocompleteContext();
|
@@ -183,8 +185,10 @@ var AutocompleteField = forwardRef(
|
|
183
185
|
) });
|
184
186
|
}
|
185
187
|
);
|
188
|
+
AutocompleteField.displayName = "AutocompleteField";
|
189
|
+
AutocompleteField.__ui__ = "AutocompleteField";
|
186
190
|
|
187
191
|
export {
|
188
192
|
Autocomplete
|
189
193
|
};
|
190
|
-
//# sourceMappingURL=chunk-
|
194
|
+
//# sourceMappingURL=chunk-ZZSGPNV3.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport {\n AutocompleteDescendantsContextProvider,\n AutocompleteProvider,\n useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport { AutocompleteIcon } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface AutocompleteOptions {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for autocomplete container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for autocomplete content element.\n */\n contentProps?: Omit<MotionProps, \"children\">\n /**\n * Props for autocomplete list element.\n */\n listProps?: Omit<AutocompleteListProps, \"children\">\n /**\n * Props for autocomplete field element.\n */\n fieldProps?: Omit<AutocompleteFieldProps, \"inputProps\" | \"children\">\n /**\n * Props for autocomplete input element.\n */\n inputProps?: HTMLUIProps<\"input\">\n /**\n * Props for autocomplete icon element.\n */\n iconProps?: AutocompleteIconProps\n /**\n * Props to be forwarded to the portal component.\n *\n * @default '{ isDisabled: true }'\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Props for autocomplete create element.\n */\n createProps?: Omit<AutocompleteCreateProps, \"children\">\n /**\n * Props for autocomplete empty element.\n */\n emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n /**\n * The header of the autocomplete content element.\n */\n header?: ReactNode | FC<{ value: string | undefined; onClose: () => void }>\n /**\n * The footer of the autocomplete content element.\n */\n footer?: ReactNode | FC<{ value: string | undefined; onClose: () => void }>\n}\n\nexport interface AutocompleteProps\n extends ThemeProps<\"Autocomplete\">,\n Omit<UseAutocompleteProps, \"maxSelectValues\" | \"omitSelectedValues\">,\n AutocompleteOptions {}\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/autocomplete\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Autocomplete\", props)\n let {\n className,\n defaultValue = \"\",\n color,\n h,\n height,\n minH,\n minHeight,\n containerProps,\n contentProps,\n listProps,\n fieldProps,\n inputProps,\n iconProps,\n portalProps = { isDisabled: true },\n createProps,\n emptyProps,\n header,\n footer,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const {\n value,\n onClose,\n descendants,\n formControlProps,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n allowCreate,\n isEmpty,\n inputValue,\n computedChildren,\n ...rest\n } = useAutocomplete({ ...computedProps, defaultValue, children })\n\n h ??= height\n minH ??= minHeight\n\n const css: CSSUIObject = {\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }\n\n return (\n <AutocompleteDescendantsContextProvider value={descendants}>\n <AutocompleteProvider\n value={{\n ...rest,\n value,\n onClose,\n formControlProps,\n inputValue,\n allowCreate,\n isEmpty,\n styles,\n }}\n >\n <Popover {...getPopoverProps()}>\n <ui.div\n className={cx(\"ui-autocomplete\", className)}\n __css={css}\n {...getContainerProps(containerProps)}\n >\n <ui.div\n className=\"ui-autocomplete__inner\"\n __css={{ position: \"relative\", ...styles.inner }}\n >\n <AutocompleteField\n h={h}\n minH={minH}\n inputProps={inputProps}\n {...getFieldProps(fieldProps, ref)}\n />\n\n <AutocompleteIcon {...iconProps} {...formControlProps} />\n </ui.div>\n\n {!isEmpty ? (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n\n {children ?? computedChildren}\n </AutocompleteList>\n </Portal>\n ) : (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate && inputValue ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n </AutocompleteList>\n </Portal>\n )}\n </ui.div>\n </Popover>\n </AutocompleteProvider>\n </AutocompleteDescendantsContextProvider>\n )\n },\n)\n\ninterface AutocompleteFieldProps\n extends HTMLUIProps,\n Pick<AutocompleteProps, \"inputProps\"> {}\n\nconst AutocompleteField = forwardRef<AutocompleteFieldProps, \"input\">(\n ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {\n const { label, inputValue, styles } = useAutocompleteContext()\n const { getInputProps } = useAutocompleteInput()\n\n const css: CSSUIObject = {\n pe: \"2rem\",\n h,\n minH,\n display: \"flex\",\n alignItems: \"center\",\n ...styles.field,\n cursor: \"text\",\n }\n\n return (\n <PopoverTrigger>\n <ui.div\n className={cx(\"ui-autocomplete__field\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n className=\"ui-autocomplete__field__input\"\n display=\"inline-block\"\n w=\"100%\"\n placeholder={placeholder}\n {...getInputProps(\n { ...inputProps, value: inputValue || label || \"\" },\n ref,\n )}\n />\n </ui.div>\n </PopoverTrigger>\n )\n },\n)\n"],"mappings":"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","names":[]}
|
1
|
+
{"version":3,"sources":["../src/autocomplete.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { MotionProps } from \"@yamada-ui/motion\"\nimport { Popover, PopoverTrigger } from \"@yamada-ui/popover\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport type { PortalProps } from \"@yamada-ui/portal\"\nimport { cx, runIfFunc } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport {\n AutocompleteDescendantsContextProvider,\n AutocompleteProvider,\n useAutocompleteContext,\n} from \"./autocomplete-context\"\nimport { AutocompleteCreate } from \"./autocomplete-create\"\nimport type { AutocompleteCreateProps } from \"./autocomplete-create\"\nimport { AutocompleteEmpty } from \"./autocomplete-empty\"\nimport type { AutocompleteEmptyProps } from \"./autocomplete-empty\"\nimport type { AutocompleteIconProps } from \"./autocomplete-icon\"\nimport { AutocompleteIcon } from \"./autocomplete-icon\"\nimport type { AutocompleteListProps } from \"./autocomplete-list\"\nimport { AutocompleteList } from \"./autocomplete-list\"\nimport type { UseAutocompleteProps } from \"./use-autocomplete\"\nimport { useAutocomplete, useAutocompleteInput } from \"./use-autocomplete\"\n\ninterface AutocompleteOptions {\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: string\n /**\n * Props for autocomplete container element.\n */\n containerProps?: Omit<HTMLUIProps, \"children\">\n /**\n * Props for autocomplete content element.\n */\n contentProps?: Omit<MotionProps, \"children\">\n /**\n * Props for autocomplete list element.\n */\n listProps?: Omit<AutocompleteListProps, \"children\">\n /**\n * Props for autocomplete field element.\n */\n fieldProps?: Omit<AutocompleteFieldProps, \"inputProps\" | \"children\">\n /**\n * Props for autocomplete input element.\n */\n inputProps?: HTMLUIProps<\"input\">\n /**\n * Props for autocomplete icon element.\n */\n iconProps?: AutocompleteIconProps\n /**\n * Props to be forwarded to the portal component.\n *\n * @default '{ isDisabled: true }'\n */\n portalProps?: Omit<PortalProps, \"children\">\n /**\n * Props for autocomplete create element.\n */\n createProps?: Omit<AutocompleteCreateProps, \"children\">\n /**\n * Props for autocomplete empty element.\n */\n emptyProps?: Omit<AutocompleteEmptyProps, \"children\">\n /**\n * The header of the autocomplete content element.\n */\n header?: ReactNode | FC<{ value: string | undefined; onClose: () => void }>\n /**\n * The footer of the autocomplete content element.\n */\n footer?: ReactNode | FC<{ value: string | undefined; onClose: () => void }>\n}\n\nexport interface AutocompleteProps\n extends ThemeProps<\"Autocomplete\">,\n Omit<UseAutocompleteProps, \"maxSelectValues\" | \"omitSelectedValues\">,\n AutocompleteOptions {}\n\n/**\n * `Autocomplete` is a component used to display suggestions in response to user text input.\n *\n * @see Docs https://yamada-ui.com/components/forms/autocomplete\n */\nexport const Autocomplete = forwardRef<AutocompleteProps, \"input\">(\n (props, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"Autocomplete\", props)\n let {\n className,\n defaultValue = \"\",\n color,\n h,\n height,\n minH,\n minHeight,\n containerProps,\n contentProps,\n listProps,\n fieldProps,\n inputProps,\n iconProps,\n portalProps = { isDisabled: true },\n createProps,\n emptyProps,\n header,\n footer,\n children,\n ...computedProps\n } = omitThemeProps(mergedProps)\n\n const {\n value,\n onClose,\n descendants,\n formControlProps,\n getPopoverProps,\n getContainerProps,\n getFieldProps,\n allowCreate,\n isEmpty,\n inputValue,\n computedChildren,\n ...rest\n } = useAutocomplete({ ...computedProps, defaultValue, children })\n\n h ??= height\n minH ??= minHeight\n\n const css: CSSUIObject = {\n w: \"100%\",\n h: \"fit-content\",\n color,\n ...styles.container,\n }\n\n return (\n <AutocompleteDescendantsContextProvider value={descendants}>\n <AutocompleteProvider\n value={{\n ...rest,\n value,\n onClose,\n formControlProps,\n inputValue,\n allowCreate,\n isEmpty,\n styles,\n }}\n >\n <Popover {...getPopoverProps()}>\n <ui.div\n className={cx(\"ui-autocomplete\", className)}\n __css={css}\n {...getContainerProps(containerProps)}\n >\n <ui.div\n className=\"ui-autocomplete__inner\"\n __css={{ position: \"relative\", ...styles.inner }}\n >\n <AutocompleteField\n h={h}\n minH={minH}\n inputProps={inputProps}\n {...getFieldProps(fieldProps, ref)}\n />\n\n <AutocompleteIcon {...iconProps} {...formControlProps} />\n </ui.div>\n\n {!isEmpty ? (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n\n {children ?? computedChildren}\n </AutocompleteList>\n </Portal>\n ) : (\n <Portal {...portalProps}>\n <AutocompleteList\n header={runIfFunc(header, { value, onClose })}\n footer={runIfFunc(footer, { value, onClose })}\n contentProps={contentProps}\n {...listProps}\n >\n {allowCreate && inputValue ? (\n <AutocompleteCreate {...createProps} />\n ) : (\n <AutocompleteEmpty {...emptyProps} />\n )}\n </AutocompleteList>\n </Portal>\n )}\n </ui.div>\n </Popover>\n </AutocompleteProvider>\n </AutocompleteDescendantsContextProvider>\n )\n },\n)\n\nAutocomplete.displayName = \"Autocomplete\"\nAutocomplete.__ui__ = \"Autocomplete\"\n\ninterface AutocompleteFieldProps\n extends HTMLUIProps,\n Pick<AutocompleteProps, \"inputProps\"> {}\n\nconst AutocompleteField = forwardRef<AutocompleteFieldProps, \"input\">(\n ({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {\n const { label, inputValue, styles } = useAutocompleteContext()\n const { getInputProps } = useAutocompleteInput()\n\n const css: CSSUIObject = {\n pe: \"2rem\",\n h,\n minH,\n display: \"flex\",\n alignItems: \"center\",\n ...styles.field,\n cursor: \"text\",\n }\n\n return (\n <PopoverTrigger>\n <ui.div\n className={cx(\"ui-autocomplete__field\", className)}\n __css={css}\n {...rest}\n >\n <ui.input\n className=\"ui-autocomplete__field__input\"\n display=\"inline-block\"\n w=\"100%\"\n placeholder={placeholder}\n {...getInputProps(\n { ...inputProps, value: inputValue || label || \"\" },\n ref,\n )}\n />\n </ui.div>\n </PopoverTrigger>\n )\n },\n)\n\nAutocompleteField.displayName = \"AutocompleteField\"\nAutocompleteField.__ui__ = \"AutocompleteField\"\n"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
@@ -100,6 +100,8 @@ var AutocompleteIcon = (0, import_core.forwardRef)(
|
|
100
100
|
);
|
101
101
|
}
|
102
102
|
);
|
103
|
+
AutocompleteIcon.displayName = "AutocompleteIcon";
|
104
|
+
AutocompleteIcon.__ui__ = "AutocompleteIcon";
|
103
105
|
var AutocompleteClearIcon = ({
|
104
106
|
className,
|
105
107
|
children,
|
@@ -124,6 +126,8 @@ var AutocompleteClearIcon = ({
|
|
124
126
|
}
|
125
127
|
);
|
126
128
|
};
|
129
|
+
AutocompleteClearIcon.displayName = "AutocompleteClearIcon";
|
130
|
+
AutocompleteClearIcon.__ui__ = "AutocompleteClearIcon";
|
127
131
|
var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest }, ref) => {
|
128
132
|
const { styles } = useAutocompleteContext();
|
129
133
|
const css = {
|
@@ -144,6 +148,8 @@ var AutocompleteItemIcon = (0, import_core.forwardRef)(({ className, ...rest },
|
|
144
148
|
}
|
145
149
|
);
|
146
150
|
});
|
151
|
+
AutocompleteItemIcon.displayName = "AutocompleteItemIcon";
|
152
|
+
AutocompleteItemIcon.__ui__ = "AutocompleteItemIcon";
|
147
153
|
|
148
154
|
// src/use-autocomplete-option.ts
|
149
155
|
var import_utils3 = require("@yamada-ui/utils");
|
@@ -361,6 +367,8 @@ var AutocompleteCreate = (0, import_core2.forwardRef)(
|
|
361
367
|
);
|
362
368
|
}
|
363
369
|
);
|
370
|
+
AutocompleteCreate.displayName = "AutocompleteCreate";
|
371
|
+
AutocompleteCreate.__ui__ = "AutocompleteCreate";
|
364
372
|
var PlusIcon = () => /* @__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)(
|
365
373
|
"path",
|
366
374
|
{
|
@@ -368,6 +376,8 @@ var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewB
|
|
368
376
|
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"
|
369
377
|
}
|
370
378
|
) });
|
379
|
+
PlusIcon.displayName = "PlusIcon";
|
380
|
+
PlusIcon.__ui__ = "PlusIcon";
|
371
381
|
|
372
382
|
// src/autocomplete-empty.tsx
|
373
383
|
var import_core3 = require("@yamada-ui/core");
|
@@ -406,6 +416,8 @@ var AutocompleteEmpty = (0, import_core3.forwardRef)(
|
|
406
416
|
);
|
407
417
|
}
|
408
418
|
);
|
419
|
+
AutocompleteEmpty.displayName = "AutocompleteEmpty";
|
420
|
+
AutocompleteEmpty.__ui__ = "AutocompleteEmpty";
|
409
421
|
var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 448 512", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
410
422
|
"path",
|
411
423
|
{
|
@@ -413,6 +425,8 @@ var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { view
|
|
413
425
|
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"
|
414
426
|
}
|
415
427
|
) });
|
428
|
+
MinusIcon.displayName = "MinusIcon";
|
429
|
+
MinusIcon.__ui__ = "MinusIcon";
|
416
430
|
|
417
431
|
// src/autocomplete-list.tsx
|
418
432
|
var import_core4 = require("@yamada-ui/core");
|
@@ -548,6 +562,8 @@ var AutocompleteList = (0, import_core4.forwardRef)(
|
|
548
562
|
);
|
549
563
|
}
|
550
564
|
);
|
565
|
+
AutocompleteList.displayName = "AutocompleteList";
|
566
|
+
AutocompleteList.__ui__ = "AutocompleteList";
|
551
567
|
|
552
568
|
// src/use-autocomplete.tsx
|
553
569
|
var import_core8 = require("@yamada-ui/core");
|
@@ -594,6 +610,8 @@ var AutocompleteOption = (0, import_core5.forwardRef)(
|
|
594
610
|
);
|
595
611
|
}
|
596
612
|
);
|
613
|
+
AutocompleteOption.displayName = "AutocompleteOption";
|
614
|
+
AutocompleteOption.__ui__ = "AutocompleteOption";
|
597
615
|
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 14 14", width: "1em", height: "1em", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
598
616
|
"polygon",
|
599
617
|
{
|
@@ -601,6 +619,8 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { view
|
|
601
619
|
points: "5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
|
602
620
|
}
|
603
621
|
) });
|
622
|
+
CheckIcon.displayName = "CheckIcon";
|
623
|
+
CheckIcon.__ui__ = "CheckIcon";
|
604
624
|
|
605
625
|
// src/autocomplete-option-group.tsx
|
606
626
|
var import_core7 = require("@yamada-ui/core");
|
@@ -727,6 +747,8 @@ var AutocompleteOptionGroup = (0, import_core7.forwardRef)(
|
|
727
747
|
);
|
728
748
|
}
|
729
749
|
);
|
750
|
+
AutocompleteOptionGroup.displayName = "AutocompleteOptionGroup";
|
751
|
+
AutocompleteOptionGroup.__ui__ = "AutocompleteOptionGroup";
|
730
752
|
|
731
753
|
// src/use-autocomplete.tsx
|
732
754
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
@@ -1762,6 +1784,8 @@ var Autocomplete = (0, import_core9.forwardRef)(
|
|
1762
1784
|
) });
|
1763
1785
|
}
|
1764
1786
|
);
|
1787
|
+
Autocomplete.displayName = "Autocomplete";
|
1788
|
+
Autocomplete.__ui__ = "Autocomplete";
|
1765
1789
|
var AutocompleteField = (0, import_core9.forwardRef)(
|
1766
1790
|
({ className, h, minH, placeholder, inputProps, ...rest }, ref) => {
|
1767
1791
|
const { label, inputValue, styles } = useAutocompleteContext();
|
@@ -1798,6 +1822,8 @@ var AutocompleteField = (0, import_core9.forwardRef)(
|
|
1798
1822
|
) });
|
1799
1823
|
}
|
1800
1824
|
);
|
1825
|
+
AutocompleteField.displayName = "AutocompleteField";
|
1826
|
+
AutocompleteField.__ui__ = "AutocompleteField";
|
1801
1827
|
|
1802
1828
|
// src/multi-autocomplete.tsx
|
1803
1829
|
var import_core10 = require("@yamada-ui/core");
|
@@ -1946,6 +1972,8 @@ var MultiAutocomplete = (0, import_core10.forwardRef)(
|
|
1946
1972
|
) });
|
1947
1973
|
}
|
1948
1974
|
);
|
1975
|
+
MultiAutocomplete.displayName = "MultiAutocomplete";
|
1976
|
+
MultiAutocomplete.__ui__ = "MultiAutocomplete";
|
1949
1977
|
var MultiAutocompleteField = (0, import_core10.forwardRef)(
|
1950
1978
|
({
|
1951
1979
|
className,
|
@@ -2032,6 +2060,8 @@ var MultiAutocompleteField = (0, import_core10.forwardRef)(
|
|
2032
2060
|
) });
|
2033
2061
|
}
|
2034
2062
|
);
|
2063
|
+
MultiAutocompleteField.displayName = "MultiAutocompleteField";
|
2064
|
+
MultiAutocompleteField.__ui__ = "MultiAutocompleteField";
|
2035
2065
|
// Annotate the CommonJS export names for ESM import in node:
|
2036
2066
|
0 && (module.exports = {
|
2037
2067
|
Autocomplete,
|