@yamada-ui/autocomplete
Version:
Yamada UI autocomplete component
1 lines • 5.07 kB
Source Map (JSON)
{"version":3,"sources":["../src/autocomplete-icon.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps } from \"@yamada-ui/core\"\nimport type { HTMLAttributes } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { ChevronIcon, CloseIcon } from \"@yamada-ui/icon\"\nimport { useClickable } from \"@yamada-ui/use-clickable\"\nimport { cx, getValidChildren, isValidElement } from \"@yamada-ui/utils\"\nimport { cloneElement, useRef } from \"react\"\nimport { useAutocompleteContext } from \"./autocomplete-context\"\n\nexport interface AutocompleteIconProps extends HTMLUIProps {}\n\nexport const AutocompleteIcon = forwardRef<AutocompleteIconProps, \"div\">(\n ({ className, children, __css, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n cursor: \"pointer\",\n display: \"inline-flex\",\n justifyContent: \"center\",\n pointerEvents: \"none\",\n position: \"absolute\",\n top: \"50%\",\n transform: \"translateY(-50%)\",\n ...styles.icon,\n ...__css,\n }\n\n const validChildren = getValidChildren(children)\n\n const cloneChildren = validChildren.map((child) =>\n cloneElement(child, {\n style: {\n color: \"currentColor\",\n maxHeight: \"1em\",\n maxWidth: \"1em\",\n },\n \"aria-hidden\": true,\n focusable: false,\n }),\n )\n\n return (\n <ui.div\n ref={ref}\n className={cx(\"ui-autocomplete__icon\", className)}\n __css={css}\n {...rest}\n >\n {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n </ui.div>\n )\n },\n)\n\nAutocompleteIcon.displayName = \"AutocompleteIcon\"\nAutocompleteIcon.__ui__ = \"AutocompleteIcon\"\n\nexport interface AutocompleteClearIconProps extends AutocompleteIconProps {\n disabled?: boolean\n}\n\nexport const AutocompleteClearIcon: FC<AutocompleteClearIconProps> = ({\n className,\n children,\n ...props\n}) => {\n const ref = useRef<HTMLDivElement>(null)\n const { styles } = useAutocompleteContext()\n\n const rest = useClickable({\n ref,\n ...(props as HTMLAttributes<HTMLElement>),\n })\n\n return (\n <AutocompleteIcon\n className={cx(\"ui-autocomplete__icon--clear\", className)}\n aria-label=\"Clear value\"\n __css={styles.clearIcon}\n {...rest}\n >\n {children ?? <CloseIcon h=\"0.5em\" w=\"0.5em\" />}\n </AutocompleteIcon>\n )\n}\n\nAutocompleteClearIcon.displayName = \"AutocompleteClearIcon\"\nAutocompleteClearIcon.__ui__ = \"AutocompleteClearIcon\"\n\nexport interface AutocompleteItemIconProps extends HTMLUIProps<\"span\"> {}\n\nexport const AutocompleteItemIcon = forwardRef<\n AutocompleteItemIconProps,\n \"span\"\n>(({ className, ...rest }, ref) => {\n const { styles } = useAutocompleteContext()\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"inline-flex\",\n flexShrink: 0,\n fontSize: \"0.85em\",\n justifyContent: \"center\",\n ...styles.itemIcon,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-autocomplete__item__icon\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nAutocompleteItemIcon.displayName = \"AutocompleteItemIcon\"\nAutocompleteItemIcon.__ui__ = \"AutocompleteItemIcon\"\n"],"mappings":";;;;;;AAEA,SAAS,YAAY,UAAU;AAC/B,SAAS,aAAa,iBAAiB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,IAAI,kBAAkB,sBAAsB;AACrD,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,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAW;AAAA,MACX,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,IACL;AAEA,UAAM,gBAAgB,iBAAiB,QAAQ;AAE/C,UAAM,gBAAgB,cAAc;AAAA,MAAI,CAAC,UACvC,aAAa,OAAO;AAAA,QAClB,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,UAAU;AAAA,QACZ;AAAA,QACA,eAAe;AAAA,QACf,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAEA,WACE;AAAA,MAAC,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,OAAO,aAAa;AAAA,IACxB;AAAA,IACA,GAAI;AAAA,EACN,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACvD,cAAW;AAAA,MACX,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,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,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":[]}