@multiplatform.one/forms 7.66.0 → 7.68.0

package/dist/jsx/fields/Select/SheetPickerRow.mjs

@@ -0,0 +1,129 @@
+import { keyboardFocusRingProps, useGlyphColor } from "@multiplatform.one/theme";
+import { CaretRightIcon } from "@phosphor-icons/react";
+import { useId, useLayoutEffect, useEffect } from "react";
+import { Pressable } from "react-native-web";
+import { isWeb, Text, View, XStack } from "tamagui";
+import { useFieldDescribedBy } from "../../fieldLayout.mjs";
+import { formInputColors } from "../../shared/colorRamps.mjs";
+import { useSheetPageOpen } from "../../shared/sheetNavigation.mjs";
+import { InlineChoices } from "./InlineChoices.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function SheetPickerRow({
+  store,
+  label,
+  options,
+  value,
+  placeholder,
+  onValueChange,
+  onBlur,
+  disabled,
+  id,
+  knobProps,
+  markColor
+}) {
+  const pageId = `sheet-picker-${useId()}`;
+  const pushed = useSheetPageOpen(store, pageId);
+  const describedBy = useFieldDescribedBy();
+  const current = options.find(option => option.value === value);
+  const textColor = knobProps.textAccentColor;
+  const chevronInk = useGlyphColor("$textMuted");
+  const page = {
+    id: pageId,
+    title: label,
+    content: /* @__PURE__ */jsx(InlineChoices, {
+      options,
+      value,
+      onValueChange,
+      disabled,
+      "aria-label": label,
+      knobProps,
+      markColor
+    })
+  };
+  useIsoLayoutEffect(() => {
+    if (pushed) store.update(page);
+  });
+  useEffect(() => () => store.remove(pageId), [store, pageId]);
+  const open = () => {
+    if (disabled) return;
+    store.push(page);
+  };
+  const row = /* @__PURE__ */jsxs(XStack, {
+    alignItems: "center",
+    minHeight: knobProps.menuRow.minHeight,
+    paddingHorizontal: knobProps.panelPadding.padding,
+    ...knobProps.gap,
+    pointerEvents: "none",
+    children: [/* @__PURE__ */jsx(Text, {
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      color: textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: label
+    }), /* @__PURE__ */jsx(Text, {
+      testID: "sheet-picker-value",
+      fontFamily: knobProps.body.fontFamily,
+      color: "$textMuted",
+      numberOfLines: 1,
+      flexShrink: 1,
+      children: current?.label ?? placeholder
+    }), /* @__PURE__ */jsx(CaretRightIcon, {
+      size: 14,
+      weight: "bold",
+      color: chevronInk
+    })]
+  });
+  const surface = {
+    ...knobProps.borderRadius,
+    borderColor: formInputColors.border.base,
+    backgroundColor: formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    opacity: disabled ? 0.5 : 1
+  };
+  if (isWeb) {
+    return /* @__PURE__ */jsx(View, {
+      id,
+      role: "button",
+      "aria-label": label,
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled || void 0,
+      "data-testid": "sheet-picker-row",
+      tabIndex: disabled ? -1 : 0,
+      cursor: disabled ? "default" : "pointer",
+      onPress: open,
+      onKeyDown: event => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          open();
+        }
+      },
+      onBlur,
+      outlineWidth: 0,
+      focusVisibleStyle: keyboardFocusRingProps,
+      ...surface,
+      children: row
+    });
+  }
+  return /* @__PURE__ */jsx(View, {
+    ...surface,
+    children: /* @__PURE__ */jsx(Pressable, {
+      testID: "sheet-picker-row",
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: current?.label ?? placeholder ?? ""
+      },
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      disabled,
+      onPress: open,
+      children: row
+    })
+  });
+}
+export { SheetPickerRow };
+//# sourceMappingURL=SheetPickerRow.mjs.map

