@webority/mobile-ui 0.11.1 → 0.12.1

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.FloatingActionButtonGroup=exports.FloatingActionButton=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var n=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,o,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(i=t?r:n){if(i.has(e))return i.get(e);i.set(e,a)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(o.get||o.set)?i(a,t,o):a[t]=e[t]);return a})(e,t)}const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:_color.ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=exports.FloatingActionButton=(0,_react.forwardRef)((e,t)=>{const{icon:n,onPress:r,label:i,size:o="md",tone:a="primary",position:s,bottomOffset:c,disabled:l=!1,hideOnScroll:u=!1,isScrolling:d=!1,accessibilityLabel:m,accessibilityHint:p,haptic:g,style:b,containerStyle:_,labelStyle:f,testID:h}=e,y=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),v=sizeMap[o],R=(0,_react.useMemo)(()=>buildStyles(y),[y]),{scale:j,pressIn:S,pressOut:A}=(0,_usePressAnimation.usePressAnimation)({enabled:!l}),N=y.components.floatingActionButton,w=N?.edgeOffset??24,C=N?.bottomOffset??24,P=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!u)return void(0,_index.setNativeValue)(P,0);const e=_reactNative.Animated.timing(P,{toValue:d?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[u,d,P,y.motion.duration.normal,y.motion.easing.standard]);const E=P.interpolate({inputRange:[0,1],outputRange:[0,v.diameter+(c??C)+x.bottom+w]}),I=P.interpolate({inputRange:[0,1],outputRange:[1,0]}),F=n,k="string"==typeof i&&i.length>0,z=l?y.colors.surface.disabled:toneBackground(y,a),O=l?y.colors.text.disabled:toneForeground(y,a),V=(0,_react.useMemo)(()=>{if(!s)return null;const e=(c??C)+x.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:w};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:w}}},[s,c,x.bottom,C,w]);return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[V,{transform:[{translateY:E},{scale:j}],opacity:I},_,b],pointerEvents:u&&d?"none":"auto",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:t,onPress:e=>{if(l)return;const t=(0,_hapticUtils.resolveHaptic)(g,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),r()},onPressIn:S,onPressOut:A,disabled:l,accessibilityRole:"button",accessibilityLabel:m,accessibilityHint:p,accessibilityState:{disabled:l},"aria-disabled":l,testID:h,style:[R.base,k?{height:v.diameter,paddingHorizontal:v.labelPaddingHorizontal,borderRadius:v.diameter/2,..._corners.smoothCorners}:{width:v.diameter,height:v.diameter,borderRadius:v.diameter/2,..._corners.smoothCorners},y.shadows.lg,{backgroundColor:z,opacity:l?.55:1}],children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e&&!l?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,a),borderRadius:v.diameter/2,..._corners.smoothCorners}]}):null,F,k?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[R.label,{color:O,fontSize:v.fontSize,fontWeight:y.typography.fontWeight.semibold,marginLeft:y.spacing.sm},f],numberOfLines:1,children:i}):null]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>_reactNative.StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},label:{includeFontPadding:!1}}),FAB_GROUP_MIN_ACTIONS=2,FAB_GROUP_MAX_ACTIONS=6,FAB_GROUP_RANGE="2 to 6",describeActionProblem=e=>e.length<2?`was given ${e.length} action(s); a menu holds 2 to 6.`:e.length>6?`was given ${e.length} actions; a menu holds 2 to 6, so only the first 6 are drawn.`:e.some(e=>"string"!=typeof e.label||""===e.label.trim())?"has an action without a visible `label`; every menu action needs one.":"",FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:n,actions:r,open:i,defaultOpen:o=!1,onOpenChange:a,position:s="bottomRight",bottomOffset:c,size:l="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:p=!1,containerStyle:g,secondaryActionStyle:b,labelPillStyle:_,labelStyle:f,testID:h}=e,y=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),v=sizeMap[l],R=(0,_react.useMemo)(()=>buildGroupStyles(y),[y]),j=y.components.floatingActionButton,S=j?.edgeOffset??24,A=j?.bottomOffset??24,N=j?.secondaryGap??16,w=j?.staggerMs??50,C=(0,_react.useMemo)(()=>r.slice(0,6),[r]),P=C.length,E=(0,_react.useMemo)(()=>C.map((e,t)=>({action:e,index:t})).reverse(),[C]),I=__DEV__?describeActionProblem(r):"";(0,_react.useEffect)(()=>{__DEV__&&I&&console.warn(`[@webority/mobile-ui] FloatingActionButtonGroup ${I}`)},[I]);const F="boolean"==typeof i,[k,z]=(0,_react.useState)(o),O=F?i:k,V=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!m)return void(0,_index.setNativeValue)(V,0);const e=_reactNative.Animated.timing(V,{toValue:p?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,p,V,y.motion.duration.normal,y.motion.easing.standard]);const D=m&&p;(0,_react.useEffect)(()=>{D&&O&&(F||z(!1),a?.(!1))},[D,O,F,a]);const B=V.interpolate({inputRange:[0,1],outputRange:[0,v.diameter+(c??A)+x.bottom+S]}),T=V.interpolate({inputRange:[0,1],outputRange:[1,0]}),M=(0,_react.useRef)((0,_index.createAnimatedValue)(O?1:0)).current,H=(0,_react.useRef)([]),[L,q]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{const e=H.current;if(e.length!==P){if(e.length<P){const t=e.slice();for(let n=e.length;n<P;n+=1)t.push(new _reactNative.Animated.Value(O?1:0));H.current=t}else H.current=e.slice(0,P);q(e=>e+1)}},[P]),(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(M,{toValue:O?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});e.start();const t=H.current.map(e=>_reactNative.Animated.timing(e,{toValue:O?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0})),n=O?t:[...t].reverse(),r=_reactNative.Animated.stagger(w,n);return r.start(),()=>{e.stop(),r.stop()}},[O,M,y.motion.duration.normal,y.motion.easing.standard,P,L,w]);const $=(0,_react.useCallback)(e=>{const t=(0,_hapticUtils.resolveHaptic)(d,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),F||z(e),a?.(e)},[F,a,d]),G=(0,_react.useRef)(null),W=(0,_react.useRef)(O),U=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(W.current===O)return;W.current=O;const e=U.current;if(U.current=!1,D||e)return;const t=G.current;t&&("web"===_reactNative.Platform.OS?t.focus?.():_reactNative.AccessibilityInfo.sendAccessibilityEvent(t,"focus"));const n=1===P?"action":"actions";(0,_announce.announce)(O?`${u}, expanded, ${P} ${n}`:`${u}, collapsed`)},[O,D,u,P]);const Y=(0,_react.useCallback)(()=>{$(!O)},[O,$]),Q=(0,_react.useCallback)(e=>{!1!==d&&(0,_hapticUtils.triggerHaptic)("selection"),U.current=!0,e.onPress(),F||z(!1),a?.(!1)},[F,a,d]),X=(0,_react.useCallback)(()=>{O&&$(!1)},[O,$]),J=(0,_react.useMemo)(()=>{const e=(c??A)+x.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:S,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:S,alignItems:"flex-end"}}},[s,c,x.bottom,A,S]),slotOffset=e=>-(v.diameter+N)*(e+1),K=(0,_react.useMemo)(()=>{switch(s){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[s]),Z=.78*v.diameter,ee=(0,_react.useMemo)(()=>{const e=Z+y.spacing.sm;switch(s){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:v.diameter/2+Z/2+y.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[s,Z,v.diameter,y.spacing.sm]),te=M.interpolate({inputRange:[0,1],outputRange:[0,.4]}),ne=M.interpolate({inputRange:[0,1],outputRange:["0deg","45deg"]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[O?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:O?"auto":"none",style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:y.colors.background.overlay,opacity:te}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:X,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:h?`${h}-backdrop`:void 0})}):null,(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:D?"none":"box-none",style:[J,{transform:[{translateY:B}],opacity:T},g],accessibilityRole:"menu",testID:h,children:[E.map(({action:e,index:t})=>{const n=H.current[t];if(!n)return null;const r=n.interpolate({inputRange:[0,1],outputRange:[0,slotOffset(t)]}),i=n.interpolate({inputRange:[0,1],outputRange:[.6,1]}),o=toneBackground(y,e.tone??"primary"),a=toneForeground(y,e.tone??"primary"),s=e.label?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[R.labelSlot,ee],testID:h?`${h}-label-${e.key}`:void 0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[R.labelPill,y.shadows.sm,{backgroundColor:y.colors.background.elevated,paddingHorizontal:y.spacing.sm,paddingVertical:y.spacing.xs,borderRadius:y.radius.sm,..._corners.smoothCorners},_],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:y.colors.text.primary,fontSize:y.typography.fontSize.sm,fontWeight:y.typography.fontWeight.medium},f],numberOfLines:1,children:e.label})})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:O?"auto":"none",accessibilityElementsHidden:!O,importantForAccessibility:O?"auto":"no-hide-descendants","aria-hidden":!O,style:[R.secondaryRow,K,{position:"absolute",bottom:0,opacity:n,transform:[{translateY:r},{scale:i}]}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>Q(e),focusable:O,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[R.fabBase,y.shadows.md,{width:Z,height:Z,borderRadius:Z/2,..._corners.smoothCorners,backgroundColor:o},b],testID:h?`${h}-action-${e.key}`:void 0,children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,e.tone??"primary"),borderRadius:Z/2,..._corners.smoothCorners}]}):null,_react.default.isValidElement(e.icon)?e.icon:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:a},children:String(e.icon??"")})]})}),s]},e.key)}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:G,onPress:Y,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:O},"aria-expanded":O,style:[R.fabBase,y.shadows.lg,{width:v.diameter,height:v.diameter,borderRadius:v.diameter/2,..._corners.smoothCorners,backgroundColor:y.colors.primary}],testID:h?`${h}-primary`:void 0,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:_color.ACCENT_PRESSED_TINT,borderRadius:v.diameter/2,..._corners.smoothCorners}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:n?void 0:{transform:[{rotate:ne}]},children:O&&n?n:t})]})})]})]})};exports.FloatingActionButtonGroup=FloatingActionButtonGroup;const buildGroupStyles=e=>_reactNative.StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});var _default=exports.default=FloatingActionButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.FloatingActionButtonGroup=exports.FloatingActionButton=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(r=t?n:i){if(r.has(e))return r.get(e);r.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?r(o,t,a):o[t]=e[t]);return o})(e,t)}const sizeMap={sm:{diameter:40,iconSize:18,fontSize:13,labelPaddingHorizontal:14},md:{diameter:56,iconSize:22,fontSize:15,labelPaddingHorizontal:18},lg:{diameter:72,iconSize:28,fontSize:16,labelPaddingHorizontal:22}},toneBackground=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"neutral":return e.colors.background.tertiary;default:return e.colors.primary}},pressedTintFor=(e,t)=>"neutral"===t?e.colors.surface.pressed:_color.ACCENT_PRESSED_TINT,toneForeground=(e,t)=>{if("neutral"===t)return e.colors.text.primary;switch(t){case"success":return e.colors.onSuccess;case"warning":return e.colors.onWarning;case"error":return e.colors.onError;default:return e.colors.onPrimary}},FloatingActionButton=exports.FloatingActionButton=(0,_react.forwardRef)((e,t)=>{const{icon:i,onPress:n,label:r,collapsed:a=!1,size:o="md",tone:s="primary",position:c,bottomOffset:l,disabled:u=!1,hideOnScroll:d=!1,isScrolling:m=!1,accessibilityLabel:p,accessibilityHint:_,haptic:g,style:b,containerStyle:f,labelStyle:h,testID:y}=e,v=(0,_index.useTheme)(),x=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),R=sizeMap[o],j=(0,_react.useMemo)(()=>buildStyles(v),[v]),{scale:N,pressIn:S,pressOut:w}=(0,_usePressAnimation.usePressAnimation)({enabled:!u}),A=v.components.floatingActionButton,C=A?.edgeOffset??24,P=A?.bottomOffset??24,E=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!d)return void(0,_index.setNativeValue)(E,0);const e=_reactNative.Animated.timing(E,{toValue:m?1:0,duration:v.motion.duration.normal,easing:_reactNative.Easing.bezier(...v.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[d,m,E,v.motion.duration.normal,v.motion.easing.standard]);const I=E.interpolate({inputRange:[0,1],outputRange:[0,R.diameter+(l??P)+x.bottom+C]}),k=E.interpolate({inputRange:[0,1],outputRange:[1,0]}),F=i,V="string"==typeof r&&r.length>0,z=V&&a,D=(0,_useReducedMotion.useReducedMotion)(),M=v.spacing.sm,O=R.labelPaddingHorizontal,B=v.motion.duration.fast,T=v.motion.easing.standard,q=(0,_reactNativeReanimated.useSharedValue)(z?1:0),[L,H]=(0,_react.useState)(null);(0,_react.useEffect)(()=>{const e=z?1:0;return q.value=D?e:(0,_reactNativeReanimated.withTiming)(e,{duration:B,easing:_reactNativeReanimated.Easing.bezier(...T)}),()=>(0,_reactNativeReanimated.cancelAnimation)(q)},[z,D,q,B,T]);const W=(0,_react.useCallback)(e=>{const t=Math.ceil(e);H(e=>e===t?e:t)},[]),$=(0,_reactNativeReanimated.useAnimatedStyle)(()=>({paddingHorizontal:O*(1-q.value)})),G=(0,_reactNativeReanimated.useAnimatedStyle)(()=>{const e=Math.max(0,1-2*q.value);return null===L?q.value>=1?{opacity:e,width:0}:{opacity:e}:{opacity:e,width:(L+M)*(1-q.value)}}),U=u?v.colors.surface.disabled:toneBackground(v,s),Y=u?v.colors.text.disabled:toneForeground(v,s),Q=(0,_react.useMemo)(()=>{if(!c)return null;const e=(l??P)+x.bottom;switch(c){case"bottomLeft":return{position:"absolute",bottom:e,left:C};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center"};default:return{position:"absolute",bottom:e,right:C}}},[c,l,x.bottom,P,C]);return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[Q,{transform:[{translateY:I},{scale:N}],opacity:k},f,b],pointerEvents:d&&m?"none":"auto",children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:t,onPress:e=>{if(u)return;const t=(0,_hapticUtils.resolveHaptic)(g,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),n()},onPressIn:S,onPressOut:w,disabled:u,accessibilityRole:"button",accessibilityLabel:p,accessibilityHint:_,accessibilityState:{disabled:u},"aria-disabled":u,testID:y,style:[j.base,V?{height:R.diameter,minWidth:R.diameter,borderRadius:R.diameter/2,..._corners.smoothCorners}:{width:R.diameter,height:R.diameter,borderRadius:R.diameter/2,..._corners.smoothCorners},v.shadows.lg,{backgroundColor:U,opacity:u?.55:1}],children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e&&!u?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[j.pressedTint,{backgroundColor:pressedTintFor(v,s),borderRadius:R.diameter/2,..._corners.smoothCorners}]}):null,V?(0,_jsxRuntime.jsxs)(_reactNativeReanimated.default.View,{style:[j.extendedRow,$],children:[F,(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{style:[j.labelClip,G],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{onLayout:e=>W(e.nativeEvent.layout.width),style:[j.label,{color:Y,fontSize:R.fontSize,fontWeight:v.typography.fontWeight.semibold,marginLeft:M},h],numberOfLines:1,children:r})})]}):F]})})})});FloatingActionButton.displayName="FloatingActionButton";const buildStyles=e=>_reactNative.StyleSheet.create({base:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},extendedRow:{flexDirection:"row",alignItems:"center"},labelClip:{flexDirection:"row",overflow:"hidden"},label:{includeFontPadding:!1,flexShrink:0}}),FAB_GROUP_MIN_ACTIONS=2,FAB_GROUP_MAX_ACTIONS=6,FAB_GROUP_RANGE="2 to 6",describeActionProblem=e=>e.length<2?`was given ${e.length} action(s); a menu holds 2 to 6.`:e.length>6?`was given ${e.length} actions; a menu holds 2 to 6, so only the first 6 are drawn.`:e.some(e=>"string"!=typeof e.label||""===e.label.trim())?"has an action without a visible `label`; every menu action needs one.":"",FloatingActionButtonGroup=e=>{const{primaryIcon:t,primaryActiveIcon:i,actions:n,open:r,defaultOpen:a=!1,onOpenChange:o,position:s="bottomRight",bottomOffset:c,size:l="md",accessibilityLabel:u="Quick actions",haptic:d,hideOnScroll:m=!1,isScrolling:p=!1,containerStyle:_,secondaryActionStyle:g,labelPillStyle:b,labelStyle:f,testID:h}=e,y=(0,_index.useTheme)(),v=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),x=sizeMap[l],R=(0,_react.useMemo)(()=>buildGroupStyles(y),[y]),j=y.components.floatingActionButton,N=j?.edgeOffset??24,S=j?.bottomOffset??24,w=j?.secondaryGap??16,A=j?.staggerMs??50,C=(0,_react.useMemo)(()=>n.slice(0,6),[n]),P=C.length,E=(0,_react.useMemo)(()=>C.map((e,t)=>({action:e,index:t})).reverse(),[C]),I=__DEV__?describeActionProblem(n):"";(0,_react.useEffect)(()=>{__DEV__&&I&&console.warn(`[@webority/mobile-ui] FloatingActionButtonGroup ${I}`)},[I]);const k="boolean"==typeof r,[F,V]=(0,_react.useState)(a),z=k?r:F,D=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>{if(!m)return void(0,_index.setNativeValue)(D,0);const e=_reactNative.Animated.timing(D,{toValue:p?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[m,p,D,y.motion.duration.normal,y.motion.easing.standard]);const M=m&&p;(0,_react.useEffect)(()=>{M&&z&&(k||V(!1),o?.(!1))},[M,z,k,o]);const O=D.interpolate({inputRange:[0,1],outputRange:[0,x.diameter+(c??S)+v.bottom+N]}),B=D.interpolate({inputRange:[0,1],outputRange:[1,0]}),T=(0,_react.useRef)((0,_index.createAnimatedValue)(z?1:0)).current,q=(0,_react.useRef)([]),[L,H]=(0,_react.useState)(0);(0,_react.useEffect)(()=>{const e=q.current;if(e.length!==P){if(e.length<P){const t=e.slice();for(let i=e.length;i<P;i+=1)t.push(new _reactNative.Animated.Value(z?1:0));q.current=t}else q.current=e.slice(0,P);H(e=>e+1)}},[P]),(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(T,{toValue:z?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0});e.start();const t=q.current.map(e=>_reactNative.Animated.timing(e,{toValue:z?1:0,duration:y.motion.duration.normal,easing:_reactNative.Easing.bezier(...y.motion.easing.standard),useNativeDriver:!0})),i=z?t:[...t].reverse(),n=_reactNative.Animated.stagger(A,i);return n.start(),()=>{e.stop(),n.stop()}},[z,T,y.motion.duration.normal,y.motion.easing.standard,P,L,A]);const W=(0,_react.useCallback)(e=>{const t=(0,_hapticUtils.resolveHaptic)(d,"impactLight");t&&(0,_hapticUtils.triggerHaptic)(t),k||V(e),o?.(e)},[k,o,d]),$=(0,_react.useRef)(null),G=(0,_react.useRef)(z),U=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(G.current===z)return;G.current=z;const e=U.current;if(U.current=!1,M||e)return;const t=$.current;t&&("web"===_reactNative.Platform.OS?t.focus?.():_reactNative.AccessibilityInfo.sendAccessibilityEvent(t,"focus"));const i=1===P?"action":"actions";(0,_announce.announce)(z?`${u}, expanded, ${P} ${i}`:`${u}, collapsed`)},[z,M,u,P]);const Y=(0,_react.useCallback)(()=>{W(!z)},[z,W]),Q=(0,_react.useCallback)(e=>{!1!==d&&(0,_hapticUtils.triggerHaptic)("selection"),U.current=!0,e.onPress(),k||V(!1),o?.(!1)},[k,o,d]),X=(0,_react.useCallback)(()=>{z&&W(!1)},[z,W]),J=(0,_react.useMemo)(()=>{const e=(c??S)+v.bottom;switch(s){case"bottomLeft":return{position:"absolute",bottom:e,left:N,alignItems:"flex-start"};case"bottomCenter":return{position:"absolute",bottom:e,alignSelf:"center",alignItems:"center"};default:return{position:"absolute",bottom:e,right:N,alignItems:"flex-end"}}},[s,c,v.bottom,S,N]),slotOffset=e=>-(x.diameter+w)*(e+1),K=(0,_react.useMemo)(()=>{switch(s){case"bottomLeft":return{left:0,right:0,justifyContent:"flex-start"};case"bottomCenter":return{left:0,right:0,justifyContent:"center"};default:return{left:0,right:0,justifyContent:"flex-end"}}},[s]),Z=.78*x.diameter,ee=(0,_react.useMemo)(()=>{const e=Z+y.spacing.sm;switch(s){case"bottomLeft":return{left:e,alignItems:"flex-start"};case"bottomCenter":return{right:x.diameter/2+Z/2+y.spacing.sm,alignItems:"flex-end"};default:return{right:e,alignItems:"flex-end"}}},[s,Z,x.diameter,y.spacing.sm]),te=T.interpolate({inputRange:[0,1],outputRange:[0,.4]}),ie=T.interpolate({inputRange:[0,1],outputRange:["0deg","45deg"]});return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[z?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:z?"auto":"none",style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:y.colors.background.overlay,opacity:te}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:X,accessibilityElementsHidden:!0,importantForAccessibility:"no",testID:h?`${h}-backdrop`:void 0})}):null,(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:M?"none":"box-none",style:[J,{transform:[{translateY:O}],opacity:B},_],accessibilityRole:"menu",testID:h,children:[E.map(({action:e,index:t})=>{const i=q.current[t];if(!i)return null;const n=i.interpolate({inputRange:[0,1],outputRange:[0,slotOffset(t)]}),r=i.interpolate({inputRange:[0,1],outputRange:[.6,1]}),a=toneBackground(y,e.tone??"primary"),o=toneForeground(y,e.tone??"primary"),s=e.label?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[R.labelSlot,ee],testID:h?`${h}-label-${e.key}`:void 0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[R.labelPill,y.shadows.sm,{backgroundColor:y.colors.background.elevated,paddingHorizontal:y.spacing.sm,paddingVertical:y.spacing.xs,borderRadius:y.radius.sm,..._corners.smoothCorners},b],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:y.colors.text.primary,fontSize:y.typography.fontSize.sm,fontWeight:y.typography.fontWeight.medium},f],numberOfLines:1,children:e.label})})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{pointerEvents:z?"auto":"none",accessibilityElementsHidden:!z,importantForAccessibility:z?"auto":"no-hide-descendants","aria-hidden":!z,style:[R.secondaryRow,K,{position:"absolute",bottom:0,opacity:i,transform:[{translateY:n},{scale:r}]}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>Q(e),focusable:z,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel,style:[R.fabBase,y.shadows.md,{width:Z,height:Z,borderRadius:Z/2,..._corners.smoothCorners,backgroundColor:a},g],testID:h?`${h}-action-${e.key}`:void 0,children:({pressed:t})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:pressedTintFor(y,e.tone??"primary"),borderRadius:Z/2,..._corners.smoothCorners}]}):null,_react.default.isValidElement(e.icon)?e.icon:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:o},children:String(e.icon??"")})]})}),s]},e.key)}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{ref:$,onPress:Y,accessibilityRole:"button",accessibilityLabel:u,accessibilityState:{expanded:z},"aria-expanded":z,style:[R.fabBase,y.shadows.lg,{width:x.diameter,height:x.diameter,borderRadius:x.diameter/2,..._corners.smoothCorners,backgroundColor:y.colors.primary}],testID:h?`${h}-primary`:void 0,children:({pressed:e})=>(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[e?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:"fab-pressed",style:[R.pressedTint,{backgroundColor:_color.ACCENT_PRESSED_TINT,borderRadius:x.diameter/2,..._corners.smoothCorners}]}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:i?void 0:{transform:[{rotate:ie}]},children:z&&i?i:t})]})})]})]})};exports.FloatingActionButtonGroup=FloatingActionButtonGroup;const buildGroupStyles=e=>_reactNative.StyleSheet.create({fabBase:{flexDirection:"row",alignItems:"center",justifyContent:"center",overflow:"hidden"},pressedTint:{position:"absolute",top:0,right:0,bottom:0,left:0},secondaryRow:{flexDirection:"row",alignItems:"center"},labelSlot:{position:"absolute",top:0,bottom:0,justifyContent:"center"},labelPill:{alignSelf:"auto"}});var _default=exports.default=FloatingActionButton;

