From b4047b22993256552d01194454f1a7048ebe03a5 Mon Sep 17 00:00:00 2001 From: Haz Date: Tue, 18 Apr 2023 15:43:20 +0200 Subject: [PATCH 01/17] Use Floating UI within the component instead of store --- examples/combobox-cancel/index.tsx | 9 +- examples/combobox-group/index.tsx | 9 +- examples/combobox-item-value/index.tsx | 9 +- examples/combobox-matches/index.tsx | 9 +- .../combobox-multiple/combobox-multiple.tsx | 9 +- examples/combobox-textarea/index.tsx | 15 +- examples/combobox/index.tsx | 9 +- examples/form-select/select.tsx | 4 +- examples/hovercard-disclosure/index.tsx | 9 +- examples/hovercard/index.tsx | 4 +- examples/menu-bar/menu.tsx | 17 +- examples/menu-context-menu/index.tsx | 9 +- examples/menu-item-radio/index.tsx | 3 +- examples/menu-nested/menu.tsx | 12 +- examples/menu/index.tsx | 4 +- examples/popover-flip/index.tsx | 7 +- examples/popover-focus-within/popover.tsx | 33 +- examples/popover-selection/index.tsx | 16 +- examples/popover-standalone/popover.tsx | 33 +- examples/popover-standalone/test-browser.ts | 7 +- examples/select-animated/index.tsx | 10 +- examples/select-autofill/index.tsx | 7 +- .../select-combobox.tsx | 4 +- examples/select-combobox/index.tsx | 9 +- examples/select-group/index.tsx | 13 +- examples/select-item-custom/index.tsx | 9 +- examples/select-multiple/index.tsx | 13 +- examples/select/index.tsx | 13 +- examples/toolbar-select/toolbar.tsx | 3 +- .../ariakit-core/src/popover/popover-store.ts | 392 +---------------- .../src/popover/popover-store.ts | 19 +- .../src/popover/popover.tsx | 412 ++++++++++++++++-- .../[category]/[page]/table-of-contents.tsx | 9 +- website/components/header-menu.tsx | 25 +- website/components/header-version-select.tsx | 14 +- website/components/playground-toolbar.tsx | 12 +- 36 files changed, 601 insertions(+), 590 deletions(-) diff --git a/examples/combobox-cancel/index.tsx b/examples/combobox-cancel/index.tsx index f0a8c995f4..6a804061ce 100644 --- a/examples/combobox-cancel/index.tsx +++ b/examples/combobox-cancel/index.tsx @@ -12,7 +12,7 @@ const list = [ ]; export default function Example() { - const combobox = Ariakit.useComboboxStore({ gutter: 4, sameWidth: true }); + const combobox = Ariakit.useComboboxStore(); return (
- + {list.map((value) => ( - + {!!matches.length ? ( matches.map(([type, items], i) => ( diff --git a/examples/combobox-item-value/index.tsx b/examples/combobox-item-value/index.tsx index 78fc9b79eb..8cb5100dd9 100644 --- a/examples/combobox-item-value/index.tsx +++ b/examples/combobox-item-value/index.tsx @@ -4,7 +4,7 @@ import "./style.css"; const fruits = ["Apple", "Grape", "Orange", "Strawberry", "Watermelon"]; export default function Example() { - const combobox = Ariakit.useComboboxStore({ gutter: 8, sameWidth: true }); + const combobox = Ariakit.useComboboxStore(); return (
- + {fruits.map((f) => ( diff --git a/examples/combobox-matches/index.tsx b/examples/combobox-matches/index.tsx index cb38f5bb27..4eca48663f 100644 --- a/examples/combobox-matches/index.tsx +++ b/examples/combobox-matches/index.tsx @@ -5,7 +5,7 @@ import list from "./list.js"; import "./style.css"; export default function Example() { - const combobox = Ariakit.useComboboxStore({ gutter: 8, sameWidth: true }); + const combobox = Ariakit.useComboboxStore(); const value = combobox.useState("value"); const deferredValue = useDeferredValue(value); @@ -24,7 +24,12 @@ export default function Example() { className="combobox" /> - + {matches.length ? ( matches.map((value) => ( + {(popoverProps) => ( (null); const [caretOffset, setCaretOffset] = React.useState(null); - const combobox = Ariakit.useComboboxStore({ - fitViewport: true, - getAnchorRect: () => { - const textarea = ref.current; - if (!textarea) return null; - return getAnchorRect(textarea); - }, - }); + const combobox = Ariakit.useComboboxStore(); const searchValue = combobox.useState("value"); const mounted = combobox.useState("mounted"); @@ -127,6 +120,12 @@ export default function Example() {