@telus-uds/components-base 1.8.1 → 1.8.2

package/lib-module/Spacer/Spacer.js

@@ -1,97 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
-/**
- * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectSizeStyle = (size, direction) => ({
-  // Only apply space in one direction at a time, else large spacers will increase the
-  // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
-  [direction === 'row' ? 'width' : 'height']: size
-});
-/**
- * An empty element used to create a gap between components that is sized according to the theme spacing scale,
- * passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
- *
- * ## Simple spacing
- *
- * For most simple uses, pass a number to Spacer's `space` prop referring to an index in the theme's
- * spacing scale. For example, for a spacer of the theme's smallest non-zero spacing size:
- *
- * ```jsx
- * <Spacer space={1} />
- * ```
- *
- * ## Responsive spacing
- *
- * Different spacing scale sizes may be chosen for different viewports by passing `space` a {@link SpacingObject}
- * using keys for the viewports at and above which certain spacing indexes should apply.
- *
- * This can be useful when a Spacer is inside a layout with a shape that changes between viewports.
- *
- * For example, a spacer might need no width below 'md' viewport because the items it separates will be on separate lines,
- * but may need a visible size above that viewport, and a wider size at the highest viewport:
- *
- * ```jsx
- * <Spacer space={{ xs: 0, md: 2, xl: 3 }} />
- * ```
- *
- * Note that themes may also define viewport-specific behaviour for indexes on the spacing scale. These viewport
- * props should only be used where necessary to achieve a certain responsive layoutm and shouldn't be used to replace
- * or deviate from responsive spacing behaviour in a theme that is intended to apply universally.
- *
- * ## More options
- *
- * See `useSpacingScale` hook for more options that may be used with the `space` prop.
- *
- * ## Accessibility
- *
- * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
- * separations between elements that may be treated as semantically meaningful on web.
- */
-
-
-const Spacer = /*#__PURE__*/forwardRef(({
-  space = 1,
-  direction = 'column',
-  ...rest
-}, ref) => {
-  const size = useSpacingScale(space);
-  const sizeStyle = selectSizeStyle(size, direction);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.stretch, sizeStyle],
-    ...selectProps(rest)
-  });
-});
-Spacer.displayName = 'Spacer';
-Spacer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The size of the spacer according to the theme's spacing scale.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * The spacer applies space in only one direction, which is controlled by the `direction` prop:
-   *
-   * - `'column'` (default) applies space vertically; has a fixed height and not width.
-   * - `'row'` applies space horizontally; has a fixed width and not height.
-   */
-  direction: PropTypes.oneOf(['column', 'row'])
-};
-const staticStyles = StyleSheet.create({
-  stretch: {
-    alignSelf: 'stretch'
-  }
-});
-export default Spacer;

package/lib-module/Spacer/index.js

@@ -1,2 +0,0 @@
-import Spacer from './Spacer';
-export default Spacer;

package/lib-module/StackView/StackView.js