package/dist/jsx/fields/Select/SheetPickerRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["keyboardFocusRingProps","useGlyphColor","CaretRightIcon","useId","useLayoutEffect","useEffect","Pressable","isWeb","Text","View","XStack","useFieldDescribedBy","formInputColors","useSheetPageOpen","InlineChoices","jsx","jsxs","useIsoLayoutEffect","window","SheetPickerRow","store","label","options","value","placeholder","onValueChange","onBlur","disabled","id","knobProps","markColor","pageId","pushed","describedBy","current","find","option","textColor","textAccentColor","chevronInk","page","title","content","update","remove","open","push","row","alignItems","minHeight","menuRow","paddingHorizontal","panelPadding","padding","gap","pointerEvents","children","fontFamily","body","fontWeight","color","numberOfLines","flex","testID","flexShrink","size","weight","surface","borderRadius","borderColor","border","base","backgroundColor","background","overflow","width","opacity","role","tabIndex","cursor","onPress","onKeyDown","event","key","preventDefault","outlineWidth","focusVisibleStyle","accessibilityRole","accessibilityLabel","accessibilityValue","text","accessibilityState"],"sources":["../../../../src/fields/Select/SheetPickerRow.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Select/SheetPickerRow.native.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SheetPickerRow_exports = {};
+__export(SheetPickerRow_exports, {
+  SheetPickerRow: () => SheetPickerRow
+});
+module.exports = __toCommonJS(SheetPickerRow_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_native = require("react-native");
+var import_tamagui = require("tamagui");
+var import_fieldLayout = require("../../fieldLayout.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
+var import_sheetNavigation = require("../../shared/sheetNavigation.native.js");
+var import_InlineChoices = require("./InlineChoices.native.js");
+var useIsoLayoutEffect = typeof window === "undefined" ? import_react2.useEffect : import_react2.useLayoutEffect;
+function SheetPickerRow(param) {
+  var {
+    store,
+    label,
+    options,
+    value,
+    placeholder,
+    onValueChange,
+    onBlur,
+    disabled,
+    id,
+    knobProps,
+    markColor
+  } = param;
+  var _ref, _ref1, _ref2;
+  var pageId = `sheet-picker-${(0, import_react2.useId)()}`;
+  var pushed = (0, import_sheetNavigation.useSheetPageOpen)(store, pageId);
+  var describedBy = (0, import_fieldLayout.useFieldDescribedBy)();
+  var current = options.find(function (option) {
+    return option.value === value;
+  });
+  var textColor = knobProps.textAccentColor;
+  var chevronInk = (0, import_theme.useGlyphColor)("$textMuted");
+  var page = {
+    id: pageId,
+    title: label,
+    content: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InlineChoices.InlineChoices, {
+      options,
+      value,
+      onValueChange,
+      disabled,
+      "aria-label": label,
+      knobProps,
+      markColor
+    })
+  };
+  useIsoLayoutEffect(function () {
+    if (pushed) store.update(page);
+  });
+  (0, import_react2.useEffect)(function () {
+    return function () {
+      return store.remove(pageId);
+    };
+  }, [store, pageId]);
+  var open = function open2() {
+    if (disabled) return;
+    store.push(page);
+  };
+  var row = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    alignItems: "center",
+    minHeight: knobProps.menuRow.minHeight,
+    paddingHorizontal: knobProps.panelPadding.padding,
+    ...knobProps.gap,
+    pointerEvents: "none",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontFamily: knobProps.body.fontFamily,
+      fontWeight: knobProps.body.fontWeight,
+      color: textColor,
+      numberOfLines: 1,
+      flex: 1,
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      testID: "sheet-picker-value",
+      fontFamily: knobProps.body.fontFamily,
+      color: "$textMuted",
+      numberOfLines: 1,
+      flexShrink: 1,
+      children: (_ref = current === null || current === void 0 ? void 0 : current.label) !== null && _ref !== void 0 ? _ref : placeholder
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretRightIcon, {
+      size: 14,
+      weight: "bold",
+      color: chevronInk
+    })]
+  });
+  var surface = {
+    ...knobProps.borderRadius,
+    borderColor: import_colorRamps.formInputColors.border.base,
+    backgroundColor: import_colorRamps.formInputColors.background.base,
+    overflow: "hidden",
+    width: "100%",
+    opacity: disabled ? 0.5 : 1
+  };
+  if (import_tamagui.isWeb) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      id,
+      role: "button",
+      "aria-label": label,
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled || void 0,
+      "data-testid": "sheet-picker-row",
+      tabIndex: disabled ? -1 : 0,
+      cursor: disabled ? "default" : "pointer",
+      onPress: open,
+      onKeyDown: function onKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          open();
+        }
+      },
+      onBlur,
+      outlineWidth: 0,
+      focusVisibleStyle: import_theme.keyboardFocusRingProps,
+      ...surface,
+      children: row
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+    ...surface,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+      testID: "sheet-picker-row",
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityValue: {
+        text: (_ref1 = (_ref2 = current === null || current === void 0 ? void 0 : current.label) !== null && _ref2 !== void 0 ? _ref2 : placeholder) !== null && _ref1 !== void 0 ? _ref1 : ""
+      },
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      disabled,
+      onPress: open,
+      children: row
+    })
+  });
+}
+//# sourceMappingURL=SheetPickerRow.native.js.map

