@webority/mobile-ui 0.109.3 → 0.109.4

package/dist/canvas-kit/manifest.json

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

package/dist/canvas-kit/release.json

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

package/lib/commonjs/components/Screen/Screen.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Screen=Screen;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useRefreshControl=require("../../hooks/useRefreshControl.js"),_index=require("../../theme/index.js"),_index2=require("../AppBar/index.js"),_index3=require("../AsyncBlock/index.js"),_index4=require("../EmptyState/index.js"),_index5=require("../KeyboardAwareScrollView/index.js"),_index6=require("../KeyboardToolbar/index.js"),_index7=require("../PagedListFooter/index.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return(0,_react.isValidElement)(e)?e:e?(0,_react.createElement)(e):null}const buildStyles=e=>_reactNative.StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:_reactNative.StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});function Screen(e){const{title:t,subtitle:r,largeTitle:o=!0,onBack:n,rightActions:i,leading:a,children:l,onRefresh:s,refreshing:d=!1,footer:c,scroll:u=!0,list:_,edges:x=DEFAULT_EDGES,keyboardToolbar:h=!0,bottomInset:f=0,scrollRef:g,onScroll:p,contentContainerStyle:v,testID:m}=e,y=(0,_index.useTheme)(),j=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),R=(0,_react.useMemo)(()=>buildStyles(y),[y]),[b]=(0,_react.useState)(()=>new _reactNative.Animated.Value(0)),[S,E]=(0,_react.useState)(0),T=void 0!==n,C=(0,_react.useRef)(n);C.current=n;const L=Boolean(t||r||n||a||i?.length),N=o&&void 0!==t,k=N&&(void 0!==_||u),A=k?S:0,q=void 0!==c,{refreshControl:w}=(0,_useRefreshControl.useRefreshControl)({onRefresh:s??noop,refreshing:d}),B=s?(0,_react.cloneElement)(w,{progressViewOffset:A}):void 0,V=(0,_react.useRef)(p);V.current=p;const F=(0,_react.useMemo)(()=>_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:b}}}],{useNativeDriver:!1,listener:e=>V.current?.(e)}),[b]),M=(0,_react.useCallback)(e=>{const{height:t}=e.nativeEvent.layout;E(e=>Math.max(e,t))},[]);(0,_react.useEffect)(()=>{if(!T)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>(C.current?.(),!0));return()=>e.remove()},[T]);const D=x.includes("left")?j.left:0,K=x.includes("right")?j.right:0,O=x.includes("bottom")?j.bottom:0,P=x.includes("top")&&!L?j.top:0,I=x.filter(e=>"top"!==e&&!("bottom"===e&&q)),H=L?(0,_jsxRuntime.jsx)(_reactNative.View,{style:k?R.overlay:void 0,onLayout:k?M:void 0,children:(0,_jsxRuntime.jsx)(_index2.AppBar,{title:t,subtitle:r,variant:N?"large":"default",scrollY:k?b:void 0,onBack:n,rightActions:i,leading:a})}):null,G=k||p?F:void 0;let U;if(void 0!==_){const{state:e,paging:t,...r}=_,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),r.onEndReached?.(e)},o=(0,_jsxRuntime.jsx)(_reactNative.FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...r,ref:g,refreshControl:B,onScroll:G,onEndReached:t?handleEndReached:r.onEndReached,ListEmptyComponent:e?.empty?(0,_jsxRuntime.jsx)(_index4.EmptyState,{...e.empty}):void 0,ListFooterComponent:t||r.ListFooterComponent?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderFooter(r.ListFooterComponent),t?(0,_jsxRuntime.jsx)(_index7.PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:SCROLL_EVENT_THROTTLE,style:R.flex,contentContainerStyle:[{paddingTop:A,paddingLeft:D,paddingRight:K},{paddingBottom:(q?0:O)+f},r.contentContainerStyle,v]});U=e?(0,_jsxRuntime.jsx)(_index3.AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[R.flex,{paddingTop:A}],children:o}):o}else U=u?(0,_jsxRuntime.jsxs)(_index5.KeyboardAwareScrollView,{ref:g,refreshControl:B,onScroll:G,safeAreaEdges:I,style:R.flex,contentContainerStyle:[{paddingTop:A},v],children:[l,f>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:f}}):null]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[R.flex,{paddingLeft:D,paddingRight:K,paddingBottom:(q?0:O)+f},v],children:l});const W=q?(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardStickyView,{style:[R.footer,{paddingLeft:D,paddingRight:K,paddingBottom:O+f}],children:c}):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:m,style:[R.root,{paddingTop:P}],children:[k?null:H,U,W,void 0!==_?l:null,k?H:null,h?(0,_jsxRuntime.jsx)(_index6.KeyboardToolbar,{}):null]})}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Screen=Screen;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeReanimated=require("react-native-reanimated"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useRefreshControl=require("../../hooks/useRefreshControl.js"),_index=require("../../theme/index.js"),_index2=require("../AppBar/index.js"),_index3=require("../AsyncBlock/index.js"),_index4=require("../EmptyState/index.js"),_index5=require("../KeyboardAwareScrollView/index.js"),_index6=require("../KeyboardToolbar/index.js"),_index7=require("../PagedListFooter/index.js"),_ScrollHost=require("./ScrollHost.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return(0,_react.isValidElement)(e)?e:e?(0,_react.createElement)(e):null}const buildStyles=e=>_reactNative.StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:_reactNative.StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});function Screen(e){const{title:t,subtitle:r,largeTitle:o=!0,onBack:n,rightActions:a,leading:i,children:l,onRefresh:s,refreshing:c=!1,footer:d,scroll:u=!0,list:_,edges:x=DEFAULT_EDGES,keyboardToolbar:f=!0,bottomInset:v=0,scrollRef:h,onScroll:m,contentContainerStyle:g,testID:p}=e,R=(0,_index.useTheme)(),y=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),S=(0,_react.useMemo)(()=>buildStyles(R),[R]),[j]=(0,_react.useState)(()=>new _reactNative.Animated.Value(0)),[b,E]=(0,_react.useState)(0),C=void 0!==n,T=(0,_react.useRef)(n);T.current=n;const N=Boolean(t||r||n||i||a?.length),L=o&&void 0!==t,k=L&&(void 0!==_||u),V=k?b:0,A=void 0!==d,{refreshControl:q}=(0,_useRefreshControl.useRefreshControl)({onRefresh:s??noop,refreshing:c}),w=s?(0,_react.cloneElement)(q,{progressViewOffset:V}):void 0,B=(0,_reactNativeReanimated.useSharedValue)(0),F=(0,_reactNativeReanimated.useSharedValue)(0),O=(0,_reactNativeReanimated.useSharedValue)(0),M=(0,_reactNativeReanimated.useSharedValue)(0),H=(0,_react.useRef)(null),D=(0,_react.useRef)(0),K=(0,_react.useRef)(0),P=(0,_react.useMemo)(()=>({top:B,bottom:F,offset:O,maxOffset:M,scrollTo:e=>H.current?.scrollTo({y:e,animated:!1})}),[B,F,O,M]),I=(0,_react.useCallback)(e=>{H.current=e,"function"==typeof h?h(e):h&&(h.current=e)},[h]),W=(0,_react.useCallback)(()=>{M.value=Math.max(0,D.current-K.current)},[M]),G=(0,_react.useRef)(m);G.current=m;const U=(0,_react.useMemo)(()=>_reactNative.Animated.event([{nativeEvent:{contentOffset:{y:j}}}],{useNativeDriver:!1,listener:e=>{O.value=e.nativeEvent.contentOffset.y,G.current?.(e)}}),[j,O]),z=(0,_react.useCallback)(e=>{const{height:t}=e.nativeEvent.layout;E(e=>Math.max(e,t))},[]);(0,_react.useEffect)(()=>{if(!C)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>(T.current?.(),!0));return()=>e.remove()},[C]);const Y=x.includes("left")?y.left:0,J=x.includes("right")?y.right:0,Q=x.includes("bottom")?y.bottom:0,X=x.includes("top")&&!N?y.top:0,Z=x.filter(e=>"top"!==e&&!("bottom"===e&&A)),$=N?(0,_jsxRuntime.jsx)(_reactNative.View,{style:k?S.overlay:void 0,onLayout:k?z:void 0,children:(0,_jsxRuntime.jsx)(_index2.AppBar,{title:t,subtitle:r,variant:L?"large":"default",scrollY:k?j:void 0,onBack:n,rightActions:a,leading:i})}):null,ee=k||m?U:void 0,te=(0,_react.useCallback)(()=>{H.current?.getNativeScrollRef()?.measureInWindow((e,t,r,o)=>{K.current=o,B.value=t+V,F.value=t+o,W()})},[V,B,F,W]);(0,_react.useEffect)(()=>{te()},[te]);const re=(0,_react.useCallback)((e,t)=>{D.current=t,W()},[W]);let oe;if(void 0!==_){const{state:e,paging:t,...r}=_,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),r.onEndReached?.(e)},o=(0,_jsxRuntime.jsx)(_reactNative.FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...r,ref:h,refreshControl:w,onScroll:ee,onEndReached:t?handleEndReached:r.onEndReached,ListEmptyComponent:e?.empty?(0,_jsxRuntime.jsx)(_index4.EmptyState,{...e.empty}):void 0,ListFooterComponent:t||r.ListFooterComponent?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderFooter(r.ListFooterComponent),t?(0,_jsxRuntime.jsx)(_index7.PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:SCROLL_EVENT_THROTTLE,style:S.flex,contentContainerStyle:[{paddingTop:V,paddingLeft:Y,paddingRight:J},{paddingBottom:(A?0:Q)+v},r.contentContainerStyle,g]});oe=e?(0,_jsxRuntime.jsx)(_index3.AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[S.flex,{paddingTop:V}],children:o}):o}else oe=u?(0,_jsxRuntime.jsx)(_ScrollHost.ScrollHostContext.Provider,{value:P,children:(0,_jsxRuntime.jsxs)(_index5.KeyboardAwareScrollView,{ref:I,refreshControl:w,onScroll:U,scrollEventThrottle:SCROLL_EVENT_THROTTLE,onLayout:te,onContentSizeChange:re,safeAreaEdges:Z,style:S.flex,contentContainerStyle:[{paddingTop:V},g],children:[l,v>0?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:v}}):null]})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[S.flex,{paddingLeft:Y,paddingRight:J,paddingBottom:(A?0:Q)+v},g],children:l});const ne=A?(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardStickyView,{style:[S.footer,{paddingLeft:Y,paddingRight:J,paddingBottom:Q+v}],children:d}):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{testID:p,style:[S.root,{paddingTop:X}],children:[k?null:$,oe,ne,void 0!==_?l:null,k?$:null,f?(0,_jsxRuntime.jsx)(_index6.KeyboardToolbar,{}):null]})}