package/lib/commonjs/components/Input/Input.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Input=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Button/index.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_Notation=require("../Notation/Notation.js"),_jsxRuntime=require("react/jsx-runtime");const multilineMinHeightMap={sm:72,md:92,lg:110},Input=exports.Input=(0,_react.forwardRef)((e,t)=>{const{label:i,help:n,placeholder:o,value:a,onChangeText:r,error:l,helperText:s,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:x=!1,multiline:p=!1,leftIcon:f,rightIcon:g,unit:m,unitStyle:_,prefix:v,prefixStyle:h,readOnly:y=!1,action:j,actionStyle:b,size:S="md",variant:N,labelMode:R,required:F=!1,maxLength:w,showCounter:z=!0,textAlign:I,format:T,parse:V,style:k,containerStyle:B,inputStyle:A,labelStyle:C,messageStyle:q,borderRadius:D,onFocus:L,onBlur:H,accessibilityLabel:P,testID:M,editable:E,...O}=e,G=(0,_index2.useTheme)(),W=(0,_react.useMemo)(()=>buildStyles(G),[G]),$=(0,_FieldBase.resolveFieldSize)(G,S),X=multilineMinHeightMap[S],J=Math.round(1.4*$.fontSize),K=N??G.components.input?.defaultVariant??G.components.field?.defaultVariant??"outlined",Q=R??G.components.input?.defaultLabelMode??"top",[U,Y]=(0,_react.useState)(!1),[Z,ee]=(0,_react.useState)(!1),te="password"===d||u||c,ie="password"===d||u,ne="textarea"===d||p,oe=ne?Math.round(.1*$.fontSize):0,ae="string"==typeof a&&a.length>0,re=(0,_FieldBase.hasFieldText)(l),le=!0===l||re,se=(0,_FieldBase.hasFieldText)(s),de=re||!le&&se,ce=(0,_FieldBase.hasFieldText)(i),ue=(0,_FieldBase.hasFieldText)(v),xe=!x&&!1!==E,pe=U||ae||ue,fe=(0,_react.useRef)(null),ge=(0,_react.useMemo)(()=>(0,_index3.mergeRefs)(fe,t),[t]),me=(0,_react.useCallback)(()=>{xe&&fe.current?.focus()},[xe]),_e=ce&&"float"===Q,ve=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,he=(0,_react.useRef)((0,_index2.createAnimatedValue)(de?1:0)).current;(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(he,{toValue:de?1:0,duration:G.motion.duration.fast,easing:_reactNative.Easing.bezier(...G.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[de,he,G.motion.duration.fast,G.motion.easing.standard]);const ye=(0,_index.useReducedMotion)(),je=G.components.input?.shakeOnError??!1,be=(0,_react.useRef)(le);(0,_react.useEffect)(()=>{if(!je)return void(be.current=le);let e;return le&&!be.current&&(ye||((0,_index2.setNativeValue)(ve,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(ve,{toValue:1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(ve,{toValue:-1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(ve,{toValue:1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(ve,{toValue:-1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(ve,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),(0,_index3.triggerHaptic)("notificationError")),be.current=le,()=>e?.stop()},[le,ve,je,ye]);const Se=(0,_react.useCallback)(e=>{Y(!0),L?.(e)},[L]),Ne=(0,_react.useCallback)(e=>{Y(!1),H?.(e)},[H]),Re=(0,_react.useCallback)(()=>{(0,_index3.triggerHaptic)("selection"),ee(e=>!e)},[]),Fe=(0,_react.useMemo)(()=>{const e=G.components.input?.fillColors?.[K];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[G.components.input?.fillColors,K]),we=G.colors.field.caret,ze=D??G.components.input?.borderRadius,Ie=G.components.input?.tintLabelOnFocus??!1,Te=U&&Ie?G.colors.field.borderFocused:G.colors.field.label,Ve=ve.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),ke=Boolean(g)||Boolean(m)||ie,Be="underline"===K,Ae=f?$.iconSize+G.spacing.md+1+G.spacing.md:0,Ce=(0,_useFloatingLabel.useFloatingLabel)({label:i,enabled:_e,floated:pe,required:F,variant:K,sizeTokens:$,leadingOffset:Ae,trailingOffset:ke?$.iconSize+G.spacing.sm:0,textAlign:I,paddingLeft:Be?0:$.paddingHorizontal,lineHeight:ne?J:void 0,restNudge:oe,floatTrim:ne?2:0,color:Te,style:C}),qe=(0,_FieldBase.resolveFieldTextStyle)(G,{disabled:x}),De=qe.color,Le=qe.placeholderColor,He=F&&!ce&&!ae&&"string"==typeof o&&o.length>0,Pe=le?l:s,Me=z&&"number"==typeof w&&"string"==typeof a?`${a.length} / ${w}`:null,Ee=le?G.colors.field.message:G.colors.text.secondary,Oe=(0,_Notation.useNotationInk)(q,$.messageFontSize,Ee),Ge=P??(0,_FieldBase.fieldTextAsString)(i)??o,We=G.colors.field,$e=x?We.iconDisabled:U?We.iconFocused:We.icon,Xe={focused:U,disabled:x,error:le,color:$e,size:$.iconSize},renderSlot=e=>(0,_slotIcon.renderSlotIcon)(e,Xe),Je=(()=>{if(ie){const e=(Z?G.icons?.eyeOff:G.icons?.eye)??(Z?_defaultIcons.defaultIcons.eyeOff:_defaultIcons.defaultIcons.eye);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:Re,disabled:!xe,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.iconSize,color:$e})})}const e=m?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.unit,{fontSize:$.fontSize,color:Le},_],children:m}):null,t=g?(0,_jsxRuntime.jsx)(_reactNative.View,{children:renderSlot(g)}):null;return e&&t?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W.trailingRow,children:[e,t]}):e??t})(),Ke=f?(0,_jsxRuntime.jsx)(_reactNative.View,{children:renderSlot(f)}):null,Qe=_reactNative.StyleSheet.flatten(h),Ue=Qe?.fontSize??$.fontSize,Ye=Qe?.color??Le,Ze=(0,_react.useMemo)(()=>({fontSize:Ue,color:Ye}),[Ue,Ye]),et=ue?"string"==typeof v||"number"==typeof v?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.prefix,{fontSize:$.fontSize,color:Le,marginRight:G.spacing.xs,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0},h],children:v}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[W.prefixNode,{marginRight:G.spacing.xs,minHeight:ne?J:void 0,justifyContent:"center",paddingTop:ne?oe:void 0}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.prefix,{fontSize:$.fontSize,color:Le,lineHeight:ne?J:void 0},h],children:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:Ze,children:v})})}):null,tt=j?(0,_jsxRuntime.jsx)(_index4.Button,{variant:j.variant??"outline",tone:j.tone??"primary",size:S,title:j.label,leftIcon:j.icon,loading:j.loading,disabled:x||j.disabled,onPress:j.onPress,pressAnimation:!1,testID:j.testID,style:[W.action,{minHeight:$.minHeight,alignSelf:ne?"flex-start":"stretch"},b]}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[W.container,{transform:[{translateX:Ve}]},k],children:[ce&&!_e?(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:S,required:F,help:n,color:Te,style:C,children:i}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[W.fieldRow,{columnGap:G.spacing.sm,alignItems:ne?"flex-start":"stretch"}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W.fieldWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:S,variant:K,focused:U,disabled:x,error:le,filled:ae,minHeight:ne?X:void 0,borderRadius:ze,fillOverrides:Fe,leading:Ke,leadingDivider:null!=f,paddingLeft:Be?0:void 0,trailing:Je,slotAlign:ne?"top":"center",slotLineHeight:ne?J:void 0,topNotch:Ce.topNotch,onPress:me,pressFeedback:!1,style:B,children:[et,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W.inputWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:ge,style:[W.input,{color:De,fontSize:$.fontSize,...qe.weightStyle,paddingLeft:Be?0:void 0,minHeight:ne?X-2*$.paddingVertical:void 0,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0,textAlignVertical:ne?"top":"center"},A],textAlign:I,placeholder:_e&&!pe||He?void 0:o,placeholderTextColor:Le,value:T&&null!=a?T(a):a,onChangeText:e=>{r&&r(V?V(e):e)},onFocus:Se,onBlur:Ne,editable:xe,readOnly:y,secureTextEntry:te&&!Z,multiline:ne,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:w,selectionColor:we,accessibilityLabel:Ge,accessibilityState:{disabled:x},"aria-disabled":x,testID:M,...O}),He?(0,_jsxRuntime.jsx)(_FieldBase.RequiredPlaceholder,{text:o,color:Le,fontSize:$.fontSize,weightStyle:qe.weightStyle,align:ne?"top":"center",paddingTop:ne?oe:void 0,textAlign:I}):null]})]}),Ce.node]}),tt]}),de||Me?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[W.footerRow,{marginTop:$.messageGap}],children:[de?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[W.messageRow,{columnGap:G.spacing.xs+2,opacity:he}],accessibilityLiveRegion:le?"polite":"none",children:[le?(0,_jsxRuntime.jsx)(_FieldBase.FieldErrorGlyph,{size:$.messageFontSize,color:Ee}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.messageText,{color:Ee,fontSize:$.messageFontSize,...(0,_index2.fontFor)(G,"normal")},q],children:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:Oe,children:Pe})})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:W.footerSpacer}),Me?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.counterText,{color:G.colors.text.tertiary,fontSize:$.messageFontSize,...(0,_index2.fontFor)(G,"normal")}],children:Me}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:0,margin:0,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:8},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});var _default=exports.default=Input;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Input=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Button/index.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_Notation=require("../Notation/Notation.js"),_jsxRuntime=require("react/jsx-runtime");const multilineMinHeightMap={sm:72,md:92,lg:110},Input=exports.Input=(0,_react.forwardRef)((e,t)=>{const{label:i,help:n,placeholder:o,value:a,onChangeText:r,error:l,helperText:s,type:d="input",secureTextEntry:c=!1,showPasswordToggle:u=!1,disabled:x=!1,multiline:p=!1,leftIcon:f,rightIcon:g,unit:m,unitStyle:_,prefix:v,prefixStyle:h,readOnly:y=!1,action:j,actionStyle:b,size:S="md",variant:N,labelMode:R,required:F=!1,maxLength:w,showCounter:z=!0,textAlign:I,format:T,parse:V,style:k,containerStyle:B,inputStyle:A,labelStyle:C,messageStyle:q,borderRadius:D,onFocus:L,onBlur:H,accessibilityLabel:P,testID:M,editable:E,...O}=e,G=(0,_index2.useTheme)(),W=(0,_react.useMemo)(()=>buildStyles(G),[G]),$=(0,_FieldBase.resolveFieldSize)(G,S),X=multilineMinHeightMap[S],J=Math.round(1.4*$.fontSize),K=N??G.components.input?.defaultVariant??G.components.field?.defaultVariant??"outlined",Q=R??G.components.input?.defaultLabelMode??"top",[U,Y]=(0,_react.useState)(!1),[Z,ee]=(0,_react.useState)(!1),te="password"===d||u||c,ie="password"===d||u,ne="textarea"===d||p,oe=ne?Math.round(.1*$.fontSize):0,ae="string"==typeof a&&a.length>0,re=(0,_FieldBase.hasFieldText)(l),le=!0===l||re,se=(0,_FieldBase.hasFieldText)(s),de=re||!le&&se,ce=(0,_FieldBase.hasFieldText)(i),ue=(0,_FieldBase.hasFieldText)(v),xe=!x&&!1!==E,pe=U||ae||ue,fe=(0,_react.useRef)(null),ge=(0,_react.useMemo)(()=>(0,_index3.mergeRefs)(fe,t),[t]),me=(0,_react.useCallback)(()=>{xe&&fe.current?.focus()},[xe]),ve=ce&&"float"===Q,he=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,ye=(0,_react.useRef)((0,_index2.createAnimatedValue)(de?1:0)).current;(0,_react.useEffect)(()=>{const e=_reactNative.Animated.timing(ye,{toValue:de?1:0,duration:G.motion.duration.fast,easing:_reactNative.Easing.bezier(...G.motion.easing.standard),useNativeDriver:!0});return e.start(),()=>e.stop()},[de,ye,G.motion.duration.fast,G.motion.easing.standard]);const je=(0,_index.useReducedMotion)(),be=G.components.input?.shakeOnError??!1,Se=(0,_react.useRef)(le);(0,_react.useEffect)(()=>{if(!be)return void(Se.current=le);let e;return le&&!Se.current&&(je||((0,_index2.setNativeValue)(he,0),e=_reactNative.Animated.sequence([_reactNative.Animated.timing(he,{toValue:1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(he,{toValue:-1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(he,{toValue:1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(he,{toValue:-1,duration:50,useNativeDriver:!0}),_reactNative.Animated.timing(he,{toValue:0,duration:100,useNativeDriver:!0})]),e.start()),(0,_index3.triggerHaptic)("notificationError")),Se.current=le,()=>e?.stop()},[le,he,be,je]);const Ne=(0,_react.useCallback)(e=>{Y(!0),L?.(e)},[L]),Re=(0,_react.useCallback)(e=>{Y(!1),H?.(e)},[H]),Fe=(0,_react.useCallback)(()=>{(0,_index3.triggerHaptic)("selection"),ee(e=>!e)},[]),we=(0,_react.useMemo)(()=>{const e=G.components.input?.fillColors?.[K];if(!e)return;const t={};return void 0!==e.idleEmpty&&(t.backgroundIdleEmpty=e.idleEmpty),void 0!==e.idleFilled&&(t.backgroundIdleFilled=e.idleFilled),void 0!==e.focus&&(t.backgroundFocused=e.focus),void 0!==e.error&&(t.backgroundError=e.error),void 0!==e.disabled&&(t.backgroundDisabled=e.disabled),Object.keys(t).length>0?t:void 0},[G.components.input?.fillColors,K]),ze=G.colors.field.caret,Ie=D??G.components.input?.borderRadius,Te=G.components.input?.tintLabelOnFocus??!1,Ve=U&&Te?G.colors.field.borderFocused:G.colors.field.label,ke=he.interpolate({inputRange:[-1,0,1],outputRange:[-6,0,6]}),Be=Boolean(g)||Boolean(m)||ie,Ae="underline"===K,Ce=f?$.iconSize+G.spacing.md+1+G.spacing.md:0,qe=(0,_useFloatingLabel.useFloatingLabel)({label:i,enabled:ve,floated:pe,required:F,variant:K,sizeTokens:$,leadingOffset:Ce,trailingOffset:Be?$.iconSize+G.spacing.sm:0,textAlign:I,paddingLeft:Ae?0:$.paddingHorizontal,lineHeight:ne?J:void 0,restNudge:oe,floatTrim:ne?2:0,color:Ve,style:C}),De=(0,_FieldBase.resolveFieldTextStyle)(G,{disabled:x}),Le=De.color,He=De.placeholderColor,Pe=F&&!ce&&!ae&&"string"==typeof o&&o.length>0,Me=le?l:s,Ee=z&&"number"==typeof w&&"string"==typeof a?`${a.length} / ${w}`:null,Oe=le?G.colors.field.message:G.colors.text.secondary,Ge=(0,_Notation.useNotationInk)(q,$.messageFontSize,Oe),We=P??(0,_FieldBase.fieldTextAsString)(i)??o,$e=G.colors.field,Xe=x?$e.iconDisabled:U?$e.iconFocused:$e.icon,Je={focused:U,disabled:x,error:le,color:Xe,size:$.iconSize},renderSlot=e=>(0,_slotIcon.renderSlotIcon)(e,Je),Ke=(()=>{if(ie){const e=(Z?G.icons?.eyeOff:G.icons?.eye)??(Z?_defaultIcons.defaultIcons.eyeOff:_defaultIcons.defaultIcons.eye);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:Fe,disabled:!xe,hitSlop:8,accessibilityRole:"button",accessibilityLabel:Z?"Hide password":"Show password",children:e({size:$.iconSize,color:Xe})})}const e=m?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.unit,{fontSize:$.fontSize,color:He},_],children:m}):null,t=g?(0,_jsxRuntime.jsx)(_reactNative.View,{children:renderSlot(g)}):null;return e&&t?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W.trailingRow,children:[e,t]}):e??t})(),Qe=f?(0,_jsxRuntime.jsx)(_reactNative.View,{children:renderSlot(f)}):null,Ue=_reactNative.StyleSheet.flatten(h),Ye=Ue?.fontSize??$.fontSize,Ze=Ue?.color??He,et=(0,_react.useMemo)(()=>({fontSize:Ye,color:Ze}),[Ye,Ze]),tt=ue?"string"==typeof v||"number"==typeof v?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.prefix,{fontSize:$.fontSize,color:He,marginRight:G.spacing.xs,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0},h],children:v}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[W.prefixNode,{marginRight:G.spacing.xs,minHeight:ne?J:void 0,justifyContent:"center",paddingTop:ne?oe:void 0}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.prefix,{fontSize:$.fontSize,color:He,lineHeight:ne?J:void 0},h],children:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:et,children:v})})}):null,it=j?(0,_jsxRuntime.jsx)(_index4.Button,{variant:j.variant??"outline",tone:j.tone??"primary",size:S,title:j.label,leftIcon:j.icon,loading:j.loading,disabled:x||j.disabled,onPress:j.onPress,pressAnimation:!1,testID:j.testID,style:[W.action,{minHeight:$.minHeight,alignSelf:ne?"flex-start":"stretch"},b]}):null;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[W.container,{transform:[{translateX:ke}]},k],children:[ce&&!ve?(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:S,required:F,help:n,color:Ve,style:C,children:i}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[W.fieldRow,{columnGap:G.spacing.sm,alignItems:ne?"flex-start":"stretch"}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W.fieldWrapper,children:[(0,_jsxRuntime.jsxs)(_FieldBase.FieldBase,{size:S,variant:K,focused:U,disabled:x,error:le,filled:ae,minHeight:ne?X:void 0,borderRadius:Ie,fillOverrides:we,leading:Qe,leadingDivider:null!=f,paddingLeft:Ae?0:void 0,trailing:Ke,slotAlign:ne?"top":"center",slotLineHeight:ne?J:void 0,topNotch:qe.topNotch,onPress:me,pressFeedback:!1,style:B,children:[tt,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W.inputWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:ge,style:[W.input,{color:Le,fontSize:$.fontSize,...De.weightStyle,paddingLeft:Ae?0:void 0,minHeight:ne?X-2*$.paddingVertical:void 0,lineHeight:ne?J:void 0,paddingTop:ne?oe:void 0,textAlignVertical:ne?"top":"center"},A],textAlign:I,placeholder:ve&&!pe||Pe?void 0:o,placeholderTextColor:He,value:T&&null!=a?T(a):a,onChangeText:e=>{r&&r(V?V(e):e)},onFocus:Ne,onBlur:Re,editable:xe,readOnly:y,secureTextEntry:te&&!Z,multiline:ne,autoCapitalize:te?"none":void 0,autoCorrect:!te&&void 0,maxLength:w,selectionColor:ze,accessibilityLabel:We,accessibilityState:{disabled:x},"aria-disabled":x,testID:M,...O}),Pe?(0,_jsxRuntime.jsx)(_FieldBase.RequiredPlaceholder,{text:o,color:He,fontSize:$.fontSize,weightStyle:De.weightStyle,align:ne?"top":"center",paddingTop:ne?oe:void 0,textAlign:I}):null]})]}),qe.node]}),it]}),de||Ee?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[W.footerRow,{marginTop:$.messageGap}],children:[de?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[W.messageRow,{columnGap:G.spacing.xs+2,opacity:ye}],accessibilityLiveRegion:le?"polite":"none",children:[le?(0,_jsxRuntime.jsx)(_FieldBase.FieldErrorGlyph,{size:$.messageFontSize,color:Oe}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.messageText,{color:Oe,fontSize:$.messageFontSize,...(0,_index2.fontFor)(G,"normal")},q],children:(0,_jsxRuntime.jsx)(_Notation.NotationInkContext.Provider,{value:Ge,children:Me})})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:W.footerSpacer}),Ee?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[W.counterText,{color:G.colors.text.tertiary,fontSize:$.messageFontSize,...(0,_index2.fontFor)(G,"normal")}],children:Ee}):null]}):null]})});Input.displayName="Input";const buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},fieldRow:{flexDirection:"row"},fieldWrapper:{position:"relative",overflow:"visible",flex:1},action:{flexShrink:0},input:{padding:0,margin:0,includeFontPadding:!1},prefix:{flexShrink:0,includeFontPadding:!1},prefixNode:{flexShrink:0},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"},unit:{includeFontPadding:!1},trailingRow:{flexDirection:"row",alignItems:"center",columnGap:8},footerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},footerSpacer:{flex:1},messageRow:{flex:1,flexDirection:"row",alignItems:"center"},messageText:{flexShrink:1,includeFontPadding:!1},counterText:{flexShrink:0,includeFontPadding:!1}});var _default=exports.default=Input;

