@xaui/native 0.9.1-alpha.38 → 0.9.1-alpha.39

package/dist/{chunk-ZNZ7HVRW.js → chunk-JKP4TPIL.js}

@@ -1,4 +1,6 @@
-import { Portal, PortalContext } from "./chunk-2PMXMKS5.js";
+import { useAnchoredPosition } from "./chunk-2EGR4LWD.js";
+import { Portal } from "./chunk-2PMXMKS5.js";
+import { INDICATOR_ROTATION, INDICATOR_SPRING, anchoredEntering, anchoredExiting, overlayEntering, overlayExiting } from "./chunk-64MXEVT3.js";
 import { useMergedRef } from "./chunk-NCTOTTVW.js";
 import { ChevronDownIcon, Icon, IconContext } from "./chunk-FHUYHV6J.js";
 import { useControllableState } from "./chunk-F6W3JQ7K.js";
@@ -10,91 +12,22 @@ import { useXAUITheme } from "./chunk-A3EGFI6T.js";
 import { useStyleProps } from "./chunk-M63GFNKV.js";
 
 // src/components/select/select-content.tsx
-import { forwardRef as forwardRef3, useContext, useEffect as useEffect2, useState } from "react";
-import { ScrollView, useWindowDimensions } from "react-native";
+import { forwardRef as forwardRef3 } from "react";
+import { ScrollView } from "react-native";
 import Animated from "react-native-reanimated";
 
-// src/components/select/select.context.ts
-var [SelectProvider, useSelect] = createSlotContext("Select");
-var [SelectItemProvider, useSelectItem] = createSlotContext("Select.Item");
-
-// src/components/select/select.animation.ts
-import { Easing, Keyframe } from "react-native-reanimated";
-var INDICATOR_SPRING = {
-  damping: 140,
-  stiffness: 1e3,
-  mass: 4
-};
-var INDICATOR_ROTATION = [0, -180];
-var ENTER_MS = 200;
-var EXIT_MS = 150;
-function contentEntering(placement) {
-  const from = placement === "bottom" ? -8 : 8;
-  return new Keyframe({
-    0: {
-      opacity: 0,
-      transform: [{
-        translateY: from
-      }, {
-        scale: 0.95
-      }]
-    },
-    100: {
-      opacity: 1,
-      transform: [{
-        translateY: 0
-      }, {
-        scale: 1
-      }],
-      easing: Easing.out(Easing.cubic)
-    }
-  }).duration(ENTER_MS);
-}
-function contentExiting(placement) {
-  const to = placement === "bottom" ? -8 : 8;
-  return new Keyframe({
-    0: {
-      opacity: 1,
-      transform: [{
-        translateY: 0
-      }, {
-        scale: 1
-      }]
-    },
-    100: {
-      opacity: 0,
-      transform: [{
-        translateY: to
-      }, {
-        scale: 0.95
-      }],
-      easing: Easing.in(Easing.cubic)
-    }
-  }).duration(EXIT_MS);
-}
-var overlayEntering = new Keyframe({
-  0: {
-    opacity: 0
-  },
-  100: {
-    opacity: 1
-  }
-}).duration(ENTER_MS);
-var overlayExiting = new Keyframe({
-  0: {
-    opacity: 1
-  },
-  100: {
-    opacity: 0
-  }
-}).duration(EXIT_MS);
-
 // src/components/select/select-item.tsx
 import { forwardRef as forwardRef2, useCallback, useEffect, useMemo } from "react";
 
 // src/components/select/select-item-label.tsx
 import { forwardRef } from "react";
 import { Text } from "react-native";
