@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/select.d.ts

@@ -0,0 +1,125 @@
+import { type ListData, type SelectContentProps, type SelectContentState, type SelectEmptyState, type SelectItemIconProps, type SelectItemIconState, type SelectItemProps, type SelectItemState, type SelectItemTextState, type SelectOptions, type SelectSelectAllState, type SelectTriggerProps, type SelectTriggerState, type SelectValueProps, type SelectValueState } from "@ui-sdk/core/select";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type Clashing = "value" | "defaultValue" | "onChange" | "onSelect";
+/**
+ * The props of `Select`.
+ * @stable
+ */
+type SelectProps<T = string, Multiple extends boolean | undefined = false> = SelectOptions<T, Multiple> & {
+    children?: React.ReactNode;
+};
+/**
+ * Picks one value, or several, from a list in a popup.
+ * `T` is inferred from `value`, `defaultValue`, `items` or `onValueChange`, and
+ * `multiple` makes the value a list.
+ * @stable
+ */
+declare function Select<T = string, Multiple extends boolean | undefined = false>({ children, container, ...options }: SelectProps<T, Multiple>): React.JSX.Element;
+/**
+ * A visible label for the select. Pressing it focuses the trigger, like a native select's label.
+ * @stable
+ */
+declare const SelectLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "label", "div">;
+/**
+ * The button that opens the list: a combobox named by the label. Typing on it selects the item that matches.
+ * @stable
+ */
+declare function SelectTrigger({ disabled, controller, render, ...props }: Omit<PartProps<"button", SelectTriggerState>, Clashing> & SelectTriggerProps): React.JSX.Element;
+/**
+ * The selected item's label, or the placeholder. Renders it for you when it has no children.
+ * @stable
+ */
+declare function SelectValue({ placeholder, maxLabels, getMoreLabel, render, children, ...props }: Omit<PartProps<"span", SelectValueState>, Clashing> & SelectValueProps): React.JSX.Element;
+/**
+ * The popup that holds the items, positioned against the trigger.
+ * @stable
+ */
+declare function SelectContent({ side, align, sideOffset, alignOffset, collisionPadding, arrowPadding, anchor, alignItemWithTrigger, keepMounted, container, render, children, ...props }: PartProps<"div", SelectContentState> & SelectContentProps): React.JSX.Element | null;
+/**
+ * The listbox, when the content holds more than items, like a `SelectInput`. Without children, it renders the select's `items` that match.
+ * @stable
+ */
+declare function SelectList({ children, ...props }: PartProps<"div", SelectContentState>): React.JSX.Element | null;
+/**
+ * A search field inside `SelectContent` that filters the list while focus stays in it. Put the items in a `SelectList`. Name it with `aria-label`.
+ * @stable
+ */
+declare const SelectInput: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "input", "input">;
+/**
+ * Shown while no item matches the search. Its message is announced when it appears.
+ * @stable
+ */
+declare function SelectEmpty({ children, ...props }: PartProps<"div", SelectEmptyState>): React.JSX.Element | null;
+/**
+ * A polite live region for loading and result counts. Its content is yours, usually a function of its state.
+ * @stable
+ */
+declare const SelectStatus: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "status", "div">;
+/**
+ * An option. Pressing it selects it, or toggles it with `multiple`.
+ * @stable
+ */
+declare const SelectItem: <T = string>(props: Omit<PartProps<"div", SelectItemState>, Clashing> & SelectItemProps<T>) => React.ReactNode;
+/**
+ * The item's text, with the part the search matched in `<mark>`. Without string content, it shows the item's label.
+ * @stable
+ */
+declare function SelectItemText({ children, ...props }: PartProps<"span", SelectItemTextState>): React.JSX.Element | null;
+/**
+ * An option that selects every item that matches, with `multiple`: in its group inside a `SelectGroup`, or in the whole list.
+ * @stable
+ */
+declare function SelectSelectAll({ render, ...props }: PartProps<"div", SelectSelectAllState>): React.JSX.Element | null;
+/**
+ * The check inside a selected item. Rendered while it's selected, or always with `keepMounted`.
+ * @stable
+ */
+declare const SelectItemIndicator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "item-indicator", "span">;
+/**
+ * An icon inside an item. `SelectValueIcon` shows the selected item's in the trigger. Screen
+ * readers, typeahead and filtering skip it, and `mirror` flips it in right-to-left text.
+ * @stable
+ */
+declare const SelectItemIcon: ({ mirror, render, ...props }: PartProps<"span", SelectItemIconState> & SelectItemIconProps) => React.JSX.Element | null;
+/**
+ * The selected item's icon, copied from its `SelectItemIcon`, like before the value in the
+ * trigger. Rendered while one item is selected and it has an icon.
+ * @stable
+ */
+declare function SelectValueIcon(props: Omit<PartProps<"span">, "children">): React.JSX.Element | null;
+/**
+ * A group of items, named by its `SelectGroupLabel`, and hidden while none of its items shows.
+ * @stable
+ */
+declare const SelectGroup: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "group", "div">;
+/**
+ * The group's heading, which names the group.
+ * @stable
+ */
+declare const SelectGroupLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "group-label", "div">;
+/**
+ * A line between items or groups, hidden from screen readers.
+ * @stable
+ */
+declare const SelectSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "separator", "div">;
+/**
+ * A button that selects nothing. Shown while something is selected, or always with `keepMounted`.
+ * @stable
+ */
+declare const SelectClear: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "clear", "button">;
+/**
+ * An arrow on the popup's edge that points at the trigger.
+ * @stable
+ */
+declare const SelectArrow: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/select").SelectPrimitive, "arrow", "div">;
+/**
+ * Renders data items. Used by data selects, and available for custom layouts.
+ * @stable
+ */
+declare function SelectItems({ items }: {
+    items: ListData<unknown>;
+}): React.JSX.Element;
+export { createSelectController } from "@ui-sdk/core/select";
+export type { ListAnnouncement, ListData, ListFilter, ListGroup, ListHighlightDetails, ListItem, ListSeparator, MatchSegment, SelectApi, SelectArrowState, SelectChangeOptions, SelectClearProps, SelectClearState, SelectContentProps, SelectContentState, SelectController, SelectDismissReason, SelectEmptyState, SelectInputState, SelectItemIconProps, SelectItemIconState, SelectItemIndicatorProps, SelectItemIndicatorState, SelectItemProps, SelectItemState, SelectItemTextState, SelectOpenChangeReason, SelectOptions, SelectPrimitive, SelectQueryChangeReason, SelectSelectAllState, SelectStatusState, SelectTriggerProps, SelectTriggerState, SelectValue as SelectValueData, SelectValueChangeReason, SelectValueProps, SelectValueState, } from "@ui-sdk/core/select";
+export { Select, SelectArrow, SelectClear, SelectContent, SelectEmpty, SelectGroup, SelectGroupLabel, SelectInput, SelectItem, SelectItemIcon, SelectItemIndicator, SelectItems, SelectItemText, SelectLabel, SelectList, type SelectProps, SelectSelectAll, SelectSeparator, SelectStatus, SelectTrigger, SelectValue, SelectValueIcon, };