package/lib/commonjs/components/Screen/ScrollHost.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ScrollHostContext=void 0,exports.useScrollHost=useScrollHost;var _react=require("react");const ScrollHostContext=exports.ScrollHostContext=(0,_react.createContext)(null);function useScrollHost(){return(0,_react.useContext)(ScrollHostContext)}

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"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var a,r,n=Object.defineProperty,i={__proto__:null,default:e};if(Object(e)!==e)return i;if(cache||"function"!=typeof WeakMap||(cache=new WeakMap),cache){if(cache.has(e))return cache.get(e);cache.set(e,i)}for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=n&&Object.getOwnPropertyDescriptor(e,r))&&(a.get||a.set)?n(i,r,a):i[r]=e[r]);return i}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};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 i=0;i<e.length&&n<a;i++)i!==t&&(r+=e[i]??0,n++);return r}function dropIndex(e,t,a){"worklet";const r=topOf(e,t)+(e[t]??0)/2+a;let n=0,i=0;for(let a=0;a<e.length;a++){const l=e[a]??0;a!==t&&i+l/2<r&&n++,i+=l}return n}function rowShifts(e,t,a){const r=[];let n=0;for(const t of e)r.push(n),n+=t;const i=e.map(()=>0),l=moveItem(e.map((e,t)=>t),t,a);let o=0;for(const t of l)i[t]=o-(r[t]??0),o+=e[t]??0;return i}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:i,handle:l,disabled:o,shared:s,callbacks:c,labels:u,children:d}){const _=(0,_index.useTheme)(),v=(0,_react.useMemo)(()=>buildStyles(_),[_]),m=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(()=>{m.value=i&&!n?(0,_reactNativeReanimated.withSpring)(r,SPRING_CONFIG):r},[i,n,r,m]),(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(m)},[m]);const f=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({transform:[{translateY:n?s.dragY.value:m.value}],zIndex:n?1:0})),p=(0,_react.useMemo)(()=>{const{dragIndex:e,dropTo:a,dragY:r,translation:n,absoluteY:i,scrollY:u,scrollStart:d,heights:_}=s,{onLift:v,onDrop:m,onSettled:f}=c,p=_reactNativeGestureHandler.Gesture.Pan().enabled(!o).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=u.value,n.value=0,r.value=0,(0,_reactNativeReanimated.runOnJS)(v)(t)}).onUpdate(a=>{"worklet";e.value===t&&(n.value=a.translationY,i.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const n=a.value,i=_.value;e.value=-1,r.value=topOf(i,t)+r.value-slotTop(i,t,n),r.value=(0,_reactNativeReanimated.withSpring)(0,SPRING_CONFIG,e=>{"worklet";e&&(0,_reactNativeReanimated.runOnJS)(f)()}),(0,_reactNativeReanimated.runOnJS)(m)(t,n)});return l?p:p.activateAfterLongPress(350)},[o,l,t,c,s]),h=o?[]:[...t>0?[{name:"moveUp",label:u.moveUp}]:[],...t<a-1?[{name:"moveDown",label:u.moveDown}]:[]];return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:f,onLayout:t=>c.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:h,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:l?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v.handleRow,children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:p,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v.handle,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.bar}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.bar}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.bar})]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.body,children:d})]}):(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:p,children:(0,_jsxRuntime.jsx)(_reactNative.View,{children:d})})})}function SortableList(e){const{data:t,keyExtractor:a,renderItem:r,onReorder:n,handle:i=!1,disabled:l=!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]),_=(0,_react.useMemo)(()=>d.map(e=>e.key),[d]),v=(0,_reactNativeReanimated.useAnimatedRef)(),m=(0,_reactNativeReanimated.useSharedValue)(0),f=(0,_reactNativeReanimated.useSharedValue)(0),p=(0,_reactNativeReanimated.useSharedValue)(0),h=(0,_reactNativeReanimated.useSharedValue)(0),S=(0,_reactNativeReanimated.useSharedValue)(-1),x=(0,_reactNativeReanimated.useSharedValue)(-1),R=(0,_reactNativeReanimated.useSharedValue)(0),g=(0,_reactNativeReanimated.useSharedValue)([]),b=(0,_react.useRef)(new Map),N=(0,_react.useRef)(_),[w,L]=(0,_react.useState)(null),y=(0,_react.useCallback)(()=>{g.value=N.current.map(e=>b.current.get(e)??0)},[g]);(0,_react.useEffect)(()=>{N.current=_,y()},[_,y]),(0,_react.useEffect)(()=>()=>{(0,_reactNativeReanimated.cancelAnimation)(R)},[R]);const j=(0,_react.useCallback)(e=>{L(t=>t?.dragging?{...t,to:e}:t)},[]),E=(0,_reactNativeReanimated.useFrameCallback)(()=>{"worklet";const e=S.value;if(e<0)return;const t=(0,_reactNativeReanimated.measure)(v);t&&(h.value<t.pageY+EDGE_PX?(0,_reactNativeReanimated.scrollTo)(v,0,Math.max(0,m.value-SCROLL_STEP_PX),!1):h.value>t.pageY+t.height-EDGE_PX&&(0,_reactNativeReanimated.scrollTo)(v,0,m.value+SCROLL_STEP_PX,!1)),R.value=p.value+m.value-f.value;const a=dropIndex(g.value,e,R.value);a!==x.value&&(x.value=a,(0,_reactNativeReanimated.runOnJS)(j)(a))},!1),k=(0,_react.useCallback)(e=>{(0,_index2.triggerHaptic)("longPress"),E.setActive(!0),L({key:_[e]??"",from:e,to:e,dragging:!0})},[E,_]),I=(0,_react.useCallback)((e,t)=>{E.setActive(!1),L(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&n(moveItem(_,e,t))},[E,_,n]),O=(0,_react.useCallback)(()=>{L(e=>e&&!e.dragging?null:e)},[]),T=(0,_react.useCallback)((e,t)=>{n(moveItem(_,e,t))},[_,n]),A=(0,_react.useCallback)((e,t)=>{b.current.set(e,t),y()},[y]),P=(0,_reactNativeReanimated.useAnimatedScrollHandler)({onScroll:e=>{"worklet";m.value=e.contentOffset.y}}),D=(0,_react.useMemo)(()=>({scrollRef:v,scrollY:m,scrollStart:f,translation:p,absoluteY:h,dragIndex:S,dropTo:x,dragY:R,heights:g}),[v,m,f,p,h,S,x,R,g]),V=(0,_react.useMemo)(()=>({onLift:k,onDrop:I,onSettled:O,onMove:T,onHeight:A}),[k,I,O,T,A]),M=!0===w?.dragging,C=M&&w?rowShifts(_.map(e=>b.current.get(e)??0),w.from,w.to):null;return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.ScrollView,{ref:v,onScroll:P,scrollEventThrottle:16,scrollEnabled:!M,accessibilityLabel:o,testID:c,children:d.map((e,t)=>{const a=w?.key===e.key;return(0,_jsxRuntime.jsx)(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:C?.[t]??0,isActive:a,dragging:M,handle:i,disabled:l,shared:D,callbacks:V,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,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;

