@telus-uds/components-base 2.0.0 → 2.0.2

package/lib-module/utils/a11y/semantics.js

@@ -1,157 +0,0 @@
-import Platform from "react-native-web/dist/exports/Platform";
-/**
- * @typedef {import('react-native').AccessibilityRole} AccessibilityRole
- */
-
-/**
- * This is based on the role-to-tag mapping that React Native Web uses to set HTML tags.
- * It's not exported in any way from RNW, so we need to keep this up-to-date manually.
- * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js
- *
- * Note: every role in this list is a web-only aria-role. There is no overlap between _these_ web tags
- * or roles and native accessibilityRoles. Only h1, h2, h3 etc map to an RN equivalent ("heading").
- *
- * - RN "summary" native role maps to "region" aria-role, but setting `<section>`/"region" does not
- *   set React Native's "summary" role, which has a much narrower use case.
- * - `<Header>`/"Banner" also do not map to RN's "heading". Only h1 / h2 etc map to RN "heading".
- *
- * Therefore, all of these tags / roles default to no accessibilityRole in native apps. This is not wrong:
- * in general, RN accessibilityRoles tend to be more about interaction and less about semantics than web roles.
- *
- * RNW's one-way mapping of React Native accessibilityRoles to web aria-roles:
- * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js
- */
-// Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
-// eslint-disable-next-line prettier/prettier
-
-const rolesToTags =
-/** @type {const} */
-{
-  article: 'article',
-  banner: 'header',
-  blockquote: 'blockquote',
-  code: 'code',
-  complementary: 'aside',
-  contentinfo: 'footer',
-  deletion: 'del',
-  emphasis: 'em',
-  figure: 'figure',
-  insertion: 'ins',
-  form: 'form',
-  list: 'ul',
-  listitem: 'li',
-  main: 'main',
-  navigation: 'nav',
-  region: 'section',
-  strong: 'strong',
-  // Add special cases that are in RNW's function logic but not in its mapping object
-  label: 'label' // eslint-disable-next-line prettier/prettier
-
-}; // Invert React Native Web's mapping, so a tag gets the role that gets that tag
-
-export 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.
- */
-// eslint-disable-next-line prettier/prettier
-
-export const headingTags =
-/** @type {const} */
-['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-/**
- * @typedef {typeof headingTags[number]} HeadingTag
- */
-
-/**
- * All HTML tags that may be set via RNW accesibility props alone and therefore may be set using
- * the getA11yPropsFromHtmlTag function without changing other behaviour.
- *
- * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
- */
-
-export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
-/**
- * Uses readonly mapping keys/values to generate static types for IDEs that support TS in JSDoc.
- * @typedef {keyof rolesToTags} RoleWithTag
- * @typedef {typeof rolesToTags[RoleWithTag] | typeof headingTags[number]} SupportedTag
- */
-
-/**
- * Subset of supported HTML tags that may be used with layout containers like Box.
- *
- * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
- */
-// eslint-disable-next-line prettier/prettier
-
-export const layoutTags =
-/** @type {const} */
-[...headingTags, 'article', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label' // eslint-disable-next-line prettier/prettier
-];
-/**
- * @typedef {typeof layoutTags[number]} LayoutTag
- */
-
-/**
- * Subset of supported HTML tags that may be used with text elements like Typography.
- *
- * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
- */
-// eslint-disable-next-line prettier/prettier
-
-export const textTags =
-/** @type {const} */
-[...headingTags, 'blockquote', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label' // eslint-disable-next-line prettier/prettier
-];
-/**
- * @typedef {typeof layoutTags[number]} TextTag
- */
-
-/**
- * If passed a heading tag string like 'h1', 'h2' etc, returns the heading number as a number
- * ready for use in `accessibilityLevel` props and similar.
- *
- * @param {string} [tag] - HTML tag string; returns undefined if not a {@link HeadingTag}
- * @returns {'1' | '2' | '3' | '4' | '5' | '6' | undefined}
- */
-
-export const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : undefined;
-/**
- * Takes a supported HTML tag, and returns the accessibility props that, on web, make React Native Web
- * render that tag.
- *
- * For cross-platform apps, a second argument may be passed with an [accessibilityRole](https://reactnative.dev/docs/accessibility#accessibilityrole)
- * to use in native apps. Heading tags (h1, h2, ...h5, h6) map to "heading" role by default;
- * no other supported semantic HTML tags have an equivalent native accessibilityRole.
- *
- * @param {SupportedTag} tag - HTML tag to use on web
- * @param {AccessibilityRole | null} [nativeRole] - optional accessibilityRole for native apps
- * @returns {{ accessibilityRole: string, accessibilityLevel?: string } | undefined}
- */
-
-export const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
-  // Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
-  if (nativeRole !== undefined && Platform.OS !== 'web') return {
-    accessibilityRole: nativeRole
-  };
-
-  if (tag) {
-    // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
-    const ariaRole = Platform.OS === 'web' && tagsToRoles[tag];
-    if (ariaRole) return {
-      accessibilityRole: ariaRole
-    };
-    const accessibilityLevel = getHeadingLevel(tag);
-    if (accessibilityLevel) return {
-      accessibilityRole: 'header',
-      accessibilityLevel
-    };
-  } // If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
-  // Note that return value may always be spread in objects (it is safe to spread undefined like { ...undefined })
-
-
-  return undefined;
-};

