@coinbase/cds-mobile 8.59.0 → 8.61.0

package/esm/buttons/IconButton.js

@@ -1,14 +1,15 @@
-const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "feedback", "flush", "loading", "style", "accessibilityHint", "accessibilityLabel"];
+const _excluded = ["name", "active", "variant", "transparent", "compact", "background", "color", "borderColor", "iconSize", "borderWidth", "borderRadius", "height", "width", "feedback", "flush", "loading", "progressCircleSize", "style", "accessibilityHint", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo, useCallback, useMemo } from 'react';
-import { ActivityIndicator } from 'react-native';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { transparentVariants, variants } from '@coinbase/cds-common/tokens/button';
 import { interactableHeight } from '@coinbase/cds-common/tokens/interactableHeight';
 import { getButtonSpacingProps } from '@coinbase/cds-common/utils/getButtonSpacingProps';
 import { useTheme } from '../hooks/useTheme';
 import { Icon } from '../icons/Icon';
+import { Box } from '../layout/Box';
 import { Pressable } from '../system/Pressable';
+import { ProgressCircle } from '../visualizations/ProgressCircle';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function IconButton(_ref, ref) {
   let {
@@ -23,21 +24,24 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
       iconSize = compact ? 's' : 'm',
       borderWidth = 100,
       borderRadius = 1000,
+      height = interactableHeight[compact ? 'compact' : 'regular'],
+      width = interactableHeight[compact ? 'compact' : 'regular'],
       feedback = compact ? 'light' : 'normal',
       flush,
       loading,
+      progressCircleSize,
       style,
       accessibilityHint,
       accessibilityLabel
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
+  const iconSizeValue = theme.iconSize[iconSize];
   const variantMap = transparent ? transparentVariants : variants;
   const variantStyle = variantMap[variant];
   const colorValue = color != null ? color : variantStyle.color;
   const backgroundValue = background != null ? background : variantStyle.background;
   const borderColorValue = borderColor != null ? borderColor : variantStyle.borderColor;
-  const minHeight = interactableHeight[compact ? 'compact' : 'regular'];
   const {
     marginStart,
     marginEnd
@@ -46,12 +50,12 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
     flush
   });
   const sizingStyle = useMemo(() => ({
-    height: minHeight,
-    width: minHeight,
+    height: height,
+    width: width,
     alignItems: 'center',
     flexDirection: 'column',
     justifyContent: 'center'
-  }), [minHeight]);
+  }), [height, width]);
   const pressableStyle = useCallback(state => [sizingStyle, typeof style === 'function' ? style(state) : style], [sizingStyle, style]);
   return /*#__PURE__*/_jsx(Pressable, _extends({
     ref: ref,
@@ -68,11 +72,18 @@ export const IconButton = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function Ico
     style: pressableStyle,
     transparentWhileInactive: transparent
   }, props, {
-    children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-      color: theme.color[colorValue],
-      size: "small",
-      style: sizingStyle,
-      testID: props.testID ? props.testID + "-activity-indicator" : undefined
+    children: loading ? /*#__PURE__*/_jsx(Box, {
+      alignItems: "center",
+      height: height,
+      justifyContent: "center",
+      width: width,
+      children: /*#__PURE__*/_jsx(ProgressCircle, {
+        indeterminate: true,
+        color: colorValue,
+        size: progressCircleSize != null ? progressCircleSize : iconSizeValue,
+        testID: props.testID ? props.testID + "-progress-circle" : undefined,
+        weight: "thin"
+      })
     }) :
     /*#__PURE__*/
     /* TO DO: test using currentColor like web does on Icon here */

package/esm/buttons/__stories__/Button.stories.js

@@ -44,6 +44,34 @@ const buttonStories = [{
 }, {
   loading: true,
   compact: true
+}, {
+  loading: true,
+  transparent: true
+}, {
+  loading: true,
+  transparent: true,
+  compact: true
+}, {
+  loading: true,
+  variant: 'secondary'
+}, {
+  loading: true,
+  variant: 'secondary',
+  compact: true
+}, {
+  loading: true,
+  variant: 'positive'
+}, {
+  loading: true,
+  variant: 'positive',
+  compact: true
+}, {
+  loading: true,
+  variant: 'negative'
+}, {
+  loading: true,
+  variant: 'negative',
+  compact: true
 }, {
   startIcon: 'backArrow'
 }, {
@@ -194,6 +222,38 @@ const ButtonScreen = () => {
         },
         children: "Hello world"
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "Small",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          height: 32,
+          paddingY: 0,
+          children: "I am a button"
+        }), /*#__PURE__*/_jsx(Button, {
+          loading: true,
+          height: 32,
+          paddingY: 0,
+          children: "I am a button"
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(Button, {
+          compact: true,
+          height: 24,
+          paddingY: 0,
+          progressCircleSize: 16,
+          children: "I am a button"
+        }), /*#__PURE__*/_jsx(Button, {
+          compact: true,
+          loading: true,
+          height: 24,
+          paddingY: 0,
+          progressCircleSize: 16,
+          children: "I am a button"
+        })]
+      })]
     })]
   });
 };

