@0610studio/zs-ui 0.13.10 → 0.13.12

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.
Files changed (64) hide show
  1. package/build/overlay/AlertOverlay/index.d.ts.map +1 -1
  2. package/build/overlay/AlertOverlay/index.js +5 -5
  3. package/build/overlay/AlertOverlay/index.js.map +1 -1
  4. package/build/overlay/BottomSheetOverlay/index.d.ts +1 -1
  5. package/build/overlay/BottomSheetOverlay/index.d.ts.map +1 -1
  6. package/build/overlay/BottomSheetOverlay/index.js +2 -2
  7. package/build/overlay/BottomSheetOverlay/index.js.map +1 -1
  8. package/build/overlay/LoadingNotify/index.d.ts.map +1 -1
  9. package/build/overlay/LoadingNotify/index.js +2 -2
  10. package/build/overlay/LoadingNotify/index.js.map +1 -1
  11. package/build/overlay/Modality/index.d.ts +3 -2
  12. package/build/overlay/Modality/index.d.ts.map +1 -1
  13. package/build/overlay/Modality/index.js +2 -2
  14. package/build/overlay/Modality/index.js.map +1 -1
  15. package/build/overlay/PopOver/PopOverMenu.d.ts.map +1 -1
  16. package/build/overlay/PopOver/PopOverMenu.js +3 -3
  17. package/build/overlay/PopOver/PopOverMenu.js.map +1 -1
  18. package/build/overlay/SnackbarNotify/ui/SnackbarItem.d.ts.map +1 -1
  19. package/build/overlay/SnackbarNotify/ui/SnackbarItem.js +2 -2
  20. package/build/overlay/SnackbarNotify/ui/SnackbarItem.js.map +1 -1
  21. package/build/overlay/ui/ModalBackground.d.ts +3 -2
  22. package/build/overlay/ui/ModalBackground.d.ts.map +1 -1
  23. package/build/overlay/ui/ModalBackground.js +3 -3
  24. package/build/overlay/ui/ModalBackground.js.map +1 -1
  25. package/build/ui/ZSAboveKeyboard/index.d.ts +3 -2
  26. package/build/ui/ZSAboveKeyboard/index.d.ts.map +1 -1
  27. package/build/ui/ZSAboveKeyboard/index.js +2 -2
  28. package/build/ui/ZSAboveKeyboard/index.js.map +1 -1
  29. package/build/ui/ZSBlockButton/index.d.ts +3 -3
  30. package/build/ui/ZSBlockButton/index.d.ts.map +1 -1
  31. package/build/ui/ZSBlockButton/index.js +6 -4
  32. package/build/ui/ZSBlockButton/index.js.map +1 -1
  33. package/build/ui/ZSPressable/index.d.ts.map +1 -1
  34. package/build/ui/ZSPressable/index.js +1 -1
  35. package/build/ui/ZSPressable/index.js.map +1 -1
  36. package/build/ui/ZSRadioGroup/index.d.ts +2 -2
  37. package/build/ui/ZSRadioGroup/index.d.ts.map +1 -1
  38. package/build/ui/ZSRadioGroup/index.js +10 -3
  39. package/build/ui/ZSRadioGroup/index.js.map +1 -1
  40. package/build/ui/ZSSkeleton/index.d.ts +3 -3
  41. package/build/ui/ZSSkeleton/index.d.ts.map +1 -1
  42. package/build/ui/ZSSkeleton/index.js +2 -2
  43. package/build/ui/ZSSkeleton/index.js.map +1 -1
  44. package/build/ui/ZSSkeletonBox/index.d.ts +3 -3
  45. package/build/ui/ZSSkeletonBox/index.d.ts.map +1 -1
  46. package/build/ui/ZSSkeletonBox/index.js +2 -2
  47. package/build/ui/ZSSkeletonBox/index.js.map +1 -1
  48. package/build/ui/ZSSwitch/index.d.ts +3 -3
  49. package/build/ui/ZSSwitch/index.d.ts.map +1 -1
  50. package/build/ui/ZSSwitch/index.js +2 -2
  51. package/build/ui/ZSSwitch/index.js.map +1 -1
  52. package/build/ui/ZSTextField/index.d.ts +2 -2
  53. package/build/ui/ZSTextField/index.d.ts.map +1 -1
  54. package/build/ui/ZSTextField/index.js +27 -30
  55. package/build/ui/ZSTextField/index.js.map +1 -1
  56. package/build/ui/ZSTextField/ui/ButtonClose.d.ts +3 -2
  57. package/build/ui/ZSTextField/ui/ButtonClose.d.ts.map +1 -1
  58. package/build/ui/ZSTextField/ui/ButtonClose.js +2 -2
  59. package/build/ui/ZSTextField/ui/ButtonClose.js.map +1 -1
  60. package/build/ui/ZSTextField/ui/ErrorComponent.d.ts +3 -2
  61. package/build/ui/ZSTextField/ui/ErrorComponent.d.ts.map +1 -1
  62. package/build/ui/ZSTextField/ui/ErrorComponent.js +2 -2
  63. package/build/ui/ZSTextField/ui/ErrorComponent.js.map +1 -1
  64. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAgB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWjE,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,GACzB,EAAE,cAAc,4BAkEhB;AAED,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAgB,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAWjE,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,WAAW,EACX,sBAAsB,EACtB,UAAU,EACV,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,EAClB,wBAAwB,GACzB,EAAE,cAAc,4BA2EhB;AAED,eAAe,YAAY,CAAC"}
@@ -21,8 +21,8 @@ function AlertOverlay({ actions, title, informative, isBackgroundTouchClose, tit
21
21
  }, [setAlertVisible]);
22
22
  return (!alertVisible ? null :
23
23
  <ModalBackground zIndex={Z_INDEX_VALUE.ALERT} key={alertVisible ? 'visibleao' : 'hiddenao'} modalBgColor={modalBgColor} onPress={() => { if (isBackgroundTouchClose)
24
- setAlertVisible(false); }}>
25
- <Animated.View entering={FadeInDown.duration(300)} exiting={FadeOutDown.duration(100)} style={[styles.contentContainer, { width: modalWidth }]}>
24
+ setAlertVisible(false); }} accessibilityViewIsModal={true}>
25
+ <Animated.View entering={FadeInDown.duration(300)} exiting={FadeOutDown.duration(100)} style={[styles.contentContainer, { width: modalWidth }]} accessibilityRole="alert" accessibilityLiveRegion="polite">
26
26
  {title && (<ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>)}
27
27
  {informative && (<ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>)}
28
28
  {actions && (<ViewAtom style={styles.buttonContainer}>
@@ -31,14 +31,14 @@ function AlertOverlay({ actions, title, informative, isBackgroundTouchClose, tit
31
31
  styles.button,
32
32
  { backgroundColor: background.neutral, marginRight: 8 },
33
33
  secondaryButtonStyle
34
- ]} onPress={handleButtonPress(secondary?.onPress)}>
34
+ ]} onPress={handleButtonPress(secondary?.onPress)} accessibilityRole="button" accessibilityLabel={secondary?.label}>
35
35
  <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>
36
36
  </TouchableOpacity>
37
37
 
38
- <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]} onPress={handleButtonPress(primary?.onPress)}>
38
+ <TouchableOpacity style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]} onPress={handleButtonPress(primary?.onPress)} accessibilityRole="button" accessibilityLabel={primary?.label || '확인'}>
39
39
  <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>
40
40
  </TouchableOpacity>
41
- </>) : (<TouchableOpacity style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]} onPress={handleButtonPress(primary?.onPress)}>
41
+ </>) : (<TouchableOpacity style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]} onPress={handleButtonPress(primary?.onPress)} accessibilityRole="button" accessibilityLabel={primary?.label || '확인'}>
42
42
  <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>
43
43
  </TouchableOpacity>)}