package/lib-module/utils/a11y/textSize.js

@@ -1,36 +0,0 @@
-import PixelRatio from "react-native-web/dist/exports/PixelRatio";
-import Platform from "react-native-web/dist/exports/Platform";
-/**
- * When a user increases text size using device accessibility settings, some elements
- * should also scale, such as icons alongside text and space between paragraphs.
- *
- * @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
- */
-
-export const scaleWithText = function (value) {
-  let maxScale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity;
-  if (!value) return value;
-  const scale = Math.min(PixelRatio.getFontScale(), maxScale) || 1;
-  return value * scale;
-};
-/**
- * Native only, returns `undefined` on Web.
- *
- * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
- * after iOS or Android font scaling, to give consistent accessible maximum sizes
- * that don't make the content unusable.
- *
- * The return value of this function can be used as a React Native `Text` element's
- * `maxFontSizeMultiplier` prop value.
- */
-
-export const getMaxFontMultiplier = _ref => {
-  let {
-    fontSize,
-    fontScaleCap
-  } = _ref;
-  if (Platform.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
-  if (fontScaleCap <= fontSize) return 1;
-  return fontScaleCap / fontSize;
-};

package/lib-module/utils/animation/index.js

@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as useVerticalExpandAnimation } from './useVerticalExpandAnimation';

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -1,89 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Easing from "react-native-web/dist/exports/Easing";
-import Platform from "react-native-web/dist/exports/Platform";
-import useSafeLayoutEffect from '../useSafeLayoutEffect'; // TODO: systematise animations
-// https://github.com/telus/universal-design-system/issues/487
-
-function useVerticalExpandAnimation(_ref) {
-  let {
-    containerHeight,
-    isExpanded,
-    tokens
-  } = _ref;
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [wasExpanded, setWasExpanded] = useState(isExpanded);
-  const expandStateChanged = isExpanded !== wasExpanded;
-  const expandAnimatedValue = useRef(new Animated.Value(0)).current;
-  const elementRef = useRef(null);
-  const {
-    expandDuration,
-    collapseDuration
-  } = tokens;
-  useSafeLayoutEffect(() => {
-    if (expandStateChanged) {
-      setIsAnimating(true);
-      setWasExpanded(isExpanded);
-    }
-  }, [expandStateChanged, isExpanded]);
-  useEffect(() => {
-    const onComplete = () => setIsAnimating(false);
-
-    if (Platform.OS === 'web') {
-      if (!elementRef.current) return () => {}; // React Native Web does not pass `onTransitionEnd` through, must attach manually.
-      // https://github.com/necolas/react-native-web/pull/1713
-
-      const element = elementRef.current;
-      element.addEventListener('transitionend', onComplete);
-      return () => element.removeEventListener('transitionend', onComplete);
-    }
-
-    const animationConfig = {
-      duration: isExpanded ? expandDuration : collapseDuration,
-      easing: Easing.inOut(Easing.ease),
-      toValue: isExpanded ? containerHeight : 0,
-      useNativeDriver: false
-    };
-    const animation = Animated.timing(expandAnimatedValue, animationConfig);
-    animation.start(onComplete);
-    return () => animation.stop();
-  }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
-  const containerStyles = {};
-  if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
-
-  if (!isExpanded && !isAnimating && !expandStateChanged) {
-    if (Platform.OS === 'web') {
-      // Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
-      containerStyles.visibility = 'hidden';
-    } else {
-      // 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.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.OS === 'web') {
-    const transitionDuration = isExpanded ? expandDuration : collapseDuration;
-    containerStyles.transition = "height ".concat(transitionDuration, "ms ease-in-out");
-    containerStyles.height = isExpanded ? containerHeight : 0;
-  } else if (Platform.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];
-}
-
-export default useVerticalExpandAnimation;

package/lib-module/utils/children.js

@@ -1,119 +0,0 @@
-import React, { Children, Fragment } from 'react';
-import Text from "react-native-web/dist/exports/Text";
-import A11yText from '../A11yText';
-/**
- * Unpacks top-level fragments, so that common compositional patterns such as the following examples
- * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
- *
- * - Setting `children` as a property wrapped in a fragment:
- *
- * ```jsx
- * args.children = <><Child1 /><Child2 /><Child3 /></>
- * ```
- *
- * - Defining `children` as a variable wrapped in a fragment:
- *
- * ```jsx
- * const content = <><Child1 /><Child2 /><Child3 /></>
- * if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
- * ```
- *
- * - Using fragments at the top level of a JSX block for conditional rendering:
- *
- * ```jsx
- * <Child1 />
- * {someCondition && (
- *   <>
- *     <Child2 />
- *     <Child3 />
- *   </>
- * )}
- * ```
- *
- * @param {ReactChildren} child
- * @returns {ReactChildren}
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-export const unpackFragment = child => {
-  var _child$props;
-
-  // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
-
-  if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
-
-  return child;
-};
-
-const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number'; // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-
-
-const isWrapable = child => {
-  var _child$type;
-
-  return isStringOrNumber(child) || child.type === A11yText || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
-};
-
-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) => {
-  const lastIndex = wrappedText.length - 1; // If possible, simplify content by combining text nodes into one string.
-  // jest-native's `.toHaveTextContent` is buggy about array of text nodes in <Text> elements.
-
-  if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
-    /* eslint-disable-next-line no-param-reassign */
-    wrappedText[lastIndex] = "".concat(wrappedText[lastIndex]).concat(child);
-  } else {
-    wrappedText.push(child);
-  }
-};
-/**
- * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
- * text style inheritance behaves differently with text compared to regular HTML.
- *
- * Call this function on children that may contain text (strings or numbers) at the top level,
- * and any that are found will be wrapped in a React Native `<Text>` element with supplied props.
- *
- * Note that this does not wrap strings that are nested children of rendered top level children:
- * `wrapStringsInText(<View>Some text</View>)` will not wrap the inner text and will still crash,
- * but `wrapStringsInText(<>{someString}{anotherString}</>)` wraps the strings inside the fragment.
- *
- * @param {ReactChildren} children
- * @param {TextProps} props
- * @returns {ReactChildren}
- */
-
-
-export const wrapStringsInText = function (children) {
-  let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const childrenArray = unpackFragment(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>
-
-  const wrapables = [[]];
-  let wrapablesIndex = 0;
-  childrenArray.forEach(child => {
-    if (isWrapable(child)) {
-      // Make this child a child of the current `Text`
-      wrapChild(child, wrapables[wrapablesIndex]);
-    } else {
-      // Close current `Text` and start a new one after this child
-      wrapables.push(child, []);
-      wrapablesIndex += 2;
-    }
-  });
-  const items = wrapables.reduce((flatChildren, group, index) => {
-    // Skip nullish children and empty arrays
-    if (!group || Array.isArray(group) && !group.length) return flatChildren;
-    return [...flatChildren, Array.isArray(group) && group.some(child => isStringOrNumber(child)) ?
-    /*#__PURE__*/
-    // Wrap text nodes and their wrappable neighbours in Text with as stable a key as possible.
-    // Avoid one-item arrays because jest-native's `.toHaveTextContent` is buggy
-    // and sometimes fails to match text content in arrays.
-    _jsx(Text, { ...textProps,
-      children: group.length === 1 ? group[0] : group
-    }, combineKeys(group) || index) : group];
-  }, []);
-  return items.length === 1 ? items[0] : items;
-};

package/lib-module/utils/containUniqueFields.js

@@ -1,26 +0,0 @@
-// Returns true if there are no duplicate values of the fields listed
-// in the `fields` array across the objects in the `items` array, false
-// otherwise.
-// Note that if a value of a field in an item is not set, it will be
-// excluded from comparison.
-const containUniqueFields = (items, fields) => {
-  const map = [];
-  const itemsHaveDuplicateFields = items.some(item => fields.some(field => {
-    if (!map[field]) {
-      map[field] = [];
-    }
-
-    if (!item[field]) {
-      // We exclude empty values from comparison
-      return false;
-    } // Duplicate found!
-
-
-    if (map[field][item[field]]) return true;
-    map[field][item[field]] = true;
-    return false;
-  }));
-  return !itemsHaveDuplicateFields;
-};
-
-export default containUniqueFields;

package/lib-module/utils/floating-ui/index.js

@@ -1 +0,0 @@
-export { useFloating, arrow, offset, shift, flip, autoPlacement } from '@floating-ui/react-dom';

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

@@ -1 +0,0 @@
-export { useFloating, arrow, offset, shift, flip, autoPlacement } from '@floating-ui/react-native';

package/lib-module/utils/hasOwnProperty.js

@@ -1,11 +0,0 @@
-/**
- * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
- * but we can use this instead.
- *
- * @param {object} object
- * @param {String} key
- * @returns {Boolean}
- */
-export default function hasOwnProperty(object, key) {
-  return Object.prototype.hasOwnProperty.call(object, key);
-}

package/lib-module/utils/index.js

@@ -1,19 +0,0 @@
-export * from './a11y';
-export * from './animation';
-export * from './children';
-export * from './input';
-export * from './pressability';
-export * from './props';
-export { default as info } from './info';
-export { default as useCopy } from './useCopy';
-export { default as useHash } from './useHash';
-export { default as useSpacingScale } from './useSpacingScale';
-export { default as useResponsiveProp } from './useResponsiveProp';
-export { default as useSafeLayoutEffect } from './useSafeLayoutEffect';
-export { default as useScrollBlocking } from './useScrollBlocking';
-export * from './useResponsiveProp';
-export { default as useUniqueId } from './useUniqueId';
-export { default as withLinkRouter } from './withLinkRouter';
-export * from './ssr';
-export { default as containUniqueFields } from './containUniqueFields';
-export { default as BaseView } from './BaseView';

package/lib-module/utils/info/index.js

@@ -1,7 +0,0 @@
-import platform from './platform';
-import versions from './versions'; // export an object accessed like info.platform.OS, info.version.uds, etc
-
-export default {
-  platform,
-  versions
-};

package/lib-module/utils/info/platform/index.js

@@ -1,11 +0,0 @@
-import Platform from "react-native-web/dist/exports/Platform";
-import fileSuffix from './platform'; // 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).
-
-export default {
-  OS: Platform.OS,
-  fileSuffix
-};

package/lib-module/utils/info/platform/platform.android.js

@@ -1 +0,0 @@
-export default '.android';

package/lib-module/utils/info/platform/platform.ios.js

@@ -1 +0,0 @@
-export default '.ios';

package/lib-module/utils/info/platform/platform.js

@@ -1 +0,0 @@
-export default '.web (default)';

package/lib-module/utils/info/platform/platform.native.js

@@ -1,4 +0,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.
-export default '.native';

package/lib-module/utils/info/versions.js

@@ -1,5 +0,0 @@
-import pkgJson from '../../../package.json'; // Add more versions if they are useful e.g. theme schema version
-
-export default {
-  uds: pkgJson.version
-};