package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.KeyboardAwareScrollView=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_jsxRuntime=require("react/jsx-runtime");const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=exports.KeyboardAwareScrollView=(0,_react.forwardRef)((e,r)=>{const{children:t,bottomOffset:a=24,extraKeyboardSpace:o=0,safeAreaEdges:i=["bottom"],refreshing:s=!1,onRefresh:l,dismissOnTapOutside:n=!1,contentContainerStyle:d,refreshControl:c,...u}=e,f=(0,_index.useTheme)(),b=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),y=i.includes("bottom"),p={paddingBottom:y?b.bottom:0,...i.includes("top")?{paddingTop:b.top}:null,...i.includes("left")?{paddingLeft:b.left}:null,...i.includes("right")?{paddingRight:b.right}:null},x=c??(l?(0,_jsxRuntime.jsx)(_reactNative.RefreshControl,{refreshing:s,onRefresh:l,tintColor:f.colors.primary,colors:[f.colors.primary]}):void 0);return(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardAwareScrollView,{ref:r,bottomOffset:a,extraKeyboardSpace:o-(y?b.bottom:0),keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,p],refreshControl:x,...u,children:n?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessible:!1,onPress:_reactNative.Keyboard.dismiss,style:tapAreaStyle,children:t}):t})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";var _default=exports.default=KeyboardAwareScrollView;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.KeyboardAwareScrollView=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_jsxRuntime=require("react/jsx-runtime");const tapAreaStyle={flexGrow:1},KeyboardAwareScrollView=exports.KeyboardAwareScrollView=(0,_react.forwardRef)((e,r)=>{const{children:t,bottomOffset:o=24,extraKeyboardSpace:a=0,safeAreaEdges:i=["bottom"],refreshing:s=!1,onRefresh:l,dismissOnTapOutside:n=!1,contentContainerStyle:d,refreshControl:c,...u}=e,f=(0,_index.useTheme)(),b=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),y=i.includes("bottom"),p={paddingBottom:y?b.bottom:0,...i.includes("top")?{paddingTop:b.top}:null,...i.includes("left")?{paddingLeft:b.left}:null,...i.includes("right")?{paddingRight:b.right}:null},x=c??(l?(0,_jsxRuntime.jsx)(_reactNative.RefreshControl,{refreshing:s,onRefresh:l,tintColor:f.colors.primary,colors:[f.colors.primary],progressBackgroundColor:f.colors.background.elevated,titleColor:f.colors.text.secondary}):void 0);return(0,_jsxRuntime.jsx)(_reactNativeKeyboardController.KeyboardAwareScrollView,{ref:r,bottomOffset:o,extraKeyboardSpace:a-(y?b.bottom:0),keyboardShouldPersistTaps:"handled",keyboardDismissMode:"none",contentContainerStyle:[d,p],refreshControl:x,...u,children:n?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{accessible:!1,onPress:_reactNative.Keyboard.dismiss,style:tapAreaStyle,children:t}):t})});KeyboardAwareScrollView.displayName="KeyboardAwareScrollView";var _default=exports.default=KeyboardAwareScrollView;

package/lib/commonjs/components/LoaderOverlay/LoaderOverlay.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useLoader=exports.loader=exports.LoaderOverlay=void 0;var _react=require("react"),_reactNative=require("react-native"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_index2=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_SHOW_DELAY_MS=150,DEFAULT_MIN_VISIBLE_MS=400;let state={refCount:0,message:void 0};const listeners=new Set,notify=()=>{for(const e of listeners)e()},subscribe=e=>(listeners.add(e),()=>{listeners.delete(e)}),getState=()=>state,show=e=>{state={refCount:state.refCount+1,message:e??state.message},notify()},hide=()=>{if(state.refCount<=0)return;const e=state.refCount-1;state={refCount:e,message:0===e?void 0:state.message},notify()},reset=()=>{0===state.refCount&&void 0===state.message||(state={refCount:0,message:void 0},notify())},isVisible=()=>state.refCount>0,wrap=async(e,t)=>{show(t);try{return await("function"==typeof e?e():e)}finally{hide()}},loader=exports.loader={show:show,hide:hide,wrap:wrap,isVisible:isVisible,reset:reset},useLoader=()=>loader;exports.useLoader=useLoader;const LoaderOverlay=({renderIndicator:e,backdropColor:t,showDelayMs:r=150,minVisibleMs:s=400,testID:a})=>{const n=(0,_index.useTheme)(),i=(0,_useReducedMotion.useReducedMotion)(),[u,o]=(0,_react.useState)(getState),[c,l]=(0,_react.useState)(!1),d=(0,_react.useRef)(!1),f=(0,_react.useRef)(null),_=(0,_react.useRef)(null),m=(0,_react.useRef)(null),y=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current;(0,_react.useEffect)(()=>subscribe(()=>o(getState())),[]),(0,_react.useEffect)(()=>{d.current=c},[c]);const v=u.refCount>0;(0,_react.useEffect)(()=>{if(v)return null!==_.current&&(clearTimeout(_.current),_.current=null),void(d.current||null!==f.current||(f.current=setTimeout(()=>{f.current=null,m.current=Date.now(),l(!0)},r)));if(null!==f.current)return clearTimeout(f.current),void(f.current=null);if(d.current&&null===_.current){const e=null!==m.current?Date.now()-m.current:s,t=Math.max(0,s-e);_.current=setTimeout(()=>{_.current=null,m.current=null,l(!1)},t)}},[v,r,s]),(0,_react.useEffect)(()=>()=>{null!==f.current&&clearTimeout(f.current),null!==_.current&&clearTimeout(_.current)},[]),(0,_react.useEffect)(()=>{c?i?y.setValue(1):_reactNative.Animated.timing(y,{toValue:1,duration:n.motion.duration.normal,easing:_reactNative.Easing.bezier(...n.motion.easing.standard),useNativeDriver:!0}).start():y.setValue(0)},[c,i,y,n]),(0,_react.useEffect)(()=>{if(!c)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>!0);return()=>{e.remove()}},[c]);const b=u.message;(0,_react.useEffect)(()=>{c&&b&&_reactNative.AccessibilityInfo.announceForAccessibility(b)},[c,b]);const g=(0,_react.useMemo)(()=>buildStyles(),[]);return c?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"auto",testID:a,accessible:!0,accessibilityViewIsModal:!0,accessibilityLiveRegion:"polite",accessibilityLabel:b??"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,style:[g.overlay,{backgroundColor:t??n.colors.background.overlay,opacity:y}],children:e?e(b):(0,_jsxRuntime.jsx)(_index2.Spinner,{size:"lg",message:b})}):null};exports.LoaderOverlay=LoaderOverlay;const buildStyles=()=>_reactNative.StyleSheet.create({overlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useLoader=exports.loader=exports.LoaderOverlay=void 0;var _react=require("react"),_reactNative=require("react-native"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_index2=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_SHOW_DELAY_MS=150,DEFAULT_MIN_VISIBLE_MS=400;let state={refCount:0,message:void 0};const listeners=new Set,notify=()=>{for(const e of listeners)e()},subscribe=e=>(listeners.add(e),()=>{listeners.delete(e)}),getState=()=>state,show=e=>{state={refCount:state.refCount+1,message:e??state.message},notify()},hide=()=>{if(state.refCount<=0)return;const e=state.refCount-1;state={refCount:e,message:0===e?void 0:state.message},notify()},reset=()=>{0===state.refCount&&void 0===state.message||(state={refCount:0,message:void 0},notify())},isVisible=()=>state.refCount>0,wrap=async(e,t)=>{show(t);try{return await("function"==typeof e?e():e)}finally{hide()}},loader=exports.loader={show:show,hide:hide,wrap:wrap,isVisible:isVisible,reset:reset},useLoader=()=>loader;exports.useLoader=useLoader;const LoaderOverlay=({renderIndicator:e,backdropColor:t,showDelayMs:r=150,minVisibleMs:s=400,testID:a})=>{const n=(0,_index.useTheme)(),i=(0,_useReducedMotion.useReducedMotion)(),o=(0,_react.useSyncExternalStore)(subscribe,getState),[u,c]=(0,_react.useState)(!1),l=(0,_react.useRef)(null),d=(0,_react.useRef)(null),f=(0,_react.useRef)(null),_=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,y=o.refCount>0;(0,_react.useEffect)(()=>{if(y)return null!==d.current&&(clearTimeout(d.current),d.current=null),void(u||null!==l.current||(l.current=setTimeout(()=>{l.current=null,0!==getState().refCount&&(f.current=Date.now(),c(!0))},r)));if(null!==l.current&&(clearTimeout(l.current),l.current=null),u&&null===d.current){const e=null!==f.current?Date.now()-f.current:s,t=Math.max(0,s-e);d.current=setTimeout(()=>{d.current=null,f.current=null,c(!1)},t)}},[y,u,r,s]),(0,_react.useEffect)(()=>()=>{null!==l.current&&clearTimeout(l.current),null!==d.current&&clearTimeout(d.current)},[]),(0,_react.useEffect)(()=>{u?i?_.setValue(1):_reactNative.Animated.timing(_,{toValue:1,duration:n.motion.duration.normal,easing:_reactNative.Easing.bezier(...n.motion.easing.standard),useNativeDriver:!0}).start():_.setValue(0)},[u,i,_,n]),(0,_react.useEffect)(()=>{if(!u)return;const e=_reactNative.BackHandler.addEventListener("hardwareBackPress",()=>!0);return()=>{e.remove()}},[u]);const m=o.message;(0,_react.useEffect)(()=>{u&&m&&_reactNative.AccessibilityInfo.announceForAccessibility(m)},[u,m]);const v=(0,_react.useMemo)(()=>buildStyles(),[]);return u?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"auto",testID:a,accessible:!0,accessibilityViewIsModal:!0,accessibilityLiveRegion:"polite",accessibilityLabel:m??"Loading",accessibilityRole:"progressbar",accessibilityState:{busy:!0},"aria-busy":!0,style:[v.overlay,{backgroundColor:t??n.colors.background.overlay,opacity:_}],children:e?e(m):(0,_jsxRuntime.jsx)(_index2.Spinner,{size:"lg",message:m})}):null};exports.LoaderOverlay=LoaderOverlay;const buildStyles=()=>_reactNative.StyleSheet.create({overlay:{..._reactNative.StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center",zIndex:1e3}});