package/esm/buttons/__stories__/IconButton.stories.js

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import { names } from '@coinbase/cds-icons/names';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { HStack } from '../../layout';
+import { HStack, VStack } from '../../layout';
 import { Box } from '../../layout/Box';
 import { Text } from '../../typography/Text';
 import { IconButton } from '../IconButton';
@@ -123,6 +123,20 @@ const IconButtonScreen = () => {
           font: "body",
           children: "Disabled secondary"
         })]
+      }), /*#__PURE__*/_jsxs(Box, {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: 350,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          loading: true,
+          accessibilityLabel: accessibilityLabel,
+          name: iconName,
+          variant: "primary"
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "body",
+          children: "Loading primary"
+        })]
       })]
     }), /*#__PURE__*/_jsx(Example, {
       inline: true,
@@ -168,6 +182,107 @@ const IconButtonScreen = () => {
           })]
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      inline: true,
+      title: "Loading",
+      children: /*#__PURE__*/_jsxs(VStack, {
+        gap: 3,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading by variant"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "primary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "secondary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "foregroundMuted"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              transparent: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "primary"
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              transparent: true,
+              accessibilityLabel: "Loading",
+              name: iconName,
+              variant: "secondary"
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading by icon size"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "xs",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "s",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              iconSize: "m",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              compact: false,
+              iconSize: "l",
+              name: iconName
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(Box, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "label2",
+            style: {
+              marginBottom: 8
+            },
+            children: "Loading compact vs regular"
+          }), /*#__PURE__*/_jsxs(HStack, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              compact: true,
+              loading: true,
+              accessibilityLabel: "Loading",
+              name: iconName
+            }), /*#__PURE__*/_jsx(IconButton, {
+              loading: true,
+              accessibilityLabel: "Loading",
+              compact: false,
+              name: iconName
+            })]
+          })]
+        })]
+      })
     }), /*#__PURE__*/_jsx(Example, {
       title: "All",
       children: names.map(name => {
@@ -207,6 +322,38 @@ const IconButtonScreen = () => {
           }), variant.title]
         }, index);
       })
+    }), /*#__PURE__*/_jsxs(Example, {
+      inline: true,
+      title: "Small",
+      children: [/*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: accessibilityLabel,
+        height: 32,
+        name: iconName,
+        onPress: onPress,
+        width: 32
+      }), /*#__PURE__*/_jsx(IconButton, {
+        loading: true,
+        accessibilityLabel: accessibilityLabel,
+        height: 32,
+        name: iconName,
+        onPress: onPress,
+        width: 32
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        accessibilityLabel: accessibilityLabel,
+        height: 24,
+        name: iconName,
+        onPress: onPress,
+        width: 24
+      }), /*#__PURE__*/_jsx(IconButton, {
+        compact: true,
+        loading: true,
+        accessibilityLabel: accessibilityLabel,
+        height: 24,
+        name: iconName,
+        onPress: onPress,
+        width: 24
+      })]
     })]
   });
 };

package/esm/cards/Card.js

@@ -39,6 +39,11 @@ const getBorderRadiusPinStyle = borderRadius => ({
   },
   all: {}
 });
+
+/**
+ * @deprecated Use ContentCard instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const Card = /*#__PURE__*/memo(function OldCard(_ref) {
   let {
       children,

package/esm/cards/CardBody.js

@@ -31,6 +31,11 @@ const CardBodyAction = /*#__PURE__*/memo(function CardBodyAction(_ref) {
     children: children
   }));
 });
