@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/utils/floating-ui/index.native.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "arrow", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.arrow;
+  }
+});
+Object.defineProperty(exports, "autoPlacement", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.autoPlacement;
+  }
+});
+Object.defineProperty(exports, "flip", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.flip;
+  }
+});
+Object.defineProperty(exports, "offset", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.offset;
+  }
+});
+Object.defineProperty(exports, "shift", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.shift;
+  }
+});
+Object.defineProperty(exports, "useFloating", {
+  enumerable: true,
+  get: function () {
+    return _reactNative.useFloating;
+  }
+});
+var _reactNative = require("@floating-ui/react-native");

package/lib/cjs/utils/formatImageSource.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// react native source for Image and ImageBackground needs proper formatting to work
+// remote sources that start with 'http' and base64 encoded sources that start with 'data:' need be wrapped in uri when passing source prop for Image and ImageBackground ie. source={ uri: image }
+// local source for image can be passed normally without wrapping in uri ie. source={ image }
+
+/**
+ *  example code from react native docs: https://reactnative.dev/docs/imagebackground
+ *
+ *  const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}
+ *
+ *  const App = () => (
+ *    <View style={styles.container}>
+ *      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+ *        <Text style={styles.text}>Inside</Text>
+ *      </ImageBackground>
+ *    </View>
+ *  )
+ */
+
+/**
+ * Formats the image source for React Native Image and ImageBackground components.
+ * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
+ * @returns {object|string} - The formatted image source.
+ */
+const formatImageSource = source => typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:')) ? {
+  uri: source
+} : source;
+var _default = exports.default = formatImageSource;

package/lib/cjs/utils/hasOwnProperty.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hasOwnProperty;
+/**
+ * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
+ * but we can use this instead.
+ *
+ * @param {object} object
+ * @param {String} key
+ * @returns {Boolean}
+ */
+function hasOwnProperty(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}

package/lib/cjs/utils/htmlAttrs.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const htmlAttrTypes = {
+  dataSet: _propTypes.default.object,
+  id: _propTypes.default.string,
+  loading: _propTypes.default.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: _propTypes.default.string,
+  src: _propTypes.default.string,
+  tabIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  testID: _propTypes.default.string,
+  title: _propTypes.default.string
+};
+var _default = exports.default = {
+  types: htmlAttrTypes,
+  select: props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? {
+      ...items,
+      [key]: value
+    } : items;
+  }, {})
+};

package/lib/cjs/utils/index.js