package/lib/module/components/Screen/Screen.js

@@ -1 +1 @@
-"use strict";import{cloneElement,createElement,isValidElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{AsyncBlock}from"../AsyncBlock/index.js";import{EmptyState}from"../EmptyState/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{PagedListFooter}from"../PagedListFooter/index.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return isValidElement(e)?e:e?createElement(e):null}const buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:s,children:i,onRefresh:a,refreshing:d=!1,footer:c,scroll:m=!0,list:f,edges:p=DEFAULT_EDGES,keyboardToolbar:u=!0,bottomInset:h=0,scrollRef:g,onScroll:y,contentContainerStyle:x,testID:b}=e,S=useTheme(),v=useSafeAreaInsets(),E=useMemo(()=>buildStyles(S),[S]),[j]=useState(()=>new Animated.Value(0)),[T,_]=useState(0),k=void 0!==n,C=useRef(n);C.current=n;const R=Boolean(t||o||n||s||l?.length),A=r&&void 0!==t,L=A&&(void 0!==f||m),w=L?T:0,B=void 0!==c,{refreshControl:F}=useRefreshControl({onRefresh:a??noop,refreshing:d}),V=a?cloneElement(F,{progressViewOffset:w}):void 0,K=useRef(y);K.current=y;const M=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:j}}}],{useNativeDriver:!1,listener:e=>K.current?.(e)}),[j]),D=useCallback(e=>{const{height:t}=e.nativeEvent.layout;_(e=>Math.max(e,t))},[]);useEffect(()=>{if(!k)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(C.current?.(),!0));return()=>e.remove()},[k]);const I=p.includes("left")?v.left:0,P=p.includes("right")?v.right:0,O=p.includes("bottom")?v.bottom:0,H=p.includes("top")&&!R?v.top:0,G=p.filter(e=>"top"!==e&&!("bottom"===e&&B)),N=R?_jsx(View,{style:L?E.overlay:void 0,onLayout:L?D:void 0,children:_jsx(AppBar,{title:t,subtitle:o,variant:A?"large":"default",scrollY:L?j:void 0,onBack:n,rightActions:l,leading:s})}):null,U=L||y?M:void 0;let W;if(void 0!==f){const{state:e,paging:t,...o}=f,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),o.onEndReached?.(e)},r=_jsx(FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...o,ref:g,refreshControl:V,onScroll:U,onEndReached:t?handleEndReached:o.onEndReached,ListEmptyComponent:e?.empty?_jsx(EmptyState,{...e.empty}):void 0,ListFooterComponent:t||o.ListFooterComponent?_jsxs(_Fragment,{children:[renderFooter(o.ListFooterComponent),t?_jsx(PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:16,style:E.flex,contentContainerStyle:[{paddingTop:w,paddingLeft:I,paddingRight:P},{paddingBottom:(B?0:O)+h},o.contentContainerStyle,x]});W=e?_jsx(AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[E.flex,{paddingTop:w}],children:r}):r}else W=m?_jsxs(KeyboardAwareScrollView,{ref:g,refreshControl:V,onScroll:U,safeAreaEdges:G,style:E.flex,contentContainerStyle:[{paddingTop:w},x],children:[i,h>0?_jsx(View,{style:{height:h}}):null]}):_jsx(View,{style:[E.flex,{paddingLeft:I,paddingRight:P,paddingBottom:(B?0:O)+h},x],children:i});const Y=B?_jsx(KeyboardStickyView,{style:[E.footer,{paddingLeft:I,paddingRight:P,paddingBottom:O+h}],children:c}):null;return _jsxs(View,{testID:b,style:[E.root,{paddingTop:H}],children:[L?null:N,W,Y,void 0!==f?i:null,L?N:null,u?_jsx(KeyboardToolbar,{}):null]})}
+"use strict";import{cloneElement,createElement,isValidElement,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,BackHandler,FlatList,StyleSheet,View}from"react-native";import{KeyboardStickyView}from"react-native-keyboard-controller";import{useSharedValue}from"react-native-reanimated";import{useSafeAreaInsets}from"react-native-safe-area-context";import{useRefreshControl}from"../../hooks/useRefreshControl.js";import{useTheme}from"../../theme/index.js";import{AppBar}from"../AppBar/index.js";import{AsyncBlock}from"../AsyncBlock/index.js";import{EmptyState}from"../EmptyState/index.js";import{KeyboardAwareScrollView}from"../KeyboardAwareScrollView/index.js";import{KeyboardToolbar}from"../KeyboardToolbar/index.js";import{PagedListFooter}from"../PagedListFooter/index.js";import{ScrollHostContext}from"./ScrollHost.js";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_EDGES=["top","bottom"],SCROLL_EVENT_THROTTLE=16,noop=()=>{};function renderFooter(e){return isValidElement(e)?e:e?createElement(e):null}const buildStyles=e=>StyleSheet.create({flex:{flex:1},root:{flex:1,backgroundColor:e.colors.bg},overlay:{position:"absolute",top:0,left:0,right:0},footer:{backgroundColor:e.colors.bg,borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:e.colors.border}});export function Screen(e){const{title:t,subtitle:o,largeTitle:r=!0,onBack:n,rightActions:l,leading:s,children:a,onRefresh:i,refreshing:d=!1,footer:c,scroll:u=!0,list:f,edges:m=DEFAULT_EDGES,keyboardToolbar:p=!0,bottomInset:h=0,scrollRef:g,onScroll:y,contentContainerStyle:S,testID:v}=e,x=useTheme(),b=useSafeAreaInsets(),E=useMemo(()=>buildStyles(x),[x]),[j]=useState(()=>new Animated.Value(0)),[C,T]=useState(0),k=void 0!==n,R=useRef(n);R.current=n;const _=Boolean(t||o||n||s||l?.length),L=r&&void 0!==t,V=L&&(void 0!==f||u),A=V?C:0,w=void 0!==c,{refreshControl:B}=useRefreshControl({onRefresh:i??noop,refreshing:d}),F=i?cloneElement(B,{progressViewOffset:A}):void 0,M=useSharedValue(0),K=useSharedValue(0),D=useSharedValue(0),H=useSharedValue(0),I=useRef(null),O=useRef(0),P=useRef(0),N=useMemo(()=>({top:M,bottom:K,offset:D,maxOffset:H,scrollTo:e=>I.current?.scrollTo({y:e,animated:!1})}),[M,K,D,H]),W=useCallback(e=>{I.current=e,"function"==typeof g?g(e):g&&(g.current=e)},[g]),G=useCallback(()=>{H.value=Math.max(0,O.current-P.current)},[H]),U=useRef(y);U.current=y;const z=useMemo(()=>Animated.event([{nativeEvent:{contentOffset:{y:j}}}],{useNativeDriver:!1,listener:e=>{D.value=e.nativeEvent.contentOffset.y,U.current?.(e)}}),[j,D]),Y=useCallback(e=>{const{height:t}=e.nativeEvent.layout;T(e=>Math.max(e,t))},[]);useEffect(()=>{if(!k)return;const e=BackHandler.addEventListener("hardwareBackPress",()=>(R.current?.(),!0));return()=>e.remove()},[k]);const q=m.includes("left")?b.left:0,J=m.includes("right")?b.right:0,Q=m.includes("bottom")?b.bottom:0,X=m.includes("top")&&!_?b.top:0,Z=m.filter(e=>"top"!==e&&!("bottom"===e&&w)),$=_?_jsx(View,{style:V?E.overlay:void 0,onLayout:V?Y:void 0,children:_jsx(AppBar,{title:t,subtitle:o,variant:L?"large":"default",scrollY:V?j:void 0,onBack:n,rightActions:l,leading:s})}):null,ee=V||y?z:void 0,te=useCallback(()=>{I.current?.getNativeScrollRef()?.measureInWindow((e,t,o,r)=>{P.current=r,M.value=t+A,K.value=t+r,G()})},[A,M,K,G]);useEffect(()=>{te()},[te]);const oe=useCallback((e,t)=>{O.current=t,G()},[G]);let re;if(void 0!==f){const{state:e,paging:t,...o}=f,handleEndReached=e=>{t?.hasMore&&!t.loadingMore&&null==t.errorMore&&t.loadMore(),o.onEndReached?.(e)},r=_jsx(FlatList,{keyboardShouldPersistTaps:"handled",onEndReachedThreshold:t?.5:void 0,...o,ref:g,refreshControl:F,onScroll:ee,onEndReached:t?handleEndReached:o.onEndReached,ListEmptyComponent:e?.empty?_jsx(EmptyState,{...e.empty}):void 0,ListFooterComponent:t||o.ListFooterComponent?_jsxs(_Fragment,{children:[renderFooter(o.ListFooterComponent),t?_jsx(PagedListFooter,{paging:t}):null]}):void 0,scrollEventThrottle:16,style:E.flex,contentContainerStyle:[{paddingTop:A,paddingLeft:q,paddingRight:J},{paddingBottom:(w?0:Q)+h},o.contentContainerStyle,S]});re=e?_jsx(AsyncBlock,{loading:e.loading,error:e.error,errorTitle:e.errorTitle,onRetry:e.onRetry,skeleton:e.skeleton,style:[E.flex,{paddingTop:A}],children:r}):r}else re=u?_jsx(ScrollHostContext.Provider,{value:N,children:_jsxs(KeyboardAwareScrollView,{ref:W,refreshControl:F,onScroll:z,scrollEventThrottle:16,onLayout:te,onContentSizeChange:oe,safeAreaEdges:Z,style:E.flex,contentContainerStyle:[{paddingTop:A},S],children:[a,h>0?_jsx(View,{style:{height:h}}):null]})}):_jsx(View,{style:[E.flex,{paddingLeft:q,paddingRight:J,paddingBottom:(w?0:Q)+h},S],children:a});const ne=w?_jsx(KeyboardStickyView,{style:[E.footer,{paddingLeft:q,paddingRight:J,paddingBottom:Q+h}],children:c}):null;return _jsxs(View,{testID:v,style:[E.root,{paddingTop:X}],children:[V?null:$,re,ne,void 0!==f?a:null,V?$:null,p?_jsx(KeyboardToolbar,{}):null]})}

