@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/Divider/Divider.js

@@ -1,9 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, StyleSheet, Platform } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import Spacer from '../Spacer';
-import { getTokensPropType, variantProp, spacingProps } from '../utils';
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _utils = require("../utils");
+
+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('../utils/propTypes.js').SpacingIndex} SpacingIndex
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
@@ -45,18 +70,17 @@ import { getTokensPropType, variantProp, spacingProps } from '../utils';
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-
-const Divider = ({
+const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   vertical = false,
   space,
   tokens,
   testID
-}) => {
+}, ref) => {
   const {
     color,
     width
-  } = useThemeTokens('Divider', tokens, variant);
+  } = (0, _ThemeProvider.useThemeTokens)('Divider', tokens, variant);
   const borderStyles = vertical ? {
     borderRightColor: color,
     borderRightWidth: width
@@ -64,49 +88,56 @@ const Divider = ({
     borderBottomColor: color,
     borderBottomWidth: width
   };
-  const a11y = Platform.OS === 'web' ? // There are aria attributes for dividers on web
+  const a11y = _Platform.default.OS === 'web' ? // There are aria attributes for dividers on web
   {
     'aria-orientation': vertical ? 'vertical' : 'horizontal',
     accessibilityRole: 'separator'
   } : // There are no such equivalent attributes for native
   {};
-  const divider = /*#__PURE__*/React.createElement(View, Object.assign({
+  const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: [styles.divider, borderStyles],
-    testID: testID
-  }, a11y));
+    testID: testID,
+    ...a11y
+  });
   if (!space) return divider;
   const spacerProps = {
     space,
     direction: vertical ? 'row' : 'column'
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, Object.assign({}, spacerProps, {
-    testID: testID ? `${testID}-Spacer-before` : undefined
-  })), divider, /*#__PURE__*/React.createElement(Spacer, Object.assign({}, spacerProps, {
-    testID: testID ? `${testID}-Spacer-after` : undefined
-  })));
-};
-
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
+      testID: testID ? `${testID}-Spacer-before` : undefined
+    }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
+      testID: testID ? `${testID}-Spacer-after` : undefined
+    })]
+  });
+});
+Divider.displayName = 'Divider';
 Divider.propTypes = {
-  tokens: getTokensPropType('Divider'),
-  space: spacingProps.types.spacingValue,
-  variant: variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Divider'),
+  space: _utils.spacingProps.types.spacingValue,
+  variant: _utils.variantProp.propType,
 
   /**
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
    */
-  vertical: PropTypes.bool,
+  vertical: _propTypes.default.bool,
 
   /**
    * @ignore
    * In tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,
    * no accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.
    */
-  testID: PropTypes.string
+  testID: _propTypes.default.string
 };
