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

package/lib/InputLabel/InputLabel.js

@@ -1,11 +1,33 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, selectTokens, variantProp } from '../utils';
-import LabelContent from './LabelContent';
+"use strict";
 
-const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+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 _LabelContent = _interopRequireDefault(require("./LabelContent"));
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
 const selectHintStyles = ({
   hintColor,
@@ -13,7 +35,7 @@ const selectHintStyles = ({
   hintFontSize,
   hintFontWeight,
   hintLineHeight
-}) => applyTextStyles({
+}) => (0, _ThemeProvider.applyTextStyles)({
   color: hintColor,
   fontName: hintFontName,
   fontSize: hintFontSize,
@@ -37,41 +59,52 @@ function InputLabel({
   tokens,
   variant
 }) {
-  const themeTokens = useThemeTokens('InputLabel', tokens, variant); // TODO: use the actual Tooltip component here
-
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
-  return /*#__PURE__*/React.createElement(View, {
-    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow]
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label]
-  }, /*#__PURE__*/React.createElement(LabelContent, {
-    forId: forId
-  }, label)), hint && isHintInline && /*#__PURE__*/React.createElement(Text, {
-    style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
-    nativeID: hintId
-  }, hint), tooltip && /*#__PURE__*/React.createElement(Text, null, "?"), hint && !isHintInline && /*#__PURE__*/React.createElement(Text, {
-    style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
-    nativeID: hintId
-  }, hint));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.container, !isHintInline && staticStyles.containerWithHintBelow],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectLabelStyles(themeTokens), selectGapStyles(themeTokens), staticStyles.label],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+        forId: forId,
+        children: label
+      })
+    }), hint && isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectHintStyles(themeTokens), hasTooltip && selectGapStyles(themeTokens)],
+      nativeID: hintId,
+      children: hint
+    }), hasTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.tooltipAlign,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        content: tooltip
+      })
+    }), hint && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: [selectHintStyles(themeTokens), staticStyles.hintBelow],
+      nativeID: hintId,
+      children: hint
+    })]
+  });
 }
 
 InputLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  forId: PropTypes.string,
-  hint: PropTypes.string,
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  hintId: PropTypes.string,
-  tooltip: PropTypes.string,
-  tokens: getTokensPropType('InputLabel'),
-  variant: variantProp.propType
+  label: _propTypes.default.string.isRequired,
+  forId: _propTypes.default.string,
+  hint: _propTypes.default.string,
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  hintId: _propTypes.default.string,
+  tooltip: _propTypes.default.string,
+  tokens: (0, _utils.getTokensPropType)('InputLabel'),
+  variant: _utils.variantProp.propType
 };