package/lib/commonjs/components/Menu/MenuSurface.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MenuSurface=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_placement=require("../../utils/placement.js"),_responsive=require("../../utils/responsive.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index2=require("../Divider/index.js"),_index3=require("../OptionSheet/index.js"),_index4=require("../Text/index.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_focusHost=require("./focusHost.js"),_menuModel=require("./menuModel.js"),_webOnly=require("./webOnly.js"),_jsxRuntime=require("react/jsx-runtime");const MENU_MIN_WIDTH=180,MENU_MAX_WIDTH=280,ROW_MIN_HEIGHT=48,TOP_ACTION_MIN_HEIGHT=64,ICON_SIZE=20,PREVIEW_LIFT=1.02,BACK_KEY="__menu-back",TOP_PREFIX="__menu-top:",WEB_CHECKABLE_ROLE=(0,_webOnly.webOnly)({role:"menuitemcheckbox"}),MenuSurface=e=>{const{open:t,anchor:s,items:i,title:n,topActions:r,placement:o,presentation:a,unavailable:l,context:c=!1,preview:u,onClose:d,restoreFocusTo:_,haptic:m,accessibilityLabel:p,closeLabel:x,backLabel:b,testID:h}=e,f=(0,_index.useTheme)(),v=(0,_react.useMemo)(()=>buildStyles(f),[f]),y=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),j=(0,_reactNative.useWindowDimensions)(),R=(0,_useReducedMotion.useReducedMotion)(),g=(0,_react.useMemo)(()=>(0,_menuModel.visibleGroups)(i,l),[i,l]),w=(0,_react.useMemo)(()=>(0,_menuModel.visibleTopActions)(r,l),[r,l]),I="sheet"===a||"auto"===a&&j.width<_responsive.Breakpoints.lg&&(0,_menuModel.wantsSheet)(g,w),[A,k]=(0,_react.useState)(null),[N,E]=(0,_react.useState)(null),S=(0,_react.useRef)(d);S.current=d;const T=(0,_react.useRef)(_);T.current=_;const C=(0,_react.useRef)(null),M=(0,_react.useRef)(!1),O=(0,_react.useRef)(!1),L=(0,_react.useRef)(new Map),H=(0,_react.useRef)(null),D=(0,_react.useCallback)(()=>{if(!M.current)return;M.current=!1;const e=C.current;C.current=null,e?e():(0,_focusHost.focusHost)(T.current?.())},[]);(0,_react.useEffect)(()=>{if(t)return O.current=!0,M.current=!1,C.current=null,(0,_placement.claimAnchoredSurface)(()=>S.current());O.current&&(O.current=!1,M.current=!0,k(null),E(null),I||"ios"===_reactNative.Platform.OS||D())},[t]);const P=(0,_react.useCallback)(e=>{if(e.disabled)return;const t=(0,_hapticUtils.resolveHaptic)(m,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),e.key!==BACK_KEY?e.submenu?k(e):(C.current=e.onPress??null,S.current()):k(null)},[m]),q=(0,_react.useMemo)(()=>({width:j.width,height:j.height,insets:y}),[j.width,j.height,y]),B=(0,_react.useMemo)(()=>{if(!s||!N)return null;const e=s.x+s.width/2>q.width/2?"end":"start";return(0,_placement.computePlacement)(s,N,q,o,{align:e})},[s,N,q,o]);let V=q.height-y.top-y.bottom-2*_placement.PLACEMENT_MARGIN;if(s&&B){const e=(0,_placement.placementRoom)(s,q);V="top"===B.placement?e.above:e.below}const F=Math.min(280,q.width-y.left-y.right-2*_placement.PLACEMENT_MARGIN),K=t&&null!==B,W=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,z=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current;(0,_react.useEffect)(()=>{if(!K)return(0,_index.setNativeValue)(W,0),void(0,_index.setNativeValue)(z,1);const e=[_reactNative.Animated.timing(W,{toValue:1,duration:f.motion.duration.fast,easing:_reactNative.Easing.bezier(...f.motion.easing.decelerate),useNativeDriver:!0})];c&&!R&&e.push(_reactNative.Animated.spring(z,{toValue:1.02,damping:f.motion.spring.snappy.damping,stiffness:f.motion.spring.snappy.stiffness,mass:f.motion.spring.snappy.mass,useNativeDriver:!0}));const t=_reactNative.Animated.parallel(e);return t.start(),()=>t.stop()},[K,c,R,W,z,f.motion]);const $=(0,_react.useCallback)(e=>{const{width:t,height:s}=e.nativeEvent.layout;E(e=>e&&e.width===t&&e.height===s?e:{width:t,height:s})},[]),G=c&&"top"===B?.placement,U=A?.submenu?[A.submenu]:g,Y=G?[...U].reverse().map(e=>[...e].reverse()):U,X=[];if(A)X.push({key:BACK_KEY,label:A.label});else for(const e of w)X.push({key:`${TOP_PREFIX}${e.key}`,label:e.label,item:e});for(const e of Y)for(const t of e)X.push({key:t.key,label:t.label,item:t});const Z=X[0]?.key;(0,_react.useEffect)(()=>{if(!K||I||!Z)return;const e=setTimeout(()=>(0,_focusHost.focusHost)(L.current.get(Z)),_focusHost.FOCUS_DELAY_MS);return()=>clearTimeout(e)},[K,I,Z]);const setItemRef=e=>t=>{t?L.current.set(e,t):L.current.delete(e)},J=(0,_webOnly.webOnly)({onKeyDown:e=>{const t=e.key??e.nativeEvent?.key??"",s=X.length,i=X.findIndex(e=>e.key===H.current);let n=-1;if("ArrowDown"===t)n=(i+1)%s;else if("ArrowUp"===t)n=i<=0?s-1:i-1;else if("Home"===t)n=0;else if("End"===t)n=s-1;else{if("ArrowLeft"===t&&A)return e.preventDefault?.(),void k(null);if("ArrowRight"===t&&X[i]?.item?.submenu)return e.preventDefault?.(),void P(X[i].item);if(1===t.length&&""!==t.trim()){const e=t.toLowerCase();for(let t=1;t<=s;t+=1){const r=(i+t)%s;if(X[r].label.toLowerCase().startsWith(e)){n=r;break}}}}n>=0&&(e.preventDefault?.(),(e=>{const t=X[e];t&&(0,_focusHost.focusHost)(L.current.get(t.key))})(n))}});if(I){const e=A?.submenu?[{key:BACK_KEY,label:b,icon:"chevron-left"},...A.submenu]:[...w,...g.flat()],s=new Set(e.filter(e=>e.checked).map(e=>e.key));return(0,_jsxRuntime.jsx)(_index3.OptionSheet,{open:t,onClose:d,onAfterClose:D,title:A?.label??n,options:e,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:e=>Boolean(e.disabled),destructiveOf:e=>Boolean(e.destructive),descriptionOf:e=>e.description,iconOf:e=>{const t=e;return(0,_slotIcon.renderSlotIcon)(t.icon,{color:t.destructive?f.colors.toneText.error:f.colors.text.secondary,size:20,disabled:Boolean(t.disabled)})},isSelected:e=>s.has(String(e)),onSelect:e=>P(e),accessibilityLabel:p??n,testID:h?`${h}-sheet`:void 0})}const inkFor=e=>e.disabled?f.colors.text.disabled:e.destructive?f.colors.toneText.error:f.colors.text.primary,Q=A?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:setItemRef(BACK_KEY),onPress:()=>k(null),onFocus:()=>{H.current=BACK_KEY},accessibilityRole:"menuitem",accessibilityLabel:`${b}, ${A.label}`,android_ripple:{color:f.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[v.row,e?v.pressed:null],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.icon,children:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"chevron-left",size:20,color:f.colors.text.secondary})}),(0,_jsxRuntime.jsx)(_index4.Text,{variant:"body",weight:"semibold",numberOfLines:1,style:v.labels,children:A.label})]}),(0,_jsxRuntime.jsx)(_index2.Divider,{spacing:"none"})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[n?(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:"secondary",accessibilityRole:"header",numberOfLines:2,style:v.title,children:n}):null,w.length>0?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.topRow,children:w.map(e=>{const t=`${TOP_PREFIX}${e.key}`,s=Boolean(e.disabled),i=inkFor(e);return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:setItemRef(t),onPress:()=>P(e),onFocus:()=>{H.current=t},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s},"aria-disabled":s,testID:e.testID,style:({pressed:e})=>[v.topAction,e?v.pressed:null],children:[(0,_slotIcon.renderSlotIcon)(e.icon,{color:i,size:20,disabled:s}),(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:i,numberOfLines:1,children:e.label})]},t)})}),(0,_jsxRuntime.jsx)(_index2.Divider,{spacing:"none"})]}):null]});return(0,_jsxRuntime.jsxs)(_reactNative.Modal,{visible:t,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:d,onDismiss:D,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:[_reactNative.StyleSheet.absoluteFill,c?v.scrim:null],onPress:d,accessibilityRole:"button",accessibilityLabel:x,testID:h?`${h}-scrim`:void 0}),c&&u&&s?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",style:[v.preview,{left:s.x,top:s.y,width:s.width,height:s.height,transform:[{scale:z}]}],children:u}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{accessibilityRole:"menu",accessibilityLabel:A?.label??p??n,onLayout:$,testID:h?`${h}-menu`:void 0,...J,style:[v.anchored,{left:B?.x??0,top:B?.y??0,maxWidth:F,opacity:K?W:0}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.surface,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[v.clip,{maxHeight:V}],children:[Q,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:v.scroll,bounces:!1,keyboardShouldPersistTaps:"handled",children:Y.map((e,t)=>{const s=e.some(e=>null!=e.icon);return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[t>0?(0,_jsxRuntime.jsx)(_index2.Divider,{spacing:"none"}):null,e.map(e=>((e,t)=>{const s=Boolean(e.disabled),i=inkFor(e);return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:setItemRef(e.key),onPress:()=>P(e),onFocus:()=>{H.current=e.key},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s,checked:e.checked},"aria-disabled":s,"aria-checked":e.checked,...void 0!==e.checked?WEB_CHECKABLE_ROLE:null,android_ripple:{color:f.colors.surface.pressed,borderless:!1},testID:e.testID,style:({pressed:e})=>[v.row,e?v.pressed:null],children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.icon,children:(0,_slotIcon.renderSlotIcon)(e.icon,{color:i,size:20,disabled:s})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v.labels,children:[(0,_jsxRuntime.jsx)(_index4.Text,{variant:"body",color:i,numberOfLines:2,children:e.label}),e.description?(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:"secondary",numberOfLines:2,children:e.description}):null]}),e.detail?(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:"tertiary",children:e.detail}):null,e.checked?(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"check",size:20,color:f.colors.primary}):null,e.submenu?(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"chevron-right",size:20,color:f.colors.text.tertiary}):null]},e.key)})(e,s))]},e[0].key)})})]})})}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})};exports.MenuSurface=MenuSurface;const buildStyles=e=>_reactNative.StyleSheet.create({scrim:{backgroundColor:e.colors.background.overlay},preview:{position:"absolute"},anchored:{position:"absolute",minWidth:180},surface:{backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,..._corners.smoothCorners,...e.shadows.lg},clip:{borderRadius:e.radius.md,..._corners.smoothCorners,overflow:"hidden"},scroll:{flexGrow:0,flexShrink:1},title:{paddingHorizontal:e.spacing.md,paddingTop:e.spacing.sm,paddingBottom:e.spacing.xs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,minHeight:48,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},pressed:{backgroundColor:e.colors.surface.pressed},icon:{width:20,alignItems:"center"},labels:{flexGrow:1,flexShrink:1},topRow:{flexDirection:"row",padding:e.spacing.xs,gap:e.spacing.xs},topAction:{flexGrow:1,flexBasis:0,alignItems:"center",justifyContent:"center",gap:e.spacing.xs,minHeight:64,borderRadius:e.radius.sm,..._corners.smoothCorners}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MenuSurface=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_placement=require("../../utils/placement.js"),_responsive=require("../../utils/responsive.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index2=require("../Divider/index.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_index3=require("../OptionSheet/index.js"),_index4=require("../Text/index.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_focusHost=require("./focusHost.js"),_menuModel=require("./menuModel.js"),_webOnly=require("./webOnly.js"),_jsxRuntime=require("react/jsx-runtime");const MENU_MIN_WIDTH=180,MENU_MAX_WIDTH=280,ROW_MIN_HEIGHT=48,TOP_ACTION_MIN_HEIGHT=64,ICON_SIZE=20,PREVIEW_LIFT=1.02,BACK_KEY="__menu-back",TOP_PREFIX="__menu-top:",WEB_CHECKABLE_ROLE=(0,_webOnly.webOnly)({role:"menuitemcheckbox"}),MenuSurface=e=>{const{open:t,anchor:s,items:i,title:n,topActions:r,placement:o,presentation:a,unavailable:l,context:c=!1,preview:u,onClose:d,restoreFocusTo:_,haptic:m,accessibilityLabel:p,closeLabel:x,backLabel:b,testID:h}=e,f=(0,_index.useTheme)(),v=(0,_react.useMemo)(()=>buildStyles(f),[f]),j=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),[y,R]=(0,_ModalSafeArea.useModalInsets)(),g=(0,_react.useMemo)(()=>({...j,top:y.top,bottom:y.bottom}),[j,y]),w=(0,_reactNative.useWindowDimensions)(),A=(0,_useReducedMotion.useReducedMotion)(),I=(0,_react.useMemo)(()=>(0,_menuModel.visibleGroups)(i,l),[i,l]),k=(0,_react.useMemo)(()=>(0,_menuModel.visibleTopActions)(r,l),[r,l]),S="sheet"===a||"auto"===a&&w.width<_responsive.Breakpoints.lg&&(0,_menuModel.wantsSheet)(I,k),[M,N]=(0,_react.useState)(null),[E,T]=(0,_react.useState)(null),C=(0,_react.useRef)(d);C.current=d;const O=(0,_react.useRef)(_);O.current=_;const L=(0,_react.useRef)(null),H=(0,_react.useRef)(!1),D=(0,_react.useRef)(!1),P=(0,_react.useRef)(new Map),q=(0,_react.useRef)(null),B=(0,_react.useCallback)(()=>{if(!H.current)return;H.current=!1;const e=L.current;L.current=null,e?e():(0,_focusHost.focusHost)(O.current?.())},[]);(0,_react.useEffect)(()=>{if(t)return D.current=!0,H.current=!1,L.current=null,(0,_placement.claimAnchoredSurface)(()=>C.current());D.current&&(D.current=!1,H.current=!0,N(null),T(null),S||"ios"===_reactNative.Platform.OS||B())},[t]);const V=(0,_react.useCallback)(e=>{if(e.disabled)return;const t=(0,_hapticUtils.resolveHaptic)(m,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),e.key!==BACK_KEY?e.submenu?N(e):(L.current=e.onPress??null,C.current()):N(null)},[m]),F=(0,_react.useMemo)(()=>({width:w.width,height:w.height,insets:g}),[w.width,w.height,g]),K=(0,_react.useMemo)(()=>{if(!s||!E)return null;const e=s.x+s.width/2>F.width/2?"end":"start";return(0,_placement.computePlacement)(s,E,F,o,{align:e})},[s,E,F,o]);let W=F.height-g.top-g.bottom-2*_placement.PLACEMENT_MARGIN;if(s&&K){const e=(0,_placement.placementRoom)(s,F);W="top"===K.placement?e.above:e.below}const z=Math.min(280,F.width-g.left-g.right-2*_placement.PLACEMENT_MARGIN),$=t&&null!==K,G=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,U=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current;(0,_react.useEffect)(()=>{if(!$)return(0,_index.setNativeValue)(G,0),void(0,_index.setNativeValue)(U,1);const e=[_reactNative.Animated.timing(G,{toValue:1,duration:f.motion.duration.fast,easing:_reactNative.Easing.bezier(...f.motion.easing.decelerate),useNativeDriver:!0})];c&&!A&&e.push(_reactNative.Animated.spring(U,{toValue:1.02,damping:f.motion.spring.snappy.damping,stiffness:f.motion.spring.snappy.stiffness,mass:f.motion.spring.snappy.mass,useNativeDriver:!0}));const t=_reactNative.Animated.parallel(e);return t.start(),()=>t.stop()},[$,c,A,G,U,f.motion]);const Y=(0,_react.useCallback)(e=>{const{width:t,height:s}=e.nativeEvent.layout;T(e=>e&&e.width===t&&e.height===s?e:{width:t,height:s})},[]),X=c&&"top"===K?.placement,Z=M?.submenu?[M.submenu]:I,J=X?[...Z].reverse().map(e=>[...e].reverse()):Z,Q=[];if(M)Q.push({key:BACK_KEY,label:M.label});else for(const e of k)Q.push({key:`${TOP_PREFIX}${e.key}`,label:e.label,item:e});for(const e of J)for(const t of e)Q.push({key:t.key,label:t.label,item:t});const ee=Q[0]?.key;(0,_react.useEffect)(()=>{if(!$||S||!ee)return;const e=setTimeout(()=>(0,_focusHost.focusHost)(P.current.get(ee)),_focusHost.FOCUS_DELAY_MS);return()=>clearTimeout(e)},[$,S,ee]);const setItemRef=e=>t=>{t?P.current.set(e,t):P.current.delete(e)},te=(0,_webOnly.webOnly)({onKeyDown:e=>{const t=e.key??e.nativeEvent?.key??"",s=Q.length,i=Q.findIndex(e=>e.key===q.current);let n=-1;if("ArrowDown"===t)n=(i+1)%s;else if("ArrowUp"===t)n=i<=0?s-1:i-1;else if("Home"===t)n=0;else if("End"===t)n=s-1;else{if("ArrowLeft"===t&&M)return e.preventDefault?.(),void N(null);if("ArrowRight"===t&&Q[i]?.item?.submenu)return e.preventDefault?.(),void V(Q[i].item);if(1===t.length&&""!==t.trim()){const e=t.toLowerCase();for(let t=1;t<=s;t+=1){const r=(i+t)%s;if(Q[r].label.toLowerCase().startsWith(e)){n=r;break}}}}n>=0&&(e.preventDefault?.(),(e=>{const t=Q[e];t&&(0,_focusHost.focusHost)(P.current.get(t.key))})(n))}});if(S){const e=M?.submenu?[{key:BACK_KEY,label:b,icon:"chevron-left"},...M.submenu]:[...k,...I.flat()],s=new Set(e.filter(e=>e.checked).map(e=>e.key));return(0,_jsxRuntime.jsx)(_index3.OptionSheet,{open:t,onClose:d,onAfterClose:B,title:M?.label??n,options:e,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:e=>Boolean(e.disabled),destructiveOf:e=>Boolean(e.destructive),descriptionOf:e=>e.description,iconOf:e=>{const t=e;return(0,_slotIcon.renderSlotIcon)(t.icon,{color:t.destructive?f.colors.toneText.error:f.colors.text.secondary,size:20,disabled:Boolean(t.disabled)})},isSelected:e=>s.has(String(e)),onSelect:e=>V(e),accessibilityLabel:p??n,testID:h?`${h}-sheet`:void 0})}const inkFor=e=>e.disabled?f.colors.text.disabled:e.destructive?f.colors.toneText.error:f.colors.text.primary,se=M?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:setItemRef(BACK_KEY),onPress:()=>N(null),onFocus:()=>{q.current=BACK_KEY},accessibilityRole:"menuitem",accessibilityLabel:`${b}, ${M.label}`,android_ripple:{color:f.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[v.row,e?v.pressed:null],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.icon,children:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"chevron-left",size:20,color:f.colors.text.secondary})}),(0,_jsxRuntime.jsx)(_index4.Text,{variant:"body",weight:"semibold",numberOfLines:1,style:v.labels,children:M.label})]}),(0,_jsxRuntime.jsx)(_index2.Divider,{spacing:"none"})]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[n?(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:"secondary",accessibilityRole:"header",numberOfLines:2,style:v.title,children:n}):null,k.length>0?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.topRow,children:k.map(e=>{const t=`${TOP_PREFIX}${e.key}`,s=Boolean(e.disabled),i=inkFor(e);return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:setItemRef(t),onPress:()=>V(e),onFocus:()=>{q.current=t},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s},"aria-disabled":s,testID:e.testID,style:({pressed:e})=>[v.topAction,e?v.pressed:null],children:[(0,_slotIcon.renderSlotIcon)(e.icon,{color:i,size:20,disabled:s}),(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:i,numberOfLines:1,children:e.label})]},t)})}),(0,_jsxRuntime.jsx)(_index2.Divider,{spacing:"none"})]}):null]});return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:t,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:d,onDismiss:B,children:(0,_jsxRuntime.jsxs)(_ModalSafeArea.ModalSafeArea,{onInsets:R,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:[_reactNative.StyleSheet.absoluteFill,c?v.scrim:null],onPress:d,accessibilityRole:"button",accessibilityLabel:x,testID:h?`${h}-scrim`:void 0}),c&&u&&s?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",style:[v.preview,{left:s.x,top:s.y,width:s.width,height:s.height,transform:[{scale:U}]}],children:u}):null,(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{accessibilityRole:"menu",accessibilityLabel:M?.label??p??n,onLayout:Y,testID:h?`${h}-menu`:void 0,...te,style:[v.anchored,{left:K?.x??0,top:K?.y??0,maxWidth:z,opacity:$?G:0}],children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.surface,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[v.clip,{maxHeight:W}],children:[se,(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:v.scroll,bounces:!1,keyboardShouldPersistTaps:"handled",children:J.map((e,t)=>{const s=e.some(e=>null!=e.icon);return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[t>0?(0,_jsxRuntime.jsx)(_index2.Divider,{spacing:"none"}):null,e.map(e=>((e,t)=>{const s=Boolean(e.disabled),i=inkFor(e);return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{ref:setItemRef(e.key),onPress:()=>V(e),onFocus:()=>{q.current=e.key},disabled:s,accessibilityRole:"menuitem",accessibilityLabel:e.accessibilityLabel??e.label,accessibilityState:{disabled:s,checked:e.checked},"aria-disabled":s,"aria-checked":e.checked,...void 0!==e.checked?WEB_CHECKABLE_ROLE:null,android_ripple:{color:f.colors.surface.pressed,borderless:!1},testID:e.testID,style:({pressed:e})=>[v.row,e?v.pressed:null],children:[t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:v.icon,children:(0,_slotIcon.renderSlotIcon)(e.icon,{color:i,size:20,disabled:s})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:v.labels,children:[(0,_jsxRuntime.jsx)(_index4.Text,{variant:"body",color:i,numberOfLines:2,children:e.label}),e.description?(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:"secondary",numberOfLines:2,children:e.description}):null]}),e.detail?(0,_jsxRuntime.jsx)(_index4.Text,{variant:"caption",color:"tertiary",children:e.detail}):null,e.checked?(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"check",size:20,color:f.colors.primary}):null,e.submenu?(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"chevron-right",size:20,color:f.colors.text.tertiary}):null]},e.key)})(e,s))]},e[0].key)})})]})})}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})};exports.MenuSurface=MenuSurface;const buildStyles=e=>_reactNative.StyleSheet.create({scrim:{backgroundColor:e.colors.background.overlay},preview:{position:"absolute"},anchored:{position:"absolute",minWidth:180},surface:{backgroundColor:e.colors.background.elevated,borderRadius:e.radius.md,..._corners.smoothCorners,...e.shadows.lg},clip:{borderRadius:e.radius.md,..._corners.smoothCorners,overflow:"hidden"},scroll:{flexGrow:0,flexShrink:1},title:{paddingHorizontal:e.spacing.md,paddingTop:e.spacing.sm,paddingBottom:e.spacing.xs},row:{flexDirection:"row",alignItems:"center",gap:e.spacing.md,minHeight:48,paddingHorizontal:e.spacing.md,paddingVertical:e.spacing.sm},pressed:{backgroundColor:e.colors.surface.pressed},icon:{width:20,alignItems:"center"},labels:{flexGrow:1,flexShrink:1},topRow:{flexDirection:"row",padding:e.spacing.xs,gap:e.spacing.xs},topAction:{flexGrow:1,flexBasis:0,alignItems:"center",justifyContent:"center",gap:e.spacing.xs,minHeight:64,borderRadius:e.radius.sm,..._corners.smoothCorners}});

package/lib/commonjs/components/Modal/Modal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Modal=exports.MODAL_DISMISS_GRACE_MS=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_squircle=require("../../utils/squircle.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");const MODAL_DISMISS_GRACE_MS=exports.MODAL_DISMISS_GRACE_MS=300,Modal=exports.Modal=(0,_react.forwardRef)((e,t)=>{const{visible:r,onRequestClose:i,presentation:a="centered",backdropOpacity:s,backdropPressClose:n=!0,animationDuration:o,accessibilityLabel:c,hardwareBackPress:l=!0,children:u,contentStyle:d,backdropStyle:m,restoreFocusRef:_,onDismissed:p,haptic:f,testID:g}=e,v=(0,_index.useTheme)(),b=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),x=o??v.motion.duration.normal,S=_reactNative.Dimensions.get("window").height,h=v.components.modal,y=h?.scaleStartValue??.9,N=(0,_react.useRef)((0,_index.createAnimatedValue)(y)).current,R=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,A=(0,_react.useRef)((0,_index.createAnimatedValue)(S)).current,C=(0,_react.useRef)(null),M=(0,_react.useRef)(!1),[j,q]=(0,_react.useState)(r),D=(0,_react.useMemo)(()=>buildStyles(v),[v]),T=(0,_react.useMemo)(()=>{const e=v.colors.background.overlay;if("number"!=typeof s)return e;const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return e;const[r,i,a]=t[1].split(",").map(e=>e.trim());return`rgba(${r}, ${i}, ${a}, ${s})`},[v.colors.background.overlay,s]);(0,_react.useEffect)(()=>{r&&q(!0)},[r]),(0,_react.useEffect)(()=>{const e=[];if(r&&j)if("bottom"===a){const t=_reactNative.Animated.spring(A,{toValue:0,damping:v.motion.spring.gentle.damping,stiffness:v.motion.spring.gentle.stiffness,mass:v.motion.spring.gentle.mass,useNativeDriver:!0});t.start(),e.push(t)}else{const t=_reactNative.Animated.parallel([_reactNative.Animated.spring(N,{toValue:1,damping:v.motion.spring.gentle.damping,stiffness:v.motion.spring.gentle.stiffness,mass:v.motion.spring.gentle.mass,useNativeDriver:!0}),_reactNative.Animated.timing(R,{toValue:1,duration:x,useNativeDriver:!0})]);t.start(),e.push(t)}else if(j){const t=v.motion.duration.fast,r=_reactNative.Easing.bezier(...v.motion.easing.accelerate),i=_reactNative.Animated.parallel(["bottom"===a?_reactNative.Animated.timing(A,{toValue:S,duration:t,easing:r,useNativeDriver:!0}):_reactNative.Animated.parallel([_reactNative.Animated.timing(N,{toValue:y,duration:t,easing:r,useNativeDriver:!0}),_reactNative.Animated.timing(R,{toValue:0,duration:t,easing:r,useNativeDriver:!0})])]);i.start(({finished:e})=>{e&&q(!1)}),e.push(i)}return()=>e.forEach(e=>e.stop())},[r,j,a,x,N,R,A,S,v.motion.spring.gentle.damping,v.motion.spring.gentle.stiffness,v.motion.spring.gentle.mass,v.motion.duration.fast,v.motion.easing.accelerate,y]),(0,_react.useEffect)(()=>{if("web"===_reactNative.Platform.OS)return;let e,t;return r?(e=setTimeout(()=>{C.current&&_reactNative.AccessibilityInfo.sendAccessibilityEvent(C.current,"focus")},150),M.current=!0):M.current&&(M.current=!1,_&&_.current&&(t=setTimeout(()=>{const e=_.current;e&&_reactNative.AccessibilityInfo.sendAccessibilityEvent(e,"focus")},x))),()=>{e&&clearTimeout(e),t&&clearTimeout(t)}},[r,x,_]);const k=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(r)return void(k.current=!0);if(!k.current)return;if(k.current=!1,!p)return;const e=setTimeout(p,MODAL_DISMISS_GRACE_MS);return()=>clearTimeout(e)},[r,p]);const w=(0,_react.useCallback)(()=>{if(!n)return;const e=(0,_hapticUtils.resolveHaptic)(f,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),i()},[n,i,f]),I=(0,_react.useCallback)(()=>{l&&i()},[l,i]),V=(0,_SquircleFill.useSquircle)("bottom"!==a&&"fullScreen"!==a,v.radius.xl),E=(0,_react.useMemo)(()=>"fullScreen"===a?[D.fullScreenContent,{backgroundColor:v.colors.background.elevated}]:"bottom"===a?[D.bottomContent,{backgroundColor:v.colors.background.elevated,borderTopLeftRadius:v.radius.xl,borderTopRightRadius:v.radius.xl,..._corners.smoothCorners,paddingTop:v.spacing.lg,paddingHorizontal:v.spacing.lg,paddingBottom:v.spacing.lg+b.bottom},v.shadows.xl]:[D.centeredContent,{backgroundColor:v.colors.background.elevated,borderRadius:V.active&&V.size?(0,_squircle.squircleHostRadius)(V.size.width,V.size.height,v.radius.xl):v.radius.xl,..._corners.smoothCorners,padding:v.spacing.xl},v.shadows.xl],[a,v,D,b.bottom,V.active,V.size]),z=(0,_react.useMemo)(()=>"bottom"===a?D.bottomWrapper:"fullScreen"===a?D.fullScreenWrapper:D.centeredWrapper,[a,D]),L=(0,_react.useMemo)(()=>"bottom"===a?{transform:[{translateY:A}]}:"fullScreen"===a?{opacity:R}:{opacity:R,transform:[{scale:N}]},[a,N,R,A]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:j,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:I,testID:g,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:e=>{C.current=e,"function"==typeof t?t(e):t&&(t.current=e)},style:D.root,accessible:!1,accessibilityViewIsModal:!0,accessibilityRole:"alert",accessibilityLabel:c,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{collapsable:!1,style:[_reactNative.StyleSheet.absoluteFill,z,{backgroundColor:T},m],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:w,accessibilityRole:"button",accessibilityLabel:"Close modal",disabled:!n}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[E,L,d],onLayout:V.onLayout,pointerEvents:"auto",children:[V.active&&V.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:V.size.width,height:V.size.height,radius:v.radius.xl,fill:v.colors.background.elevated}):null,u]})]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})});Modal.displayName="Modal";const buildStyles=e=>_reactNative.StyleSheet.create({root:{flex:1},centeredWrapper:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:16},centeredContent:{maxWidth:"90%",width:"90%"},bottomWrapper:{flex:1,justifyContent:"flex-end"},bottomContent:{width:"100%"},fullScreenWrapper:{flex:1},fullScreenContent:{flex:1}});var _default=exports.default=Modal;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Modal=exports.MODAL_DISMISS_GRACE_MS=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_squircle=require("../../utils/squircle.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");const MODAL_DISMISS_GRACE_MS=exports.MODAL_DISMISS_GRACE_MS=300,Modal=exports.Modal=(0,_react.forwardRef)((e,t)=>{const{visible:r,onRequestClose:a,presentation:i="centered",backdropOpacity:s,backdropPressClose:n=!0,animationDuration:o,accessibilityLabel:l,hardwareBackPress:c=!0,children:u,contentStyle:d,backdropStyle:m,restoreFocusRef:_,onDismissed:f,haptic:p,testID:g}=e,b=(0,_index.useTheme)(),[v,S]=(0,_ModalSafeArea.useModalInsets)(),x=o??b.motion.duration.normal,h=_reactNative.Dimensions.get("window").height,y=b.components.modal,M=y?.scaleStartValue??.9,A=(0,_react.useRef)((0,_index.createAnimatedValue)(M)).current,N=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,R=(0,_react.useRef)((0,_index.createAnimatedValue)(h)).current,j=(0,_react.useRef)(null),C=(0,_react.useRef)(!1),[q,D]=(0,_react.useState)(r),T=(0,_react.useMemo)(()=>buildStyles(b),[b]),k=(0,_react.useMemo)(()=>{const e=b.colors.background.overlay;if("number"!=typeof s)return e;const t=e.match(/^rgba?\(([^)]+)\)$/);if(!t)return e;const[r,a,i]=t[1].split(",").map(e=>e.trim());return`rgba(${r}, ${a}, ${i}, ${s})`},[b.colors.background.overlay,s]);(0,_react.useEffect)(()=>{r&&D(!0)},[r]),(0,_react.useEffect)(()=>{const e=[];if(r&&q)if("bottom"===i){const t=_reactNative.Animated.spring(R,{toValue:0,damping:b.motion.spring.gentle.damping,stiffness:b.motion.spring.gentle.stiffness,mass:b.motion.spring.gentle.mass,useNativeDriver:!0});t.start(),e.push(t)}else{const t=_reactNative.Animated.parallel([_reactNative.Animated.spring(A,{toValue:1,damping:b.motion.spring.gentle.damping,stiffness:b.motion.spring.gentle.stiffness,mass:b.motion.spring.gentle.mass,useNativeDriver:!0}),_reactNative.Animated.timing(N,{toValue:1,duration:x,useNativeDriver:!0})]);t.start(),e.push(t)}else if(q){const t=b.motion.duration.fast,r=_reactNative.Easing.bezier(...b.motion.easing.accelerate),a=_reactNative.Animated.parallel(["bottom"===i?_reactNative.Animated.timing(R,{toValue:h,duration:t,easing:r,useNativeDriver:!0}):_reactNative.Animated.parallel([_reactNative.Animated.timing(A,{toValue:M,duration:t,easing:r,useNativeDriver:!0}),_reactNative.Animated.timing(N,{toValue:0,duration:t,easing:r,useNativeDriver:!0})])]);a.start(({finished:e})=>{e&&D(!1)}),e.push(a)}return()=>e.forEach(e=>e.stop())},[r,q,i,x,A,N,R,h,b.motion.spring.gentle.damping,b.motion.spring.gentle.stiffness,b.motion.spring.gentle.mass,b.motion.duration.fast,b.motion.easing.accelerate,M]),(0,_react.useEffect)(()=>{if("web"===_reactNative.Platform.OS)return;let e,t;return r?(e=setTimeout(()=>{j.current&&_reactNative.AccessibilityInfo.sendAccessibilityEvent(j.current,"focus")},150),C.current=!0):C.current&&(C.current=!1,_&&_.current&&(t=setTimeout(()=>{const e=_.current;e&&_reactNative.AccessibilityInfo.sendAccessibilityEvent(e,"focus")},x))),()=>{e&&clearTimeout(e),t&&clearTimeout(t)}},[r,x,_]);const w=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(r)return void(w.current=!0);if(!w.current)return;if(w.current=!1,!f)return;const e=setTimeout(f,MODAL_DISMISS_GRACE_MS);return()=>clearTimeout(e)},[r,f]);const I=(0,_react.useCallback)(()=>{if(!n)return;const e=(0,_hapticUtils.resolveHaptic)(p,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),a()},[n,a,p]),V=(0,_react.useCallback)(()=>{c&&a()},[c,a]),E=(0,_SquircleFill.useSquircle)("bottom"!==i&&"fullScreen"!==i,b.radius.xl),z=(0,_react.useMemo)(()=>"fullScreen"===i?[T.fullScreenContent,{backgroundColor:b.colors.background.elevated}]:"bottom"===i?[T.bottomContent,{backgroundColor:b.colors.background.elevated,borderTopLeftRadius:b.radius.xl,borderTopRightRadius:b.radius.xl,..._corners.smoothCorners,paddingTop:b.spacing.lg,paddingHorizontal:b.spacing.lg,paddingBottom:b.spacing.lg+v.bottom},b.shadows.xl]:[T.centeredContent,{backgroundColor:b.colors.background.elevated,borderRadius:E.active&&E.size?(0,_squircle.squircleHostRadius)(E.size.width,E.size.height,b.radius.xl):b.radius.xl,..._corners.smoothCorners,padding:b.spacing.xl},b.shadows.xl],[i,b,T,v.bottom,E.active,E.size]),L=(0,_react.useMemo)(()=>"bottom"===i?T.bottomWrapper:"fullScreen"===i?T.fullScreenWrapper:T.centeredWrapper,[i,T]),F=(0,_react.useMemo)(()=>"bottom"===i?{transform:[{translateY:R}]}:"fullScreen"===i?{opacity:N}:{opacity:N,transform:[{scale:A}]},[i,A,N,R]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:q,transparent:!0,statusBarTranslucent:!0,navigationBarTranslucent:!0,animationType:"none",onRequestClose:V,testID:g,children:(0,_jsxRuntime.jsx)(_reactNative.View,{ref:e=>{j.current=e,"function"==typeof t?t(e):t&&(t.current=e)},style:T.root,accessible:!1,accessibilityViewIsModal:!0,accessibilityRole:"alert",accessibilityLabel:l,children:(0,_jsxRuntime.jsxs)(_ModalSafeArea.ModalSafeArea,{onInsets:S,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{collapsable:!1,style:[_reactNative.StyleSheet.absoluteFill,L,{backgroundColor:k},m],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:I,accessibilityRole:"button",accessibilityLabel:"Close modal",disabled:!n}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[z,F,d],onLayout:E.onLayout,pointerEvents:"auto",children:[E.active&&E.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:E.size.width,height:E.size.height,radius:b.radius.xl,fill:b.colors.background.elevated}):null,u]})]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})})});Modal.displayName="Modal";const buildStyles=e=>_reactNative.StyleSheet.create({root:{flex:1},centeredWrapper:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:16},centeredContent:{maxWidth:"90%",width:"90%"},bottomWrapper:{flex:1,justifyContent:"flex-end"},bottomContent:{width:"100%"},fullScreenWrapper:{flex:1},fullScreenContent:{flex:1}});var _default=exports.default=Modal;

