@telus-uds/components-base 1.65.0 → 1.67.0

package/lib/index.js

@@ -13,6 +13,7 @@ var _exportNames = {
   Listbox: true,
   Checkbox: true,
   CheckboxCard: true,
+  CheckboxCardGroup: true,
   Divider: true,
   ExpandCollapse: true,
   Accordion: true,
@@ -130,6 +131,12 @@ Object.defineProperty(exports, "CheckboxCard", {
     return _CheckboxCard.default;
   }
 });
+Object.defineProperty(exports, "CheckboxCardGroup", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxCardGroup.default;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {
@@ -460,17 +467,11 @@ Object.defineProperty(exports, "useViewport", {
     return _ViewportProvider.useViewport;
   }
 });
-
 var _A11yText = _interopRequireDefault(require("./A11yText"));
-
 var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
-
 var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
-
 var _Box = _interopRequireDefault(require("./Box"));
-
 var _Button = require("./Button");
-
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -482,11 +483,8 @@ Object.keys(_Button).forEach(function (key) {
     }
   });
 });
-
 var _Card = _interopRequireWildcard(require("./Card"));
-
 var _Carousel = require("./Carousel");
-
 Object.keys(_Carousel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -498,11 +496,8 @@ Object.keys(_Carousel).forEach(function (key) {
     }
   });
 });
-
 var _Listbox = _interopRequireDefault(require("./Listbox"));
-
 var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
-
 Object.keys(_Checkbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -514,21 +509,14 @@ Object.keys(_Checkbox).forEach(function (key) {
     }
   });
 });
-
 var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
-
+var _CheckboxCardGroup = _interopRequireDefault(require("./CheckboxCardGroup"));
 var _Divider = _interopRequireDefault(require("./Divider"));
-
 var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
-
 var _Feedback = _interopRequireDefault(require("./Feedback"));
-
 var _Fieldset = _interopRequireDefault(require("./Fieldset"));
-
 var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
-
 var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
-
 Object.keys(_HorizontalScroll).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -540,9 +528,7 @@ Object.keys(_HorizontalScroll).forEach(function (key) {
     }
   });
 });
-
 var _Icon = _interopRequireWildcard(require("./Icon"));
-
 Object.keys(_Icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -554,15 +540,10 @@ Object.keys(_Icon).forEach(function (key) {
     }
   });
 });
-
 var _IconButton = _interopRequireDefault(require("./IconButton"));
-
 var _InputLabel = _interopRequireDefault(require("./InputLabel"));
-
 var _InputSupports = _interopRequireDefault(require("./InputSupports"));
-
 var _Link = require("./Link");
-
 Object.keys(_Link).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -574,25 +555,15 @@ Object.keys(_Link).forEach(function (key) {
     }
   });
 });
-
 var _List = _interopRequireWildcard(require("./List"));
-
 var _Modal = _interopRequireDefault(require("./Modal"));
-
 var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
-
 var _Notification = _interopRequireDefault(require("./Notification"));
-
 var _Pagination = _interopRequireDefault(require("./Pagination"));
-
 var _Progress = _interopRequireDefault(require("./Progress"));
-
 var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
-
 var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));
-
 var _Radio = _interopRequireWildcard(require("./Radio"));
-
 Object.keys(_Radio).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -604,9 +575,7 @@ Object.keys(_Radio).forEach(function (key) {
     }
   });
 });
-
 var _RadioCard = _interopRequireWildcard(require("./RadioCard"));
-
 Object.keys(_RadioCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -618,23 +587,14 @@ Object.keys(_RadioCard).forEach(function (key) {
     }
   });
 });
-
 var _Responsive = _interopRequireDefault(require("./Responsive"));
-
 var _Search = _interopRequireDefault(require("./Search"));
-
 var _Select = _interopRequireDefault(require("./Select"));
-
 var _SideNav = _interopRequireDefault(require("./SideNav"));
-
 var _Skeleton = _interopRequireDefault(require("./Skeleton"));
-
 var _SkipLink = _interopRequireDefault(require("./SkipLink"));
-
 var _Spacer = _interopRequireDefault(require("./Spacer"));
-
 var _StackView = _interopRequireWildcard(require("./StackView"));
-
 Object.keys(_StackView).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -646,15 +606,10 @@ Object.keys(_StackView).forEach(function (key) {
     }
   });
 });
-
 var _StepTracker = _interopRequireDefault(require("./StepTracker"));
-
 var _Tabs = _interopRequireDefault(require("./Tabs"));
-
 var _Tags = _interopRequireDefault(require("./Tags"));
-
 var _TextInput = require("./TextInput");
-
 Object.keys(_TextInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -666,11 +621,8 @@ Object.keys(_TextInput).forEach(function (key) {
     }
   });
 });
-
 var _Timeline = _interopRequireDefault(require("./Timeline"));
-
 var _ToggleSwitch = require("./ToggleSwitch");
