@telus-uds/components-base 1.19.0 → 1.19.1

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 14 Oct 2022 19:26:37 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Oct 2022 19:30:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
 ## 1.19.0
 
-Fri, 14 Oct 2022 19:26:37 GMT
+Fri, 14 Oct 2022 19:30:03 GMT
 
 ### Minor changes
 

package/lib/ActivityIndicator/Spinner.js

@@ -23,14 +23,14 @@ const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: "".concat(_shared.DURATION, "ms"),
+  dur: `${_shared.DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: "".concat(_shared.BEZIER.join(', '), " ; ").concat(_shared.BEZIER.join(', '))
+  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.BEZIER.join(', ')}`
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
@@ -46,8 +46,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _A11yInfoProvider.useA11yInfo)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     ref: ref,
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px"),
+    width: `${size}px`,
+    height: `${size}px`,
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
@@ -56,7 +56,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children: [reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
+        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
         ...animationProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
         fill: "none",
@@ -71,12 +71,12 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         children: reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",
-            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
             ...animationProps,
             ...bezierProps
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dasharray",
-            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
             ...animationProps,
             ...bezierProps
           })]

package/lib/ActivityIndicator/Spinner.native.js

@@ -95,7 +95,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           }
 
           const direction = index ? -1 : +1;
-          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
         });
         const layerStyle = {
           width: size,
@@ -110,7 +110,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
           }];
           viewportStyle.transform = [{

package/lib/BaseProvider/HydrationContext.js

@@ -59,7 +59,7 @@ const HydrationProvider = _ref => {
   }, []); // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
 
   const valueFromAncestor = useHydrationContext();
-  const isHydrating = valueFromAncestor !== null && valueFromAncestor !== void 0 ? valueFromAncestor : Boolean(!hasMounted && hasWebStyleTag());
+  const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(HydrationContext.Provider, {
     value: isHydrating,
     children: children

package/lib/BaseProvider/TamaguiProvider.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsMultiPlatform = require("@telus-uds/components-multi-platform");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TamaguiWrapper = _ref => {
+  let {
+    extended,
+    children
+  } = _ref;
+  console.log('extended', extended);
+  return extended ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsMultiPlatform.TamaguiProvider, {
+    config: _componentsMultiPlatform.config,
+    disableInjectCSS: true,
+    defaultTheme: "light",
+    children: children
+  }) : children;
+};
+TamaguiWrapper.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  extended: _propTypes.default.bool
+};
+var _default = TamaguiWrapper;
+exports.default = _default;

package/lib/Button/ButtonBase.js

@@ -100,7 +100,7 @@ const selectOuterWidthStyles = _ref3 => {
 
 
   if (_Platform.default.OS === 'web') {
-    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
+    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     return widthStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
@@ -187,7 +187,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
-      maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
       outline: 'none',
       // removes the default browser :focus outline
       ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)

package/lib/Button/ButtonDropdown.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
+
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _StackView = require("../StackView");
+
+var _pressability = require("../utils/pressability");
+
+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; }
+
+const selectIconTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconWrapperStyle: {
+      backgroundColor: iconBackground,
+      borderRadius: iconBorderRadius,
+      alignSelf: iconAlignSelf,
+      padding: iconPadding,
+      ..._Platform.default.select({
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        web: {
+          transition: 'color 200ms, background 200ms'
+        }
+      })
+    },
+    iconTokens: {
+      size: iconSize,
+      color: iconColor,
+      translateX: iconTranslateX,
+      translateY: iconTranslateY
+    }
+  };
+};
+
+const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    value,
+    initialValue,
+    onChange,
+    label,
+    tokens,
+    variant,
+    inactive = false,
+    readOnly = false,
+    children = null,
+    accessibilityRole = 'radio',
+    ...props
+  } = _ref2;
+  const {
+    currentValue: isOpen,
+    setValue: setIsOpen
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  }, 'useButtonDropdownValues');
+  const extraState = {
+    open: isOpen,
+    inactive,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
+
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState)); // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(props, [{
+    label,
+    open: isOpen
+  }]);
+
+  const handlePress = event => {
+    if (!inactive) {
+      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+      setIsOpen(!isOpen, event);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...pressHandlers,
+    onPress: handlePress,
+    tokens: getButtonTokens,
+    inactive: inactive,
+    icon: () => null,
+    accessibilityRole: accessibilityRole,
+    ...props,
+    children: _ref3 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref3;
+      // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
+      // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
+      // - Icon: https://github.com/telus/universal-design-system/issues/327
+      // - IconButton: https://github.com/telus/universal-design-system/issues/281
+      // - Token sets: https://github.com/telus/universal-design-system/issues/782
+      const itemTokens = getTokens(buttonState);
+      const {
+        iconTokens,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle,
+        icon: IconComponent
+      } = selectIconTokens(itemTokens);
+      const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: iconWrapperStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: IconComponent,
+          tokens: iconTokens
+        })
+      }) : null;
+
+      const childrenContent = () => typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(buttonState, extraState),
+        textStyles
+      }) : children;
+
+      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: textStyles,
+        children: label
+      });
+      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
+        space: iconSpace,
+        direction: 'row'
+      });
+    }
+  });
+});
+ButtonDropdown.displayName = 'ButtonDropdown';
+ButtonDropdown.propTypes = { ..._utils.a11yProps.types,
+  ..._utils.focusHandlerProps.types,
+  ..._propTypes2.default,
+  children: _propTypes2.textAndA11yText,
+
+  /**
+   * Callback called when a controlled ButtonDropdown gets interacted with.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
+   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
+   */
+  value: _propTypes.default.bool,
+
+  /**
+   * Use `initialValue` to provide the initial value for an uncontrolled version.
+   */
+  initialValue: _propTypes.default.bool,
+
+  /**
+   * The label of ButtonDropdown.
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
+   */
+  accessibilityRole: _propTypes.default.string
+};
+var _default = ButtonDropdown;
+exports.default = _default;