package/lib/module/components/Screen/ScrollHost.js

@@ -0,0 +1 @@
+"use strict";import{createContext,useContext}from"react";export const ScrollHostContext=createContext(null);export function useScrollHost(){return useContext(ScrollHostContext)}

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{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};export function moveItem(e,t,a){const l=e.slice();if(t<0||t>=l.length)return l;const[r]=l.splice(t,1);return l.splice(a,0,r),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,r=0;for(let o=0;o<e.length&&r<a;o++)o!==t&&(l+=e[o]??0,r++);return l}export function dropIndex(e,t,a){"worklet";const l=topOf(e,t)+(e[t]??0)/2+a;let r=0,o=0;for(let a=0;a<e.length;a++){const s=e[a]??0;a!==t&&o+s/2<l&&r++,o+=s}return r}export function rowShifts(e,t,a){const l=[];let r=0;for(const t of e)l.push(r),r+=t;const o=e.map(()=>0),s=moveItem(e.map((e,t)=>t),t,a);let n=0;for(const t of s)o[t]=n-(l[t]??0),n+=e[t]??0;return o}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:r,dragging:o,handle:s,disabled:n,shared:i,callbacks:u,labels:c,children:d}){const m=useTheme(),v=useMemo(()=>buildStyles(m),[m]),f=useSharedValue(0);useEffect(()=>{f.value=o&&!r?withSpring(l,SPRING_CONFIG):l},[o,r,l,f]),useEffect(()=>()=>{cancelAnimation(f)},[f]);const h=useAnimatedStyle(()=>({transform:[{translateY:r?i.dragY.value:f.value}],zIndex:r?1:0})),S=useMemo(()=>{const{dragIndex:e,dropTo:a,dragY:l,translation:r,absoluteY:o,scrollY:c,scrollStart:d,heights:m}=i,{onLift:v,onDrop:f,onSettled:h}=u,S=Gesture.Pan().enabled(!n).onStart(()=>{"worklet";e.value=t,a.value=t,d.value=c.value,r.value=0,l.value=0,runOnJS(v)(t)}).onUpdate(a=>{"worklet";e.value===t&&(r.value=a.translationY,o.value=a.absoluteY)}).onFinalize(()=>{"worklet";if(e.value!==t)return;const r=a.value,o=m.value;e.value=-1,l.value=topOf(o,t)+l.value-slotTop(o,t,r),l.value=withSpring(0,SPRING_CONFIG,e=>{"worklet";e&&runOnJS(h)()}),runOnJS(f)(t,r)});return s?S:S.activateAfterLongPress(350)},[n,s,t,u,i]),p=n?[]:[...t>0?[{name:"moveUp",label:c.moveUp}]:[],...t<a-1?[{name:"moveDown",label:c.moveDown}]:[]];return _jsx(Animated.View,{style:h,onLayout:t=>u.onHeight(e,t.nativeEvent.layout.height),accessibilityActions:p,onAccessibilityAction:e=>{if(n)return;const l=t+(ACTION_STEP[e.nativeEvent.actionName]??0);l!==t&&l>=0&&l<a&&u.onMove(t,l)},testID:`sortable-row-${e}`,children:s?_jsxs(View,{style:v.handleRow,children:[_jsx(GestureDetector,{gesture:S,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:S,children:_jsx(View,{children:d})})})}export function SortableList(e){const{data:t,keyExtractor:a,renderItem:l,onReorder:r,handle:o=!1,disabled:s=!1,accessibilityLabel:n,labels:i,testID:u}=e,c=useMemo(()=>({...DEFAULT_SORTABLE_LIST_LABELS,...i}),[i]),d=useMemo(()=>t.map((e,t)=>({key:a(e,t),item:e})),[t,a]),m=useMemo(()=>d.map(e=>e.key),[d]),v=useAnimatedRef(),f=useSharedValue(0),h=useSharedValue(0),S=useSharedValue(0),p=useSharedValue(0),g=useSharedValue(-1),b=useSharedValue(-1),x=useSharedValue(0),w=useSharedValue([]),y=useRef(new Map),k=useRef(m),[_,A]=useState(null),I=useCallback(()=>{w.value=k.current.map(e=>y.current.get(e)??0)},[w]);useEffect(()=>{k.current=m,I()},[m,I]),useEffect(()=>()=>{cancelAnimation(x)},[x]);const L=useCallback(e=>{A(t=>t?.dragging?{...t,to:e}:t)},[]),E=useFrameCallback(()=>{"worklet";const e=g.value;if(e<0)return;const t=measure(v);t&&(p.value<t.pageY+48?scrollTo(v,0,Math.max(0,f.value-12),!1):p.value>t.pageY+t.height-48&&scrollTo(v,0,f.value+12,!1)),x.value=S.value+f.value-h.value;const a=dropIndex(w.value,e,x.value);a!==b.value&&(b.value=a,runOnJS(L)(a))},!1),T=useCallback(e=>{triggerHaptic("longPress"),E.setActive(!0),A({key:m[e]??"",from:e,to:e,dragging:!0})},[E,m]),V=useCallback((e,t)=>{E.setActive(!1),A(e=>e?{...e,to:t,dragging:!1}:e),t!==e&&r(moveItem(m,e,t))},[E,m,r]),j=useCallback(()=>{A(e=>e&&!e.dragging?null:e)},[]),O=useCallback((e,t)=>{r(moveItem(m,e,t))},[m,r]),R=useCallback((e,t)=>{y.current.set(e,t),I()},[I]),C=useAnimatedScrollHandler({onScroll:e=>{"worklet";f.value=e.contentOffset.y}}),D=useMemo(()=>({scrollRef:v,scrollY:f,scrollStart:h,translation:S,absoluteY:p,dragIndex:g,dropTo:b,dragY:x,heights:w}),[v,f,h,S,p,g,b,x,w]),M=useMemo(()=>({onLift:T,onDrop:V,onSettled:j,onMove:O,onHeight:R}),[T,V,j,O,R]),G=!0===_?.dragging,P=G&&_?rowShifts(m.map(e=>y.current.get(e)??0),_.from,_.to):null;return _jsx(Animated.ScrollView,{ref:v,onScroll:C,scrollEventThrottle:16,scrollEnabled:!G,accessibilityLabel:n,testID:u,children:d.map((e,t)=>{const a=_?.key===e.key;return _jsx(SortableRow,{rowKey:e.key,index:t,count:d.length,shift:P?.[t]??0,isActive:a,dragging:G,handle:o,disabled:s,shared:D,callbacks:M,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,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;

package/lib/typescript/commonjs/components/Screen/ScrollHost.d.ts

@@ -0,0 +1,16 @@
+import type { SharedValue } from "react-native-reanimated";
+/**
+ * The page scroll view a component sits inside, so a gesture inside it (a SortableList drag) can
+ * scroll the page when the finger nears the visible edge. `top` and `bottom` are the visible part
+ * in window coordinates, below the app bar.
+ */
+export interface ScrollHost {
+    top: SharedValue<number>;
+    bottom: SharedValue<number>;
+    offset: SharedValue<number>;
+    maxOffset: SharedValue<number>;
+    scrollTo: (y: number) => void;
+}
+export declare const ScrollHostContext: import("react").Context<ScrollHost | null>;
+export declare function useScrollHost(): ScrollHost | null;
+//# sourceMappingURL=ScrollHost.d.ts.map

package/lib/typescript/module/components/Screen/ScrollHost.d.ts

@@ -0,0 +1,16 @@
+import type { SharedValue } from "react-native-reanimated";
+/**
+ * The page scroll view a component sits inside, so a gesture inside it (a SortableList drag) can
+ * scroll the page when the finger nears the visible edge. `top` and `bottom` are the visible part
+ * in window coordinates, below the app bar.
+ */
+export interface ScrollHost {
+    top: SharedValue<number>;
+    bottom: SharedValue<number>;
+    offset: SharedValue<number>;
+    maxOffset: SharedValue<number>;
+    scrollTo: (y: number) => void;
+}
+export declare const ScrollHostContext: import("react").Context<ScrollHost | null>;
+export declare function useScrollHost(): ScrollHost | null;
+//# sourceMappingURL=ScrollHost.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/mobile-ui",
-  "version": "0.109.3",
+  "version": "0.109.4",
   "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/mobile-core": "0.109.3",
-    "@webority/canvas-kit": "0.109.3"
+    "@webority/canvas-kit": "0.109.4",
+    "@webority/mobile-core": "0.109.4"
   },
   "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.3",
-    "@webority/tokens": "0.109.3",
-    "@webority/mobile-dev": "0.0.0",
-    "@webority/mobile-core": "0.109.3"
+    "@webority/canvas-kit": "0.109.4",
+    "@webority/mobile-core": "0.109.4",
+    "@webority/tokens": "0.109.4",
+    "@webority/mobile-dev": "0.0.0"
   },
   "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",