44
44
  </ViewAtom>)}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../context/ThemeContext';\nimport { ThemeBackground } from '../../theme/types';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\nimport { Z_INDEX_VALUE } from '../../model/utils';\nimport ZSText from '../../ui/ZSText';\n\nconst windowWidth = Dimensions.get('window').width;\n\nfunction AlertOverlay({\n actions,\n title,\n informative,\n isBackgroundTouchClose,\n titleStyle,\n informativeStyle,\n secondaryButtonStyle,\n primaryButtonStyle,\n secondaryButtonTextStyle,\n}: ShowAlertProps) {\n const { alertVisible, setAlertVisible } = useAlert();\n const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();\n const styles = useMemo(() => createStyles({ background }), [background]);\n const modalWidth = Math.min(windowWidth - 60, 400);\n const { primary, secondary } = actions || {} as AlertActions;\n\n const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n if (onPressFunction) onPressFunction();\n setAlertVisible(false);\n }, [setAlertVisible]);\n\n return (\n !alertVisible ? null :\n <ModalBackground\n zIndex={Z_INDEX_VALUE.ALERT}\n key={alertVisible ? 'visibleao' : 'hiddenao'}\n modalBgColor={modalBgColor}\n onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n >\n <Animated.View\n entering={FadeInDown.duration(300)}\n exiting={FadeOutDown.duration(100)}\n style={[styles.contentContainer, { width: modalWidth }]}\n >\n {title && (\n <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n )}\n {informative && (\n <ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n )}\n {actions && (\n <ViewAtom style={styles.buttonContainer}>\n {secondary ? (\n <>\n <TouchableOpacity\n style={[\n styles.button,\n { backgroundColor: background.neutral, marginRight: 8 },\n secondaryButtonStyle\n ]}\n onPress={handleButtonPress(secondary?.onPress)}\n >\n <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n </TouchableOpacity>\n\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n </>\n ) : (\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n )}\n </ViewAtom>\n )}\n </Animated.View>\n </ModalBackground>\n )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\n StyleSheet.create({\n title: {\n marginBottom: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n informative: {\n marginTop: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n buttonContainer: {\n flexDirection: 'row',\n width: '100%',\n marginTop: 24,\n alignItems: 'center',\n justifyContent: 'flex-end',\n },\n button: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n paddingVertical: 14,\n borderRadius: 12,\n },\n avoidingView: {\n flex: 1,\n justifyContent: 'center'\n },\n contentContainer: {\n alignItems: 'center',\n backgroundColor: background.base,\n borderRadius: 22,\n paddingBottom: 18,\n paddingTop: 24,\n paddingHorizontal: 20,\n },\n });\n\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/AlertOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';\nimport Animated, { FadeInDown, FadeOutDown } from 'react-native-reanimated';\nimport { AlertActions, ShowAlertProps } from '../../model/types';\nimport { useAlert } from '../../model/useOverlay';\nimport { useTheme } from '../../context/ThemeContext';\nimport { ThemeBackground } from '../../theme/types';\nimport ModalBackground from '../ui/ModalBackground';\nimport ViewAtom from '../../ui/atoms/ViewAtom';\nimport { Z_INDEX_VALUE } from '../../model/utils';\nimport ZSText from '../../ui/ZSText';\n\nconst windowWidth = Dimensions.get('window').width;\n\nfunction AlertOverlay({\n actions,\n title,\n informative,\n isBackgroundTouchClose,\n titleStyle,\n informativeStyle,\n secondaryButtonStyle,\n primaryButtonStyle,\n secondaryButtonTextStyle,\n}: ShowAlertProps) {\n const { alertVisible, setAlertVisible } = useAlert();\n const { palette: { background, primary: primaryColor, modalBgColor } } = useTheme();\n const styles = useMemo(() => createStyles({ background }), [background]);\n const modalWidth = Math.min(windowWidth - 60, 400);\n const { primary, secondary } = actions || {} as AlertActions;\n\n const handleButtonPress = useCallback((onPressFunction?: () => void) => () => {\n if (onPressFunction) onPressFunction();\n setAlertVisible(false);\n }, [setAlertVisible]);\n\n return (\n !alertVisible ? null :\n <ModalBackground\n zIndex={Z_INDEX_VALUE.ALERT}\n key={alertVisible ? 'visibleao' : 'hiddenao'}\n modalBgColor={modalBgColor}\n onPress={() => { if (isBackgroundTouchClose) setAlertVisible(false); }}\n accessibilityViewIsModal={true}\n >\n <Animated.View\n entering={FadeInDown.duration(300)}\n exiting={FadeOutDown.duration(100)}\n style={[styles.contentContainer, { width: modalWidth }]}\n accessibilityRole=\"alert\"\n accessibilityLiveRegion=\"polite\"\n >\n {title && (\n <ZSText typo='subTitle.1' style={[styles.title, titleStyle]}>{title}</ZSText>\n )}\n {informative && (\n <ZSText typo='body.2' style={[styles.informative, informativeStyle]}>{informative}</ZSText>\n )}\n {actions && (\n <ViewAtom style={styles.buttonContainer}>\n {secondary ? (\n <>\n <TouchableOpacity\n style={[\n styles.button,\n { backgroundColor: background.neutral, marginRight: 8 },\n secondaryButtonStyle\n ]}\n onPress={handleButtonPress(secondary?.onPress)}\n accessibilityRole=\"button\"\n accessibilityLabel={secondary?.label}\n >\n <ZSText typo='label.2' style={[secondaryButtonTextStyle]}>{secondary.label}</ZSText>\n </TouchableOpacity>\n\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n accessibilityRole=\"button\"\n accessibilityLabel={primary?.label || '확인'}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n </>\n ) : (\n <TouchableOpacity\n style={[styles.button, { backgroundColor: primaryColor.main }, primaryButtonStyle]}\n onPress={handleButtonPress(primary?.onPress)}\n accessibilityRole=\"button\"\n accessibilityLabel={primary?.label || '확인'}\n >\n <ZSText typo='label.2' color='white' style={[secondaryButtonTextStyle]}>{primary?.label || '확인'}</ZSText>\n </TouchableOpacity>\n )}\n </ViewAtom>\n )}\n </Animated.View>\n </ModalBackground>\n )\n}\n\nexport default AlertOverlay;\n\nconst createStyles = ({ background }: { background: ThemeBackground; }) =>\n StyleSheet.create({\n title: {\n marginBottom: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n informative: {\n marginTop: 8,\n width: '100%',\n paddingHorizontal: 4\n },\n buttonContainer: {\n flexDirection: 'row',\n width: '100%',\n marginTop: 24,\n alignItems: 'center',\n justifyContent: 'flex-end',\n },\n button: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n paddingVertical: 14,\n borderRadius: 12,\n },\n avoidingView: {\n flex: 1,\n justifyContent: 'center'\n },\n contentContainer: {\n alignItems: 'center',\n backgroundColor: background.base,\n borderRadius: 22,\n paddingBottom: 18,\n paddingTop: 24,\n paddingHorizontal: 20,\n },\n });\n\n"]}
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  import { ShowBottomSheetProps } from '../../model/types';
3
- declare function BottomSheetOverlay({ headerComponent, component, options, }: ShowBottomSheetProps): React.JSX.Element | null;
3
+ declare function BottomSheetOverlay({ headerComponent, component, options, ...accessibilityProps }: ShowBottomSheetProps): React.JSX.Element | null;
4
4
  export default BottomSheetOverlay;
5
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAOzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAwCzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,GACb,EAAE,oBAAoB,4BA0MtB;AA0BD,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAOzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAwCzD,iBAAS,kBAAkB,CAAC,EAC1B,eAAe,EACf,SAAS,EACT,OAAY,EACZ,GAAG,kBAAkB,EACtB,EAAE,oBAAoB,4BA4MtB;AA0BD,eAAe,kBAAkB,CAAC"}
@@ -39,7 +39,7 @@ const GESTURE_CONSTANTS = {
39
39
  hideDelay: 200,
40
40
  moveThreshold: 10, // 드래그로 인식하기 위한 최소 이동 거리 (px)
41
41
  };
