@telus-uds/components-base 1.60.0 → 1.62.0

package/lib/Listbox/ListboxOverlay.js

@@ -0,0 +1,106 @@
+"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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _portal = require("@gorhom/portal");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+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; }
+
+/* eslint-disable react/require-default-props */
+const staticStyles = _StyleSheet.default.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    zIndex: 1000000000000000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
+  }
+});
+
+const paddingVertical = 0;
+const paddingHorizontal = 0;
+const DropdownOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    isReady = false,
+    overlaidPosition,
+    maxWidth,
+    minWidth,
+    onLayout
+  } = _ref;
+  const systemTokens = (0, _ThemeProvider.useThemeTokens)('Listbox', {}, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    onLayout: onLayout,
+    style: [overlaidPosition, {
+      maxWidth,
+      minWidth
+    }, staticStyles.positioner, !isReady && staticStyles.hidden],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+      tokens: {
+        shadow: systemTokens.shadow,
+        paddingBottom: paddingVertical,
+        paddingTop: paddingVertical,
+        paddingLeft: paddingHorizontal,
+        paddingRight: paddingHorizontal
+      },
+      children: children
+    })
+  });
+});
+
+const withPortal = Overlay => {
+  // eslint-disable-next-line react/display-name, react/no-multi-comp
+  return props => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, { ...props
+      })
+    });
+  };
+};
+
+DropdownOverlay.displayName = 'DropdownOverlay';
+DropdownOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  isReady: _propTypes.default.bool,
+  overlaidPosition: _propTypes.default.shape({
+    top: _propTypes.default.number,
+    left: _propTypes.default.number,
+    width: _propTypes.default.number
+  }),
+  maxWidth: _propTypes.default.number,
+  minWidth: _propTypes.default.number,
+  onLayout: _propTypes.default.func
+};
+
+var _default = _Platform.default.OS === 'web' ? withPortal(DropdownOverlay) : DropdownOverlay;
+
+exports.default = _default;

package/lib/Listbox/PressableItem.js

@@ -40,7 +40,6 @@ const getItemStyles = _ref => {
     itemPaddingRight,
     itemBackgroundColor,
     itemColor,
-    itemDisplay,
     itemOutline,
     itemTextDecoration,
     itemBorderLeftColor,
@@ -62,7 +61,6 @@ const getItemStyles = _ref => {
     width: '100%',
     backgroundColor: itemBackgroundColor,
     color: itemColor,
-    display: itemDisplay,
     outline: itemOutline,
     textDecoration: itemTextDecoration,
     borderLeft: `${itemBorderLeftWidth}px solid ${itemBorderLeftColor}`,

package/lib/Listbox/index.js

@@ -3,30 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  PressableItem: true
-};
-Object.defineProperty(exports, "PressableItem", {
-  enumerable: true,
-  get: function () {
-    return _PressableItem.default;
-  }
-});
-
-var _ListboxContext = require("./ListboxContext");
+exports.default = void 0;
 
-Object.keys(_ListboxContext).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _ListboxContext[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ListboxContext[key];
-    }
-  });
-});
+var _Listbox = _interopRequireDefault(require("./Listbox"));
 
-var _PressableItem = _interopRequireDefault(require("./PressableItem"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = _Listbox.default;
+exports.default = _default;

package/lib/SideNav/Item.js

@@ -138,13 +138,13 @@ Item.propTypes = { ...selectedSystemPropTypes,
   children: _propTypes.default.node.isRequired,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: _propTypes.default.string,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: _propTypes.default.string,
@@ -158,28 +158,20 @@ Item.propTypes = { ...selectedSystemPropTypes,
   hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: _propTypes.default.bool,
 
   /**
-   *
+   * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
    */
   isExpanded: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
-  variant: _utils.variantProp.propType,
-
-  /**
-   * Accesibility Role
-   */
   accessibilityRole: _propTypes.default.string,
-
-  /**
-   * test ID
-   */
-  testID: _propTypes.default.number
+  testID: _propTypes.default.number,
+  tokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  variant: _utils.variantProp.propType
 };
 var _default = Item;
 exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -295,7 +295,12 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
       variant: {
         compact: true,
         password: true,
-        inactive: !!variant.inactive
+        inactive: variant.inactive,
+        size: 'large'
+      },
+      tokens: {
+        width: 40,
+        height: 40
       }
     }, !showPassword ? 'hide' : 'show'));
   }