+
+// src/components/select/select.context.ts
+var [SelectProvider, useSelect] = createSlotContext("Select");
+var [SelectItemProvider, useSelectItem] = createSlotContext("Select.Item");
+
+// src/components/select/select-item-label.tsx
 import { jsx } from "react/jsx-runtime";
 var SelectItemLabel = forwardRef(function SelectItemLabel2({
   children,
@@ -191,70 +124,6 @@ SelectItem.displayName = "XAUI.Select.Item";
 
 // src/components/select/select.utils.ts
 import { Children, isValidElement } from "react";
-function resolvePlacement(input) {
-  const {
-    anchor,
-    content,
-    window,
-    offset,
-    alignOffset,
-    insets
-  } = input;
-  const available = window.width - insets.start - insets.end;
-  const width = Math.min(resolveWidth(input), Math.max(available, 0));
-  const placement = choosePlacement(input);
-  const maxHeight = Math.max(roomFor(placement, input), 0);
-  const height = Math.min(content.height, maxHeight);
-  const top = placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height;
-  const start = clamp(alignedStart(input, width) + alignOffset, insets.start, Math.max(window.width - insets.end - width, insets.start));
-  return {
-    top,
-    start,
-    width,
-    maxHeight,
-    placement
-  };
-}
-function resolveWidth({
-  width,
-  anchor,
-  content
-}) {
-  if (width === "trigger") return anchor.width;
-  if (width === "content-fit") return content.width;
-  return width;
-}
-function choosePlacement(input) {
-  const {
-    placement,
-    avoidCollisions,
-    content
-  } = input;
-  if (!avoidCollisions) return placement;
-  if (roomFor(placement, input) >= content.height) return placement;
-  const other = placement === "bottom" ? "top" : "bottom";
-  return roomFor(other, input) > roomFor(placement, input) ? other : placement;
-}
-function roomFor(placement, input) {
-  const {
-    anchor,
-    window,
-    offset,
-    insets
-  } = input;
-  return placement === "bottom" ? window.height - insets.bottom - (anchor.y + anchor.height) - offset : anchor.y - insets.top - offset;
-}
-function alignedStart({
-  align,
-  anchor
-}, width) {
-  if (align === "start") return anchor.x;
-  if (align === "end") return anchor.x + anchor.width - width;
-  return anchor.x + (anchor.width - width) / 2;
-}
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
 function collectItemLabels(children, isItem) {
   const found = [];
   const walk = node => {
@@ -274,19 +143,16 @@ function collectItemLabels(children, isItem) {
 }
 
 // src/components/select/select-content.tsx
+import { useEffect as useEffect2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var DEFAULT_OFFSET = 8;
-var ZERO = {
-  x: 0,
-  y: 0
-};
-var isSelectItem = type => type === SelectItem;
 var DEFAULT_INSETS = {
   top: 12,
   bottom: 12,
   start: 12,
   end: 12
 };
+var isSelectItem = type => type === SelectItem;
 var SelectContent = forwardRef3(function SelectContent2({
   children,
   placement = "bottom",
@@ -304,48 +170,17 @@ var SelectContent = forwardRef3(function SelectContent2({
   const {
     contentStyle,
     isOpen,
-    anchor
+    anchor,
+    registerLabel
   } = context;
   const [styleProps, rest] = useStyleProps(props);
-  const window = useWindowDimensions();
-  const origin = useContext(PortalContext)?.origin ?? ZERO;
-  const [measured, setMeasured] = useState(null);
   const {
-    registerLabel
-  } = context;
-  useEffect2(() => {
-    for (const [value, label] of collectItemLabels(children, isSelectItem)) {
-      registerLabel(value, label);
-    }
-  }, [children, registerLabel]);
-  if (!isOpen && measured !== null) setMeasured(null);
-  if (!isOpen || anchor === null) return null;
-  const measure = event => {
-    onLayout?.(event);
-    const {
-      width: w,
-      height: h
-    } = event.nativeEvent.layout;
-    if (measured === null || measured.height !== h || measured.width !== w) {
-      setMeasured({
-        width: w,
-        height: h
-      });
-    }
-  };
-  const local = {
-    ...anchor,
-    x: anchor.x - origin.x,
-    y: anchor.y - origin.y
-  };
-  const position = measured && resolvePlacement({
-    anchor: local,
-    content: measured,
-    // The window in the host's own coordinates, for the same reason as the anchor.
-    window: {
-      width: window.width - origin.x,
-      height: window.height - origin.y
-    },
+    position,
+    onContentLayout,
+    measuringStyle
+  } = useAnchoredPosition({
+    anchor,
+    isOpen,
     placement,
     align,
     width,
@@ -355,26 +190,25 @@ var SelectContent = forwardRef3(function SelectContent2({
     insets: {
       ...DEFAULT_INSETS,
       ...insets
-    }
+    },
+    onLayout
   });
+  useEffect2(() => {
+    for (const [value, label] of collectItemLabels(children, isSelectItem)) {
+      registerLabel(value, label);
+    }
+  }, [children, registerLabel]);
+  if (!isOpen || anchor === null) return null;
   return /* @__PURE__ */jsx3(Portal, {
     children: /* @__PURE__ */jsx3(SelectProvider, {
       value: context,
       children: /* @__PURE__ */jsx3(Animated.View, {
         ref,
-        entering: position ? contentEntering(position.placement) : void 0,
-        exiting: position ? contentExiting(position.placement) : void 0,
-        onLayout: measure,
+        entering: position ? anchoredEntering(position.placement) : void 0,
+        exiting: position ? anchoredExiting(position.placement) : void 0,
+        onLayout: onContentLayout,
         ...rest,
-        style: [contentStyle,
-        // The measuring pass: laid out at the trigger's width so the rows wrap as they
-        // finally will, and invisible so the reader never sees it at the wrong place.
-        position === null ? {
-          opacity: 0,
-          top: 0,
-          start: 0,
-          width: local.width
-        } : {
+        style: [contentStyle, position === null ? measuringStyle : {
           top: position.top,
           start: position.start,
           width: position.width,
@@ -396,10 +230,10 @@ SelectContent.displayName = "XAUI.Select.Content";
 import { useEffect as useEffect3 } from "react";
 import Animated2, { interpolate, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
 import { jsx as jsx4 } from "react/jsx-runtime";
-const _worklet_1818497961394_init_data = {
-  code: "function chunkZNZ7HVRWJs1(){const{interpolate,progress,INDICATOR_ROTATION}=this.__closure;return{transform:[{rotate:interpolate(progress.get(),[0,1],[INDICATOR_ROTATION[0],INDICATOR_ROTATION[1]])+\"deg\"}]};}",
-  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZNZ7HVRW.js",
-  sourceMap: "{\"version\":3,\"names\":[\"chunkZNZ7HVRWJs1\",\"interpolate\",\"progress\",\"INDICATOR_ROTATION\",\"__closure\",\"transform\",\"rotate\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZNZ7HVRW.js\"],\"mappings\":\"AA0WoC,SAAAA,iBAAA,QAAAC,WAAA,CAAAC,QAAA,CAAAC,kBAAA,OAAAC,SAAA,OAAO,CACvCC,SAAS,CAAE,CACT,CACEC,MAAM,CAAKL,WAAW,CAACC,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACJ,kBAAkB,CAAC,CAAC,CAAC,CAAEA,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAChG,CAAC,CAEL,CAAC\",\"ignoreList\":[]}"
+const _worklet_11125272119572_init_data = {
+  code: "function chunkJKP4TPILJs1(){const{interpolate,progress,INDICATOR_ROTATION}=this.__closure;return{transform:[{rotate:interpolate(progress.get(),[0,1],[INDICATOR_ROTATION[0],INDICATOR_ROTATION[1]])+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-JKP4TPIL.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkJKP4TPILJs1\",\"interpolate\",\"progress\",\"INDICATOR_ROTATION\",\"__closure\",\"transform\",\"rotate\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-JKP4TPIL.js\"],\"mappings\":\"AAgRoC,SAAAA,iBAAA,QAAAC,WAAA,CAAAC,QAAA,CAAAC,kBAAA,OAAAC,SAAA,OAAO,CACvCC,SAAS,CAAE,CACT,CACEC,MAAM,CAAKL,WAAW,CAACC,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACJ,kBAAkB,CAAC,CAAC,CAAC,CAAEA,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAChG,CAAC,CAEL,CAAC\",\"ignoreList\":[]}"
 };
 function SelectIndicator({
   as = ChevronDownIcon,
@@ -413,30 +247,30 @@ function SelectIndicator({
   useEffect3(() => {
     progress.set(withSpring(isOpen ? 1 : 0, INDICATOR_SPRING));
   }, [isOpen, progress]);
-  const rotation = useAnimatedStyle(function chunkZNZ7HVRWJs1Factory({
-    _worklet_1818497961394_init_data,
+  const rotation = useAnimatedStyle(function chunkJKP4TPILJs1Factory({
+    _worklet_11125272119572_init_data,
     interpolate,
     progress,
     INDICATOR_ROTATION
   }) {
     const _e = [new global.Error(), -4, -27];
-    const chunkZNZ7HVRWJs1 = () => ({
+    const chunkJKP4TPILJs1 = () => ({
       transform: [{
         rotate: `${interpolate(progress.get(), [0, 1], [INDICATOR_ROTATION[0], INDICATOR_ROTATION[1]])}deg`
       }]
     });
-    chunkZNZ7HVRWJs1.__closure = {
+    chunkJKP4TPILJs1.__closure = {
       interpolate,
       progress,
       INDICATOR_ROTATION
     };
-    chunkZNZ7HVRWJs1.__workletHash = 1818497961394;
-    chunkZNZ7HVRWJs1.__pluginVersion = "0.7.4";
-    chunkZNZ7HVRWJs1.__initData = _worklet_1818497961394_init_data;
-    chunkZNZ7HVRWJs1.__stackDetails = _e;
-    return chunkZNZ7HVRWJs1;
+    chunkJKP4TPILJs1.__workletHash = 11125272119572;
+    chunkJKP4TPILJs1.__pluginVersion = "0.7.4";
+    chunkJKP4TPILJs1.__initData = _worklet_11125272119572_init_data;
+    chunkJKP4TPILJs1.__stackDetails = _e;
+    return chunkJKP4TPILJs1;
   }({
-    _worklet_1818497961394_init_data,
+    _worklet_11125272119572_init_data,
     interpolate,
     progress,
     INDICATOR_ROTATION
@@ -700,14 +534,14 @@ var SelectValue = forwardRef8(function SelectValue2({
 SelectValue.displayName = "XAUI.Select.Value";
 
 // src/components/select/select.tsx
-import { useCallback as useCallback4, useMemo as useMemo3, useState as useState3 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo3, useState as useState2 } from "react";
 import { StyleSheet } from "react-native";
 
 // src/components/select/select.hook.ts
-import { useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo2, useRef as useRef2, useState } from "react";
 function useLabelRegistry() {
   const labels = useRef2(/* @__PURE__ */new Map());
-  const [, force] = useState2(0);
+  const [, force] = useState(0);
   const registerLabel = useCallback3((value, label) => {
     if (labels.current.get(value) === label) return;
     labels.current.set(value, label);
@@ -995,7 +829,7 @@ function Select({
     labelFor,
     registerLabel
   } = useLabelRegistry();
-  const [anchor, setAnchor] = useState3(null);
+  const [anchor, setAnchor] = useState2(null);
   const [value, setValue] = useControllableState({
     value: controlledValue,
     defaultValue,

package/dist/chunk-LUPCPLND.cjs

@@ -0,0 +1,145 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkWDDXU3OHcjs = require('./chunk-WDDXU3OH.cjs');
+
+// src/hooks/use-anchored-position.ts
+var _react = require('react');
+var _reactnative = require('react-native');
+
+// src/utils/placement.ts
+var OPPOSITE = {
+  top: "bottom",
+  bottom: "top",
+  start: "end",
+  end: "start"
+};
+function axisOf(placement) {
+  return placement === "top" || placement === "bottom" ? "vertical" : "horizontal";
+}
+function resolvePlacement(input) {
+  const { anchor, content, window, offset, alignOffset, insets } = input;
+  const available = window.width - insets.start - insets.end;
+  const width = Math.min(resolveWidth(input), Math.max(available, 0));
+  const placement = choosePlacement(input);
+  const room = Math.max(roomFor(placement, input), 0);
+  const vertical = axisOf(placement) === "vertical";
+  const maxHeight = vertical ? room : Math.max(window.height - insets.top - insets.bottom, 0);
+  const height = Math.min(content.height, maxHeight);
+  const top = clamp(
+    vertical ? placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height : alignedCross(input, height) + alignOffset,
+    insets.top,
+    Math.max(window.height - insets.bottom - height, insets.top)
+  );
+  const start = clamp(
+    vertical ? alignedCross(input, width) + alignOffset : placement === "end" ? anchor.x + anchor.width + offset : anchor.x - offset - width,
+    insets.start,
+    Math.max(window.width - insets.end - width, insets.start)
+  );
+  return { top, start, width, maxHeight, placement };
+}
+function resolveWidth(input) {
+  const { width, anchor, content, placement, window, insets } = input;
+  if (width === "trigger") {
+    return axisOf(placement) === "vertical" ? anchor.width : content.width;
+  }
+  if (width === "full") return Math.max(window.width - insets.start - insets.end, 0);
+  if (width === "content-fit") return content.width;
+  return width;
+}
+function choosePlacement(input) {
+  const { placement, avoidCollisions, content } = input;
+  if (!avoidCollisions) return placement;
+  const wanted = axisOf(placement) === "vertical" ? content.height : content.width;
+  if (roomFor(placement, input) >= wanted) return placement;
+  const other = OPPOSITE[placement];
+  return roomFor(other, input) > roomFor(placement, input) ? other : placement;
+}
+function roomFor(placement, input) {
+  const { anchor, window, offset, insets } = input;
+  switch (placement) {
+    case "bottom":
+      return window.height - insets.bottom - (anchor.y + anchor.height) - offset;
+    case "top":
+      return anchor.y - insets.top - offset;
+    case "end":
+      return window.width - insets.end - (anchor.x + anchor.width) - offset;
+    case "start":
+      return anchor.x - insets.start - offset;
+  }
+}
+function alignedCross({ align, anchor, placement }, size) {
+  const vertical = axisOf(placement) === "vertical";
+  const origin = vertical ? anchor.x : anchor.y;
+  const extent = vertical ? anchor.width : anchor.height;
+  if (align === "start") return origin;
+  if (align === "end") return origin + extent - size;
+  return origin + (extent - size) / 2;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/hooks/use-anchored-position.ts
+function useAnchoredPosition({
+  anchor,
+  isOpen,
+  onLayout,
+  ...options
+}) {
+  const window = _reactnative.useWindowDimensions.call(void 0, );
+  const origin = _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, _chunkWDDXU3OHcjs.PortalContext), 'optionalAccess', _ => _.origin]), () => ( ZERO));
+  const [measured, setMeasured] = _react.useState.call(void 0, null);
+  const onContentLayout = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onLayout, 'optionalCall', _2 => _2(event)]);
+      const { width, height } = event.nativeEvent.layout;
+      setMeasured(
+        (current) => current !== null && current.width === width && current.height === height ? current : { width, height }
+      );
+    },
+    [onLayout]
+  );
+  if (!isOpen && measured !== null) setMeasured(null);
+  const local = anchor && {
+    ...anchor,
+    x: anchor.x - origin.x,
+    y: anchor.y - origin.y
+  };
+  const position = local && measured ? resolvePlacement({
+    anchor: local,
+    content: measured,
+    window: {
+      width: window.width - origin.x,
+      height: window.height - origin.y
+    },
+    ...options
+  }) : null;
+  return {
+    position,
+    onContentLayout,
+    measuringStyle: {
+      // Invisible, and at the start of the host, so the reader never sees the panel at
+      // the wrong place during the frame it is being measured in.
+      opacity: 0,
+      top: 0,
+      start: 0,
+      ...measuringWidth(options, _optionalChain([local, 'optionalAccess', _3 => _3.width]), window)
+    }
+  };
+}
+function measuringWidth({
+  width,
+  maxWidth,
+  insets
+}, anchorWidth, window) {
+  const screen = Math.max(window.width - insets.start - insets.end, 0);
+  if (width === "trigger") return { width: anchorWidth };
+  if (width === "full") return { width: screen };
+  if (typeof width === "number") return { width };
+  return { maxWidth: Math.min(_nullishCoalesce(maxWidth, () => ( Number.POSITIVE_INFINITY)), screen) };
+}
+var ZERO = { x: 0, y: 0 };
+
+
+
+exports.useAnchoredPosition = useAnchoredPosition;