@jobber/components-native 0.98.4 → 0.99.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/dist/package.json +2 -2
  2. package/dist/src/AtlantisOverlayProvider/AtlantisOverlayProvider.js +5 -0
  3. package/dist/src/AtlantisOverlayProvider/index.js +1 -0
  4. package/dist/src/BottomSheet/BottomSheet.js +9 -11
  5. package/dist/src/BottomSheet/hooks/useBottomSheetBackHandler.js +2 -2
  6. package/dist/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.js +9 -11
  7. package/dist/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.js +7 -9
  8. package/dist/src/index.js +1 -1
  9. package/dist/src/utils/meta/meta.json +1 -1
  10. package/dist/tsconfig.build.tsbuildinfo +1 -1
  11. package/dist/types/src/AtlantisOverlayProvider/AtlantisOverlayProvider.d.ts +6 -0
  12. package/dist/types/src/AtlantisOverlayProvider/index.d.ts +1 -0
  13. package/dist/types/src/BottomSheet/hooks/useBottomSheetBackHandler.d.ts +3 -3
  14. package/dist/types/src/index.d.ts +1 -1
  15. package/package.json +2 -2
  16. package/src/AtlantisOverlayProvider/AtlantisOverlayProvider.tsx +12 -0
  17. package/src/AtlantisOverlayProvider/index.ts +1 -0
  18. package/src/BottomSheet/BottomSheet.tsx +13 -13
  19. package/src/BottomSheet/hooks/useBottomSheetBackHandler.test.ts +10 -10
  20. package/src/BottomSheet/hooks/useBottomSheetBackHandler.ts +4 -4
  21. package/src/ButtonGroup/ButtonGroup.stories.tsx +10 -8
  22. package/src/ButtonGroup/ButtonGroup.test.tsx +7 -10
  23. package/src/ButtonGroup/components/SecondaryActionSheet/SecondaryActionSheet.tsx +26 -29
  24. package/src/Form/Form.stories.tsx +8 -4
  25. package/src/Form/Form.test.tsx +51 -54
  26. package/src/Form/components/FormSaveButton/FormSaveButton.test.tsx +7 -10
  27. package/src/FormatFile/FormatFile.stories.tsx +3 -4
  28. package/src/FormatFile/FormatFile.test.tsx +11 -14
  29. package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.test.tsx +6 -9
  30. package/src/FormatFile/components/FormatFileBottomSheet/FormatFileBottomSheet.tsx +21 -24
  31. package/src/InputDate/InputDate.test.tsx +5 -8
  32. package/src/InputTime/InputTime.stories.tsx +8 -4
  33. package/src/InputTime/InputTime.test.tsx +5 -8
  34. package/src/ThumbnailList/ThumbnailList.stories.tsx +6 -4
  35. package/src/ThumbnailList/ThumbnailList.test.tsx +5 -8
  36. package/src/ThumbnailList/__snapshots__/ThumbnailList.test.tsx.snap +101 -150
  37. package/src/index.ts +1 -1
  38. package/src/utils/meta/meta.json +2 -2
  39. package/dist/src/Menu/Menu.js +0 -85
  40. package/dist/src/Menu/Menu.style.js +0 -7
  41. package/dist/src/Menu/components/MenuOption/MenuOption.js +0 -27
  42. package/dist/src/Menu/components/MenuOption/MenuOption.style.js +0 -11
  43. package/dist/src/Menu/components/MenuOption/index.js +0 -1
  44. package/dist/src/Menu/components/Overlay/Overlay.js +0 -10
  45. package/dist/src/Menu/components/Overlay/Overlay.style.js +0 -8
  46. package/dist/src/Menu/components/Overlay/index.js +0 -1
  47. package/dist/src/Menu/index.js +0 -1
  48. package/dist/src/Menu/types.js +0 -1
  49. package/dist/src/Menu/utils.js +0 -78
  50. package/dist/types/src/Menu/Menu.d.ts +0 -3
  51. package/dist/types/src/Menu/Menu.style.d.ts +0 -18
  52. package/dist/types/src/Menu/components/MenuOption/MenuOption.d.ts +0 -3
  53. package/dist/types/src/Menu/components/MenuOption/MenuOption.style.d.ts +0 -8
  54. package/dist/types/src/Menu/components/MenuOption/index.d.ts +0 -1
  55. package/dist/types/src/Menu/components/Overlay/Overlay.d.ts +0 -3
  56. package/dist/types/src/Menu/components/Overlay/Overlay.style.d.ts +0 -12
  57. package/dist/types/src/Menu/components/Overlay/index.d.ts +0 -1
  58. package/dist/types/src/Menu/index.d.ts +0 -2
  59. package/dist/types/src/Menu/types.d.ts +0 -26
  60. package/dist/types/src/Menu/utils.d.ts +0 -11
  61. package/src/Menu/Menu.stories.tsx +0 -52
  62. package/src/Menu/Menu.style.ts +0 -17
  63. package/src/Menu/Menu.test.tsx +0 -203
  64. package/src/Menu/Menu.tsx +0 -141
  65. package/src/Menu/components/MenuOption/MenuOption.style.tsx +0 -12
  66. package/src/Menu/components/MenuOption/MenuOption.tsx +0 -66
  67. package/src/Menu/components/MenuOption/index.ts +0 -1
  68. package/src/Menu/components/Overlay/Overlay.style.ts +0 -15
  69. package/src/Menu/components/Overlay/Overlay.tsx +0 -18
  70. package/src/Menu/components/Overlay/index.ts +0 -1
  71. package/src/Menu/index.ts +0 -6
  72. package/src/Menu/types.ts +0 -31
  73. package/src/Menu/utils.ts +0 -148
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jobber/components-native",
3
- "version": "0.98.4",
3
+ "version": "0.99.0",
4
4
  "license": "MIT",