@@ -375,6 +380,8 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   buttonsContainer: {
     position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
     right: 0,
     top: 0,
     bottom: 0,

package/lib/Tooltip/Tooltip.js

@@ -149,6 +149,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -189,7 +190,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
   });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib/Tooltip/Tooltip.native.js

@@ -178,6 +178,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     content,
     position = 'auto',
     copy = 'en',
+    onPress = () => {},
     tokens,
     variant,
     inline = false,
@@ -209,7 +210,10 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
   });
 
-  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
 
   const close = () => setIsOpen(false);
 

package/lib/Tooltip/shared.js

@@ -37,6 +37,11 @@ const propTypes = {
    * Display tooltip icon button as an inline element.
    */
   inline: _propTypes.default.bool,
+
+  /**
+   * Callback function triggered when the tooltip is pressed.
+   */
+  onPress: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tooltip'),
   variant: _utils.variantProp.propType
 };

package/lib/index.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   A11yText: true,
   ActivityIndicator: true,
+  Autocomplete: true,
   Box: true,
   Card: true,
   PressableCardBase: true,
+  Listbox: true,
   Checkbox: true,
   Divider: true,
   ExpandCollapse: true,
@@ -91,6 +93,12 @@ Object.defineProperty(exports, "ActivityIndicator", {
     return _ActivityIndicator.default;
   }
 });
+Object.defineProperty(exports, "Autocomplete", {
+  enumerable: true,
+  get: function () {
+    return _Autocomplete.default;
+  }
+});
 Object.defineProperty(exports, "BaseProvider", {
   enumerable: true,
   get: function () {
@@ -193,6 +201,12 @@ Object.defineProperty(exports, "ListItem", {
     return _List.ListItem;
   }
 });
+Object.defineProperty(exports, "Listbox", {
+  enumerable: true,
+  get: function () {
+    return _Listbox.default;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -444,6 +458,8 @@ var _A11yText = _interopRequireDefault(require("./A11yText"));
 
 var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
 
+var _Autocomplete = _interopRequireDefault(require("./Autocomplete"));
+
 var _Box = _interopRequireDefault(require("./Box"));
 
 var _Button = require("./Button");
@@ -476,19 +492,7 @@ Object.keys(_Carousel).forEach(function (key) {
   });
 });
 
-var _Listbox = require("./Listbox");
-
-Object.keys(_Listbox).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Listbox[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _Listbox[key];
-    }
-  });
-});
+var _Listbox = _interopRequireDefault(require("./Listbox"));
 
 var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
 

package/lib/utils/useOverlaidPosition.js

@@ -9,6 +9,8 @@ var _react = require("react");
 
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
@@ -182,8 +184,8 @@ const useOverlaidPosition = _ref3 => {
       let {
         window
       } = _ref5;
-      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
-        // Could add a debouncer here if there's too many rerenders during gradual resizes
+      const measurementFunction = _Platform.default.OS === 'web' ? 'measureInWindow' : 'measure';
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current[measurementFunction]((x, y, width, height) => {
         setWindowDimensions(window);
         setSourceLayout({
           x,
@@ -202,9 +204,9 @@ const useOverlaidPosition = _ref3 => {
       if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
         // React Native >=0.65.0
         subscription.remove();
-      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+      } else if (typeof _Dimensions.default.remove === 'function') {
         // React Native <0.65.0
-        _Dimensions.default.removeEventListener('change', handleDimensionsChange);
+        _Dimensions.default.remove('change', handleDimensionsChange);
       }
 
       setSourceLayout(null);