@telus-uds/components-base 1.8.1 → 1.8.4

package/lib/Typography/Typography.js

@@ -35,39 +35,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
 const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
 
-const selectTextStyles = ({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}) => (0, _utils.applyTextStyles)({
-  fontWeight,
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  textAlign,
-  textTransform,
-  letterSpacing
-}); // General-purpose flexible theme-neutral base component for text
-
-
-const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  variant,
-  heading,
-  tag = typeof heading === 'string' ? heading : undefined,
-  accessibilityRole = heading === true ? 'header' : undefined,
-  block = false,
-  align = undefined,
-  tokens,
-  dataSet,
-  ...rest
-}, ref) => {
+const selectTextStyles = _ref => {
+  let {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  } = _ref;
+  return (0, _utils.applyTextStyles)({
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing
+  });
+}; // General-purpose flexible theme-neutral base component for text
+
+
+const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    variant,
+    heading,
+    tag = typeof heading === 'string' ? heading : undefined,
+    accessibilityRole = heading === true ? 'header' : undefined,
+    block = false,
+    align = undefined,
+    tokens,
+    dataSet,
+    ...rest
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport

package/lib/ViewportProvider/ViewportProvider.js

@@ -26,9 +26,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
  */
-const ViewportProvider = ({
-  children
-}) => {
+const ViewportProvider = _ref => {
+  let {
+    children
+  } = _ref;
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
   const [viewport, setViewport] = (0, _react.useState)(_systemConstants.viewports.keys[0]);

package/lib/ViewportProvider/useViewportListener.js

@@ -38,9 +38,12 @@ const useViewportListenerCSR = setViewport => {
   (0, _react.useLayoutEffect)(() => {
     setViewport(lookupViewport());
 
-    const onChange = ({
-      window
-    }) => setViewport(_systemConstants.viewports.select(window.width));
+    const onChange = _ref => {
+      let {
+        window
+      } = _ref;
+      return setViewport(_systemConstants.viewports.select(window.width));
+    };
 
     const listener = _Dimensions.default.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
     // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).

package/lib/index.js

@@ -56,34 +56,46 @@ var _exportNames = {
   applyTextStyles: true,
   applyShadowToken: true
 };
+Object.defineProperty(exports, "A11yInfoProvider", {
+  enumerable: true,
+  get: function () {
+    return _A11yInfoProvider.default;
+  }
+});
 Object.defineProperty(exports, "A11yText", {
   enumerable: true,
   get: function () {
     return _A11yText.default;
   }
 });
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapse.Accordion;
+  }
+});
 Object.defineProperty(exports, "ActivityIndicator", {
   enumerable: true,
   get: function () {
     return _ActivityIndicator.default;
   }
 });
-Object.defineProperty(exports, "Box", {
+Object.defineProperty(exports, "BaseProvider", {
   enumerable: true,
   get: function () {
-    return _Box.default;
+    return _BaseProvider.default;
   }
 });
-Object.defineProperty(exports, "Card", {
+Object.defineProperty(exports, "Box", {
   enumerable: true,
   get: function () {
-    return _Card.default;
+    return _Box.default;
   }
 });
-Object.defineProperty(exports, "PressableCardBase", {
+Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
-    return _Card.PressableCardBase;
+    return _Card.default;
   }
 });
 Object.defineProperty(exports, "Checkbox", {
@@ -104,12 +116,6 @@ Object.defineProperty(exports, "ExpandCollapse", {
     return _ExpandCollapse.default;
   }
 });
-Object.defineProperty(exports, "Accordion", {
-  enumerable: true,
-  get: function () {
-    return _ExpandCollapse.Accordion;
-  }
-});
 Object.defineProperty(exports, "Feedback", {
   enumerable: true,
   get: function () {
@@ -158,16 +164,16 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
-Object.defineProperty(exports, "ListItem", {
+Object.defineProperty(exports, "ListBase", {
   enumerable: true,
   get: function () {
-    return _List.ListItem;
+    return _List.ListBase;
   }
 });
-Object.defineProperty(exports, "ListBase", {
+Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
-    return _List.ListBase;
+    return _List.ListItem;
   }
 });
 Object.defineProperty(exports, "Modal", {
@@ -188,6 +194,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "PressableCardBase", {
+  enumerable: true,
+  get: function () {
+    return _Card.PressableCardBase;
+  }
+});
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
@@ -260,6 +272,12 @@ Object.defineProperty(exports, "Tags", {
     return _Tags.default;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -278,22 +296,10 @@ Object.defineProperty(exports, "Typography", {
     return _Typography.default;
   }
 });
-Object.defineProperty(exports, "A11yInfoProvider", {
-  enumerable: true,
-  get: function () {
-    return _A11yInfoProvider.default;
-  }
-});
-Object.defineProperty(exports, "useA11yInfo", {
-  enumerable: true,
-  get: function () {
-    return _A11yInfoProvider.useA11yInfo;
-  }
-});
-Object.defineProperty(exports, "BaseProvider", {
+Object.defineProperty(exports, "ViewportContext", {
   enumerable: true,
   get: function () {
-    return _BaseProvider.default;
+    return _ViewportProvider.ViewportContext;
   }
 });
 Object.defineProperty(exports, "ViewportProvider", {
@@ -302,64 +308,58 @@ Object.defineProperty(exports, "ViewportProvider", {
     return _ViewportProvider.default;
   }
 });
-Object.defineProperty(exports, "useViewport", {
-  enumerable: true,
-  get: function () {
-    return _ViewportProvider.useViewport;
-  }
-});
-Object.defineProperty(exports, "ViewportContext", {
+Object.defineProperty(exports, "applyOuterBorder", {
   enumerable: true,
   get: function () {
-    return _ViewportProvider.ViewportContext;
+    return _ThemeProvider.applyOuterBorder;
   }
 });
-Object.defineProperty(exports, "ThemeProvider", {
+Object.defineProperty(exports, "applyShadowToken", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.default;
+    return _ThemeProvider.applyShadowToken;
   }
 });
-Object.defineProperty(exports, "useTheme", {
+Object.defineProperty(exports, "applyTextStyles", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useTheme;
+    return _ThemeProvider.applyTextStyles;
   }
 });
-Object.defineProperty(exports, "useSetTheme", {
+Object.defineProperty(exports, "getThemeTokens", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useSetTheme;
+    return _ThemeProvider.getThemeTokens;
   }
 });
-Object.defineProperty(exports, "useThemeTokens", {
+Object.defineProperty(exports, "useA11yInfo", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.useThemeTokens;
+    return _A11yInfoProvider.useA11yInfo;
   }
 });
-Object.defineProperty(exports, "getThemeTokens", {
+Object.defineProperty(exports, "useSetTheme", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.getThemeTokens;
+    return _ThemeProvider.useSetTheme;
   }
 });
-Object.defineProperty(exports, "applyOuterBorder", {
+Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.applyOuterBorder;
+    return _ThemeProvider.useTheme;
   }
 });
-Object.defineProperty(exports, "applyTextStyles", {
+Object.defineProperty(exports, "useThemeTokens", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.applyTextStyles;
+    return _ThemeProvider.useThemeTokens;
   }
 });
-Object.defineProperty(exports, "applyShadowToken", {
+Object.defineProperty(exports, "useViewport", {
   enumerable: true,
   get: function () {
-    return _ThemeProvider.applyShadowToken;
+    return _ViewportProvider.useViewport;
   }
 });
 

package/lib/utils/a11y/semantics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getA11yPropsFromHtmlTag = exports.getHeadingLevel = exports.textTags = exports.layoutTags = exports.supportedTags = exports.headingTags = exports.tagsToRoles = void 0;
+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"));
 
@@ -58,7 +58,10 @@ const rolesToTags =
 
 }; // Invert React Native Web's mapping, so a tag gets the role that gets that tag
 
-const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(([key, value]) => [value, key]));
+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.

package/lib/utils/a11y/textSize.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMaxFontMultiplier = exports.scaleWithText = void 0;
+exports.scaleWithText = exports.getMaxFontMultiplier = void 0;
 
 var _PixelRatio = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PixelRatio"));
 
@@ -18,7 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} [value] - the value to multiply; defaults to system default font size
  * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
  */
-const scaleWithText = (value, maxScale = Infinity) => {
+const scaleWithText = function (value) {
+  let maxScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
   if (!value) return value;
   const scale = Math.min(_PixelRatio.default.getFontScale(), maxScale) || 1;
   return value * scale;
@@ -37,10 +38,11 @@ const scaleWithText = (value, maxScale = Infinity) => {
 
 exports.scaleWithText = scaleWithText;
 
-const getMaxFontMultiplier = ({
-  fontSize,
-  fontScaleCap
-}) => {
+const getMaxFontMultiplier = _ref => {
+  let {
+    fontSize,
+    fontScaleCap
+  } = _ref;
   if (_Platform.default.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
   if (fontScaleCap <= fontSize) return 1;
   return fontScaleCap / fontSize;

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -17,22 +17,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
-function useVerticalExpandAnimation({
-  containerHeight,
-  isExpanded,
-  tokens
-}) {
+function useVerticalExpandAnimation(_ref) {
+  let {
+    containerHeight,
+    isExpanded,
+    tokens
+  } = _ref;
   const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
+  const [wasExpanded, setWasExpanded] = (0, _react.useState)(isExpanded);
+  const expandStateChanged = isExpanded !== wasExpanded;
   const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
   const elementRef = (0, _react.useRef)(null);
   const {
     expandDuration,
     collapseDuration
-  } = tokens; // Treat as animating from when expanded state changes, until animation completes
-
-  (0, _react.useEffect)(() => setIsAnimating(true), [isExpanded]);
+  } = tokens;
+  (0, _react.useLayoutEffect)(() => {
+    if (expandStateChanged) {
+      setIsAnimating(true);
+      setWasExpanded(isExpanded);
+    }
+  }, [expandStateChanged, isExpanded]);
   (0, _react.useEffect)(() => {
-    const onComplete = () => !isExpanded && setIsAnimating(false);
+    const onComplete = () => setIsAnimating(false);
 
     if (_Platform.default.OS === 'web') {
       if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
@@ -54,20 +61,40 @@ function useVerticalExpandAnimation({
 
     animation.start(onComplete);
     return () => animation.stop();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]); // Without `visibility: 'hidden', descendents are focusable on web even when collapsed
+  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
+  const containerStyles = {};
+  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
 
-  const containerStyles = !isExpanded && !isAnimating ? {
-    visibility: 'hidden'
-  } : {}; // don't visually collapse the container until we have it measured
-
-  if (containerHeight !== null) {
+  if (!isExpanded && !isAnimating && !expandStateChanged) {
     if (_Platform.default.OS === 'web') {
-      const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-      containerStyles.transition = `height ${transitionDuration}ms ease-in-out`;
-      containerStyles.height = isExpanded ? containerHeight : 0;
+      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
+      containerStyles.visibility = 'hidden';
     } else {
-      containerStyles.height = expandAnimatedValue;
+      // There's no `visibility: hidden` in React Native, and display: none causes a flicker on expand.
+      // 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
+
+
+  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
+      // this won't work on native platforms
+      containerStyles.height = 0;
+      containerStyles.visibility = 'hidden';
     }
+  } else if (_Platform.default.OS === 'web') {
+    const transitionDuration = isExpanded ? expandDuration : collapseDuration;
+    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
+    containerStyles.height = isExpanded ? containerHeight : 0;
+  } else if (_Platform.default.OS === 'ios' && isExpanded && !isAnimating && !expandStateChanged && typeof containerHeight === 'number') {
+    // iOS reflows text while the height animation is in progress. Sometimes, it hits a timing bug where
+    // it fails to reflow properly after the last animation frame, leaving the last line of text not visible.
+    // Force reflow after animation completes with a static height non-identical to the last animated height.
+    containerStyles.height = containerHeight + 1;
+  } else {
+    containerStyles.height = expandAnimatedValue;
   }
 
   return [containerStyles, elementRef];

package/lib/utils/children.js

@@ -73,7 +73,7 @@ const isWrapable = child => {
   return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
 };
 
-const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
+const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => "".concat(newKey).concat(child.key || ''), ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 
 
 const wrapChild = (child, wrappedText) => {
@@ -82,7 +82,7 @@ const wrapChild = (child, wrappedText) => {
 
   if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
     /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
+    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
   } else {
     wrappedText.push(child);
   }
@@ -104,7 +104,8 @@ const wrapChild = (child, wrappedText) => {
  */
 
 
-const wrapStringsInText = (children, textProps = {}) => {
+const wrapStringsInText = function (children) {
+  let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const childrenArray = unpackFragment(_react.Children.toArray(children)); // Group adjacent wrapable children together in one Text element to create as few Text elements
   // as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
 

package/lib/utils/index.js

@@ -13,6 +13,12 @@ var _exportNames = {
   withLinkRouter: true,
   containUniqueFields: true
 };
+Object.defineProperty(exports, "containUniqueFields", {
+  enumerable: true,
+  get: function () {
+    return _containUniqueFields.default;
+  }
+});
 Object.defineProperty(exports, "info", {
   enumerable: true,
   get: function () {
@@ -31,16 +37,16 @@ Object.defineProperty(exports, "useHash", {
     return _useHash.default;
   }
 });
-Object.defineProperty(exports, "useSpacingScale", {
+Object.defineProperty(exports, "useResponsiveProp", {
   enumerable: true,
   get: function () {
-    return _useSpacingScale.default;
+    return _useResponsiveProp.default;
   }
 });
-Object.defineProperty(exports, "useResponsiveProp", {
+Object.defineProperty(exports, "useSpacingScale", {
   enumerable: true,
   get: function () {
-    return _useResponsiveProp.default;
+    return _useSpacingScale.default;
   }
 });
 Object.defineProperty(exports, "useUniqueId", {
@@ -55,12 +61,6 @@ Object.defineProperty(exports, "withLinkRouter", {
     return _withLinkRouter.default;
   }
 });
-Object.defineProperty(exports, "containUniqueFields", {
-  enumerable: true,
-  get: function () {
-    return _containUniqueFields.default;
-  }
-});
 
 var _a11y = require("./a11y");
 

package/lib/utils/input.js

@@ -12,43 +12,39 @@ var _react = require("react");
  */
 const pluralHooks = ['useMultipleInputValues'];
 
-const validateProps = ({
-  value,
-  onChange,
-  readOnly,
-  initialValue
-}, {
-  isCurrentlyControlled,
-  isControlled
-}, hookName) => {
+const validateProps = (_ref, _ref2, hookName) => {
+  let {
+    value,
+    onChange,
+    readOnly,
+    initialValue
+  } = _ref;
+  let {
+    isCurrentlyControlled,
+    isControlled
+  } = _ref2;
   const s = pluralHooks.includes(hookName) ? 's' : '';
 
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error(`${hookName} ${error}.
-
-Consumers of this hook must be one of:
-1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
-2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
-3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
-`);
+    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
   };
 
   if (value && !onChange && !readOnly) {
-    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
+    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
   }
 
   if (initialValue && value) {
-    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
+    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
   }
 
   if (isControlled && !isCurrentlyControlled) {
-    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
+    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
   }
 
   if (!isControlled && isCurrentlyControlled) {
-    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
+    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
   }
 };
 /**
@@ -76,7 +72,9 @@ Consumers of this hook must be one of:
  */
 
 
-const useInputValue = (props = {}, hookName = 'useInputValue') => {
+const useInputValue = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
   const isCurrentlyControlled = props.value !== undefined;
   const [isControlled] = (0, _react.useState)(isCurrentlyControlled);
   validateProps(props, {
@@ -143,13 +141,14 @@ const useInputValue = (props = {}, hookName = 'useInputValue') => {
 
 exports.useInputValue = useInputValue;
 
-const useMultipleInputValues = ({
-  values,
-  initialValues,
-  maxValues,
-  onChange,
-  readOnly
-} = {}) => {
+const useMultipleInputValues = function () {
+  let {
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   const {
     currentValue,
     setValue,
@@ -159,7 +158,7 @@ const useMultipleInputValues = ({
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues ?? (values === undefined ? [] : undefined)
+    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
   }, 'useMultipleInputValues');
   const enforceMaxValues = (0, _react.useCallback)(newValues => {
     if (!maxValues) return newValues;