package/dist/jsx/fields/Select/SheetPickerRow.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","SheetPickerRow_exports","SheetPickerRow","module","exports","import_jsx_runtime","require","import_theme","import_react","import_react2","import_react_native","import_tamagui","import_fieldLayout","import_colorRamps","import_sheetNavigation","import_InlineChoices","useIsoLayoutEffect","window","useEffect","useLayoutEffect","param","store","label","options","placeholder","onValueChange","onBlur","disabled","id","knobProps","markColor","_ref","_ref1","_ref2","pageId","useId","pushed","useSheetPageOpen","describedBy","useFieldDescribedBy","current","find","option","textColor","textAccentColor","chevronInk","useGlyphColor","page","title","content","jsx","InlineChoices","update","remove","open","open2","push","row","jsxs","XStack","alignItems","minHeight","menuRow","paddingHorizontal","panelPadding","padding","gap","pointerEvents","children","Text","fontFamily","body","fontWeight","color","numberOfLines","flex","testID","flexShrink","CaretRightIcon","size","weight","surface","borderRadius","borderColor","formInputColors","border","base","backgroundColor","background","overflow","width","opacity","isWeb","View","role","tabIndex","cursor","onPress","onKeyDown","event","preventDefault","outlineWidth","focusVisibleStyle","keyboardFocusRingProps","Pressable"],"sources":["../../../../src/fields/Select/SheetPickerRow.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/Select/index.mjs

@@ -18,6 +18,7 @@ import { ScrollArrow } from "../../shared/floatingList.mjs";
 import { FloatingPanel, useFloatingPanel, panelViewportPadding, useViewportGtSm } from "../../FloatingPanel/index.mjs";
 import { pickerCompactFace, resolveCompactFace } from "../../FloatingPanel/compactFace.mjs";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal.mjs";
+import { fixedContainingBlockOrigin } from "../../FloatingPanel/containingBlock.mjs";
 import { useInsideOverlay, useOverlayZIndex } from "../../shared/overlayStack.mjs";
 import { useDragScroll } from "../../shared/useDragScroll.mjs";
 import { useIsInTableCell } from "../../shared/tableCellContext.mjs";
@@ -25,7 +26,9 @@ import { t } from "../../shared/t.mjs";
 import { orderOptionsBySelected } from "../selectedOrder.mjs";
 import { shouldUseIosNativeSelect } from "../nativeSelect.mjs";
 import { InlineChoices } from "./InlineChoices.mjs";