5
5
  "description": "React Native implementation of Atlantis",
6
6
  "repository": {
@@ -96,5 +96,5 @@
96
96
  "react-native-safe-area-context": "^5.4.0",
97
97
  "react-native-svg": ">=12.0.0"
98
98
  },
99
- "gitHead": "ddc3848f6c721cbc34ddcefecdc4446f50414809"
99
+ "gitHead": "c92c33f8e0a06cbc2addce9eca3005c1231a9202"
100
100
  }
@@ -0,0 +1,5 @@
1
+ import React from "react";
2
+ import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
3
+ export function AtlantisOverlayProvider({ children, }) {
4
+ return React.createElement(BottomSheetModalProvider, null, children);
5
+ }
@@ -0,0 +1 @@
1
+ export { AtlantisOverlayProvider } from "./AtlantisOverlayProvider";
@@ -1,7 +1,7 @@
1
1
  import React, { useCallback, useImperativeHandle, useRef } from "react";
2
2
  import { Keyboard, View } from "react-native";
3
3
  import { useSafeAreaInsets } from "react-native-safe-area-context";
4
- import RNBottomSheet, { BottomSheetBackdrop, BottomSheetView, } from "@gorhom/bottom-sheet";
4
+ import { BottomSheetBackdrop, BottomSheetModal, BottomSheetView, } from "@gorhom/bottom-sheet";
5
5
  import { tokens } from "@jobber/design";
6
6
  import { useStyles } from "./BottomSheet.style";
7
7
  import { BottomSheetOption } from "./components/BottomSheetOption";
