Expose SelectValue component (#3746)

.changeset/3746-select-value.md

@@ -0,0 +1,14 @@
+---
+"@ariakit/react": patch
+---
+
+New `SelectValue` component
+
+A [`SelectValue`](https://ariakit.org/reference/select-value) component is now available. This is a _value_ component, which means it doesn't render any DOM elements and, as a result, doesn't take HTML props. Optionally, it can use a [`fallback`](https://ariakit.org/reference/select-value#fallback) prop as a default value if the store's [`value`](https://ariakit.org/reference/use-select-store#value) is `undefined`:
+
+```jsx
+<Select>
+  <SelectValue fallback="Select a value" />
+  <SelectArrow />
+</Select>
+```

components/select.md

@@ -37,6 +37,7 @@ useSelectContext()
 <SelectProvider>
   <SelectLabel />
   <Select>
+    <SelectValue />
     <SelectArrow />
   </Select>
   <SelectPopover>

examples/select-combobox-tab/select.tsx

@@ -1,5 +1,4 @@
 import * as Ariakit from "@ariakit/react";
-import { SelectValue } from "@ariakit/react-core/select/select-value";
 import clsx from "clsx";
 import * as React from "react";
 
@@ -58,7 +57,7 @@ export function Select({
         )}
       >
         {icon}
-        <div className="truncate">{text || <SelectValue />}</div>
+        <div className="truncate">{text || <Ariakit.SelectValue />}</div>
         <Ariakit.SelectArrow />
       </Ariakit.Select>
       <Ariakit.SelectPopover

packages/ariakit-react/src/select.ts

@@ -14,6 +14,7 @@ export { SelectList } from "@ariakit/react-core/select/select-list";
 export { SelectPopover } from "@ariakit/react-core/select/select-popover";
 export { SelectRow } from "@ariakit/react-core/select/select-row";
 export { SelectSeparator } from "@ariakit/react-core/select/select-separator";
+export { SelectValue } from "@ariakit/react-core/select/select-value";
 
 export type {
   SelectStoreProps,
@@ -87,3 +88,5 @@ export type {
   SelectSeparatorOptions,
   SelectSeparatorProps,
 } from "@ariakit/react-core/select/select-separator";
+
+export type { SelectValueProps } from "@ariakit/react-core/select/select-value";

website/components/playground-toolbar.tsx

@@ -8,10 +8,10 @@ import {
   SelectItemCheck,
   SelectPopover,
   SelectProvider,
+  SelectValue,
   Toolbar,
   ToolbarItem,
 } from "@ariakit/react";
-import { SelectValue } from "@ariakit/react-core/select/select-value";
 import { twJoin } from "tailwind-merge";
 import { AuthEnabled } from "./auth.tsx";
 import { CopyToClipboard } from "./copy-to-clipboard.tsx";