package/dist/select.js

@@ -0,0 +1,330 @@
+"use client";
+// src/select.tsx
+import {
+  select as selectPrimitive
+} from "@ui-sdk/core/select";
+import {
+  selectAllKey,
+  selectItemIcons,
+  selectSelectAll
+} from "@ui-sdk/core/renderer";
+import * as React from "react";
+import {
+  hasChild,
+  learnLabels,
+  notLabel,
+  Placed,
+  usePlaceContent,
+  usePlacedContent
+} from "./children.js";
+import { controlRender, useFieldControl } from "./field-context.js";
+import { markSegments, textToMark } from "./list-text.js";
+import {
+  Connected,
+  renderPopup,
+  sheetViewport,
+  useControllerEntry,
+  useOwnContainer,
+  usePopupContainer
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  renderElement,
+  useHandle,
+  useAround,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { FormInputs } from "./form-inputs.js";
+import { ListItems } from "./list-items.js";
+import { createSelectController } from "@ui-sdk/core/select";
+import { jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(selectPrimitive, {
+  label: "div",
+  input: "input",
+  status: "div",
+  item: "div",
+  "item-indicator": "span",
+  group: "div",
+  "group-label": "div",
+  separator: "div",
+  clear: "button",
+  arrow: "div"
+});
+var ContainerContext = React.createContext(void 0);
+function useSelect() {
+  return useHandle(selectPrimitive);
+}
+function Select({
+  children,
+  container,
+  ...options
+}) {
+  const field = useFieldControl();
+  const select = usePrimitive(selectPrimitive, {
+    ...options,
+    name: options.name ?? field?.name,
+    disabled: options.disabled || field?.disabled
+  });
+  useControllerEntry(options.controller, select);
+  learnLabels(select.api.internal, children, itemDecorations);
+  const found = hasChild(children, SelectContent);
+  const [placed, place] = usePlacedContent(!!options.items && !found);
+  const own = placed || found;
+  return /* @__PURE__ */ jsx(HandleScope, { handle: select, children: /* @__PURE__ */ jsxs(ContainerContext.Provider, { value: container, children: [
+    /* @__PURE__ */ jsx(Placed, { value: place, children }),
+    /* @__PURE__ */ jsx(Placed, { value: null, children: options.items && !own && /* @__PURE__ */ jsx(SelectContent, {}) }),
+    /* @__PURE__ */ jsx(FormInputs, { handle: select })
+  ] }) });
+}
+var SelectLabel = parts.Label;
+function SelectTrigger({
+  disabled,
+  controller,
+  render,
+  ...props
+}) {
+  const unconnected = () => renderElement("button", { type: "button", disabled, ...props }, render, {
+    open: false,
+    disabled: !!disabled,
+    readOnly: false,
+    required: false,
+    placeholder: true
+  });
+  return /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: selectPrimitive,
+      controller,
+      fallback: unconnected,
+      children: /* @__PURE__ */ jsx(TriggerPart, { disabled, render, ...props })
+    }
+  );
+}
+function TriggerPart({
+  disabled,
+  render,
+  children = /* @__PURE__ */ jsx(SelectValue, {}),
+  ...props
+}) {
+  const field = useFieldControl(props);
+  const element = {
+    ...props,
+    children,
+    render: controlRender(field, "button", render)
+  };
+  return usePart(
+    selectPrimitive,
+    "trigger",
+    { disabled, named: !!field || props["aria-labelledby"] != null },
+    element,
+    "button"
+  );
+}
+var unselected = {
+  value: null,
+  label: "",
+  labels: [],
+  placeholder: true
+};
+function SelectValue({
+  placeholder,
+  maxLabels,
+  getMoreLabel,
+  render,
+  children,
+  ...props
+}) {
+  if (!useNearest(selectPrimitive)) {
+    return renderElement(
+      "span",
+      { ...props, children: children ?? placeholder ?? null },
+      render,
+      unselected
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ValuePart,
+    {
+      part: { placeholder, maxLabels, getMoreLabel },
+      render,
+      props,
+      children
+    }
+  );
+}
+function ValuePart({
+  part,
+  render,
+  props,
+  children
+}) {
+  const select = useSelect();
+  const { placeholder } = part;
+  const content = (state) => typeof children === "function" ? children(state) : children ?? (state.placeholder ? placeholder ?? select.state.placeholder ?? null : state.label);
+  return usePart(
+    select,
+    "value",
+    part,
+    { ...props, children: content, render },
+    "span"
+  );
+}
+function SelectContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  alignItemWithTrigger,
+  keepMounted,
+  container,
+  render,
+  children,
+  ...props
+}) {
+  usePlaceContent();
+  const select = useSelect();
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor,
+    alignItemWithTrigger,
+    keepMounted
+  };
+  const body = (state) => typeof children === "function" ? children(state) : children ?? (state.items && select.state.items && /* @__PURE__ */ jsx(SelectItems, { items: state.items }));
+  const element = usePart(select, "content", content, {
+    ...props,
+    children: body,
+    render: sheetViewport(select, render)
+  });
+  return element && renderPopup(element, target);
+}
+function SelectList({
+  children = listItems,
+  ...props
+}) {
+  return usePart(selectPrimitive, "list", {}, { ...props, children });
+}
+var listItems = (state) => /* @__PURE__ */ jsx(SelectItems, { items: state.items });
+var SelectInput = parts.Input;
+function SelectEmpty({
+  children,
+  ...props
+}) {
+  const content = (state) => typeof children === "function" ? children(state) : state.empty ? children : null;
+  return usePart(selectPrimitive, "empty", {}, { ...props, children: content });
+}
+var SelectStatus = parts.Status;
+var SelectItem = parts.Item;
+function SelectItemText({
+  children,
+  ...props
+}) {
+  const item = useAround(selectPrimitive, "item");
+  if (!item) {
+    throw new Error("<SelectItemText> must be used inside <SelectItem>.");
+  }
+  const label = item.label ?? item.value;
+  const part = { id: item.value, text: textToMark(children, label) };
+  const content = typeof children === "function" ? children : (state) => markSegments(state.segments);
+  return usePart(
+    selectPrimitive,
+    "item-text",
+    part,
+    { ...props, children: content },
+    "span"
+  );
+}
+function SelectSelectAll({
+  render,
+  ...props
+}) {
+  const select = useSelect();
+  select.instance.use(selectSelectAll);
+  const part = {
+    id: selectAllKey(
+      useAround(selectPrimitive, "group")?.id
+    )
+  };
+  return usePart(select, "select-all", part, { ...props, render }, "div");
+}
+var SelectItemIndicator = parts.ItemIndicator;
+var SelectItemIcon = /* @__PURE__ */ notLabel(function SelectItemIcon2({
+  mirror,
+  render,
+  ...props
+}) {
+  const select = useSelect();
+  select.instance.use(selectItemIcons);
+  const part = {
+    id: React.useId(),
+    mirror,
+    item: useAround(selectPrimitive, "item")?.value
+  };
+  return usePart(select, "item-icon", part, { ...props, render }, "span");
+});
+var itemDecorations = /* @__PURE__ */ new Set([SelectItemIndicator]);
+function SelectValueIcon(props) {
+  return useNearest(selectPrimitive) ? /* @__PURE__ */ jsx(SelectValueIconPart, { ...props }) : null;
+}
+function SelectValueIconPart(props) {
+  const select = useSelect();
+  select.instance.use(selectItemIcons);
+  return usePart(select, "value-icon", {}, props, "span");
+}
+var SelectGroup = parts.Group;
+var SelectGroupLabel = parts.GroupLabel;
+var SelectSeparator = parts.Separator;
+var SelectClear = parts.Clear;
+var SelectArrow = parts.Arrow;
+function SelectItems({ items }) {
+  const select = useSelect();
+  return /* @__PURE__ */ jsx(
+    ListItems,
+    {
+      items,
+      parts: listParts,
+      keyOf: select.api.internal.keyOf
+    }
+  );
+}
+var listParts = {
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  Separator: SelectSeparator
+};
+export {
+  Select,
+  SelectArrow,
+  SelectClear,
+  SelectContent,
+  SelectEmpty,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectInput,
+  SelectItem,
+  SelectItemIcon,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectItems,
+  SelectLabel,
+  SelectList,
+  SelectSelectAll,
+  SelectSeparator,
+  SelectStatus,
+  SelectTrigger,
+  SelectValue,
+  SelectValueIcon,
+  createSelectController
+};