@optiaxiom/react 1.9.37 → 1.9.38

package/dist/esm/packages/react/src/select/SelectContent.js

@@ -1,148 +1,99 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useId } from '@radix-ui/react-id';
-import { PopperContent } from '@radix-ui/react-popper';
-import clsx from 'clsx';
-import { forwardRef, useState } from 'react';
-import { useFieldContext } from '../field/FieldContext.js';
-import '../listbox/Listbox.js';
-import '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import '../listbox/ListboxItem.js';
-import '../listbox/ListboxItemIndicator.js';
-import { ListboxItemized } from '../listbox/ListboxItemized.js';
-import { ListboxLabel } from '../listbox/ListboxLabel.js';
-import '../listbox/ListboxRadioItem.js';
-import { ListboxSeparator } from '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-import { shouldShowSeparator, shouldShowGroup } from '../listbox/utils.js';
-import { ModalLayer } from '../modal/ModalLayer.js';
-import { ModalListbox } from '../modal/ModalListbox.js';
-import { Portal } from '../portal/Portal.js';
-import { Text } from '../text/Text.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContent.js';
-import '../tooltip/TooltipProvider.js';
-import '../tooltip/TooltipRoot.js';
-import '../tooltip/TooltipTrigger.js';
-import '../transition/Transition.js';
-import { TransitionGroup } from '../transition/TransitionGroup.js';
-import '../utils/conditions.js';
-import { fallbackSpan } from '../utils/fallbackSpan.js';
-import '../utils/isHoverSupported.js';
-import { useSelectContext, resolveItemProperty } from './SelectContext.js';
-import { SelectRadioItem } from './SelectRadioItem.js';
-
-const SelectContent = forwardRef(
-  ({
-    align = "start",
-    "aria-label": ariaLabel,
-    children,
-    onPointerDown,
-    side = "bottom",
-    size,
-    ...props
-  }, ref) => {
-    const { labelId: fieldLabelId } = useFieldContext(
-      "@optiaxiom/react/SelectContent"
-    );
-    const {
-      downshift,
-      highlightedItem,
-      highlightedItemRef,
-      isOpen,
-      items,
-      loading
-    } = useSelectContext("@optiaxiom/react/SelectContent");
-    const labelId = useId();
-    const [placed, setPlaced] = useState(false);
-    return /* @__PURE__ */ jsx(TransitionGroup, { open: isOpen, children: /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { asChild: true, children: /* @__PURE__ */ jsx(
-      ModalListbox,
-      {
-        "aria-label": ariaLabel || "Menu",
-        asChild: true,
-        maxH: "sm",
-        minW: "trigger",
-        onPointerDown: (event) => {
-          onPointerDown?.(event);
-          if (event.defaultPrevented) {
-            return;
-          }
-          if (event.target instanceof Element && event.target.closest('[role="option"]')) {
-            return;
-          }
-          event.preventDefault();
-        },
-        ref,
-        role: "dialog",
-        size,
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          PopperContent,
-          {
-            align,
-            "aria-labelledby": clsx(fieldLabelId, labelId),
-            collisionPadding: 16,
-            side,
-            sideOffset: 4,
-            children: /* @__PURE__ */ jsx(
-              ListboxItemized,
-              {
-                highlightedItem,
-                items,
-                itemToKey: (item) => item.value,
-                loading: loading ? "skeleton" : void 0,
-                onPlacedChange: (placed2) => {
-                  setPlaced(placed2);
-                  if (placed2 && highlightedItemRef.current) {
-                    highlightedItemRef.current.scrollIntoView({
-                      block: "nearest"
-                    });
-                  }
-                },
-                ...downshift.getMenuProps(
-                  {
-                    "aria-labelledby": fieldLabelId
-                  },
-                  { suppressRefError: !placed }
-                ),
-                children: children ?? ((item, index, prevItem) => {
-                  const group = item.group;
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
-                    shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
-                    /* @__PURE__ */ jsx(
-                      Tooltip,
-                      {
-                        content: resolveItemProperty(item.disabledReason),
-                        children: /* @__PURE__ */ jsxs(
-                          SelectRadioItem,
-                          {
-                            addonBefore: item.addon,
-                            "aria-label": item["aria-label"],
-                            description: item.description,
-                            index,
-                            item,
-                            children: [
-                              item.label,
-                              item.detail && /* @__PURE__ */ jsx(Text, { asChild: true, color: "fg.secondary", truncate: true, children: fallbackSpan(item.detail) })
-                            ]
-                          },
-                          item.value
-                        )
-                      }
-                    )
-                  ] });
-                })
-              }
-            )
-          }
-        )
-      }
-    ) }) }) });
-  }
-);
+import { fallbackSpan } from "../utils/fallbackSpan.js";
+import { Text } from "../text/Text.js";
+import { TransitionGroup } from "../transition/TransitionGroup.js";
+import { Portal } from "../portal/Portal.js";
+import { useFieldContext } from "../field/FieldContext.js";
+import { Tooltip } from "../tooltip/Tooltip.js";
+import { ListboxItemized } from "../listbox/ListboxItemized.js";
+import { ListboxLabel } from "../listbox/ListboxLabel.js";
+import { ListboxSeparator } from "../listbox/ListboxSeparator.js";
+import { ModalListbox } from "../modal/ModalListbox.js";
+import { shouldShowGroup, shouldShowSeparator } from "../listbox/utils.js";
+import { resolveItemProperty, useSelectContext } from "./SelectContext.js";
+import { ModalLayer } from "../modal/ModalLayer.js";
+import { SelectRadioItem } from "./SelectRadioItem.js";
+import { useId } from "@radix-ui/react-id";
+import { forwardRef, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { PopperContent } from "@radix-ui/react-popper";
+//#region src/select/SelectContent.tsx
+/**
+* @group Select
+*/
+const SelectContent = forwardRef(({ align = "start", "aria-label": ariaLabel, children, onPointerDown, side = "bottom", size, ...props }, ref) => {
+	const { labelId: fieldLabelId } = useFieldContext("@optiaxiom/react/SelectContent");
+	const { downshift, highlightedItem, highlightedItemRef, isOpen, items, loading } = useSelectContext("@optiaxiom/react/SelectContent");
+	const labelId = useId();
+	const [placed, setPlaced] = useState(false);
+	return /* @__PURE__ */ jsx(TransitionGroup, {
+		open: isOpen,
+		children: /* @__PURE__ */ jsx(Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ModalLayer, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(ModalListbox, {
+					"aria-label": ariaLabel || "Menu",
+					asChild: true,
+					maxH: "sm",
+					minW: "trigger",
+					onPointerDown: (event) => {
+						onPointerDown?.(event);
+						if (event.defaultPrevented) return;
+						if (event.target instanceof Element && event.target.closest("[role=\"option\"]")) return;
+						event.preventDefault();
+					},
+					ref,
+					role: "dialog",
+					size,
+					...props,
+					children: /* @__PURE__ */ jsx(PopperContent, {
+						align,
+						"aria-labelledby": clsx(fieldLabelId, labelId),
+						collisionPadding: 16,
+						side,
+						sideOffset: 4,
+						children: /* @__PURE__ */ jsx(ListboxItemized, {
+							highlightedItem,
+							items,
+							itemToKey: (item) => item.value,
+							loading: loading ? "skeleton" : void 0,
+							onPlacedChange: (placed) => {
+								setPlaced(placed);
+								if (placed && highlightedItemRef.current) highlightedItemRef.current.scrollIntoView({ block: "nearest" });
+							},
+							...downshift.getMenuProps({ "aria-labelledby": fieldLabelId }, { suppressRefError: !placed }),
+							children: children ?? ((item, index, prevItem) => {
+								const group = item.group;
+								return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									shouldShowSeparator(group, prevItem) && /* @__PURE__ */ jsx(ListboxSeparator, {}),
+									shouldShowGroup(group, prevItem) && /* @__PURE__ */ jsx(ListboxLabel, { children: group.label }),
+									/* @__PURE__ */ jsx(Tooltip, {
+										content: resolveItemProperty(item.disabledReason),
+										children: /* @__PURE__ */ jsxs(SelectRadioItem, {
+											addonBefore: item.addon,
+											"aria-label": item["aria-label"],
+											description: item.description,
+											index,
+											item,
+											children: [item.label, item.detail && /* @__PURE__ */ jsx(Text, {
+												asChild: true,
+												color: "fg.secondary",
+												truncate: true,
+												children: fallbackSpan(item.detail)
+											})]
+										}, item.value)
+									})
+								] });
+							})
+						})
+					})
+				})
+			})
+		})
+	});
+});
 SelectContent.displayName = "@optiaxiom/react/SelectContent";
