@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/Spacer/Spacer.js

@@ -1,12 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
-import { useSpacingScale, spacingProps } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
  */
-
 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`.
@@ -59,9 +75,9 @@ const Spacer = ({
   direction = 'column',
   testID
 }) => {
-  const size = useSpacingScale(space);
+  const size = (0, _utils.useSpacingScale)(space);
   const sizeStyle = selectSizeStyle(size, direction);
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     testID: testID,
     style: [staticStyles.stretch, sizeStyle]
   });
@@ -73,7 +89,7 @@ Spacer.propTypes = {
    * 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,
+  space: _utils.spacingProps.types.spacingValue,
 
   /**
    * The spacer applies space in only one direction, which is controlled by the `direction` prop:
@@ -81,18 +97,21 @@ Spacer.propTypes = {
    * - `'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']),
+  direction: _propTypes.default.oneOf(['column', 'row']),
 
   /**
    * @ignore
    * In tests, the only way to select Spacers is with testID prop and getByTestId, since they have no content,
    * no accessibility role, and there is no equivalent of nextSibling in React Native Testing Library.
    */
-  testID: PropTypes.string
+  testID: _propTypes.default.string
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   stretch: {
     alignSelf: 'stretch'
   }
 });
-export default Spacer;
+
+var _default = Spacer;
+exports.default = _default;

package/lib/Spacer/index.js