42
- function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
42
+ function BottomSheetOverlay({ headerComponent, component, options = {}, ...accessibilityProps }) {
43
43
  const { foldableSingleScreen = false, isBackgroundTouchClose = true, marginHorizontal = 10, marginBottom = 10, padding = 14, } = options;
44
44
  const { width: windowWidth } = useFoldingState();
45
45
  const { palette } = useTheme();
@@ -183,7 +183,7 @@ function BottomSheetOverlay({ headerComponent, component, options = {}, }) {
183
183
  if (!localVisible) {
184
184
  return null;
185
185
  }
186
- return (<ModalBackground zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1} key={localVisible ? 'visiblebs' : 'hiddenbs'} modalBgColor={palette.modalBgColor} onPress={handleBackgroundPress}>
186
+ return (<ModalBackground zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1} key={localVisible ? 'visiblebs' : 'hiddenbs'} modalBgColor={palette.modalBgColor} onPress={handleBackgroundPress} accessibilityViewIsModal={true} {...accessibilityProps}>
187
187
  <Animated.View style={containerStyle}>
188
188
  <View style={pressableViewStyle}>
189
189
  <View {...panResponder.panHandlers}>
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useCallback, useMemo } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform, type KeyboardEvent, Dimensions, type ViewStyle } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../context/ThemeContext';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\n\nconst windowHeight = Dimensions.get('window').height;\n\nconst IS_IOS = Platform.OS === 'ios';\n\nconst ANIMATION_CONFIG = {\n keyboard: {\n show: { duration: 250 },\n hide: { duration: 150 },\n },\n spring: {\n damping: 50,\n stiffness: 300,\n mass: 0.7,\n velocity: 100,\n restDisplacementThreshold: 0.2,\n },\n close: { duration: 150 },\n scale: { duration: 200 },\n scaleRestore: {\n damping: 15,\n stiffness: 300,\n },\n} as const;\n\nconst GESTURE_CONSTANTS = {\n scaleAmount: 0.985,\n horizontalDamping: 18,\n verticalUpDamping: 18,\n verticalDownDamping: 1.5,\n closeVelocityThreshold: 0.5,\n closeDistanceRatio: 1 / 3,\n hideDelay: 200,\n moveThreshold: 10, // 드래그로 인식하기 위한 최소 이동 거리 (px)\n} as const;\n\nfunction BottomSheetOverlay({\n headerComponent,\n component,\n options = {},\n}: ShowBottomSheetProps) {\n const {\n foldableSingleScreen = false,\n isBackgroundTouchClose = true,\n marginHorizontal = 10,\n marginBottom = 10,\n padding = 14,\n } = options;\n const { width: windowWidth } = useFoldingState();\n const { palette } = useTheme();\n const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n const { bottom: bottomInsets } = useSafeAreaInsets();\n\n // 화면의 크기보다 높이가 높으면 화면의 크기로 제한 \n const maxHeight = useMemo(() =>\n Math.min(\n windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0),\n height\n ),\n [windowHeight, height]\n );\n\n const translateY = useSharedValue(0);\n const translateX = useSharedValue(0);\n const scale = useSharedValue(1);\n const startX = useSharedValue(0);\n const startY = useSharedValue(0);\n const isGesturing = useSharedValue(false);\n\n const [localVisible, setLocalVisible] = useState(false);\n\n const handleKeyboardShow = useCallback((event: KeyboardEvent) => {\n if (!isGesturing.value) {\n const targetY = -event.endCoordinates.height + (IS_IOS ? bottomInsets : 0);\n translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);\n }\n }, [bottomInsets]);\n\n const handleKeyboardHide = useCallback(() => {\n if (!isGesturing.value) {\n translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);\n }\n }, []);\n\n useKeyboard({\n handleKeyboardShow,\n handleKeyboardHide,\n });\n\n // BottomSheet 표시/숨김 애니메이션 처리\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout>;\n \n if (bottomSheetVisible) {\n Keyboard.dismiss();\n setLocalVisible(true);\n translateY.value = withSpring(0, ANIMATION_CONFIG.spring);\n } else {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n timeoutId = setTimeout(() => {\n setLocalVisible(false);\n }, GESTURE_CONSTANTS.hideDelay);\n }\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [bottomSheetVisible, maxHeight]);\n\n const animatedStyles = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: translateY.value },\n { translateX: translateX.value },\n { scale: scale.value }\n ],\n };\n });\n\n const dismissKeyboard = useCallback(() => {\n Keyboard.dismiss();\n }, []);\n\n const closeBottomSheet = useCallback(() => {\n setBottomSheetVisible(false);\n }, [setBottomSheetVisible]);\n\n const handlePanResponderGrant = useCallback(() => {\n dismissKeyboard();\n isGesturing.value = true;\n startX.value = translateX.value;\n startY.value = translateY.value;\n scale.value = withTiming(GESTURE_CONSTANTS.scaleAmount, ANIMATION_CONFIG.scale);\n }, [dismissKeyboard]);\n\n const handlePanResponderMove = useCallback((_, gestureState) => {\n const newTranslateX = (startX.value + gestureState.dx) / GESTURE_CONSTANTS.horizontalDamping;\n translateX.value = newTranslateX;\n\n const newTranslateY = startY.value + gestureState.dy;\n if (newTranslateY < 0) {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalUpDamping;\n } else {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalDownDamping;\n }\n }, []);\n\n const handlePanResponderRelease = useCallback((_, gestureState) => {\n isGesturing.value = false;\n translateX.value = withTiming(0, { duration: 100 });\n\n const shouldClose = gestureState.vy > GESTURE_CONSTANTS.closeVelocityThreshold ||\n translateY.value > maxHeight * GESTURE_CONSTANTS.closeDistanceRatio;\n\n if (shouldClose) {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n closeBottomSheet();\n } else {\n translateY.value = withTiming(0, ANIMATION_CONFIG.close);\n }\n\n scale.value = withSpring(1, ANIMATION_CONFIG.scaleRestore);\n }, [maxHeight, closeBottomSheet]);\n\n const panResponder = useMemo(\n () => PanResponder.create({\n onStartShouldSetPanResponder: () => false,\n onStartShouldSetPanResponderCapture: () => false,\n onMoveShouldSetPanResponder: (_, gestureState) => {\n // 일정 거리 이상 이동했을 때만 PanResponder가 응답 (탭과 드래그 구분)\n const { dx, dy } = gestureState;\n return Math.abs(dx) > GESTURE_CONSTANTS.moveThreshold || Math.abs(dy) > GESTURE_CONSTANTS.moveThreshold;\n },\n onMoveShouldSetPanResponderCapture: () => false,\n onPanResponderGrant: handlePanResponderGrant,\n onPanResponderMove: handlePanResponderMove,\n onPanResponderRelease: handlePanResponderRelease,\n }),\n [handlePanResponderGrant, handlePanResponderMove, handlePanResponderRelease]\n );\n\n // 배경 터치 핸들러\n const handleBackgroundPress = useCallback(() => {\n if (isBackgroundTouchClose) setBottomSheetVisible(false);\n }, [isBackgroundTouchClose, setBottomSheetVisible]);\n\n const containerStyle = [\n styles.container,\n {\n width: options.type === 'fixed' ? '100%' : windowWidth - marginHorizontal * 2,\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',\n height: maxHeight,\n marginHorizontal: options.type === 'fixed' ? 0 : marginHorizontal,\n bottom: options.type === 'fixed' ? 0 : marginBottom + bottomInsets,\n paddingBottom: options.type === 'fixed' ? bottomInsets : 0,\n backgroundColor: palette.background.base,\n ... (options.type === 'fixed' ? { borderTopLeftRadius: 26, borderTopRightRadius: 26, borderBottomLeftRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: 26 }),\n },\n animatedStyles,\n ] as ViewStyle[];\n\n const pressableViewStyle = [\n styles.pressableView,\n { paddingHorizontal: padding, paddingBottom: padding },\n ];\n\n const gestureBarContainerStyle = [\n styles.gestureBarContainer,\n { paddingBottom: padding }\n ];\n\n const gestureBarStyle = [\n styles.gestureBar,\n { backgroundColor: palette.grey[60] }\n ];\n\n if (!localVisible) {\n return null;\n }\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n key={localVisible ? 'visiblebs' : 'hiddenbs'}\n modalBgColor={palette.modalBgColor}\n onPress={handleBackgroundPress}\n >\n <Animated.View style={containerStyle}>\n <View style={pressableViewStyle}>\n <View {...panResponder.panHandlers}>\n <View style={gestureBarContainerStyle}>\n <View style={gestureBarStyle} />\n </View>\n {headerComponent}\n </View>\n\n {component}\n </View>\n </Animated.View>\n </ModalBackground>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n borderRadius: 26,\n overflow: 'hidden',\n zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n },\n pressableView: {\n width: '100%',\n height: '100%',\n },\n gestureBarContainer: {\n width: '100%',\n paddingTop: 10,\n justifyContent: 'center',\n alignItems: 'center',\n },\n gestureBar: {\n width: 45,\n height: 3,\n borderRadius: 2,\n },\n});\n\nexport default BottomSheetOverlay;"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/BottomSheetOverlay/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState, useCallback, useMemo } from 'react';\nimport { StyleSheet, View, PanResponder, Keyboard, Platform, type KeyboardEvent, Dimensions, type ViewStyle } from 'react-native';\nimport { useBottomSheet } from '../../model/useOverlay';\nimport Animated, { useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';\nimport ModalBackground from '../ui/ModalBackground';\nimport { useTheme } from '../../context/ThemeContext';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport { ShowBottomSheetProps } from '../../model/types';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\n\nconst windowHeight = Dimensions.get('window').height;\n\nconst IS_IOS = Platform.OS === 'ios';\n\nconst ANIMATION_CONFIG = {\n keyboard: {\n show: { duration: 250 },\n hide: { duration: 150 },\n },\n spring: {\n damping: 50,\n stiffness: 300,\n mass: 0.7,\n velocity: 100,\n restDisplacementThreshold: 0.2,\n },\n close: { duration: 150 },\n scale: { duration: 200 },\n scaleRestore: {\n damping: 15,\n stiffness: 300,\n },\n} as const;\n\nconst GESTURE_CONSTANTS = {\n scaleAmount: 0.985,\n horizontalDamping: 18,\n verticalUpDamping: 18,\n verticalDownDamping: 1.5,\n closeVelocityThreshold: 0.5,\n closeDistanceRatio: 1 / 3,\n hideDelay: 200,\n moveThreshold: 10, // 드래그로 인식하기 위한 최소 이동 거리 (px)\n} as const;\n\nfunction BottomSheetOverlay({\n headerComponent,\n component,\n options = {},\n ...accessibilityProps\n}: ShowBottomSheetProps) {\n const {\n foldableSingleScreen = false,\n isBackgroundTouchClose = true,\n marginHorizontal = 10,\n marginBottom = 10,\n padding = 14,\n } = options;\n const { width: windowWidth } = useFoldingState();\n const { palette } = useTheme();\n const { bottomSheetVisible, setBottomSheetVisible, height } = useBottomSheet();\n const { bottom: bottomInsets } = useSafeAreaInsets();\n\n // 화면의 크기보다 높이가 높으면 화면의 크기로 제한 \n const maxHeight = useMemo(() =>\n Math.min(\n windowHeight - 30 - (initialWindowMetrics?.insets.bottom || 0) - (initialWindowMetrics?.insets.top || 0),\n height\n ),\n [windowHeight, height]\n );\n\n const translateY = useSharedValue(0);\n const translateX = useSharedValue(0);\n const scale = useSharedValue(1);\n const startX = useSharedValue(0);\n const startY = useSharedValue(0);\n const isGesturing = useSharedValue(false);\n\n const [localVisible, setLocalVisible] = useState(false);\n\n const handleKeyboardShow = useCallback((event: KeyboardEvent) => {\n if (!isGesturing.value) {\n const targetY = -event.endCoordinates.height + (IS_IOS ? bottomInsets : 0);\n translateY.value = withTiming(targetY, ANIMATION_CONFIG.keyboard.show);\n }\n }, [bottomInsets]);\n\n const handleKeyboardHide = useCallback(() => {\n if (!isGesturing.value) {\n translateY.value = withTiming(0, ANIMATION_CONFIG.keyboard.hide);\n }\n }, []);\n\n useKeyboard({\n handleKeyboardShow,\n handleKeyboardHide,\n });\n\n // BottomSheet 표시/숨김 애니메이션 처리\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout>;\n \n if (bottomSheetVisible) {\n Keyboard.dismiss();\n setLocalVisible(true);\n translateY.value = withSpring(0, ANIMATION_CONFIG.spring);\n } else {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n timeoutId = setTimeout(() => {\n setLocalVisible(false);\n }, GESTURE_CONSTANTS.hideDelay);\n }\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [bottomSheetVisible, maxHeight]);\n\n const animatedStyles = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: translateY.value },\n { translateX: translateX.value },\n { scale: scale.value }\n ],\n };\n });\n\n const dismissKeyboard = useCallback(() => {\n Keyboard.dismiss();\n }, []);\n\n const closeBottomSheet = useCallback(() => {\n setBottomSheetVisible(false);\n }, [setBottomSheetVisible]);\n\n const handlePanResponderGrant = useCallback(() => {\n dismissKeyboard();\n isGesturing.value = true;\n startX.value = translateX.value;\n startY.value = translateY.value;\n scale.value = withTiming(GESTURE_CONSTANTS.scaleAmount, ANIMATION_CONFIG.scale);\n }, [dismissKeyboard]);\n\n const handlePanResponderMove = useCallback((_, gestureState) => {\n const newTranslateX = (startX.value + gestureState.dx) / GESTURE_CONSTANTS.horizontalDamping;\n translateX.value = newTranslateX;\n\n const newTranslateY = startY.value + gestureState.dy;\n if (newTranslateY < 0) {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalUpDamping;\n } else {\n translateY.value = newTranslateY / GESTURE_CONSTANTS.verticalDownDamping;\n }\n }, []);\n\n const handlePanResponderRelease = useCallback((_, gestureState) => {\n isGesturing.value = false;\n translateX.value = withTiming(0, { duration: 100 });\n\n const shouldClose = gestureState.vy > GESTURE_CONSTANTS.closeVelocityThreshold ||\n translateY.value > maxHeight * GESTURE_CONSTANTS.closeDistanceRatio;\n\n if (shouldClose) {\n translateY.value = withTiming(maxHeight + 100, ANIMATION_CONFIG.close);\n closeBottomSheet();\n } else {\n translateY.value = withTiming(0, ANIMATION_CONFIG.close);\n }\n\n scale.value = withSpring(1, ANIMATION_CONFIG.scaleRestore);\n }, [maxHeight, closeBottomSheet]);\n\n const panResponder = useMemo(\n () => PanResponder.create({\n onStartShouldSetPanResponder: () => false,\n onStartShouldSetPanResponderCapture: () => false,\n onMoveShouldSetPanResponder: (_, gestureState) => {\n // 일정 거리 이상 이동했을 때만 PanResponder가 응답 (탭과 드래그 구분)\n const { dx, dy } = gestureState;\n return Math.abs(dx) > GESTURE_CONSTANTS.moveThreshold || Math.abs(dy) > GESTURE_CONSTANTS.moveThreshold;\n },\n onMoveShouldSetPanResponderCapture: () => false,\n onPanResponderGrant: handlePanResponderGrant,\n onPanResponderMove: handlePanResponderMove,\n onPanResponderRelease: handlePanResponderRelease,\n }),\n [handlePanResponderGrant, handlePanResponderMove, handlePanResponderRelease]\n );\n\n // 배경 터치 핸들러\n const handleBackgroundPress = useCallback(() => {\n if (isBackgroundTouchClose) setBottomSheetVisible(false);\n }, [isBackgroundTouchClose, setBottomSheetVisible]);\n\n const containerStyle = [\n styles.container,\n {\n width: options.type === 'fixed' ? '100%' : windowWidth - marginHorizontal * 2,\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',\n height: maxHeight,\n marginHorizontal: options.type === 'fixed' ? 0 : marginHorizontal,\n bottom: options.type === 'fixed' ? 0 : marginBottom + bottomInsets,\n paddingBottom: options.type === 'fixed' ? bottomInsets : 0,\n backgroundColor: palette.background.base,\n ... (options.type === 'fixed' ? { borderTopLeftRadius: 26, borderTopRightRadius: 26, borderBottomLeftRadius: 0, borderBottomRightRadius: 0 } : { borderRadius: 26 }),\n },\n animatedStyles,\n ] as ViewStyle[];\n\n const pressableViewStyle = [\n styles.pressableView,\n { paddingHorizontal: padding, paddingBottom: padding },\n ];\n\n const gestureBarContainerStyle = [\n styles.gestureBarContainer,\n { paddingBottom: padding }\n ];\n\n const gestureBarStyle = [\n styles.gestureBar,\n { backgroundColor: palette.grey[60] }\n ];\n\n if (!localVisible) {\n return null;\n }\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.BOTTOM_SHEET1}\n key={localVisible ? 'visiblebs' : 'hiddenbs'}\n modalBgColor={palette.modalBgColor}\n onPress={handleBackgroundPress}\n accessibilityViewIsModal={true}\n {...accessibilityProps}\n >\n <Animated.View style={containerStyle}>\n <View style={pressableViewStyle}>\n <View {...panResponder.panHandlers}>\n <View style={gestureBarContainerStyle}>\n <View style={gestureBarStyle} />\n </View>\n {headerComponent}\n </View>\n\n {component}\n </View>\n </Animated.View>\n </ModalBackground>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n borderRadius: 26,\n overflow: 'hidden',\n zIndex: Z_INDEX_VALUE.BOTTOM_SHEET2,\n },\n pressableView: {\n width: '100%',\n height: '100%',\n },\n gestureBarContainer: {\n width: '100%',\n paddingTop: 10,\n justifyContent: 'center',\n alignItems: 'center',\n },\n gestureBar: {\n width: 45,\n height: 3,\n borderRadius: 2,\n },\n});\n\nexport default BottomSheetOverlay;"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAMtD,iBAAS,aAAa,CAAC,EACrB,eAAe,GAChB,EAAE;IACD,eAAe,CAAC,EAAE,MAAM,SAAS,CAAC;CACnC,4BAmBA;AAED,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAMtD,iBAAS,aAAa,CAAC,EACrB,eAAe,GAChB,EAAE;IACD,eAAe,CAAC,EAAE,MAAM,SAAS,CAAC;CACnC,4BA6BA;AAED,eAAe,aAAa,CAAC"}
@@ -8,11 +8,11 @@ function LoadingNotify({ loaderComponent, }) {
8
8
  const { loaderVisible } = useLoader();
9
9
  const { palette } = useTheme();
10
10
  const renderLoader = useCallback(() => {
11
- return loaderComponent ? (loaderComponent()) : (<ActivityIndicator size="large" color="#fff"/>);
11
+ return loaderComponent ? (loaderComponent()) : (<ActivityIndicator size="large" color="#fff" accessibilityLabel="로딩 중" accessibilityLiveRegion="polite"/>);
12
12
  }, [loaderComponent]);
13
13
  if (!loaderVisible)
14
14
  return null;
15
- return (<ModalBackground zIndex={Z_INDEX_VALUE.LOADING} key={loaderVisible ? 'visibleln' : 'hiddenln'} modalBgColor={palette.modalBgColor}>
15
+ return (<ModalBackground zIndex={Z_INDEX_VALUE.LOADING} key={loaderVisible ? 'visibleln' : 'hiddenln'} modalBgColor={palette.modalBgColor} accessibilityViewIsModal={true}>
16
16
  {renderLoader()}
17
17
  </ModalBackground>);
18
18
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,SAAS,aAAa,CAAC,EACrB,eAAe,GAGhB;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,eAAe,EAAE,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAG,CAChD,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACL,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAChI;MAAA,CAAC,YAAY,EAAE,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import { ActivityIndicator } from \"react-native\";\nimport React, { ReactNode, useCallback } from \"react\";\nimport { useLoader } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nfunction LoadingNotify({\n loaderComponent,\n}: {\n loaderComponent?: () => ReactNode;\n}) {\n const { loaderVisible } = useLoader();\n const { palette } = useTheme();\n\n const renderLoader = useCallback(() => {\n return loaderComponent ? (\n loaderComponent()\n ) : (\n <ActivityIndicator size=\"large\" color=\"#fff\" />\n );\n }, [loaderComponent]);\n\n if (!loaderVisible) return null;\n\n return (\n <ModalBackground zIndex={Z_INDEX_VALUE.LOADING} key={loaderVisible ? 'visibleln' : 'hiddenln'} modalBgColor={palette.modalBgColor}>\n {renderLoader()}\n </ModalBackground>\n )\n}\n\nexport default LoadingNotify;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/LoadingNotify/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,SAAS,aAAa,CAAC,EACrB,eAAe,GAGhB;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,SAAS,EAAE,CAAC;IACtC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE/B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,OAAO,eAAe,CAAC,CAAC,CAAC,CACvB,eAAe,EAAE,CAClB,CAAC,CAAC,CAAC,CACF,CAAC,iBAAiB,CAChB,IAAI,CAAC,OAAO,CACZ,KAAK,CAAC,MAAM,CACZ,kBAAkB,CAAC,MAAM,CACzB,uBAAuB,CAAC,QAAQ,EAChC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,IAAI,CAAC,aAAa;QAAE,OAAO,IAAI,CAAC;IAEhC,OAAO,CACL,CAAC,eAAe,CACd,MAAM,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAC9B,GAAG,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAC9C,YAAY,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CACnC,wBAAwB,CAAC,CAAC,IAAI,CAAC,CAE/B;MAAA,CAAC,YAAY,EAAE,CACjB;IAAA,EAAE,eAAe,CAAC,CACnB,CAAA;AACH,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import { ActivityIndicator } from \"react-native\";\nimport React, { ReactNode, useCallback } from \"react\";\nimport { useLoader } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nfunction LoadingNotify({\n loaderComponent,\n}: {\n loaderComponent?: () => ReactNode;\n}) {\n const { loaderVisible } = useLoader();\n const { palette } = useTheme();\n\n const renderLoader = useCallback(() => {\n return loaderComponent ? (\n loaderComponent()\n ) : (\n <ActivityIndicator\n size=\"large\"\n color=\"#fff\"\n accessibilityLabel=\"로딩 중\"\n accessibilityLiveRegion=\"polite\"\n />\n );\n }, [loaderComponent]);\n\n if (!loaderVisible) return null;\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.LOADING}\n key={loaderVisible ? 'visibleln' : 'hiddenln'}\n modalBgColor={palette.modalBgColor}\n accessibilityViewIsModal={true}\n >\n {renderLoader()}\n </ModalBackground>\n )\n}\n\nexport default LoadingNotify;\n"]}
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
- declare function Modality({ foldableSingleScreen, modalityComponent, }: {
2
+ import { type ViewProps } from 'react-native';
3
+ declare function Modality({ foldableSingleScreen, modalityComponent, ...accessibilityProps }: {
3
4
  modalityComponent: React.ReactNode;
4
5
  foldableSingleScreen: boolean;
5
- }): React.JSX.Element | null;
6
+ } & ViewProps): React.JSX.Element | null;
6
7
  export default Modality;
