@webority/mobile-ui 0.16.0 → 0.16.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Calendar/Calendar.js +1 -1
- package/lib/commonjs/components/StatusBadge/StatusBadge.js +1 -1
- package/lib/commonjs/components/Tooltip/Tooltip.js +1 -1
- package/lib/module/components/Calendar/Calendar.js +1 -1
- package/lib/module/components/StatusBadge/StatusBadge.js +1 -1
- package/lib/module/components/Tooltip/Tooltip.js +1 -1
- package/lib/typescript/commonjs/components/StatusBadge/StatusBadge.d.ts +3 -2
- package/lib/typescript/module/components/StatusBadge/StatusBadge.d.ts +3 -2
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Calendar=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"),_CalendarDay=require("./CalendarDay.js"),_calendarDates=require("./calendarDates.js"),_calendarStyles=require("./calendarStyles.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_TONE={holiday:"error",event:"primary",pending:"warning"},MAX_DOTS=3,DAY_TEXT_MAX_SCALE=1.5,toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"info":return e.colors.info;case"primary":return e.colors.primary;default:return e.colors.text.secondary}},toneInk=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText[t],Calendar=exports.Calendar=(0,_react.forwardRef)((e,t)=>{const{mode:a="single",value:r,onChange:n,month:i,onMonthChange:s,minDate:l,maxDate:o,disabledDates:c,weekStartsOn:d=0,locale:u="en-IN",markedDates:_,strikeMarkedInRange:m=!1,cellSize:y,haptic:h,accessibilityLabel:x,style:g,headerLabelStyle:v,navButtonStyle:p,testID:D}=e,b=(0,_index2.useTheme)(),f=(0,_index.usePresenceMotion)(),N=(0,_react.useMemo)(()=>(0,_calendarStyles.buildCalendarStyles)(b),[b]),[M,j]=(0,_index.useControllableState)({value:i?(0,_calendarDates.startOfMonth)(i):void 0,defaultValue:(0,_calendarDates.startOfMonth)(r?.start??new Date),onChange:s}),S=12*M.getFullYear()+M.getMonth(),k=r?.start?(0,_calendarDates.startOfDay)(r.start):null,w="range"===a&&r?.end?(0,_calendarDates.startOfDay)(r.end):null,T=k?.getTime()??null,R=w?.getTime()??null,C=(0,_calendarDates.toIso)(new Date),I=l?(0,_calendarDates.startOfDay)(l).getTime():null,L=o?(0,_calendarDates.startOfDay)(o).getTime():null,A=(0,_react.useMemo)(()=>new Set((c??[]).map(e=>(0,_calendarDates.toIso)(e))),[c]),E=(0,_react.useCallback)(e=>null!==I&&e.getTime()<I||null!==L&&e.getTime()>L||A.has((0,_calendarDates.toIso)(e)),[I,L,A]),O=(0,_react.useMemo)(()=>{const e=new Map;for(const t of _??[]){const a=(0,_calendarDates.toIso)(t.date);let r=e.get(a);r||(r={dots:[],holiday:!1,spoken:[]},e.set(a,r));const n=t.tone??DEFAULT_TONE[t.kind],i=toneColor(b,n);r.dots.length<3&&r.dots.push({key:`${t.kind}-${r.dots.length}`,color:i}),"holiday"===t.kind&&(r.holiday=!0,r.holidayInk??=toneInk(b,n)),t.label&&r.spoken.push(t.label),r.spoken.push(t.kind)}return e},[_,b]),V=(0,_react.useMemo)(()=>(0,_calendarDates.buildMonthMatrix)(new Date(Math.floor(S/12),S%12,1),d),[S,d]),F=(0,_react.useMemo)(()=>(0,_calendarDates.weekdayLabels)(u,d),[u,d]),P=(0,_react.useMemo)(()=>new Intl.DateTimeFormat(u,{month:"long",year:"numeric"}),[u]),q=(0,_react.useMemo)(()=>new Intl.DateTimeFormat(u,{weekday:"short",day:"numeric",month:"long"}),[u]),z=P.format(M),B=null===I||(0,_calendarDates.startOfMonth)(new Date(I)).getTime()<M.getTime(),H=null===L||(0,_calendarDates.startOfMonth)(new Date(L)).getTime()>M.getTime(),X=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,Z=(0,_react.useRef)((0,_index2.createAnimatedValue)(1)).current,$=(0,_react.useRef)(null);(0,_react.useEffect)(()=>()=>$.current?.stop(),[]);const U=(0,_react.useCallback)(e=>{!1!==h&&(0,_index3.triggerHaptic)("impactLight");const t=b.components.dateRangePicker,a=t?.monthSlideDistance??32,r=t?.monthSlideOutDuration??b.motion.duration.fast,n=t?.monthSlideInDuration??b.motion.duration.fast,[i]=f.range(-e*a,0),[s]=f.range(e*a,0),l=f.reduced?f.duration("fast"):r,o=f.reduced?f.duration("fast"):n;$.current?.stop(),$.current=_reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(X,{toValue:i,duration:r,easing:_reactNative.Easing.out(_reactNative.Easing.quad),useNativeDriver:!0}),_reactNative.Animated.timing(Z,{toValue:0,duration:l,useNativeDriver:!0})]),_reactNative.Animated.timing(X,{toValue:s,duration:0,useNativeDriver:!0}),_reactNative.Animated.parallel([_reactNative.Animated.timing(X,{toValue:0,duration:n,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:!0}),_reactNative.Animated.timing(Z,{toValue:1,duration:o,useNativeDriver:!0})])]),$.current.start();const c=(0,_calendarDates.addMonths)(M,e);j(c),_reactNative.AccessibilityInfo.announceForAccessibility(P.format(c))},[h,M,Z,P,X,f,j,b]),Y=(0,_react.useCallback)(()=>U(-1),[U]),G=(0,_react.useCallback)(()=>U(1),[U]),pressDay=e=>{if(E(e.date))return;const t=(0,_index3.resolveHaptic)(h,"selection");t&&(0,_index3.triggerHaptic)(t);const r=e.date;"single"===a||!k||w||r.getTime()<k.getTime()?n({start:r}):n({start:k,end:r}),e.inMonth||j((0,_calendarDates.startOfMonth)(r))},W=(0,_react.useRef)(pressDay);(0,_react.useLayoutEffect)(()=>{W.current=pressDay});const J=(0,_react.useCallback)(e=>W.current(e),[]),K=void 0===y?void 0:Math.max(y,_calendarStyles.MIN_CELL_SIZE),Q=(0,_react.useMemo)(()=>void 0===K?{flex:1}:{width:K},[K]),ee=(0,_react.useMemo)(()=>void 0===K?{flex:1,aspectRatio:1,minHeight:_calendarStyles.MIN_CELL_SIZE}:{width:K,height:K},[K]),te=b.components.dateRangePicker?.navButtonSize??_calendarStyles.NAV_BUTTON_SIZE,ae=Math.max(b.spacing.sm,(_calendarStyles.MIN_CELL_SIZE-te)/2),re=Math.min(b.maxFontSizeMultiplier??1.5,1.5),ne=[];for(let e=0;e<_calendarDates.GRID_CELLS;e+=7)ne.push(V.slice(e,e+7));return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[N.root,g],testID:D,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:N.headerRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:Y,disabled:!B,style:({pressed:e})=>[N.navBtn,e&&N.navBtnPressed,!B&&N.navBtnDisabled,p],accessibilityRole:"button",accessibilityLabel:"Previous month",accessibilityState:{disabled:!B},"aria-disabled":!B,hitSlop:ae,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.navText,maxFontSizeMultiplier:re,children:"‹"})}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.headerLabelWrap,{opacity:Z,transform:[{translateX:X}]},v],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.headerLabel,accessibilityRole:"header",accessibilityLabel:x?`${x}, ${z}`:void 0,maxFontSizeMultiplier:b.maxFontSizeMultiplier,children:z})}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:G,disabled:!H,style:({pressed:e})=>[N.navBtn,e&&N.navBtnPressed,!H&&N.navBtnDisabled,p],accessibilityRole:"button",accessibilityLabel:"Next month",accessibilityState:{disabled:!H},"aria-disabled":!H,hitSlop:ae,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.navText,maxFontSizeMultiplier:re,children:"›"})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.weekdayRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:F.map(({weekday:e,label:t})=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:[N.weekdayCell,Q],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.weekdayText,maxFontSizeMultiplier:re,children:t})},e))}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{opacity:Z,transform:[{translateX:X}]},children:ne.map(e=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.gridRow,children:e.map(e=>{const t=e.date.getTime(),r=null!==T&&t===T,n=null!==R&&t===R,i=null!==T&&null!==R&&t>=T&&t<=R,s=i&&!r&&!n,l=e.iso===C,o=O.get(e.iso),c=m&&i&&!0===o?.holiday,d=[q.format(e.date),...o?.spoken??[]];return l&&d.push("today"),"range"===a&&(r&&n?d.push("start and end of your range"):r?d.push("start of your range"):n?d.push("end of your range"):s&&d.push("in your range")),c&&d.push("not counted"),(0,_jsxRuntime.jsx)(_CalendarDay.CalendarDay,{cell:e,accessibilityLabel:d.join(", "),disabled:E(e.date),edge:r||n,mid:s,barLeft:i&&(n||s)&&!(r&&n),barRight:i&&(r||s)&&!(r&&n),today:l,struck:c,dots:o?.dots,inkColor:o?.holidayInk,cellStyle:ee,styles:N,maxFontSizeMultiplier:re,onPressDay:J},e.iso)})},e[0].iso))})]})});Calendar.displayName="Calendar";var _default=exports.default=Calendar;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Calendar=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"),_CalendarDay=require("./CalendarDay.js"),_calendarDates=require("./calendarDates.js"),_calendarStyles=require("./calendarStyles.js"),_jsxRuntime=require("react/jsx-runtime");const DEFAULT_TONE={holiday:"error",event:"primary",pending:"warning"},MAX_DOTS=3,DAY_TEXT_MAX_SCALE=1.5,toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":case"danger":return e.colors.error;case"info":return e.colors.info;case"primary":return e.colors.primary;default:return e.colors.text.secondary}},toneInk=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText["danger"===t?"error":t],Calendar=exports.Calendar=(0,_react.forwardRef)((e,t)=>{const{mode:a="single",value:r,onChange:n,month:i,onMonthChange:s,minDate:l,maxDate:o,disabledDates:c,weekStartsOn:d=0,locale:u="en-IN",markedDates:_,strikeMarkedInRange:m=!1,cellSize:y,haptic:h,accessibilityLabel:x,style:g,headerLabelStyle:v,navButtonStyle:p,testID:D}=e,b=(0,_index2.useTheme)(),f=(0,_index.usePresenceMotion)(),N=(0,_react.useMemo)(()=>(0,_calendarStyles.buildCalendarStyles)(b),[b]),[M,j]=(0,_index.useControllableState)({value:i?(0,_calendarDates.startOfMonth)(i):void 0,defaultValue:(0,_calendarDates.startOfMonth)(r?.start??new Date),onChange:s}),S=12*M.getFullYear()+M.getMonth(),k=r?.start?(0,_calendarDates.startOfDay)(r.start):null,w="range"===a&&r?.end?(0,_calendarDates.startOfDay)(r.end):null,T=k?.getTime()??null,R=w?.getTime()??null,C=(0,_calendarDates.toIso)(new Date),I=l?(0,_calendarDates.startOfDay)(l).getTime():null,L=o?(0,_calendarDates.startOfDay)(o).getTime():null,A=(0,_react.useMemo)(()=>new Set((c??[]).map(e=>(0,_calendarDates.toIso)(e))),[c]),E=(0,_react.useCallback)(e=>null!==I&&e.getTime()<I||null!==L&&e.getTime()>L||A.has((0,_calendarDates.toIso)(e)),[I,L,A]),O=(0,_react.useMemo)(()=>{const e=new Map;for(const t of _??[]){const a=(0,_calendarDates.toIso)(t.date);let r=e.get(a);r||(r={dots:[],holiday:!1,spoken:[]},e.set(a,r));const n=t.tone??DEFAULT_TONE[t.kind],i=toneColor(b,n);r.dots.length<3&&r.dots.push({key:`${t.kind}-${r.dots.length}`,color:i}),"holiday"===t.kind&&(r.holiday=!0,r.holidayInk??=toneInk(b,n)),t.label&&r.spoken.push(t.label),r.spoken.push(t.kind)}return e},[_,b]),V=(0,_react.useMemo)(()=>(0,_calendarDates.buildMonthMatrix)(new Date(Math.floor(S/12),S%12,1),d),[S,d]),F=(0,_react.useMemo)(()=>(0,_calendarDates.weekdayLabels)(u,d),[u,d]),P=(0,_react.useMemo)(()=>new Intl.DateTimeFormat(u,{month:"long",year:"numeric"}),[u]),q=(0,_react.useMemo)(()=>new Intl.DateTimeFormat(u,{weekday:"short",day:"numeric",month:"long"}),[u]),z=P.format(M),B=null===I||(0,_calendarDates.startOfMonth)(new Date(I)).getTime()<M.getTime(),H=null===L||(0,_calendarDates.startOfMonth)(new Date(L)).getTime()>M.getTime(),X=(0,_react.useRef)((0,_index2.createAnimatedValue)(0)).current,Z=(0,_react.useRef)((0,_index2.createAnimatedValue)(1)).current,$=(0,_react.useRef)(null);(0,_react.useEffect)(()=>()=>$.current?.stop(),[]);const U=(0,_react.useCallback)(e=>{!1!==h&&(0,_index3.triggerHaptic)("impactLight");const t=b.components.dateRangePicker,a=t?.monthSlideDistance??32,r=t?.monthSlideOutDuration??b.motion.duration.fast,n=t?.monthSlideInDuration??b.motion.duration.fast,[i]=f.range(-e*a,0),[s]=f.range(e*a,0),l=f.reduced?f.duration("fast"):r,o=f.reduced?f.duration("fast"):n;$.current?.stop(),$.current=_reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(X,{toValue:i,duration:r,easing:_reactNative.Easing.out(_reactNative.Easing.quad),useNativeDriver:!0}),_reactNative.Animated.timing(Z,{toValue:0,duration:l,useNativeDriver:!0})]),_reactNative.Animated.timing(X,{toValue:s,duration:0,useNativeDriver:!0}),_reactNative.Animated.parallel([_reactNative.Animated.timing(X,{toValue:0,duration:n,easing:_reactNative.Easing.out(_reactNative.Easing.cubic),useNativeDriver:!0}),_reactNative.Animated.timing(Z,{toValue:1,duration:o,useNativeDriver:!0})])]),$.current.start();const c=(0,_calendarDates.addMonths)(M,e);j(c),_reactNative.AccessibilityInfo.announceForAccessibility(P.format(c))},[h,M,Z,P,X,f,j,b]),Y=(0,_react.useCallback)(()=>U(-1),[U]),G=(0,_react.useCallback)(()=>U(1),[U]),pressDay=e=>{if(E(e.date))return;const t=(0,_index3.resolveHaptic)(h,"selection");t&&(0,_index3.triggerHaptic)(t);const r=e.date;"single"===a||!k||w||r.getTime()<k.getTime()?n({start:r}):n({start:k,end:r}),e.inMonth||j((0,_calendarDates.startOfMonth)(r))},W=(0,_react.useRef)(pressDay);(0,_react.useLayoutEffect)(()=>{W.current=pressDay});const J=(0,_react.useCallback)(e=>W.current(e),[]),K=void 0===y?void 0:Math.max(y,_calendarStyles.MIN_CELL_SIZE),Q=(0,_react.useMemo)(()=>void 0===K?{flex:1}:{width:K},[K]),ee=(0,_react.useMemo)(()=>void 0===K?{flex:1,aspectRatio:1,minHeight:_calendarStyles.MIN_CELL_SIZE}:{width:K,height:K},[K]),te=b.components.dateRangePicker?.navButtonSize??_calendarStyles.NAV_BUTTON_SIZE,ae=Math.max(b.spacing.sm,(_calendarStyles.MIN_CELL_SIZE-te)/2),re=Math.min(b.maxFontSizeMultiplier??1.5,1.5),ne=[];for(let e=0;e<_calendarDates.GRID_CELLS;e+=7)ne.push(V.slice(e,e+7));return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[N.root,g],testID:D,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:N.headerRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:Y,disabled:!B,style:({pressed:e})=>[N.navBtn,e&&N.navBtnPressed,!B&&N.navBtnDisabled,p],accessibilityRole:"button",accessibilityLabel:"Previous month",accessibilityState:{disabled:!B},"aria-disabled":!B,hitSlop:ae,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.navText,maxFontSizeMultiplier:re,children:"‹"})}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[N.headerLabelWrap,{opacity:Z,transform:[{translateX:X}]},v],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.headerLabel,accessibilityRole:"header",accessibilityLabel:x?`${x}, ${z}`:void 0,maxFontSizeMultiplier:b.maxFontSizeMultiplier,children:z})}),(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:G,disabled:!H,style:({pressed:e})=>[N.navBtn,e&&N.navBtnPressed,!H&&N.navBtnDisabled,p],accessibilityRole:"button",accessibilityLabel:"Next month",accessibilityState:{disabled:!H},"aria-disabled":!H,hitSlop:ae,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.navText,maxFontSizeMultiplier:re,children:"›"})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.weekdayRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:F.map(({weekday:e,label:t})=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:[N.weekdayCell,Q],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:N.weekdayText,maxFontSizeMultiplier:re,children:t})},e))}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{opacity:Z,transform:[{translateX:X}]},children:ne.map(e=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:N.gridRow,children:e.map(e=>{const t=e.date.getTime(),r=null!==T&&t===T,n=null!==R&&t===R,i=null!==T&&null!==R&&t>=T&&t<=R,s=i&&!r&&!n,l=e.iso===C,o=O.get(e.iso),c=m&&i&&!0===o?.holiday,d=[q.format(e.date),...o?.spoken??[]];return l&&d.push("today"),"range"===a&&(r&&n?d.push("start and end of your range"):r?d.push("start of your range"):n?d.push("end of your range"):s&&d.push("in your range")),c&&d.push("not counted"),(0,_jsxRuntime.jsx)(_CalendarDay.CalendarDay,{cell:e,accessibilityLabel:d.join(", "),disabled:E(e.date),edge:r||n,mid:s,barLeft:i&&(n||s)&&!(r&&n),barRight:i&&(r||s)&&!(r&&n),today:l,struck:c,dots:o?.dots,inkColor:o?.holidayInk,cellStyle:ee,styles:N,maxFontSizeMultiplier:re,onPressDay:J},e.iso)})},e[0].iso))})]})});Calendar.displayName="Calendar";var _default=exports.default=Calendar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.StatusBadge=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:r}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:r.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:r.warning};case"error":return{base:e.colors.error,on:e.colors.onError,ink:r.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:r.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:r.primary};default:return{base:e.colors.text.secondary,on:e.colors.onNeutral,ink:e.colors.text.secondary}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,r,o)=>{const s=isHex(o),{base:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.StatusBadge=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_toneInk=require("../../theme/toneInk.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:r}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:r.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:r.warning};case"error":case"danger":return{base:e.colors.error,on:e.colors.onError,ink:r.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:r.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:r.primary};default:return{base:e.colors.text.secondary,on:e.colors.onNeutral,ink:e.colors.text.secondary}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,r,o)=>{const s=isHex(o),{base:n,on:a,ink:i}=s?{base:o,on:e.colors.text.inverse,ink:(0,_toneInk.deriveToneInk)(o,[e.colors.background.primary,e.colors.background.secondary,e.colors.background.tertiary],e.mode)}:toneFor(e,t),l=!s&&"neutral"===t,c=l?e.colors.background.tertiary:(0,_color.tintOf)(n,.14,e.colors.background.secondary),d=l?e.colors.border.primary:(0,_color.tintOf)(n,.4,n);switch(r){case"solid":return{fill:n,border:n,text:a,dot:a};case"outline":return{fill:"transparent",border:l?d:n,text:i,dot:n};default:return{fill:c,border:d,text:i,dot:n}}},StatusBadge=exports.StatusBadge=(0,_react.forwardRef)((e,t)=>{const{label:r,tone:o="neutral",variant:s="soft",size:n="md",dot:a=!1,color:i,loading:l=!1,accessibilityLabel:c,style:d,textStyle:u,testID:g}=e,x=(0,_index.useTheme)(),b=sizeMap[n],f=(0,_react.useMemo)(()=>paletteFor(x,o,s,i),[x,o,s,i]);return l?(0,_jsxRuntime.jsx)(StatusBadgeSkeleton,{...e}):(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:c??r,testID:g,style:[styles.base,{minHeight:b.height,paddingHorizontal:b.paddingH,borderRadius:x.radius.full,..._corners.smoothCorners,backgroundColor:f.fill,borderColor:f.border,borderWidth:1},d],children:[a?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:"status-badge-dot",style:{width:b.dot,height:b.dot,borderRadius:b.dot/2,marginRight:b.gap,backgroundColor:f.dot}}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.label,{color:f.text,fontSize:b.fontSize,...(0,_index.fontFor)(x,"semibold")},u],numberOfLines:1,maxFontSizeMultiplier:x.maxFontSizeMultiplier,children:r})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:r,style:o})=>{const s=sizeMap[t],n=Math.max(32,Math.min(120,6.5*(e??"").length))+2*s.paddingH+(r?s.dot+s.gap:0);return(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:n,height:s.height,radius:s.height/2,style:[styles.skeleton,o]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=_reactNative.StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});var _default=exports.default=StatusBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tooltip=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePresenceMotion=require("../../hooks/usePresenceMotion.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_corners=require("../../utils/corners.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_placement=require("../../utils/placement.js"),_focusHost=require("../Menu/focusHost.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_RichTooltipBody=require("./RichTooltipBody.js"),_tooltipPosition=require("./tooltipPosition.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?o:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?a(s,t,i):s[t]=e[t]);return s})(e,t)}const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:r,variant:o="plain",title:a,action:i,placement:s="auto",visible:n,onVisibleChange:c,hideOnContentPress:l=!0,maxWidth:u,showArrow:_=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:m,messageStyle:h,closeLabel:g="Close tooltip",testID:v}=e,b="rich"===o,R=e.trigger??(b?"press":"longPress"),x=(0,_index.useTheme)(),y=(0,_usePresenceMotion.usePresenceMotion)(),j=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),[T,A]=(0,_ModalSafeArea.useModalInsets)(),S=(0,_react.useMemo)(()=>({...j,top:T.top,bottom:T.bottom}),[j,T]),w=(0,_reactNative.useWindowDimensions)(),N=(0,_react.useMemo)(()=>buildStyles(x),[x]),P=x.components.tooltip,M=P?.gap??8,E=P?.screenPadding??8,C=P?.pressAutoHideMs??4e3,D=P?.arrowHalfWidth??4,H=P?.arrowHeight??6,L=P?.arrowCornerPadding??12,W=P?.lineHeight??18,O=u??(b?280:P?.maxWidth??240),q="press"===R&&!b,I=(P?.enableScaleAnimation??!1)&&!y.reduced,k=P?.exitDurationMs??150,F="manual"===R||"boolean"==typeof n,[V,U]=(0,_react.useState)(!1),B=F?Boolean(n):V,[z,G]=(0,_react.useState)(null),[X,Y]=(0,_react.useState)({width:0,height:0}),J=(0,_react.useRef)(null),K=(0,_react.useRef)(null),Q=(0,_react.useRef)(null),Z=(0,_react.useRef)(null),$=(0,_react.useRef)(null),ee=(0,_react.useRef)(!1),te=(0,_react.useRef)(!1),re=(0,_react.useRef)((0,_index.createAnimatedValue)(B||!I?1:.85)).current,oe=(0,_react.useRef)((0,_index.createAnimatedValue)(B?1:0)).current,ae=(0,_react.useRef)(null),ie=(0,_react.useRef)(!1),[se,ne]=(0,_react.useState)(B),ce=(0,_react.useCallback)(e=>{F||U(e),c?.(e)},[F,c]),le=(0,_react.useCallback)(()=>{J.current&&J.current.measureInWindow((e,t,r,o)=>{G({x:e,y:t,width:r,height:o})})},[]),ue=(0,_react.useCallback)(e=>{le(),ce(!0)},[le,ce]),de=(0,_react.useCallback)(()=>{ce(!1)},[ce]),fe=(0,_react.useRef)(de);fe.current=de;const pe=(0,_react.useCallback)(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():b&&(0,_focusHost.focusHost)(K.current??J.current)},[b]);(0,_react.useEffect)(()=>{if(B)return te.current=!0,ee.current=!1,(0,_placement.claimAnchoredSurface)(()=>fe.current());te.current&&(te.current=!1,ee.current=!0)},[B]),(0,_react.useEffect)(()=>{B&&ne(!0)},[B]);const me=(0,_react.useRef)(se);(0,_react.useEffect)(()=>{me.current&&!se&&"ios"!==_reactNative.Platform.OS&&pe(),me.current=se},[se,pe]);const he=(0,_react.useCallback)(()=>{$.current=i?.onPress??null,de()},[i,de]);(0,_react.useEffect)(()=>{if(!ie.current)return ie.current=!0,B&&(le(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))),()=>{ae.current&&(clearTimeout(ae.current),ae.current=null)};let e;if(B){le();const t=[_reactNative.Animated.timing(oe,{toValue:1,duration:y.duration("fast"),useNativeDriver:!0})];I?t.push(_reactNative.Animated.spring(re,{toValue:1,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0})):(0,_index.setNativeValue)(re,1),e=_reactNative.Animated.parallel(t),e.start(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))}else{const t=[_reactNative.Animated.timing(oe,{toValue:0,duration:y.reduced?y.duration("fast"):k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})];I&&t.push(_reactNative.Animated.timing(re,{toValue:.85,duration:k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})),e=_reactNative.Animated.parallel(t),e.start(({finished:e})=>{e&&ne(!1)}),ae.current&&(clearTimeout(ae.current),ae.current=null)}return()=>{e?.stop(),ae.current&&(clearTimeout(ae.current),ae.current=null)}},[B]);const handleContentLayout=e=>{const{width:t,height:r}=e.nativeEvent.layout;t===X.width&&r===X.height||Y({width:t,height:r})},ge=(0,_react.useMemo)(()=>(0,_tooltipPosition.resolveTooltipPosition)({anchor:z,size:X,placement:s,rich:b,viewport:{width:w.width,height:w.height,insets:S},maxWidth:O,gap:M,padding:E,arrowCornerPadding:L}),[z,X,s,b,w.width,w.height,S,O,M,E,L]),ve=null!==z&&X.width>0,be=B&&ve;(0,_react.useEffect)(()=>{if(!b||!be)return;const e="web"===_reactNative.Platform.OS?Z:Q,t=setTimeout(()=>(0,_focusHost.focusHost)(e.current),_focusHost.FOCUS_DELAY_MS);return()=>clearTimeout(t)},[b,be]),(0,_react.useEffect)(()=>{!b&&be&&"ios"===_reactNative.Platform.OS&&"string"==typeof t&&(0,_announce.announce)(t)},[b,be,t]);const Re=r.props,xe=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(Re.ref,K),[Re.ref]),ye={};"longPress"!==R||Re.contextMenu?"press"===R&&(ye.onPress=e=>{Re.onPress?.(e),ue(e)}):(ye.onLongPress=ue,ye.accessibilityHint="Long press for more info"),b&&(ye.ref=xe);const je=_react.default.cloneElement(r,ye),Te=d??("string"==typeof t?t:"Tooltip"),Ae=(0,_react.useMemo)(()=>{if(!_)return null;const e=b?x.colors.background.elevated:x.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:D,borderRightWidth:D,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-D,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-D}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-D,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-D,transform:[{rotate:"-90deg"}]}},[_,ge,x,b,D,H]),Se={position:"absolute",top:ge.top,left:ge.left,maxWidth:O,opacity:B&&!ve?0:oe,transform:[{scale:re}]},we=Ae?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[Ae,m],pointerEvents:"none"}):null;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{ref:J,collapsable:!1,onLayout:le,testID:v,children:je}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:se,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:de,onDismiss:pe,children:(0,_jsxRuntime.jsxs)(_ModalSafeArea.ModalSafeArea,{onInsets:A,children:[b?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button"}),se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_RichTooltipBody.RichTooltipBody,{title:a,content:t,action:i,onAction:he,focusRef:Q,actionRef:Z,messageStyle:h}),we]}):null]}):(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button",children:se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{accessibilityRole:"tooltip",accessibilityLiveRegion:"polite",accessibilityLabel:Te,onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[N.tooltip,{backgroundColor:x.colors.background.inverse,borderRadius:x.radius.md,..._corners.smoothCorners,paddingHorizontal:x.spacing.md,paddingVertical:x.spacing.sm,...x.shadows.lg,shadowColor:x.shadows.lg.shadowColor}],children:"string"==typeof t?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:x.colors.text.inverse,fontSize:x.typography.fontSize.sm,lineHeight:W},h],children:t}):t}),we]}):null}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})]})};exports.Tooltip=Tooltip;const buildStyles=e=>_reactNative.StyleSheet.create({tooltip:{overflow:"hidden"}});var _default=exports.default=Tooltip;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tooltip=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePresenceMotion=require("../../hooks/usePresenceMotion.js"),_index=require("../../theme/index.js"),_announce=require("../../utils/announce.js"),_corners=require("../../utils/corners.js"),_mergeRefs=require("../../utils/mergeRefs.js"),_placement=require("../../utils/placement.js"),_focusHost=require("../Menu/focusHost.js"),_ModalSafeArea=require("../ModalSafeArea/ModalSafeArea.js"),_ToastProvider=require("../Toast/ToastProvider.js"),_RichTooltipBody=require("./RichTooltipBody.js"),_tooltipPosition=require("./tooltipPosition.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?o:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?a(s,t,i):s[t]=e[t]);return s})(e,t)}const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:r,variant:o="plain",title:a,action:i,placement:s="auto",visible:n,onVisibleChange:c,hideOnContentPress:l=!0,maxWidth:u,showArrow:_=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:m,messageStyle:h,closeLabel:g="Close tooltip",testID:v}=e,b="rich"===o,R=e.trigger??(b?"press":"longPress"),x=(0,_index.useTheme)(),y=(0,_usePresenceMotion.usePresenceMotion)(),j=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),[T,A]=(0,_ModalSafeArea.useModalInsets)(),S=(0,_react.useMemo)(()=>({...j,top:T.top,bottom:T.bottom}),[j,T]),w=(0,_reactNative.useWindowDimensions)(),N=(0,_react.useMemo)(()=>buildStyles(x),[x]),P=x.components.tooltip,M=P?.gap??8,E=P?.screenPadding??8,C=P?.pressAutoHideMs??4e3,D=P?.arrowHalfWidth??4,H=P?.arrowHeight??6,L=P?.arrowCornerPadding??12,W=P?.lineHeight??18,O=u??(b?280:P?.maxWidth??240),q="press"===R&&!b,I=(P?.enableScaleAnimation??!1)&&!y.reduced,k=P?.exitDurationMs??150,F="manual"===R||"boolean"==typeof n,[V,U]=(0,_react.useState)(!1),B=F?Boolean(n):V,[z,G]=(0,_react.useState)(null),[X,Y]=(0,_react.useState)({width:0,height:0}),J=(0,_react.useRef)(null),K=(0,_react.useRef)(null),Q=(0,_react.useRef)(null),Z=(0,_react.useRef)(null),$=(0,_react.useRef)(null),ee=(0,_react.useRef)(!1),te=(0,_react.useRef)(!1),re=(0,_react.useRef)((0,_index.createAnimatedValue)(B||!I?1:.85)).current,oe=(0,_react.useRef)((0,_index.createAnimatedValue)(B?1:0)).current,ae=(0,_react.useRef)(null),ie=(0,_react.useRef)(!1),[se,ne]=(0,_react.useState)(B),ce=(0,_react.useCallback)(e=>{F||U(e),c?.(e)},[F,c]),le=(0,_react.useCallback)(()=>{J.current&&J.current.measureInWindow((e,t,r,o)=>{G({x:e,y:t,width:r,height:o})})},[]),ue=(0,_react.useCallback)(e=>{le(),ce(!0)},[le,ce]),de=(0,_react.useCallback)(()=>{ce(!1)},[ce]),fe=(0,_react.useRef)(de);fe.current=de;const pe=(0,_react.useCallback)(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():b&&(0,_focusHost.focusHost)(K.current??J.current)},[b]);(0,_react.useEffect)(()=>{if(B)return te.current=!0,ee.current=!1,(0,_placement.claimAnchoredSurface)(()=>fe.current());te.current&&(te.current=!1,ee.current=!0)},[B]),(0,_react.useEffect)(()=>{B&&ne(!0)},[B]);const me=(0,_react.useRef)(se);(0,_react.useEffect)(()=>{me.current&&!se&&"ios"!==_reactNative.Platform.OS&&pe(),me.current=se},[se,pe]);const he=(0,_react.useCallback)(()=>{$.current=i?.onPress??null,de()},[i,de]);(0,_react.useEffect)(()=>{if(!ie.current)return ie.current=!0,B&&(le(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))),()=>{ae.current&&(clearTimeout(ae.current),ae.current=null)};let e;if(B){le();const t=[_reactNative.Animated.timing(oe,{toValue:1,duration:y.duration("fast"),useNativeDriver:!0})];I?t.push(_reactNative.Animated.spring(re,{toValue:1,damping:x.motion.spring.snappy.damping,stiffness:x.motion.spring.snappy.stiffness,mass:x.motion.spring.snappy.mass,useNativeDriver:!0})):(0,_index.setNativeValue)(re,1),e=_reactNative.Animated.parallel(t),e.start(),q&&(ae.current&&clearTimeout(ae.current),ae.current=setTimeout(()=>{de()},C))}else{const t=[_reactNative.Animated.timing(oe,{toValue:0,duration:y.reduced?y.duration("fast"):k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})];I&&t.push(_reactNative.Animated.timing(re,{toValue:.85,duration:k,easing:_reactNative.Easing.bezier(...x.motion.easing.accelerate),useNativeDriver:!0})),e=_reactNative.Animated.parallel(t),e.start(({finished:e})=>{e&&ne(!1)}),ae.current&&(clearTimeout(ae.current),ae.current=null)}return()=>{e?.stop(),ae.current&&(clearTimeout(ae.current),ae.current=null)}},[B]);const handleContentLayout=e=>{const{width:t,height:r}=e.nativeEvent.layout;t===X.width&&r===X.height||Y({width:t,height:r})},ge=(0,_react.useMemo)(()=>(0,_tooltipPosition.resolveTooltipPosition)({anchor:z,size:X,placement:s,rich:b,viewport:{width:w.width,height:w.height,insets:S},maxWidth:O,gap:M,padding:E,arrowCornerPadding:L}),[z,X,s,b,w.width,w.height,S,O,M,E,L]),ve=null!==z&&X.width>0,be=B&&ve;(0,_react.useEffect)(()=>{if(!b||!be)return;const e="web"===_reactNative.Platform.OS?Z:Q,t=setTimeout(()=>(0,_focusHost.focusHost)(e.current),_focusHost.FOCUS_DELAY_MS);return()=>clearTimeout(t)},[b,be]),(0,_react.useEffect)(()=>{!b&&be&&"ios"===_reactNative.Platform.OS&&"string"==typeof t&&(0,_announce.announce)(t)},[b,be,t]);const Re=r.props,xe=(0,_react.useMemo)(()=>(0,_mergeRefs.mergeRefs)(Re.ref,K),[Re.ref]),ye={};"longPress"!==R||Re.contextMenu?"press"===R&&(ye.onPress=e=>{Re.onPress?.(e),ue(e)}):(ye.onLongPress=ue,ye.accessibilityHint="Long press for more info"),b&&(ye.ref=xe);const je=_react.default.cloneElement(r,ye),Te=d??("string"==typeof t?t:"Tooltip"),Ae=(0,_react.useMemo)(()=>{if(!_)return null;const e=b?x.colors.background.elevated:x.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:D,borderRightWidth:D,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-D,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-D}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-D,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-D,transform:[{rotate:"-90deg"}]}},[_,ge,x,b,D,H]),Se={position:"absolute",top:ge.top,left:ge.left,maxWidth:O,opacity:B&&!ve?0:oe,transform:[{scale:re}]},we=Ae?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[Ae,m],pointerEvents:"none"}):null;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{ref:J,collapsable:!1,onLayout:le,testID:v,children:je}),(0,_jsxRuntime.jsx)(_reactNative.Modal,{visible:se,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:de,onDismiss:pe,children:(0,_jsxRuntime.jsxs)(_ModalSafeArea.ModalSafeArea,{onInsets:A,children:[b?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button"}),se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_RichTooltipBody.RichTooltipBody,{title:a,content:t,action:i,onAction:he,focusRef:Q,actionRef:Z,messageStyle:h}),we]}):null]}):(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:_reactNative.StyleSheet.absoluteFill,onPress:l?de:void 0,accessibilityLabel:g,accessibilityRole:"button",children:se?(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{accessibilityRole:"web"===_reactNative.Platform.OS?"tooltip":void 0,accessibilityLiveRegion:"polite",accessibilityLabel:Te,onLayout:handleContentLayout,style:[Se,f,p],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[N.tooltip,{backgroundColor:x.colors.background.inverse,borderRadius:x.radius.md,..._corners.smoothCorners,paddingHorizontal:x.spacing.md,paddingVertical:x.spacing.sm,...x.shadows.lg,shadowColor:x.shadows.lg.shadowColor}],children:"string"==typeof t?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[{color:x.colors.text.inverse,fontSize:x.typography.fontSize.sm,lineHeight:W},h],children:t}):t}),we]}):null}),(0,_jsxRuntime.jsx)(_ToastProvider.ToastHost,{})]})})]})};exports.Tooltip=Tooltip;const buildStyles=e=>_reactNative.StyleSheet.create({tooltip:{overflow:"hidden"}});var _default=exports.default=Tooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useCallback,useEffect,useLayoutEffect,useMemo,useRef}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,Text,View}from"react-native";import{useControllableState,usePresenceMotion}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{CalendarDay}from"./CalendarDay.js";import{addMonths,buildMonthMatrix,GRID_CELLS,startOfDay,startOfMonth,toIso,weekdayLabels}from"./calendarDates.js";import{buildCalendarStyles,MIN_CELL_SIZE,NAV_BUTTON_SIZE}from"./calendarStyles.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_TONE={holiday:"error",event:"primary",pending:"warning"},MAX_DOTS=3,DAY_TEXT_MAX_SCALE=1.5,toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":return e.colors.error;case"info":return e.colors.info;case"primary":return e.colors.primary;default:return e.colors.text.secondary}},toneInk=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText[t],Calendar=forwardRef((e,t)=>{const{mode:a="single",value:s,onChange:n,month:i,onMonthChange:r,minDate:o,maxDate:l,disabledDates:d,weekStartsOn:u=0,locale:c="en-IN",markedDates:m,strikeMarkedInRange:h=!1,cellSize:y,haptic:g,accessibilityLabel:f,style:p,headerLabelStyle:b,navButtonStyle:x,testID:M}=e,D=useTheme(),T=usePresenceMotion(),w=useMemo(()=>buildCalendarStyles(D),[D]),[S,_]=useControllableState({value:i?startOfMonth(i):void 0,defaultValue:startOfMonth(s?.start??new Date),onChange:r}),k=12*S.getFullYear()+S.getMonth(),v=s?.start?startOfDay(s.start):null,C="range"===a&&s?.end?startOfDay(s.end):null,I=v?.getTime()??null,L=C?.getTime()??null,E=toIso(new Date),j=o?startOfDay(o).getTime():null,A=l?startOfDay(l).getTime():null,R=useMemo(()=>new Set((d??[]).map(e=>toIso(e))),[d]),V=useCallback(e=>null!==j&&e.getTime()<j||null!==A&&e.getTime()>A||R.has(toIso(e)),[j,A,R]),N=useMemo(()=>{const e=new Map;for(const t of m??[]){const a=toIso(t.date);let s=e.get(a);s||(s={dots:[],holiday:!1,spoken:[]},e.set(a,s));const n=t.tone??DEFAULT_TONE[t.kind],i=toneColor(D,n);s.dots.length<3&&s.dots.push({key:`${t.kind}-${s.dots.length}`,color:i}),"holiday"===t.kind&&(s.holiday=!0,s.holidayInk??=toneInk(D,n)),t.label&&s.spoken.push(t.label),s.spoken.push(t.kind)}return e},[m,D]),O=useMemo(()=>buildMonthMatrix(new Date(Math.floor(k/12),k%12,1),u),[k,u]),F=useMemo(()=>weekdayLabels(c,u),[c,u]),P=useMemo(()=>new Intl.DateTimeFormat(c,{month:"long",year:"numeric"}),[c]),B=useMemo(()=>new Intl.DateTimeFormat(c,{weekday:"short",day:"numeric",month:"long"}),[c]),z=P.format(S),H=null===j||startOfMonth(new Date(j)).getTime()<S.getTime(),Z=null===A||startOfMonth(new Date(A)).getTime()>S.getTime(),X=useRef(createAnimatedValue(0)).current,U=useRef(createAnimatedValue(1)).current,$=useRef(null);useEffect(()=>()=>$.current?.stop(),[]);const q=useCallback(e=>{!1!==g&&triggerHaptic("impactLight");const t=D.components.dateRangePicker,a=t?.monthSlideDistance??32,s=t?.monthSlideOutDuration??D.motion.duration.fast,n=t?.monthSlideInDuration??D.motion.duration.fast,[i]=T.range(-e*a,0),[r]=T.range(e*a,0),o=T.reduced?T.duration("fast"):s,l=T.reduced?T.duration("fast"):n;$.current?.stop(),$.current=Animated.sequence([Animated.parallel([Animated.timing(X,{toValue:i,duration:s,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(U,{toValue:0,duration:o,useNativeDriver:!0})]),Animated.timing(X,{toValue:r,duration:0,useNativeDriver:!0}),Animated.parallel([Animated.timing(X,{toValue:0,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(U,{toValue:1,duration:l,useNativeDriver:!0})])]),$.current.start();const d=addMonths(S,e);_(d),AccessibilityInfo.announceForAccessibility(P.format(d))},[g,S,U,P,X,T,_,D]),G=useCallback(()=>q(-1),[q]),Y=useCallback(()=>q(1),[q]),pressDay=e=>{if(V(e.date))return;const t=resolveHaptic(g,"selection");t&&triggerHaptic(t);const s=e.date;"single"===a||!v||C||s.getTime()<v.getTime()?n({start:s}):n({start:v,end:s}),e.inMonth||_(startOfMonth(s))},W=useRef(pressDay);useLayoutEffect(()=>{W.current=pressDay});const J=useCallback(e=>W.current(e),[]),K=void 0===y?void 0:Math.max(y,MIN_CELL_SIZE),Q=useMemo(()=>void 0===K?{flex:1}:{width:K},[K]),ee=useMemo(()=>void 0===K?{flex:1,aspectRatio:1,minHeight:MIN_CELL_SIZE}:{width:K,height:K},[K]),te=D.components.dateRangePicker?.navButtonSize??NAV_BUTTON_SIZE,ae=Math.max(D.spacing.sm,(MIN_CELL_SIZE-te)/2),se=Math.min(D.maxFontSizeMultiplier??1.5,1.5),ne=[];for(let e=0;e<GRID_CELLS;e+=7)ne.push(O.slice(e,e+7));return _jsxs(View,{ref:t,style:[w.root,p],testID:M,children:[_jsxs(View,{style:w.headerRow,children:[_jsx(Pressable,{onPress:G,disabled:!H,style:({pressed:e})=>[w.navBtn,e&&w.navBtnPressed,!H&&w.navBtnDisabled,x],accessibilityRole:"button",accessibilityLabel:"Previous month",accessibilityState:{disabled:!H},"aria-disabled":!H,hitSlop:ae,children:_jsx(Text,{style:w.navText,maxFontSizeMultiplier:se,children:"‹"})}),_jsx(Animated.View,{style:[w.headerLabelWrap,{opacity:U,transform:[{translateX:X}]},b],children:_jsx(Text,{style:w.headerLabel,accessibilityRole:"header",accessibilityLabel:f?`${f}, ${z}`:void 0,maxFontSizeMultiplier:D.maxFontSizeMultiplier,children:z})}),_jsx(Pressable,{onPress:Y,disabled:!Z,style:({pressed:e})=>[w.navBtn,e&&w.navBtnPressed,!Z&&w.navBtnDisabled,x],accessibilityRole:"button",accessibilityLabel:"Next month",accessibilityState:{disabled:!Z},"aria-disabled":!Z,hitSlop:ae,children:_jsx(Text,{style:w.navText,maxFontSizeMultiplier:se,children:"›"})})]}),_jsx(View,{style:w.weekdayRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:F.map(({weekday:e,label:t})=>_jsx(View,{style:[w.weekdayCell,Q],children:_jsx(Text,{style:w.weekdayText,maxFontSizeMultiplier:se,children:t})},e))}),_jsx(Animated.View,{style:{opacity:U,transform:[{translateX:X}]},children:ne.map(e=>_jsx(View,{style:w.gridRow,children:e.map(e=>{const t=e.date.getTime(),s=null!==I&&t===I,n=null!==L&&t===L,i=null!==I&&null!==L&&t>=I&&t<=L,r=i&&!s&&!n,o=e.iso===E,l=N.get(e.iso),d=h&&i&&!0===l?.holiday,u=[B.format(e.date),...l?.spoken??[]];return o&&u.push("today"),"range"===a&&(s&&n?u.push("start and end of your range"):s?u.push("start of your range"):n?u.push("end of your range"):r&&u.push("in your range")),d&&u.push("not counted"),_jsx(CalendarDay,{cell:e,accessibilityLabel:u.join(", "),disabled:V(e.date),edge:s||n,mid:r,barLeft:i&&(n||r)&&!(s&&n),barRight:i&&(s||r)&&!(s&&n),today:o,struck:d,dots:l?.dots,inkColor:l?.holidayInk,cellStyle:ee,styles:w,maxFontSizeMultiplier:se,onPressDay:J},e.iso)})},e[0].iso))})]})});Calendar.displayName="Calendar";export{Calendar};export default Calendar;
|
|
1
|
+
"use strict";import{forwardRef,useCallback,useEffect,useLayoutEffect,useMemo,useRef}from"react";import{AccessibilityInfo,Animated,Easing,Pressable,Text,View}from"react-native";import{useControllableState,usePresenceMotion}from"../../hooks/index.js";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{CalendarDay}from"./CalendarDay.js";import{addMonths,buildMonthMatrix,GRID_CELLS,startOfDay,startOfMonth,toIso,weekdayLabels}from"./calendarDates.js";import{buildCalendarStyles,MIN_CELL_SIZE,NAV_BUTTON_SIZE}from"./calendarStyles.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_TONE={holiday:"error",event:"primary",pending:"warning"},MAX_DOTS=3,DAY_TEXT_MAX_SCALE=1.5,toneColor=(e,t)=>{switch(t){case"success":return e.colors.success;case"warning":return e.colors.warning;case"error":case"danger":return e.colors.error;case"info":return e.colors.info;case"primary":return e.colors.primary;default:return e.colors.text.secondary}},toneInk=(e,t)=>"neutral"===t?e.colors.text.secondary:e.colors.toneText["danger"===t?"error":t],Calendar=forwardRef((e,t)=>{const{mode:a="single",value:s,onChange:n,month:i,onMonthChange:r,minDate:o,maxDate:l,disabledDates:d,weekStartsOn:u=0,locale:c="en-IN",markedDates:m,strikeMarkedInRange:h=!1,cellSize:y,haptic:g,accessibilityLabel:f,style:p,headerLabelStyle:b,navButtonStyle:x,testID:M}=e,D=useTheme(),T=usePresenceMotion(),w=useMemo(()=>buildCalendarStyles(D),[D]),[S,_]=useControllableState({value:i?startOfMonth(i):void 0,defaultValue:startOfMonth(s?.start??new Date),onChange:r}),k=12*S.getFullYear()+S.getMonth(),v=s?.start?startOfDay(s.start):null,C="range"===a&&s?.end?startOfDay(s.end):null,I=v?.getTime()??null,L=C?.getTime()??null,E=toIso(new Date),j=o?startOfDay(o).getTime():null,A=l?startOfDay(l).getTime():null,R=useMemo(()=>new Set((d??[]).map(e=>toIso(e))),[d]),V=useCallback(e=>null!==j&&e.getTime()<j||null!==A&&e.getTime()>A||R.has(toIso(e)),[j,A,R]),N=useMemo(()=>{const e=new Map;for(const t of m??[]){const a=toIso(t.date);let s=e.get(a);s||(s={dots:[],holiday:!1,spoken:[]},e.set(a,s));const n=t.tone??DEFAULT_TONE[t.kind],i=toneColor(D,n);s.dots.length<3&&s.dots.push({key:`${t.kind}-${s.dots.length}`,color:i}),"holiday"===t.kind&&(s.holiday=!0,s.holidayInk??=toneInk(D,n)),t.label&&s.spoken.push(t.label),s.spoken.push(t.kind)}return e},[m,D]),O=useMemo(()=>buildMonthMatrix(new Date(Math.floor(k/12),k%12,1),u),[k,u]),F=useMemo(()=>weekdayLabels(c,u),[c,u]),P=useMemo(()=>new Intl.DateTimeFormat(c,{month:"long",year:"numeric"}),[c]),B=useMemo(()=>new Intl.DateTimeFormat(c,{weekday:"short",day:"numeric",month:"long"}),[c]),z=P.format(S),H=null===j||startOfMonth(new Date(j)).getTime()<S.getTime(),Z=null===A||startOfMonth(new Date(A)).getTime()>S.getTime(),X=useRef(createAnimatedValue(0)).current,U=useRef(createAnimatedValue(1)).current,$=useRef(null);useEffect(()=>()=>$.current?.stop(),[]);const q=useCallback(e=>{!1!==g&&triggerHaptic("impactLight");const t=D.components.dateRangePicker,a=t?.monthSlideDistance??32,s=t?.monthSlideOutDuration??D.motion.duration.fast,n=t?.monthSlideInDuration??D.motion.duration.fast,[i]=T.range(-e*a,0),[r]=T.range(e*a,0),o=T.reduced?T.duration("fast"):s,l=T.reduced?T.duration("fast"):n;$.current?.stop(),$.current=Animated.sequence([Animated.parallel([Animated.timing(X,{toValue:i,duration:s,easing:Easing.out(Easing.quad),useNativeDriver:!0}),Animated.timing(U,{toValue:0,duration:o,useNativeDriver:!0})]),Animated.timing(X,{toValue:r,duration:0,useNativeDriver:!0}),Animated.parallel([Animated.timing(X,{toValue:0,duration:n,easing:Easing.out(Easing.cubic),useNativeDriver:!0}),Animated.timing(U,{toValue:1,duration:l,useNativeDriver:!0})])]),$.current.start();const d=addMonths(S,e);_(d),AccessibilityInfo.announceForAccessibility(P.format(d))},[g,S,U,P,X,T,_,D]),G=useCallback(()=>q(-1),[q]),Y=useCallback(()=>q(1),[q]),pressDay=e=>{if(V(e.date))return;const t=resolveHaptic(g,"selection");t&&triggerHaptic(t);const s=e.date;"single"===a||!v||C||s.getTime()<v.getTime()?n({start:s}):n({start:v,end:s}),e.inMonth||_(startOfMonth(s))},W=useRef(pressDay);useLayoutEffect(()=>{W.current=pressDay});const J=useCallback(e=>W.current(e),[]),K=void 0===y?void 0:Math.max(y,MIN_CELL_SIZE),Q=useMemo(()=>void 0===K?{flex:1}:{width:K},[K]),ee=useMemo(()=>void 0===K?{flex:1,aspectRatio:1,minHeight:MIN_CELL_SIZE}:{width:K,height:K},[K]),te=D.components.dateRangePicker?.navButtonSize??NAV_BUTTON_SIZE,ae=Math.max(D.spacing.sm,(MIN_CELL_SIZE-te)/2),se=Math.min(D.maxFontSizeMultiplier??1.5,1.5),ne=[];for(let e=0;e<GRID_CELLS;e+=7)ne.push(O.slice(e,e+7));return _jsxs(View,{ref:t,style:[w.root,p],testID:M,children:[_jsxs(View,{style:w.headerRow,children:[_jsx(Pressable,{onPress:G,disabled:!H,style:({pressed:e})=>[w.navBtn,e&&w.navBtnPressed,!H&&w.navBtnDisabled,x],accessibilityRole:"button",accessibilityLabel:"Previous month",accessibilityState:{disabled:!H},"aria-disabled":!H,hitSlop:ae,children:_jsx(Text,{style:w.navText,maxFontSizeMultiplier:se,children:"‹"})}),_jsx(Animated.View,{style:[w.headerLabelWrap,{opacity:U,transform:[{translateX:X}]},b],children:_jsx(Text,{style:w.headerLabel,accessibilityRole:"header",accessibilityLabel:f?`${f}, ${z}`:void 0,maxFontSizeMultiplier:D.maxFontSizeMultiplier,children:z})}),_jsx(Pressable,{onPress:Y,disabled:!Z,style:({pressed:e})=>[w.navBtn,e&&w.navBtnPressed,!Z&&w.navBtnDisabled,x],accessibilityRole:"button",accessibilityLabel:"Next month",accessibilityState:{disabled:!Z},"aria-disabled":!Z,hitSlop:ae,children:_jsx(Text,{style:w.navText,maxFontSizeMultiplier:se,children:"›"})})]}),_jsx(View,{style:w.weekdayRow,accessibilityElementsHidden:!0,importantForAccessibility:"no-hide-descendants",children:F.map(({weekday:e,label:t})=>_jsx(View,{style:[w.weekdayCell,Q],children:_jsx(Text,{style:w.weekdayText,maxFontSizeMultiplier:se,children:t})},e))}),_jsx(Animated.View,{style:{opacity:U,transform:[{translateX:X}]},children:ne.map(e=>_jsx(View,{style:w.gridRow,children:e.map(e=>{const t=e.date.getTime(),s=null!==I&&t===I,n=null!==L&&t===L,i=null!==I&&null!==L&&t>=I&&t<=L,r=i&&!s&&!n,o=e.iso===E,l=N.get(e.iso),d=h&&i&&!0===l?.holiday,u=[B.format(e.date),...l?.spoken??[]];return o&&u.push("today"),"range"===a&&(s&&n?u.push("start and end of your range"):s?u.push("start of your range"):n?u.push("end of your range"):r&&u.push("in your range")),d&&u.push("not counted"),_jsx(CalendarDay,{cell:e,accessibilityLabel:u.join(", "),disabled:V(e.date),edge:s||n,mid:r,barLeft:i&&(n||r)&&!(s&&n),barRight:i&&(s||r)&&!(s&&n),today:o,struck:d,dots:l?.dots,inkColor:l?.holidayInk,cellStyle:ee,styles:w,maxFontSizeMultiplier:se,onPressDay:J},e.iso)})},e[0].iso))})]})});Calendar.displayName="Calendar";export{Calendar};export default Calendar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:o}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:o.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:o.warning};case"error":return{base:e.colors.error,on:e.colors.onError,ink:o.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:o.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:o.primary};default:return{base:e.colors.text.secondary,on:e.colors.onNeutral,ink:e.colors.text.secondary}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,o,r)=>{const s=isHex(r),{base:n,on:a,ink:i}=s?{base:r,on:e.colors.text.inverse,ink:r}:toneFor(e,t),l=!s&&"neutral"===t,d=l?e.colors.background.tertiary:tintOf(n,.14,e.colors.background.secondary),c=l?e.colors.border.primary:tintOf(n,.4,n);switch(o){case"solid":return{fill:n,border:n,text:a,dot:a};case"outline":return{fill:"transparent",border:l?c:n,text:i,dot:n};default:return{fill:d,border:c,text:i,dot:n}}},StatusBadge=forwardRef((e,t)=>{const{label:o,tone:r="neutral",variant:s="soft",size:n="md",dot:a=!1,color:i,loading:l=!1,accessibilityLabel:d,style:c,textStyle:u,testID:g}=e,
|
|
1
|
+
"use strict";import{forwardRef,useMemo}from"react";import{StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{deriveToneInk}from"../../theme/toneInk.js";import{tintOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{Skeleton}from"../Skeleton/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{height:22,paddingH:8,fontSize:11,dot:5,gap:5},md:{height:24,paddingH:10,fontSize:12,dot:6,gap:6}},SOFT_FILL_OPACITY=.14,SOFT_BORDER_OPACITY=.4,BORDER_WIDTH=1,toneFor=(e,t)=>{const{toneText:o}=e.colors;switch(t){case"success":return{base:e.colors.success,on:e.colors.onSuccess,ink:o.success};case"warning":return{base:e.colors.warning,on:e.colors.onWarning,ink:o.warning};case"error":case"danger":return{base:e.colors.error,on:e.colors.onError,ink:o.error};case"info":return{base:e.colors.info,on:e.colors.onInfo,ink:o.info};case"primary":return{base:e.colors.primary,on:e.colors.onPrimary,ink:o.primary};default:return{base:e.colors.text.secondary,on:e.colors.onNeutral,ink:e.colors.text.secondary}}},isHex=e=>"string"==typeof e&&/^#[0-9a-f]{6}$/i.test(e),paletteFor=(e,t,o,r)=>{const s=isHex(r),{base:n,on:a,ink:i}=s?{base:r,on:e.colors.text.inverse,ink:deriveToneInk(r,[e.colors.background.primary,e.colors.background.secondary,e.colors.background.tertiary],e.mode)}:toneFor(e,t),l=!s&&"neutral"===t,d=l?e.colors.background.tertiary:tintOf(n,.14,e.colors.background.secondary),c=l?e.colors.border.primary:tintOf(n,.4,n);switch(o){case"solid":return{fill:n,border:n,text:a,dot:a};case"outline":return{fill:"transparent",border:l?c:n,text:i,dot:n};default:return{fill:d,border:c,text:i,dot:n}}},StatusBadge=forwardRef((e,t)=>{const{label:o,tone:r="neutral",variant:s="soft",size:n="md",dot:a=!1,color:i,loading:l=!1,accessibilityLabel:d,style:c,textStyle:u,testID:g}=e,m=useTheme(),f=sizeMap[n],b=useMemo(()=>paletteFor(m,r,s,i),[m,r,s,i]);return l?_jsx(StatusBadgeSkeleton,{...e}):_jsxs(View,{ref:t,accessible:!0,accessibilityRole:"text",accessibilityLabel:d??o,testID:g,style:[styles.base,{minHeight:f.height,paddingHorizontal:f.paddingH,borderRadius:m.radius.full,...smoothCorners,backgroundColor:b.fill,borderColor:b.border,borderWidth:1},c],children:[a?_jsx(View,{testID:"status-badge-dot",style:{width:f.dot,height:f.dot,borderRadius:f.dot/2,marginRight:f.gap,backgroundColor:b.dot}}):null,_jsx(Text,{style:[styles.label,{color:b.text,fontSize:f.fontSize,...fontFor(m,"semibold")},u],numberOfLines:1,maxFontSizeMultiplier:m.maxFontSizeMultiplier,children:o})]})});StatusBadge.displayName="StatusBadge";const StatusBadgeSkeleton=({label:e,size:t="md",dot:o,style:r})=>{const s=sizeMap[t],n=Math.max(32,Math.min(120,6.5*(e??"").length))+2*s.paddingH+(o?s.dot+s.gap:0);return _jsx(Skeleton,{width:n,height:s.height,radius:s.height/2,style:[styles.skeleton,r]})};StatusBadgeSkeleton.displayName="StatusBadgeSkeleton",StatusBadge.Skeleton=StatusBadgeSkeleton;const styles=StyleSheet.create({base:{alignSelf:"flex-start",flexDirection:"row",alignItems:"center",justifyContent:"center"},label:{textAlign:"center",includeFontPadding:!1,textAlignVertical:"center"},skeleton:{alignSelf:"flex-start"}});export{StatusBadge};export default StatusBadge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:h,messageStyle:g,closeLabel:b="Close tooltip",testID:y}=e,T="rich"===r,
|
|
1
|
+
"use strict";import React,{useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Easing,Modal,Platform,Pressable,StyleSheet,Text,useWindowDimensions,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePresenceMotion}from"../../hooks/usePresenceMotion.js";import{createAnimatedValue,setNativeValue,useTheme}from"../../theme/index.js";import{announce}from"../../utils/announce.js";import{smoothCorners}from"../../utils/corners.js";import{mergeRefs}from"../../utils/mergeRefs.js";import{claimAnchoredSurface}from"../../utils/placement.js";import{FOCUS_DELAY_MS,focusHost}from"../Menu/focusHost.js";import{ModalSafeArea,useModalInsets}from"../ModalSafeArea/ModalSafeArea.js";import{ToastHost}from"../Toast/ToastProvider.js";import{RichTooltipBody}from"./RichTooltipBody.js";import{resolveTooltipPosition}from"./tooltipPosition.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DEFAULT_TOOLTIP_GAP=8,DEFAULT_SCREEN_PADDING=8,DEFAULT_PRESS_AUTO_HIDE_MS=4e3,DEFAULT_ARROW_HALF_WIDTH=4,DEFAULT_ARROW_HEIGHT=6,DEFAULT_ARROW_CORNER_PADDING=12,DEFAULT_MAX_WIDTH=240,RICH_MAX_WIDTH=280,DEFAULT_LINE_HEIGHT=18,Tooltip=e=>{const{content:t,children:o,variant:r="plain",title:s,action:n,placement:i="auto",visible:a,onVisibleChange:l,hideOnContentPress:u=!0,maxWidth:c,showArrow:m=!0,accessibilityLabel:d,style:f,containerStyle:p,arrowStyle:h,messageStyle:g,closeLabel:b="Close tooltip",testID:y}=e,T="rich"===r,S=e.trigger??(T?"press":"longPress"),_=useTheme(),A=usePresenceMotion(),R=useSafeAreaInsets(),[w,x]=useModalInsets(),v=useMemo(()=>({...R,top:w.top,bottom:w.bottom}),[R,w]),P=useWindowDimensions(),E=useMemo(()=>buildStyles(_),[_]),j=_.components.tooltip,C=j?.gap??8,D=j?.screenPadding??8,L=j?.pressAutoHideMs??4e3,M=j?.arrowHalfWidth??4,H=j?.arrowHeight??6,I=j?.arrowCornerPadding??12,F=j?.lineHeight??18,O=c??(T?280:j?.maxWidth??240),W="press"===S&&!T,V=(j?.enableScaleAnimation??!1)&&!A.reduced,k=j?.exitDurationMs??150,N="manual"===S||"boolean"==typeof a,[U,B]=useState(!1),z=N?Boolean(a):U,[G,X]=useState(null),[Y,q]=useState({width:0,height:0}),J=useRef(null),K=useRef(null),Q=useRef(null),Z=useRef(null),$=useRef(null),ee=useRef(!1),te=useRef(!1),oe=useRef(createAnimatedValue(z||!V?1:.85)).current,re=useRef(createAnimatedValue(z?1:0)).current,se=useRef(null),ne=useRef(!1),[ie,ae]=useState(z),le=useCallback(e=>{N||B(e),l?.(e)},[N,l]),ue=useCallback(()=>{J.current&&J.current.measureInWindow((e,t,o,r)=>{X({x:e,y:t,width:o,height:r})})},[]),ce=useCallback(e=>{ue(),le(!0)},[ue,le]),me=useCallback(()=>{le(!1)},[le]),de=useRef(me);de.current=me;const fe=useCallback(()=>{if(!ee.current)return;ee.current=!1;const e=$.current;$.current=null,e?e():T&&focusHost(K.current??J.current)},[T]);useEffect(()=>{if(z)return te.current=!0,ee.current=!1,claimAnchoredSurface(()=>de.current());te.current&&(te.current=!1,ee.current=!0)},[z]),useEffect(()=>{z&&ae(!0)},[z]);const pe=useRef(ie);useEffect(()=>{pe.current&&!ie&&"ios"!==Platform.OS&&fe(),pe.current=ie},[ie,fe]);const he=useCallback(()=>{$.current=n?.onPress??null,me()},[n,me]);useEffect(()=>{if(!ne.current)return ne.current=!0,z&&(ue(),W&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))),()=>{se.current&&(clearTimeout(se.current),se.current=null)};let e;if(z){ue();const t=[Animated.timing(re,{toValue:1,duration:A.duration("fast"),useNativeDriver:!0})];V?t.push(Animated.spring(oe,{toValue:1,damping:_.motion.spring.snappy.damping,stiffness:_.motion.spring.snappy.stiffness,mass:_.motion.spring.snappy.mass,useNativeDriver:!0})):setNativeValue(oe,1),e=Animated.parallel(t),e.start(),W&&(se.current&&clearTimeout(se.current),se.current=setTimeout(()=>{me()},L))}else{const t=[Animated.timing(re,{toValue:0,duration:A.reduced?A.duration("fast"):k,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})];V&&t.push(Animated.timing(oe,{toValue:.85,duration:k,easing:Easing.bezier(..._.motion.easing.accelerate),useNativeDriver:!0})),e=Animated.parallel(t),e.start(({finished:e})=>{e&&ae(!1)}),se.current&&(clearTimeout(se.current),se.current=null)}return()=>{e?.stop(),se.current&&(clearTimeout(se.current),se.current=null)}},[z]);const handleContentLayout=e=>{const{width:t,height:o}=e.nativeEvent.layout;t===Y.width&&o===Y.height||q({width:t,height:o})},ge=useMemo(()=>resolveTooltipPosition({anchor:G,size:Y,placement:i,rich:T,viewport:{width:P.width,height:P.height,insets:v},maxWidth:O,gap:C,padding:D,arrowCornerPadding:I}),[G,Y,i,T,P.width,P.height,v,O,C,D,I]),be=null!==G&&Y.width>0,ye=z&&be;useEffect(()=>{if(!T||!ye)return;const e="web"===Platform.OS?Z:Q,t=setTimeout(()=>focusHost(e.current),FOCUS_DELAY_MS);return()=>clearTimeout(t)},[T,ye]),useEffect(()=>{!T&&ye&&"ios"===Platform.OS&&"string"==typeof t&&announce(t)},[T,ye,t]);const Te=o.props,Se=useMemo(()=>mergeRefs(Te.ref,K),[Te.ref]),Ae={};"longPress"!==S||Te.contextMenu?"press"===S&&(Ae.onPress=e=>{Te.onPress?.(e),ce(e)}):(Ae.onLongPress=ce,Ae.accessibilityHint="Long press for more info"),T&&(Ae.ref=Se);const Re=React.cloneElement(o,Ae),we=d??("string"==typeof t?t:"Tooltip"),xe=useMemo(()=>{if(!m)return null;const e=T?_.colors.background.elevated:_.colors.background.inverse,t={position:"absolute",width:0,height:0,backgroundColor:"transparent",borderStyle:"solid",borderLeftWidth:M,borderRightWidth:M,borderBottomWidth:H,borderTopWidth:0,borderLeftColor:"transparent",borderRightColor:"transparent",borderTopColor:"transparent",borderBottomColor:e};return"top"===ge.placement?{...t,bottom:-H,left:ge.arrowOffset-M,transform:[{rotate:"180deg"}]}:"bottom"===ge.placement?{...t,top:-H,left:ge.arrowOffset-M}:"left"===ge.placement?{...t,right:-H,top:ge.arrowOffset-M,transform:[{rotate:"90deg"}]}:{...t,left:-H,top:ge.arrowOffset-M,transform:[{rotate:"-90deg"}]}},[m,ge,_,T,M,H]),ve={position:"absolute",top:ge.top,left:ge.left,maxWidth:O,opacity:z&&!be?0:re,transform:[{scale:oe}]},Pe=xe?_jsx(View,{style:[xe,h],pointerEvents:"none"}):null;return _jsxs(_Fragment,{children:[_jsx(View,{ref:J,collapsable:!1,onLayout:ue,testID:y,children:Re}),_jsx(Modal,{visible:ie,transparent:!0,statusBarTranslucent:!0,presentationStyle:"overFullScreen",animationType:"none",onRequestClose:me,onDismiss:fe,children:_jsxs(ModalSafeArea,{onInsets:x,children:[T?_jsxs(_Fragment,{children:[_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button"}),ie?_jsxs(Animated.View,{onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(RichTooltipBody,{title:s,content:t,action:n,onAction:he,focusRef:Q,actionRef:Z,messageStyle:g}),Pe]}):null]}):_jsx(Pressable,{style:StyleSheet.absoluteFill,onPress:u?me:void 0,accessibilityLabel:b,accessibilityRole:"button",children:ie?_jsxs(Animated.View,{accessibilityRole:"web"===Platform.OS?"tooltip":void 0,accessibilityLiveRegion:"polite",accessibilityLabel:we,onLayout:handleContentLayout,style:[ve,f,p],children:[_jsx(View,{style:[E.tooltip,{backgroundColor:_.colors.background.inverse,borderRadius:_.radius.md,...smoothCorners,paddingHorizontal:_.spacing.md,paddingVertical:_.spacing.sm,..._.shadows.lg,shadowColor:_.shadows.lg.shadowColor}],children:"string"==typeof t?_jsx(Text,{style:[{color:_.colors.text.inverse,fontSize:_.typography.fontSize.sm,lineHeight:F},g],children:t}):t}),Pe]}):null}),_jsx(ToastHost,{})]})})]})},buildStyles=e=>StyleSheet.create({tooltip:{overflow:"hidden"}});export{Tooltip};export default Tooltip;
|
|
@@ -2,10 +2,11 @@ import type React from 'react';
|
|
|
2
2
|
import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
3
|
/**
|
|
4
4
|
* The same semantic vocabulary Chip and Badge use, and the web library's
|
|
5
|
-
* `AppStatusBadge
|
|
5
|
+
* `AppStatusBadge`. `danger` is the web name for `error`, the mobile theme's
|
|
6
|
+
* name, so a status mapped once for both platforms draws the same here.
|
|
6
7
|
* A semantic name survives a palette change; a colour name does not.
|
|
7
8
|
*/
|
|
8
|
-
export type StatusBadgeTone = 'success' | 'warning' | 'error' | 'info' | 'primary' | 'neutral';
|
|
9
|
+
export type StatusBadgeTone = 'success' | 'warning' | 'error' | 'danger' | 'info' | 'primary' | 'neutral';
|
|
9
10
|
/**
|
|
10
11
|
* `soft` is the default: the tone at a light tint behind text in the tone,
|
|
11
12
|
* with a border in the tone so the pill has an edge on any surface. `outline`
|
|
@@ -2,10 +2,11 @@ import type React from 'react';
|
|
|
2
2
|
import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
3
3
|
/**
|
|
4
4
|
* The same semantic vocabulary Chip and Badge use, and the web library's
|
|
5
|
-
* `AppStatusBadge
|
|
5
|
+
* `AppStatusBadge`. `danger` is the web name for `error`, the mobile theme's
|
|
6
|
+
* name, so a status mapped once for both platforms draws the same here.
|
|
6
7
|
* A semantic name survives a palette change; a colour name does not.
|
|
7
8
|
*/
|
|
8
|
-
export type StatusBadgeTone = 'success' | 'warning' | 'error' | 'info' | 'primary' | 'neutral';
|
|
9
|
+
export type StatusBadgeTone = 'success' | 'warning' | 'error' | 'danger' | 'info' | 'primary' | 'neutral';
|
|
9
10
|
/**
|
|
10
11
|
* `soft` is the default: the tone at a light tint behind text in the tone,
|
|
11
12
|
* with a border in the tone so the pill has an edge on any surface. `outline`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/mobile-ui",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.2",
|
|
4
4
|
"description": "Beautiful, animated, accessible React Native components, theme and form engine for Webority projects.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
]
|
|
108
108
|
},
|
|
109
109
|
"devDependencies": {
|
|
110
|
-
"@webority/mobile-core": "0.16.
|
|
110
|
+
"@webority/mobile-core": "0.16.2"
|
|
111
111
|
},
|
|
112
112
|
"scripts": {
|
|
113
113
|
"build": "bob build && node ../../scripts/minify-lib.mjs",
|