@ornikar/kitt-universal 25.54.0 → 25.54.1-canary.111977bfdb623207808928fa770ffbe060b3b380.0

package/dist/index.es.web.js

@@ -798,6 +798,24 @@ var button = {
   }
 };
 
+var buttonBadge = {
+  backgroundColor: lateOceanColorPalette['coral.10'],
+  dimensions: {
+    withBadge: {
+      width: 10,
+      height: 10
+    },
+    badgeCount: {
+      width: 20,
+      height: 20
+    }
+  },
+  borderRadius: {
+    withBadge: 5,
+    badgeCount: 10
+  }
+};
+
 var card = {
   borderRadius: 20,
   borderWidth: 2,
@@ -2521,6 +2539,7 @@ var theme = {
   forms: forms,
   highlight: highlight,
   icon: icon,
+  buttonBadge: buttonBadge,
   iconButton: iconButton,
   listItem: listItem,
   pageLoader: pageLoader,
@@ -3137,6 +3156,36 @@ Typography.h4 = createHeading(4, 'header4');
 /** @deprecated use Typography.Header6 */
 Typography.h5 = createHeading(5, 'header5');
 
+function ButtonBadge(_ref) {
+  var withBadge = _ref.withBadge,
+    badgeCount = _ref.badgeCount;
+  if (withBadge) {
+    return /*#__PURE__*/jsx(View, {
+      height: "kitt.buttonBadge.dimensions.withBadge.height",
+      width: "kitt.buttonBadge.dimensions.withBadge.width",
+      backgroundColor: "kitt.buttonBadge.backgroundColor",
+      borderRadius: "kitt.buttonBadge.borderRadius.withBadge"
+    });
+  }
+  if (badgeCount && badgeCount > 0) {
+    return /*#__PURE__*/jsx(VStack, {
+      alignItems: "center",
+      justifyContent: "center",
+      height: "kitt.buttonBadge.dimensions.badgeCount.height",
+      width: "kitt.buttonBadge.dimensions.badgeCount.width",
+      backgroundColor: "kitt.buttonBadge.backgroundColor",
+      borderRadius: "kitt.buttonBadge.borderRadius.badgeCount",
+      children: /*#__PURE__*/jsx(Typography.Text, {
+        base: "body-xs",
+        variant: "bold",
+        color: "white",
+        children: (badgeCount || 0) > 5 ? '+5' : badgeCount
+      })
+    });
+  }
+  return null;
+}
+
 function Icon(_ref) {
   var icon = _ref.icon,
     _ref$size = _ref.size,
@@ -3255,6 +3304,8 @@ function ButtonContentChildren(_ref2) {
     icon = _ref2.icon,
     iconPosition = _ref2.iconPosition,
     innerSpacing = _ref2.innerSpacing,
+    withBadge = _ref2.withBadge,
+    badgeCount = _ref2.badgeCount,
     color = _ref2.color,
     children = _ref2.children;
   if ((process.env.NODE_ENV !== "production")) {
@@ -3298,7 +3349,13 @@ function ButtonContentChildren(_ref2) {
       children: children
     }), icon && iconPosition === 'right' ? /*#__PURE__*/jsx(ButtonIcon, _objectSpread(_objectSpread({}, buttonIconSharedProps), {}, {
       icon: icon
-    })) : null]
+    })) : null, withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
+      marginLeft: "kitt.2",
+      children: /*#__PURE__*/jsx(ButtonBadge, {
+        withBadge: withBadge,
+        badgeCount: badgeCount
+      })
+    }) : null]
   });
 }
 function ButtonContent(_ref3) {
@@ -3437,6 +3494,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID = _ref.testID,
     href = _ref.href,
     hrefAttrs = _ref.hrefAttrs,
+    withBadge = _ref.withBadge,
+    badgeCount = _ref.badgeCount,
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     _ref$innerSpacing = _ref.innerSpacing,
@@ -3505,6 +3564,8 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
             isDisabled: disabled,
             icon: icon,
             iconPosition: iconPosition,
+            withBadge: withBadge,
+            badgeCount: badgeCount,
             isHovered: isHovered,
             isPressed: isPressed,
             isFocused: isFocused,
@@ -3561,6 +3622,8 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isLoading = _useState2[0],
     setIsLoading = _useState2[1];
   var mountedRef = useRef(false);
+  // securing the loading state with a ref to avoid user action between rerenders
+  var loadingRef = useRef(false);
 
   // effect just for tracking mounted state, as onPress can unmount the ActionButton
   useEffect(function () {
@@ -3582,34 +3645,37 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
             return _regeneratorRuntime().wrap(function (_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
-                  if (onPress) {
+                  if (!(!onPress || loadingRef.current)) {
                     _context.next = 2;
                     break;
                   }
                   return _context.abrupt("return");
                 case 2:
                   setIsLoading(true);
-                  _context.prev = 3;
-                  _context.next = 6;
+                  loadingRef.current = true;
+                  _context.prev = 4;
+                  _context.next = 7;
                   return onPress(e);
-                case 6:
+                case 7:
                   if (mountedRef.current) {
                     setIsLoading(false);
+                    loadingRef.current = false;
                   }
-                  _context.next = 13;
+                  _context.next = 14;
                   break;
-                case 9:
-                  _context.prev = 9;
-                  _context.t0 = _context["catch"](3);
+                case 10:
+                  _context.prev = 10;
+                  _context.t0 = _context["catch"](4);
                   if (mountedRef.current) {
+                    loadingRef.current = false;
                     setIsLoading(false);
                   }
                   throw _context.t0;
-                case 13:
+                case 14:
                 case "end":
                   return _context.stop();
               }
-            }, _callee, null, [[3, 9]]);
+            }, _callee, null, [[4, 10]]);
           }));
           return function () {
             return _ref2.apply(this, arguments);
@@ -7819,7 +7885,7 @@ function IconButton(_ref) {
     _ref$accessibilityRol = _ref.accessibilityRole,
     accessibilityRole = _ref$accessibilityRol === void 0 ? 'button' : _ref$accessibilityRol,
     withBadge = _ref.withBadge,
-    bagdeCount = _ref.bagdeCount,
+    badgeCount = _ref.badgeCount,
     isHoveredInternal = _ref.isHoveredInternal,
     isPressedInternal = _ref.isPressedInternal,
     isFocusedInternal = _ref.isFocusedInternal,
@@ -7876,32 +7942,13 @@ function IconButton(_ref) {
               icon: icon
             })
           })]