7
8
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,iBAAS,QAAQ,CAAC,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,EAAE;IACD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,oBAAoB,EAAE,OAAO,CAAC;CAC/B,4BAmHA;AA6BD,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjF,iBAAS,QAAQ,CAAC,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,GAAG,kBAAkB,EACtB,EAAE;IACD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,oBAAoB,EAAE,OAAO,CAAC;CAC/B,GAAG,SAAS,4BAqHZ;AA6BD,eAAe,QAAQ,CAAC"}
@@ -7,7 +7,7 @@ import { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';
7
7
  import ZSView from '../../ui/ZSView';
8
8
  import { useTheme } from '../../context/ThemeContext';
9
9
  const windowHeight = Dimensions.get('window').height;
10
- function Modality({ foldableSingleScreen, modalityComponent, }) {
10
+ function Modality({ foldableSingleScreen, modalityComponent, ...accessibilityProps }) {
11
11
  const { palette } = useTheme();
12
12
  const [localVisible, setLocalVisible] = useState(false);
13
13
  const { modalityVisible } = useModality();
@@ -81,7 +81,7 @@ function Modality({ foldableSingleScreen, modalityComponent, }) {
81
81
  styles.animatedBackground,
82
82
  { backgroundColor: palette.background.neutral },
83
83
  backgroundAnimatedStyle
84
- ]}>
84
+ ]} accessibilityViewIsModal={true} {...accessibilityProps}>
85
85
  <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base}/>
86
86
 