-
+//#endregion
 export { SelectContent };

package/dist/esm/packages/react/src/select/SelectContext.js

@@ -1,7 +1,8 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/select/SelectContext.ts
 const resolveItemProperty = (property, ...context) => typeof property === "function" ? property(...context) : property;
 const [SelectProvider, useSelectContext] = createContext("@optiaxiom/react/Select");
-
+//#endregion
 export { SelectProvider, resolveItemProperty, useSelectContext };

package/dist/esm/packages/react/src/select/SelectHiddenSelect.js

@@ -1,33 +1,30 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useSelectContext } from './SelectContext.js';
-
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useSelectContext } from "./SelectContext.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/select/SelectHiddenSelect.tsx
 const SelectHiddenSelect = forwardRef(({ defaultValue, disabled, name, onChange, required, value }, ref) => {
-  const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
-  const options = useMemo(
-    () => items.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.value }, item.value)),
-    [items]
-  );
-  return /* @__PURE__ */ jsx(VisuallyHidden, { "aria-hidden": true, children: /* @__PURE__ */ jsxs(
-    "select",
-    {
-      defaultValue,
-      disabled,
-      name,
-      onChange,
-      ref,
-      required,
-      tabIndex: -1,
-      value,
-      children: [
-        /* @__PURE__ */ jsx("option", { value: "" }),
-        options
-      ]
-    }
-  ) });
+	const { items } = useSelectContext("@optiaxiom/react/SelectHiddenSelect");
+	const options = useMemo(() => items.map((item) => /* @__PURE__ */ jsx("option", {
+		value: item.value,
+		children: item.value
+	}, item.value)), [items]);
+	return /* @__PURE__ */ jsx(VisuallyHidden, {
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("select", {
+			defaultValue,
+			disabled,
+			name,
+			onChange,
+			ref,
+			required,
+			tabIndex: -1,
+			value,
+			children: [/* @__PURE__ */ jsx("option", { value: "" }), options]
+		})
+	});
 });
 SelectHiddenSelect.displayName = "@optiaxiom/react/SelectHiddenSelect";