-        }), withBadge ? /*#__PURE__*/jsx(View, {
-          height: "10px",
-          width: "10px",
-          backgroundColor: lateOceanColorPalette['coral.10'],
-          borderRadius: "kitt.iconButton.borderRadius",
+        }), withBadge || badgeCount && badgeCount > 0 ? /*#__PURE__*/jsx(View, {
           position: "absolute",
-          top: "1px",
-          right: "1px"
-        }) : null, !withBadge && bagdeCount && bagdeCount > 0 ? /*#__PURE__*/jsx(View, {
-          height: "20px",
-          width: "20px",
-          backgroundColor: lateOceanColorPalette['coral.10'],
-          borderRadius: "kitt.iconButton.borderRadius",
-          position: "absolute",
-          top: "-6px",
-          right: "-6px",
-          children: /*#__PURE__*/jsx(View, {
-            alignItems: "center",
-            justifyContent: "center",
-            marginTop: "2px",
-            children: /*#__PURE__*/jsx(Typography.Text, {
-              base: "body-xs",
-              variant: "bold",
-              color: "white",
-              children: bagdeCount > 5 ? '+5' : bagdeCount
-            })
+          top: withBadge ? '1px' : '-6px',
+          right: withBadge ? '1px' : '-6px',
+          children: /*#__PURE__*/jsx(ButtonBadge, {
+            withBadge: withBadge,
+            badgeCount: badgeCount
           })
         }) : null]
       });
@@ -8980,6 +9027,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           backgroundColor: theme.skeleton.backgroundColor,
           flareColor: theme.skeleton.flareColor
         },
+        buttonBadge: {
+          backgroundColor: theme.buttonBadge.backgroundColor
+        },
         iconButton: {
           borderColor: theme.iconButton.borderColor,
           disabled: {
@@ -9167,6 +9217,9 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         button: {
           borderRadius: theme.button.borderRadius
         },
+        buttonBadge: {
+          borderRadius: theme.buttonBadge.borderRadius
+        },
         card: {
           borderRadius: theme.card.borderRadius
         },
@@ -9543,6 +9596,18 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           maxWidth: theme.button.maxWidth,
           minHeight: theme.button.minHeight
         },
+        buttonBadge: {
+          dimensions: {
+            withBadge: {
+              width: theme.buttonBadge.dimensions.withBadge.width,
+              height: theme.buttonBadge.dimensions.withBadge.height
+            },
+            badgeCount: {
+              width: theme.buttonBadge.dimensions.badgeCount.width,
+              height: theme.buttonBadge.dimensions.badgeCount.height
+            }
+          }
+        },
         icon: theme.icon,
         cardModal: {
           header: {
@@ -13262,5 +13327,5 @@ function VerticalSteps(_ref) {
 VerticalSteps.Step = Step;
 VerticalSteps.BorderlessStep = BorderlessStep;
 
-export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
+export { ActionCard, Actions, Autocomplete, Avatar, BottomSheet, Button, ButtonBadge, CardModal, Center, Checkbox, ChoicesElements, CloseIconButton, DatePicker, DialogModal, DocumentPicker, Emoji, ExternalAppLink, ExternalLink, FilePicker, FlatList, Flex, FullscreenModal, GoogleMapsApiKeyProvider, GoogleMapsAutocompleteProvider, GroupTags, HStack, Highlight, Icon, IconButton, Image, ImagePicker, InfoCard, InputAddress, InputEmail, InputFeedback, InputField, InputIban, InputIcon, InputNumber, InputPassword, InputPhone, InputPressable, InputTag, InputText, KittBreakpointNameEnum, KittBreakpoints, KittBreakpointsMax, KittMapConfigProvider, KittNativeBaseProvider, KittThemeDecorator, KittThemeProvider, Label, ListItem, LoaderIcon, MapMarker, MapMarkerVariantEnum, MatchWindowSize, Message, ModalBehaviour, NativeOnlyFlatList, NavigationModal, Notification, Overlay, PageLoader, Picker, Pressable, RadioWithRef as Radio, RadioButtonGroup, ScrollView, DeprecatedSection as Section, SectionList, SegmentedProgressBar, Skeleton, SpinningIcon, Stack, StaticMap, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, StyleWebWrapper, SwitchBreakpoints, TabBar, Tag, TextArea, TimePicker, ToastComponent, Toggle, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, VStack, VerticalSteps, View, createChoicesComponent, createResponsiveStyleFromProp, getStaticMapImageUrl, getValueForBreakpoint, hex2rgba, matchWindowSize, storyPadding, theme, useBottomSheet, useBreakpointValue, useCurrentBreakpointName, useGetStaticMapImageUrl, useKittMapConfig, useKittTheme, useMatchWindowSize, useOpenExternalLink, useStaticBottomSheet, useStoryBlockColor, useTheme };
 //# sourceMappingURL=index.es.web.js.map