@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/StackView/StackWrapBox.js

@@ -1,11 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View } from 'react-native';
-import { spacingProps, a11yProps, responsiveProps, useSpacingScale, useResponsiveProp } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 const offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -31,25 +54,29 @@ const spaceSides = {
  * between the container and the stacked children, and requires a negative margin on the container.
  */
 
-const StackWrapBox = ({
+const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   gap = space,
   direction: directionProp = 'row',
   children,
   tokens,
   variant,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
-  const viewport = useViewport();
-  const direction = useResponsiveProp(directionProp, 'row');
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
-  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 flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._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
   };
@@ -57,34 +84,55 @@ 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);
-};
-
-StackWrapBox.propTypes = { ...a11yProps.propTypes,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
+    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
+    children: content
+  });
+});
+StackWrapBox.displayName = 'StackWrapBox';
+StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
 
   /**
    * Sets the `flexDirection` of the container
    */
-  direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
+  direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.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: _utils.spacingProps.types.spacingValue,
 
   /**
-   * The size of the spacer according to the theme's spacing scale.
+   * 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).
    */
-  space: spacingProps.types.spacingValue,
+  gap: _utils.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.default.oneOf(_utils.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
+  children: _propTypes.default.node
 };
-export default StackWrapBox;
+var _default = StackWrapBox;
+exports.default = _default;

package/lib/StackView/StackWrapGap.js

@@ -1,11 +1,34 @@
-import React from 'react';
-import { View } from 'react-native';
-import StackWrapBox from './StackWrapBox';
-import { a11yProps, useSpacingScale, useResponsiveProp } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import getStackedContent from './getStackedContent';
-import { staticStyles, selectFlexStyles } from './common';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * The primary implementation of StackWrap.
  *
@@ -16,35 +39,42 @@ 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 = ({
+const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   tokens,
   variant,
   direction: directionProp = 'row',
   children,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
-  const viewport = useViewport();
-  const direction = useResponsiveProp(directionProp, 'row');
-  const themeTokens = useThemeTokens('StackView', tokens, variant, {
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
-  const flexStyles = selectFlexStyles(themeTokens);
-  const a11y = a11yProps.select({ ...rest
-  });
-  const size = useSpacingScale(space);
+  const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._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);
-};
-
-StackWrapGap.propTypes = StackWrapBox.propTypes;
-export default StackWrapGap;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
+    style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
+    children: content
+  });
+});
+StackWrapGap.displayName = 'StackWrapGap';
+StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
+var _default = StackWrapGap;
+exports.default = _default;

package/lib/StackView/common.js

@@ -1,14 +1,29 @@
-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
+  flexGrow,
+  flexShrink
 }) => ({
   alignItems,
   justifyContent,
-  flexGrow
+  flexGrow,
+  flexShrink
 });
-export const staticStyles = StyleSheet.create({
+
+exports.selectFlexStyles = selectFlexStyles;
+
+const staticStyles = _StyleSheet.default.create({
   wrap: {
     flexShrink: 1,
     flexWrap: 'wrap'
@@ -27,4 +42,6 @@ export const staticStyles = StyleSheet.create({
   'column-reverse': {
     flexDirection: 'column-reverse'
   }
-});
+});
+
+exports.staticStyles = staticStyles;

package/lib/StackView/getStackedContent.js

@@ -1,7 +1,26 @@
-import React, { Children, Fragment } from 'react';
-import Box from '../Box';
-import Divider from '../Divider';
-import Spacer from '../Spacer';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * @typedef {import('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -21,34 +40,39 @@ import Spacer from '../Spacer';
  *  - `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[]}
  */
-
 const getStackedContent = (children, {
   divider,
   space,
   direction = 'column',
-  box
+  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 validChildren = Children.toArray(unpackFragment(children)).filter(Boolean);
+  const topLevelChildren = preserveFragments ? children : unpackFragment(children);
+
+  const validChildren = _react.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.
-    React.createElement(Box, Object.assign({}, boxProps, {
+    (0, _react.createElement)(_Box.default, { ...boxProps,
       key: child.key || boxID,
       testID: boxID
-    }), child) : child;
+    }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
@@ -56,11 +80,14 @@ const getStackedContent = (children, {
       key: testID,
       space
     };
-    const separator = divider ? /*#__PURE__*/React.createElement(Divider, Object.assign({
-      vertical: direction.startsWith('row')
-    }, dividerProps, commonProps)) : /*#__PURE__*/React.createElement(Spacer, Object.assign({
-      direction: direction.startsWith('row') ? 'row' : 'column'
-    }, commonProps));
+    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      vertical: direction.startsWith('row'),
+      ...dividerProps,
+      ...commonProps
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      direction: direction.startsWith('row') ? 'row' : 'column',
+      ...commonProps
+    });
     return [...newChildren, separator, item];
   }, []);
   return content;
@@ -100,12 +127,15 @@ const getStackedContent = (children, {
 
 
 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 (_react.Children.count(child) > 1) return _react.Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
 
-  if (child?.type === Fragment) return unpackFragment(child.props?.children); // Stop unpacking as soon as any non-fragment child is found
+  if ((child === null || child === void 0 ? void 0 : child.type) === _react.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;
+var _default = getStackedContent;
+exports.default = _default;

package/lib/StackView/index.js

@@ -1,5 +1,29 @@
-import StackView from './StackView';
-import StackWrap from './StackWrap';
-export default StackView;
-export { StackWrap };
-export { default as getStackedContent } from './getStackedContent';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StackWrap", {
+  enumerable: true,
+  get: function () {
+    return _StackWrap.default;
+  }
+});
+Object.defineProperty(exports, "getStackedContent", {
+  enumerable: true,
+  get: function () {
+    return _getStackedContent.default;
+  }
+});
+exports.default = void 0;
+
+var _StackView = _interopRequireDefault(require("./StackView"));
+
+var _StackWrap = _interopRequireDefault(require("./StackWrap"));
+
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _StackView.default;
+exports.default = _default;