87
87
  <Animated.View exiting={FadeOut.duration(300)} style={[
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions, StatusBar, StyleSheet } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\nimport { useTheme } from '../../context/ThemeContext';\n\nconst windowHeight = Dimensions.get('window').height;\n\nfunction Modality({\n foldableSingleScreen,\n modalityComponent,\n}: {\n modalityComponent: React.ReactNode;\n foldableSingleScreen: boolean;\n}) {\n const { palette } = useTheme();\n const [localVisible, setLocalVisible] = useState(false);\n const { modalityVisible } = useModality();\n const insets = useSafeAreaInsets();\n const backScale = useSharedValue(1);\n const backTranslateY = useSharedValue(0);\n const backBorderRadius = useSharedValue(0);\n const mainTranslateY = useSharedValue(windowHeight);\n const backgroundOpacity = useSharedValue(1);\n const overrideMargin = 10;\n const mainScreenMargin = insets.top;\n const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n // 애니메이션 트리거\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout>;\n \n if (modalityVisible) {\n // 모달이 열리는 애니메이션\n setLocalVisible(true);\n backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n backgroundOpacity.value = withTiming(1, { duration: 500 });\n } else {\n // 모달이 닫히는 애니메이션 (역순)\n backScale.value = withTiming(1, { duration: 100 });\n backTranslateY.value = withTiming(0, { duration: 100 });\n backBorderRadius.value = withTiming(0, { duration: 100 });\n mainTranslateY.value = withTiming(windowHeight, { duration: 200 });\n backgroundOpacity.value = withTiming(0, { duration: 300 });\n timeoutId = setTimeout(() => {\n setLocalVisible(false);\n }, 500);\n }\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [modalityVisible, insets.top]);\n\n // 부모 스크린\n const backScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { scaleX: backScale.value },\n { translateY: backTranslateY.value }\n ],\n borderTopLeftRadius: backBorderRadius.value,\n borderTopRightRadius: backBorderRadius.value,\n };\n });\n\n // 아래에서 등장하는 Modality 화면\n const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: mainTranslateY.value }\n ]\n };\n });\n\n // 배경 불투명도 스타일\n const backgroundAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n opacity: backgroundOpacity.value\n };\n });\n\n return (\n !localVisible ? null :\n <Animated.View\n key={localVisible ? 'visiblemd' : 'hiddenmd'}\n style={[\n styles.animatedBackground,\n { backgroundColor: palette.background.neutral },\n backgroundAnimatedStyle\n ]}\n >\n <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n <Animated.View\n exiting={FadeOut.duration(300)}\n style={[\n styles.backScreen,\n { backgroundColor: palette.background.layer2, width: '100%', height: windowHeight, maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%' },\n backScreenAnimatedStyle\n ]}\n />\n\n <Animated.View\n style={[\n {\n height: windowHeight - mainScreenMargin,\n paddingBottom: mainScrrenPadding,\n backgroundColor: palette.background.base,\n width: '100%',\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',\n alignSelf: 'center',\n },\n styles.mainScreen,\n mainScreenAnimatedStyle\n ]}\n >\n <ZSView style={[styles.contents, { width: '100%'}]}>\n {modalityComponent}\n </ZSView>\n </Animated.View>\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n contents: {\n flex: 1,\n paddingTop: 10,\n zIndex: Z_INDEX_VALUE.MODAL4,\n },\n animatedBackground: {\n ...StyleSheet.absoluteFillObject,\n zIndex: Z_INDEX_VALUE.MODAL1,\n alignSelf: 'center',\n },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'center',\n zIndex: Z_INDEX_VALUE.MODAL2,\n },\n mainScreen: {\n position: 'absolute',\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n zIndex: Z_INDEX_VALUE.MODAL3,\n overflow: 'hidden',\n },\n});\n\nexport default Modality;\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/overlay/Modality/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Dimensions, StatusBar, StyleSheet, type ViewProps } from 'react-native';\nimport { useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context';\nimport Animated, { FadeOut, useAnimatedStyle, withTiming, withDelay, useSharedValue } from 'react-native-reanimated';\nimport { useModality } from '../../model/useOverlay';\nimport { MAX_FOLDABLE_SINGLE_WIDTH, Z_INDEX_VALUE } from '../../model/utils';\nimport ZSView from '../../ui/ZSView';\nimport { useTheme } from '../../context/ThemeContext';\n\nconst windowHeight = Dimensions.get('window').height;\n\nfunction Modality({\n foldableSingleScreen,\n modalityComponent,\n ...accessibilityProps\n}: {\n modalityComponent: React.ReactNode;\n foldableSingleScreen: boolean;\n} & ViewProps) {\n const { palette } = useTheme();\n const [localVisible, setLocalVisible] = useState(false);\n const { modalityVisible } = useModality();\n const insets = useSafeAreaInsets();\n const backScale = useSharedValue(1);\n const backTranslateY = useSharedValue(0);\n const backBorderRadius = useSharedValue(0);\n const mainTranslateY = useSharedValue(windowHeight);\n const backgroundOpacity = useSharedValue(1);\n const overrideMargin = 10;\n const mainScreenMargin = insets.top;\n const mainScrrenPadding = (initialWindowMetrics?.insets.bottom || insets.bottom);\n\n // 애니메이션 트리거\n useEffect(() => {\n let timeoutId: ReturnType<typeof setTimeout>;\n \n if (modalityVisible) {\n // 모달이 열리는 애니메이션\n setLocalVisible(true);\n backScale.value = withDelay(100, withTiming(0.92, { duration: 200 }));\n backTranslateY.value = withDelay(300, withTiming(insets.top, { duration: 200 }));\n backBorderRadius.value = withDelay(100, withTiming(12, { duration: 200 }));\n mainTranslateY.value = withDelay(200, withTiming(overrideMargin + insets.top, { duration: 200 }));\n backgroundOpacity.value = withTiming(1, { duration: 500 });\n } else {\n // 모달이 닫히는 애니메이션 (역순)\n backScale.value = withTiming(1, { duration: 100 });\n backTranslateY.value = withTiming(0, { duration: 100 });\n backBorderRadius.value = withTiming(0, { duration: 100 });\n mainTranslateY.value = withTiming(windowHeight, { duration: 200 });\n backgroundOpacity.value = withTiming(0, { duration: 300 });\n timeoutId = setTimeout(() => {\n setLocalVisible(false);\n }, 500);\n }\n\n return () => {\n if (timeoutId) clearTimeout(timeoutId);\n };\n }, [modalityVisible, insets.top]);\n\n // 부모 스크린\n const backScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { scaleX: backScale.value },\n { translateY: backTranslateY.value }\n ],\n borderTopLeftRadius: backBorderRadius.value,\n borderTopRightRadius: backBorderRadius.value,\n };\n });\n\n // 아래에서 등장하는 Modality 화면\n const mainScreenAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n transform: [\n { translateY: mainTranslateY.value }\n ]\n };\n });\n\n // 배경 불투명도 스타일\n const backgroundAnimatedStyle = useAnimatedStyle(() => {\n 'worklet';\n return {\n opacity: backgroundOpacity.value\n };\n });\n\n return (\n !localVisible ? null :\n <Animated.View\n key={localVisible ? 'visiblemd' : 'hiddenmd'}\n style={[\n styles.animatedBackground,\n { backgroundColor: palette.background.neutral },\n backgroundAnimatedStyle\n ]}\n accessibilityViewIsModal={true}\n {...accessibilityProps}\n >\n <StatusBar backgroundColor={modalityVisible ? palette.background.neutral : palette.background.base} />\n\n <Animated.View\n exiting={FadeOut.duration(300)}\n style={[\n styles.backScreen,\n { backgroundColor: palette.background.layer2, width: '100%', height: windowHeight, maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%' },\n backScreenAnimatedStyle\n ]}\n />\n\n <Animated.View\n style={[\n {\n height: windowHeight - mainScreenMargin,\n paddingBottom: mainScrrenPadding,\n backgroundColor: palette.background.base,\n width: '100%',\n maxWidth: foldableSingleScreen ? MAX_FOLDABLE_SINGLE_WIDTH : '100%',\n alignSelf: 'center',\n },\n styles.mainScreen,\n mainScreenAnimatedStyle\n ]}\n >\n <ZSView style={[styles.contents, { width: '100%'}]}>\n {modalityComponent}\n </ZSView>\n </Animated.View>\n </Animated.View>\n );\n}\n\nconst styles = StyleSheet.create({\n contents: {\n flex: 1,\n paddingTop: 10,\n zIndex: Z_INDEX_VALUE.MODAL4,\n },\n animatedBackground: {\n ...StyleSheet.absoluteFillObject,\n zIndex: Z_INDEX_VALUE.MODAL1,\n alignSelf: 'center',\n },\n backScreen: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n alignSelf: 'center',\n zIndex: Z_INDEX_VALUE.MODAL2,\n },\n mainScreen: {\n position: 'absolute',\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n zIndex: Z_INDEX_VALUE.MODAL3,\n overflow: 'hidden',\n },\n});\n\nexport default Modality;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"PopOverMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAOrD,iBAAS,WAAW,CAAC,EACnB,EAAE,EACF,EAAE,EACF,SAAS,EACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAyFvC;AAED,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"PopOverMenu.d.ts","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAOrD,iBAAS,WAAW,CAAC,EACnB,EAAE,EACF,EAAE,EACF,SAAS,EACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA8FvC;AAED,eAAe,WAAW,CAAC"}
@@ -60,13 +60,13 @@ function PopOverMenu({ px, py, component }) {
60
60
  if (!popOverVisible)
61
61
  return null;
62
62
  const { adjustedX, adjustedY } = getAdjustedPosition();
63
- return (<ModalBackground zIndex={Z_INDEX_VALUE.POPOVER} key={popOverVisible ? 'visiblepo' : 'hiddenpo'} modalBgColor={palette.modalBgColor} position='pop' onPress={() => setPopOverVisible(false)}>
64
- {isContentVisible && (<Animated.View entering={FadeInUp} exiting={FadeOutUp}>
63
+ return (<ModalBackground zIndex={Z_INDEX_VALUE.POPOVER} key={popOverVisible ? 'visiblepo' : 'hiddenpo'} modalBgColor={palette.modalBgColor} position='pop' onPress={() => setPopOverVisible(false)} accessibilityViewIsModal={true}>
64
+ {isContentVisible && (<Animated.View entering={FadeInUp} exiting={FadeOutUp} accessibilityRole="menu" accessibilityLiveRegion="polite">
65
65
  <Pressable style={{
66
66
  position: 'absolute',
67
67
  left: adjustedX,
68
68
  top: adjustedY,
69
- }} onLayout={handleLayout}>
69
+ }} onLayout={handleLayout} accessibilityRole="none" importantForAccessibility="no">
70
70
  {component}
71
71
  </Pressable>
72
72
  </Animated.View>)}
@@ -1 +1 @@
1
- {"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Dimensions, LayoutChangeEvent, Pressable } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { usePopOver } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { PopOverMenuProps } from \"../../model/types\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nconst MINIMUM_OFFSET = 10;\nconst { width: windowWidth, height: windowHeight } = Dimensions.get('window');\n\nfunction PopOverMenu({\n px,\n py,\n component\n}: PopOverMenuProps): JSX.Element | null {\n const { palette } = useTheme();\n const [isContentVisible, setIsContentVisible] = useState<boolean>(false);\n const [contentWidth, setContentWidth] = useState<number>(0);\n const [contentHeight, setContentHeight] = useState<number>(0);\n const { popOverVisible, setPopOverVisible } = usePopOver();\n const timerRef = useRef<number | null>(null);\n\n useEffect(() => {\n if (popOverVisible) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n\n timerRef.current = setTimeout(() => {\n setIsContentVisible(true);\n }, 200);\n } else {\n setIsContentVisible(false);\n }\n\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [popOverVisible]);\n\n const handleLayout = useCallback((event: LayoutChangeEvent): void => {\n setContentWidth(event.nativeEvent.layout.width || 0);\n setContentHeight(event.nativeEvent.layout.height || 0);\n }, []);\n\n // 화면 경계를 벗어나는지 확인하고 위치 조정\n const getAdjustedPosition = () => {\n let adjustedX = px - contentWidth;\n let adjustedY = py;\n\n // 수평 방향 조정\n if (adjustedX > windowWidth) {\n adjustedX = windowWidth - MINIMUM_OFFSET;\n }\n if (adjustedX < 0) {\n adjustedX = MINIMUM_OFFSET;\n }\n\n // 수직 방향 조정\n if (py + contentHeight > windowHeight) {\n adjustedY = py - (contentHeight * 1.5); // 위쪽으로 표시\n }\n if (adjustedY < 0) {\n adjustedY = MINIMUM_OFFSET;\n }\n\n return { adjustedX, adjustedY };\n };\n\n if (!popOverVisible) return null;\n\n const { adjustedX, adjustedY } = getAdjustedPosition();\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.POPOVER}\n key={popOverVisible ? 'visiblepo' : 'hiddenpo'}\n modalBgColor={palette.modalBgColor}\n position='pop'\n onPress={() => setPopOverVisible(false)}\n >\n {isContentVisible && (\n <Animated.View\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n <Pressable\n style={{\n position: 'absolute',\n left: adjustedX,\n top: adjustedY,\n }}\n onLayout={handleLayout}\n >\n {component}\n </Pressable>\n </Animated.View>\n )}\n </ModalBackground>\n );\n}\n\nexport default PopOverMenu;"]}
1
+ {"version":3,"file":"PopOverMenu.js","sourceRoot":"","sources":["../../../src/overlay/PopOver/PopOverMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Dimensions, LayoutChangeEvent, Pressable } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { usePopOver } from \"../../model/useOverlay\";\nimport ModalBackground from \"../ui/ModalBackground\";\nimport { PopOverMenuProps } from \"../../model/types\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\nconst MINIMUM_OFFSET = 10;\nconst { width: windowWidth, height: windowHeight } = Dimensions.get('window');\n\nfunction PopOverMenu({\n px,\n py,\n component\n}: PopOverMenuProps): JSX.Element | null {\n const { palette } = useTheme();\n const [isContentVisible, setIsContentVisible] = useState<boolean>(false);\n const [contentWidth, setContentWidth] = useState<number>(0);\n const [contentHeight, setContentHeight] = useState<number>(0);\n const { popOverVisible, setPopOverVisible } = usePopOver();\n const timerRef = useRef<number | null>(null);\n\n useEffect(() => {\n if (popOverVisible) {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n\n timerRef.current = setTimeout(() => {\n setIsContentVisible(true);\n }, 200);\n } else {\n setIsContentVisible(false);\n }\n\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n timerRef.current = null;\n }\n };\n }, [popOverVisible]);\n\n const handleLayout = useCallback((event: LayoutChangeEvent): void => {\n setContentWidth(event.nativeEvent.layout.width || 0);\n setContentHeight(event.nativeEvent.layout.height || 0);\n }, []);\n\n // 화면 경계를 벗어나는지 확인하고 위치 조정\n const getAdjustedPosition = () => {\n let adjustedX = px - contentWidth;\n let adjustedY = py;\n\n // 수평 방향 조정\n if (adjustedX > windowWidth) {\n adjustedX = windowWidth - MINIMUM_OFFSET;\n }\n if (adjustedX < 0) {\n adjustedX = MINIMUM_OFFSET;\n }\n\n // 수직 방향 조정\n if (py + contentHeight > windowHeight) {\n adjustedY = py - (contentHeight * 1.5); // 위쪽으로 표시\n }\n if (adjustedY < 0) {\n adjustedY = MINIMUM_OFFSET;\n }\n\n return { adjustedX, adjustedY };\n };\n\n if (!popOverVisible) return null;\n\n const { adjustedX, adjustedY } = getAdjustedPosition();\n\n return (\n <ModalBackground\n zIndex={Z_INDEX_VALUE.POPOVER}\n key={popOverVisible ? 'visiblepo' : 'hiddenpo'}\n modalBgColor={palette.modalBgColor}\n position='pop'\n onPress={() => setPopOverVisible(false)}\n accessibilityViewIsModal={true}\n >\n {isContentVisible && (\n <Animated.View\n entering={FadeInUp}\n exiting={FadeOutUp}\n accessibilityRole=\"menu\"\n accessibilityLiveRegion=\"polite\"\n >\n <Pressable\n style={{\n position: 'absolute',\n left: adjustedX,\n top: adjustedY,\n }}\n onLayout={handleLayout}\n accessibilityRole=\"none\"\n importantForAccessibility=\"no\"\n >\n {component}\n </Pressable>\n </Animated.View>\n )}\n </ModalBackground>\n );\n}\n\nexport default PopOverMenu;"]}
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtE,QAAA,MAAM,QAAQ;8BAKa,mBAAmB,KAAK,SAAS;eAC/C,SAAS;0BACE,MAAM,KAAK,IAAI;uBA0CtC,CAAC;AA0BF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"SnackbarItem.d.ts","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAKtE,QAAA,MAAM,QAAQ;8BAKa,mBAAmB,KAAK,SAAS;eAC/C,SAAS;0BACE,MAAM,KAAK,IAAI;uBA+CtC,CAAC;AA0BF,eAAe,QAAQ,CAAC"}
@@ -14,8 +14,8 @@ const Snackbar = ({ customSnackbar, snackItem, hideSnackBar, }) => {
14
14
  const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);
15
15
  return () => clearTimeout(closeTimeout);
16
16
  }, []);
17
- return (<Animated.View style={[styles.snackbarWrapper]} entering={FadeInUp} exiting={FadeOutUp}>
18
- <TouchableOpacity style={[styles.container]} activeOpacity={1} onPress={closeSnackbar}>
17
+ return (<Animated.View style={[styles.snackbarWrapper]} entering={FadeInUp} exiting={FadeOutUp} accessibilityLiveRegion="polite" accessibilityRole="alert">
18
+ <TouchableOpacity style={[styles.container]} activeOpacity={1} onPress={closeSnackbar} accessibilityRole="button" accessibilityLabel="닫기" accessibilityHint="메시지를 닫으려면 탭하세요">
19
19
  {customSnackbar ? (customSnackbar({ snackType: type, snackMessage: message })) : (<ViewAtom style={[
20
20
  styles.snackBar,
21
21
  { backgroundColor: type === "error" ? palette.background.danger : palette.background.success },
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useCallback } from \"react\";\nimport { StyleSheet, TouchableOpacity } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { CustomSnackbarProps, SnackItem } from \"../../../model/types\";\nimport ViewAtom from \"../../../ui/atoms/ViewAtom\";\nimport { useTheme } from \"../../../context/ThemeContext\";\nimport ZSText from \"../../../ui/ZSText\";\n\nconst Snackbar = ({\n customSnackbar,\n snackItem,\n hideSnackBar,\n}: {\n customSnackbar?: (props: CustomSnackbarProps) => ReactNode;\n snackItem: SnackItem;\n hideSnackBar: (index: number) => void;\n}) => {\n const { type, message, snackbarDuration } = snackItem;\n const { palette } = useTheme();\n\n const closeSnackbar = useCallback(() => {\n hideSnackBar(snackItem.index);\n }, [hideSnackBar, snackItem.index]);\n\n useEffect(() => {\n const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);\n return () => clearTimeout(closeTimeout);\n }, []);\n\n return (\n <Animated.View\n style={[styles.snackbarWrapper]}\n entering={FadeInUp}\n exiting={FadeOutUp}\n >\n <TouchableOpacity\n style={[styles.container]}\n activeOpacity={1}\n onPress={closeSnackbar}\n >\n {customSnackbar ? (\n customSnackbar({ snackType: type, snackMessage: message })\n ) : (\n <ViewAtom\n style={[\n styles.snackBar,\n { backgroundColor: type === \"error\" ? palette.background.danger : palette.background.success },\n ]}\n >\n <ViewAtom style={styles.messageContainer}>\n <ZSText>{message}</ZSText>\n </ViewAtom>\n </ViewAtom>\n )}\n </TouchableOpacity>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: 16,\n width: \"100%\",\n },\n snackbarWrapper: {\n width: \"96%\",\n marginTop: 8,\n },\n snackBar: {\n borderRadius: 16,\n paddingHorizontal: 10,\n paddingVertical: 18,\n flexDirection: \"row\",\n alignItems: \"center\",\n width: \"100%\",\n },\n messageContainer: {\n flex: 1,\n flexDirection: \"column\",\n marginLeft: 10,\n },\n});\n\nexport default Snackbar;\n"]}
1
+ {"version":3,"file":"SnackbarItem.js","sourceRoot":"","sources":["../../../../src/overlay/SnackbarNotify/ui/SnackbarItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useCallback } from \"react\";\nimport { StyleSheet, TouchableOpacity } from \"react-native\";\nimport Animated, { FadeInUp, FadeOutUp } from \"react-native-reanimated\";\nimport { CustomSnackbarProps, SnackItem } from \"../../../model/types\";\nimport ViewAtom from \"../../../ui/atoms/ViewAtom\";\nimport { useTheme } from \"../../../context/ThemeContext\";\nimport ZSText from \"../../../ui/ZSText\";\n\nconst Snackbar = ({\n customSnackbar,\n snackItem,\n hideSnackBar,\n}: {\n customSnackbar?: (props: CustomSnackbarProps) => ReactNode;\n snackItem: SnackItem;\n hideSnackBar: (index: number) => void;\n}) => {\n const { type, message, snackbarDuration } = snackItem;\n const { palette } = useTheme();\n\n const closeSnackbar = useCallback(() => {\n hideSnackBar(snackItem.index);\n }, [hideSnackBar, snackItem.index]);\n\n useEffect(() => {\n const closeTimeout = setTimeout(closeSnackbar, snackbarDuration);\n return () => clearTimeout(closeTimeout);\n }, []);\n\n return (\n <Animated.View\n style={[styles.snackbarWrapper]}\n entering={FadeInUp}\n exiting={FadeOutUp}\n accessibilityLiveRegion=\"polite\"\n accessibilityRole=\"alert\"\n >\n <TouchableOpacity\n style={[styles.container]}\n activeOpacity={1}\n onPress={closeSnackbar}\n accessibilityRole=\"button\"\n accessibilityLabel=\"닫기\"\n accessibilityHint=\"메시지를 닫으려면 탭하세요\"\n >\n {customSnackbar ? (\n customSnackbar({ snackType: type, snackMessage: message })\n ) : (\n <ViewAtom\n style={[\n styles.snackBar,\n { backgroundColor: type === \"error\" ? palette.background.danger : palette.background.success },\n ]}\n >\n <ViewAtom style={styles.messageContainer}>\n <ZSText>{message}</ZSText>\n </ViewAtom>\n </ViewAtom>\n )}\n </TouchableOpacity>\n </Animated.View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: 16,\n width: \"100%\",\n },\n snackbarWrapper: {\n width: \"96%\",\n marginTop: 8,\n },\n snackBar: {\n borderRadius: 16,\n paddingHorizontal: 10,\n paddingVertical: 18,\n flexDirection: \"row\",\n alignItems: \"center\",\n width: \"100%\",\n },\n messageContainer: {\n flex: 1,\n flexDirection: \"column\",\n marginLeft: 10,\n },\n});\n\nexport default Snackbar;\n"]}
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
- interface ModalBackgroundProps {
2
+ import { type ViewProps } from 'react-native';
3
+ interface ModalBackgroundProps extends ViewProps {
3
4
  zIndex?: number;
4
5
  modalBgColor: string;
5
6
  position?: 'center' | 'left' | 'right' | 'pop';
6
7
  children: React.ReactNode;
7
8
  onPress?: () => void;
8
9
  }
9
- declare function ModalBackground({ modalBgColor, position, children, onPress, zIndex }: ModalBackgroundProps): React.JSX.Element;
10
+ declare function ModalBackground({ modalBgColor, position, children, onPress, zIndex, ...accessibilityProps }: ModalBackgroundProps): React.JSX.Element;
10
11
  export default ModalBackground;
11
12
  //# sourceMappingURL=ModalBackground.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"ModalBackground.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,MAA8B,EAAE,EAAE,oBAAoB,qBAkBtI;AAeD,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"ModalBackground.d.ts","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIrE,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,iBAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAmB,EAAE,QAAQ,EAAE,OAAO,EAAE,MAA8B,EAAE,GAAG,kBAAkB,EAAE,EAAE,oBAAoB,qBAqB7J;AAeD,eAAe,eAAe,CAAC"}
@@ -2,10 +2,10 @@ import React, { useMemo } from 'react';
2
2
  import { Pressable, StyleSheet } from 'react-native';
3
3
  import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
4
4
  import { Z_INDEX_VALUE } from '../../model/utils';
5
- function ModalBackground({ modalBgColor, position = 'center', children, onPress, zIndex = Z_INDEX_VALUE.DEFAULT }) {
5
+ function ModalBackground({ modalBgColor, position = 'center', children, onPress, zIndex = Z_INDEX_VALUE.DEFAULT, ...accessibilityProps }) {
6
6
  const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);
7
- return (<Animated.View style={[styles.modalBg, { zIndex }, position === 'center' && { justifyContent: 'center', alignItems: 'center' }, position === 'left' && { justifyContent: 'flex-start', alignItems: 'center' }, position === 'right' && { justifyContent: 'flex-end', alignItems: 'center' }]} entering={FadeIn.duration(50)} exiting={FadeOut.duration(50)}>
8
- <Pressable style={styles.fullScreen} onPress={onPress ?? (() => { })}>
7
+ return (<Animated.View style={[styles.modalBg, { zIndex }, position === 'center' && { justifyContent: 'center', alignItems: 'center' }, position === 'left' && { justifyContent: 'flex-start', alignItems: 'center' }, position === 'right' && { justifyContent: 'flex-end', alignItems: 'center' }]} entering={FadeIn.duration(50)} exiting={FadeOut.duration(50)} {...accessibilityProps}>
8
+ <Pressable style={styles.fullScreen} onPress={onPress ?? (() => { })} accessibilityRole="button" accessibilityLabel="닫기">
9
9
  </Pressable>
10
10
 
11
11
  {children}
@@ -1 +1 @@
1
- {"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAUlD,SAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,EAAwB;IACrI,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,KAAK,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,MAAM,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,OAAO,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAC9Q,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAE9B;MAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAElC;MAAA,EAAE,SAAS,CAEX;;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,kBAAkB;KACjC;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAG,UAAU,CAAC,kBAAkB;KACjC;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface ModalBackgroundProps {\n zIndex?: number;\n modalBgColor: string;\n position?: 'center' | 'left' | 'right' | 'pop'; // TODO: 'left' | 'right' 미구현\n children: React.ReactNode;\n onPress?: () => void;\n}\n\nfunction ModalBackground({ modalBgColor, position = 'center', children, onPress, zIndex = Z_INDEX_VALUE.DEFAULT }: ModalBackgroundProps) {\n const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n return (\n <Animated.View\n style={[styles.modalBg, { zIndex }, position === 'center' && { justifyContent: 'center', alignItems: 'center' }, position === 'left' && { justifyContent: 'flex-start', alignItems: 'center' }, position === 'right' && { justifyContent: 'flex-end', alignItems: 'center' }]}\n entering={FadeIn.duration(50)}\n exiting={FadeOut.duration(50)}\n >\n <Pressable\n style={styles.fullScreen}\n onPress={onPress ?? (() => { })}\n >\n </Pressable>\n\n {children}\n </Animated.View>\n );\n}\n\nconst createStyles = (modalBgColor: string) =>\n StyleSheet.create({\n modalBg: {\n backgroundColor: modalBgColor,\n ...StyleSheet.absoluteFillObject,\n },\n fullScreen: {\n width: '100%',\n height: '100%',\n ...StyleSheet.absoluteFillObject,\n },\n });\n\nexport default ModalBackground;\n"]}
1
+ {"version":3,"file":"ModalBackground.js","sourceRoot":"","sources":["../../../src/overlay/ui/ModalBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAkB,MAAM,cAAc,CAAC;AACrE,OAAO,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAUlD,SAAS,eAAe,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,kBAAkB,EAAwB;IAC5J,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,KAAK,QAAQ,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,MAAM,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,QAAQ,KAAK,OAAO,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAC9Q,QAAQ,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAC9B,IAAI,kBAAkB,CAAC,CAEvB;MAAA,CAAC,SAAS,CACR,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAChC,iBAAiB,CAAC,QAAQ,CAC1B,kBAAkB,CAAC,IAAI,CAEzB;MAAA,EAAE,SAAS,CAEX;;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,YAAY,GAAG,CAAC,YAAoB,EAAE,EAAE,CAC5C,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,eAAe,EAAE,YAAY;QAC7B,GAAG,UAAU,CAAC,kBAAkB;KACjC;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,GAAG,UAAU,CAAC,kBAAkB;KACjC;CACF,CAAC,CAAC;AAEL,eAAe,eAAe,CAAC","sourcesContent":["import React, { useMemo } from 'react';\nimport { Pressable, StyleSheet, type ViewProps } from 'react-native';\nimport Animated, { FadeIn, FadeOut } from 'react-native-reanimated';\nimport { Z_INDEX_VALUE } from '../../model/utils';\n\ninterface ModalBackgroundProps extends ViewProps {\n zIndex?: number;\n modalBgColor: string;\n position?: 'center' | 'left' | 'right' | 'pop'; // TODO: 'left' | 'right' 미구현\n children: React.ReactNode;\n onPress?: () => void;\n}\n\nfunction ModalBackground({ modalBgColor, position = 'center', children, onPress, zIndex = Z_INDEX_VALUE.DEFAULT, ...accessibilityProps }: ModalBackgroundProps) {\n const styles = useMemo(() => createStyles(modalBgColor), [modalBgColor]);\n\n return (\n <Animated.View\n style={[styles.modalBg, { zIndex }, position === 'center' && { justifyContent: 'center', alignItems: 'center' }, position === 'left' && { justifyContent: 'flex-start', alignItems: 'center' }, position === 'right' && { justifyContent: 'flex-end', alignItems: 'center' }]}\n entering={FadeIn.duration(50)}\n exiting={FadeOut.duration(50)}\n {...accessibilityProps}\n >\n <Pressable\n style={styles.fullScreen}\n onPress={onPress ?? (() => { })}\n accessibilityRole=\"button\"\n accessibilityLabel=\"닫기\"\n >\n </Pressable>\n\n {children}\n </Animated.View>\n );\n}\n\nconst createStyles = (modalBgColor: string) =>\n StyleSheet.create({\n modalBg: {\n backgroundColor: modalBgColor,\n ...StyleSheet.absoluteFillObject,\n },\n fullScreen: {\n width: '100%',\n height: '100%',\n ...StyleSheet.absoluteFillObject,\n },\n });\n\nexport default ModalBackground;\n"]}
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
- interface Props {
2
+ import { type ViewProps } from "react-native";
3
+ interface Props extends ViewProps {
3
4
  children: React.ReactNode;
4
5
  keyboardShowOffset?: number;
5
6
  keyboardHideOffset?: number;
@@ -7,6 +8,6 @@ interface Props {
7
8
  showOnlyKeyboardVisible?: boolean;
8
9
  backgroundColor?: string;
9
10
  }
10
- declare function ZSAboveKeyboard({ keyboardShowOffset, keyboardHideOffset, children, handleLayoutHeight, showOnlyKeyboardVisible, backgroundColor, }: Props): import("react").JSX.Element;
11
+ declare function ZSAboveKeyboard({ keyboardShowOffset, keyboardHideOffset, children, handleLayoutHeight, showOnlyKeyboardVisible, backgroundColor, ...accessibilityProps }: Props): import("react").JSX.Element;
11
12
  export default ZSAboveKeyboard;
12
13
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":";AAaA,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,iBAAS,eAAe,CAAC,EACvB,kBAAsB,EACtB,kBAAsB,EACtB,QAAQ,EACR,kBAAkB,EAClB,uBAA+B,EAC/B,eAAe,GAChB,EAAE,KAAK,+BAwBP;AAED,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAiD,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAY7F,UAAU,KAAM,SAAQ,SAAS;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,iBAAS,eAAe,CAAC,EACvB,kBAAsB,EACtB,kBAAsB,EACtB,QAAQ,EACR,kBAAkB,EAClB,uBAA+B,EAC/B,eAAe,EACf,GAAG,kBAAkB,EACtB,EAAE,KAAK,+BAwBP;AAED,eAAe,eAAe,CAAC"}
@@ -8,7 +8,7 @@ import { Z_INDEX_VALUE } from "../../model/utils";
8
8
  // Android 11 (API 30) 이후: 일부 기기에서 패딩이 적용되지 않음
9
9
  const isLegacyAndroidKeyboardBehavior = (Platform.OS === 'android' && Platform.Version < 30);
10
10
  const HIDDEN_BOTTOM_OFFSET = -300;
11
- function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, showOnlyKeyboardVisible = false, backgroundColor, }) {
11
+ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, children, handleLayoutHeight, showOnlyKeyboardVisible = false, backgroundColor, ...accessibilityProps }) {
12
12
  const { bottom } = useSafeAreaInsets();
13
13
  const componentHeightRef = useRef(0);
14
14
  const { isKeyboardVisible, keyboardHeight } = useKeyboard();
@@ -21,7 +21,7 @@ function ZSAboveKeyboard({ keyboardShowOffset = 0, keyboardHideOffset = 0, child
21
21
  handleLayoutHeight?.(height);
22
22
  };
23
23
  const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;
24
- return (<View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout}>
24
+ return (<View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout} {...accessibilityProps}>
25
25
  <View style={{ width: "100%", backgroundColor, paddingBottom: keyboardVisiblePadding }}>
26
26
  {children}
27
27
  </View>
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,wBAAwB;AACxB,6DAA6D;AAC7D,8CAA8C;AAC9C,MAAM,+BAA+B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;AAE7F,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC;AAWlC,SAAS,eAAe,CAAC,EACvB,kBAAkB,GAAG,CAAC,EACtB,kBAAkB,GAAG,CAAC,EACtB,QAAQ,EACR,kBAAkB,EAClB,uBAAuB,GAAG,KAAK,EAC/B,eAAe,GACT;IACN,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACvC,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,WAAW,EAAE,CAAC;IAC5D,MAAM,sBAAsB,GAC1B,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC;QAC3C,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;IAErF,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC5C,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,kBAAkB,EAAE,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC;IAErE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CACzG;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAC,CACrF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAE,CACT,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,aAAa,CAAC,cAAc;QACpC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\nimport { LayoutChangeEvent, Platform, StyleSheet, View } from \"react-native\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\nimport useKeyboard from \"../../model/useKeyboard\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\n// Edge-to-edge 디스플레이 정책\n// Android 11 (API 30) 이전: adjustResize가 시스템 레벨에서 자동으로 패딩을 추가\n// Android 11 (API 30) 이후: 일부 기기에서 패딩이 적용되지 않음\nconst isLegacyAndroidKeyboardBehavior = (Platform.OS === 'android' && Platform.Version < 30);\n\nconst HIDDEN_BOTTOM_OFFSET = -300;\n\ninterface Props {\n children: React.ReactNode;\n keyboardShowOffset?: number;\n keyboardHideOffset?: number;\n handleLayoutHeight?: (height: number) => void;\n showOnlyKeyboardVisible?: boolean;\n backgroundColor?: string;\n}\n\nfunction ZSAboveKeyboard({\n keyboardShowOffset = 0,\n keyboardHideOffset = 0,\n children,\n handleLayoutHeight,\n showOnlyKeyboardVisible = false,\n backgroundColor,\n}: Props) {\n const { bottom } = useSafeAreaInsets();\n const componentHeightRef = useRef(0);\n const { isKeyboardVisible, keyboardHeight } = useKeyboard();\n const keyboardVisiblePadding =\n !isKeyboardVisible ? (0 + keyboardHideOffset)\n : isLegacyAndroidKeyboardBehavior ? 0\n : (keyboardHeight - (Platform.OS === 'ios' ? bottom : 0) + keyboardShowOffset);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n componentHeightRef.current = height;\n handleLayoutHeight?.(height);\n };\n\n const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;\n\n return (\n <View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout}>\n <View style={{ width: \"100%\", backgroundColor, paddingBottom: keyboardVisiblePadding }}>\n {children}\n </View>\n </View >\n );\n}\n\nexport default ZSAboveKeyboard;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,\n width: '100%',\n },\n});\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSAboveKeyboard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAqB,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,wBAAwB;AACxB,6DAA6D;AAC7D,8CAA8C;AAC9C,MAAM,+BAA+B,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,SAAS,IAAI,QAAQ,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;AAE7F,MAAM,oBAAoB,GAAG,CAAC,GAAG,CAAC;AAWlC,SAAS,eAAe,CAAC,EACvB,kBAAkB,GAAG,CAAC,EACtB,kBAAkB,GAAG,CAAC,EACtB,QAAQ,EACR,kBAAkB,EAClB,uBAAuB,GAAG,KAAK,EAC/B,eAAe,EACf,GAAG,kBAAkB,EACf;IACN,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAC;IACvC,MAAM,kBAAkB,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,WAAW,EAAE,CAAC;IAC5D,MAAM,sBAAsB,GAC1B,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC;QAC3C,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;IAErF,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;QAChD,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC;QAC5C,kBAAkB,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,kBAAkB,EAAE,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC;IAErE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,kBAAkB,CAAC,CACjI;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,sBAAsB,EAAE,CAAC,CACrF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAE,CACT,CAAC;AACJ,CAAC;AAED,eAAe,eAAe,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,aAAa,CAAC,cAAc;QACpC,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC","sourcesContent":["import { useRef } from \"react\";\nimport { LayoutChangeEvent, Platform, StyleSheet, View, type ViewProps } from \"react-native\";\nimport { useSafeAreaInsets } from \"react-native-safe-area-context\";\nimport useKeyboard from \"../../model/useKeyboard\";\nimport { Z_INDEX_VALUE } from \"../../model/utils\";\n\n// Edge-to-edge 디스플레이 정책\n// Android 11 (API 30) 이전: adjustResize가 시스템 레벨에서 자동으로 패딩을 추가\n// Android 11 (API 30) 이후: 일부 기기에서 패딩이 적용되지 않음\nconst isLegacyAndroidKeyboardBehavior = (Platform.OS === 'android' && Platform.Version < 30);\n\nconst HIDDEN_BOTTOM_OFFSET = -300;\n\ninterface Props extends ViewProps {\n children: React.ReactNode;\n keyboardShowOffset?: number;\n keyboardHideOffset?: number;\n handleLayoutHeight?: (height: number) => void;\n showOnlyKeyboardVisible?: boolean;\n backgroundColor?: string;\n}\n\nfunction ZSAboveKeyboard({\n keyboardShowOffset = 0,\n keyboardHideOffset = 0,\n children,\n handleLayoutHeight,\n showOnlyKeyboardVisible = false,\n backgroundColor,\n ...accessibilityProps\n}: Props) {\n const { bottom } = useSafeAreaInsets();\n const componentHeightRef = useRef(0);\n const { isKeyboardVisible, keyboardHeight } = useKeyboard();\n const keyboardVisiblePadding =\n !isKeyboardVisible ? (0 + keyboardHideOffset)\n : isLegacyAndroidKeyboardBehavior ? 0\n : (keyboardHeight - (Platform.OS === 'ios' ? bottom : 0) + keyboardShowOffset);\n\n const handleLayout = (event: LayoutChangeEvent) => {\n const { height } = event.nativeEvent.layout;\n componentHeightRef.current = height;\n handleLayoutHeight?.(height);\n };\n\n const isVisible = showOnlyKeyboardVisible ? isKeyboardVisible : true;\n\n return (\n <View style={[styles.container, { bottom: !isVisible ? HIDDEN_BOTTOM_OFFSET : 0 }]} onLayout={handleLayout} {...accessibilityProps}>\n <View style={{ width: \"100%\", backgroundColor, paddingBottom: keyboardVisiblePadding }}>\n {children}\n </View>\n </View >\n );\n}\n\nexport default ZSAboveKeyboard;\n\nconst styles = StyleSheet.create({\n container: {\n position: 'absolute',\n justifyContent: 'center',\n alignItems: 'center',\n zIndex: Z_INDEX_VALUE.ABOVE_KEYBOARD,\n width: '100%',\n },\n});\n"]}
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
- import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
2
+ import { type ImageSourcePropType, type StyleProp, type ViewStyle, type ViewProps } from 'react-native';
3
3
  import { TypoOptions, IntentOptions } from '../../theme/types';
4
- type Props = {
4
+ type Props = ViewProps & {
5
5
  onPress: () => void;
6
6
  style?: StyleProp<ViewStyle>;
7
7
  title: string;
@@ -12,6 +12,6 @@ type Props = {
12
12
  isLoading?: boolean;
13
13
  disabled?: boolean;
14
14
  };
15
- declare function ZSBlockButton({ onPress, style, title, intent, typo, prefixIcon, variant, isLoading, disabled }: Props): import("react").JSX.Element;
15
+ declare function ZSBlockButton({ onPress, style, title, intent, typo, prefixIcon, variant, isLoading, disabled, ...accessibilityProps }: Props): import("react").JSX.Element;
16
16
  export default ZSBlockButton;
17
17
  //# sourceMappingURL=index.d.ts.map