-export default InputLabel;
-const staticStyles = StyleSheet.create({
+var _default = InputLabel;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
   container: {
     display: 'flex',
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'baseline'
   },
   containerWithHintBelow: {
     flexWrap: 'wrap'
@@ -82,5 +115,8 @@ const staticStyles = StyleSheet.create({
   hintBelow: {
     flexBasis: '100%',
     flexShrink: 0
+  },
+  tooltipAlign: {
+    alignSelf: 'center'
   }
 });

package/lib/InputLabel/LabelContent.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function LabelContent({
+  children,
+  forId
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    htmlFor: forId,
+    children: children
+  });
+}
+
+var _default = LabelContent;
+exports.default = _default;
+LabelContent.propTypes = {
+  children: _propTypes.default.string,
+  forId: _propTypes.default.string
+};

package/lib/InputLabel/LabelContent.native.js

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
 function LabelContent({
   children
@@ -5,4 +12,5 @@ function LabelContent({
   return children;
 }
 
-export default LabelContent;
+var _default = LabelContent;
+exports.default = _default;

package/lib/InputLabel/index.js

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

package/lib/InputSupports/InputSupports.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
+
+var _Feedback = _interopRequireDefault(require("../Feedback"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _useInputSupports = _interopRequireDefault(require("./useInputSupports"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function InputSupports({
+  children,
+  label,
+  hint,
+  hintPosition = 'inline',
+  feedback,
+  tooltip,
+  validation
+}) {
+  const {
+    space
+  } = (0, _ThemeProvider.useThemeTokens)('InputSupports');
+  const {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  } = (0, _useInputSupports.default)({
+    feedback,
+    hint,
+    label,
+    validation
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: space,
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      label: label,
+      hint: hint,
+      hintPosition: hintPosition,
+      hintId: hintId,
+      tooltip: tooltip,
+      forId: inputId
+    }), typeof children === 'function' ? children({
+      a11yProps,
+      inputId
+    }) : children, feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+      id: feedbackId,
+      title: feedback,
+      validation: validation
+    })]
+  });
+}
+
+InputSupports.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+
+  /**
+   * The input label.
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Position of the hint relative to label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = InputSupports;
+exports.default = _default;

package/lib/InputSupports/index.js

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

package/lib/InputSupports/propTypes.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const inputSupportProps = {
+  types: {
+    /**
+     * The input label.
+     */
+    label: _propTypes.default.string,
+
+    /**
+     * A short description of the expected input.
+     */
+    hint: _propTypes.default.string,
+
+    /**
+     * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+     */
+    hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+    /**
+     * A detailed description of validation error/success or additional instructions.
+     * Visual variant is determined based on the `validation` prop.
+     */
+    feedback: _propTypes.default.string,
+
+    /**
+     * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+     */
+    tooltip: _propTypes.default.string,
+
+    /**
+     * Use to visually mark an input as valid or invalid.
+     */
+    validation: _propTypes.default.oneOf(['error', 'success'])
+  },
+  select: ({
+    label,
+    hint,
+    hintPosition,
+    feedback,
+    tooltip,
+    validation,
+    ...rest
+  }) => ({
+    props: {
+      label,
+      hint,
+      hintPosition,
+      feedback,
+      tooltip,
+      validation
+    },
+    rest
+  })
+};
+var _default = inputSupportProps;
+exports.default = _default;

package/lib/InputSupports/useInputSupports.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const joinDefined = array => array.filter(item => item !== undefined).join(' ');
+
+const useInputSupports = ({
+  label,
+  feedback,
+  validation,
+  hint
+}) => {
+  const hasValidationError = validation === 'error';
+  const inputId = (0, _useUniqueId.default)('input');
+  const hintId = (0, _useUniqueId.default)('input-hint');
+  const feedbackId = (0, _useUniqueId.default)('input-feedback');
+  const a11yProps = {
+    accessibilityLabel: label,
+    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
+    // native only -> replaced with describedBy on web
+    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert on error, so there's no need to include it here
+    hint && hintId]),
+    accessibilityInvalid: hasValidationError
+  };
+  return {
+    inputId,
+    hintId,
+    feedbackId,
+    a11yProps
+  };
+};
+
+var _default = useInputSupports;
+exports.default = _default;

package/lib/Link/ChevronLink.js

@@ -1,21 +1,63 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from './Link';
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * `ChevronLink` is a convenience wrapper around the `Link` component to enable "directional" links.
+ * It effectively pre-binds left and right icons, and a directional translation of the icon on hover.
+ *
+ * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
+ */
 const ChevronLink = ({
   direction = 'right',
   children,
-  variant = {},
+  tokens,
+  variant,
   ...linkProps
-}) => /*#__PURE__*/React.createElement(Link, Object.assign({
-  variant: {
-    component: 'ChevronLink',
-    ...variant
-  },
-  iconPosition: direction
-}, linkProps), children);
-
-ChevronLink.propTypes = { ...Link.propTypes,
-  direction: PropTypes.oneOf(['left', 'right'])
+}) => {
+  const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
+
+  const applyChevronTokens = linkState => {
+    const {
+      leftIcon,
+      rightIcon,
+      iconDisplace,
+      ...otherTokens
+    } = getChevronTokens(linkState);
+    return { ...(0, _utils.selectTokens)('Link', otherTokens),
+      icon: direction === 'right' ? rightIcon : leftIcon,
+      iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
+    };
+  };
+
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', applyChevronTokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, { ...linkProps,
+    iconPosition: direction,
+    tokens: getTokens,
+    children: children
+  });
+};
+
+ChevronLink.propTypes = { ..._LinkBase.default.propTypes,
+  tokens: (0, _utils.getTokensPropType)('ChevronLink', 'Link'),
+  direction: _propTypes.default.oneOf(['left', 'right'])
 };