-const styles = StyleSheet.create({
+
+const styles = _StyleSheet.default.create({
   divider: {
     alignSelf: 'stretch'
   }
 });
-export default Divider;
+
+var _default = Divider;
+exports.default = _default;

package/lib/Divider/index.js

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

package/lib/ExpandCollapse/Accordion.js

@@ -1,12 +1,31 @@
-import React from 'react';
-import ExpandCollapse from './ExpandCollapse';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
+
+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; }
+
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
-
-const Accordion = props => /*#__PURE__*/React.createElement(ExpandCollapse, Object.assign({}, props, {
+const Accordion = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+  ref: ref,
+  ...props,
   maxOpen: 1
 }));
-
-Accordion.propTypes = ExpandCollapse.propTypes;
-export default Accordion;
+Accordion.displayName = 'Accordion';
+Accordion.propTypes = _ExpandCollapse.default.propTypes;
+var _default = Accordion;
+exports.default = _default;

package/lib/ExpandCollapse/Control.js

@@ -1,8 +1,29 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import { getTokensPropType, variantProp, a11yProps } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+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; }
 
 function selectContainerStyles({
   backgroundColor,
@@ -27,7 +48,7 @@ function selectContainerStyles({
     paddingTop,
     paddingBottom,
     justifyContent,
-    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
+    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
   };
 } // TODO: use stack / spacer when available
 
@@ -49,7 +70,7 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = ({
+const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
   onPress,
   isExpanded,
   children,
@@ -57,11 +78,13 @@ const ExpandCollapseControl = ({
   accessibilityRole = 'button',
   variant,
   rest
-}) => {
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
-  const a11y = a11yProps.select({ ...rest,
+}, ref) => {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+
+  const a11y = _utils.a11yProps.select({ ...rest,
     accessibilityRole
   });
+
   a11y.accessibilityState = { ...(a11y.accessibilityState || {}),
     expanded: isExpanded
   };
@@ -81,40 +104,46 @@ const ExpandCollapseControl = ({
 
   const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
 
-  return /*#__PURE__*/React.createElement(Pressable, Object.assign({}, a11y, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    ...a11y,
     onPress: onPress,
-    style: getPressableStyle
-  }), pressableState => {
-    const {
-      icon: IconComponent,
-      ...themeTokens
-    } = getControlTokens(pressableState);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, IconComponent && /*#__PURE__*/React.createElement(View, {
-      style: selectIconContainerStyles(themeTokens)
-    }, /*#__PURE__*/React.createElement(IconComponent, {
-      tokens: selectIconTokens(themeTokens)
-    })), typeof children === 'function' ? children(getControlState(pressableState)) : children);
+    style: getPressableStyle,
+    children: pressableState => {
+      const {
+        icon: IconComponent,
+        ...themeTokens
+      } = getControlTokens(pressableState);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectIconContainerStyles(themeTokens),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+      });
+    }
   });
-};
-
-ExpandCollapseControl.propTypes = { ...a11yProps.propTypes,
-  tokens: getTokensPropType('ExpandCollapseControl'),
-  variant: variantProp.propType,
+});
+ExpandCollapseControl.displayName = 'ExpandCollapseControl';
+ExpandCollapseControl.propTypes = { ..._utils.a11yProps.propTypes,
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+  variant: _utils.variantProp.propType,
 
   /**
    * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
    * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
    */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
 
   /**
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
-  isExpanded: PropTypes.bool,
+  isExpanded: _propTypes.default.bool,
 
   /**
    * Function called when the ExpandCollapse is pressed.
    */
-  onPress: PropTypes.func.isRequired
+  onPress: _propTypes.default.func.isRequired
 };
-export default ExpandCollapseControl;
+var _default = ExpandCollapseControl;
+exports.default = _default;

package/lib/ExpandCollapse/ExpandCollapse.js

@@ -1,8 +1,27 @@
-import React from 'react';
-import { View } from 'react-native';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp, useMultipleInputValues } from '../utils';
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+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; }
 
 function selectBorderStyles(tokens) {
   return {
@@ -20,7 +39,7 @@ function selectBorderStyles(tokens) {
  */
 
 
-const ExpandCollapse = ({
+const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   tokens,
   variant,
@@ -28,61 +47,64 @@ const ExpandCollapse = ({
   open,
   initialOpen,
   onChange
-}) => {
+}, ref) => {
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,
     resetValues,
     setValues,
     unsetValues
-  } = useMultipleInputValues({
+  } = (0, _utils.useMultipleInputValues)({
     maxValues: maxOpen,
     values: open,
     initialValues: initialOpen,
     onChange
   });
-  const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
-  return /*#__PURE__*/React.createElement(View, {
-    style: selectBorderStyles(themeTokens)
-  }, typeof children === 'function' ? children({
-    openIds,
-    onToggle,
-    resetValues,
-    setValues,
-    unsetValues
-  }) : children);
-};
-
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: selectBorderStyles(themeTokens),
+    children: typeof children === 'function' ? children({
+      openIds,
+      onToggle,
+      resetValues,
+      setValues,
+      unsetValues
+    }) : children
+  });
+});
+ExpandCollapse.displayName = 'ExpandCollapse';
 ExpandCollapse.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ExpandCollapse'),
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),
 
   /**
    * ExpandCollapse usually takes a render function to which it passes an object with properties
    * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
    * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
    */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
 
   /**
    * If set, enforces a specific maximum number of open items, closing already-open items when new
    * items are opened. By default, any number of items may be open at once.
    */
-  maxOpen: PropTypes.number,
+  maxOpen: _propTypes.default.number,
 
   /**
    * If passed, the item or items that are expanded will be controlled by a parent component
    */
-  open: PropTypes.arrayOf(PropTypes.string),
+  open: _propTypes.default.arrayOf(_propTypes.default.string),
 
   /**
    * Function called when which panels are currently open changes. Necessary if `open` is passed.
    */
-  onChange: PropTypes.func,
+  onChange: _propTypes.default.func,
 
   /**
    * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
    */
-  initialOpen: PropTypes.arrayOf(PropTypes.string)
+  initialOpen: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-export default ExpandCollapse;
+var _default = ExpandCollapse;
+exports.default = _default;