package/lib/commonjs/components/ModalSafeArea/ModalSafeArea.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useModalInsets=exports.ModalSafeArea=exports.InsetsProbe=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_jsxRuntime=require("react/jsx-runtime");const useModalInsets=()=>{const{top:e,bottom:t}=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();return(0,_react.useState)({top:e,bottom:t})};exports.useModalInsets=useModalInsets;const InsetsProbe=({onChange:e})=>{const{top:t,bottom:s}=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)();return(0,_react.useEffect)(()=>{e(e=>e.top===t&&e.bottom===s?e:{top:t,bottom:s})},[t,s,e]),null};exports.InsetsProbe=InsetsProbe;const ModalSafeArea=({onInsets:e,children:t})=>(0,_jsxRuntime.jsxs)(_reactNativeSafeAreaContext.SafeAreaProvider,{style:styles.fill,children:[(0,_jsxRuntime.jsx)(InsetsProbe,{onChange:e}),t]});exports.ModalSafeArea=ModalSafeArea;const styles=_reactNative.StyleSheet.create({fill:{flex:1}});

package/lib/commonjs/components/OptionSheet/OptionSheet.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OptionSheet=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_useDragToDismiss=require("../../hooks/useDragToDismiss.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");const SEARCH_ICON_SIZE=18,OptionSheet=e=>{const{open:t,onClose:r,onAfterClose:i,onOpenChange:o,title:a,options:s,sections:n,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:u="Search…",emptyText:p="No options",labelOf:m,getValue:h,disabledOf:g,destructiveOf:x,descriptionOf:_,iconOf:y,isSelected:f,onSelect:b,multi:v=!1,searchable:j=!1,searchSelectionColor:R,accessibilityLabel:S,optionStyle:N,selectedOptionStyle:T,optionTextStyle:C,selectedOptionTextStyle:w,testID:k}=e,I=(0,_index.useTheme)(),V=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),z=(0,_react.useMemo)(()=>buildStyles(I),[I]),[D,L]=(0,_react.useState)(""),P=_reactNative.Dimensions.get("window").height,H=Math.round(.7*P),[W,O]=(0,_react.useState)(t),A=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,M=(0,_react.useRef)((0,_index.createAnimatedValue)(H)).current,B=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,E=(0,_react.useMemo)(()=>_reactNative.Animated.add(M,B),[M,B]);(0,_react.useEffect)(()=>{t&&O(!0)},[t]);const F=(0,_react.useRef)(o);F.current=o;const q=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{q.current!==t&&(q.current=t,F.current?.(t))},[t]);const G=(0,_react.useRef)(i);G.current=i;const $=(0,_react.useRef)(W);(0,_react.useEffect)(()=>{$.current&&!W&&"ios"!==_reactNative.Platform.OS&&G.current?.(),$.current=W},[W]),(0,_react.useEffect)(()=>{if(!W)return;t&&(0,_index.setNativeValue)(B,0);const e=t?_reactNative.Animated.parallel([_reactNative.Animated.timing(A,{toValue:1,duration:I.motion.duration.fast,easing:_reactNative.Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.spring(M,{toValue:0,damping:I.motion.spring.snappy.damping,stiffness:I.motion.spring.snappy.stiffness,mass:I.motion.spring.snappy.mass,useNativeDriver:!0})]):_reactNative.Animated.parallel([_reactNative.Animated.timing(A,{toValue:0,duration:I.motion.duration.fast,easing:_reactNative.Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.timing(M,{toValue:H,duration:I.motion.duration.fast,easing:_reactNative.Easing.bezier(...I.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&O(!1)}),()=>e.stop()},[t,W,A,M,B,H,I.motion.duration.fast,I.motion.easing.standard,I.motion.easing.accelerate,I.motion.spring.snappy]);const{handleGesture:K}=(0,_useDragToDismiss.useDragToDismiss)({drag:B,travel:H,onDismiss:r}),J=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Native(),[]),[U,Y]=(0,_react.useState)(0),Z=(0,_reactNativeKeyboardController.useKeyboardState)(e=>e.height),Q=W?Math.max(0,Math.round(Z)):0,X=Math.max(V.top,_reactNative.StatusBar.currentHeight??0)+I.spacing.sm,ee=Q>0,te=ee?Math.max(0,Math.min(H,(U>0?U:P)-Q-X)):H;(0,_react.useEffect)(()=>{t||L("")},[t]);const re=(0,_react.useMemo)(()=>{const e=j?D.trim().toLowerCase():"",matches=t=>0===e.length||m(t).toLowerCase().includes(e)||(_(t)??"").toLowerCase().includes(e);if(!n)return s.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.forEach((e,r)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:r})}}),t},[j,D,s,n,m,_]),ie=(0,_react.useCallback)(()=>{r()},[r]),oe=(0,_react.useRef)(null),ae=(0,_react.useMemo)(()=>{const e=new Map;if(!d)return e;let t=0;if(n)for(let e=re.length-1;e>=0;e-=1)if("header"===re[e].kind){t=e+1;break}for(let r=t;r<re.length;r+=1){const t=re[r];if("option"!==t.kind)continue;const i=m(t.option).trim().charAt(0).toUpperCase(),o=/^[A-Z]$/.test(i)?i:"#";e.has(o)||e.set(o,r)}return e},[d,re,n,m]),se=d&&ae.size>0&&0===D.trim().length,ne=(0,_react.useMemo)(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...ae.has("#")?["#"]:[]],[ae]),le=(0,_react.useCallback)(e=>{const t=ae.get(e);void 0!==t&&oe.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[ae]),ce=(0,_react.useRef)(null),de=(0,_react.useCallback)(()=>{null!==ce.current&&(clearTimeout(ce.current),ce.current=null)},[]),ue=(0,_react.useCallback)(e=>{oe.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),de(),ce.current=setTimeout(()=>{ce.current=null,oe.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[de]);(0,_react.useEffect)(()=>(W||de(),de),[W,de]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:W,transparent:!0,animationType:"none",onRequestClose:ie,onDismiss:()=>G.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{collapsable:!1,onLayout:e=>Y(e.nativeEvent.layout.height),style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:I.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:ie,accessibilityRole:"button",accessibilityLabel:"Close picker"}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{testID:k,accessibilityViewIsModal:!0,accessibilityLabel:S??a??"Options",style:[z.sheet,{maxHeight:te,bottom:Q,paddingBottom:ee?16:V.bottom+16,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius.xl,borderTopRightRadius:I.radius.xl,..._corners.smoothCorners,transform:[{translateY:E}],...I.shadows.xl}],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:K,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:z.sheetHandleRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.sheetHandle,{backgroundColor:I.components.select?.handleColor??I.components.bottomSheet?.handleColor??I.colors.border.primary}]})}),a?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.sheetTitle,{color:I.colors.text.primary,fontSize:I.typography.fontSize.lg,fontWeight:I.typography.fontWeight.semibold,paddingHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:a}):null]})}),j?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.searchWrap,{marginHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[z.searchBox,{backgroundColor:I.colors.background.secondary,borderColor:I.colors.border.primary,borderRadius:I.radius.md,..._corners.smoothCorners,paddingHorizontal:I.spacing.md,gap:I.spacing.sm}],children:[(I.icons?.search??_defaultIcons.defaultIcons.search)({size:18,color:I.colors.text.tertiary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:D,onChangeText:L,placeholder:u,placeholderTextColor:I.colors.text.tertiary,selectionColor:R??I.colors.border.focus,accessibilityLabel:"Search options",style:[z.searchInput,{color:I.colors.text.primary,fontSize:I.typography.fontSize.base,paddingVertical:I.spacing.sm}]}),D.length>0?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>L(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(I.icons?.close??_defaultIcons.defaultIcons.close)({size:18,color:I.colors.text.secondary})}):null]})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[z.listWrap,se?z.listRow:null],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:J,children:(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:oe,data:re,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:!0,accessibilityRole:"header",style:[z.sectionHeader,{paddingHorizontal:I.spacing.lg,paddingTop:I.spacing.md}],children:l?l(e.title):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.sectionTitle,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,r=m(t),i=h(t),o=_(t),a=y(t),s=f(i),n=g(t),d=x?.(t)??!1;return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>b(t),disabled:n,android_ripple:{color:I.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{selected:s,disabled:n},"aria-selected":s,"aria-disabled":n,style:({pressed:e})=>[z.optionRow,{backgroundColor:s?I.colors.surface.selected:e?I.colors.surface.pressed:"transparent",opacity:n?.5:1,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md},N,s?T:null],children:[c?(0,_jsxRuntime.jsx)(_reactNative.View,{style:z.optionTextWrap,children:c(t,{selected:s,disabled:n})}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:z.optionIcon,children:a}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:z.optionTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.optionLabel,{color:d?I.colors.toneText.error:s?I.colors.primary:I.colors.text.primary,fontSize:I.typography.fontSize.base,fontWeight:s?I.typography.fontWeight.semibold:I.typography.fontWeight.medium},C,s?w:null],children:r}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.optionDescription,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm}],numberOfLines:2,children:o}):null]})]}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.checkbox,{borderColor:s?I.colors.primary:I.colors.border.primary,backgroundColor:s?I.colors.primary:"transparent"}],children:s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:z.checkboxTick}):null}):s?"icon"===I.components.optionSheet?.selectedMarker?(0,_jsxRuntime.jsx)(_reactNative.View,{style:z.singleSelectedIcon,children:(I.icons?.selectedTick??_defaultIcons.defaultIcons.selectedTick)({size:20,color:I.colors.primary})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.singleSelectedDot,{backgroundColor:I.colors.primary}]}):null]})},onScrollToIndexFailed:ue,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!se,style:se?z.listBesideRail:null,ListEmptyComponent:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.empty,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm,paddingVertical:I.spacing.xl}],children:p})})}),se?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.rail,{paddingRight:I.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:ne.map(e=>{const t=ae.has(e);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>le(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:z.railLetter,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.railLetterText,{color:t?I.colors.primary:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.sheetFooter,{borderTopColor:I.colors.border.secondary,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:ie,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[z.doneButton,{backgroundColor:e?I.colors.primaryPressed:I.colors.primary,borderRadius:I.radius.md,..._corners.smoothCorners,paddingVertical:I.spacing.sm,paddingHorizontal:I.spacing.lg}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:I.colors.onPrimary,fontSize:I.typography.fontSize.base,fontWeight:I.typography.fontWeight.semibold},children:"Done"})})}):null]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})};exports.OptionSheet=OptionSheet,OptionSheet.displayName="OptionSheet";const buildStyles=e=>_reactNative.StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,..._corners.smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,..._corners.smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,..._corners.smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});var _default=exports.default=OptionSheet;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.OptionSheet=void 0;var _react=require("react"),_reactNative=require("react-native"),_reactNativeGestureHandler=require("react-native-gesture-handler"),_reactNativeKeyboardController=require("react-native-keyboard-controller"),_useDragToDismiss=require("../../hooks/useDragToDismiss.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_jsxRuntime=require("react/jsx-runtime");const SEARCH_ICON_SIZE=18,OptionSheet=e=>{const{open:t,onClose:r,onAfterClose:i,onOpenChange:o,title:a,options:s,sections:n,renderSectionHeader:l,renderOption:c,alphabetIndex:d=!1,searchPlaceholder:u="Search…",emptyText:p="No options",labelOf:m,getValue:h,disabledOf:g,destructiveOf:x,descriptionOf:_,iconOf:y,isSelected:f,onSelect:b,multi:v=!1,searchable:j=!1,searchSelectionColor:R,accessibilityLabel:S,optionStyle:N,selectedOptionStyle:T,optionTextStyle:C,selectedOptionTextStyle:w,testID:k}=e,I=(0,_index.useTheme)(),[V,z]=(0,_ModalSafeArea.useModalInsets)(),D=(0,_react.useMemo)(()=>buildStyles(I),[I]),[L,P]=(0,_react.useState)(""),H=_reactNative.Dimensions.get("window").height,M=Math.round(.7*H),[W,A]=(0,_react.useState)(t),O=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,B=(0,_react.useRef)((0,_index.createAnimatedValue)(M)).current,E=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,F=(0,_react.useMemo)(()=>_reactNative.Animated.add(B,E),[B,E]);(0,_react.useEffect)(()=>{t&&A(!0)},[t]);const q=(0,_react.useRef)(o);q.current=o;const G=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{G.current!==t&&(G.current=t,q.current?.(t))},[t]);const $=(0,_react.useRef)(i);$.current=i;const K=(0,_react.useRef)(W);(0,_react.useEffect)(()=>{K.current&&!W&&"ios"!==_reactNative.Platform.OS&&$.current?.(),K.current=W},[W]),(0,_react.useEffect)(()=>{if(!W)return;t&&(0,_index.setNativeValue)(E,0);const e=t?_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:1,duration:I.motion.duration.fast,easing:_reactNative.Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.spring(B,{toValue:0,damping:I.motion.spring.snappy.damping,stiffness:I.motion.spring.snappy.stiffness,mass:I.motion.spring.snappy.mass,useNativeDriver:!0})]):_reactNative.Animated.parallel([_reactNative.Animated.timing(O,{toValue:0,duration:I.motion.duration.fast,easing:_reactNative.Easing.bezier(...I.motion.easing.standard),useNativeDriver:!1}),_reactNative.Animated.timing(B,{toValue:M,duration:I.motion.duration.fast,easing:_reactNative.Easing.bezier(...I.motion.easing.accelerate),useNativeDriver:!0})]);return e.start(({finished:e})=>{e&&!t&&A(!1)}),()=>e.stop()},[t,W,O,B,E,M,I.motion.duration.fast,I.motion.easing.standard,I.motion.easing.accelerate,I.motion.spring.snappy]);const{handleGesture:J}=(0,_useDragToDismiss.useDragToDismiss)({drag:E,travel:M,onDismiss:r}),U=(0,_react.useMemo)(()=>_reactNativeGestureHandler.Gesture.Native(),[]),[Y,Z]=(0,_react.useState)(0),Q=(0,_reactNativeKeyboardController.useKeyboardState)(e=>e.height),X=W?Math.max(0,Math.round(Q)):0,ee=Math.max(V.top,_reactNative.StatusBar.currentHeight??0)+I.spacing.sm,te=X>0,re=te?Math.max(0,Math.min(M,(Y>0?Y:H)-X-ee)):M;(0,_react.useEffect)(()=>{t||P("")},[t]);const ie=(0,_react.useMemo)(()=>{const e=j?L.trim().toLowerCase():"",matches=t=>0===e.length||m(t).toLowerCase().includes(e)||(_(t)??"").toLowerCase().includes(e);if(!n)return s.filter(matches).map(e=>({kind:"option",option:e}));const t=[];return n.forEach((e,r)=>{const i=e.options.filter(matches);if(0!==i.length){t.push({kind:"header",title:e.title});for(const e of i)t.push({kind:"option",option:e,section:r})}}),t},[j,L,s,n,m,_]),oe=(0,_react.useCallback)(()=>{r()},[r]),ae=(0,_react.useRef)(null),se=(0,_react.useMemo)(()=>{const e=new Map;if(!d)return e;let t=0;if(n)for(let e=ie.length-1;e>=0;e-=1)if("header"===ie[e].kind){t=e+1;break}for(let r=t;r<ie.length;r+=1){const t=ie[r];if("option"!==t.kind)continue;const i=m(t.option).trim().charAt(0).toUpperCase(),o=/^[A-Z]$/.test(i)?i:"#";e.has(o)||e.set(o,r)}return e},[d,ie,n,m]),ne=d&&se.size>0&&0===L.trim().length,le=(0,_react.useMemo)(()=>[..."ABCDEFGHIJKLMNOPQRSTUVWXYZ",...se.has("#")?["#"]:[]],[se]),ce=(0,_react.useCallback)(e=>{const t=se.get(e);void 0!==t&&ae.current?.scrollToIndex({index:t,animated:!0,viewPosition:0})},[se]),de=(0,_react.useRef)(null),ue=(0,_react.useCallback)(()=>{null!==de.current&&(clearTimeout(de.current),de.current=null)},[]),pe=(0,_react.useCallback)(e=>{ae.current?.scrollToOffset({offset:e.averageItemLength*e.index,animated:!1}),ue(),de.current=setTimeout(()=>{de.current=null,ae.current?.scrollToIndex({index:e.index,animated:!0,viewPosition:0})},50)},[ue]);(0,_react.useEffect)(()=>(W||ue(),ue),[W,ue]);return(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:W,transparent:!0,animationType:"none",onRequestClose:oe,onDismiss:()=>$.current?.(),statusBarTranslucent:!0,navigationBarTranslucent:!0,children:(0,_jsxRuntime.jsx)(_ModalSafeArea.ModalSafeArea,{onInsets:z,children:(0,_jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView,{collapsable:!1,onLayout:e=>Z(e.nativeEvent.layout.height),style:[_reactNative.StyleSheet.absoluteFill,{backgroundColor:I.colors.background.overlay}],children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:oe,accessibilityRole:"button",accessibilityLabel:"Close picker"}),(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{testID:k,accessibilityViewIsModal:!0,accessibilityLabel:S??a??"Options",style:[D.sheet,{maxHeight:re,bottom:X,paddingBottom:te?16:V.bottom+16,backgroundColor:I.colors.background.elevated,borderTopLeftRadius:I.radius.xl,borderTopRightRadius:I.radius.xl,..._corners.smoothCorners,transform:[{translateY:F}],...I.shadows.xl}],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:J,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:D.sheetHandleRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[D.sheetHandle,{backgroundColor:I.components.select?.handleColor??I.components.bottomSheet?.handleColor??I.colors.border.primary}]})}),a?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[D.sheetTitle,{color:I.colors.text.primary,fontSize:I.typography.fontSize.lg,fontWeight:I.typography.fontWeight.semibold,paddingHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:a}):null]})}),j?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[D.searchWrap,{marginHorizontal:I.spacing.lg,marginBottom:I.spacing.sm}],children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[D.searchBox,{backgroundColor:I.colors.background.secondary,borderColor:I.colors.border.primary,borderRadius:I.radius.md,..._corners.smoothCorners,paddingHorizontal:I.spacing.md,gap:I.spacing.sm}],children:[(I.icons?.search??_defaultIcons.defaultIcons.search)({size:18,color:I.colors.text.tertiary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:L,onChangeText:P,placeholder:u,placeholderTextColor:I.colors.text.tertiary,selectionColor:R??I.colors.border.focus,accessibilityLabel:"Search options",style:[D.searchInput,{color:I.colors.text.primary,fontSize:I.typography.fontSize.base,paddingVertical:I.spacing.sm}]}),L.length>0?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>P(""),hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(I.icons?.close??_defaultIcons.defaultIcons.close)({size:18,color:I.colors.text.secondary})}):null]})}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[D.listWrap,ne?D.listRow:null],children:[(0,_jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector,{gesture:U,children:(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:ae,data:ie,keyExtractor:e=>"header"===e.kind?`h:${e.title}`:`o:${e.section??""}:${String(h(e.option))}`,renderItem:({item:e})=>{if("header"===e.kind)return(0,_jsxRuntime.jsx)(_reactNative.View,{accessible:!0,accessibilityRole:"header",style:[D.sectionHeader,{paddingHorizontal:I.spacing.lg,paddingTop:I.spacing.md}],children:l?l(e.title):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[D.sectionTitle,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold}],children:e.title.toUpperCase()})});const t=e.option,r=m(t),i=h(t),o=_(t),a=y(t),s=f(i),n=g(t),d=x?.(t)??!1;return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>b(t),disabled:n,android_ripple:{color:I.colors.surface.pressed,borderless:!1},accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{selected:s,disabled:n},"aria-selected":s,"aria-disabled":n,style:({pressed:e})=>[D.optionRow,{backgroundColor:s?I.colors.surface.selected:e?I.colors.surface.pressed:"transparent",opacity:n?.5:1,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md},N,s?T:null],children:[c?(0,_jsxRuntime.jsx)(_reactNative.View,{style:D.optionTextWrap,children:c(t,{selected:s,disabled:n})}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{style:D.optionIcon,children:a}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:D.optionTextWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[D.optionLabel,{color:d?I.colors.toneText.error:s?I.colors.primary:I.colors.text.primary,fontSize:I.typography.fontSize.base,fontWeight:s?I.typography.fontWeight.semibold:I.typography.fontWeight.medium},C,s?w:null],children:r}),o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[D.optionDescription,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm}],numberOfLines:2,children:o}):null]})]}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[D.checkbox,{borderColor:s?I.colors.primary:I.colors.border.primary,backgroundColor:s?I.colors.primary:"transparent"}],children:s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:D.checkboxTick}):null}):s?"icon"===I.components.optionSheet?.selectedMarker?(0,_jsxRuntime.jsx)(_reactNative.View,{style:D.singleSelectedIcon,children:(I.icons?.selectedTick??_defaultIcons.defaultIcons.selectedTick)({size:20,color:I.colors.primary})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[D.singleSelectedDot,{backgroundColor:I.colors.primary}]}):null]})},onScrollToIndexFailed:pe,overScrollMode:"never",bounces:!1,keyboardShouldPersistTaps:"handled",showsVerticalScrollIndicator:!ne,style:ne?D.listBesideRail:null,ListEmptyComponent:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[D.empty,{color:I.colors.text.tertiary,fontSize:I.typography.fontSize.sm,paddingVertical:I.spacing.xl}],children:p})})}),ne?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[D.rail,{paddingRight:I.spacing.xs}],accessibilityRole:"list",accessibilityLabel:"Jump to letter",testID:"option-sheet-alphabet",children:le.map(e=>{const t=se.has(e);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>ce(e),disabled:!t,hitSlop:{left:8,right:8},accessibilityRole:"button",accessibilityLabel:`Jump to ${e}`,accessibilityState:{disabled:!t},"aria-disabled":!t,style:D.railLetter,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[D.railLetterText,{color:t?I.colors.primary:I.colors.text.tertiary,fontSize:I.typography.fontSize.xs,fontWeight:I.typography.fontWeight.semibold,opacity:t?1:.45}],children:e})},e)})}):null]}),v?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[D.sheetFooter,{borderTopColor:I.colors.border.secondary,paddingHorizontal:I.spacing.lg,paddingVertical:I.spacing.md}],children:(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:oe,accessibilityRole:"button",accessibilityLabel:"Done",style:({pressed:e})=>[D.doneButton,{backgroundColor:e?I.colors.primaryPressed:I.colors.primary,borderRadius:I.radius.md,..._corners.smoothCorners,paddingVertical:I.spacing.sm,paddingHorizontal:I.spacing.lg}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:{color:I.colors.onPrimary,fontSize:I.typography.fontSize.base,fontWeight:I.typography.fontWeight.semibold},children:"Done"})})}):null]}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})})};exports.OptionSheet=OptionSheet,OptionSheet.displayName="OptionSheet";const buildStyles=e=>_reactNative.StyleSheet.create({sheet:{position:"absolute",left:0,right:0,bottom:0,paddingBottom:16,overflow:"hidden"},sheetHandleRow:{alignItems:"center",paddingTop:10,paddingBottom:8},sheetHandle:{width:36,height:4,borderRadius:2,..._corners.smoothCorners},sheetTitle:{includeFontPadding:!1},searchWrap:{width:"auto"},searchBox:{flexDirection:"row",alignItems:"center",borderWidth:1},searchInput:{flex:1,includeFontPadding:!1},optionRow:{flexDirection:"row",alignItems:"center"},sectionHeader:{paddingBottom:4},listWrap:{flexShrink:1},listRow:{flexDirection:"row"},listBesideRail:{flex:1},rail:{justifyContent:"space-between",alignItems:"center",alignSelf:"stretch",paddingVertical:4},railLetter:{paddingHorizontal:4,minHeight:14,justifyContent:"center"},railLetterText:{includeFontPadding:!1,lineHeight:14},sectionTitle:{includeFontPadding:!1,letterSpacing:.6},optionIcon:{marginRight:12},optionTextWrap:{flex:1},optionLabel:{includeFontPadding:!1},optionDescription:{includeFontPadding:!1,marginTop:2},checkbox:{width:22,height:22,borderRadius:6,..._corners.smoothCorners,borderWidth:2,alignItems:"center",justifyContent:"center",marginLeft:12},checkboxTick:{width:10,height:6,borderLeftWidth:2,borderBottomWidth:2,borderColor:e.colors.onPrimary,transform:[{rotate:"-45deg"},{translateY:-1}]},singleSelectedDot:{width:8,height:8,borderRadius:4,..._corners.smoothCorners,marginLeft:12},singleSelectedIcon:{marginLeft:12},empty:{textAlign:"center"},sheetFooter:{borderTopWidth:_reactNative.StyleSheet.hairlineWidth,alignItems:"flex-end"},doneButton:{alignSelf:"flex-end"}});var _default=exports.default=OptionSheet;

package/lib/commonjs/components/PhoneNumberInput/PhoneNumberInput.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.parseE164=exports.formatE164=exports.default=exports.PhoneNumberInput=exports.DEFAULT_CALLING_CODES=exports.ALL_CALLING_CODES=void 0;var _mobileCore=require("@webority/mobile-core"),_countries=require("@webority/mobile-core/phone/countries"),_react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_index4=require("../FieldBase/index.js"),_Chevron=require("../FieldBase/Chevron.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_CALLING_CODES=exports.DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}],ALL_CALLING_CODES=exports.ALL_CALLING_CODES=(0,_mobileCore.getPhoneCountries)().map(e=>({iso:e.iso,code:e.callingCode,label:_countries.PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label)),digitsOnly=e=>e.replace(/[^0-9]/g,""),formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;exports.formatE164=formatE164;const parseE164=(e,t,i)=>{const o=e.replace(/[^0-9]/g,"");if(!o)return null;const n=(0,_mobileCore.splitPhoneNumber)(`+${o}`);let r=n?.callingCode,l=n?.nationalNumber??"";if(!r){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(r=e.find(e=>o.startsWith(e)),!r)return null;l=o.slice(r.length)}const a=t.filter(e=>e.code===r),s=a.find(e=>e.iso===i)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:r,nationalNumber:l,iso:s}};exports.parseE164=parseE164;const planOf=e=>(0,_mobileCore.isSupportedCountry)(e)?e:null,PhoneNumberInput=exports.PhoneNumberInput=(0,_react.forwardRef)((e,t)=>{const{value:i,defaultValue:o,onChange:n,e164:r,onChangeE164:l,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:c,onComplete:d,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:_="Popular",allCountriesTitle:f="All countries",hiddenCountries:h,showFlag:g=!0,renderFlag:x,renderCountry:C,countrySearchPlaceholder:N,showAlphabetIndex:y,defaultIso:S="IN",validation:v="any",maxLength:L,formatAsYouType:E=!0,countryLocked:I=!1,label:j,labelMode:F="top",labelStyle:O,placeholder:T="Phone number",helperText:A,error:P,invalidMessage:R,required:D,disabled:z=!1,size:w="md",variant:q,borderRadius:k,countrySheetTitle:M="Country code",haptic:V,accessibilityLabel:B,countryAccessibilityLabel:$,onFocus:G,onBlur:U,style:W,testID:H}=e,Y=(0,_index2.useTheme)(),K=(0,_react.useMemo)(()=>buildStyles(Y),[Y]),J=(0,_react.useRef)(null),Q=(0,_react.useMemo)(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=(0,_react.useMemo)(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:_,options:e},{title:f,options:Q}]:void 0},[p,_,f,Q]),Z=(0,_react.useCallback)((e,t,i)=>{if(!e)return null;if(x)return x(e);if(!g)return null;const o=(0,_mobileCore.countryFlagEmoji)(e.iso);return o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[K.flag,{fontSize:t}],testID:i,children:o}):null},[x,g,K.flag]),ee=(0,_react.useCallback)(e=>{const t=planOf(e),i=t?(0,_mobileCore.maxNationalNumberLength)(t,!1===v?"any":v):Number.POSITIVE_INFINITY;return L?Math.min(i,L):i},[L,v]),te=(0,_react.useCallback)((e,t)=>e.slice(0,ee(t)),[ee]),ie=(0,_react.useCallback)((e,t)=>{const i=planOf(t)??void 0,o=(0,_mobileCore.splitPhoneNumber)(e,i);if(!o)return null;const n=o.country??t,r=m.find(e=>e.iso===n);return{callingCode:r?.code??o.callingCode,nationalNumber:te(o.nationalNumber,n),iso:r?.iso??n}},[m,te]),oe=(0,_react.useMemo)(()=>{const e=Q.find(e=>e.iso===S)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof o?ie(o,t.iso)??t:o??t},[m,Q,S,o,ie]),ne=(0,_react.useCallback)(e=>{if(!1===v)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?(0,_mobileCore.isValidNationalNumber)(e.nationalNumber,t,v):e.nationalNumber.length>0},[v]),[re,le]=(0,_react.useState)(oe.iso),ae=(0,_react.useMemo)(()=>{if(void 0===r)return;const e=r?parseE164(r,m,re):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===re);return{callingCode:t?.code??oe.callingCode,nationalNumber:"",iso:re}},[r,m,re,oe.callingCode,te]),se=(0,_react.useCallback)(e=>{le(e.iso),n?.(e),l?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,l,m,ne]),[ue,ce]=(0,_index.useControllableState)({value:i??ae,defaultValue:oe,onChange:se}),[de,be]=(0,_react.useState)(!1),me=(0,_react.useCallback)(()=>{z||J.current?.focus()},[z]),[pe,_e]=(0,_react.useState)(!1),[fe,he]=(0,_react.useState)(!1),[ge,xe]=(0,_react.useState)(!1),Ce=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{ge||(Ce.current=!1)},[ge]);const Ne=(0,_index4.resolveFieldSize)(Y,w),ye=(0,_index4.resolveFieldTextStyle)(Y,{disabled:z}),Se=q??Y.components.field?.defaultVariant??"outlined",ve="underline"===Se,Le=k??Y.components.phoneNumberInput?.borderRadius,Ee=Y.spacing.md,[Ie,je]=(0,_react.useState)(0),Fe=Ie+Ee+1+Ee,Oe=ue.nationalNumber.length>0,Te=D&&!j&&!Oe&&T.length>0,Ae=de||Oe,Pe=Boolean(j)&&"float"===F&&Ie>0,Re=(0,_useFloatingLabel.useFloatingLabel)({label:j,enabled:Pe,floated:Ae,required:D,variant:Se,sizeTokens:Ne,leadingOffset:Fe,paddingLeft:ve?0:Ne.paddingHorizontal,color:Y.colors.field.label,style:O}),De=(0,_react.useMemo)(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),ze=planOf(ue.iso),we=E&&ze?(0,_mobileCore.formatPhoneAsTyped)(ue.nationalNumber,ze):ue.nationalNumber,qe=ee(ue.iso),ke=0===ue.nationalNumber.length||pe||!Number.isFinite(qe)?void 0:we.length+Math.max(0,qe-ue.nationalNumber.length),Me=ne(ue);(0,_react.useEffect)(()=>{Oe||he(!1)},[Oe]);const Ve=ze?(0,_mobileCore.maxNationalNumberLength)(ze,!1===v?"any":v):Number.POSITIVE_INFINITY,Be=ue.nationalNumber.length>=Ve,$e=!1!==v&&!1!==R&&Oe&&!Me&&(fe||Be),Ge="mobile"===v?"Enter a valid mobile number":"Enter a valid number",Ue=(0,_index4.hasFieldText)(P)?P:$e?R||Ge:void 0,We=!0===P||(0,_index4.hasFieldText)(Ue),He=(0,_react.useRef)(Me),Ye=(0,_react.useRef)(ue);Ye.current=ue,(0,_react.useEffect)(()=>{He.current!==Me&&(He.current=Me,b?.(Me),Me&&d?.(formatE164(Ye.current)))},[Me,d,b]);const Ke=(0,_react.useCallback)(e=>{if(e.includes("+")){const t=ie(e,ue.iso);if(t&&!I&&Q.some(e=>e.iso===t.iso))return void ce(t);if(t&&t.iso===ue.iso)return void ce(t)}ce({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,I,ue,ie,te,ce]),Je=(0,_react.useCallback)(e=>{const t=e;ce({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),xe(!1);const i=(0,_index3.resolveHaptic)(V,"selection");i&&(0,_index3.triggerHaptic)(i)},[ue,V,te,ce]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>ce({...Ye.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ye.current,getE164:()=>formatE164(Ye.current),getFormatted:()=>{const e=Ye.current,t=planOf(e.iso);return t?(0,_mobileCore.formatPhoneAsTyped)(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ye.current),getCountry:()=>m.find(e=>e.iso===Ye.current.iso)}),[m,ne,ce]);const Qe=z||I,Xe=(0,_jsxRuntime.jsx)(_index4.FieldBase,{size:w,variant:Se,borderRadius:Le,topNotch:Re.topNotch,focused:de,disabled:z,error:We,filled:Oe,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:ve?0:void 0,leading:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{Qe||(Ce.current=!0,xe(!0))},disabled:Qe,accessibilityRole:"button",accessibilityLabel:$??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Qe},"aria-disabled":Qe,hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;je(e=>e===t?e:t)},style:K.codeTrigger,testID:H?`${H}-code`:void 0,children:[Z(De,Ne.fontSize,H?`${H}-flag`:void 0),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[K.codeText,{color:ye.color,fontSize:Ne.fontSize}],children:`+${ue.callingCode}`}),I?null:(0,_jsxRuntime.jsx)(_Chevron.Chevron,{color:z?Y.colors.field.iconDisabled:Y.colors.field.icon,size:Ne.iconSize,open:ge})]}),children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:K.inputWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:J,value:we,maxLength:ke,onChangeText:Ke,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:c,onSelectionChange:e=>{const{start:t,end:i}=e.nativeEvent.selection;_e(t!==i)},onFocus:()=>{be(!0),G?.()},onBlur:()=>{be(!1),Oe&&!Ce.current&&he(!0),U?.()},editable:!z,placeholder:Pe&&!Ae||Te?void 0:T,placeholderTextColor:ye.placeholderColor,accessibilityLabel:B??j??T,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:ye.color,fontSize:Ne.fontSize,...ye.weightStyle,paddingLeft:ve?0:void 0}],testID:H?`${H}-input`:void 0}),Te?(0,_jsxRuntime.jsx)(_index4.RequiredPlaceholder,{text:T,color:ye.placeholderColor,fontSize:Ne.fontSize,weightStyle:ye.weightStyle}):null]})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W,testID:H,children:[j&&"top"===F?(0,_jsxRuntime.jsx)(_index4.FieldLabel,{size:w,required:D,children:j}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:K.fieldWrapper,children:[Xe,Re.node]}),(0,_jsxRuntime.jsx)(_index4.FieldMessage,{size:w,error:We,text:We?Ue:A}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:ge,onClose:()=>xe(!1),title:M,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===De?.iso,onSelect:Je,searchable:Q.length>8,searchPlaceholder:N,alphabetIndex:y??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>_reactNative.StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...(0,_index2.fontFor)(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});var _default=exports.default=PhoneNumberInput;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.parseE164=exports.formatE164=exports.default=exports.PhoneNumberInput=exports.DEFAULT_CALLING_CODES=exports.ALL_CALLING_CODES=void 0;var _mobileCore=require("@webority/mobile-core"),_countries=require("@webority/mobile-core/phone/countries"),_react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_index4=require("../FieldBase/index.js"),_Chevron=require("../FieldBase/Chevron.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_CALLING_CODES=exports.DEFAULT_CALLING_CODES=[{iso:"IN",code:"91",label:"India"},{iso:"AE",code:"971",label:"United Arab Emirates"},{iso:"GB",code:"44",label:"United Kingdom"},{iso:"US",code:"1",label:"United States"},{iso:"CA",code:"1",label:"Canada"},{iso:"AU",code:"61",label:"Australia"},{iso:"SG",code:"65",label:"Singapore"},{iso:"SA",code:"966",label:"Saudi Arabia"}],ALL_CALLING_CODES=exports.ALL_CALLING_CODES=(0,_mobileCore.getPhoneCountries)().map(e=>({iso:e.iso,code:e.callingCode,label:_countries.PHONE_COUNTRY_NAMES[e.iso]??e.iso})).sort((e,t)=>e.label.localeCompare(t.label)),digitsOnly=e=>e.replace(/[^0-9]/g,""),formatE164=e=>`+${e.callingCode}${e.nationalNumber}`;exports.formatE164=formatE164;const parseE164=(e,t,i)=>{const o=e.replace(/[^0-9]/g,"");if(!o)return null;const n=(0,_mobileCore.splitPhoneNumber)(`+${o}`);let r=n?.callingCode,l=n?.nationalNumber??"";if(!r){const e=Array.from(new Set(t.map(e=>e.code))).sort((e,t)=>t.length-e.length);if(r=e.find(e=>o.startsWith(e)),!r)return null;l=o.slice(r.length)}const a=t.filter(e=>e.code===r),s=a.find(e=>e.iso===i)?.iso??a.find(e=>e.iso===n?.country)?.iso??n?.country??a[0]?.iso??"";return{callingCode:r,nationalNumber:l,iso:s}};exports.parseE164=parseE164;const planOf=e=>(0,_mobileCore.isSupportedCountry)(e)?e:null,PhoneNumberInput=exports.PhoneNumberInput=(0,_react.forwardRef)((e,t)=>{const{value:i,defaultValue:o,onChange:n,e164:r,onChangeE164:l,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:c,onComplete:d,onValidityChange:b,countries:m=ALL_CALLING_CODES,popularCountries:p,popularCountriesTitle:_="Popular",allCountriesTitle:f="All countries",hiddenCountries:h,showFlag:g=!0,renderFlag:x,renderCountry:C,countrySearchPlaceholder:N,showAlphabetIndex:y,defaultIso:S="IN",validation:v="any",maxLength:L,formatAsYouType:E=!0,countryLocked:I=!1,label:j,labelMode:F="top",labelStyle:O,placeholder:T="Phone number",helperText:A,error:P,invalidMessage:R,required:D,disabled:z=!1,size:w="md",variant:q,borderRadius:k,countrySheetTitle:M="Country code",haptic:V,accessibilityLabel:B,countryAccessibilityLabel:$,onFocus:G,onBlur:U,style:W,testID:H}=e,Y=(0,_index2.useTheme)(),K=(0,_react.useMemo)(()=>buildStyles(Y),[Y]),J=(0,_react.useRef)(null),Q=(0,_react.useMemo)(()=>h?.length?m.filter(e=>!h.includes(e.iso)):m,[m,h]),X=(0,_react.useMemo)(()=>{if(!p?.length)return;const e=p.map(e=>Q.find(t=>t.iso===e)).filter(e=>void 0!==e);return e.length?[{title:_,options:e},{title:f,options:Q}]:void 0},[p,_,f,Q]),Z=(0,_react.useCallback)((e,t,i)=>{if(!e)return null;if(x)return x(e);if(!g)return null;const o=(0,_mobileCore.countryFlagEmoji)(e.iso);return o?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[K.flag,{fontSize:t}],testID:i,children:o}):null},[x,g,K.flag]),ee=(0,_react.useCallback)(e=>{const t=planOf(e),i=t?(0,_mobileCore.maxNationalNumberLength)(t,!1===v?"any":v):Number.POSITIVE_INFINITY;return L?Math.min(i,L):i},[L,v]),te=(0,_react.useCallback)((e,t)=>e.slice(0,ee(t)),[ee]),ie=(0,_react.useCallback)((e,t)=>{const i=planOf(t)??void 0,o=(0,_mobileCore.splitPhoneNumber)(e,i);if(!o)return null;const n=o.country??t,r=m.find(e=>e.iso===n);return{callingCode:r?.code??o.callingCode,nationalNumber:te(o.nationalNumber,n),iso:r?.iso??n}},[m,te]),oe=(0,_react.useMemo)(()=>{const e=Q.find(e=>e.iso===S)??Q[0]??m[0],t={callingCode:e?.code??"91",nationalNumber:"",iso:e?.iso??"IN"};return"string"==typeof o?ie(o,t.iso)??t:o??t},[m,Q,S,o,ie]),ne=(0,_react.useCallback)(e=>{if(!1===v)return e.nationalNumber.length>0;const t=planOf(e.iso);return t?(0,_mobileCore.isValidNationalNumber)(e.nationalNumber,t,v):e.nationalNumber.length>0},[v]),[re,le]=(0,_react.useState)(oe.iso),ae=(0,_react.useMemo)(()=>{if(void 0===r)return;const e=r?parseE164(r,m,re):null;if(e)return{...e,nationalNumber:te(e.nationalNumber,e.iso)};const t=m.find(e=>e.iso===re);return{callingCode:t?.code??oe.callingCode,nationalNumber:"",iso:re}},[r,m,re,oe.callingCode,te]),se=(0,_react.useCallback)(e=>{le(e.iso),n?.(e),l?.(e.nationalNumber?formatE164(e):"",{country:m.find(t=>t.iso===e.iso),national:e.nationalNumber,valid:ne(e)})},[n,l,m,ne]),[ue,ce]=(0,_index.useControllableState)({value:i??ae,defaultValue:oe,onChange:se}),[de,be]=(0,_react.useState)(!1),me=(0,_react.useCallback)(()=>{z||J.current?.focus()},[z]),[pe,fe]=(0,_react.useState)(!1),[he,ge]=(0,_react.useState)(!1),[xe,Ce]=(0,_react.useState)(!1),Ne=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{xe||(Ne.current=!1)},[xe]);const ye=(0,_index4.resolveFieldSize)(Y,w),Se=(0,_index4.resolveFieldTextStyle)(Y,{disabled:z}),ve=q??Y.components.field?.defaultVariant??"outlined",Le="underline"===ve,Ee=k??Y.components.phoneNumberInput?.borderRadius,Ie=Y.spacing.md,[je,Fe]=(0,_react.useState)(0),Oe=je+Ie+1+Ie,Te=ue.nationalNumber.length>0,Ae=D&&!j&&!Te&&T.length>0,Pe=de||Te,Re=Boolean(j)&&"float"===F&&je>0,De=(0,_useFloatingLabel.useFloatingLabel)({label:j,enabled:Re,floated:Pe,required:D,variant:ve,sizeTokens:ye,leadingOffset:Oe,paddingLeft:Le?0:ye.paddingHorizontal,color:Y.colors.field.label,style:O}),ze=(0,_react.useMemo)(()=>m.find(e=>e.iso===ue.iso),[m,ue.iso]),we=planOf(ue.iso),qe=E&&we?(0,_mobileCore.formatPhoneAsTyped)(ue.nationalNumber,we):ue.nationalNumber,ke=ee(ue.iso),Me=0===ue.nationalNumber.length||pe||!Number.isFinite(ke)?void 0:qe.length+Math.max(0,ke-ue.nationalNumber.length),Ve=ne(ue);(0,_react.useEffect)(()=>{Te||ge(!1)},[Te]);const Be=we?(0,_mobileCore.maxNationalNumberLength)(we,!1===v?"any":v):Number.POSITIVE_INFINITY,$e=ue.nationalNumber.length>=Be,Ge=!1!==v&&!1!==R&&Te&&!Ve&&(he||$e),Ue="mobile"===v?"Enter a valid mobile number":"Enter a valid number",We=(0,_index4.hasFieldText)(P)?P:Ge?R||Ue:void 0,He=!0===P||(0,_index4.hasFieldText)(We),Ye=(0,_react.useRef)(Ve),Ke=(0,_react.useRef)(ue);Ke.current=ue,(0,_react.useEffect)(()=>{Ye.current!==Ve&&(Ye.current=Ve,b?.(Ve),Ve&&d?.(formatE164(Ke.current)))},[Ve,d,b]);const Je=(0,_react.useCallback)(e=>{if(e.includes("+")){const t=ie(e,ue.iso);if(t&&!I&&Q.some(e=>e.iso===t.iso))return void ce(t);if(t&&t.iso===ue.iso)return void ce(t)}ce({...ue,nationalNumber:te(digitsOnly(e),ue.iso)})},[Q,I,ue,ie,te,ce]),Qe=(0,_react.useCallback)(e=>{const t=e;ce({callingCode:t.code,iso:t.iso,nationalNumber:te(ue.nationalNumber,t.iso)}),Ce(!1);const i=(0,_index3.resolveHaptic)(V,"selection");i&&(0,_index3.triggerHaptic)(i)},[ue,V,te,ce]);(0,_react.useImperativeHandle)(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur(),clear:()=>ce({...Ke.current,nationalNumber:""}),isFocused:()=>J.current?.isFocused()??!1,getValue:()=>Ke.current,getE164:()=>formatE164(Ke.current),getFormatted:()=>{const e=Ke.current,t=planOf(e.iso);return t?(0,_mobileCore.formatPhoneAsTyped)(e.nationalNumber,t):e.nationalNumber},isValid:()=>ne(Ke.current),getCountry:()=>m.find(e=>e.iso===Ke.current.iso)}),[m,ne,ce]);const Xe=z||I,Ze=(0,_jsxRuntime.jsx)(_index4.FieldBase,{size:w,variant:ve,borderRadius:Ee,topNotch:De.topNotch,focused:de,disabled:z,error:He,filled:Te,onPress:me,pressFeedback:!1,leadingDivider:!0,paddingLeft:Le?0:void 0,leading:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{Xe||(Ne.current=!0,Ce(!0))},disabled:Xe,accessibilityRole:"button",accessibilityLabel:$??`Country code, currently +${ue.callingCode}`,accessibilityState:{disabled:Xe},"aria-disabled":Xe,hitSlop:6,onLayout:e=>{const{width:t}=e.nativeEvent.layout;Fe(e=>e===t?e:t)},style:K.codeTrigger,testID:H?`${H}-code`:void 0,children:[Z(ze,ye.fontSize,H?`${H}-flag`:void 0),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[K.codeText,{color:Se.color,fontSize:ye.fontSize}],children:`+${ue.callingCode}`}),I?null:(0,_jsxRuntime.jsx)(_Chevron.Chevron,{color:z?Y.colors.field.iconDisabled:Y.colors.field.icon,size:ye.iconSize,open:xe})]}),children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:K.inputWrap,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:J,value:qe,maxLength:Me,onChangeText:Je,returnKeyType:a,submitBehavior:s,onSubmitEditing:u,blurOnSubmit:c,onSelectionChange:e=>{const{start:t,end:i}=e.nativeEvent.selection;fe(t!==i)},onFocus:()=>{be(!0),G?.()},onBlur:()=>{be(!1),Te&&!Ne.current&&ge(!0),U?.()},editable:!z,placeholder:Re&&!Pe||Ae?void 0:T,placeholderTextColor:Se.placeholderColor,accessibilityLabel:B??j??T,selectionColor:Y.colors.field.caret,keyboardType:"phone-pad",textContentType:"telephoneNumber",autoComplete:"tel",style:[K.input,{color:Se.color,fontSize:ye.fontSize,...Se.weightStyle,paddingLeft:Le?0:void 0}],testID:H?`${H}-input`:void 0}),Ae?(0,_jsxRuntime.jsx)(_index4.RequiredPlaceholder,{text:T,color:Se.placeholderColor,fontSize:ye.fontSize,weightStyle:Se.weightStyle}):null]})});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:W,testID:H,children:[j&&"top"===F?(0,_jsxRuntime.jsx)(_index4.FieldLabel,{size:w,required:D,children:j}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:K.fieldWrapper,children:[Ze,De.node]}),(0,_jsxRuntime.jsx)(_index4.FieldMessage,{size:w,error:He,text:He?We:A}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:xe,onClose:()=>Ce(!1),title:M,options:Q,sections:X,labelOf:e=>`${e.label} (+${e.code})`,getValue:e=>e.iso,disabledOf:()=>!1,descriptionOf:()=>{},iconOf:e=>Z(e,Y.typography.fontSize.lg),renderOption:C?(e,t)=>C(e,{selected:t.selected}):void 0,isSelected:e=>e===ze?.iso,onSelect:Qe,searchable:Q.length>8,searchPlaceholder:N,alphabetIndex:y??Q.length>20})]})});PhoneNumberInput.displayName="PhoneNumberInput";const buildStyles=e=>_reactNative.StyleSheet.create({fieldWrapper:{position:"relative",overflow:"visible"},codeTrigger:{flexDirection:"row",alignItems:"center",gap:2},flag:{includeFontPadding:!1,marginRight:4},codeText:{...(0,_index2.fontFor)(e,"semibold"),fontWeight:"600",includeFontPadding:!1,writingDirection:"ltr"},input:{padding:0,margin:0,includeFontPadding:!1,writingDirection:"ltr"},inputWrap:{flex:1,alignSelf:"stretch",justifyContent:"center"}});var _default=exports.default=PhoneNumberInput;