-
 Object.keys(_ToggleSwitch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -682,27 +634,16 @@ Object.keys(_ToggleSwitch).forEach(function (key) {
     }
   });
 });
-
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
-
 var _TooltipButton = _interopRequireDefault(require("./TooltipButton"));
-
 var _Typography = _interopRequireDefault(require("./Typography"));
-
 var _A11yInfoProvider = _interopRequireWildcard(require("./A11yInfoProvider"));
-
 var _BaseProvider = _interopRequireDefault(require("./BaseProvider"));
-
 var _HydrationContext = require("./BaseProvider/HydrationContext");
-
 var _Validator = _interopRequireDefault(require("./Validator"));
-
 var _ViewportProvider = _interopRequireWildcard(require("./ViewportProvider"));
-
 var _ThemeProvider = _interopRequireWildcard(require("./ThemeProvider"));
-
 var _utils = require("./utils");
-
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -714,11 +655,7 @@ Object.keys(_utils).forEach(function (key) {
     }
   });
 });
-
 var _portal = require("@gorhom/portal");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/BaseView/BaseView.js

@@ -4,30 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ThemeProvider = require("../../ThemeProvider");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * Identical to React Native's View and supporting all the same props, but with:
  *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
- */
-const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     style,
@@ -37,25 +26,22 @@ const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
   const styleProp = Array.isArray(style) ? [...style] : [style];
-
   if (!themeOptions.forceZIndex) {
     styleProp.unshift(styles.resetZIndex);
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...rest,
     style: styleProp,
     ref: ref,
     children: children
   });
 });
 BaseView.displayName = 'BaseView';
-
 const styles = _StyleSheet.default.create({
   resetZIndex: {
     zIndex: 'auto'
   }
 });
-
 BaseView.propTypes = {
   children: _propTypes.default.node,
   style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])

package/lib/utils/BaseView/BaseView.native.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
  */

package/lib/utils/BaseView/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _BaseView = _interopRequireDefault(require("./BaseView"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _BaseView.default;
 exports.default = _default;

package/lib/utils/a11y/index.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _textSize = require("./textSize");
-
 Object.keys(_textSize).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textSize[key]) return;
@@ -16,9 +14,7 @@ Object.keys(_textSize).forEach(function (key) {
     }
   });
 });
-
 var _semantics = require("./semantics");
-
 Object.keys(_semantics).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _semantics[key]) return;

package/lib/utils/a11y/semantics.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.textTags = exports.tagsToRoles = exports.supportedTags = exports.layoutTags = exports.headingTags = exports.getHeadingLevel = exports.getA11yPropsFromHtmlTag = void 0;
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * @typedef {import('react-native').AccessibilityRole} AccessibilityRole
  */
@@ -33,9 +30,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 // Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
 // eslint-disable-next-line prettier/prettier
-const rolesToTags =
-/** @type {const} */
-{
+const rolesToTags = /** @type {const} */{
   article: 'article',
   banner: 'header',
   blockquote: 'blockquote',
@@ -54,24 +49,23 @@ const rolesToTags =
   region: 'section',
   strong: 'strong',
   // Add special cases that are in RNW's function logic but not in its mapping object
-  label: 'label' // eslint-disable-next-line prettier/prettier
-
-}; // Invert React Native Web's mapping, so a tag gets the role that gets that tag
+  label: 'label'
+  // eslint-disable-next-line prettier/prettier
+};
 
+// Invert React Native Web's mapping, so a tag gets the role that gets that tag
 const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(_ref => {
   let [key, value] = _ref;
   return [value, key];
 }));
+
 /**
  * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
  * to headings on web but without the expectation of a hierarchy of headings within one screen.
  */
 // eslint-disable-next-line prettier/prettier
-
 exports.tagsToRoles = tagsToRoles;