@@ -22,7 +22,8 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
22
22
  useImperativeHandle(ref, () => ({
23
23
  open: () => {
24
24
  var _a;
25
- (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.expand();
25
+ dismissKeyboard();
26
+ (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.present();
26
27
  },
27
28
  close: () => {
28
29
  close();
@@ -30,25 +31,22 @@ export function BottomSheet({ children, showCancel, loading = false, heading, on
30
31
  }));
31
32
  const close = useCallback(() => {
32
33
  var _a;
33
- (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
34
+ (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
34
35
  }, []);
35
36
  const handleChange = (index) => {
36
37
  // Handle Android back button
37
38
  handleSheetPositionChange(index);
38
39
  const previousIndex = previousIndexRef.current;
39
40
  if (previousIndex === -1 && index >= 0) {
40
- // Transitioned from closed to open
41
- dismissKeyboard();
42
41
  onOpen === null || onOpen === void 0 ? void 0 : onOpen();
43
42
  }
44
- else if (previousIndex >= 0 && index === -1) {
45
- // Transitioned from open to closed
46
- dismissKeyboard();
47
- onClose === null || onClose === void 0 ? void 0 : onClose();
48
- }
49
43
  previousIndexRef.current = index;
50
44
  };
51
- return (React.createElement(RNBottomSheet, { ref: bottomSheetRef, index: -1, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
45
+ return (React.createElement(BottomSheetModal, { ref: bottomSheetRef, backdropComponent: Backdrop, backgroundStyle: styles.background, enablePanDownToClose: true, onChange: handleChange, onDismiss: () => {
46
+ previousIndexRef.current = -1;
47
+ dismissKeyboard();
48
+ onClose === null || onClose === void 0 ? void 0 : onClose();
49
+ }, keyboardBlurBehavior: "restore", handleStyle: styles.handle },
52
50
  React.createElement(BottomSheetView, { style: {
53
51
  paddingBottom: insets.bottom + tokens["space-small"],
54
52
  paddingTop: tokens["space-small"],
@@ -1,7 +1,7 @@
1
1
  import { useCallback, useRef } from "react";
2
2
  import { BackHandler } from "react-native";
3
3
  /**
4
- * Hook that closes the bottom sheet on the hardware back button press if it is visible
4
+ * Hook that dismisses the bottom sheet modal on the hardware back button press if it is visible
5
5
  * @param bottomSheetRef ref to the bottom sheet component
6
6
  */
7
7
  export function useBottomSheetBackHandler(bottomSheetRef) {
@@ -13,7 +13,7 @@ export function useBottomSheetBackHandler(bottomSheetRef) {
13
13
  // Setup the back handler if the bottom sheet is right in front of the user
14
14
  backHandlerSubscriptionRef.current = BackHandler.addEventListener("hardwareBackPress", () => {
15
15
  var _a;
16
- (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
16
+ (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.dismiss();
17
17
  return true;
18
18
  });
19
19
  }
@@ -1,17 +1,15 @@
1
1
  import React from "react";
2
2
  import { View } from "react-native";
3
- import { Portal } from "react-native-portalize";
4
3
  import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
5
4
  import { BottomSheet } from "../../../BottomSheet/BottomSheet";
6
5
  export function SecondaryActionSheet({ actions, secondaryActionsRef, heading, showCancel, onOpenBottomSheet, onCloseBottomSheet, }) {
7
- return (React.createElement(Portal, null,
8
- React.createElement(BottomSheet, { heading: heading, showCancel: showCancel, ref: secondaryActionsRef, onOpen: onOpenBottomSheet, onClose: onCloseBottomSheet },
9
- React.createElement(View, null, actions.map((action, index) => {
10
- const { label, onPress, icon, iconColor, destructive } = action;
11
- return (React.createElement(BottomSheetOption, { destructive: destructive, key: index, text: label, onPress: () => {
12
- var _a;
13
- (_a = secondaryActionsRef === null || secondaryActionsRef === void 0 ? void 0 : secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
14
- onPress();
15
- }, icon: icon, iconColor: iconColor }));
16
- })))));
6
+ return (React.createElement(BottomSheet, { heading: heading, showCancel: showCancel, ref: secondaryActionsRef, onOpen: onOpenBottomSheet, onClose: onCloseBottomSheet },
7
+ React.createElement(View, null, actions.map((action, index) => {
8
+ const { label, onPress, icon, iconColor, destructive } = action;
9
+ return (React.createElement(BottomSheetOption, { destructive: destructive, key: index, text: label, onPress: () => {
10
+ var _a;
11
+ (_a = secondaryActionsRef === null || secondaryActionsRef === void 0 ? void 0 : secondaryActionsRef.current) === null || _a === void 0 ? void 0 : _a.close();
12
+ onPress();
13
+ }, icon: icon, iconColor: iconColor }));
14
+ }))));
17
15
  }
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import { Portal } from "react-native-portalize";
3
2
  import { BottomSheet } from "../../../BottomSheet/BottomSheet";
4
3
  import { BottomSheetOption } from "../../../BottomSheet/components/BottomSheetOption";
5
4
  import { useAtlantisI18n } from "../../../hooks/useAtlantisI18n";
@@ -10,12 +9,11 @@ export const FormatFileBottomSheet = ({ bottomSheetRef, onPreviewPress, onRemove
10
9
  onPressAction();
11
10
  (_a = bottomSheetRef.current) === null || _a === void 0 ? void 0 : _a.close();
12
11
  };
13
- return (React.createElement(Portal, null,
14
- React.createElement(BottomSheet, { ref: bottomSheetRef },
15
- onPreviewPress ? (React.createElement(BottomSheetOption, { icon: "eye", text: t("FormatFile.preview", {
16
- item: bottomSheetOptionsSuffix || "",
17
- }), onPress: () => handlePress(onPreviewPress) })) : undefined,
18
- onRemovePress ? (React.createElement(BottomSheetOption, { icon: "trash", destructive: true, text: t("FormatFile.remove", {
19
- item: bottomSheetOptionsSuffix || "",
20
- }), onPress: () => handlePress(onRemovePress) })) : undefined)));
12
+ return (React.createElement(BottomSheet, { ref: bottomSheetRef },
13
+ onPreviewPress ? (React.createElement(BottomSheetOption, { icon: "eye", text: t("FormatFile.preview", {
14
+ item: bottomSheetOptionsSuffix || "",
15
+ }), onPress: () => handlePress(onPreviewPress) })) : undefined,
16
+ onRemovePress ? (React.createElement(BottomSheetOption, { icon: "trash", destructive: true, text: t("FormatFile.remove", {
17
+ item: bottomSheetOptionsSuffix || "",
18
+ }), onPress: () => handlePress(onRemovePress) })) : undefined));
21
19
  };
package/dist/src/index.js CHANGED
@@ -2,6 +2,7 @@ export * from "./ActionItem";
2
2
  export * from "./ActionLabel";
3
3
  export * from "./ActivityIndicator";
4
4
  export * from "./AtlantisContext";
5
+ export * from "./AtlantisOverlayProvider";
5
6
  export * from "./AtlantisThemeContext";
6
7
  export * from "./AutoLink";
7
8
  export * from "./Banner";
@@ -35,7 +36,6 @@ export * from "./InputPressable";
35
36
  export * from "./InputSearch";
36
37
  export * from "./InputText";
37
38
  export * from "./InputTime";
38
- export * from "./Menu";
39
39
  export * from "./ProgressBar";
40
40
  export * from "./Select";
41
41
  export * from "./StatusLabel";
@@ -9,6 +9,7 @@
9
9
  "AtlantisContext.Provider",
10
10
  "AtlantisFormContext.Consumer",
11
11
  "AtlantisFormContext.Provider",
12
+ "AtlantisOverlayProvider",
12
13
  "AtlantisThemeContextProvider",
13
14
  "AutoLink",
14
15
  "Banner",
@@ -56,7 +57,6 @@
56
57
  "InputSearch",
57
58
  "InputText",
58
59
  "InputTime",
59
- "Menu",
60
60
  "Option",
61
61
  "ProgressBar",
62
62
  "Select",