+
+/**
+ * @deprecated Use ContentCardBody instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardBody = /*#__PURE__*/memo(function CardBody(_ref2) {
   var _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref0, _props$maxWidth, _props$minHeight;
   let {

package/esm/cards/CardFooter.js

@@ -5,6 +5,10 @@ import React, { memo } from 'react';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { HStack } from '../layout/HStack';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use ContentCardFooter instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardFooter = /*#__PURE__*/memo(function CardFooter(_ref) {
   let {
       children,

package/esm/cards/CardGroup.js

@@ -5,7 +5,21 @@ import React, { forwardRef, memo } from 'react';
 import { gutter } from '@coinbase/cds-common/tokens/sizing';
 import { Divider } from '../layout/Divider';
 import { Group } from '../layout/Group';
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
+
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `Box`, `HStack` or `VStack` instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardGroup = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function CardGroup(_ref, ref) {
   let {
       accessibilityLabel,

package/esm/cards/CardHeader.js

@@ -2,7 +2,16 @@ import React, { memo } from 'react';
 import { HStack } from '../layout/HStack';
 import { RemoteImage } from '../media/RemoteImage';
 import { Text } from '../typography/Text';
+
+/**
+ * @deprecated Use ContentCardHeaderProps instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @deprecated Use ContentCardHeader instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardHeader = /*#__PURE__*/memo(_ref => {
   let {
     avatar,

package/esm/cards/CardMedia.js

@@ -5,6 +5,11 @@ import { memo } from 'react';
 import { defaultMediaDimension, defaultMediaSize, defaultPictogramMediaDimension } from '@coinbase/cds-common/tokens/card';
 import { Pictogram, SpotSquare } from '../illustrations';
 import { getSource, RemoteImage } from '../media/RemoteImage';
+
+/**
+ * @deprecated Use SpotSquare when `type` is "spotSquare", Pictogram when `type` is "pictogram", or RemoteImage when `type` is "image". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 const imageProps = {
   start: {
@@ -17,6 +22,11 @@ const imageProps = {
   },
   end: defaultMediaSize
 };
+
+/**
+ * @deprecated Use SpotSquare when `type` is "spotSquare", Pictogram when `type` is "pictogram", or RemoteImage when `type` is "image". This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const CardMedia = /*#__PURE__*/memo(function CardMedia(_ref) {
   var _props$alt;
   let {

package/esm/loaders/Spinner.js

@@ -4,6 +4,11 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { memo } from 'react';
 import { ActivityIndicator } from 'react-native';
 import { useTheme } from '../hooks/useTheme';
+
+/**
+ * @deprecated Use indeterminate ProgressCircle or ActivityIndicator component instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Spinner = /*#__PURE__*/memo(function Spinner(_ref) {
   let {

package/esm/overlays/__stories__/AlertBasic.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       dismissActionLabel: "Cancel",

package/esm/overlays/__stories__/AlertLongTitle.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const LongTitleAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       dismissActionLabel: "Cancel",

package/esm/overlays/__stories__/AlertOverModal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
 import { useModal } from '@coinbase/cds-common/overlays/useModal';
 import { Button } from '../../buttons/Button';
@@ -48,17 +48,9 @@ const AlertOnModal = () => {
       })]
     }));
   }, [closeModal, openModal, showAlert]);
-  useEffect(() => {
-    handlePress();
-    showAlert();
-    return () => {
-      close();
-      closeModal();
-    };
-  }, [close, closeModal, handlePress, showAlert]);
   return /*#__PURE__*/_jsx(Button, {
     onPress: handlePress,
-    children: "Open Modal"
+    children: "Open"
   });
 };
 const AlertOverModalScreen = () => {

package/esm/overlays/__stories__/AlertPortal.stories.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useAlert } from '@coinbase/cds-common/overlays/useAlert';
 import { Button } from '../../buttons/Button';
 import { Example, ExampleScreen } from '../../examples/ExampleScreen';
@@ -27,13 +27,9 @@ const AlertExample = () => {
     preferredActionVariant: "negative",
     title: "Alert title"
   })), [open, close, handleAction]);
-  useEffect(() => {
-    showAlert();
-    return () => close();
-  }, [close, showAlert]);
   return /*#__PURE__*/_jsx(Button, {
     onPress: showAlert,
-    children: "Show Alert"
+    children: "Open"
   });
 };
 const AlertPortalScreen = () => {

package/esm/overlays/__stories__/AlertSingleAction.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SingleActionAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       body: "Alert body type that can run over multiple lines, but should be kept short.",
       onPreferredActionPress: handleAction,

package/esm/overlays/__stories__/AlertVerticalActions.stories.js

@@ -4,14 +4,14 @@ import { Example, ExampleScreen } from '../../examples/ExampleScreen';
 import { Alert } from '../Alert';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const BasicAlert = () => {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const handleShow = useCallback(() => setVisible(true), []);
   const handleClose = useCallback(() => setVisible(false), []);
   const handleAction = useCallback(() => console.log('pressed'), []);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       onPress: handleShow,
-      children: "Show Alert"
+      children: "Open"
     }), /*#__PURE__*/_jsx(Alert, {
       actionLayout: "vertical",
       body: "Alert body type that can run over multiple lines, but should be kept short.",

package/esm/overlays/__stories__/DrawerFallback.stories.js

@@ -5,7 +5,10 @@ import { Fallback, Spacer, VStack } from '../../layout';
 import { Drawer } from '../drawer/Drawer';
 import { navOptions, SideDrawerContent } from './Drawers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const SidebarDrawerContentFallback = () => {
+const SidebarDrawerContentFallback = _ref => {
+  let {
+    handleClose
+  } = _ref;
   return /*#__PURE__*/_jsxs(VStack, {
     height: "100%",
     justifyContent: "space-between",
@@ -30,28 +33,30 @@ const SidebarDrawerContentFallback = () => {
         height: 50,
         shape: "squircle",
         width: "100%"
-      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref => {
+      }), /*#__PURE__*/_jsx(Spacer, {}), navOptions.map(_ref2 => {
         let {
           label
-        } = _ref;
+        } = _ref2;
         return /*#__PURE__*/_jsx(Fallback, {
           height: 30,
           shape: "square",
           width: "100%"
         }, label);
       })]
-    }), /*#__PURE__*/_jsx(Fallback, {
-      height: 50,
-      shape: "squircle",
-      width: "100%"
+    }), /*#__PURE__*/_jsx(Button, {
+      block: true,
+      compact: true,
+      onPress: handleClose,
+      variant: "secondary",
+      children: "Cancel"
     })]
   });
 };
-const SideDrawerWithFallback = _ref2 => {
+const SideDrawerWithFallback = _ref3 => {
   let {
     pin = 'left'
-  } = _ref2;
-  const [isVisible, setIsVisible] = useState(true);
+  } = _ref3;
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
   const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
   const [isLoading, setIsLoading] = useState(true);
@@ -68,11 +73,13 @@ const SideDrawerWithFallback = _ref2 => {
     }), isVisible && /*#__PURE__*/_jsx(Drawer, {
       onCloseComplete: setIsVisibleToOff,
       pin: pin,
-      children: _ref3 => {
+      children: _ref4 => {
         let {
           handleClose
-        } = _ref3;
-        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {}) : /*#__PURE__*/_jsx(SideDrawerContent, {
+        } = _ref4;
+        return isLoading ? /*#__PURE__*/_jsx(SidebarDrawerContentFallback, {
+          handleClose: handleClose
+        }) : /*#__PURE__*/_jsx(SideDrawerContent, {
           handleClose: handleClose
         });
       }

package/esm/overlays/__stories__/DrawerScrollable.stories.js

@@ -14,7 +14,7 @@ const SideDrawerScrollableContent = _ref => {
   let {
     pin = 'left'
   } = _ref;
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(false);
   const setIsVisibleToOn = useCallback(() => setIsVisible(true), []);
   const setIsVisibleToOff = useCallback(() => setIsVisible(false), []);
   const drawerRef = useRef(null);
@@ -65,6 +65,13 @@ const SideDrawerScrollableContent = _ref => {
           data: lotsOfOptions,
           renderItem: renderItem
         })
+      }), /*#__PURE__*/_jsx(VStack, {
+        padding: 2,
+        children: /*#__PURE__*/_jsx(Button, {
+          onPress: handleOptionPress,
+          variant: "secondary",
+          children: "Cancel"
+        })
       })]
     })]
   });