@react-md/core 1.0.0-next.16 → 1.0.0-next.18

package/src/autocomplete/AutocompleteListboxChildren.tsx

@@ -0,0 +1,68 @@
+"use client";
+import { type ReactElement, type ReactNode } from "react";
+import { useListboxContext } from "../form/ListboxProvider.js";
+import { Option } from "../form/Option.js";
+import {
+  type AutocompleteGetOptionLabel,
+  type AutocompleteGetOptionProps,
+  type AutocompleteOption,
+} from "./types.js";
+
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export interface AutocompleteListboxChildrenProps<
+  Option extends AutocompleteOption,
+> {
+  query: string;
+  options: readonly Option[];
+  getOptionLabel: AutocompleteGetOptionLabel<Option>;
+  getOptionProps: AutocompleteGetOptionProps<Option>;
+  children: ReactNode;
+  noOptionsChildren: ReactNode;
+}
+
+/**
+ * NOTE: This was moved to a second component to improve performance so
+ * that the availableOptions aren't looped until the listbox is visible
+ *
+ * @since 6.0.0
+ * @internal
+ */
+export function AutocompleteListboxChildren<Option extends AutocompleteOption>(
+  props: AutocompleteListboxChildrenProps<Option>
+): ReactElement {
+  const {
+    children,
+    query,
+    options: availableOptions,
+    noOptionsChildren,
+    getOptionLabel,
+    getOptionProps,
+  } = props;
+  const { isOptionSelected } = useListboxContext();
+
+  return (
+    <>
+      {children}
+      {!availableOptions.length && noOptionsChildren}
+      {availableOptions.map((option, index) => {
+        const label = getOptionLabel(option);
+        const optionProps = getOptionProps({
+          index,
+          query,
+          option,
+          selected: isOptionSelected(option),
+          extractor: getOptionLabel,
+        });
+
+        return (
+          <Option key={label} value={option} {...optionProps}>
+            {optionProps?.children ?? label}
+          </Option>
+        );
+      })}
+    </>
+  );
+}

package/src/autocomplete/autocompleteStyles.ts

@@ -11,6 +11,8 @@ export interface AutocompleteClassNameOptions {
   className?: string;
 
   loading?: boolean;
+  inlineChips?: boolean;
+  disableClearButton?: boolean;
   disableDropdownButton?: boolean;
 }
 
@@ -20,18 +22,20 @@ export interface AutocompleteClassNameOptions {
 export function autocomplete(
   options: AutocompleteClassNameOptions = {}
 ): string {
-  const { className, loading, disableDropdownButton } = options;
+  const {
+    className,
+    loading,
+    inlineChips,
+    disableClearButton,
+    disableDropdownButton,
+  } = options;
 
   return cnb(
     styles({
-      // all other configurations must be set manually
-
-      // right-addon-1: dropdown button only
-      ra1: !loading && !disableDropdownButton,
-      // right-addon-2: circular progress and dropdown button
-      ra2: loading && !disableDropdownButton,
-      // right-addon-3: circular progress only
-      ra3: loading && disableDropdownButton,
+      cb: !disableClearButton,
+      db: !disableDropdownButton,
+      cp: loading,
+      "inline-chips": inlineChips,
     }),
     className
   );
@@ -58,6 +62,23 @@ export function autocompleteRightAddon(
     className
   );
 }
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteDropdownButtonClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function autocompleteDropdownButton(
+  options: AutocompleteDropdownButtonClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles("dropdown-button"), className);
+}
 
 /**
  * @since 6.0.0
@@ -76,3 +97,21 @@ export function autocompleteClearButton(
 
   return cnb(styles("clear-button"), className);
 }
+
+/**
+ * @since 6.0.0
+ */
+export interface AutocompleteChipClassNameOptions {
+  className?: string;
+}
+
+/**
+ * @since 6.0.0
+ */
+export function autocompleteChip(
+  options: AutocompleteChipClassNameOptions = {}
+): string {
+  const { className } = options;
+
+  return cnb(styles("chip"), className);
+}

package/src/autocomplete/defaults.ts

@@ -1,13 +1,17 @@
 import { type MenuItemProps } from "../menu/MenuItem.js";
 import { caseInsensitiveSearch } from "../searching/caseInsensitive.js";
 import { defaultExtractor } from "../searching/utils.js";
-import { type AutocompleteFilterOptions } from "./types.js";
+import {
+  type AutocompleteFilterOptions,
+  type AutocompleteGetOptionPropsOptions,
+  type AutocompleteOption,
+} from "./types.js";
 
 /**
  * @since 6.0.0
  * @internal
  */
-export const defaultAutocompleteExtractor = <T>(item: T): string => {
+export const defaultAutocompleteExtractor = (item: unknown): string => {
   if (
     item &&
     typeof item === "object" &&
@@ -20,6 +24,21 @@ export const defaultAutocompleteExtractor = <T>(item: T): string => {
   return defaultExtractor("Autocomplete")(item);
 };
 
+/**
+ * @since 6.0.0
+ * @internal
+ */
+export const defaultAutocompleteFilter = <Option extends AutocompleteOption>(
+  options: AutocompleteFilterOptions<Option>
+): readonly Option[] => caseInsensitiveSearch({ ...options, startsWith: true });
+
+/**
+ * @since 6.0.0
+ */
+export const noopAutocompleteFilter = <Option extends AutocompleteOption>(
+  options: AutocompleteFilterOptions<Option>
+): readonly Option[] => options.list;
+
 /**
  * @since 6.0.0
  * @internal
@@ -32,15 +51,16 @@ const isProbablyMenuItemProps = (
  * @since 6.0.0
  * @internal
  */
-export const defaultAutocompleteOptionProps = <T>(options: {
-  option: T;
-}): Partial<MenuItemProps> | undefined => {
+export const defaultAutocompleteGetOptionProps = <T extends AutocompleteOption>(
+  options: AutocompleteGetOptionPropsOptions<T>
+): Partial<MenuItemProps> | undefined => {
   const { option } = options;
   if (isProbablyMenuItemProps(option)) {
     const {
       leftAddon,
       rightAddon,
       className,
+      children,
       disabled,
       height,
       textProps,
@@ -53,6 +73,7 @@ export const defaultAutocompleteOptionProps = <T>(options: {
     } = option;
 
     return {
+      children,
       leftAddon,
       rightAddon,
       className,
@@ -69,15 +90,3 @@ export const defaultAutocompleteOptionProps = <T>(options: {
   }
   return;
 };
-
-/**
- * This is just the {@link caseInsensitiveSearch} but requires
- * the options to start with the current query.
- *
- * @since 6.0.0
- */
-export function defaultAutocompleteFilter<T>(
-  options: AutocompleteFilterOptions<T>
-): readonly T[] {
-  return caseInsensitiveSearch({ ...options, startsWith: true });
-}