@@ -1,124 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import Divider from '../Divider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-/**
- * StackView evenly spaces its children, by default placing `Spacer` components between them.
- *
- * ## Spacing
- *
- * StackView takes the same spacing props as `Spacer` and passes them directly to the layout components
- * it uses for spacing.
- *
- * ## Direction
- *
- * Use `direction` to control how the children are stacked:
- *
- * - `'column'` (default) stacks and spaces the children vertically.
- * - `'row'` stacks and spaces the children horizontally.
- * - `'column-reverse'` acts the same as `'column'`, but reverses the direction.
- * - `'row-reverse'` acts the same as `'row'`, but reverses the direction.
- *
- * `direction` is an optionally responsive prop and may be an object keyed by viewports. For example,
- * `{ xs: 'column', md: 'row' } stacks as a column on `xs` and `sm` viewports and a row at 'md' and above.
- *
- * ## Theming, alignment and justification
- *
- * `StackView` is a pure layout component and has no theme styles beyond a small set of layout styles
- * (`alignItems`, `justifyContent`, `flexGrow`) which may be set using the `tokens` prop. If the
- * tokens prop is a function it will recieve the current viewport.
- *
- * All other styling such as borders, background colours, padding etc should be applied by wrapping
- * the `StackView` in other components. For example, a `StackView` may be the child of a `Card`.
- *
- * ## Separator options
- *
- * By default, StackView inserts a `<Spacer>` component between each rendered child.
- *
- * With the `divider` prop, it instead renders a `Divider` instead of a `Spacer`. The gap between
- * items will be double what it would be without this prop plus the width of the divider.
- *
- * ## Accessibility
- *
- * `StackView` may take any React Native accessibility props and applies them to the outer `View`.
- * It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
- * semantic role but only on web, not within native apps).
- */
-
-const StackView = /*#__PURE__*/forwardRef(({
-  space = 1,
-  divider,
-  direction: directionProp = 'column',
-  children,
-  variant,
-  tokens,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const direction = useResponsiveProp(directionProp, 'column');
-  const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...rest
-  });
-  const content = getStackedContent(children, {
-    direction,
-    divider,
-    space
-  });
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
-    viewport
-  });
-  const flexStyles = selectFlexStyles(themeTokens);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    ...selectedProps,
-    style: [flexStyles, staticStyles[direction]],
-    children: content
-  });
-});
-StackView.displayName = 'StackView';
-StackView.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('StackView'),
-  variant: variantProp.propType,
-
-  /**
-   * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
-   */
-  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
-
-  /**
-   * If true, renders a UDS `Divider` component between each item. If an object is passed,
-   * this object is passes as props to each Divider.
-   */
-  divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
-
-  /**
-   * The size of the spacer according to the theme's spacing scale.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
-   *
-   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  tag: PropTypes.oneOf(layoutTags),
-
-  /**
-   * A StackView may take any children, but will have no effect if it is only passed one child or is passed children
-   * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
-   */
-  children: PropTypes.node
-};
-export default StackView;

package/lib-module/StackView/StackWrap.js

@@ -1,48 +0,0 @@
-import React, { forwardRef } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import StackWrapBox from './StackWrapBox';
-import StackWrapGap from './StackWrapGap'; // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const cssSupports = (...args) => {
-  var _window$CSS;
-
-  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...args);
-}; // CSS.supports needs an example of the type of value you intend to use.
-// Will be an integer appended `px` after hooks and JSX styles are resolved.
-
-
-const exampleGapValue = '1px';
-/**
- * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
- *
- * As well as providing space between the items, StackWrap provides `gap` space between
- * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
- * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
- */
-
-const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    space
-  } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
-
-  const gap = props.gap ?? space;
-  const canUseCSSGap = Platform.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue);
-  return canUseCSSGap ?
-  /*#__PURE__*/
-  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.
-  _jsx(StackWrapGap, {
-    ref: ref,
-    ...props
-  }) :
-  /*#__PURE__*/
-  // Else, use the fallback implementation which renders a `Box` component around each child.
-  _jsx(StackWrapBox, {
-    ref: ref,
-    ...props
-  });
-});
-StackWrap.displayName = 'StackWrap';
-StackWrap.propTypes = StackWrapBox.propTypes;
-export default StackWrap;

package/lib-module/StackView/StackWrap.native.js

@@ -1,3 +0,0 @@
-import StackWrapBox from './StackWrapBox'; // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
-
-export default StackWrapBox;

package/lib-module/StackView/StackWrapBox.js

@@ -1,114 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const offsetSides = {
-  row: 'marginBottom',
-  column: 'marginRight'
-};
-const gapSides = {
-  row: 'bottom',
-  column: 'right'
-};
-const spaceSides = {
-  row: 'right',
-  column: 'bottom'
-};
-/**
- * An alternative fallback implementation of `StackWrap` that doesn't use CSS `gap`.
- *
- * This is not intended to be used directly. It will automatically be used instead of StackWrap in:
- *
- * - Native apps (no `gap` style prop in React Native).
- * - Older (~<=2020) browsers which don't support CSS `gap`.
- * - Cases where the `space` between items should be different to the `gap` between wrapped rows .
- *
- * Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
- * between the container and the stacked children, and requires a negative margin on the container.
- */
-
-const StackWrapBox = /*#__PURE__*/forwardRef(({
-  space = 1,
-  gap = space,
-  direction: directionProp = 'row',
-  children,
-  tokens,
-  variant,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const direction = useResponsiveProp(directionProp, 'row');
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
-    viewport
-  });
-  const flexStyles = selectFlexStyles(themeTokens);
-  const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...rest
-  }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
-
-  const gapSize = useSpacingScale(gap);
-  const offsetStyle = {
-    [offsetSides[direction]]: -1 * gapSize
-  };
-  const boxProps = {
-    [gapSides[direction]]: gap,
-    [spaceSides[direction]]: space
-  };
-  const content = getStackedContent(children, {
-    direction,
-    space: 0,
-    box: boxProps
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    ...selectedProps,
-    style: [flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle],
-    children: content
-  });
-});
-StackWrapBox.displayName = 'StackWrapBox';
-StackWrapBox.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('StackView'),
-
-  /**
-   * Sets the `flexDirection` of the container
-   */
-  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
-
-  /**
-   * The size of the space between items according to the theme's spacing scale.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  gap: spacingProps.types.spacingValue,
-
-  /**
-   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
-   *
-   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  tag: PropTypes.oneOf(layoutTags),
-
-  /**
-   * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
-   * wrapped in a component. If necessary, children may be wrapped in one React Fragment.
-   */
-  children: PropTypes.node
-};
-export default StackWrapBox;

package/lib-module/StackView/StackWrapGap.js

@@ -1,58 +0,0 @@
-import React, { forwardRef } from 'react';
-import View from "react-native-web/dist/exports/View";
-import StackWrapBox from './StackWrapBox';
-import { a11yProps, getA11yPropsFromHtmlTag, selectSystemProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps] = selectSystemProps([a11yProps, viewProps]);
-/**
- * The primary implementation of StackWrap.
- *
- * This is not intended to be used directly. It will automatically be used instead of StackWrap if:
- *
- * - On web, and,
- * - On a browser that supports CSS `gap` (most browser versions from 2020 onwards), and,
- * - The `space` between items is the same as the `gap` between wrapped rows (this is the
- *   default if `gap` prop is undefined)
- */
-
-const StackWrapGap = /*#__PURE__*/forwardRef(({
-  space = 1,
-  tokens,
-  variant,
-  direction: directionProp = 'row',
-  children,
-  tag,
-  accessibilityRole,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const direction = useResponsiveProp(directionProp, 'row');
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
-    viewport
-  });
-  const flexStyles = selectFlexStyles(themeTokens);
-  const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...rest
-  });
-  const size = useSpacingScale(space);
-  const gapStyle = {
-    gap: size
-  };
-  const content = getStackedContent(children, {
-    direction,
-    space: 0
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    ...selectedProps,
-    style: [flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle],
-    children: content
-  });
-});
-StackWrapGap.displayName = 'StackWrapGap';
-StackWrapGap.propTypes = StackWrapBox.propTypes;
-export default StackWrapGap;

package/lib-module/StackView/common.js

@@ -1,32 +0,0 @@
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-export const selectFlexStyles = ({
-  alignItems,
-  justifyContent,
-  flexGrow,
-  flexShrink
-}) => ({
-  alignItems,
-  justifyContent,
-  flexGrow,
-  flexShrink
-});
-export const staticStyles = StyleSheet.create({
-  wrap: {
-    flexShrink: 1,
-    flexWrap: 'wrap'
-  },
-  row: {
-    flexDirection: 'row'
-  },
-  'row-reverse': {
-    flexDirection: 'row-reverse'
-  },
-  column: {
-    // This is the React Native View default, but also it's very fundamental to the behaviour,
-    // so make it explicit and allow it to be tested for.
-    flexDirection: 'column'
-  },
-  'column-reverse': {
-    flexDirection: 'column-reverse'
-  }
-});

package/lib-module/StackView/getStackedContent.js

@@ -1,123 +0,0 @@
-import React, { Children, Fragment } from 'react';
-import Box from '../Box';
-import Divider from '../Divider';
-import Spacer from '../Spacer';
-/**
- * @typedef {import('react').ReactChildren} ReactChildren
- * @typedef {import('react').ReactElement} ReactElement
- * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
- */
-
-/**
- * Takes valid React Children and inserts a specified amount of space between each valid (not nullish) top
- * level element, according to the provided `options`.
- *
- * Returns an array of the original elements plus inserted spacing elements.
- * This array of elements is keyed and may be used as a component's `children` without mapping.
- *
- * @param {ReactChildren} children
- * @param {object} [options] -
- *  - `space`: amount of space to insert using the theme spacing scale (see `useSpacingScale`)
- *  - `direction`: if 'row' or 'row-reverse', applies space horizontally, if 'column' or 'column-reverse', applies space vertically
- *  - `box`: if truthy, wraps each valid child in a Box component; if an object, passes it to Box as props
- *  - `divider`: if truthy, inserts Divider components; if an object, passes it to Divider as props
- *  - `preserveFragments`: if true, adds no space between top-level elements that were passed inside a nested fragment
- * @param {SpacingValue} [options.space]
- * @param {boolean | object} [options.divider]
- * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
- * @param {boolean} [options.preserveFragments]
- * @returns {ReactElement[]}
- */
-
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const getStackedContent = (children, {
-  divider,
-  space,
-  direction = 'column',
-  box,
-  preserveFragments = false
-}) => {
-  const boxProps = box && typeof box === 'object' ? box : {
-    space
-  };
-  const dividerProps = divider && typeof divider === 'object' ? divider : {}; // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
-
-  const topLevelChildren = preserveFragments ? children : unpackFragment(children);
-  const validChildren = Children.toArray(topLevelChildren).filter(Boolean);
-  const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = `Stack-Box-${index}`;
-    const item = box ?
-    /*#__PURE__*/
-    // If wrapped in Box, that Box needs a key.
-    // If possible, use an existing content key; use an index-based key only if necessary.
-    _createElement(Box, { ...boxProps,
-      key: child.key || boxID,
-      testID: boxID
-    }, child) : child;
-    if (!index || !space && !divider) return [...newChildren, item];
-    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
-    const commonProps = {
-      testID,
-      key: testID,
-      space
-    };
-    const separator = divider ? /*#__PURE__*/_jsx(Divider, {
-      vertical: direction.startsWith('row'),
-      ...dividerProps,
-      ...commonProps
-    }) : /*#__PURE__*/_jsx(Spacer, {
-      direction: direction.startsWith('row') ? 'row' : 'column',
-      ...commonProps
-    });
-    return [...newChildren, separator, item];
-  }, []);
-  return content;
-};
-/**
- * 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}
- */
-
-
-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;
-};
-
-export default getStackedContent;

package/lib-module/StackView/index.js

@@ -1,5 +0,0 @@
-import StackView from './StackView';
-import StackWrap from './StackWrap';
-export default StackView;
-export { StackWrap };
-export { default as getStackedContent } from './getStackedContent';