-import { shouldInlineChoices } from "./shouldInlineChoices.mjs";
+import { SheetPickerRow } from "./SheetPickerRow.mjs";
+import { opensBesideTrigger, shouldInlineChoices, shouldPushChoices } from "./shouldInlineChoices.mjs";
+import { useSheetNavigation } from "../../shared/sheetNavigation.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const actionSheetIOS = ReactNative.ActionSheetIOS;
 const selectOutlineRest = {
@@ -342,6 +345,7 @@ function FloatingSelectCore({
   } = knobProps.elevatedSurface;
   const hydrationTouch = useTouchSurface();
   const inTableCell = useIsInTableCell();
+  const beside = useInsideOverlay() && !inTableCell && opensBesideTrigger(options.length);
   const describedBy = useFieldDescribedBy();
   const glyphColor = useGlyphColor();
   const [open, setOpen] = useState(false);
@@ -458,7 +462,30 @@ function FloatingSelectCore({
     const selectedItemIndex = selectedIndex >= 0 ? selectedIndex : 0;
     const selectedItem = listItemsRef.current[selectedItemIndex];
     const trigger = panel.triggerRef.current;
-    if (!dropdownElement || !selectedItem || !trigger) return;
+    if (!dropdownElement || !trigger) return;
+    if (beside) {
+      const isInitial2 = panel.initializingRef.current;
+      if (isInitial2) dropdownElement.style.transition = "none";
+      const bounds = trigger.getBoundingClientRect();
+      const contentHeight = dropdownElement.scrollHeight;
+      const below = window.innerHeight - panelViewportPadding - bounds.bottom;
+      const above = bounds.top - panelViewportPadding;
+      const opensUp = contentHeight > below && above > below;
+      const maxHeight = Math.min(contentHeight || Infinity, opensUp ? above : below);
+      const top2 = (opensUp ? bounds.top - maxHeight : bounds.bottom) - fixedContainingBlockOrigin(dropdownElement).top;
+      dropdownElement.style.top = `${top2}px`;
+      dropdownElement.style.maxHeight = `${maxHeight}px`;
+      dropdownElement.style.height = "";
+      overlayStyle.current = {
+        top: top2,
+        maxHeight
+      };
+      panel.initializingRef.current = false;
+      void dropdownElement.offsetHeight;
+      if (isInitial2) dropdownElement.style.transition = panel.panelTransition;
+      return;
+    }
+    if (!selectedItem) return;
     const isInitial = panel.initializingRef.current;
     if (isInitial) dropdownElement.style.transition = "none";
     if (pinnedTopRef.current === 0 && pinnedHeightRef.current === 0) {
@@ -564,7 +591,7 @@ function FloatingSelectCore({
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length]);
+  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, panel.panelTransition, options.length, beside]);
   repositionRef.current = repositionOverlay;
   useLayoutEffect(() => {
     if (!open || !panel.mounted) return;
@@ -1207,6 +1234,10 @@ function NativeSelectCore({
     },
     sheet: true,
     compactFace,
+    ...(asMenu && insideOverlay && opensBesideTrigger(options.length) ? {
+      anchorMode: "attach",
+      triggerEcho: false
+    } : null),
     triggerA11y: {
       label: ariaLabel ?? fieldA11y?.label,
       value: triggerValueText,
@@ -1360,6 +1391,13 @@ function Select({
     multiple,
     options
   });
+  const sheetNavigation = useSheetNavigation();
+  const rowLabel = typeof label === "string" ? label : ariaLabel;
+  const pushed = !inline && !inTableCell && Boolean(rowLabel) && shouldPushChoices({
+    inSheet: Boolean(sheetNavigation),
+    multiple,
+    options
+  });
   if (!inline) {
     warnSelectTooFewOptions({
       count: options?.length ?? 0,
@@ -1418,6 +1456,25 @@ function Select({
   };
   const renderSelectContent = (selectValue, handleValueChange, handleBlur) => {
     if (readOnly) return renderReadOnly(selectValue);
+    if (pushed && sheetNavigation) {
+      return /* @__PURE__ */jsx(SheetPickerRow, {
+        store: sheetNavigation,
+        label: rowLabel,
+        options,
+        value: typeof selectValue === "string" ? selectValue : void 0,
+        placeholder,
+        onValueChange: val => {
+          if (disabled) return;
+          handleValueChange?.(val);
+          emitValueChange(val);
+        },
+        onBlur: handleBlur,
+        disabled,
+        id,
+        knobProps,
+        markColor
+      });
+    }
     if (inline) {
       return /* @__PURE__ */jsx(InlineChoices, {
         options,
@@ -1462,7 +1519,8 @@ function Select({
   if (!resolvedForm || !name) {
     return /* @__PURE__ */jsx(FieldLayout, {
       id,
-      label,
+      label: pushed ? void 0 : label,
+      "aria-label": pushed ? rowLabel : void 0,
       labelProps,
       error,
       helperText,
@@ -1486,7 +1544,8 @@ function Select({
       const resolvedError = getFieldError(field, error);
       return /* @__PURE__ */jsx(FieldLayout, {
         id,
-        label,
+        label: pushed ? void 0 : label,
+        "aria-label": pushed ? rowLabel : void 0,
         labelProps,
         error: resolvedError,
         helperText,