@@ -0,0 +1,245 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  info: true,
+  useCopy: true,
+  useHash: true,
+  useSpacingScale: true,
+  useResponsiveProp: true,
+  useOverlaidPosition: true,
+  useSafeLayoutEffect: true,
+  useScrollBlocking: true,
+  useUniqueId: true,
+  withLinkRouter: true,
+  containUniqueFields: true,
+  BaseView: true,
+  htmlAttrs: true,
+  transformGradient: true,
+  convertFromMegaByteToByte: true,
+  formatImageSource: true
+};
+Object.defineProperty(exports, "BaseView", {
+  enumerable: true,
+  get: function () {
+    return _BaseView.default;
+  }
+});
+Object.defineProperty(exports, "containUniqueFields", {
+  enumerable: true,
+  get: function () {
+    return _containUniqueFields.default;
+  }
+});
+Object.defineProperty(exports, "convertFromMegaByteToByte", {
+  enumerable: true,
+  get: function () {
+    return _convertFromMegaByteToByte.default;
+  }
+});
+Object.defineProperty(exports, "formatImageSource", {
+  enumerable: true,
+  get: function () {
+    return _formatImageSource.default;
+  }
+});
+Object.defineProperty(exports, "htmlAttrs", {
+  enumerable: true,
+  get: function () {
+    return _htmlAttrs.default;
+  }
+});
+Object.defineProperty(exports, "info", {
+  enumerable: true,
+  get: function () {
+    return _info.default;
+  }
+});
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _transformGradient.transformGradient;
+  }
+});
+Object.defineProperty(exports, "useCopy", {
+  enumerable: true,
+  get: function () {
+    return _useCopy.default;
+  }
+});
+Object.defineProperty(exports, "useHash", {
+  enumerable: true,
+  get: function () {
+    return _useHash.default;
+  }
+});
+Object.defineProperty(exports, "useOverlaidPosition", {
+  enumerable: true,
+  get: function () {
+    return _useOverlaidPosition.default;
+  }
+});
+Object.defineProperty(exports, "useResponsiveProp", {
+  enumerable: true,
+  get: function () {
+    return _useResponsiveProp.default;
+  }
+});
+Object.defineProperty(exports, "useSafeLayoutEffect", {
+  enumerable: true,
+  get: function () {
+    return _useSafeLayoutEffect.default;
+  }
+});
+Object.defineProperty(exports, "useScrollBlocking", {
+  enumerable: true,
+  get: function () {
+    return _useScrollBlocking.default;
+  }
+});
+Object.defineProperty(exports, "useSpacingScale", {
+  enumerable: true,
+  get: function () {
+    return _useSpacingScale.default;
+  }
+});
+Object.defineProperty(exports, "useUniqueId", {
+  enumerable: true,
+  get: function () {
+    return _useUniqueId.default;
+  }
+});
+Object.defineProperty(exports, "withLinkRouter", {
+  enumerable: true,
+  get: function () {
+    return _withLinkRouter.default;
+  }
+});
+var _a11y = require("./a11y");
+Object.keys(_a11y).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _a11y[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _a11y[key];
+    }
+  });
+});
+var _animation = require("./animation");
+Object.keys(_animation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _animation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _animation[key];
+    }
+  });
+});
+var _children = require("./children");
+Object.keys(_children).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _children[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _children[key];
+    }
+  });
+});
+var _input = require("./input");
+Object.keys(_input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _input[key];
+    }
+  });
+});
+var _pressability = require("./pressability");
+Object.keys(_pressability).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _pressability[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _pressability[key];
+    }
+  });
+});
+var _props = require("./props");
+Object.keys(_props).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _props[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _props[key];
+    }
+  });
+});
+var _ssrMediaQuery = require("./ssr-media-query");
+Object.keys(_ssrMediaQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ssrMediaQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssrMediaQuery[key];
+    }
+  });
+});
+var _info = _interopRequireDefault(require("./info"));
+var _useCopy = _interopRequireDefault(require("./useCopy"));
+var _useHash = _interopRequireDefault(require("./useHash"));
+var _useSpacingScale = _interopRequireDefault(require("./useSpacingScale"));
+var _useResponsiveProp = _interopRequireWildcard(require("./useResponsiveProp"));
+Object.keys(_useResponsiveProp).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useResponsiveProp[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useResponsiveProp[key];
+    }
+  });
+});
+var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
+var _useSafeLayoutEffect = _interopRequireDefault(require("./useSafeLayoutEffect"));
+var _useScrollBlocking = _interopRequireDefault(require("./useScrollBlocking"));
+var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
+var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
+var _ssr = require("./ssr");
+Object.keys(_ssr).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ssr[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssr[key];
+    }
+  });
+});
+var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
+var _BaseView = _interopRequireDefault(require("./BaseView"));
+var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
+var _transformGradient = require("./transformGradient");
+var _convertFromMegaByteToByte = _interopRequireDefault(require("./convertFromMegaByteToByte"));
+var _formatImageSource = _interopRequireDefault(require("./formatImageSource"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/utils/info/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _platform = _interopRequireDefault(require("./platform"));
+var _versions = _interopRequireDefault(require("./versions"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// export an object accessed like info.platform.OS, info.version.uds, etc
+var _default = exports.default = {
+  platform: _platform.default,
+  versions: _versions.default
+};

package/lib/cjs/utils/info/platform/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _platform = _interopRequireDefault(require("./platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Allows consuming libraries that might not have a direct dependency on
+// React Native to check what the current platform is.
+// Particularly useful for validating Jest config: it is possible for Jest to
+// get configured such that Platform.OS returns a different mocked value to the
+// OS being used to select files by platform suffix (e.g. .web, .native).
+var _default = exports.default = {
+  OS: _Platform.default.OS,
+  fileSuffix: _platform.default
+};

package/lib/cjs/utils/info/platform/platform.android.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = '.android';

package/lib/cjs/utils/info/platform/platform.ios.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = '.ios';

package/lib/cjs/utils/info/platform/platform.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = '.web (default)';

package/lib/cjs/utils/info/platform/platform.native.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
+// If this gets picked, either an unsupported React Native platform is being used somehow
+// (e.g. a native Windows app), or there's a serious config problem somewhere.
+var _default = exports.default = '.native';

package/lib/cjs/utils/info/versions.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _package = _interopRequireDefault(require("../../../package.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Add more versions if they are useful e.g. theme schema version
+var _default = exports.default = {
+  uds: _package.default.version
+};

package/lib/cjs/utils/input.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultipleInputValues = exports.useInputValue = void 0;
+var _react = require("react");
+/**
+ * @typedef {import('react').SyntheticEvent} Event
+ */
+
+const pluralHooks = ['useMultipleInputValues'];
+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\`.
+`);
+  };
+  if (value && !onChange && !readOnly) {
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
+  }
+  if (initialValue && value) {
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
+  }
+  if (isControlled && !isCurrentlyControlled) {
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
+  }
+  if (!isControlled && isCurrentlyControlled) {
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
+  }
+};
+
+/**
+ * Hook used for controlling the input state of input components that have a singular value.
+ * If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
+ * If `value` prop is undefined, the hook manages its own state.
+ *
+ * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
+ * management tools such as Formik and React Hooks Form.
+ *
+ * @param {object} props
+ * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
+ * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
+ * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
+ * @param {boolean} [props.readOnly] - if true, stops the input values from changing
+ *
+ * @param {string} hookName - optional, used for tailoring error messages
+ *
+ * @returns {{
+ *   currentValue: string|number|null
+ *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
+ *   resetValue: () => void
+ *   isControlled: bool
+ * }}
+ */
+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, {
+    isControlled,
+    isCurrentlyControlled
+  }, hookName);
+  const {
+    value,
+    initialValue,
+    inputRef,
+    onChange,
+    readOnly = false
+  } = props;
+  const [ownValue, setOwnValue] = (0, _react.useState)(!isControlled && initialValue);
+  const currentValue = isControlled ? value : ownValue;
+
+  // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
+  // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
+  const valueRef = (0, _react.useRef)({
+    initial: currentValue,
+    value: currentValue
+  });
+  // Make current value accessible inside useCallback without rememoizing every time the value changes
+  valueRef.current.value = currentValue;
+  const isDirty = currentValue !== valueRef.current.initial;
+  const setValue = (0, _react.useCallback)((arg, event) => {
+    if (readOnly) return;
+    const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
+    if (!isControlled) {
+      setOwnValue(newValue);
+      if (inputRef?.current) inputRef.current.value = newValue ?? '';
+    }
+    // Call onChange handler if there's something for it to handle (event or a changed value)
+    if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
+  }, [inputRef, isControlled, onChange, readOnly]);
+  const resetValue = (0, _react.useCallback)(event => setValue(valueRef.current.initial, event), [setValue]);
+  return {
+    currentValue,
+    setValue,
+    resetValue,
+    isControlled,
+    isDirty
+  };
+};
+
+/**
+ * Hook used for controlling the input state of input components that have multiple named on/off states.
+ * If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
+ * If `values` prop is not passed in, the hook manages its own state.
+ *
+ * TODO: when implementing full UDS forms, integrate validation support etc and test alongside common forms
+ * management tools such as Formik and React Hooks Form.
+ *
+ * @param {object} props
+ * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
+ * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
+ * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
+ * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
+ * @param {boolean} [props.readOnly] - if true, stops the input values from changing
+ *
+ * @param {string} componentName - optional, used in error messages
+ *
+ * @returns {{
+ *   currentValues: any
+ *   resetValues: () => void
+ *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
+ *   toggleOneValue: (value: string|number) => void
+ *   unsetValues: () => void
+ * }}
+ */
+exports.useInputValue = useInputValue;
+const useMultipleInputValues = function () {
+  let {
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    currentValue,
+    setValue,
+    resetValue
+  } = useInputValue({
+    readOnly,
+    onChange,
+    value: values,
+    // if we're controlling our own state, always start with an array
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
+  }, 'useMultipleInputValues');
+  const enforceMaxValues = (0, _react.useCallback)(newValues => {
+    if (!maxValues) return newValues;
+    const excess = newValues.length - maxValues;
+    return excess > 0 ? newValues.slice(excess) : newValues;
+  }, [maxValues]);
+  const currentValues = enforceMaxValues(currentValue);
+  const setValues = (0, _react.useCallback)((newValues, event) => {
+    const validNewValues = enforceMaxValues(newValues);
+    setValue(validNewValues, event);
+  }, [setValue, enforceMaxValues]);
+  const resetValues = resetValue;
+  const unsetValues = (0, _react.useCallback)(event => setValues([], event), [setValues]);
+  const toggleOneValue = (0, _react.useCallback)((newValue, event) => {
+    if (readOnly) return;
+    // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+    // a deepEqual() function if there's any use case for toggling stored objects or arrays.
+    const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
+    setValues(newValues, event);
+  }, [currentValues, readOnly, setValues]);
+  return {
+    currentValues,
+    resetValues,
+    setValues,
+    toggleOneValue,
+    unsetValues
+  };
+};
+exports.useMultipleInputValues = useMultipleInputValues;