@webority/mobile-ui 0.109.4 → 0.109.5

package/dist/canvas-kit/kit.js

@@ -32429,8 +32429,8 @@ function TE(e) {
 		if (e < 0) return;
 		let t = Ve(v);
 		if (t) {
-			let e = w ? Math.max(t.pageY, T.value) : t.pageY, n = w ? Math.min(t.pageY + t.height, E.value) : t.pageY + t.height, r = Math.max(0, x.value - t.height);
-			N.value < e + 48 ? y.value > 0 ? Ue(v, 0, Math.max(0, y.value - 12), !1) : w && j.value > 0 && (j.value = Math.max(0, j.value - 12), He(k)(j.value)) : N.value > n - 48 && (y.value < r ? Ue(v, 0, Math.min(r, y.value + 12), !1) : w && j.value < O.value && (j.value = Math.min(O.value, j.value + 12), He(k)(j.value)));
+			let e = w ? Math.max(t.pageY, T.value) : t.pageY, n = w ? Math.min(t.pageY + t.height, E.value) : t.pageY + t.height, r = Math.max(0, x.value - t.height - 1);
+			N.value < e + 48 ? y.value > 1 ? Ue(v, 0, Math.max(0, y.value - 12), !1) : w && j.value > 0 && (j.value = Math.max(0, j.value - 12), He(k)(j.value)) : N.value > n - 48 && (y.value < r ? Ue(v, 0, Math.min(r, y.value + 12), !1) : w && j.value < O.value && (j.value = Math.min(O.value, j.value + 12), He(k)(j.value)));
 		}
 		F.value = M.value + y.value - b.value + D.value - A.value;
 		let n = xE(I.value, e, F.value);
@@ -36189,7 +36189,7 @@ var rO = Ft({
 		kind: "WeborityPhone",
 		library: {
 			name: "@webority/mobile-ui",
-			version: "0.109.4"
+			version: "0.109.5"
 		},
 		rendererProtocolVersion: 12,
 		platform: "Phone",

package/dist/canvas-kit/manifest.json

@@ -2,7 +2,7 @@
   "kind": "WeborityPhone",
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.109.4"
+    "version": "0.109.5"
   },
   "rendererProtocolVersion": 12,
   "platform": "Phone",

package/dist/canvas-kit/release.json

@@ -1,21 +1,21 @@
 {
   "name": "webority-phone",
-  "version": "0.109.4",
+  "version": "0.109.5",
   "platform": "Phone",
   "kitModuleVersion": 2,
   "rendererProtocolVersion": 12,
   "library": {
     "name": "@webority/mobile-ui",
-    "version": "0.109.4"
+    "version": "0.109.5"
   },
   "files": {
     "manifest.json": {
-      "sha256": "215b55d850940c1f68883d913e2779878a6b9abc85ee6a271f2baeb403a4c2bd",
+      "sha256": "50ccd70f3583a5a0471f8f4e17bb7eacfb61361aaad4ef8a64d99e5f13f103be",
       "bytes": 625850
     },
     "kit.js": {
-      "sha256": "f9094267670b4ed7a871879a0ff24f45883b6efd3f607dc36f568979d6b983e6",
-      "bytes": 5940174
+      "sha256": "3e8c1b1f2ac89cbf55fdec1224e4c3b95c94272fc44d88a6b98a7e8c536c096c",
+      "bytes": 5940178
     },
     "kit.css": {
       "sha256": "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",

package/lib/commonjs/components/SortableList/SortableList.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DEFAULT_SORTABLE_LIST_LABELS=void 0,exports.SortableList=SortableList,exports.default=void 0,exports.dropIndex=dropIndex,exports.moveItem=moveItem,exports.rowShifts=rowShifts,exports.slotTop=slotTop,exports.topOf=topOf;var cache,_react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_ScrollHost=require("../Screen/ScrollHost.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var a,r,n=Object.defineProperty,l={__proto__:null,default:e};if(Object(e)!==e)return l;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,l)}for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=n&&Object.getOwnPropertyDescriptor(e,r))&&(a.get||a.set)?n(l,r,a):l[r]=e[r]);return l}const DEFAULT_SORTABLE_LIST_LABELS=exports.DEFAULT_SORTABLE_LIST_LABELS=Object.freeze({moveUp:"Move up",moveDown:"Move down"}),LONG_PRESS_MS=350,EDGE_PX=48,SCROLL_STEP_PX=12,SPRING_CONFIG={damping:22,stiffness:260,mass:1},ACTION_STEP={moveUp:-1,moveDown:1},noop=e=>{};function moveItem(e,t,a){const r=e.slice();if(t<0||t>=r.length)return r;const[n]=r.splice(t,1);return r.splice(a,0,n),r}function topOf(e,t){"worklet";let a=0;for(let r=0;r<t;r++)a+=e[r]??0;return a}function slotTop(e,t,a){"worklet";let r=0,n=0;for(let l=0;l<e.length&&n<a;l++)l!==t&&(r+=e[l]??0,n++);return r}function dropIndex(e,t,a){"worklet";const r=topOf(e,t)+(e[t]??0)/2+a;let n=0,l=0;for(let a=0;a<e.length;a++){const i=e[a]??0;a!==t&&l+i/2<r&&n++,l+=i}return n}function rowShifts(e,t,a){const r=[];let n=0;for(const t of e)r.push(n),n+=t;const l=e.map(()=>0),i=moveItem(e.map((e,t)=>t),t,a);let o=0;for(const t of i)l[t]=o-(r[t]??0),o+=e[t]??0;return l}const buildStyles=e=>_reactNative.StyleSheet.create({handleRow:{flexDirection:"row",alignItems:"center"},handle:{paddingHorizontal:e.space.sm,paddingVertical:e.space.md,gap:e.space.xxs},bar:{width:e.space.md,height:e.space.xxs,backgroundColor:e.colors["text-muted"]},body:{flex:1}});function SortableRow({rowKey:e,index:t,count:a,shift:r,isActive:n,dragging:l,handle:i,disabled:o,shared:s,callbacks:c,labels:u,children:d}){const v=(0,_index.useTheme)(),_=(0,_react.useMemo)(()=>buildStyles(v),[v]),m=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(()=>{m.value=l&&!n?(0,_reactNativeReanimated.withSpring)(r,SPRING_CONFIG):r},[l,n,r,m]),(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(m)},[m]);const h=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateY:n?s.dragY.value:m.value}],zIndex:n?1:0})),S=(0,_react.useMemo)(()=>{const{dragIndex:e,dropTo:a,dragY:r,translation:n,absoluteY:l,scrollY:u,scrollStart:d,hostOffset:v,hostStart:_,hostTarget:m,heights:h}=s,{onLift:S,onDrop:f,onSettled:p}=c,R=_reactNativeGestureHandler.Gesture.Pan().enabled(!o).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=u.value,_.value=v.value,m.value=v.value,n.value=0,r.value=0,(0,_reactNativeReanimated.runOnJS)(S)(t)}).onUpdate(a=>{"worklet";e.value===t&&(n.value=a.translationY,l.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const n=a.value,l=h.value;e.value=-1,r.value=topOf(l,t)+r.value-slotTop(l,t,n),r.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG,e=>{"worklet";e&&(0,_reactNativeReanimated.runOnJS)(p)()}),(0,_reactNativeReanimated.runOnJS)(f)(t,n)});return i?R:R.activateAfterLongPress(350)},[o,i,t,c,s]),f=o?[]:[...t>0?[{name:"moveUp",label:u.moveUp}]:[],...t<a-1?[{name:"moveDown",label:u.moveDown}]:[]];return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:h,onLayout:t=>c.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:f,onAccessibilityAction:e=>{if(o)return;const r=t+(ACTION_STEP[e.nativeEvent.actionName]??0);r!==t&&r>=0&&r<a&&c.onMove(t,r)},testID:`sortable-row-${e}`,children:i?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_.handleRow,children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:S,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_.handle,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.bar}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.bar}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.bar})]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.body,children:d})]}):(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:S,children:(0,_jsxRuntime.jsx)(_reactNative.View,{children:d})})})}function SortableList(e){const{data:t,keyExtractor:a,renderItem:r,onReorder:n,handle:l=!1,disabled:i=!1,accessibilityLabel:o,labels:s,testID:c}=e,u=(0,_react.useMemo)(()=>({...DEFAULT_SORTABLE_LIST_LABELS,...s}),[s]),d=(0,_react.useMemo)(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),v=(0,_react.useMemo)(()=>d.map(e=>e.key),[d]),_=(0,_reactNativeReanimated.useAnimatedRef)(),m=(0,_reactNativeReanimated.useSharedValue)(0),h=(0,_reactNativeReanimated.useSharedValue)(0),S=(0,_reactNativeReanimated.useSharedValue)(0),f=(0,_ScrollHost.useScrollHost)(),p=(0,_reactNativeReanimated.useSharedValue)(0),R=null!==f,g=f?.top??p,x=f?.bottom??p,N=f?.offset??p,b=f?.maxOffset??p,L=f?.scrollTo??noop,w=(0,_reactNativeReanimated.useSharedValue)(0),O=(0,_reactNativeReanimated.useSharedValue)(0),y=(0,_reactNativeReanimated.useSharedValue)(0),E=(0,_reactNativeReanimated.useSharedValue)(0),j=(0,_reactNativeReanimated.useSharedValue)(-1),T=(0,_reactNativeReanimated.useSharedValue)(-1),k=(0,_reactNativeReanimated.useSharedValue)(0),I=(0,_reactNativeReanimated.useSharedValue)([]),A=(0,_react.useRef)(new Map),P=(0,_react.useRef)(v),[M,V]=(0,_react.useState)(null),C=(0,_react.useCallback)(()=>{I.value=P.current.map(e=>A.current.get(e)??0)},[I]);(0,_react.useEffect)(()=>{P.current=v,C()},[v,C]),(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(k)},[k]);const D=(0,_react.useCallback)(e=>{V(t=>t?.dragging?{...t,to:e}:t)},[]),G=(0,_reactNativeReanimated.useFrameCallback)(()=>{"worklet";const e=j.value;if(e<0)return;const t=(0,_reactNativeReanimated.measure)(_);if(t){const e=R?Math.max(t.pageY,g.value):t.pageY,a=R?Math.min(t.pageY+t.height,x.value):t.pageY+t.height,r=Math.max(0,S.value-t.height);E.value<e+EDGE_PX?m.value>0?(0,_reactNativeReanimated.scrollTo)(_,0,Math.max(0,m.value-SCROLL_STEP_PX),!1):R&&O.value>0&&(O.value=Math.max(0,O.value-SCROLL_STEP_PX),(0,_reactNativeReanimated.runOnJS)(L)(O.value)):E.value>a-EDGE_PX&&(m.value<r?(0,_reactNativeReanimated.scrollTo)(_,0,Math.min(r,m.value+SCROLL_STEP_PX),!1):R&&O.value<b.value&&(O.value=Math.min(b.value,O.value+SCROLL_STEP_PX),(0,_reactNativeReanimated.runOnJS)(L)(O.value)))}k.value=y.value+m.value-h.value+N.value-w.value;const a=dropIndex(I.value,e,k.value);a!==T.value&&(T.value=a,(0,_reactNativeReanimated.runOnJS)(D)(a))},!1),Y=(0,_react.useCallback)(e=>{(0,_index2.triggerHaptic)("longPress"),G.setActive(!0),V({key:v[e]??"",from:e,to:e,dragging:!0})},[G,v]),H=(0,_react.useCallback)((e,t)=>{G.setActive(!1),V(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&n(moveItem(v,e,t))},[G,v,n]),q=(0,_react.useCallback)(()=>{V(e=>e&&!e.dragging?null:e)},[]),F=(0,_react.useCallback)((e,t)=>{n(moveItem(v,e,t))},[v,n]),U=(0,_react.useCallback)((e,t)=>{A.current.set(e,t),C()},[C]),B=(0,_reactNativeReanimated.useAnimatedScrollHandler)({onScroll:e=>{"worklet";m.value=e.contentOffset.y}}),X=(0,_react.useCallback)((e,t)=>{S.value=t},[S]),J=(0,_react.useMemo)(()=>({scrollRef:_,scrollY:m,scrollStart:h,hostOffset:N,hostStart:w,hostTarget:O,translation:y,absoluteY:E,dragIndex:j,dropTo:T,dragY:k,heights:I}),[_,m,h,N,w,O,y,E,j,T,k,I]),z=(0,_react.useMemo)(()=>({onLift:Y,onDrop:H,onSettled:q,onMove:F,onHeight:U}),[Y,H,q,F,U]),W=!0===M?.dragging,K=W&&M?rowShifts(v.map(e=>A.current.get(e)??0),M.from,M.to):null;return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView,{ref:_,onScroll:B,onContentSizeChange:X,scrollEventThrottle:16,scrollEnabled:!W,accessibilityLabel:o,testID:c,children:d.map((e,t)=>{const a=M?.key===e.key;return(0,_jsxRuntime.jsx)(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:K?.[t]??0,isActive:a,dragging:W,handle:l,disabled:i,shared:J,callbacks:z,labels:u,children:r({item:e.item,index:t,isActive:a})},e.key)})})}SortableList.displayName="SortableList";var _default=exports.default=SortableList;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.DEFAULT_SORTABLE_LIST_LABELS=void 0,exports.SortableList=SortableList,exports.default=void 0,exports.dropIndex=dropIndex,exports.moveItem=moveItem,exports.rowShifts=rowShifts,exports.slotTop=slotTop,exports.topOf=topOf;var cache,_react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_ScrollHost=require("../Screen/ScrollHost.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var a,r,n=Object.defineProperty,l={__proto__:null,default:e};if(Object(e)!==e)return l;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,l)}for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=n&&Object.getOwnPropertyDescriptor(e,r))&&(a.get||a.set)?n(l,r,a):l[r]=e[r]);return l}const DEFAULT_SORTABLE_LIST_LABELS=exports.DEFAULT_SORTABLE_LIST_LABELS=Object.freeze({moveUp:"Move up",moveDown:"Move down"}),LONG_PRESS_MS=350,EDGE_PX=48,SCROLL_STEP_PX=12,SCROLL_SLACK_PX=1,SPRING_CONFIG={damping:22,stiffness:260,mass:1},ACTION_STEP={moveUp:-1,moveDown:1},noop=e=>{};function moveItem(e,t,a){const r=e.slice();if(t<0||t>=r.length)return r;const[n]=r.splice(t,1);return r.splice(a,0,n),r}function topOf(e,t){"worklet";let a=0;for(let r=0;r<t;r++)a+=e[r]??0;return a}function slotTop(e,t,a){"worklet";let r=0,n=0;for(let l=0;l<e.length&&n<a;l++)l!==t&&(r+=e[l]??0,n++);return r}function dropIndex(e,t,a){"worklet";const r=topOf(e,t)+(e[t]??0)/2+a;let n=0,l=0;for(let a=0;a<e.length;a++){const i=e[a]??0;a!==t&&l+i/2<r&&n++,l+=i}return n}function rowShifts(e,t,a){const r=[];let n=0;for(const t of e)r.push(n),n+=t;const l=e.map(()=>0),i=moveItem(e.map((e,t)=>t),t,a);let o=0;for(const t of i)l[t]=o-(r[t]??0),o+=e[t]??0;return l}const buildStyles=e=>_reactNative.StyleSheet.create({handleRow:{flexDirection:"row",alignItems:"center"},handle:{paddingHorizontal:e.space.sm,paddingVertical:e.space.md,gap:e.space.xxs},bar:{width:e.space.md,height:e.space.xxs,backgroundColor:e.colors["text-muted"]},body:{flex:1}});function SortableRow({rowKey:e,index:t,count:a,shift:r,isActive:n,dragging:l,handle:i,disabled:o,shared:s,callbacks:c,labels:u,children:d}){const v=(0,_index.useTheme)(),_=(0,_react.useMemo)(()=>buildStyles(v),[v]),m=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(()=>{m.value=l&&!n?(0,_reactNativeReanimated.withSpring)(r,SPRING_CONFIG):r},[l,n,r,m]),(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(m)},[m]);const S=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateY:n?s.dragY.value:m.value}],zIndex:n?1:0})),h=(0,_react.useMemo)(()=>{const{dragIndex:e,dropTo:a,dragY:r,translation:n,absoluteY:l,scrollY:u,scrollStart:d,hostOffset:v,hostStart:_,hostTarget:m,heights:S}=s,{onLift:h,onDrop:f,onSettled:p}=c,R=_reactNativeGestureHandler.Gesture.Pan().enabled(!o).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=u.value,_.value=v.value,m.value=v.value,n.value=0,r.value=0,(0,_reactNativeReanimated.runOnJS)(h)(t)}).onUpdate(a=>{"worklet";e.value===t&&(n.value=a.translationY,l.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const n=a.value,l=S.value;e.value=-1,r.value=topOf(l,t)+r.value-slotTop(l,t,n),r.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG,e=>{"worklet";e&&(0,_reactNativeReanimated.runOnJS)(p)()}),(0,_reactNativeReanimated.runOnJS)(f)(t,n)});return i?R:R.activateAfterLongPress(350)},[o,i,t,c,s]),f=o?[]:[...t>0?[{name:"moveUp",label:u.moveUp}]:[],...t<a-1?[{name:"moveDown",label:u.moveDown}]:[]];return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:S,onLayout:t=>c.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:f,onAccessibilityAction:e=>{if(o)return;const r=t+(ACTION_STEP[e.nativeEvent.actionName]??0);r!==t&&r>=0&&r<a&&c.onMove(t,r)},testID:`sortable-row-${e}`,children:i?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_.handleRow,children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:h,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:_.handle,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.bar}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.bar}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.bar})]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:_.body,children:d})]}):(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:h,children:(0,_jsxRuntime.jsx)(_reactNative.View,{children:d})})})}function SortableList(e){const{data:t,keyExtractor:a,renderItem:r,onReorder:n,handle:l=!1,disabled:i=!1,accessibilityLabel:o,labels:s,testID:c}=e,u=(0,_react.useMemo)(()=>({...DEFAULT_SORTABLE_LIST_LABELS,...s}),[s]),d=(0,_react.useMemo)(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),v=(0,_react.useMemo)(()=>d.map(e=>e.key),[d]),_=(0,_reactNativeReanimated.useAnimatedRef)(),m=(0,_reactNativeReanimated.useSharedValue)(0),S=(0,_reactNativeReanimated.useSharedValue)(0),h=(0,_reactNativeReanimated.useSharedValue)(0),f=(0,_ScrollHost.useScrollHost)(),p=(0,_reactNativeReanimated.useSharedValue)(0),R=null!==f,g=f?.top??p,x=f?.bottom??p,N=f?.offset??p,b=f?.maxOffset??p,L=f?.scrollTo??noop,w=(0,_reactNativeReanimated.useSharedValue)(0),O=(0,_reactNativeReanimated.useSharedValue)(0),y=(0,_reactNativeReanimated.useSharedValue)(0),E=(0,_reactNativeReanimated.useSharedValue)(0),j=(0,_reactNativeReanimated.useSharedValue)(-1),T=(0,_reactNativeReanimated.useSharedValue)(-1),k=(0,_reactNativeReanimated.useSharedValue)(0),A=(0,_reactNativeReanimated.useSharedValue)([]),I=(0,_react.useRef)(new Map),P=(0,_react.useRef)(v),[C,M]=(0,_react.useState)(null),V=(0,_react.useCallback)(()=>{A.value=P.current.map(e=>I.current.get(e)??0)},[A]);(0,_react.useEffect)(()=>{P.current=v,V()},[v,V]),(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(k)},[k]);const D=(0,_react.useCallback)(e=>{M(t=>t?.dragging?{...t,to:e}:t)},[]),G=(0,_reactNativeReanimated.useFrameCallback)(()=>{"worklet";const e=j.value;if(e<0)return;const t=(0,_reactNativeReanimated.measure)(_);if(t){const e=R?Math.max(t.pageY,g.value):t.pageY,a=R?Math.min(t.pageY+t.height,x.value):t.pageY+t.height,r=Math.max(0,h.value-t.height-SCROLL_SLACK_PX);E.value<e+EDGE_PX?m.value>SCROLL_SLACK_PX?(0,_reactNativeReanimated.scrollTo)(_,0,Math.max(0,m.value-SCROLL_STEP_PX),!1):R&&O.value>0&&(O.value=Math.max(0,O.value-SCROLL_STEP_PX),(0,_reactNativeReanimated.runOnJS)(L)(O.value)):E.value>a-EDGE_PX&&(m.value<r?(0,_reactNativeReanimated.scrollTo)(_,0,Math.min(r,m.value+SCROLL_STEP_PX),!1):R&&O.value<b.value&&(O.value=Math.min(b.value,O.value+SCROLL_STEP_PX),(0,_reactNativeReanimated.runOnJS)(L)(O.value)))}k.value=y.value+m.value-S.value+N.value-w.value;const a=dropIndex(A.value,e,k.value);a!==T.value&&(T.value=a,(0,_reactNativeReanimated.runOnJS)(D)(a))},!1),Y=(0,_react.useCallback)(e=>{(0,_index2.triggerHaptic)("longPress"),G.setActive(!0),M({key:v[e]??"",from:e,to:e,dragging:!0})},[G,v]),H=(0,_react.useCallback)((e,t)=>{G.setActive(!1),M(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&n(moveItem(v,e,t))},[G,v,n]),X=(0,_react.useCallback)(()=>{M(e=>e&&!e.dragging?null:e)},[]),q=(0,_react.useCallback)((e,t)=>{n(moveItem(v,e,t))},[v,n]),F=(0,_react.useCallback)((e,t)=>{I.current.set(e,t),V()},[V]),U=(0,_reactNativeReanimated.useAnimatedScrollHandler)({onScroll:e=>{"worklet";m.value=e.contentOffset.y}}),B=(0,_react.useCallback)((e,t)=>{h.value=t},[h]),J=(0,_react.useMemo)(()=>({scrollRef:_,scrollY:m,scrollStart:S,hostOffset:N,hostStart:w,hostTarget:O,translation:y,absoluteY:E,dragIndex:j,dropTo:T,dragY:k,heights:A}),[_,m,S,N,w,O,y,E,j,T,k,A]),z=(0,_react.useMemo)(()=>({onLift:Y,onDrop:H,onSettled:X,onMove:q,onHeight:F}),[Y,H,X,q,F]),K=!0===C?.dragging,W=K&&C?rowShifts(v.map(e=>I.current.get(e)??0),C.from,C.to):null;return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView,{ref:_,onScroll:U,onContentSizeChange:B,scrollEventThrottle:16,scrollEnabled:!K,accessibilityLabel:o,testID:c,children:d.map((e,t)=>{const a=C?.key===e.key;return(0,_jsxRuntime.jsx)(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:W?.[t]??0,isActive:a,dragging:K,handle:l,disabled:i,shared:J,callbacks:z,labels:u,children:r({item:e.item,index:t,isActive:a})},e.key)})})}SortableList.displayName="SortableList";var _default=exports.default=SortableList;