-
+//#endregion
 export { SelectHiddenSelect };

package/dist/esm/packages/react/src/select/SelectItem.js

@@ -1,61 +1,47 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { useSelectContext } from './SelectContext.js';
-
-const SelectItem = forwardRef(
-  ({ children, index, item, onMouseMove, size, ...props }, outerRef) => {
-    const {
-      downshift,
-      focusVisible,
-      highlightedItem,
-      highlightedItemRef,
-      isOpen,
-      items,
-      selectedItem
-    } = useSelectContext("@optiaxiom/react/SelectItem");
-    const ref = useComposedRefs(
-      highlightedItem === item ? highlightedItemRef : void 0,
-      outerRef
-    );
-    const itemProps = downshift.getItemProps({
-      "aria-posinset": index + 1,
-      "aria-setsize": items.length,
-      index,
-      item,
-      onMouseMove: (event) => {
-        onMouseMove?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        if (!isOpen) {
-          event.preventDefault();
-          Object.assign(event.nativeEvent, {
-            preventDownshiftDefault: true
-          });
-        }
-      },
-      ref,
-      ...props
-    });
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-focus-visible": focusVisible && highlightedItem === item ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
-        "data-selected": selectedItem === item ? "" : void 0,
-        size,
-        ...itemProps,
-        children
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { useSelectContext } from "./SelectContext.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/select/SelectItem.tsx
+const SelectItem = forwardRef(({ children, index, item, onMouseMove, size, ...props }, outerRef) => {
+	const { downshift, focusVisible, highlightedItem, highlightedItemRef, isOpen, items, selectedItem } = useSelectContext("@optiaxiom/react/SelectItem");
+	const ref = useComposedRefs(highlightedItem === item ? highlightedItemRef : void 0, outerRef);
+	const itemProps = downshift.getItemProps({
+		"aria-posinset": index + 1,
+		"aria-setsize": items.length,
+		index,
+		item,
+		onMouseMove: (event) => {
+			onMouseMove?.(event);
+			if (event.defaultPrevented) return;
+			/**
+			* Downshift listens to mousemove on items and disables scrolling to
+			* highlighted items (since should only scroll when using keyboard).
+			*
+			* But since we use exit animations downshift menu is present in DOM
+			* while closing - and we need to prevent triggering mousemove during
+			* that time.
+			*/
+			if (!isOpen) {
+				event.preventDefault();
+				Object.assign(event.nativeEvent, { preventDownshiftDefault: true });
+			}
+		},
+		ref,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		"data-disabled": itemProps["aria-disabled"] ? "" : void 0,
+		"data-focus-visible": focusVisible && highlightedItem === item ? "" : void 0,
+		"data-highlighted": highlightedItem === item ? "" : void 0,
+		"data-selected": selectedItem === item ? "" : void 0,
+		size,
+		...itemProps,
+		children
+	});
+});
 SelectItem.displayName = "@optiaxiom/react/SelectItem";
-
+//#endregion
 export { SelectItem };

package/dist/esm/packages/react/src/select/SelectRadioItem.js

@@ -1,24 +1,17 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import '../listbox/Listbox.js';
-import '../listbox/ListboxCheckboxItem.js';
-import '../listbox/ListboxEmpty.js';
-import '../listbox/ListboxGroup.js';
-import '../listbox/ListboxItem.js';
-import '../listbox/ListboxItemIndicator.js';
-import '../listbox/ListboxItemized.js';
-import '../listbox/ListboxLabel.js';
-import { ListboxRadioItem } from '../listbox/ListboxRadioItem.js';
-import '../listbox/ListboxSeparator.js';
-import '../listbox/ListboxSwitchItem.js';
-import { SelectItem } from './SelectItem.js';
-
-const SelectRadioItem = forwardRef(
-  ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(SelectItem, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(ListboxRadioItem, { children }) });
-  }
-);
+import { ListboxRadioItem } from "../listbox/ListboxRadioItem.js";
+import { SelectItem } from "./SelectItem.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/select/SelectRadioItem.tsx
+const SelectRadioItem = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		asChild: true,
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsx(ListboxRadioItem, { children })
+	});
+});
 SelectRadioItem.displayName = "@optiaxiom/react/SelectRadioItem";
-
+//#endregion
 export { SelectRadioItem };