chore: changeset v0.9.3

kobaltedev · Apr 25, 2023 · 218c6bd · 218c6bd
1 parent 89d0117
commit 218c6bd
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 26 deletions.
diff --git a/.changeset/ninety-singers-obey.md b/.changeset/ninety-singers-obey.md
@@ -0,0 +1,9 @@
+---
+"@kobalte/core": patch
+---
+
+## Bug fixes
+
+- [#187](https://github.com/kobaltedev/kobalte/pull/187)
+- [#188](https://github.com/kobaltedev/kobalte/pull/188)
+- [#191](https://github.com/kobaltedev/kobalte/pull/191)
diff --git a/apps/docs/src/VERSIONS.ts b/apps/docs/src/VERSIONS.ts
@@ -19,6 +19,7 @@ export const CORE_VERSIONS = [
   "0.9.0",
   "0.9.1",
   "0.9.2",
+  "0.9.3",
 ].reverse();
 
 export const LATEST_CORE_CHANGELOG_URL = `/docs/changelog/${CORE_VERSIONS[0].replaceAll(".", "-")}`;

diff --git a/apps/docs/src/routes/docs/changelog/0-9-1.mdx b/apps/docs/src/routes/docs/changelog/0-9-1.mdx
@@ -1,6 +1,6 @@
 # v0.9.1
 
-**April 25, 2023**.
+**April 24, 2023**.
 
 ## Bug fixes
 

diff --git a/apps/docs/src/routes/docs/changelog/0-9-3.mdx b/apps/docs/src/routes/docs/changelog/0-9-3.mdx
@@ -0,0 +1,9 @@
+# v0.9.3
+
+**April 25, 2023**.
+
+## Bug fixes
+
+- [#187](https://github.com/kobaltedev/kobalte/pull/187)
+- [#188](https://github.com/kobaltedev/kobalte/pull/188)
+- [#191](https://github.com/kobaltedev/kobalte/pull/191)
diff --git a/packages/core/src/combobox/combobox-base.tsx b/packages/core/src/combobox/combobox-base.tsx
@@ -300,7 +300,6 @@ export function ComboboxBase<Option, OptGroup = never>(props: ComboboxBaseProps<
   const [isInputFocused, setIsInputFocusedState] = createSignal(false);
 
   const [lastDisplayedOptions, setLastDisplayedOptions] = createSignal(local.options);
-  //const [selectedOptions, setSelectedOptions] = createSignal<Array<Option>>([]);
 
   const messageFormatter = createMessageFormatter(() => COMBOBOX_INTL_MESSAGES);
 
@@ -559,30 +558,6 @@ export function ComboboxBase<Option, OptGroup = never>(props: ComboboxBaseProps<
     }
   });
 
-  // Create a copy of the selected options when selection changes
-  // Prevent displayed selection from disappearing when filtering the options.
-  /*
-  createEffect(
-    on(
-      () => listState.selectionManager().selectedKeys(),
-      selectedKeys => {
-        setSelectedOptions(prev => {
-          const optionsToKeep = prev.filter(option => selectedKeys.has(getOptionValue(option)));
-
-          const keysToKeep = optionsToKeep.map(option => getOptionValue(option));
-
-          const newKeysToAdd = [...selectedKeys].filter(key => !keysToKeep.includes(key));
-
-          return [
-            ...optionsToKeep,
-            ...getOptionsFromValues(new Set(newKeysToAdd)).filter(option => option != null),
-          ];
-        });
-      }
-    )
-  );
-  */
-
   // VoiceOver has issues with announcing aria-activedescendant properly on change.
   // We use a live region announcer to announce focus changes manually.
   let lastAnnouncedFocusedKey = "";

diff --git a/packages/core/src/select/select.test.tsx b/packages/core/src/select/select.test.tsx
@@ -2813,6 +2813,92 @@ describe("Select", () => {
       expect(onValueChange.mock.calls[0][0].includes(DATA_SOURCE[2])).toBeTruthy();
     });
 
+    it("should keep the selection order", async () => {
+      render(() => (
+        <Select.Root
+          multiple
+          options={DATA_SOURCE}
+          optionValue="key"
+          optionTextValue="textValue"
+          optionDisabled="disabled"
+          placeholder="Placeholder"
+          onChange={onValueChange}
+          itemComponent={props => (
+            <Select.Item item={props.item}>{props.item.rawValue.label}</Select.Item>
+          )}
+        >
+          <Select.Label>Label</Select.Label>
+          <Select.Trigger>
+            <Select.Value<DataSourceItem>>
+              {({ selectedOptions }) =>
+                selectedOptions()
+                  .map(opt => opt.label)
+                  .join(", ")
+              }
+            </Select.Value>
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Content>
+              <Select.Listbox />
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      ));
+
+      const trigger = screen.getByRole("button");
+      expect(trigger).toHaveTextContent("Placeholder");
+
+      fireEvent(trigger, createPointerEvent("pointerdown", { pointerId: 1, pointerType: "mouse" }));
+      await Promise.resolve();
+
+      fireEvent(trigger, createPointerEvent("pointerup", { pointerId: 1, pointerType: "mouse" }));
+      await Promise.resolve();
+
+      jest.runAllTimers();
+
+      const listbox = screen.getByRole("listbox");
+      const items = within(listbox).getAllByRole("option");
+
+      expect(listbox).toHaveAttribute("aria-multiselectable", "true");
+
+      expect(items.length).toBe(3);
+      expect(items[0]).toHaveTextContent("One");
+      expect(items[1]).toHaveTextContent("Two");
+      expect(items[2]).toHaveTextContent("Three");
+
+      expect(document.activeElement).toBe(listbox);
+
+      fireEvent(
+        items[2],
+        createPointerEvent("pointerdown", { pointerId: 1, pointerType: "mouse" })
+      );
+      await Promise.resolve();
+
+      fireEvent(items[2], createPointerEvent("pointerup", { pointerId: 1, pointerType: "mouse" }));
+      await Promise.resolve();
+
+      fireEvent(
+        items[0],
+        createPointerEvent("pointerdown", { pointerId: 1, pointerType: "mouse" })
+      );
+      await Promise.resolve();
+
+      fireEvent(items[0], createPointerEvent("pointerup", { pointerId: 1, pointerType: "mouse" }));
+      await Promise.resolve();
+
+      expect(items[0]).toHaveAttribute("aria-selected", "true");
+      expect(items[2]).toHaveAttribute("aria-selected", "true");
+
+      expect(onValueChange).toBeCalledTimes(2);
+      expect(onValueChange.mock.calls[0][0].includes(DATA_SOURCE[2])).toBeTruthy();
+      expect(onValueChange.mock.calls[1][0].includes(DATA_SOURCE[0])).toBeTruthy();
+
+      // Does not close on multi-select
+      expect(listbox).toBeVisible();
+
+      expect(trigger).toHaveTextContent("Three, One");
+    });
+
     it("supports deselection", async () => {
       const defaultValue = [DATA_SOURCE[0], DATA_SOURCE[1]];