@yamada-ui/autocomplete 1.5.3-dev-20240927132448 → 1.5.3-dev-20240927160413
Sign up to get free protection for your applications and to get access to all the features.
- 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":";;;;;;;;;;;;;;;;;;;;;;;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,SAAS,sBAAsB;AACxC,SAAS,cAAc;AAEvB,SAAS,IAAI,iBAAiB;AA4JhB,SAIE,KAJF;AAvEP,IAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACd,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,gBAAgB,KAAK;AAC1E,QAAI;AAAA,MACF;AAAA,MACA,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc,EAAE,YAAY,KAAK;AAAA,MACjC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,gBAAgB,EAAE,GAAG,eAAe,cAAc,SAAS,CAAC;AAEhE,wBAAM;AACN,iCAAS;AAET,UAAM,MAAmB;AAAA,MACvB,GAAG;AAAA,MACH,GAAG;AAAA,MACH;AAAA,MACA,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,oBAAC,0CAAuC,OAAO,aAC7C;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA,8BAAC,WAAS,GAAG,gBAAgB,GAC3B;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAW,GAAG,mBAAmB,SAAS;AAAA,YAC1C,OAAO;AAAA,YACN,GAAG,kBAAkB,cAAc;AAAA,YAEpC;AAAA;AAAA,gBAAC,GAAG;AAAA,gBAAH;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,UAAU,YAAY,GAAG,OAAO,MAAM;AAAA,kBAE/C;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA;AAAA,wBACA;AAAA,wBACC,GAAG,cAAc,YAAY,GAAG;AAAA;AAAA,oBACnC;AAAA,oBAEA,oBAAC,oBAAkB,GAAG,WAAY,GAAG,kBAAkB;AAAA;AAAA;AAAA,cACzD;AAAA,cAEC,CAAC,UACA,oBAAC,UAAQ,GAAG,aACV;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAAA,kBAC5C,QAAQ,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAAA,kBAC5C;AAAA,kBACC,GAAG;AAAA,kBAEH;AAAA,kCACC,oBAAC,sBAAoB,GAAG,aAAa,IAErC,oBAAC,qBAAmB,GAAG,YAAY;AAAA,oBAGpC,8BAAY;AAAA;AAAA;AAAA,cACf,GACF,IAEA,oBAAC,UAAQ,GAAG,aACV;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAAA,kBAC5C,QAAQ,UAAU,QAAQ,EAAE,OAAO,QAAQ,CAAC;AAAA,kBAC5C;AAAA,kBACC,GAAG;AAAA,kBAEH,yBAAe,aACd,oBAAC,sBAAoB,GAAG,aAAa,IAErC,oBAAC,qBAAmB,GAAG,YAAY;AAAA;AAAA,cAEvC,GACF;AAAA;AAAA;AAAA,QAEJ,GACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAMA,IAAM,oBAAoB;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,aAAa,YAAY,GAAG,KAAK,GAAG,QAAQ;AACjE,UAAM,EAAE,OAAO,YAAY,OAAO,IAAI,uBAAuB;AAC7D,UAAM,EAAE,cAAc,IAAI,qBAAqB;AAE/C,UAAM,MAAmB;AAAA,MACvB,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAG,OAAO;AAAA,MACV,QAAQ;AAAA,IACV;AAEA,WACE,oBAAC,kBACC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,0BAA0B,SAAS;AAAA,QACjD,OAAO;AAAA,QACN,GAAG;AAAA,QAEJ;AAAA,UAAC,GAAG;AAAA,UAAH;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,GAAE;AAAA,YACF;AAAA,YACC,GAAG;AAAA,cACF,EAAE,GAAG,YAAY,OAAO,cAAc,SAAS,GAAG;AAAA,cAClD;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;","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,
|