-const headingTags =
-/** @type {const} */
-['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const headingTags = /** @type {const} */['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 /**
  * @typedef {typeof headingTags[number]} HeadingTag
  */
@@ -82,7 +76,6 @@ const headingTags =
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-
 exports.headingTags = headingTags;
 const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
 /**
@@ -97,11 +90,9 @@ const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
 // eslint-disable-next-line prettier/prettier
-
 exports.supportedTags = supportedTags;
-const layoutTags =
-/** @type {const} */
-[...headingTags, 'article', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label' // eslint-disable-next-line prettier/prettier
+const layoutTags = /** @type {const} */[...headingTags, 'article', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label'
+// eslint-disable-next-line prettier/prettier
 ];
 /**
  * @typedef {typeof layoutTags[number]} LayoutTag
@@ -113,11 +104,9 @@ const layoutTags =
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
 // eslint-disable-next-line prettier/prettier
-
 exports.layoutTags = layoutTags;
-const textTags =
-/** @type {const} */
-[...headingTags, 'blockquote', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label' // eslint-disable-next-line prettier/prettier
+const textTags = /** @type {const} */[...headingTags, 'blockquote', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label'
+// eslint-disable-next-line prettier/prettier
 ];
 /**
  * @typedef {typeof layoutTags[number]} TextTag
@@ -130,10 +119,9 @@ const textTags =
  * @param {string} [tag] - HTML tag string; returns undefined if not a {@link HeadingTag}
  * @returns {'1' | '2' | '3' | '4' | '5' | '6' | undefined}
  */
-
 exports.textTags = textTags;
-
 const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : undefined;
+
 /**
  * Takes a supported HTML tag, and returns the accessibility props that, on web, make React Native Web
  * render that tag.
@@ -146,16 +134,12 @@ const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : unde
  * @param {AccessibilityRole | null} [nativeRole] - optional accessibilityRole for native apps
  * @returns {{ accessibilityRole: string, accessibilityLevel?: string } | undefined}
  */
-
-
 exports.getHeadingLevel = getHeadingLevel;
-
 const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
   // Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
   if (nativeRole !== undefined && _Platform.default.OS !== 'web') return {
     accessibilityRole: nativeRole
   };
-
   if (tag) {
     // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
     const ariaRole = _Platform.default.OS === 'web' && tagsToRoles[tag];
@@ -167,11 +151,9 @@ const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
       accessibilityRole: 'header',
       accessibilityLevel
     };
-  } // If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
+  }
+  // If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
   // Note that return value may always be spread in objects (it is safe to spread undefined like { ...undefined })
-
-
   return undefined;
 };
-
 exports.getA11yPropsFromHtmlTag = getA11yPropsFromHtmlTag;

package/lib/utils/a11y/textSize.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.scaleWithText = exports.getMaxFontMultiplier = void 0;
-
 var _PixelRatio = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PixelRatio"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /**
  * When a user increases text size using device accessibility settings, some elements
  * should also scale, such as icons alongside text and space between paragraphs.
@@ -24,6 +20,7 @@ const scaleWithText = function (value) {
   const scale = Math.min(_PixelRatio.default.getFontScale(), maxScale) || 1;
   return value * scale;
 };
+
 /**
  * Native only, returns `undefined` on Web.
  *
@@ -34,10 +31,7 @@ const scaleWithText = function (value) {
  * The return value of this function can be used as a React Native `Text` element's
  * `maxFontSizeMultiplier` prop value.
  */
-
-
 exports.scaleWithText = scaleWithText;
-
 const getMaxFontMultiplier = _ref => {
   let {
     fontSize,
@@ -47,5 +41,4 @@ const getMaxFontMultiplier = _ref => {
   if (fontScaleCap <= fontSize) return 1;
   return fontScaleCap / fontSize;
 };
-
 exports.getMaxFontMultiplier = getMaxFontMultiplier;

package/lib/utils/animation/index.js

@@ -9,7 +9,5 @@ Object.defineProperty(exports, "useVerticalExpandAnimation", {
     return _useVerticalExpandAnimation.default;
   }
 });
-
 var _useVerticalExpandAnimation = _interopRequireDefault(require("./useVerticalExpandAnimation"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-
 var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _useSafeLayoutEffect = _interopRequireDefault(require("../useSafeLayoutEffect"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
 function useVerticalExpandAnimation(_ref) {
@@ -42,31 +35,27 @@ function useVerticalExpandAnimation(_ref) {
   }, [expandStateChanged, isExpanded]);
   (0, _react.useEffect)(() => {
     const onComplete = () => setIsAnimating(false);
-
     if (_Platform.default.OS === 'web') {
-      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
-      // https://github.com/necolas/react-native-web/pull/1713
+      if (!elementRef.current) return () => {};
 
+      // React Native Web does not pass `onTransitionEnd` through, must attach manually.
+      // https://github.com/necolas/react-native-web/pull/1713
       const element = elementRef.current;
       element.addEventListener('transitionend', onComplete);
       return () => element.removeEventListener('transitionend', onComplete);
     }
-
     const animationConfig = {
       duration: isExpanded ? expandDuration : collapseDuration,
       easing: _Easing.default.inOut(_Easing.default.ease),
       toValue: isExpanded ? containerHeight : 0,
       useNativeDriver: false
     };
-
     const animation = _Animated.default.timing(expandAnimatedValue, animationConfig);
-
     animation.start(onComplete);
     return () => animation.stop();
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
   const containerStyles = {};
   if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
-
   if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (_Platform.default.OS === 'web') {
       // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
@@ -76,9 +65,9 @@ function useVerticalExpandAnimation(_ref) {
       // Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
       containerStyles.opacity = 0;
     }
-  } // don't visually collapse the container until we have it measured
-
+  }
 
+  // don't visually collapse the container until we have it measured
   if (containerHeight === null) {
     if (_Platform.default.OS === 'web') {
       // on web we can hide the contents until we have the container measured and avoid occasional jitter
@@ -98,9 +87,7 @@ function useVerticalExpandAnimation(_ref) {
   } else {
     containerStyles.height = expandAnimatedValue;
   }
-
   return [containerStyles, elementRef];
 }
-
 var _default = useVerticalExpandAnimation;
 exports.default = _default;