package/lib/module/components/SortableList/SortableList.js

@@ -1 +1 @@
-"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,measure,runOnJS,scrollTo,useAnimatedRef,useAnimatedScrollHandler,useAnimatedStyle,useFrameCallback,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{useScrollHost}from"../Screen/ScrollHost.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SORTABLE_LIST_LABELS=Object.freeze({moveUp:"Move up",moveDown:"Move down"});const LONG_PRESS_MS=350,EDGE_PX=48,SCROLL_STEP_PX=12,SPRING_CONFIG={damping:22,stiffness:260,mass:1},ACTION_STEP={moveUp:-1,moveDown:1},noop=e=>{};export function moveItem(e,t,a){const l=e.slice();if(t<0||t>=l.length)return l;const[o]=l.splice(t,1);return l.splice(a,0,o),l}export function topOf(e,t){"worklet";let a=0;for(let l=0;l<t;l++)a+=e[l]??0;return a}export function slotTop(e,t,a){"worklet";let l=0,o=0;for(let r=0;r<e.length&&o<a;r++)r!==t&&(l+=e[r]??0,o++);return l}export function dropIndex(e,t,a){"worklet";const l=topOf(e,t)+(e[t]??0)/2+a;let o=0,r=0;for(let a=0;a<e.length;a++){const s=e[a]??0;a!==t&&r+s/2<l&&o++,r+=s}return o}export function rowShifts(e,t,a){const l=[];let o=0;for(const t of e)l.push(o),o+=t;const r=e.map(()=>0),s=moveItem(e.map((e,t)=>t),t,a);let n=0;for(const t of s)r[t]=n-(l[t]??0),n+=e[t]??0;return r}const buildStyles=e=>StyleSheet.create({handleRow:{flexDirection:"row",alignItems:"center"},handle:{paddingHorizontal:e.space.sm,paddingVertical:e.space.md,gap:e.space.xxs},bar:{width:e.space.md,height:e.space.xxs,backgroundColor:e.colors["text-muted"]},body:{flex:1}});function SortableRow({rowKey:e,index:t,count:a,shift:l,isActive:o,dragging:r,handle:s,disabled:n,shared:u,callbacks:i,labels:c,children:d}){const m=useTheme(),v=useMemo(()=>buildStyles(m),[m]),h=useSharedValue(0);useEffect(()=>{h.value=r&&!o?withSpring(l,SPRING_CONFIG):l},[r,o,l,h]),useEffect(()=>()=>{cancelAnimation(h)},[h]);const S=useAnimatedStyle(()=>({transform:[{translateY:o?u.dragY.value:h.value}],zIndex:o?1:0})),f=useMemo(()=>{const{dragIndex:e,dropTo:a,dragY:l,translation:o,absoluteY:r,scrollY:c,scrollStart:d,hostOffset:m,hostStart:v,hostTarget:h,heights:S}=u,{onLift:f,onDrop:g,onSettled:p}=i,b=Gesture.Pan().enabled(!n).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=c.value,v.value=m.value,h.value=m.value,o.value=0,l.value=0,runOnJS(f)(t)}).onUpdate(a=>{"worklet";e.value===t&&(o.value=a.translationY,r.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const o=a.value,r=S.value;e.value=-1,l.value=topOf(r,t)+l.value-slotTop(r,t,o),l.value=withSpring(0,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(p)()}),runOnJS(g)(t,o)});return s?b:b.activateAfterLongPress(350)},[n,s,t,i,u]),g=n?[]:[...t>0?[{name:"moveUp",label:c.moveUp}]:[],...t<a-1?[{name:"moveDown",label:c.moveDown}]:[]];return _jsx(Animated.View,{style:S,onLayout:t=>i.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:g,onAccessibilityAction:e=>{if(n)return;const l=t+(ACTION_STEP[e.nativeEvent.actionName]??0);l!==t&&l>=0&&l<a&&i.onMove(t,l)},testID:`sortable-row-${e}`,children:s?_jsxs(View,{style:v.handleRow,children:[_jsx(GestureDetector,{gesture:f,children:_jsxs(View,{style:v.handle,children:[_jsx(View,{style:v.bar}),_jsx(View,{style:v.bar}),_jsx(View,{style:v.bar})]})}),_jsx(View,{style:v.body,children:d})]}):_jsx(GestureDetector,{gesture:f,children:_jsx(View,{children:d})})})}export function SortableList(e){const{data:t,keyExtractor:a,renderItem:l,onReorder:o,handle:r=!1,disabled:s=!1,accessibilityLabel:n,labels:u,testID:i}=e,c=useMemo(()=>({...DEFAULT_SORTABLE_LIST_LABELS,...u}),[u]),d=useMemo(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),m=useMemo(()=>d.map(e=>e.key),[d]),v=useAnimatedRef(),h=useSharedValue(0),S=useSharedValue(0),f=useSharedValue(0),g=useScrollHost(),p=useSharedValue(0),b=null!==g,x=g?.top??p,w=g?.bottom??p,y=g?.offset??p,k=g?.maxOffset??p,_=g?.scrollTo??noop,A=useSharedValue(0),V=useSharedValue(0),I=useSharedValue(0),O=useSharedValue(0),T=useSharedValue(-1),L=useSharedValue(-1),E=useSharedValue(0),j=useSharedValue([]),M=useRef(new Map),C=useRef(m),[R,D]=useState(null),Y=useCallback(()=>{j.value=C.current.map(e=>M.current.get(e)??0)},[j]);useEffect(()=>{C.current=m,Y()},[m,Y]),useEffect(()=>()=>{cancelAnimation(E)},[E]);const G=useCallback(e=>{D(t=>t?.dragging?{...t,to:e}:t)},[]),P=useFrameCallback(()=>{"worklet";const e=T.value;if(e<0)return;const t=measure(v);if(t){const e=b?Math.max(t.pageY,x.value):t.pageY,a=b?Math.min(t.pageY+t.height,w.value):t.pageY+t.height,l=Math.max(0,f.value-t.height);O.value<e+48?h.value>0?scrollTo(v,0,Math.max(0,h.value-12),!1):b&&V.value>0&&(V.value=Math.max(0,V.value-12),runOnJS(_)(V.value)):O.value>a-48&&(h.value<l?scrollTo(v,0,Math.min(l,h.value+12),!1):b&&V.value<k.value&&(V.value=Math.min(k.value,V.value+12),runOnJS(_)(V.value)))}E.value=I.value+h.value-S.value+y.value-A.value;const a=dropIndex(j.value,e,E.value);a!==L.value&&(L.value=a,runOnJS(G)(a))},!1),N=useCallback(e=>{triggerHaptic("longPress"),P.setActive(!0),D({key:m[e]??"",from:e,to:e,dragging:!0})},[P,m]),H=useCallback((e,t)=>{P.setActive(!1),D(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&o(moveItem(m,e,t))},[P,m,o]),F=useCallback(()=>{D(e=>e&&!e.dragging?null:e)},[]),J=useCallback((e,t)=>{o(moveItem(m,e,t))},[m,o]),U=useCallback((e,t)=>{M.current.set(e,t),Y()},[Y]),z=useAnimatedScrollHandler({onScroll:e=>{"worklet";h.value=e.contentOffset.y}}),B=useCallback((e,t)=>{f.value=t},[f]),K=useMemo(()=>({scrollRef:v,scrollY:h,scrollStart:S,hostOffset:y,hostStart:A,hostTarget:V,translation:I,absoluteY:O,dragIndex:T,dropTo:L,dragY:E,heights:j}),[v,h,S,y,A,V,I,O,T,L,E,j]),X=useMemo(()=>({onLift:N,onDrop:H,onSettled:F,onMove:J,onHeight:U}),[N,H,F,J,U]),$=!0===R?.dragging,q=$&&R?rowShifts(m.map(e=>M.current.get(e)??0),R.from,R.to):null;return _jsx(Animated.ScrollView,{ref:v,onScroll:z,onContentSizeChange:B,scrollEventThrottle:16,scrollEnabled:!$,accessibilityLabel:n,testID:i,children:d.map((e,t)=>{const a=R?.key===e.key;return _jsx(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:q?.[t]??0,isActive:a,dragging:$,handle:r,disabled:s,shared:K,callbacks:X,labels:c,children:l({item:e.item,index:t,isActive:a})},e.key)})})}SortableList.displayName="SortableList";export default SortableList;
+"use strict";import{useCallback,useEffect,useMemo,useRef,useState}from"react";import{StyleSheet,View}from"react-native";import{Gesture,GestureDetector}from"react-native-gesture-handler";import Animated,{cancelAnimation,measure,runOnJS,scrollTo,useAnimatedRef,useAnimatedScrollHandler,useAnimatedStyle,useFrameCallback,useSharedValue,withSpring}from"react-native-reanimated";import{useTheme}from"../../theme/index.js";import{triggerHaptic}from"../../utils/index.js";import{useScrollHost}from"../Screen/ScrollHost.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const DEFAULT_SORTABLE_LIST_LABELS=Object.freeze({moveUp:"Move up",moveDown:"Move down"});const LONG_PRESS_MS=350,EDGE_PX=48,SCROLL_STEP_PX=12,SCROLL_SLACK_PX=1,SPRING_CONFIG={damping:22,stiffness:260,mass:1},ACTION_STEP={moveUp:-1,moveDown:1},noop=e=>{};export function moveItem(e,t,a){const l=e.slice();if(t<0||t>=l.length)return l;const[o]=l.splice(t,1);return l.splice(a,0,o),l}export function topOf(e,t){"worklet";let a=0;for(let l=0;l<t;l++)a+=e[l]??0;return a}export function slotTop(e,t,a){"worklet";let l=0,o=0;for(let r=0;r<e.length&&o<a;r++)r!==t&&(l+=e[r]??0,o++);return l}export function dropIndex(e,t,a){"worklet";const l=topOf(e,t)+(e[t]??0)/2+a;let o=0,r=0;for(let a=0;a<e.length;a++){const s=e[a]??0;a!==t&&r+s/2<l&&o++,r+=s}return o}export function rowShifts(e,t,a){const l=[];let o=0;for(const t of e)l.push(o),o+=t;const r=e.map(()=>0),s=moveItem(e.map((e,t)=>t),t,a);let n=0;for(const t of s)r[t]=n-(l[t]??0),n+=e[t]??0;return r}const buildStyles=e=>StyleSheet.create({handleRow:{flexDirection:"row",alignItems:"center"},handle:{paddingHorizontal:e.space.sm,paddingVertical:e.space.md,gap:e.space.xxs},bar:{width:e.space.md,height:e.space.xxs,backgroundColor:e.colors["text-muted"]},body:{flex:1}});function SortableRow({rowKey:e,index:t,count:a,shift:l,isActive:o,dragging:r,handle:s,disabled:n,shared:u,callbacks:i,labels:c,children:d}){const m=useTheme(),v=useMemo(()=>buildStyles(m),[m]),h=useSharedValue(0);useEffect(()=>{h.value=r&&!o?withSpring(l,SPRING_CONFIG):l},[r,o,l,h]),useEffect(()=>()=>{cancelAnimation(h)},[h]);const S=useAnimatedStyle(()=>({transform:[{translateY:o?u.dragY.value:h.value}],zIndex:o?1:0})),f=useMemo(()=>{const{dragIndex:e,dropTo:a,dragY:l,translation:o,absoluteY:r,scrollY:c,scrollStart:d,hostOffset:m,hostStart:v,hostTarget:h,heights:S}=u,{onLift:f,onDrop:g,onSettled:p}=i,b=Gesture.Pan().enabled(!n).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=c.value,v.value=m.value,h.value=m.value,o.value=0,l.value=0,runOnJS(f)(t)}).onUpdate(a=>{"worklet";e.value===t&&(o.value=a.translationY,r.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const o=a.value,r=S.value;e.value=-1,l.value=topOf(r,t)+l.value-slotTop(r,t,o),l.value=withSpring(0,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(p)()}),runOnJS(g)(t,o)});return s?b:b.activateAfterLongPress(350)},[n,s,t,i,u]),g=n?[]:[...t>0?[{name:"moveUp",label:c.moveUp}]:[],...t<a-1?[{name:"moveDown",label:c.moveDown}]:[]];return _jsx(Animated.View,{style:S,onLayout:t=>i.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:g,onAccessibilityAction:e=>{if(n)return;const l=t+(ACTION_STEP[e.nativeEvent.actionName]??0);l!==t&&l>=0&&l<a&&i.onMove(t,l)},testID:`sortable-row-${e}`,children:s?_jsxs(View,{style:v.handleRow,children:[_jsx(GestureDetector,{gesture:f,children:_jsxs(View,{style:v.handle,children:[_jsx(View,{style:v.bar}),_jsx(View,{style:v.bar}),_jsx(View,{style:v.bar})]})}),_jsx(View,{style:v.body,children:d})]}):_jsx(GestureDetector,{gesture:f,children:_jsx(View,{children:d})})})}export function SortableList(e){const{data:t,keyExtractor:a,renderItem:l,onReorder:o,handle:r=!1,disabled:s=!1,accessibilityLabel:n,labels:u,testID:i}=e,c=useMemo(()=>({...DEFAULT_SORTABLE_LIST_LABELS,...u}),[u]),d=useMemo(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),m=useMemo(()=>d.map(e=>e.key),[d]),v=useAnimatedRef(),h=useSharedValue(0),S=useSharedValue(0),f=useSharedValue(0),g=useScrollHost(),p=useSharedValue(0),b=null!==g,x=g?.top??p,w=g?.bottom??p,y=g?.offset??p,_=g?.maxOffset??p,k=g?.scrollTo??noop,A=useSharedValue(0),L=useSharedValue(0),O=useSharedValue(0),V=useSharedValue(0),I=useSharedValue(-1),T=useSharedValue(-1),C=useSharedValue(0),E=useSharedValue([]),j=useRef(new Map),M=useRef(m),[R,D]=useState(null),Y=useCallback(()=>{E.value=M.current.map(e=>j.current.get(e)??0)},[E]);useEffect(()=>{M.current=m,Y()},[m,Y]),useEffect(()=>()=>{cancelAnimation(C)},[C]);const G=useCallback(e=>{D(t=>t?.dragging?{...t,to:e}:t)},[]),P=useFrameCallback(()=>{"worklet";const e=I.value;if(e<0)return;const t=measure(v);if(t){const e=b?Math.max(t.pageY,x.value):t.pageY,a=b?Math.min(t.pageY+t.height,w.value):t.pageY+t.height,l=Math.max(0,f.value-t.height-1);V.value<e+48?h.value>1?scrollTo(v,0,Math.max(0,h.value-12),!1):b&&L.value>0&&(L.value=Math.max(0,L.value-12),runOnJS(k)(L.value)):V.value>a-48&&(h.value<l?scrollTo(v,0,Math.min(l,h.value+12),!1):b&&L.value<_.value&&(L.value=Math.min(_.value,L.value+12),runOnJS(k)(L.value)))}C.value=O.value+h.value-S.value+y.value-A.value;const a=dropIndex(E.value,e,C.value);a!==T.value&&(T.value=a,runOnJS(G)(a))},!1),N=useCallback(e=>{triggerHaptic("longPress"),P.setActive(!0),D({key:m[e]??"",from:e,to:e,dragging:!0})},[P,m]),H=useCallback((e,t)=>{P.setActive(!1),D(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&o(moveItem(m,e,t))},[P,m,o]),F=useCallback(()=>{D(e=>e&&!e.dragging?null:e)},[]),J=useCallback((e,t)=>{o(moveItem(m,e,t))},[m,o]),U=useCallback((e,t)=>{j.current.set(e,t),Y()},[Y]),z=useAnimatedScrollHandler({onScroll:e=>{"worklet";h.value=e.contentOffset.y}}),B=useCallback((e,t)=>{f.value=t},[f]),K=useMemo(()=>({scrollRef:v,scrollY:h,scrollStart:S,hostOffset:y,hostStart:A,hostTarget:L,translation:O,absoluteY:V,dragIndex:I,dropTo:T,dragY:C,heights:E}),[v,h,S,y,A,L,O,V,I,T,C,E]),X=useMemo(()=>({onLift:N,onDrop:H,onSettled:F,onMove:J,onHeight:U}),[N,H,F,J,U]),$=!0===R?.dragging,q=$&&R?rowShifts(m.map(e=>j.current.get(e)??0),R.from,R.to):null;return _jsx(Animated.ScrollView,{ref:v,onScroll:z,onContentSizeChange:B,scrollEventThrottle:16,scrollEnabled:!$,accessibilityLabel:n,testID:i,children:d.map((e,t)=>{const a=R?.key===e.key;return _jsx(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:q?.[t]??0,isActive:a,dragging:$,handle:r,disabled:s,shared:K,callbacks:X,labels:c,children:l({item:e.item,index:t,isActive:a})},e.key)})})}SortableList.displayName="SortableList";export default SortableList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.109.4",
+  "version": "0.109.5",
   "description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
   "keywords": [
     "react-native",
@@ -100,8 +100,8 @@
     "react-native-safe-area-context": ">=5.4.0",
     "react-native-svg": ">=15.0.0",
     "react-native-worklets": ">=0.10.0",
-    "@webority/canvas-kit": "0.109.4",
-    "@webority/mobile-core": "0.109.4"
+    "@webority/canvas-kit": "0.109.5",
+    "@webority/mobile-core": "0.109.5"
   },
   "peerDependenciesMeta": {
     "@react-navigation/bottom-tabs": {
@@ -170,10 +170,10 @@
     "react-test-renderer": "19.2.8",
     "rimraf": "6.1.3",
     "typescript": "5.9.3",
-    "@webority/canvas-kit": "0.109.4",
-    "@webority/mobile-core": "0.109.4",
-    "@webority/tokens": "0.109.4",
-    "@webority/mobile-dev": "0.0.0"
+    "@webority/mobile-core": "0.109.5",
+    "@webority/mobile-dev": "0.0.0",
+    "@webority/canvas-kit": "0.109.5",
+    "@webority/tokens": "0.109.5"
   },
   "scripts": {
     "build": "bob build && node ../mobile-dev/scripts/minify-lib.mjs && node -e \"require('node:fs').rmSync('dist/canvas-kit',{recursive:true,force:true})\" && node ../canvas-kit/dist/cli.js build --config canvas-kit.json --out dist/canvas-kit",