Merge pull request #182 from kobaltedev/develop

chore: changeset v0.9.1

.changeset/lemon-candles-grow.md

@@ -0,0 +1,6 @@
+---
+"@kobalte/tailwindcss": patch
+"@kobalte/core": patch
+---
+
+v0.9.1

apps/docs/src/VERSIONS.ts

@@ -17,6 +17,7 @@ export const CORE_VERSIONS = [
   "0.8.1",
   "0.8.2",
   "0.9.0",
+  "0.9.1",
 ].reverse();
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

apps/docs/src/routes/docs/changelog/0-9-1.mdx

@@ -0,0 +1,9 @@
+# v0.9.1
+
+**April 25, 2023**.
+
+## Bug fixes
+
+- [#173](https://github.com/kobaltedev/kobalte/pull/173)
+- [#180](https://github.com/kobaltedev/kobalte/pull/180)
+- [#181](https://github.com/kobaltedev/kobalte/pull/181)

apps/docs/src/routes/docs/core/components/combobox.mdx

@@ -327,6 +327,43 @@ The combobox consists of:
 
 ## Usage
 
+### Filtering options
+
+Combobox doesn't apply any filter internally, it's the developer responsibility to provide a filtered list of options, whether by using a fuzzy search library client-side or by making server-side requests to an API.
+
+For convenience Kobalte exposes the `createFilter` primitive which provides functions for filtering or searching based on substring matches with locale sensitive matching support. It automatically uses the current locale set by the application, either via the default browser language or via the `I18nProvider`.
+
+The available filtering methods are:
+
+- **startWith**: Returns whether a string starts with a given substring.
+- **endWith**: Returns whether a string ends with a given substring.
+- **contains**: Returns whether a string contains a given substring.
+
+```tsx {6,13,15}
+import { Combobox, createFilter } from "@kobalte/core";
+import { createSignal } from "solid-js";
+
+const ALL_OPTIONS = ["Apple", "Banana", "Blueberry", "Grapes", "Pineapple"];
+
+function DefaultValueExample() {
+  const filter = createFilter({ sensitivity: "base" });
+
+  const [options, setOptions] = createSignal(ALL_OPTIONS);
+
+  const onInputChange = (value: string) => {
+    // or filter.startWith
+    // or filter.endWith
+    setOptions(ALL_OPTIONS.filter(option => filter.contains(option, value)));
+  };
+
+  return (
+    <Combobox.Root options={options()} onInputChange={onInputChange}>
+      //...rest of the component.
+    </Combobox.Root>
+  );
+}
+```
+
 ### Default value
 
 An initial, uncontrolled value can be provided using the `defaultValue` prop, which accepts a value corresponding with the `options`.

packages/core/dev/App.tsx

@@ -1,75 +1,5 @@
-import { createSignal } from "solid-js";
-
-import { Combobox, createFilter, I18nProvider } from "../src";
-import { ComboboxTriggerMode } from "../src/combobox";
-
-interface Food {
-  value: string;
-  label: string;
-  disabled: boolean;
-}
-
-const RAW_OPTIONS: Food[] = [
-  { value: "apple", label: "Apple", disabled: false },
-  { value: "banana", label: "Banana", disabled: false },
-  { value: "blueberry", label: "Blueberry", disabled: false },
-  { value: "grapes", label: "Grapes", disabled: true },
-  { value: "pineapple", label: "Pineapple", disabled: false },
-];
+import { I18nProvider } from "../src";
 
 export default function App() {
-  const filter = createFilter({ sensitivity: "base" });
-
-  const [options, setOptions] = createSignal<Food[]>(RAW_OPTIONS);
-
-  const [value, setValue] = createSignal<Food | undefined>(options()[0]);
-
-  const onOpenChange = (isOpen: boolean, triggerMode?: ComboboxTriggerMode) => {
-    // Show all options on ArrowDown/ArrowUp and button click.
-    if (isOpen && triggerMode === "manual") {
-      setOptions(RAW_OPTIONS);
-    }
-  };
-
-  const onInputChange = (value: string) => {
-    if (value === "") {
-      //setValue(undefined);
-    }
-
-    setOptions(RAW_OPTIONS.filter(option => filter.contains(option.label, value)));
-  };
-
-  return (
-    <I18nProvider locale="en-US">
-      {value()?.label ?? "Select an option"}
-      <Combobox.Root<Food>
-        options={options()}
-        optionValue="value"
-        optionTextValue="label"
-        optionLabel="label"
-        optionDisabled="disabled"
-        //value={value()}
-        onChange={setValue}
-        onInputChange={onInputChange}
-        onOpenChange={onOpenChange}
-        placeholder="Select a fruit..."
-        itemComponent={props => (
-          <Combobox.Item item={props.item} class="combobox__item">
-            {props.item.rawValue.label}
-            <Combobox.ItemIndicator>X</Combobox.ItemIndicator>
-          </Combobox.Item>
-        )}
-      >
-        <Combobox.Control<Food> class="combobox__trigger">
-          <Combobox.Input />
-          <Combobox.Trigger class="combobox__icon" />
-        </Combobox.Control>
-        <Combobox.Portal>
-          <Combobox.Content class="combobox__content">
-            <Combobox.Listbox class="combobox__listbox" />
-          </Combobox.Content>
-        </Combobox.Portal>
-      </Combobox.Root>
-    </I18nProvider>
-  );
+  return <I18nProvider locale="en-US"></I18nProvider>;
 }

packages/core/src/combobox/combobox-base.tsx

@@ -351,13 +351,6 @@ export function ComboboxBase<Option, OptGroup = never>(props: ComboboxBaseProps<
   });
 
   const getOptionsFromValues = (values: Set<string>): Option[] => {
-    const optionValue = local.optionValue;
-
-    if (optionValue == null) {
-      // If no `optionValue`, the values are the options (ex: string[] of options)
-      return [...values] as Option[];
-    }
-
     return flattenOptions().filter(option => values.has(getOptionValue(option as Option)));
   };
 

packages/core/src/combobox/combobox-input.tsx

@@ -178,7 +178,6 @@ export function ComboboxInput(props: ComboboxInputProps) {
     }
 
     context.setIsInputFocused(false);
-    context.resetInputValue();
   };
 
   // If a touch happens on direct center of Combobox input, might be virtual click from iPad so open ComboBox menu