package/lib/commonjs/components/ProfilePicker/ProfilePicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProfilePicker=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index3=require("../AppIcon/index.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Avatar/index.js"),_index5=require("../FieldBase/index.js"),_FilePicker=require("../FilePicker/FilePicker.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index6=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,t)=>Math.min(t,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,r,t,o)=>{const i=toneFor(e,r),n=o?.badgeColor??i.base,s=e.colors.background.primary,l="neutral"===r&&void 0===o?.badgeColor;let a;switch(t){case"soft":a={fill:l?e.colors.background.tertiary:(0,_color.blendOf)(n,.14,s,e.colors.background.secondary),ring:s,icon:n};break;case"outline":a={fill:s,ring:l?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:s,icon:i.on}}return o?.badgeIconColor?{...a,icon:o.badgeIconColor}:a},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=exports.ProfilePicker=(0,_react.forwardRef)((e,r)=>{const{value:t,name:o,sources:i,onPick:n,onRemove:s,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:_="circle",badgeIcon:m="camera",tone:x,variant:p,avatarTone:b,avatarBackgroundColor:g,avatarColor:h,label:y,required:f=!1,helperText:v,error:j,layout:k="stacked",title:C,subtitle:S,ImageComponent:R,labels:I,haptic:T,onError:P,accessibilityLabel:F,style:E,testID:w}=e,A=(0,_index.useTheme)(),L=A.components.profilePicker,M=x??L?.defaultTone??"primary",O=p??L?.defaultVariant??"solid",q=(0,_react.useMemo)(()=>badgeLookFor(A,M,O,L),[A,M,O,L]),N=b??L?.defaultAvatarTone,z=(0,_react.useMemo)(()=>{const e=N?(0,_index4.avatarToneColors)(A,N):null;return{background:g??e?.background??A.colors.background.tertiary,icon:h??e?.color??A.colors.text.tertiary}},[A,N,g,h]),V=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,...I}),[I]),[D,B]=(0,_react.useState)(null),[H,U]=(0,_react.useState)(null),[W,$]=(0,_react.useState)(!1),[Z,G]=(0,_react.useState)(t);t!==Z&&(G(t),B(null));const X=l||a,Q=D??t??null,Y=j??H??void 0,J=!X&&(null!==D||Boolean(t)&&Boolean(s)),K=i.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],re=resolveRadius(_,ee),te=re*(1-Math.SQRT1_2),oe=clamp(Math.round(.28*ee),24,44),ie=te-oe/2,ne=Math.max(0,-ie),se=(0,_react.useCallback)(e=>{U(e),P?.(e),!1!==T&&(0,_index2.triggerHaptic)("notificationError")},[P,T]),le=(0,_react.useCallback)(async e=>{let r;try{r=await e.pick()}catch(e){return void se(e instanceof Error?e.message:String(e))}const t=r?.[0];if(!t)return;if("number"==typeof u&&"number"==typeof t.size&&t.size>1024*u*1024)return void se(V.errorTooLarge(u));if(t.type&&!(0,_FilePicker.matchesAccept)(t.type,c))return void se(V.errorWrongType);U(null),B(t.uri);const o=(0,_index2.resolveHaptic)(T,"selection");o&&(0,_index2.triggerHaptic)(o),n?.(t)},[u,c,V,T,n,se]),ae=(0,_react.useCallback)(()=>{X||(de.current=null,1!==i.length||J?(i.length>0||J)&&$(!0):le(i[0]))},[X,i,J,le]),ce=(0,_react.useCallback)(()=>{B(null),U(null);const e=(0,_index2.resolveHaptic)(T,"selection");e&&(0,_index2.triggerHaptic)(e),s?.()},[T,s]),ue=(0,_react.useMemo)(()=>{const e=i.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[i,J]),de=(0,_react.useRef)(null),_e=(0,_react.useCallback)(e=>{de.current||($(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),me=(0,_react.useCallback)(()=>{const e=de.current;de.current=null,e&&le(e)},[le]),xe=w??"profile-picker",pe=F??(K?V.pick:o),be=(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners,backgroundColor:z.background}],children:(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"user",size:Math.round(.45*ee),color:z.icon})}),ge=(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:pe,accessibilityHint:(0,_index5.fieldTextAsString)(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},"aria-disabled":K?X:void 0,"aria-busy":l,testID:`${xe}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||o?(0,_jsxRuntime.jsx)(_index4.Avatar,{source:Q?{uri:Q}:void 0,name:o,size:ee,shape:_,tone:N,backgroundColor:g,color:h,ImageComponent:R,accessibilityLabel:pe},Q??"initials"):be,l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,styles.overlay,{borderRadius:re,..._corners.smoothCorners,backgroundColor:A.colors.background.overlay}],testID:`${xe}-loading`,children:(0,_jsxRuntime.jsx)(_index6.Spinner,{size:ee>=100?"md":"sm",color:A.colors.onPrimary})}):null,!a&&K?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:`${xe}-badge`,style:[styles.badge,{width:oe,height:oe,borderRadius:oe/2,..._corners.smoothCorners,right:ie,bottom:ie,backgroundColor:q.fill,borderColor:q.ring}],children:(0,_slotIcon.renderSlotIcon)(m,{color:q.icon,size:Math.round(.55*oe),disabled:!1})}):null]})}),he="stacked"!==k?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.meta,"profile"===k?styles.metaCentred:null],children:[C?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,"profile"===k?styles.textCentred:null,{color:A.colors.text.primary,fontSize:A.typography.fontSize.base,...(0,_index.fontFor)(A,"semibold")}],children:C}):null,S?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.subtitle,"profile"===k?styles.textCentred:null,{color:A.colors.text.secondary,fontSize:A.typography.fontSize.sm,...(0,_index.fontFor)(A,"normal")}],children:S}):null,(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:(0,_index5.hasFieldText)(Y)})]}):(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:(0,_index5.hasFieldText)(Y)});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:r,style:E,testID:w,children:[y?(0,_jsxRuntime.jsx)(_index5.FieldLabel,{required:f,children:y}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:"inline"===k?[styles.row,{columnGap:A.spacing.md}]:["profile"===k?styles.columnCentred:styles.column,{rowGap:A.spacing.xs}],children:[ge,he]}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:W,onClose:()=>$(!1),onAfterClose:me,title:V.sheetTitle,options:ue,labelOf:e=>{const r=e;return"remove"===r.kind?V.remove:r.source.label},getValue:e=>{const r=e;return"remove"===r.kind?REMOVE_VALUE:r.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const r=e;return"remove"===r.kind?void 0:r.source.description},iconOf:e=>{const r=e;return"remove"===r.kind?(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"trash",size:20,color:A.colors.toneText.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>_e(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=_reactNative.StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{..._reactNative.StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});var _default=exports.default=ProfilePicker;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProfilePicker=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index3=require("../AppIcon/index.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Avatar/index.js"),_index5=require("../FieldBase/index.js"),_FilePicker=require("../FilePicker/FilePicker.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index6=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,r,t)=>Math.min(t,Math.max(r,e)),toneFor=(e,r)=>{switch(r){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,r,t,o)=>{const i=toneFor(e,r),n=o?.badgeColor??i.base,s=e.colors.background.primary,l="neutral"===r&&void 0===o?.badgeColor;let a;switch(t){case"soft":a={fill:l?e.colors.background.tertiary:(0,_color.blendOf)(n,.14,s,e.colors.background.secondary),ring:s,icon:n};break;case"outline":a={fill:s,ring:l?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:s,icon:i.on}}return o?.badgeIconColor?{...a,icon:o.badgeIconColor}:a},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=exports.ProfilePicker=(0,_react.forwardRef)((e,r)=>{const{value:t,name:o,sources:i,onPick:n,onRemove:s,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:_="circle",badgeIcon:m="camera",tone:x,variant:p,avatarTone:b,avatarBackgroundColor:g,avatarColor:h,label:y,required:f=!1,helperText:v,error:j,layout:k="stacked",title:C,subtitle:S,ImageComponent:R,labels:I,haptic:T,onError:P,accessibilityLabel:F,style:E,testID:w}=e,A=(0,_index.useTheme)(),L=A.components.profilePicker,M=x??L?.defaultTone??"primary",O=p??L?.defaultVariant??"solid",q=(0,_react.useMemo)(()=>badgeLookFor(A,M,O,L),[A,M,O,L]),N=b??L?.defaultAvatarTone,z=(0,_react.useMemo)(()=>{const e=N?(0,_index4.avatarToneColors)(A,N):null;return{background:g??e?.background??A.colors.background.tertiary,icon:h??e?.color??A.colors.text.tertiary}},[A,N,g,h]),V=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,...I}),[I]),[D,B]=(0,_react.useState)(null),[H,U]=(0,_react.useState)(null),[W,$]=(0,_react.useState)(!1),[Z,G]=(0,_react.useState)(t);t!==Z&&(G(t),B(null));const X=l||a,Q=D??t??null,Y=j??H??void 0,J=!X&&(null!==D||Boolean(t)&&Boolean(s)),K=i.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],re=resolveRadius(_,ee),te=re*(1-Math.SQRT1_2),oe=clamp(Math.round(.28*ee),24,44),ie=te-oe/2,ne=Math.max(0,-ie),se=(0,_react.useCallback)(e=>{U(e),P?.(e),!1!==T&&(0,_index2.triggerHaptic)("notificationError")},[P,T]),le=(0,_react.useCallback)(async e=>{let r;try{r=await e.pick()}catch(e){return void se(e instanceof Error?e.message:String(e))}const t=r?.[0];if(!t)return;if("number"==typeof u&&"number"==typeof t.size&&t.size>1024*u*1024)return void se(V.errorTooLarge(u));if(t.type&&!(0,_FilePicker.matchesAccept)(t.type,c))return void se(V.errorWrongType);U(null),B(t.uri);const o=(0,_index2.resolveHaptic)(T,"selection");o&&(0,_index2.triggerHaptic)(o),n?.(t)},[u,c,V,T,n,se]),ae=(0,_react.useCallback)(()=>{X||(de.current=null,1!==i.length||J?(i.length>0||J)&&$(!0):le(i[0]))},[X,i,J,le]),ce=(0,_react.useCallback)(()=>{B(null),U(null);const e=(0,_index2.resolveHaptic)(T,"selection");e&&(0,_index2.triggerHaptic)(e),s?.()},[T,s]),ue=(0,_react.useMemo)(()=>{const e=i.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[i,J]),de=(0,_react.useRef)(null),me=(0,_react.useCallback)(e=>{de.current||($(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),xe=(0,_react.useCallback)(()=>{const e=de.current;de.current=null,e&&le(e)},[le]),pe=w??"profile-picker",be=F??(K?V.pick:o),ge=(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners,backgroundColor:z.background}],children:(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"user",size:Math.round(.45*ee),color:z.icon})}),he=(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:be,accessibilityHint:(0,_index5.fieldTextAsString)(Y),accessibilityState:K?{disabled:X,busy:l}:{busy:l},"aria-disabled":K?X:void 0,"aria-busy":l,testID:`${pe}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||o?(0,_jsxRuntime.jsx)(_index4.Avatar,{source:Q?{uri:Q}:void 0,name:o,size:ee,shape:_,tone:N,backgroundColor:g,color:h,ImageComponent:R,accessibilityLabel:be},Q??"initials"):ge,l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,styles.overlay,{borderRadius:re,..._corners.smoothCorners,backgroundColor:A.colors.background.overlay}],testID:`${pe}-loading`,children:(0,_jsxRuntime.jsx)(_index6.Spinner,{size:ee>=100?"md":"sm",color:A.colors.onPrimary})}):null,!a&&K?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:`${pe}-badge`,style:[styles.badge,{width:oe,height:oe,borderRadius:oe/2,..._corners.smoothCorners,right:ie,bottom:ie,backgroundColor:q.fill,borderColor:q.ring}],children:(0,_slotIcon.renderSlotIcon)(m,{color:q.icon,size:Math.round(.55*oe),disabled:!1})}):null]})}),ye="stacked"!==k?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.meta,"profile"===k?styles.metaCentred:null],children:[C?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,"profile"===k?styles.textCentred:null,{color:A.colors.text.primary,fontSize:A.typography.fontSize.base,...(0,_index.fontFor)(A,"semibold")}],children:C}):null,S?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.subtitle,"profile"===k?styles.textCentred:null,{color:A.colors.text.secondary,fontSize:A.typography.fontSize.sm,...(0,_index.fontFor)(A,"normal")}],children:S}):null,(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:(0,_index5.hasFieldText)(Y)})]}):(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:(0,_index5.hasFieldText)(Y)});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:r,style:E,testID:w,children:[y?(0,_jsxRuntime.jsx)(_index5.FieldLabel,{required:f,children:y}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:"inline"===k?[styles.row,{columnGap:A.spacing.md}]:["profile"===k?styles.columnCentred:styles.column,{rowGap:A.spacing.xs}],children:[he,ye]}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:W,onClose:()=>$(!1),onAfterClose:xe,title:V.sheetTitle,options:ue,labelOf:e=>{const r=e;return"remove"===r.kind?V.remove:r.source.label},getValue:e=>{const r=e;return"remove"===r.kind?REMOVE_VALUE:r.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const r=e;return"remove"===r.kind?void 0:r.source.description},iconOf:e=>{const r=e;return"remove"===r.kind?(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"trash",size:20,color:A.colors.toneText.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>me(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=_reactNative.StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{..._reactNative.StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});var _default=exports.default=ProfilePicker;

package/lib/commonjs/components/ProgressBar/ProgressBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProgressBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_jsxRuntime=require("react/jsx-runtime");const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=exports.ProgressBar=(0,_react.forwardRef)((e,t)=>{const r=(0,_index.useTheme)(),{progress:a,label:i,showPercent:s=!1,indeterminate:n,height:o=6,radius:l,tone:c="primary",trackColor:u,barColor:d,gradient:m,segments:_,animated:g=!0,style:p,containerStyle:x,barStyle:h,accessibilityLabel:y,testID:f}=e,v=n??"number"!=typeof a,b=clampProgress(a),w=(0,_react.useRef)((0,_index.createAnimatedValue)(b)).current,j=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,N=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,R=(0,_react.useRef)(0),V=r.components.progressBar?.determinateAnimationDuration??400,B=r.components.progressBar?.indeterminateLoopDuration??1500,A=r.components.progressBar?.indeterminateWidth??"30%",C=(0,_react.useMemo)(()=>buildStyles(r),[r]),P=l??r.radius.full,S=u??r.colors.surface.disabled,k=d??toneColor(r,c),D=(0,_react.useMemo)(()=>m?"string"==typeof m?r.gradients[m]??null:m:null,[m,r.gradients]),E=Array.isArray(_)&&_.length>0;(0,_react.useEffect)(()=>{v||(g?_reactNative.Animated.timing(w,{toValue:b,duration:V,easing:_reactNative.Easing.bezier(...r.motion.easing.standard),useNativeDriver:!1}).start():w.setValue(b))},[g,b,V,w,v,r]),(0,_react.useEffect)(()=>{if(!v)return;(0,_index.setNativeValue)(j,0);const e=_reactNative.Animated.loop(_reactNative.Animated.timing(j,{toValue:1,duration:B,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:!0}));return e.start(),()=>{e.stop()}},[v,j,B]);const q=w.interpolate({inputRange:[0,1],outputRange:["0%","100%"]}),L=j.interpolate({inputRange:[0,1],outputRange:[-1,1]}),M=s&&!v&&!E,z=null!=i||M,F=y??("string"==typeof i?i:void 0),I=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityRole:"progressbar",accessibilityLabel:F,accessibilityValue:v?{text:"Loading"}:{min:0,max:100,now:Math.round(100*b)},testID:f,onLayout:e=>{const t=e.nativeEvent.layout.width;R.current=t,(0,_index.setNativeValue)(N,t)},style:[C.track,{height:o,borderRadius:P,..._corners.smoothCorners,backgroundColor:S},p,x],children:E?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[C.segments,{height:o}],children:(_??[]).map((e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:100*clampProgress(e.value)+"%",height:o,backgroundColor:e.color??toneColor(r,e.tone??"primary")}},t))}):v?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[C.indeterminateBar,{height:o,borderRadius:P,..._corners.smoothCorners,backgroundColor:k,width:A,transform:[{translateX:_reactNative.Animated.multiply(L,N)}]},h]}):(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[C.determinateBar,{height:o,borderRadius:P,..._corners.smoothCorners,backgroundColor:D?"transparent":k,width:q,overflow:D?"hidden":void 0},h],children:D?(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:D,style:_reactNative.StyleSheet.absoluteFill}):null})});if(!z)return I;const T={fontSize:r.typography.fontSize.sm,...(0,_index.fontFor)(r,"medium")};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:C.wrapper,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[C.labelRow,{marginBottom:r.spacing.xs}],children:["string"==typeof i||"number"==typeof i?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[C.label,T,{color:r.colors.text.primary}],children:i}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:C.label,children:i}),M?(0,_jsxRuntime.jsx)(_reactNative.Text,{accessible:!1,importantForAccessibility:"no",style:[T,{color:r.colors.text.secondary}],children:`${Math.round(100*b)}%`}):null]}),I]})});ProgressBar.displayName="ProgressBar";const buildStyles=e=>_reactNative.StyleSheet.create({wrapper:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},label:{flexShrink:1},track:{width:"100%",overflow:"hidden"},determinateBar:{position:"absolute",left:0,top:0},indeterminateBar:{position:"absolute",left:0,top:0},segments:{flexDirection:"row",width:"100%"}});var _default=exports.default=ProgressBar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProgressBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_useReducedMotion=require("../../hooks/useReducedMotion.js"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_jsxRuntime=require("react/jsx-runtime");const toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;default:return e.colors.primary}},GLOW_LOCATIONS=[0,.35,.5,.65,1],glowOf=e=>{const t=(0,_color.tintOf)(e,0,"transparent"),r=(0,_color.tintOf)(e,.6,e);return{colors:[t,r,e,r,t],locations:GLOW_LOCATIONS,start:{x:0,y:.5},end:{x:1,y:.5}}},clampProgress=e=>"number"!=typeof e||Number.isNaN(e)||e<0?0:e>1?1:e,ProgressBar=exports.ProgressBar=(0,_react.forwardRef)((e,t)=>{const r=(0,_index.useTheme)(),i=(0,_useReducedMotion.useReducedMotion)(),{progress:a,label:s,showPercent:n=!1,indeterminate:o,height:l=6,radius:c,tone:u="primary",trackColor:d,barColor:m,gradient:_,segments:g,animated:p=!0,style:x,containerStyle:y,barStyle:h,accessibilityLabel:f,testID:v}=e,b=o??"number"!=typeof a,j=clampProgress(a),w=(0,_react.useRef)((0,_index.createAnimatedValue)(j)).current,N=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,R=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,V=(0,_react.useRef)(0),A=r.components.progressBar?.determinateAnimationDuration??400,S=r.components.progressBar?.indeterminateLoopDuration??1500,B=r.components.progressBar?.indeterminateWidth??"30%",C=(0,_react.useMemo)(()=>buildStyles(r),[r]),O=c??r.radius.full,P=d??r.colors.surface.disabled,M=m??toneColor(r,u),L=(0,_react.useMemo)(()=>_?"string"==typeof _?r.gradients[_]??null:_:null,[_,r.gradients]),k=(0,_react.useMemo)(()=>glowOf(M),[M]),D=Array.isArray(g)&&g.length>0;(0,_react.useEffect)(()=>{b||(p?_reactNative.Animated.timing(w,{toValue:j,duration:A,easing:_reactNative.Easing.bezier(...r.motion.easing.standard),useNativeDriver:!1}).start():w.setValue(j))},[p,j,A,w,b,r]),(0,_react.useEffect)(()=>{if(!b||i)return;(0,_index.setNativeValue)(N,0);const e=_reactNative.Animated.loop(_reactNative.Animated.timing(N,{toValue:1,duration:S,easing:_reactNative.Easing.inOut(_reactNative.Easing.ease),useNativeDriver:!0}));return e.start(),()=>{e.stop()}},[b,i,N,S]);const q=w.interpolate({inputRange:[0,1],outputRange:["0%","100%"]}),E=N.interpolate({inputRange:[0,1],outputRange:[-1,1]}),G=n&&!b&&!D,I=null!=s||G,T=f??("string"==typeof s?s:void 0),F=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,accessibilityRole:"progressbar",accessibilityLabel:T,accessibilityValue:b?{text:"Loading"}:{min:0,max:100,now:Math.round(100*j)},testID:v,onLayout:e=>{const t=e.nativeEvent.layout.width;V.current=t,(0,_index.setNativeValue)(R,t)},style:[C.track,{height:l,borderRadius:O,..._corners.smoothCorners,backgroundColor:P},x,y],children:D?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[C.segments,{height:l}],children:(g??[]).map((e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:100*clampProgress(e.value)+"%",height:l,backgroundColor:e.color??toneColor(r,e.tone??"primary")}},t))}):b?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[C.indeterminateBar,{height:l,width:i?"100%":B,transform:i?[]:[{translateX:_reactNative.Animated.multiply(E,R)}]},h],children:(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:k,style:_reactNative.StyleSheet.absoluteFill})}):(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[C.determinateBar,{height:l,borderRadius:O,..._corners.smoothCorners,backgroundColor:L?"transparent":M,width:q,overflow:L?"hidden":void 0},h],children:L?(0,_jsxRuntime.jsx)(_index.Gradient,{gradient:L,style:_reactNative.StyleSheet.absoluteFill}):null})});if(!I)return F;const z={fontSize:r.typography.fontSize.sm,...(0,_index.fontFor)(r,"medium")};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:C.wrapper,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[C.labelRow,{marginBottom:r.spacing.xs}],children:["string"==typeof s||"number"==typeof s?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[C.label,z,{color:r.colors.text.primary}],children:s}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:C.label,children:s}),G?(0,_jsxRuntime.jsx)(_reactNative.Text,{accessible:!1,importantForAccessibility:"no",style:[z,{color:r.colors.text.secondary}],children:`${Math.round(100*j)}%`}):null]}),F]})});ProgressBar.displayName="ProgressBar";const buildStyles=e=>_reactNative.StyleSheet.create({wrapper:{width:"100%"},labelRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",columnGap:8},label:{flexShrink:1},track:{width:"100%",overflow:"hidden"},determinateBar:{position:"absolute",left:0,top:0},indeterminateBar:{position:"absolute",left:0,top:0},segments:{flexDirection:"row",width:"100%"}});var _default=exports.default=ProgressBar;

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SearchBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_useControllableState=require("../../hooks/useControllableState.js"),_useDebounce=require("../../hooks/useDebounce.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_SearchPanel=require("./SearchPanel.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=exports.SearchBar=(0,_react.forwardRef)((e,a)=>{const{value:t,onChangeText:l,onSubmit:s,onFocus:r,onBlur:c,placeholder:i="Search…",autoFocus:n=!1,disabled:o=!1,onClear:u,leftIcon:d,debounceMs:_,size:b="md",variant:h,borderRadius:p,label:S,labelMode:g="top",labelStyle:f,scopes:v,scope:m,onScopeChange:x,recents:R,recentsTitle:j="Recent searches",maxRecents:C=DEFAULT_PANEL_ROWS,onSelectRecent:y,onRemoveRecent:F,onClearRecents:B,suggestions:k,maxSuggestions:L=DEFAULT_PANEL_ROWS,onSelectSuggestion:z,haptic:I,style:q,inputStyle:E,accessibilityLabel:P,testID:T,...N}=e,H=(0,_index.useTheme)(),D=h??H.components.searchBar?.defaultVariant??H.components.field?.defaultVariant??"filled",w="underline"===D,A=(0,_FieldBase.resolveFieldSize)(H,b),U={...A,...H.components.searchBar?.[b]??{}},M=(0,_FieldBase.resolveFieldTextStyle)(H,{disabled:o}),O=(0,_react.useRef)(null),V=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(O,a),[a]),W=(0,_react.useCallback)(()=>{o||O.current?.focus()},[o]),$=(0,_react.useMemo)(()=>buildStyles(H),[H]),K="string"==typeof t?t:"",[G,J]=(0,_react.useState)(!1),Q=(0,_react.useCallback)(e=>{J(!0),r?.(e)},[r]),X=(0,_react.useCallback)(e=>{J(!1),c?.(e)},[c]),[Y,Z]=(0,_react.useState)(K),ee=(0,_useDebounce.useDebounce)(Y,_??0);(0,_react.useEffect)(()=>{void 0!==_&&K!==Y&&Z(K)},[K,_]);const ae=(0,_react.useRef)(K);(0,_react.useEffect)(()=>{void 0!==_&&ee!==ae.current&&(ae.current=ee,l(ee))},[ee,_,l]);const te=(0,_react.useCallback)(e=>{void 0===_?l(e):Z(e)},[_,l]),le=(0,_react.useCallback)(()=>{const e=(0,_hapticUtils.resolveHaptic)(I,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),void 0!==_&&(Z(""),ae.current=""),l(""),u?.()},[I,_,l,u]),se=(0,_react.useCallback)(()=>{s?.(void 0!==_?Y:K)},[s,_,Y,K]),re=void 0!==_?Y:K,ce=re.length>0,[ie,ne]=(0,_useControllableState.useControllableState)({value:m,defaultValue:v?.[0]?.value??"",onChange:x}),oe=(0,_react.useCallback)(e=>{ne(e);const a=v?.find(a=>a.value===e)?.label;a&&(0,_announce.announce)(`Searching ${a}`)},[v,ne]),[ue,de]=(0,_react.useState)(!1),_e=(0,_react.useRef)(null),be=(0,_react.useCallback)(()=>{_e.current&&(clearTimeout(_e.current),_e.current=null)},[]),he=(0,_react.useCallback)(()=>{be(),de(!0)},[be]),pe=(0,_react.useCallback)(()=>{be(),_e.current=setTimeout(()=>de(!1),50)},[be]);(0,_react.useEffect)(()=>be,[be]);const Se=!o&&(G||ue),ge=(0,_react.useMemo)(()=>(R??[]).slice(0,C),[R,C]),fe=(0,_react.useMemo)(()=>(k??[]).slice(0,L).map(_SearchPanel.normalizeSuggestion),[k,L]),ve=Se&&!ce&&ge.length>0,me=Se&&ce&&fe.length>0,xe=me?fe.length:0;(0,_react.useEffect)(()=>{xe>0&&(0,_announce.announce)(1===xe?"1 suggestion":`${xe} suggestions`)},[xe]);const Re=(0,_react.useCallback)(()=>{const e=(0,_hapticUtils.resolveHaptic)(I,"selection");e&&(0,_hapticUtils.triggerHaptic)(e)},[I]),je=(0,_react.useCallback)(e=>{Re(),O.current?.blur(),de(!1),y?.(e)},[Re,y]),Ce=(0,_react.useCallback)(e=>{Re(),O.current?.blur(),de(!1),z?.(e)},[Re,z]),ye=(0,_react.useCallback)(e=>{Re(),F?.(e),(0,_announce.announce)(`Removed ${e}`),W()},[Re,F,W]),Fe=(0,_react.useCallback)(()=>{Re(),B?.(),(0,_announce.announce)("Recent searches cleared"),W()},[Re,B,W]),Be={size:U.iconSize,color:o?H.colors.text.disabled:H.colors.text.tertiary,disabled:o},ke=d?(0,_slotIcon.renderSlotIcon)(d,Be):(H.icons?.search??_defaultIcons.defaultIcons.search)(Be),Le=Boolean(S)&&"float"===g,ze=(0,_useFloatingLabel.useFloatingLabel)({label:S,enabled:Le,floated:G||ce,variant:D,sizeTokens:{...A,...U},leadingOffset:U.iconSize+H.spacing.md,trailingOffset:ce?U.iconSize+H.spacing.md:0,paddingLeft:w?0:U.paddingHorizontal,color:H.colors.field.label,style:f}),Ie=ce&&!o?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:le,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(H.icons?.close??_defaultIcons.defaultIcons.close)({size:U.iconSize,color:H.colors.text.secondary})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:q,testID:T,children:[S&&!Le?(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:b,style:f,children:S}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:$.root,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:$.fieldWrap,children:[(0,_jsxRuntime.jsx)(_FieldBase.FieldBase,{size:b,variant:D,focused:G,disabled:o,filled:ce,minHeight:U.minHeight,paddingHorizontal:w?0:U.paddingHorizontal,borderRadius:p??U.borderRadius,leading:ke,trailing:Ie,topNotch:ze.topNotch,onPress:W,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:P??i,children:(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:V,style:[$.input,{fontSize:U.fontSize,color:M.color,...M.weightStyle},E],value:re,onChangeText:te,onSubmitEditing:se,onFocus:Q,onBlur:X,placeholder:!Le||G||ce?i:void 0,placeholderTextColor:M.placeholderColor,autoFocus:n,editable:!o,returnKeyType:"search",selectionColor:(0,_FieldBase.resolveVariantColors)(H,D).borderFocusedRepresentative,accessibilityLabel:P??i,accessibilityState:{disabled:o},"aria-disabled":o,...N})}),ze.node]})}),v&&v.length>0?(0,_jsxRuntime.jsx)(_SearchPanel.SearchScopeBar,{scopes:v,scope:ie||(v[0]?.value??""),disabled:o,haptic:I,onChange:oe}):null,ve?(0,_jsxRuntime.jsx)(_SearchPanel.SearchRecents,{recents:ge,title:j,onSelect:je,onRemove:F?ye:void 0,onClear:B?Fe:void 0,onHold:he,onRelease:pe}):null,me?(0,_jsxRuntime.jsx)(_SearchPanel.SearchSuggestions,{suggestions:fe,query:re,onSelect:Ce,onHold:he,onRelease:pe}):null]})});SearchBar.displayName="SearchBar";const buildStyles=e=>_reactNative.StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});var _default=exports.default=SearchBar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.SearchBar=void 0;var _react=require("react"),_reactNative=require("react-native"),_useControllableState=require("../../hooks/useControllableState.js"),_useDebounce=require("../../hooks/useDebounce.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_defaultIcons=require("../AppIcon/defaultIcons.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_FieldBase=require("../FieldBase/FieldBase.js"),_useFloatingLabel=require("../FieldBase/useFloatingLabel.js"),_SearchPanel=require("./SearchPanel.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_PANEL_ROWS=8,HOLD_RELEASE_MS=50,SearchBar=exports.SearchBar=(0,_react.forwardRef)((e,a)=>{const{value:t,onChangeText:l,onSubmit:s,onFocus:r,onBlur:c,placeholder:i="Search…",autoFocus:n=!1,disabled:o=!1,onClear:u,leftIcon:d,debounceMs:_,size:b="md",variant:h,borderRadius:p,label:S,labelMode:g="top",labelStyle:f,scopes:v,scope:m,onScopeChange:x,recents:R,recentsTitle:j="Recent searches",maxRecents:C=DEFAULT_PANEL_ROWS,onSelectRecent:y,onRemoveRecent:F,onClearRecents:B,suggestions:k,maxSuggestions:L=DEFAULT_PANEL_ROWS,onSelectSuggestion:z,haptic:I,style:q,inputStyle:E,accessibilityLabel:P,testID:T,...N}=e,H=(0,_index.useTheme)(),D=h??H.components.searchBar?.defaultVariant??H.components.field?.defaultVariant??"filled",w="underline"===D,A=(0,_FieldBase.resolveFieldSize)(H,b),U={...A,...H.components.searchBar?.[b]??{}},M=(0,_FieldBase.resolveFieldTextStyle)(H,{disabled:o}),O=(0,_react.useRef)(null),V=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(O,a),[a]),W=(0,_react.useCallback)(()=>{o||O.current?.focus()},[o]),$=(0,_react.useMemo)(()=>buildStyles(H),[H]),K="string"==typeof t?t:"",[G,J]=(0,_react.useState)(!1),Q=(0,_react.useCallback)(e=>{J(!0),r?.(e)},[r]),X=(0,_react.useCallback)(e=>{J(!1),c?.(e)},[c]),[Y,Z]=(0,_react.useState)(K),ee=(0,_useDebounce.useDebounce)(Y,_??0);(0,_react.useEffect)(()=>{void 0!==_&&K!==Y&&Z(K)},[K,_]);const ae=(0,_react.useRef)(K);(0,_react.useEffect)(()=>{void 0!==_&&ee!==ae.current&&(ae.current=ee,l(ee))},[ee,_,l]);const te=(0,_react.useCallback)(e=>{void 0===_?l(e):Z(e)},[_,l]),le=(0,_react.useCallback)(()=>{const e=(0,_hapticUtils.resolveHaptic)(I,"selection");e&&(0,_hapticUtils.triggerHaptic)(e),void 0!==_&&(Z(""),ae.current=""),l(""),u?.()},[I,_,l,u]),se=(0,_react.useCallback)(()=>{s?.(void 0!==_?Y:K)},[s,_,Y,K]),re=void 0!==_?Y:K,ce=re.length>0,[ie,ne]=(0,_useControllableState.useControllableState)({value:m,defaultValue:v?.[0]?.value??"",onChange:x}),oe=(0,_react.useCallback)(e=>{ne(e);const a=v?.find(a=>a.value===e)?.label;a&&(0,_announce.announce)(`Searching ${a}`)},[v,ne]),[ue,de]=(0,_react.useState)(!1),be=(0,_react.useRef)(null),he=(0,_react.useCallback)(()=>{be.current&&(clearTimeout(be.current),be.current=null)},[]),pe=(0,_react.useCallback)(()=>{he(),de(!0)},[he]),Se=(0,_react.useCallback)(()=>{he(),be.current=setTimeout(()=>de(!1),50)},[he]);(0,_react.useEffect)(()=>he,[he]);const ge=!o&&(G||ue),fe=(0,_react.useMemo)(()=>(R??[]).slice(0,C),[R,C]),ve=(0,_react.useMemo)(()=>(k??[]).slice(0,L).map(_SearchPanel.normalizeSuggestion),[k,L]),me=ge&&!ce&&fe.length>0,xe=ge&&ce&&ve.length>0,Re=xe?ve.length:0;(0,_react.useEffect)(()=>{Re>0&&(0,_announce.announce)(1===Re?"1 suggestion":`${Re} suggestions`)},[Re]);const je=(0,_react.useCallback)(()=>{const e=(0,_hapticUtils.resolveHaptic)(I,"selection");e&&(0,_hapticUtils.triggerHaptic)(e)},[I]),Ce=(0,_react.useCallback)(e=>{je(),O.current?.blur(),de(!1),y?.(e)},[je,y]),ye=(0,_react.useCallback)(e=>{je(),O.current?.blur(),de(!1),z?.(e)},[je,z]),Fe=(0,_react.useCallback)(e=>{je(),F?.(e),(0,_announce.announce)(`Removed ${e}`),W()},[je,F,W]),Be=(0,_react.useCallback)(()=>{je(),B?.(),(0,_announce.announce)("Recent searches cleared"),W()},[je,B,W]),ke={size:U.iconSize,color:o?H.colors.text.disabled:H.colors.text.tertiary,disabled:o},Le=d?(0,_slotIcon.renderSlotIcon)(d,ke):(H.icons?.search??_defaultIcons.defaultIcons.search)(ke),ze=Boolean(S)&&"float"===g,Ie=(0,_useFloatingLabel.useFloatingLabel)({label:S,enabled:ze,floated:G||ce,variant:D,sizeTokens:{...A,...U},leadingOffset:U.iconSize+H.spacing.md,trailingOffset:ce?U.iconSize+H.spacing.md:0,paddingLeft:w?0:U.paddingHorizontal,color:H.colors.field.label,style:f}),qe=ce&&!o?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:le,hitSlop:8,accessibilityRole:"button",accessibilityLabel:"Clear search",children:(H.icons?.close??_defaultIcons.defaultIcons.close)({size:U.iconSize,color:H.colors.text.secondary})}):null;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:q,testID:T,children:[S&&!ze?(0,_jsxRuntime.jsx)(_FieldBase.FieldLabel,{size:b,style:f,children:S}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:$.root,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:$.fieldWrap,children:[(0,_jsxRuntime.jsx)(_FieldBase.FieldBase,{size:b,variant:D,focused:G,disabled:o,filled:ce,minHeight:U.minHeight,paddingHorizontal:w?0:U.paddingHorizontal,borderRadius:p??U.borderRadius,leading:Le,trailing:qe,topNotch:Ie.topNotch,onPress:W,pressFeedback:!1,accessibilityRole:"search",accessibilityLabel:P??i,children:(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:V,style:[$.input,{fontSize:U.fontSize,color:M.color,...M.weightStyle},E],value:re,onChangeText:te,onSubmitEditing:se,onFocus:Q,onBlur:X,placeholder:!ze||G||ce?i:void 0,placeholderTextColor:M.placeholderColor,autoFocus:n,editable:!o,returnKeyType:"search",selectionColor:(0,_FieldBase.resolveVariantColors)(H,D).borderFocusedRepresentative,accessibilityLabel:P??i,accessibilityState:{disabled:o},"aria-disabled":o,...N})}),Ie.node]})}),v&&v.length>0?(0,_jsxRuntime.jsx)(_SearchPanel.SearchScopeBar,{scopes:v,scope:ie||(v[0]?.value??""),disabled:o,haptic:I,onChange:oe}):null,me?(0,_jsxRuntime.jsx)(_SearchPanel.SearchRecents,{recents:fe,title:j,onSelect:Ce,onRemove:F?Fe:void 0,onClear:B?Be:void 0,onHold:pe,onRelease:Se}):null,xe?(0,_jsxRuntime.jsx)(_SearchPanel.SearchSuggestions,{suggestions:ve,query:re,onSelect:ye,onHold:pe,onRelease:Se}):null]})});SearchBar.displayName="SearchBar";const buildStyles=e=>_reactNative.StyleSheet.create({root:{flexDirection:"row",alignItems:"center",width:"100%",position:"relative",overflow:"visible"},fieldWrap:{flex:1,position:"relative",overflow:"visible"},input:{flex:1,padding:0,margin:0,includeFontPadding:!1}});var _default=exports.default=SearchBar;