@telus-uds/components-base 1.59.2 → 1.61.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/Pagination/dictionary.js

@@ -14,11 +14,11 @@ var _default = {
     nextText: 'Next'
   },
   fr: {
-    goToLabel: 'Aller au page n°',
+    goToLabel: 'Aller à la page n°',
     currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
+    previousLabel: 'Aller à la page précédente',
     previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
+    nextLabel: 'Aller à la page suivante',
     nextText: 'Suivant'
   }
 };

package/lib/Progress/ProgressBarBackground.js

@@ -21,8 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
 const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     variant

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,18 +158,28 @@ 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
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Accesibility Role
+   */
+  accessibilityRole: _propTypes.default.string,
+
+  /**
+   * test ID
+   */
+  testID: _propTypes.default.number
 };
 var _default = Item;
 exports.default = _default;

package/lib/Tags/Tags.js

@@ -277,7 +277,12 @@ Tags.propTypes = { ...selectedSystemPropTypes,
    * managing its own selected state, a default set of selections may be provided.
    * Changing the `initialValues` does not change the user's selections.
    */
-  initialValues: _propTypes.default.arrayOf(_propTypes.default.string)
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * AccesibilityRole for the Tags
+   */
+  accessibilityRole: _propTypes.default.string
 };
 var _default = Tags;
 exports.default = _default;

package/lib/TextInput/TextInputBase.js

@@ -375,6 +375,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

@@ -151,6 +151,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    inline = false,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -245,7 +246,11 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     right: 10
   } : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: staticStyles.container,
+    style: [staticStyles.container, _Platform.default.select({
+      web: {
+        display: inline ? 'inline-block' : 'flex'
+      }
+    })],
     ...selectProps(rest),
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {

package/lib/Tooltip/Tooltip.native.js

@@ -180,6 +180,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     copy = 'en',
     tokens,
     variant,
+    inline = false,
     ...rest
   } = _ref6;
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
@@ -298,7 +299,11 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     right: 10
   } : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: staticStyles.container,
+    style: [staticStyles.container, _Platform.default.select({
+      web: {
+        display: inline ? 'inline-block' : 'flex'
+      }
+    })],
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       onPress: toggleIsOpen,

package/lib/Tooltip/shared.js

@@ -32,6 +32,11 @@ const propTypes = {
    * Use to place the tooltip in a specific location (only if it fits within viewport).
    */
   position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
+
+  /**
+   * Display tooltip icon button as an inline element.
+   */
+  inline: _propTypes.default.bool,
   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);