-export default ChevronLink;
+var _default = ChevronLink;
+exports.default = _default;

package/lib/Link/InlinePressable.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {import('react-native').PressableProps} PressableProps
+ */
+
+/**
+ * InlinePressable is an alternative to React Native's Pressable that works better when nested
+ * inline inside Text. It accepts the same props as React Native's Pressable.
+ *
+ * On Web it simply passes its props to Pressable and defaults to `inline-flex` instead of `flex`.
+ *
+ * @param {PressableProps} PressableProps
+ */
+// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
+// eslint-disable-next-line react/prop-types
+const InlinePressable = ({
+  children,
+  style,
+  ...props
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+  ...props,
+  children: pressState => typeof children === 'function' ? children(pressState) : children
+});
+
+const staticStyles = _StyleSheet.default.create({
+  inline: {
+    // Stop Pressable defaulting to (block) flex
+    display: 'inline-flex'
+  }
+});
+
+var _default = InlinePressable;
+exports.default = _default;

package/lib/Link/InlinePressable.native.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+
+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; }
+
+/* eslint-disable camelcase */
+
+/**
+ * @typedef {import('react-native').PressableProps} PressableProps
+ */
+// TouchableWithoutFeedback and Pressable have similar but not identical props APIs
+const pressablePropsToTouchable = ({
+  unstable_pressDelay,
+  android_disableSound,
+  android_ripple,
+  // Unsupported, discard it
+  ...props
+}) => ({ ...props,
+  touchSoundDisabled: android_disableSound,
+  delayPressIn: unstable_pressDelay
+});
+/**
+ * InlinePressable is an alternative to React Native's Pressable that works better when nested
+ * inline inside Text. It accepts the same props as React Native's Pressable.
+ *
+ * There are a lot of React Native bugs around Views/Pressables nested in Text, e.g.:
+ *
+ * - https://github.com/facebook/react-native/issues/23601#issuecomment-468069822
+ * - https://github.com/facebook/react-native/issues/30375
+ * - https://github.com/facebook/react-native/issues/31955
+ *
+ * On Native, these can be avoided using a `Text` wrapped in a `TouchableWithoutFeedback`; the latter
+ * injects additional handlers such as onPressIn to `Text`, resulting in a tree that is purely `Text`.
+ *
+ * Note that this should only be used on Native, not Web, because React Navigation's Web navigation
+ * functions don't work in Touchables (but do work in Pressable) due to different event handling.
+ *
+ * @param {PressableProps} PressableProps
+ */
+// React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
+// eslint-disable-next-line react/prop-types
+
+
+const InlinePressable = ({
+  onPress,
+  children,
+  style,
+  ...rest
+}) => {
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+
+  const handleFocus = () => setIsFocused(true);
+
+  const handleBlur = () => setIsFocused(false);
+
+  const [isPressed, setIsPressed] = (0, _react.useState)(false);
+
+  const handlePressIn = () => setIsPressed(true);
+
+  const handlePressOut = () => setIsPressed(false);
+
+  const pressState = {
+    pressed: isPressed,
+    focus: isFocused,
+    // limited support on native
+    hover: false // not yet supported on native
+
+  };
+  const currentStyle = typeof style === 'function' ? style(pressState) : style;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+    onPress: onPress,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    ...pressablePropsToTouchable(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: currentStyle,
+      children: typeof children === 'function' ? children(pressState) : children
+    })
+  });
+};
+
+var _default = InlinePressable;
+exports.default = _default;