package/lib/Button/ButtonGroup.js

@@ -92,7 +92,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("ButtonGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
   } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
 
 

package/lib/Carousel/Carousel.js

@@ -157,8 +157,6 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  */
 
 const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
-  var _systemProps$accessib;
-
   let {
     tokens,
     variant,
@@ -447,7 +445,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
 
-    return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
+    return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
 
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
@@ -471,7 +469,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   // otherwise read the current position on focus
 
 
-  const containerAccessibilityLabel = ((_systemProps$accessib = systemProps.accessibilityLabel) !== null && _systemProps$accessib !== void 0 ? _systemProps$accessib : isFirstFocusContainer) ? "".concat(title ? "".concat(title, " ") : '').concat(getCopyWithPlaceholders('stepTrackerLabel')) : title;
+  const containerAccessibilityLabel = systemProps.accessibilityLabel ?? isFirstFocusContainer ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}` : title;
   const containerProps = {
     accessibilityLabel: containerAccessibilityLabel,
     // If used for focus, attach the ref and draw a focus box around the whole carousel

package/lib/Carousel/CarouselContext.js

@@ -54,7 +54,7 @@ function useCarousel() {
   const context = _react.default.useContext(CarouselContext);
 
   if (context === undefined) {
-    throw new Error("'useCarousel' must be used within a 'CarouselProvider'");
+    throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
   }
 
   return context;

package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -40,7 +40,7 @@ const CarouselFirstFocus = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _CarouselContext.useCarousel)(); // TODO: integrate skip link description if behaving as skip link.
   // Consider moving this content to aria-live area while only the skip link is focused.
 
-  const accessibilityLabel = "".concat(title, ", ").concat(getCopyWithPlaceholders('stepTrackerLabel'));
+  const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
 
   const accessibilityRole = _Platform.default.select({
     web: 'link',

package/lib/Carousel/CarouselThumbnail.js

@@ -38,7 +38,7 @@ const CarouselThumbnail = _ref => {
     goTo,
     themeTokens
   } = (0, _CarouselContext.useCarousel)();
-  const thumbnailTitle = alt !== null && alt !== void 0 ? alt : getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+  const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
 
   const handlePress = () => goTo(index);
 
@@ -81,7 +81,7 @@ const CarouselThumbnail = _ref => {
     style: [styles.pressable, index === activeIndex && styles.selected],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      accessibilityLabel: accessibilityLabel ?? alt,
       source: src,
       style: styles.image,
       title: thumbnailTitle

package/lib/Checkbox/Checkbox.js

@@ -215,7 +215,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   };
 
   const uniqueId = (0, _useUniqueId.default)('checkbox');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();

package/lib/Checkbox/CheckboxGroup.js

@@ -120,7 +120,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("CheckboxGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const checkboxes = items.map((_ref2, index) => {
@@ -131,7 +131,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const checkboxId = id || "Checkbox[".concat(index, "]");
+    const checkboxId = id || `Checkbox[${index}]`;
 
     const handleChange = (newCheckedState, event) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib/Divider/Divider.js

@@ -116,9 +116,9 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
+      testID: testID ? `${testID}-Spacer-before` : undefined
     }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
+      testID: testID ? `${testID}-Spacer-after` : undefined
     })]
   });
 });

package/lib/FlexGrid/Col/Col.js

@@ -69,7 +69,7 @@ const Col = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const horizontalAlignLevel = getHorizontalAlignLevel();
 
   const toPercent = num => {
-    return "".concat(num / 12 * 100, "%");
+    return `${num / 12 * 100}%`;
   };
 
   const calculateWidth = value => {

package/lib/Icon/Icon.js

@@ -48,7 +48,7 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     },
     dataSet: dataSet,
     children: iconContent

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _portal = require("@gorhom/portal");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+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; }
+
+const staticStyles = _StyleSheet.default.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    height: 330,
+    paddingTop: 5,
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});
+
+const selectCloseButtonContainerStyles = _ref => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
+
+const selectPaddingContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _ref2;
+  return {
+    paddingBottom: 35,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    onClose
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const {
+    closeIcon: CloseIconComponent,
+    maxWidth
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [{
+          minWidth: maxWidth
+        }, staticStyles.positioner],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+          tokens: selectPaddingContainerStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              onPress: onClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
+            })
+          }), children]
+        })
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  copy: _utils.copyPropTypes,
+  onClose: _propTypes.default.func
+};
+var _default = ModalOverlay;
+exports.default = _default;