@sendbird/uikit-react-native-foundation 3.12.1 → 3.12.3

package/lib/commonjs/components/ImageWithPlaceholder/index.js

@@ -19,7 +19,7 @@ const useRetry = (hasError, retryCount = 5) => {
   if (_reactNative.Platform.OS === 'android') return '';
   const forceUpdate = (0, _uikitUtils.useForceUpdate)();
   const retryCountRef = (0, _react.useRef)(1);
-  const retryTimeoutRef = (0, _react.useRef)();
+  const retryTimeoutRef = (0, _react.useRef)(undefined);
   (0, _react.useEffect)(() => {
     if (hasError) {
       const reloadReservation = () => {

package/lib/commonjs/components/ImageWithPlaceholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_createStyleSheet","_interopRequireDefault","_useUIKitTheme","_Box","_Icon","_Image","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useRetry","hasError","retryCount","Platform","OS","forceUpdate","useForceUpdate","retryCountRef","useRef","retryTimeoutRef","useEffect","reloadReservation","current","setTimeout","clearTimeout","ImageWithPlaceholder","props","palette","select","colors","useUIKitTheme","imageNotFound","setImageNotFound","useState","key","createElement","style","overflow","width","height","backgroundColor","dark","background400","light","background100","source","StyleSheet","absoluteFill","styles","hide","resizeMode","resizeMethod","onError","onLoad","containerStyle","icon","size","color","onBackground02","createStyleSheet","display","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Image from '../Image';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  // NOTE: Glide(fast-image) will retry automatically on Android\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\ntype Props = {\n  source: number | { uri: string };\n  width?: number | `${number}%`;\n  height?: number | `${number}%`;\n  style?: StyleProp<ViewStyle>;\n};\nconst ImageWithPlaceholder = (props: Props) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const key = useRetry(imageNotFound);\n  return (\n    <Box\n      style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}\n      backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n    >\n      <Image\n        key={key}\n        source={props.source}\n        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setImageNotFound(true)}\n        onLoad={() => setImageNotFound(false)}\n      />\n      {imageNotFound && (\n        <Icon\n          containerStyle={StyleSheet.absoluteFill}\n          icon={'thumbnail-none'}\n          size={48}\n          color={colors.onBackground02}\n        />\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageWithPlaceholder;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_uikitUtils","_createStyleSheet","_interopRequireDefault","_useUIKitTheme","_Box","_Icon","_Image","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","useRetry","hasError","retryCount","Platform","OS","forceUpdate","useForceUpdate","retryCountRef","useRef","retryTimeoutRef","undefined","useEffect","reloadReservation","current","setTimeout","clearTimeout","ImageWithPlaceholder","props","palette","select","colors","useUIKitTheme","imageNotFound","setImageNotFound","useState","key","createElement","style","overflow","width","height","backgroundColor","dark","background400","light","background100","source","StyleSheet","absoluteFill","styles","hide","resizeMode","resizeMethod","onError","onLoad","containerStyle","icon","size","color","onBackground02","createStyleSheet","display","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Image from '../Image';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  // NOTE: Glide(fast-image) will retry automatically on Android\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\ntype Props = {\n  source: number | { uri: string };\n  width?: number | `${number}%`;\n  height?: number | `${number}%`;\n  style?: StyleProp<ViewStyle>;\n};\nconst ImageWithPlaceholder = (props: Props) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const key = useRetry(imageNotFound);\n  return (\n    <Box\n      style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}\n      backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n    >\n      <Image\n        key={key}\n        source={props.source}\n        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setImageNotFound(true)}\n        onLoad={() => setImageNotFound(false)}\n      />\n      {imageNotFound && (\n        <Icon\n          containerStyle={StyleSheet.absoluteFill}\n          icon={'thumbnail-none'}\n          size={48}\n          color={colors.onBackground02}\n        />\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageWithPlaceholder;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/PressBox/index.js

@@ -17,12 +17,20 @@ const PressBox = props => {
 };
 const PressBoxWithPressable = ({
   children,
+  style,
   ...props
 }) => {
+  const [pressed, setPressed] = (0, _react.useState)(false);
+  const state = {
+    pressed
+  };
   return /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({
     disabled: !props.onPress && !props.onLongPress,
-    delayLongPress: DEFAULT_LONG_PRESS_DELAY
-  }, props), state => (0, _uikitUtils.isFunction)(children) ? children(state) : children);
+    delayLongPress: DEFAULT_LONG_PRESS_DELAY,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: (0, _uikitUtils.isFunction)(style) ? style(state) : style
+  }, props), (0, _uikitUtils.isFunction)(children) ? children(state) : children);
 };
 const PressBoxWithTouchableOpacity = ({
   children,

package/lib/commonjs/components/PressBox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_uikitUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","DEFAULT_LONG_PRESS_DELAY","exports","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","Pressable","disabled","onPress","onLongPress","delayLongPress","state","isFunction","style","pressed","setPressed","useState","TouchableOpacity","onPressIn","onPressOut","_default"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, ...props }: Props) => {\n  return (\n    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>\n      {(state) => (isFunction(children) ? children(state) : children)}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","React","_reactNative","_uikitUtils","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","DEFAULT_LONG_PRESS_DELAY","exports","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","style","pressed","setPressed","useState","state","Pressable","disabled","onPress","onLongPress","delayLongPress","onPressIn","onPressOut","isFunction","TouchableOpacity","_default"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <Pressable\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={isFunction(style) ? style(state) : style}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/Avatar/AvatarGroup.js

@@ -30,10 +30,12 @@ const AvatarGroup = ({
     return ((_React$Children$map = _react.default.Children.map(children, (child, index) => {
       if (index + 1 > MAX) return child;
       if (! /*#__PURE__*/_react.default.isValidElement(child)) return child;
-      if (childAmount === 1) return /*#__PURE__*/_react.default.cloneElement(child, {
-        size,
-        containerStyle
-      });
+      if (childAmount === 1) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          size,
+          containerStyle
+        });
+      }
       const top = getTopPoint(index, childAmount) * size;
       const start = getStartPoint(index) * size;
       const width = getWidthPoint(index, childAmount) * size;

package/lib/commonjs/ui/Avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","MAX","AvatarGroup","children","containerStyle","size","childAmount","React","Children","count","createElement","View","style","overflow","width","height","borderRadius","backgroundColor","renderAvatars","_React$Children$map","map","child","index","isValidElement","cloneElement","top","getTopPoint","start","getStartPoint","getWidthPoint","getHeightPoint","innerStart","getInnerStart","innerTop","getInnerTop","position","square","slice","_","total","idx","_default","exports"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n}>;\nconst AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const renderAvatars = () => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });\n\n        const top = getTopPoint(index, childAmount) * size;\n        const start = getStartPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerStart = -getInnerStart(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>\n            {React.cloneElement(child as ReactElement, {\n              size,\n              square: true,\n              containerStyle: { start: innerStart, top: innerTop },\n            })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  };\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {renderAvatars()}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return 0;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getStartPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerStart = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","MAX","AvatarGroup","children","containerStyle","size","childAmount","React","Children","count","createElement","View","style","overflow","width","height","borderRadius","backgroundColor","renderAvatars","_React$Children$map","map","child","index","isValidElement","cloneElement","top","getTopPoint","start","getStartPoint","getWidthPoint","getHeightPoint","innerStart","getInnerStart","innerTop","getInnerTop","position","square","slice","_","total","idx","_default","exports"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype AvatarChildProps = {\n  size?: number;\n  square?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n}>;\nconst AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const renderAvatars = () => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) {\n          return React.cloneElement(child as React.ReactElement<AvatarChildProps>, { size, containerStyle });\n        }\n\n        const top = getTopPoint(index, childAmount) * size;\n        const start = getStartPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerStart = -getInnerStart(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>\n            {React.cloneElement(child as React.ReactElement<AvatarChildProps>, {\n              size,\n              square: true,\n              containerStyle: { start: innerStart, top: innerTop },\n            })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  };\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {renderAvatars()}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return 0;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getStartPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerStart = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/Avatar/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Text","_useUIKitTheme","e","__esModule","default","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","useUIKitTheme","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","React","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","start","renderRemainsCount","createElement","View","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection","_default","exports"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as ReactElement, {\n        size: actualSize,\n        containerStyle: {\n          start: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            start: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { start: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Text","_useUIKitTheme","e","__esModule","default","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","useUIKitTheme","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","React","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","start","renderRemainsCount","createElement","View","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection","_default","exports"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype AvatarChildProps = {\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as React.ReactElement<AvatarChildProps>, {\n        size: actualSize,\n        containerStyle: {\n          start: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            start: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { start: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/Button/index.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _Icon = _interopRequireDefault(require("../../components/Icon"));
 var _Text = _interopRequireDefault(require("../../components/Text"));
 var _createStyleSheet = _interopRequireDefault(require("../../styles/createStyleSheet"));
 var _useUIKitTheme = _interopRequireDefault(require("../../theme/useUIKitTheme"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Button = ({
   icon,
   variant = 'contained',
@@ -24,38 +25,32 @@ const Button = ({
   const {
     colors
   } = (0, _useUIKitTheme.default)();
+  const [pressed, setPressed] = (0, _react.useState)(false);
   const getStateColor = (pressed, disabled) => {
     const stateColors = colors.ui.button[variant];
     if (disabled) return stateColors.disabled;
     if (pressed) return stateColors.pressed;
     return stateColors.enabled;
   };
+  const stateColor = getStateColor(pressed, disabled);
   return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
     disabled: disabled,
     onPress: onPress,
-    style: ({
-      pressed
-    }) => {
-      const stateColor = getStateColor(pressed, disabled);
-      return [{
-        backgroundColor: buttonColor ?? stateColor.background
-      }, styles.container, style];
-    }
-  }, ({
-    pressed
-  }) => {
-    const stateColor = getStateColor(pressed, disabled);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      size: 24,
-      icon: icon,
-      color: contentColor ?? stateColor.content,
-      containerStyle: styles.icon
-    }), /*#__PURE__*/_react.default.createElement(_Text.default, {
-      button: true,
-      color: contentColor ?? stateColor.content,
-      style: styles.text
-    }, children));
-  });
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [{
+      backgroundColor: buttonColor ?? stateColor.background
+    }, styles.container, style]
+  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    size: 24,
+    icon: icon,
+    color: contentColor ?? stateColor.content,
+    containerStyle: styles.icon
+  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    button: true,
+    color: contentColor ?? stateColor.content,
+    style: styles.text
+  }, children));
 };
 const styles = (0, _createStyleSheet.default)({
   container: {

package/lib/commonjs/ui/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_Icon","_Text","_createStyleSheet","_useUIKitTheme","e","__esModule","default","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","useUIKitTheme","getStateColor","pressed","stateColors","ui","button","enabled","createElement","Pressable","stateColor","backgroundColor","background","styles","container","Fragment","size","color","content","containerStyle","text","createStyleSheet","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginEnd","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = React.PropsWithChildren<{\n  style?: StyleProp<ViewStyle>;\n  icon?: keyof typeof Icon.Assets;\n  variant?: 'contained' | 'text';\n  disabled?: boolean;\n  onPress?: () => void;\n  buttonColor?: string;\n  contentColor?: string;\n}>;\nconst Button = ({\n  icon,\n  variant = 'contained',\n  buttonColor,\n  contentColor,\n  disabled,\n  onPress,\n  style,\n  children,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const getStateColor = (pressed: boolean, disabled?: boolean) => {\n    const stateColors = colors.ui.button[variant];\n    if (disabled) return stateColors.disabled;\n    if (pressed) return stateColors.pressed;\n    return stateColors.enabled;\n  };\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={onPress}\n      style={({ pressed }) => {\n        const stateColor = getStateColor(pressed, disabled);\n        return [{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style];\n      }}\n    >\n      {({ pressed }) => {\n        const stateColor = getStateColor(pressed, disabled);\n\n        return (\n          <>\n            {icon && (\n              <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />\n            )}\n            <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n              {children}\n            </Text>\n          </>\n        );\n      }}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    padding: 8,\n    borderRadius: 4,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: { marginVertical: -4, marginEnd: 8 },\n  text: {},\n});\n\nexport default Button;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,iBAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,cAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAWtD,MAAMG,MAAM,GAAGA,CAAC;EACdC,IAAI;EACJC,OAAO,GAAG,WAAW;EACrBC,WAAW;EACXC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACK,CAAC,KAAK;EACX,MAAM;IAAEC;EAAO,CAAC,GAAG,IAAAC,sBAAa,EAAC,CAAC;EAElC,MAAMC,aAAa,GAAGA,CAACC,OAAgB,EAAEP,QAAkB,KAAK;IAC9D,MAAMQ,WAAW,GAAGJ,MAAM,CAACK,EAAE,CAACC,MAAM,CAACb,OAAO,CAAC;IAC7C,IAAIG,QAAQ,EAAE,OAAOQ,WAAW,CAACR,QAAQ;IACzC,IAAIO,OAAO,EAAE,OAAOC,WAAW,CAACD,OAAO;IACvC,OAAOC,WAAW,CAACG,OAAO;EAC5B,CAAC;EAED,oBACE3B,MAAA,CAAAU,OAAA,CAAAkB,aAAA,CAACzB,YAAA,CAAA0B,SAAS;IACRb,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA,CAAC;MAAEK;IAAQ,CAAC,KAAK;MACtB,MAAMO,UAAU,GAAGR,aAAa,CAACC,OAAO,EAAEP,QAAQ,CAAC;MACnD,OAAO,CAAC;QAAEe,eAAe,EAAEjB,WAAW,IAAIgB,UAAU,CAACE;MAAW,CAAC,EAAEC,MAAM,CAACC,SAAS,EAAEhB,KAAK,CAAC;IAC7F;EAAE,GAED,CAAC;IAAEK;EAAQ,CAAC,KAAK;IAChB,MAAMO,UAAU,GAAGR,aAAa,CAACC,OAAO,EAAEP,QAAQ,CAAC;IAEnD,oBACEhB,MAAA,CAAAU,OAAA,CAAAkB,aAAA,CAAA5B,MAAA,CAAAU,OAAA,CAAAyB,QAAA,QACGvB,IAAI,iBACHZ,MAAA,CAAAU,OAAA,CAAAkB,aAAA,CAACxB,KAAA,CAAAM,OAAI;MAAC0B,IAAI,EAAE,EAAG;MAACxB,IAAI,EAAEA,IAAK;MAACyB,KAAK,EAAEtB,YAAY,IAAIe,UAAU,CAACQ,OAAQ;MAACC,cAAc,EAAEN,MAAM,CAACrB;IAAK,CAAE,CACtG,eACDZ,MAAA,CAAAU,OAAA,CAAAkB,aAAA,CAACvB,KAAA,CAAAK,OAAI;MAACgB,MAAM;MAACW,KAAK,EAAEtB,YAAY,IAAIe,UAAU,CAACQ,OAAQ;MAACpB,KAAK,EAAEe,MAAM,CAACO;IAAK,GACxErB,QACG,CACN,CAAC;EAEP,CACS,CAAC;AAEhB,CAAC;AAED,MAAMc,MAAM,GAAG,IAAAQ,yBAAgB,EAAC;EAC9BP,SAAS,EAAE;IACTQ,aAAa,EAAE,KAAK;IACpBC,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDlC,IAAI,EAAE;IAAEmC,cAAc,EAAE,CAAC,CAAC;IAAEC,SAAS,EAAE;EAAE,CAAC;EAC1CR,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAxC,OAAA,GAEYC,MAAM","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_Icon","_interopRequireDefault","_Text","_createStyleSheet","_useUIKitTheme","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","useUIKitTheme","pressed","setPressed","useState","getStateColor","stateColors","ui","button","enabled","stateColor","createElement","Pressable","onPressIn","onPressOut","backgroundColor","background","styles","container","size","color","content","containerStyle","text","createStyleSheet","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginEnd","_default","exports"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = React.PropsWithChildren<{\n  style?: StyleProp<ViewStyle>;\n  icon?: keyof typeof Icon.Assets;\n  variant?: 'contained' | 'text';\n  disabled?: boolean;\n  onPress?: () => void;\n  buttonColor?: string;\n  contentColor?: string;\n}>;\nconst Button = ({\n  icon,\n  variant = 'contained',\n  buttonColor,\n  contentColor,\n  disabled,\n  onPress,\n  style,\n  children,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const [pressed, setPressed] = useState(false);\n\n  const getStateColor = (pressed: boolean, disabled?: boolean) => {\n    const stateColors = colors.ui.button[variant];\n    if (disabled) return stateColors.disabled;\n    if (pressed) return stateColors.pressed;\n    return stateColors.enabled;\n  };\n\n  const stateColor = getStateColor(pressed, disabled);\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style]}\n    >\n      {icon && <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />}\n      <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n        {children}\n      </Text>\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    padding: 8,\n    borderRadius: 4,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: { marginVertical: -4, marginEnd: 8 },\n  text: {},\n});\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ui/Dialog/index.js

@@ -22,8 +22,8 @@ const DialogProvider = ({
   children
 }) => {
   var _workingDialogJob$cur, _workingDialogJob$cur2, _defaultLabels$alert, _workingDialogJob$cur3, _defaultLabels$prompt, _defaultLabels$prompt2, _defaultLabels$prompt3, _workingDialogJob$cur4;
-  const waitDismissTimeout = (0, _react.useRef)();
-  const waitDismissPromise = (0, _react.useRef)();
+  const waitDismissTimeout = (0, _react.useRef)(undefined);
+  const waitDismissPromise = (0, _react.useRef)(undefined);
   const waitDismiss = (0, _react.useCallback)(resolver => {
     waitDismissPromise.current = resolver;
     waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);
@@ -36,7 +36,7 @@ const DialogProvider = ({
   }, []);
   const render = (0, _uikitUtils.useForceUpdate)();
   const dialogQueue = (0, _react.useRef)([]);
-  const workingDialogJob = (0, _react.useRef)();
+  const workingDialogJob = (0, _react.useRef)(undefined);
   const visibleState = (0, _react.useRef)(false);
   const isProcessing = () => Boolean(workingDialogJob.current);
   const updateToShow = (0, _react.useCallback)(() => {

package/lib/commonjs/ui/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_uikitUtils","_ActionMenu","_interopRequireDefault","_Alert","_BottomSheet","_Prompt","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AlertContext","React","createContext","ActionMenuContext","PromptContext","BottomSheetContext","DISMISS_TIMEOUT","DialogProvider","defaultLabels","children","_workingDialogJob$cur","_workingDialogJob$cur2","_defaultLabels$alert","_workingDialogJob$cur3","_defaultLabels$prompt","_defaultLabels$prompt2","_defaultLabels$prompt3","_workingDialogJob$cur4","waitDismissTimeout","useRef","waitDismissPromise","waitDismiss","useCallback","resolver","current","setTimeout","completeDismiss","clearTimeout","undefined","render","useForceUpdate","dialogQueue","workingDialogJob","visibleState","isProcessing","Boolean","updateToShow","updateToHide","Promise","resolve","consumeQueue","job","shift","createJob","type","props","jobItem","push","alert","openMenu","openPrompt","openSheet","createElement","Provider","value","onHide","onDismiss","visible","title","menuItems","message","buttons","text","ok","onSubmit","defaultValue","submitLabel","prompt","cancelLabel","cancel","placeholder","sheetItems","HeaderComponent","exports","useActionMenu","context","useContext","Error","useAlert","usePrompt","useBottomSheet"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { ActionMenuItem } from '../ActionMenu';\nimport ActionMenu from '../ActionMenu';\nimport type { AlertItem } from '../Alert';\nimport Alert from '../Alert';\nimport type { BottomSheetItem } from '../BottomSheet';\nimport BottomSheet from '../BottomSheet';\nimport type { PromptItem } from '../Prompt';\nimport Prompt from '../Prompt';\n\ntype DialogJob =\n  | {\n      type: 'ActionMenu';\n      props: ActionMenuItem;\n    }\n  | {\n      type: 'Alert';\n      props: AlertItem;\n    }\n  | {\n      type: 'Prompt';\n      props: PromptItem;\n    }\n  | {\n      type: 'BottomSheet';\n      props: BottomSheetItem;\n    };\n\ntype DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T; props: infer P }\n  ? P\n  : never;\n\ntype DialogContextType = {\n  openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;\n  alert: (props: DialogPropsBy<'Alert'>) => void;\n  openPrompt: (props: DialogPropsBy<'Prompt'>) => void;\n  openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;\n};\n\nconst AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);\nconst ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);\nconst PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);\nconst BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  defaultLabels?: {\n    alert?: { ok?: string };\n    prompt?: { placeholder?: string; ok?: string; cancel?: string };\n  };\n}>;\nconst DISMISS_TIMEOUT = 3000;\nexport const DialogProvider = ({ defaultLabels, children }: Props) => {\n  const waitDismissTimeout = useRef<NodeJS.Timeout>();\n  const waitDismissPromise = useRef<() => void>();\n  const waitDismiss = useCallback((resolver: () => void) => {\n    waitDismissPromise.current = resolver;\n    waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);\n  }, []);\n  const completeDismiss = useCallback(() => {\n    if (waitDismissTimeout.current) clearTimeout(waitDismissTimeout.current);\n    if (waitDismissPromise.current) waitDismissPromise.current();\n    waitDismissTimeout.current = undefined;\n    waitDismissPromise.current = undefined;\n  }, []);\n\n  const render = useForceUpdate();\n  const dialogQueue = useRef<DialogJob[]>([]);\n  const workingDialogJob = useRef<DialogJob>();\n  const visibleState = useRef(false);\n\n  const isProcessing = () => Boolean(workingDialogJob.current);\n  const updateToShow = useCallback(() => {\n    visibleState.current = true;\n    render();\n  }, []);\n  const updateToHide = useCallback((): Promise<void> => {\n    return new Promise((resolve) => {\n      visibleState.current = false;\n      render();\n      waitDismiss(resolve);\n    });\n  }, []);\n  const consumeQueue = useCallback(() => {\n    completeDismiss();\n    const job = dialogQueue.current.shift();\n    if (job) {\n      workingDialogJob.current = job;\n      updateToShow();\n    } else {\n      workingDialogJob.current = undefined;\n    }\n  }, []);\n\n  const createJob =\n    <T extends DialogJob['type']>(type: T) =>\n    (props: DialogPropsBy<T>) => {\n      const jobItem = { type, props } as DialogJob;\n      if (isProcessing()) dialogQueue.current.push(jobItem);\n      else {\n        workingDialogJob.current = jobItem;\n        updateToShow();\n      }\n    };\n\n  const alert = useCallback(createJob('Alert'), []);\n  const openMenu = useCallback(createJob('ActionMenu'), []);\n  const openPrompt = useCallback(createJob('Prompt'), []);\n  const openSheet = useCallback(createJob('BottomSheet'), []);\n\n  return (\n    <AlertContext.Provider value={{ alert }}>\n      <ActionMenuContext.Provider value={{ openMenu }}>\n        <PromptContext.Provider value={{ openPrompt }}>\n          <BottomSheetContext.Provider value={{ openSheet }}>\n            {children}\n            {workingDialogJob.current?.type === 'ActionMenu' && (\n              <ActionMenu\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                menuItems={workingDialogJob.current.props.menuItems}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Alert' && (\n              <Alert\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                message={workingDialogJob.current.props.message}\n                buttons={workingDialogJob.current.props.buttons ?? [{ text: defaultLabels?.alert?.ok || 'OK' }]}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Prompt' && (\n              <Prompt\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                onSubmit={workingDialogJob.current.props.onSubmit}\n                defaultValue={workingDialogJob.current.props.defaultValue}\n                submitLabel={workingDialogJob.current.props.submitLabel ?? defaultLabels?.prompt?.ok}\n                cancelLabel={workingDialogJob.current.props.cancelLabel ?? defaultLabels?.prompt?.cancel}\n                placeholder={workingDialogJob.current.props.placeholder ?? defaultLabels?.prompt?.placeholder}\n              />\n            )}\n            {workingDialogJob.current?.type === 'BottomSheet' && (\n              <BottomSheet\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                sheetItems={workingDialogJob.current.props.sheetItems}\n                HeaderComponent={workingDialogJob.current.props.HeaderComponent}\n              />\n            )}\n          </BottomSheetContext.Provider>\n        </PromptContext.Provider>\n      </ActionMenuContext.Provider>\n    </AlertContext.Provider>\n  );\n};\n\nexport const useActionMenu = () => {\n  const context = useContext(ActionMenuContext);\n  if (!context) throw new Error('ActionMenuContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useAlert = () => {\n  const context = useContext(AlertContext);\n  if (!context) throw new Error('AlertContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const usePrompt = () => {\n  const context = useContext(PromptContext);\n  if (!context) throw new Error('PromptContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useBottomSheet = () => {\n  const context = useContext(BottomSheetContext);\n  if (!context) throw new Error('BottomSheetContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_uikitUtils","_ActionMenu","_interopRequireDefault","_Alert","_BottomSheet","_Prompt","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AlertContext","React","createContext","ActionMenuContext","PromptContext","BottomSheetContext","DISMISS_TIMEOUT","DialogProvider","defaultLabels","children","_workingDialogJob$cur","_workingDialogJob$cur2","_defaultLabels$alert","_workingDialogJob$cur3","_defaultLabels$prompt","_defaultLabels$prompt2","_defaultLabels$prompt3","_workingDialogJob$cur4","waitDismissTimeout","useRef","undefined","waitDismissPromise","waitDismiss","useCallback","resolver","current","setTimeout","completeDismiss","clearTimeout","render","useForceUpdate","dialogQueue","workingDialogJob","visibleState","isProcessing","Boolean","updateToShow","updateToHide","Promise","resolve","consumeQueue","job","shift","createJob","type","props","jobItem","push","alert","openMenu","openPrompt","openSheet","createElement","Provider","value","onHide","onDismiss","visible","title","menuItems","message","buttons","text","ok","onSubmit","defaultValue","submitLabel","prompt","cancelLabel","cancel","placeholder","sheetItems","HeaderComponent","exports","useActionMenu","context","useContext","Error","useAlert","usePrompt","useBottomSheet"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { ActionMenuItem } from '../ActionMenu';\nimport ActionMenu from '../ActionMenu';\nimport type { AlertItem } from '../Alert';\nimport Alert from '../Alert';\nimport type { BottomSheetItem } from '../BottomSheet';\nimport BottomSheet from '../BottomSheet';\nimport type { PromptItem } from '../Prompt';\nimport Prompt from '../Prompt';\n\ntype DialogJob =\n  | {\n      type: 'ActionMenu';\n      props: ActionMenuItem;\n    }\n  | {\n      type: 'Alert';\n      props: AlertItem;\n    }\n  | {\n      type: 'Prompt';\n      props: PromptItem;\n    }\n  | {\n      type: 'BottomSheet';\n      props: BottomSheetItem;\n    };\n\ntype DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T; props: infer P }\n  ? P\n  : never;\n\ntype DialogContextType = {\n  openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;\n  alert: (props: DialogPropsBy<'Alert'>) => void;\n  openPrompt: (props: DialogPropsBy<'Prompt'>) => void;\n  openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;\n};\n\nconst AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);\nconst ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);\nconst PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);\nconst BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  defaultLabels?: {\n    alert?: { ok?: string };\n    prompt?: { placeholder?: string; ok?: string; cancel?: string };\n  };\n}>;\nconst DISMISS_TIMEOUT = 3000;\nexport const DialogProvider = ({ defaultLabels, children }: Props) => {\n  const waitDismissTimeout = useRef<NodeJS.Timeout | undefined>(undefined);\n  const waitDismissPromise = useRef<(() => void) | undefined>(undefined);\n  const waitDismiss = useCallback((resolver: () => void) => {\n    waitDismissPromise.current = resolver;\n    waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);\n  }, []);\n  const completeDismiss = useCallback(() => {\n    if (waitDismissTimeout.current) clearTimeout(waitDismissTimeout.current);\n    if (waitDismissPromise.current) waitDismissPromise.current();\n    waitDismissTimeout.current = undefined;\n    waitDismissPromise.current = undefined;\n  }, []);\n\n  const render = useForceUpdate();\n  const dialogQueue = useRef<DialogJob[]>([]);\n  const workingDialogJob = useRef<DialogJob | undefined>(undefined);\n  const visibleState = useRef(false);\n\n  const isProcessing = () => Boolean(workingDialogJob.current);\n  const updateToShow = useCallback(() => {\n    visibleState.current = true;\n    render();\n  }, []);\n  const updateToHide = useCallback((): Promise<void> => {\n    return new Promise((resolve) => {\n      visibleState.current = false;\n      render();\n      waitDismiss(resolve);\n    });\n  }, []);\n  const consumeQueue = useCallback(() => {\n    completeDismiss();\n    const job = dialogQueue.current.shift();\n    if (job) {\n      workingDialogJob.current = job;\n      updateToShow();\n    } else {\n      workingDialogJob.current = undefined;\n    }\n  }, []);\n\n  const createJob =\n    <T extends DialogJob['type']>(type: T) =>\n    (props: DialogPropsBy<T>) => {\n      const jobItem = { type, props } as DialogJob;\n      if (isProcessing()) dialogQueue.current.push(jobItem);\n      else {\n        workingDialogJob.current = jobItem;\n        updateToShow();\n      }\n    };\n\n  const alert = useCallback(createJob('Alert'), []);\n  const openMenu = useCallback(createJob('ActionMenu'), []);\n  const openPrompt = useCallback(createJob('Prompt'), []);\n  const openSheet = useCallback(createJob('BottomSheet'), []);\n\n  return (\n    <AlertContext.Provider value={{ alert }}>\n      <ActionMenuContext.Provider value={{ openMenu }}>\n        <PromptContext.Provider value={{ openPrompt }}>\n          <BottomSheetContext.Provider value={{ openSheet }}>\n            {children}\n            {workingDialogJob.current?.type === 'ActionMenu' && (\n              <ActionMenu\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                menuItems={workingDialogJob.current.props.menuItems}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Alert' && (\n              <Alert\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                message={workingDialogJob.current.props.message}\n                buttons={workingDialogJob.current.props.buttons ?? [{ text: defaultLabels?.alert?.ok || 'OK' }]}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Prompt' && (\n              <Prompt\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                onSubmit={workingDialogJob.current.props.onSubmit}\n                defaultValue={workingDialogJob.current.props.defaultValue}\n                submitLabel={workingDialogJob.current.props.submitLabel ?? defaultLabels?.prompt?.ok}\n                cancelLabel={workingDialogJob.current.props.cancelLabel ?? defaultLabels?.prompt?.cancel}\n                placeholder={workingDialogJob.current.props.placeholder ?? defaultLabels?.prompt?.placeholder}\n              />\n            )}\n            {workingDialogJob.current?.type === 'BottomSheet' && (\n              <BottomSheet\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                sheetItems={workingDialogJob.current.props.sheetItems}\n                HeaderComponent={workingDialogJob.current.props.HeaderComponent}\n              />\n            )}\n          </BottomSheetContext.Provider>\n        </PromptContext.Provider>\n      </ActionMenuContext.Provider>\n    </AlertContext.Provider>\n  );\n};\n\nexport const useActionMenu = () => {\n  const context = useContext(ActionMenuContext);\n  if (!context) throw new Error('ActionMenuContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useAlert = () => {\n  const context = useContext(AlertContext);\n  if (!context) throw new Error('AlertContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const usePrompt = () => {\n  const context = useContext(PromptContext);\n  if (!context) throw new Error('PromptContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useBottomSheet = () => {\n  const context = useContext(BottomSheetContext);\n  if (!context) throw new Error('BottomSheetContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ImageWithPlaceholder/index.js

@@ -11,7 +11,7 @@ const useRetry = (hasError, retryCount = 5) => {
   if (Platform.OS === 'android') return '';
   const forceUpdate = useForceUpdate();
   const retryCountRef = useRef(1);
-  const retryTimeoutRef = useRef();
+  const retryTimeoutRef = useRef(undefined);
   useEffect(() => {
     if (hasError) {
       const reloadReservation = () => {

package/lib/module/components/ImageWithPlaceholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","useForceUpdate","createStyleSheet","useUIKitTheme","Box","Icon","Image","useRetry","hasError","retryCount","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageWithPlaceholder","props","palette","select","colors","imageNotFound","setImageNotFound","key","createElement","style","overflow","width","height","backgroundColor","dark","background400","light","background100","source","absoluteFill","styles","hide","resizeMode","resizeMethod","onError","onLoad","containerStyle","icon","size","color","onBackground02","display"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Image from '../Image';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  // NOTE: Glide(fast-image) will retry automatically on Android\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\ntype Props = {\n  source: number | { uri: string };\n  width?: number | `${number}%`;\n  height?: number | `${number}%`;\n  style?: StyleProp<ViewStyle>;\n};\nconst ImageWithPlaceholder = (props: Props) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const key = useRetry(imageNotFound);\n  return (\n    <Box\n      style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}\n      backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n    >\n      <Image\n        key={key}\n        source={props.source}\n        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setImageNotFound(true)}\n        onLoad={() => setImageNotFound(false)}\n      />\n      {imageNotFound && (\n        <Icon\n          containerStyle={StyleSheet.absoluteFill}\n          icon={'thumbnail-none'}\n          size={48}\n          color={colors.onBackground02}\n        />\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageWithPlaceholder;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","useForceUpdate","createStyleSheet","useUIKitTheme","Box","Icon","Image","useRetry","hasError","retryCount","OS","forceUpdate","retryCountRef","retryTimeoutRef","undefined","reloadReservation","current","setTimeout","clearTimeout","ImageWithPlaceholder","props","palette","select","colors","imageNotFound","setImageNotFound","key","createElement","style","overflow","width","height","backgroundColor","dark","background400","light","background100","source","absoluteFill","styles","hide","resizeMode","resizeMethod","onError","onLoad","containerStyle","icon","size","color","onBackground02","display"],"sources":["index.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleProp, StyleSheet, ViewStyle } from 'react-native';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Box from '../Box';\nimport Icon from '../Icon';\nimport Image from '../Image';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  // NOTE: Glide(fast-image) will retry automatically on Android\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\ntype Props = {\n  source: number | { uri: string };\n  width?: number | `${number}%`;\n  height?: number | `${number}%`;\n  style?: StyleProp<ViewStyle>;\n};\nconst ImageWithPlaceholder = (props: Props) => {\n  const { palette, select, colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const key = useRetry(imageNotFound);\n  return (\n    <Box\n      style={[{ overflow: 'hidden', width: props.width, height: props.height }, props.style]}\n      backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n    >\n      <Image\n        key={key}\n        source={props.source}\n        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setImageNotFound(true)}\n        onLoad={() => setImageNotFound(false)}\n      />\n      {imageNotFound && (\n        <Icon\n          containerStyle={StyleSheet.absoluteFill}\n          icon={'thumbnail-none'}\n          size={48}\n          color={colors.onBackground02}\n        />\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageWithPlaceholder;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/components/PressBox/index.js

@@ -10,12 +10,20 @@ const PressBox = props => {
 };
 const PressBoxWithPressable = ({
   children,
+  style,
   ...props
 }) => {
+  const [pressed, setPressed] = useState(false);
+  const state = {
+    pressed
+  };
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     disabled: !props.onPress && !props.onLongPress,
-    delayLongPress: DEFAULT_LONG_PRESS_DELAY
-  }, props), state => isFunction(children) ? children(state) : children);
+    delayLongPress: DEFAULT_LONG_PRESS_DELAY,
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: isFunction(style) ? style(state) : style
+  }, props), isFunction(children) ? children(state) : children);
 };
 const PressBoxWithTouchableOpacity = ({
   children,

package/lib/module/components/PressBox/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","_extends","disabled","onPress","onLongPress","delayLongPress","state","style","pressed","setPressed","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, ...props }: Props) => {\n  return (\n    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>\n      {(state) => (isFunction(children) ? children(state) : children)}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAiBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAQ,CAAC;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAQ,CAAC;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGA,CAAC;EAAEC,QAAQ;EAAE,GAAGL;AAAa,CAAC,KAAK;EAC/D,oBACEP,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAW,QAAA;IAACC,QAAQ,EAAE,CAACP,KAAK,CAACQ,OAAO,IAAI,CAACR,KAAK,CAACS,WAAY;IAACC,cAAc,EAAEZ;EAAyB,GAAKE,KAAK,GAC1GW,KAAK,IAAMd,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAC7C,CAAC;AAEhB,CAAC;AAED,MAAMF,4BAA4B,GAAGA,CAAC;EAAEE,QAAQ;EAAEO,KAAK;EAAE,GAAGZ;AAAa,CAAC,KAAK;EAC7E,MAAM,CAACa,OAAO,EAAEC,UAAU,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMiB,KAA0B,GAAG;IAAEE;EAAQ,CAAC;EAC9C,oBACEpB,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAU,QAAA;IACfC,QAAQ,EAAE,CAACP,KAAK,CAACQ,OAAO,IAAI,CAACR,KAAK,CAACS,WAAY;IAC/CC,cAAc,EAAEZ,wBAAyB;IACzCc,KAAK,EAAEf,UAAU,CAACe,KAAK,CAAC,GAAGA,KAAK,CAACD,KAAK,CAAC,GAAGC,KAAM;IAChDG,SAAS,EAAEA,CAAA,KAAMD,UAAU,CAAC,IAAI,CAAE;IAClCE,UAAU,EAAEA,CAAA,KAAMF,UAAU,CAAC,KAAK;EAAE,GAChCd,KAAK,GAERH,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACM,KAAK,CAAC,GAAGN,QAC1B,CAAC;AAEvB,CAAC;AAED,eAAeN,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","useState","Pressable","TouchableOpacity","isFunction","DEFAULT_LONG_PRESS_DELAY","PressBox","props","activeOpacity","createElement","PressBoxWithTouchableOpacity","PressBoxWithPressable","children","style","pressed","setPressed","state","_extends","disabled","onPress","onLongPress","delayLongPress","onPressIn","onPressOut"],"sources":["index.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useState } from 'react';\nimport type { GestureResponderEvent, StyleProp, ViewProps, ViewStyle } from 'react-native';\nimport { Pressable, TouchableOpacity } from 'react-native';\n\nimport { isFunction } from '@sendbird/uikit-utils';\n\ntype PressBoxStateParams = {\n  pressed: boolean;\n};\n\ntype Props = {\n  disabled?: boolean;\n  onPress?: (event: GestureResponderEvent) => void;\n  onLongPress?: (event: GestureResponderEvent) => void;\n  delayLongPress?: number;\n  activeOpacity?: number;\n  style?: StyleProp<ViewStyle> | ((state: PressBoxStateParams) => StyleProp<ViewStyle>);\n  hitSlop?: ViewProps['hitSlop'];\n  children?: React.ReactNode | ((params: PressBoxStateParams) => React.ReactNode);\n};\n\nexport const DEFAULT_LONG_PRESS_DELAY = 350;\n\nconst PressBox = (props: Props) => {\n  if (props.activeOpacity && props.activeOpacity < 1) return <PressBoxWithTouchableOpacity {...props} />;\n  return <PressBoxWithPressable {...props} />;\n};\n\nconst PressBoxWithPressable = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <Pressable\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={isFunction(style) ? style(state) : style}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </Pressable>\n  );\n};\n\nconst PressBoxWithTouchableOpacity = ({ children, style, ...props }: Props) => {\n  const [pressed, setPressed] = useState(false);\n  const state: PressBoxStateParams = { pressed };\n  return (\n    <TouchableOpacity\n      disabled={!props.onPress && !props.onLongPress}\n      delayLongPress={DEFAULT_LONG_PRESS_DELAY}\n      style={isFunction(style) ? style(state) : style}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      {...props}\n    >\n      {isFunction(children) ? children(state) : children}\n    </TouchableOpacity>\n  );\n};\n\nexport default PressBox;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,OAAO;AAEhC,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAE1D,SAASC,UAAU,QAAQ,uBAAuB;AAiBlD,OAAO,MAAMC,wBAAwB,GAAG,GAAG;AAE3C,MAAMC,QAAQ,GAAIC,KAAY,IAAK;EACjC,IAAIA,KAAK,CAACC,aAAa,IAAID,KAAK,CAACC,aAAa,GAAG,CAAC,EAAE,oBAAOR,KAAA,CAAAS,aAAA,CAACC,4BAA4B,EAAKH,KAAQ,CAAC;EACtG,oBAAOP,KAAA,CAAAS,aAAA,CAACE,qBAAqB,EAAKJ,KAAQ,CAAC;AAC7C,CAAC;AAED,MAAMI,qBAAqB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGN;AAAa,CAAC,KAAK;EACtE,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMe,KAA0B,GAAG;IAAEF;EAAQ,CAAC;EAC9C,oBACEd,KAAA,CAAAS,aAAA,CAACP,SAAS,EAAAe,QAAA;IACRC,QAAQ,EAAE,CAACX,KAAK,CAACY,OAAO,IAAI,CAACZ,KAAK,CAACa,WAAY;IAC/CC,cAAc,EAAEhB,wBAAyB;IACzCiB,SAAS,EAAEA,CAAA,KAAMP,UAAU,CAAC,IAAI,CAAE;IAClCQ,UAAU,EAAEA,CAAA,KAAMR,UAAU,CAAC,KAAK,CAAE;IACpCF,KAAK,EAAET,UAAU,CAACS,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAAC,GAAGH;EAAM,GAC5CN,KAAK,GAERH,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACI,KAAK,CAAC,GAAGJ,QACjC,CAAC;AAEhB,CAAC;AAED,MAAMF,4BAA4B,GAAGA,CAAC;EAAEE,QAAQ;EAAEC,KAAK;EAAE,GAAGN;AAAa,CAAC,KAAK;EAC7E,MAAM,CAACO,OAAO,EAAEC,UAAU,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAMe,KAA0B,GAAG;IAAEF;EAAQ,CAAC;EAC9C,oBACEd,KAAA,CAAAS,aAAA,CAACN,gBAAgB,EAAAc,QAAA;IACfC,QAAQ,EAAE,CAACX,KAAK,CAACY,OAAO,IAAI,CAACZ,KAAK,CAACa,WAAY;IAC/CC,cAAc,EAAEhB,wBAAyB;IACzCQ,KAAK,EAAET,UAAU,CAACS,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAAC,GAAGH,KAAM;IAChDS,SAAS,EAAEA,CAAA,KAAMP,UAAU,CAAC,IAAI,CAAE;IAClCQ,UAAU,EAAEA,CAAA,KAAMR,UAAU,CAAC,KAAK;EAAE,GAChCR,KAAK,GAERH,UAAU,CAACQ,QAAQ,CAAC,GAAGA,QAAQ,CAACI,KAAK,CAAC,GAAGJ,QAC1B,CAAC;AAEvB,CAAC;AAED,eAAeN,QAAQ","ignoreList":[]}

package/lib/module/ui/Avatar/AvatarGroup.js

@@ -23,10 +23,12 @@ const AvatarGroup = ({
     return ((_React$Children$map = React.Children.map(children, (child, index) => {
       if (index + 1 > MAX) return child;
       if (! /*#__PURE__*/React.isValidElement(child)) return child;
-      if (childAmount === 1) return /*#__PURE__*/React.cloneElement(child, {
-        size,
-        containerStyle
-      });
+      if (childAmount === 1) {
+        return /*#__PURE__*/React.cloneElement(child, {
+          size,
+          containerStyle
+        });
+      }
       const top = getTopPoint(index, childAmount) * size;
       const start = getStartPoint(index) * size;
       const width = getWidthPoint(index, childAmount) * size;

package/lib/module/ui/Avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","MAX","AvatarGroup","children","containerStyle","size","childAmount","Children","count","createElement","style","overflow","width","height","borderRadius","backgroundColor","renderAvatars","_React$Children$map","map","child","index","isValidElement","cloneElement","top","getTopPoint","start","getStartPoint","getWidthPoint","getHeightPoint","innerStart","getInnerStart","innerTop","getInnerTop","position","square","slice","_","total","idx"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n}>;\nconst AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const renderAvatars = () => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });\n\n        const top = getTopPoint(index, childAmount) * size;\n        const start = getStartPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerStart = -getInnerStart(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>\n            {React.cloneElement(child as ReactElement, {\n              size,\n              square: true,\n              containerStyle: { start: innerStart, top: innerTop },\n            })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  };\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {renderAvatars()}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return 0;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getStartPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerStart = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","MAX","AvatarGroup","children","containerStyle","size","childAmount","Children","count","createElement","style","overflow","width","height","borderRadius","backgroundColor","renderAvatars","_React$Children$map","map","child","index","isValidElement","cloneElement","top","getTopPoint","start","getStartPoint","getWidthPoint","getHeightPoint","innerStart","getInnerStart","innerTop","getInnerTop","position","square","slice","_","total","idx"],"sources":["AvatarGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nconst MAX = 4;\n\ntype AvatarChildProps = {\n  size?: number;\n  square?: boolean;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n}>;\nconst AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {\n  const childAmount = React.Children.count(children);\n\n  if (childAmount === 0) {\n    return (\n      <View\n        style={[\n          containerStyle,\n          {\n            overflow: 'hidden',\n            width: size,\n            height: size,\n            borderRadius: size,\n            backgroundColor: 'rgba(120,120,120,0.2)',\n          },\n        ]}\n      />\n    );\n  }\n\n  const renderAvatars = () => {\n    return (\n      React.Children.map(children, (child, index) => {\n        if (index + 1 > MAX) return child;\n        if (!React.isValidElement(child)) return child;\n\n        if (childAmount === 1) {\n          return React.cloneElement(child as React.ReactElement<AvatarChildProps>, { size, containerStyle });\n        }\n\n        const top = getTopPoint(index, childAmount) * size;\n        const start = getStartPoint(index) * size;\n        const width = getWidthPoint(index, childAmount) * size;\n        const height = getHeightPoint(index, childAmount) * size;\n        const innerStart = -getInnerStart(index, childAmount) * size;\n        const innerTop = -getInnerTop(childAmount) * size;\n\n        return (\n          <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>\n            {React.cloneElement(child as React.ReactElement<AvatarChildProps>, {\n              size,\n              square: true,\n              containerStyle: { start: innerStart, top: innerTop },\n            })}\n          </View>\n        );\n      })?.slice(0, 4) ?? []\n    );\n  };\n\n  return (\n    <View style={[containerStyle, { overflow: 'hidden', width: size, height: size, borderRadius: size }]}>\n      {renderAvatars()}\n    </View>\n  );\n};\n\nconst getHeightPoint = (_: number, total: number) => {\n  if (total === 2) return 1;\n  return 0.5;\n};\nconst getWidthPoint = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 1;\n  return 0.5;\n};\nconst getTopPoint = (idx: number, total: number) => {\n  if (total === 2) return 0;\n  if (total === 3 && idx === 0) return -0.025;\n  if (total === 3 && idx !== 0) return 0.525;\n  if (idx === 0 || idx === 1) return -0.025;\n  return 0.525;\n};\nconst getStartPoint = (idx: number) => {\n  if (idx === 0 || idx === 2) return -0.025;\n  return 0.525;\n};\nconst getInnerStart = (idx: number, total: number) => {\n  if (total === 3 && idx === 0) return 0;\n  return 0.25;\n};\nconst getInnerTop = (total: number) => {\n  if (total === 2) return 0;\n  return 0.25;\n};\n\nexport default AvatarGroup;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/Avatar/AvatarStack.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","useUIKitTheme","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","start","renderRemainsCount","createElement","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as ReactElement, {\n        size: actualSize,\n        containerStyle: {\n          start: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            start: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { start: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","View","Text","useUIKitTheme","DEFAULT_MAX","DEFAULT_BORDER_WIDTH","DEFAULT_AVATAR_GAP","DEFAULT_AVATAR_SIZE","DEFAULT_REMAINS_MAX","AvatarStack","children","containerStyle","styles","maxAvatar","size","avatarGap","colors","palette","select","defaultStyles","borderWidth","borderColor","background","remainsTextColor","onBackground02","remainsBackgroundColor","light","background100","dark","background600","avatarStyles","childrenArray","Children","toArray","filter","it","isValidElement","remains","length","shouldRenderRemains","actualSize","actualGap","renderAvatars","slice","map","child","index","cloneElement","start","renderRemainsCount","createElement","style","width","height","borderRadius","alignItems","justifyContent","backgroundColor","color","fontSize","caption4","Math","min","calculateWidth","widthEach","avatarCountOffset","avatarCount","count","flexDirection"],"sources":["AvatarStack.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype AvatarChildProps = {\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n};\n\nconst DEFAULT_MAX = 3;\nconst DEFAULT_BORDER_WIDTH = 2;\nconst DEFAULT_AVATAR_GAP = -4;\nconst DEFAULT_AVATAR_SIZE = 26;\nconst DEFAULT_REMAINS_MAX = 99;\n\ntype Props = React.PropsWithChildren<{\n  size?: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  maxAvatar?: number;\n  avatarGap?: number;\n  styles?: {\n    borderWidth?: number;\n    borderColor?: string;\n    remainsTextColor?: string;\n    remainsBackgroundColor?: string;\n  };\n}>;\n\nconst AvatarStack = ({\n  children,\n  containerStyle,\n  styles,\n  maxAvatar = DEFAULT_MAX,\n  size = DEFAULT_AVATAR_SIZE,\n  avatarGap = DEFAULT_AVATAR_GAP,\n}: Props) => {\n  const { colors, palette, select } = useUIKitTheme();\n  const defaultStyles = {\n    borderWidth: DEFAULT_BORDER_WIDTH,\n    borderColor: colors.background,\n    remainsTextColor: colors.onBackground02,\n    remainsBackgroundColor: select({ light: palette.background100, dark: palette.background600 }),\n  };\n  const avatarStyles = { ...defaultStyles, ...styles };\n\n  const childrenArray = React.Children.toArray(children).filter((it) => React.isValidElement(it));\n  const remains = childrenArray.length - maxAvatar;\n  const shouldRenderRemains = remains > 0;\n\n  const actualSize = size + avatarStyles.borderWidth * 2;\n  const actualGap = avatarGap - avatarStyles.borderWidth;\n\n  const renderAvatars = () => {\n    return childrenArray.slice(0, maxAvatar).map((child, index) =>\n      React.cloneElement(child as React.ReactElement<AvatarChildProps>, {\n        size: actualSize,\n        containerStyle: {\n          start: actualGap * index,\n          borderWidth: avatarStyles.borderWidth,\n          borderColor: avatarStyles.borderColor,\n        },\n      }),\n    );\n  };\n\n  const renderRemainsCount = () => {\n    if (!shouldRenderRemains) return null;\n    return (\n      <View\n        style={[\n          avatarStyles,\n          {\n            start: actualGap * maxAvatar,\n            width: actualSize,\n            height: actualSize,\n            borderRadius: actualSize / 2,\n            alignItems: 'center',\n            justifyContent: 'center',\n            backgroundColor: avatarStyles.remainsBackgroundColor,\n          },\n        ]}\n      >\n        <Text style={{ color: avatarStyles.remainsTextColor, fontSize: 8 }} caption4>\n          {`+${Math.min(remains, DEFAULT_REMAINS_MAX)}`}\n        </Text>\n      </View>\n    );\n  };\n\n  const calculateWidth = () => {\n    const widthEach = actualSize + actualGap;\n    const avatarCountOffset = shouldRenderRemains ? 1 : 0;\n    const avatarCount = shouldRenderRemains ? maxAvatar : childrenArray.length;\n    const count = avatarCount + avatarCountOffset;\n    return widthEach * count + avatarStyles.borderWidth;\n  };\n\n  return (\n    <View style={[containerStyle, { start: -avatarStyles.borderWidth, flexDirection: 'row', width: calculateWidth() }]}>\n      {renderAvatars()}\n      {renderRemainsCount()}\n    </View>\n  );\n};\n\nexport default AvatarStack;\n"],"mappings":"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","ignoreList":[]}

package/lib/module/ui/Button/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Pressable } from 'react-native';
 import Icon from '../../components/Icon';
 import Text from '../../components/Text';
@@ -17,38 +17,32 @@ const Button = ({
   const {
     colors
   } = useUIKitTheme();
+  const [pressed, setPressed] = useState(false);
   const getStateColor = (pressed, disabled) => {
     const stateColors = colors.ui.button[variant];
     if (disabled) return stateColors.disabled;
     if (pressed) return stateColors.pressed;
     return stateColors.enabled;
   };
+  const stateColor = getStateColor(pressed, disabled);
   return /*#__PURE__*/React.createElement(Pressable, {
     disabled: disabled,
     onPress: onPress,
-    style: ({
-      pressed
-    }) => {
-      const stateColor = getStateColor(pressed, disabled);
-      return [{
-        backgroundColor: buttonColor ?? stateColor.background
-      }, styles.container, style];
-    }
-  }, ({
-    pressed
-  }) => {
-    const stateColor = getStateColor(pressed, disabled);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement(Icon, {
-      size: 24,
-      icon: icon,
-      color: contentColor ?? stateColor.content,
-      containerStyle: styles.icon
-    }), /*#__PURE__*/React.createElement(Text, {
-      button: true,
-      color: contentColor ?? stateColor.content,
-      style: styles.text
-    }, children));
-  });
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: [{
+      backgroundColor: buttonColor ?? stateColor.background
+    }, styles.container, style]
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    size: 24,
+    icon: icon,
+    color: contentColor ?? stateColor.content,
+    containerStyle: styles.icon
+  }), /*#__PURE__*/React.createElement(Text, {
+    button: true,
+    color: contentColor ?? stateColor.content,
+    style: styles.text
+  }, children));
 };
 const styles = createStyleSheet({
   container: {

package/lib/module/ui/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","Icon","Text","createStyleSheet","useUIKitTheme","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","getStateColor","pressed","stateColors","ui","button","enabled","createElement","stateColor","backgroundColor","background","styles","container","Fragment","size","color","content","containerStyle","text","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginEnd"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = React.PropsWithChildren<{\n  style?: StyleProp<ViewStyle>;\n  icon?: keyof typeof Icon.Assets;\n  variant?: 'contained' | 'text';\n  disabled?: boolean;\n  onPress?: () => void;\n  buttonColor?: string;\n  contentColor?: string;\n}>;\nconst Button = ({\n  icon,\n  variant = 'contained',\n  buttonColor,\n  contentColor,\n  disabled,\n  onPress,\n  style,\n  children,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n\n  const getStateColor = (pressed: boolean, disabled?: boolean) => {\n    const stateColors = colors.ui.button[variant];\n    if (disabled) return stateColors.disabled;\n    if (pressed) return stateColors.pressed;\n    return stateColors.enabled;\n  };\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={onPress}\n      style={({ pressed }) => {\n        const stateColor = getStateColor(pressed, disabled);\n        return [{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style];\n      }}\n    >\n      {({ pressed }) => {\n        const stateColor = getStateColor(pressed, disabled);\n\n        return (\n          <>\n            {icon && (\n              <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />\n            )}\n            <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n              {children}\n            </Text>\n          </>\n        );\n      }}\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    padding: 8,\n    borderRadius: 4,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: { marginVertical: -4, marginEnd: 8 },\n  text: {},\n});\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAA8B,cAAc;AAE9D,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAWrD,MAAMC,MAAM,GAAGA,CAAC;EACdC,IAAI;EACJC,OAAO,GAAG,WAAW;EACrBC,WAAW;EACXC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACK,CAAC,KAAK;EACX,MAAM;IAAEC;EAAO,CAAC,GAAGV,aAAa,CAAC,CAAC;EAElC,MAAMW,aAAa,GAAGA,CAACC,OAAgB,EAAEN,QAAkB,KAAK;IAC9D,MAAMO,WAAW,GAAGH,MAAM,CAACI,EAAE,CAACC,MAAM,CAACZ,OAAO,CAAC;IAC7C,IAAIG,QAAQ,EAAE,OAAOO,WAAW,CAACP,QAAQ;IACzC,IAAIM,OAAO,EAAE,OAAOC,WAAW,CAACD,OAAO;IACvC,OAAOC,WAAW,CAACG,OAAO;EAC5B,CAAC;EAED,oBACErB,KAAA,CAAAsB,aAAA,CAACrB,SAAS;IACRU,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA,CAAC;MAAEI;IAAQ,CAAC,KAAK;MACtB,MAAMM,UAAU,GAAGP,aAAa,CAACC,OAAO,EAAEN,QAAQ,CAAC;MACnD,OAAO,CAAC;QAAEa,eAAe,EAAEf,WAAW,IAAIc,UAAU,CAACE;MAAW,CAAC,EAAEC,MAAM,CAACC,SAAS,EAAEd,KAAK,CAAC;IAC7F;EAAE,GAED,CAAC;IAAEI;EAAQ,CAAC,KAAK;IAChB,MAAMM,UAAU,GAAGP,aAAa,CAACC,OAAO,EAAEN,QAAQ,CAAC;IAEnD,oBACEX,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAA4B,QAAA,QACGrB,IAAI,iBACHP,KAAA,CAAAsB,aAAA,CAACpB,IAAI;MAAC2B,IAAI,EAAE,EAAG;MAACtB,IAAI,EAAEA,IAAK;MAACuB,KAAK,EAAEpB,YAAY,IAAIa,UAAU,CAACQ,OAAQ;MAACC,cAAc,EAAEN,MAAM,CAACnB;IAAK,CAAE,CACtG,eACDP,KAAA,CAAAsB,aAAA,CAACnB,IAAI;MAACiB,MAAM;MAACU,KAAK,EAAEpB,YAAY,IAAIa,UAAU,CAACQ,OAAQ;MAAClB,KAAK,EAAEa,MAAM,CAACO;IAAK,GACxEnB,QACG,CACN,CAAC;EAEP,CACS,CAAC;AAEhB,CAAC;AAED,MAAMY,MAAM,GAAGtB,gBAAgB,CAAC;EAC9BuB,SAAS,EAAE;IACTO,aAAa,EAAE,KAAK;IACpBC,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACD/B,IAAI,EAAE;IAAEgC,cAAc,EAAE,CAAC,CAAC;IAAEC,SAAS,EAAE;EAAE,CAAC;EAC1CP,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AAEF,eAAe3B,MAAM","ignoreList":[]}
+{"version":3,"names":["React","useState","Pressable","Icon","Text","createStyleSheet","useUIKitTheme","Button","icon","variant","buttonColor","contentColor","disabled","onPress","style","children","colors","pressed","setPressed","getStateColor","stateColors","ui","button","enabled","stateColor","createElement","onPressIn","onPressOut","backgroundColor","background","styles","container","size","color","content","containerStyle","text","flexDirection","padding","borderRadius","alignItems","justifyContent","marginVertical","marginEnd"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Pressable, StyleProp, ViewStyle } from 'react-native';\n\nimport Icon from '../../components/Icon';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\n\ntype Props = React.PropsWithChildren<{\n  style?: StyleProp<ViewStyle>;\n  icon?: keyof typeof Icon.Assets;\n  variant?: 'contained' | 'text';\n  disabled?: boolean;\n  onPress?: () => void;\n  buttonColor?: string;\n  contentColor?: string;\n}>;\nconst Button = ({\n  icon,\n  variant = 'contained',\n  buttonColor,\n  contentColor,\n  disabled,\n  onPress,\n  style,\n  children,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const [pressed, setPressed] = useState(false);\n\n  const getStateColor = (pressed: boolean, disabled?: boolean) => {\n    const stateColors = colors.ui.button[variant];\n    if (disabled) return stateColors.disabled;\n    if (pressed) return stateColors.pressed;\n    return stateColors.enabled;\n  };\n\n  const stateColor = getStateColor(pressed, disabled);\n\n  return (\n    <Pressable\n      disabled={disabled}\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      style={[{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style]}\n    >\n      {icon && <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />}\n      <Text button color={contentColor ?? stateColor.content} style={styles.text}>\n        {children}\n      </Text>\n    </Pressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    padding: 8,\n    borderRadius: 4,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  icon: { marginVertical: -4, marginEnd: 8 },\n  text: {},\n});\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,QAA8B,cAAc;AAE9D,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAWrD,MAAMC,MAAM,GAAGA,CAAC;EACdC,IAAI;EACJC,OAAO,GAAG,WAAW;EACrBC,WAAW;EACXC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC;AACK,CAAC,KAAK;EACX,MAAM;IAAEC;EAAO,CAAC,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAM,CAACW,OAAO,EAAEC,UAAU,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMkB,aAAa,GAAGA,CAACF,OAAgB,EAAEL,QAAkB,KAAK;IAC9D,MAAMQ,WAAW,GAAGJ,MAAM,CAACK,EAAE,CAACC,MAAM,CAACb,OAAO,CAAC;IAC7C,IAAIG,QAAQ,EAAE,OAAOQ,WAAW,CAACR,QAAQ;IACzC,IAAIK,OAAO,EAAE,OAAOG,WAAW,CAACH,OAAO;IACvC,OAAOG,WAAW,CAACG,OAAO;EAC5B,CAAC;EAED,MAAMC,UAAU,GAAGL,aAAa,CAACF,OAAO,EAAEL,QAAQ,CAAC;EAEnD,oBACEZ,KAAA,CAAAyB,aAAA,CAACvB,SAAS;IACRU,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBa,SAAS,EAAEA,CAAA,KAAMR,UAAU,CAAC,IAAI,CAAE;IAClCS,UAAU,EAAEA,CAAA,KAAMT,UAAU,CAAC,KAAK,CAAE;IACpCJ,KAAK,EAAE,CAAC;MAAEc,eAAe,EAAElB,WAAW,IAAIc,UAAU,CAACK;IAAW,CAAC,EAAEC,MAAM,CAACC,SAAS,EAAEjB,KAAK;EAAE,GAE3FN,IAAI,iBAAIR,KAAA,CAAAyB,aAAA,CAACtB,IAAI;IAAC6B,IAAI,EAAE,EAAG;IAACxB,IAAI,EAAEA,IAAK;IAACyB,KAAK,EAAEtB,YAAY,IAAIa,UAAU,CAACU,OAAQ;IAACC,cAAc,EAAEL,MAAM,CAACtB;EAAK,CAAE,CAAC,eAC/GR,KAAA,CAAAyB,aAAA,CAACrB,IAAI;IAACkB,MAAM;IAACW,KAAK,EAAEtB,YAAY,IAAIa,UAAU,CAACU,OAAQ;IAACpB,KAAK,EAAEgB,MAAM,CAACM;EAAK,GACxErB,QACG,CACG,CAAC;AAEhB,CAAC;AAED,MAAMe,MAAM,GAAGzB,gBAAgB,CAAC;EAC9B0B,SAAS,EAAE;IACTM,aAAa,EAAE,KAAK;IACpBC,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE,CAAC;IACfC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDjC,IAAI,EAAE;IAAEkC,cAAc,EAAE,CAAC,CAAC;IAAEC,SAAS,EAAE;EAAE,CAAC;EAC1CP,IAAI,EAAE,CAAC;AACT,CAAC,CAAC;AAEF,eAAe7B,MAAM","ignoreList":[]}

package/lib/module/ui/Dialog/index.js

@@ -14,8 +14,8 @@ export const DialogProvider = ({
   children
 }) => {
   var _workingDialogJob$cur, _workingDialogJob$cur2, _defaultLabels$alert, _workingDialogJob$cur3, _defaultLabels$prompt, _defaultLabels$prompt2, _defaultLabels$prompt3, _workingDialogJob$cur4;
-  const waitDismissTimeout = useRef();
-  const waitDismissPromise = useRef();
+  const waitDismissTimeout = useRef(undefined);
+  const waitDismissPromise = useRef(undefined);
   const waitDismiss = useCallback(resolver => {
     waitDismissPromise.current = resolver;
     waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);
@@ -28,7 +28,7 @@ export const DialogProvider = ({
   }, []);
   const render = useForceUpdate();
   const dialogQueue = useRef([]);
-  const workingDialogJob = useRef();
+  const workingDialogJob = useRef(undefined);
   const visibleState = useRef(false);
   const isProcessing = () => Boolean(workingDialogJob.current);
   const updateToShow = useCallback(() => {

package/lib/module/ui/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useContext","useRef","useForceUpdate","ActionMenu","Alert","BottomSheet","Prompt","AlertContext","createContext","ActionMenuContext","PromptContext","BottomSheetContext","DISMISS_TIMEOUT","DialogProvider","defaultLabels","children","_workingDialogJob$cur","_workingDialogJob$cur2","_defaultLabels$alert","_workingDialogJob$cur3","_defaultLabels$prompt","_defaultLabels$prompt2","_defaultLabels$prompt3","_workingDialogJob$cur4","waitDismissTimeout","waitDismissPromise","waitDismiss","resolver","current","setTimeout","completeDismiss","clearTimeout","undefined","render","dialogQueue","workingDialogJob","visibleState","isProcessing","Boolean","updateToShow","updateToHide","Promise","resolve","consumeQueue","job","shift","createJob","type","props","jobItem","push","alert","openMenu","openPrompt","openSheet","createElement","Provider","value","onHide","onDismiss","visible","title","menuItems","message","buttons","text","ok","onSubmit","defaultValue","submitLabel","prompt","cancelLabel","cancel","placeholder","sheetItems","HeaderComponent","useActionMenu","context","Error","useAlert","usePrompt","useBottomSheet"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { ActionMenuItem } from '../ActionMenu';\nimport ActionMenu from '../ActionMenu';\nimport type { AlertItem } from '../Alert';\nimport Alert from '../Alert';\nimport type { BottomSheetItem } from '../BottomSheet';\nimport BottomSheet from '../BottomSheet';\nimport type { PromptItem } from '../Prompt';\nimport Prompt from '../Prompt';\n\ntype DialogJob =\n  | {\n      type: 'ActionMenu';\n      props: ActionMenuItem;\n    }\n  | {\n      type: 'Alert';\n      props: AlertItem;\n    }\n  | {\n      type: 'Prompt';\n      props: PromptItem;\n    }\n  | {\n      type: 'BottomSheet';\n      props: BottomSheetItem;\n    };\n\ntype DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T; props: infer P }\n  ? P\n  : never;\n\ntype DialogContextType = {\n  openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;\n  alert: (props: DialogPropsBy<'Alert'>) => void;\n  openPrompt: (props: DialogPropsBy<'Prompt'>) => void;\n  openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;\n};\n\nconst AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);\nconst ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);\nconst PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);\nconst BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  defaultLabels?: {\n    alert?: { ok?: string };\n    prompt?: { placeholder?: string; ok?: string; cancel?: string };\n  };\n}>;\nconst DISMISS_TIMEOUT = 3000;\nexport const DialogProvider = ({ defaultLabels, children }: Props) => {\n  const waitDismissTimeout = useRef<NodeJS.Timeout>();\n  const waitDismissPromise = useRef<() => void>();\n  const waitDismiss = useCallback((resolver: () => void) => {\n    waitDismissPromise.current = resolver;\n    waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);\n  }, []);\n  const completeDismiss = useCallback(() => {\n    if (waitDismissTimeout.current) clearTimeout(waitDismissTimeout.current);\n    if (waitDismissPromise.current) waitDismissPromise.current();\n    waitDismissTimeout.current = undefined;\n    waitDismissPromise.current = undefined;\n  }, []);\n\n  const render = useForceUpdate();\n  const dialogQueue = useRef<DialogJob[]>([]);\n  const workingDialogJob = useRef<DialogJob>();\n  const visibleState = useRef(false);\n\n  const isProcessing = () => Boolean(workingDialogJob.current);\n  const updateToShow = useCallback(() => {\n    visibleState.current = true;\n    render();\n  }, []);\n  const updateToHide = useCallback((): Promise<void> => {\n    return new Promise((resolve) => {\n      visibleState.current = false;\n      render();\n      waitDismiss(resolve);\n    });\n  }, []);\n  const consumeQueue = useCallback(() => {\n    completeDismiss();\n    const job = dialogQueue.current.shift();\n    if (job) {\n      workingDialogJob.current = job;\n      updateToShow();\n    } else {\n      workingDialogJob.current = undefined;\n    }\n  }, []);\n\n  const createJob =\n    <T extends DialogJob['type']>(type: T) =>\n    (props: DialogPropsBy<T>) => {\n      const jobItem = { type, props } as DialogJob;\n      if (isProcessing()) dialogQueue.current.push(jobItem);\n      else {\n        workingDialogJob.current = jobItem;\n        updateToShow();\n      }\n    };\n\n  const alert = useCallback(createJob('Alert'), []);\n  const openMenu = useCallback(createJob('ActionMenu'), []);\n  const openPrompt = useCallback(createJob('Prompt'), []);\n  const openSheet = useCallback(createJob('BottomSheet'), []);\n\n  return (\n    <AlertContext.Provider value={{ alert }}>\n      <ActionMenuContext.Provider value={{ openMenu }}>\n        <PromptContext.Provider value={{ openPrompt }}>\n          <BottomSheetContext.Provider value={{ openSheet }}>\n            {children}\n            {workingDialogJob.current?.type === 'ActionMenu' && (\n              <ActionMenu\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                menuItems={workingDialogJob.current.props.menuItems}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Alert' && (\n              <Alert\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                message={workingDialogJob.current.props.message}\n                buttons={workingDialogJob.current.props.buttons ?? [{ text: defaultLabels?.alert?.ok || 'OK' }]}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Prompt' && (\n              <Prompt\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                onSubmit={workingDialogJob.current.props.onSubmit}\n                defaultValue={workingDialogJob.current.props.defaultValue}\n                submitLabel={workingDialogJob.current.props.submitLabel ?? defaultLabels?.prompt?.ok}\n                cancelLabel={workingDialogJob.current.props.cancelLabel ?? defaultLabels?.prompt?.cancel}\n                placeholder={workingDialogJob.current.props.placeholder ?? defaultLabels?.prompt?.placeholder}\n              />\n            )}\n            {workingDialogJob.current?.type === 'BottomSheet' && (\n              <BottomSheet\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                sheetItems={workingDialogJob.current.props.sheetItems}\n                HeaderComponent={workingDialogJob.current.props.HeaderComponent}\n              />\n            )}\n          </BottomSheetContext.Provider>\n        </PromptContext.Provider>\n      </ActionMenuContext.Provider>\n    </AlertContext.Provider>\n  );\n};\n\nexport const useActionMenu = () => {\n  const context = useContext(ActionMenuContext);\n  if (!context) throw new Error('ActionMenuContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useAlert = () => {\n  const context = useContext(AlertContext);\n  if (!context) throw new Error('AlertContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const usePrompt = () => {\n  const context = useContext(PromptContext);\n  if (!context) throw new Error('PromptContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useBottomSheet = () => {\n  const context = useContext(BottomSheetContext);\n  if (!context) throw new Error('BottomSheetContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useContext","useRef","useForceUpdate","ActionMenu","Alert","BottomSheet","Prompt","AlertContext","createContext","ActionMenuContext","PromptContext","BottomSheetContext","DISMISS_TIMEOUT","DialogProvider","defaultLabels","children","_workingDialogJob$cur","_workingDialogJob$cur2","_defaultLabels$alert","_workingDialogJob$cur3","_defaultLabels$prompt","_defaultLabels$prompt2","_defaultLabels$prompt3","_workingDialogJob$cur4","waitDismissTimeout","undefined","waitDismissPromise","waitDismiss","resolver","current","setTimeout","completeDismiss","clearTimeout","render","dialogQueue","workingDialogJob","visibleState","isProcessing","Boolean","updateToShow","updateToHide","Promise","resolve","consumeQueue","job","shift","createJob","type","props","jobItem","push","alert","openMenu","openPrompt","openSheet","createElement","Provider","value","onHide","onDismiss","visible","title","menuItems","message","buttons","text","ok","onSubmit","defaultValue","submitLabel","prompt","cancelLabel","cancel","placeholder","sheetItems","HeaderComponent","useActionMenu","context","Error","useAlert","usePrompt","useBottomSheet"],"sources":["index.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from 'react';\n\nimport { useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { ActionMenuItem } from '../ActionMenu';\nimport ActionMenu from '../ActionMenu';\nimport type { AlertItem } from '../Alert';\nimport Alert from '../Alert';\nimport type { BottomSheetItem } from '../BottomSheet';\nimport BottomSheet from '../BottomSheet';\nimport type { PromptItem } from '../Prompt';\nimport Prompt from '../Prompt';\n\ntype DialogJob =\n  | {\n      type: 'ActionMenu';\n      props: ActionMenuItem;\n    }\n  | {\n      type: 'Alert';\n      props: AlertItem;\n    }\n  | {\n      type: 'Prompt';\n      props: PromptItem;\n    }\n  | {\n      type: 'BottomSheet';\n      props: BottomSheetItem;\n    };\n\ntype DialogPropsBy<T extends DialogJob['type'], U extends DialogJob = DialogJob> = U extends { type: T; props: infer P }\n  ? P\n  : never;\n\ntype DialogContextType = {\n  openMenu: (props: DialogPropsBy<'ActionMenu'>) => void;\n  alert: (props: DialogPropsBy<'Alert'>) => void;\n  openPrompt: (props: DialogPropsBy<'Prompt'>) => void;\n  openSheet: (props: DialogPropsBy<'BottomSheet'>) => void;\n};\n\nconst AlertContext = React.createContext<Pick<DialogContextType, 'alert'> | null>(null);\nconst ActionMenuContext = React.createContext<Pick<DialogContextType, 'openMenu'> | null>(null);\nconst PromptContext = React.createContext<Pick<DialogContextType, 'openPrompt'> | null>(null);\nconst BottomSheetContext = React.createContext<Pick<DialogContextType, 'openSheet'> | null>(null);\n\ntype Props = React.PropsWithChildren<{\n  defaultLabels?: {\n    alert?: { ok?: string };\n    prompt?: { placeholder?: string; ok?: string; cancel?: string };\n  };\n}>;\nconst DISMISS_TIMEOUT = 3000;\nexport const DialogProvider = ({ defaultLabels, children }: Props) => {\n  const waitDismissTimeout = useRef<NodeJS.Timeout | undefined>(undefined);\n  const waitDismissPromise = useRef<(() => void) | undefined>(undefined);\n  const waitDismiss = useCallback((resolver: () => void) => {\n    waitDismissPromise.current = resolver;\n    waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);\n  }, []);\n  const completeDismiss = useCallback(() => {\n    if (waitDismissTimeout.current) clearTimeout(waitDismissTimeout.current);\n    if (waitDismissPromise.current) waitDismissPromise.current();\n    waitDismissTimeout.current = undefined;\n    waitDismissPromise.current = undefined;\n  }, []);\n\n  const render = useForceUpdate();\n  const dialogQueue = useRef<DialogJob[]>([]);\n  const workingDialogJob = useRef<DialogJob | undefined>(undefined);\n  const visibleState = useRef(false);\n\n  const isProcessing = () => Boolean(workingDialogJob.current);\n  const updateToShow = useCallback(() => {\n    visibleState.current = true;\n    render();\n  }, []);\n  const updateToHide = useCallback((): Promise<void> => {\n    return new Promise((resolve) => {\n      visibleState.current = false;\n      render();\n      waitDismiss(resolve);\n    });\n  }, []);\n  const consumeQueue = useCallback(() => {\n    completeDismiss();\n    const job = dialogQueue.current.shift();\n    if (job) {\n      workingDialogJob.current = job;\n      updateToShow();\n    } else {\n      workingDialogJob.current = undefined;\n    }\n  }, []);\n\n  const createJob =\n    <T extends DialogJob['type']>(type: T) =>\n    (props: DialogPropsBy<T>) => {\n      const jobItem = { type, props } as DialogJob;\n      if (isProcessing()) dialogQueue.current.push(jobItem);\n      else {\n        workingDialogJob.current = jobItem;\n        updateToShow();\n      }\n    };\n\n  const alert = useCallback(createJob('Alert'), []);\n  const openMenu = useCallback(createJob('ActionMenu'), []);\n  const openPrompt = useCallback(createJob('Prompt'), []);\n  const openSheet = useCallback(createJob('BottomSheet'), []);\n\n  return (\n    <AlertContext.Provider value={{ alert }}>\n      <ActionMenuContext.Provider value={{ openMenu }}>\n        <PromptContext.Provider value={{ openPrompt }}>\n          <BottomSheetContext.Provider value={{ openSheet }}>\n            {children}\n            {workingDialogJob.current?.type === 'ActionMenu' && (\n              <ActionMenu\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                menuItems={workingDialogJob.current.props.menuItems}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Alert' && (\n              <Alert\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                message={workingDialogJob.current.props.message}\n                buttons={workingDialogJob.current.props.buttons ?? [{ text: defaultLabels?.alert?.ok || 'OK' }]}\n              />\n            )}\n            {workingDialogJob.current?.type === 'Prompt' && (\n              <Prompt\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                title={workingDialogJob.current.props.title}\n                onSubmit={workingDialogJob.current.props.onSubmit}\n                defaultValue={workingDialogJob.current.props.defaultValue}\n                submitLabel={workingDialogJob.current.props.submitLabel ?? defaultLabels?.prompt?.ok}\n                cancelLabel={workingDialogJob.current.props.cancelLabel ?? defaultLabels?.prompt?.cancel}\n                placeholder={workingDialogJob.current.props.placeholder ?? defaultLabels?.prompt?.placeholder}\n              />\n            )}\n            {workingDialogJob.current?.type === 'BottomSheet' && (\n              <BottomSheet\n                onHide={updateToHide}\n                onDismiss={consumeQueue}\n                visible={visibleState.current}\n                sheetItems={workingDialogJob.current.props.sheetItems}\n                HeaderComponent={workingDialogJob.current.props.HeaderComponent}\n              />\n            )}\n          </BottomSheetContext.Provider>\n        </PromptContext.Provider>\n      </ActionMenuContext.Provider>\n    </AlertContext.Provider>\n  );\n};\n\nexport const useActionMenu = () => {\n  const context = useContext(ActionMenuContext);\n  if (!context) throw new Error('ActionMenuContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useAlert = () => {\n  const context = useContext(AlertContext);\n  if (!context) throw new Error('AlertContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const usePrompt = () => {\n  const context = useContext(PromptContext);\n  if (!context) throw new Error('PromptContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\nexport const useBottomSheet = () => {\n  const context = useContext(BottomSheetContext);\n  if (!context) throw new Error('BottomSheetContext is not provided, wrap your app with DialogProvider');\n  return context;\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.12.1",
+  "version": "3.12.3",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -57,7 +57,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.12.1"
+    "@sendbird/uikit-utils": "3.12.3"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -94,5 +94,5 @@
       ]
     ]
   },
-  "gitHead": "367f6209c4e1db1ec2d44dbdc3e3d3a55c6beb78"
+  "gitHead": "6c20512fbcfb708b75339474c47558225e8ce262"
 }

package/src/components/ImageWithPlaceholder/index.tsx

@@ -15,7 +15,7 @@ const useRetry = (hasError: boolean, retryCount = 5) => {
 
   const forceUpdate = useForceUpdate();
   const retryCountRef = useRef(1);
-  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+  const retryTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
 
   useEffect(() => {
     if (hasError) {

package/src/components/PressBox/index.tsx

@@ -27,10 +27,19 @@ const PressBox = (props: Props) => {
   return <PressBoxWithPressable {...props} />;
 };
 
-const PressBoxWithPressable = ({ children, ...props }: Props) => {
+const PressBoxWithPressable = ({ children, style, ...props }: Props) => {
+  const [pressed, setPressed] = useState(false);
+  const state: PressBoxStateParams = { pressed };
   return (
-    <Pressable disabled={!props.onPress && !props.onLongPress} delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props}>
-      {(state) => (isFunction(children) ? children(state) : children)}
+    <Pressable
+      disabled={!props.onPress && !props.onLongPress}
+      delayLongPress={DEFAULT_LONG_PRESS_DELAY}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={isFunction(style) ? style(state) : style}
+      {...props}
+    >
+      {isFunction(children) ? children(state) : children}
     </Pressable>
   );
 };

package/src/ui/Avatar/AvatarGroup.tsx

@@ -1,8 +1,14 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 const MAX = 4;
 
+type AvatarChildProps = {
+  size?: number;
+  square?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
 type Props = React.PropsWithChildren<{
   size?: number;
   containerStyle?: StyleProp<ViewStyle>;
@@ -33,7 +39,9 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
         if (index + 1 > MAX) return child;
         if (!React.isValidElement(child)) return child;
 
-        if (childAmount === 1) return React.cloneElement(child as ReactElement, { size, containerStyle });
+        if (childAmount === 1) {
+          return React.cloneElement(child as React.ReactElement<AvatarChildProps>, { size, containerStyle });
+        }
 
         const top = getTopPoint(index, childAmount) * size;
         const start = getStartPoint(index) * size;
@@ -44,7 +52,7 @@ const AvatarGroup = ({ children, containerStyle, size = 56 }: Props) => {
 
         return (
           <View style={{ overflow: 'hidden', position: 'absolute', top, start, width, height }}>
-            {React.cloneElement(child as ReactElement, {
+            {React.cloneElement(child as React.ReactElement<AvatarChildProps>, {
               size,
               square: true,
               containerStyle: { start: innerStart, top: innerTop },

package/src/ui/Avatar/AvatarStack.tsx

@@ -1,9 +1,14 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 
 import Text from '../../components/Text';
 import useUIKitTheme from '../../theme/useUIKitTheme';
 
+type AvatarChildProps = {
+  size?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
 const DEFAULT_MAX = 3;
 const DEFAULT_BORDER_WIDTH = 2;
 const DEFAULT_AVATAR_GAP = -4;
@@ -49,7 +54,7 @@ const AvatarStack = ({
 
   const renderAvatars = () => {
     return childrenArray.slice(0, maxAvatar).map((child, index) =>
-      React.cloneElement(child as ReactElement, {
+      React.cloneElement(child as React.ReactElement<AvatarChildProps>, {
         size: actualSize,
         containerStyle: {
           start: actualGap * index,

package/src/ui/Button/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Pressable, StyleProp, ViewStyle } from 'react-native';
 
 import Icon from '../../components/Icon';
@@ -26,6 +26,7 @@ const Button = ({
   children,
 }: Props) => {
   const { colors } = useUIKitTheme();
+  const [pressed, setPressed] = useState(false);
 
   const getStateColor = (pressed: boolean, disabled?: boolean) => {
     const stateColors = colors.ui.button[variant];
@@ -34,29 +35,20 @@ const Button = ({
     return stateColors.enabled;
   };
 
+  const stateColor = getStateColor(pressed, disabled);
+
   return (
     <Pressable
       disabled={disabled}
       onPress={onPress}
-      style={({ pressed }) => {
-        const stateColor = getStateColor(pressed, disabled);
-        return [{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style];
-      }}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[{ backgroundColor: buttonColor ?? stateColor.background }, styles.container, style]}
     >
-      {({ pressed }) => {
-        const stateColor = getStateColor(pressed, disabled);
-
-        return (
-          <>
-            {icon && (
-              <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />
-            )}
-            <Text button color={contentColor ?? stateColor.content} style={styles.text}>
-              {children}
-            </Text>
-          </>
-        );
-      }}
+      {icon && <Icon size={24} icon={icon} color={contentColor ?? stateColor.content} containerStyle={styles.icon} />}
+      <Text button color={contentColor ?? stateColor.content} style={styles.text}>
+        {children}
+      </Text>
     </Pressable>
   );
 };

package/src/ui/Dialog/index.tsx

@@ -53,8 +53,8 @@ type Props = React.PropsWithChildren<{
 }>;
 const DISMISS_TIMEOUT = 3000;
 export const DialogProvider = ({ defaultLabels, children }: Props) => {
-  const waitDismissTimeout = useRef<NodeJS.Timeout>();
-  const waitDismissPromise = useRef<() => void>();
+  const waitDismissTimeout = useRef<NodeJS.Timeout | undefined>(undefined);
+  const waitDismissPromise = useRef<(() => void) | undefined>(undefined);
   const waitDismiss = useCallback((resolver: () => void) => {
     waitDismissPromise.current = resolver;
     waitDismissTimeout.current = setTimeout(completeDismiss, DISMISS_TIMEOUT);
@@ -68,7 +68,7 @@ export const DialogProvider = ({ defaultLabels, children }: Props) => {
 
   const render = useForceUpdate();
   const dialogQueue = useRef<DialogJob[]>([]);
-  const workingDialogJob = useRef<DialogJob>();
+  const workingDialogJob = useRef<DialogJob | undefined>(undefined);
   const visibleState = useRef(false);
 
   const isProcessing = () => Boolean(workingDialogJob.current);