@@ -1,2 +1,13 @@
-import Spacer from './Spacer';
-export default Spacer;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Spacer = _interopRequireDefault(require("./Spacer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Spacer.default;
+exports.default = _default;

package/lib/StackView/StackView.js

@@ -1,11 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import Divider from '../Divider';
-import { spacingProps, a11yProps } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+
+var _common = require("./common");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * StackView evenly spaces its children, by default placing `Spacer` components between them.
  *
@@ -23,10 +44,14 @@ import { staticStyles, selectFlexStyles } from './common';
  * - `'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.
+ * (`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`.
@@ -44,62 +69,61 @@ import { staticStyles, selectFlexStyles } from './common';
  * 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 = ({
   space = 1,
   divider,
-  direction = 'column',
-  inherit,
+  direction: directionProp = 'column',
   children,
   variant,
   tokens,
   ...rest
 }) => {
-  const a11y = a11yProps.select({ ...rest
-  });
-  const content = getStackedContent(children, {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'column');
+  const props = { ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
+  };
+  const content = (0, _getStackedContent.default)(children, {
     direction,
     divider,
     space
   });
-  const themeTokens = useThemeTokens('StackView', tokens, variant);
-  const flexStyles = selectFlexStyles(themeTokens);
-  return inherit ? content : /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
-    style: [flexStyles, staticStyles[direction]]
-  }), content);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+    viewport
+  });
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+    style: [flexStyles, _common.staticStyles[direction]],
+    children: content
+  });
 };
 
-StackView.propTypes = { ...a11yProps.propTypes,
+StackView.propTypes = { ..._utils.a11yProps.propTypes,
+  variant: _utils.variantProp.propType,
 
   /**
    * Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
    */
-  direction: PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse']),
+  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.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)]),
-
-  /**
-   * If true, does not render any container and returns an array of spaced children, inheriting
-   * flex styles from the StackView's parent. That parent must have a `flexDirection` style corresponding
-   * to the StackView's `direction` prop for `divider` prop to behave correctly.
-   */
-  inherit: PropTypes.bool,
+  divider: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape(_Divider.default.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,
+  space: _utils.spacingProps.types.spacingValue,
 
   /**
    * 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
+  children: _propTypes.default.node
 };
-export default StackView;
+var _default = StackView;
+exports.default = _default;

package/lib/StackView/StackWrap.js

@@ -1,8 +1,24 @@
-import React from 'react';
-import StackWrapBox from './StackWrapBox';
-import StackWrapGap from './StackWrapGap'; // 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.
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
 
+var _StackWrapGap = _interopRequireDefault(require("./StackWrapGap"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// 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.
@@ -13,20 +29,27 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = props => {
+  var _props$gap, _CSS;
+
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
   // eslint-disable-next-line react/destructuring-assignment
 
-  const gap = props.gap ?? space;
-  return gap === space && CSS?.supports('gap', exampleGapValue) ?
+  const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
+  const canUseCSSGap = _Platform.default.OS === 'web' && gap === space && // In Jest/CI, global CSS isn't always available and doesn't always have .supports method
+  typeof ((_CSS = CSS) === null || _CSS === void 0 ? void 0 : _CSS.supports) === 'function' && CSS.supports('gap', exampleGapValue);
+  return canUseCSSGap ?
   /*#__PURE__*/
   // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.
-  React.createElement(StackWrapGap, props) :
+  (0, _jsxRuntime.jsx)(_StackWrapGap.default, { ...props
+  }) :
   /*#__PURE__*/
   // Else, use the fallback implementation which renders a `Box` component around each child.
-  React.createElement(StackWrapBox, props);
+  (0, _jsxRuntime.jsx)(_StackWrapBox.default, { ...props
+  });
 };
 
-StackWrap.propTypes = StackWrapBox.propTypes;
-export default StackWrap;
+StackWrap.propTypes = _StackWrapBox.default.propTypes;
+var _default = StackWrap;
+exports.default = _default;

package/lib/StackView/StackWrap.native.js

@@ -1,3 +1,14 @@
-import StackWrapBox from './StackWrapBox'; // No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+"use strict";
 
-export default StackWrapBox;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// No support for CSS `gap` on React Native, so always use the fallback "box" implementation.
+var _default = _StackWrapBox.default;
+exports.default = _default;

package/lib/StackView/StackWrapBox.js

@@ -1,10 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import { spacingProps, a11yProps, useSpacingScale } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+
+var _common = require("./common");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -33,18 +53,23 @@ const spaceSides = {
 const StackWrapBox = ({
   space = 1,
   gap = space,
-  direction = 'row',
+  direction: directionProp = 'row',
   children,
   tokens,
   variant,
   ...rest
 }) => {
-  const themeTokens = useThemeTokens('StackView', tokens, variant);
-  const flexStyles = selectFlexStyles(themeTokens);
-  const a11y = a11yProps.select({ ...rest
-  }); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+    viewport
+  });
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const props = { ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(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 gapSize = (0, _utils.useSpacingScale)(gap);
   const offsetStyle = {
     [offsetSides[direction]]: -1 * gapSize
   };
@@ -52,34 +77,36 @@ const StackWrapBox = ({
     [gapSides[direction]]: gap,
     [spaceSides[direction]]: space
   };
-  const content = getStackedContent(children, {
+  const content = (0, _getStackedContent.default)(children, {
     direction,
     space: 0,
     box: boxProps
   });
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
-    style: [flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle]
-  }), content);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
+    children: content
+  });
 };
 
-StackWrapBox.propTypes = { ...a11yProps.propTypes,
+StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
 
   /**
-   * Sets the `flexDirection` of the container, or if 'inherit' returns spaced children as an array.
+   * Sets the `flexDirection` of the container
    */
-  direction: PropTypes.oneOf(['column', 'row']),
+  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
 
   /**
    * 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,
+  space: _utils.spacingProps.types.spacingValue,
 
   /**
    * 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
+  children: _propTypes.default.node
 };
-export default StackWrapBox;
+var _default = StackWrapBox;
+exports.default = _default;

package/lib/StackView/StackWrapGap.js

@@ -1,10 +1,30 @@
-import React from 'react';
-import { View } from 'react-native';
-import StackWrapBox from './StackWrapBox';
-import { a11yProps, useSpacingScale } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StackWrapBox = _interopRequireDefault(require("./StackWrapBox"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+
+var _common = require("./common");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * The primary implementation of StackWrap.
  *
@@ -15,31 +35,37 @@ import { staticStyles, selectFlexStyles } from './common';
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-
 const StackWrapGap = ({
   space = 1,
   tokens,
   variant,
-  direction = 'row',
+  direction: directionProp = 'row',
   children,
   ...rest
 }) => {
-  const themeTokens = useThemeTokens('StackView', tokens, variant);
-  const flexStyles = selectFlexStyles(themeTokens);
-  const a11y = a11yProps.select({ ...rest
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
+    viewport
   });
-  const size = useSpacingScale(space);
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const props = { ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
+  };
+  const size = (0, _utils.useSpacingScale)(space);
   const gapStyle = {
     gap: size
   };
-  const content = getStackedContent(children, {
+  const content = (0, _getStackedContent.default)(children, {
     direction,
     space: 0
   });
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
-    style: [flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle]
-  }), content);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
+    children: content
+  });
 };
 
-StackWrapGap.propTypes = StackWrapBox.propTypes;
-export default StackWrapGap;
+StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
+var _default = StackWrapGap;
+exports.default = _default;

package/lib/StackView/common.js

@@ -1,5 +1,15 @@
-import { StyleSheet } from 'react-native';
-export const selectFlexStyles = ({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.staticStyles = exports.selectFlexStyles = void 0;
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectFlexStyles = ({
   alignItems,
   justifyContent,
   flexGrow
@@ -8,7 +18,10 @@ export const selectFlexStyles = ({
   justifyContent,
   flexGrow
 });
-export const staticStyles = StyleSheet.create({
+
+exports.selectFlexStyles = selectFlexStyles;
+
+const staticStyles = _StyleSheet.default.create({
   wrap: {
     flexShrink: 1,
     flexWrap: 'wrap'
@@ -27,4 +40,6 @@ export const staticStyles = StyleSheet.create({
   'column-reverse': {
     flexDirection: 'column-reverse'
   }
-});
+});
+
+exports.staticStyles = staticStyles;