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

package/lib/Radio/Radio.js

@@ -1,29 +1,47 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import RadioInput from './RadioInput'; // @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
-
-import RadioLabel from '../InputLabel/LabelContent';
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { getTokensPropType, useInputValue, useUniqueId, variantProp } from '../utils';
-import { a11yProps } from '../utils/propTypes';
-import StackView from '../StackView';
+"use strict";
 
-const selectCheckedStyles = ({
-  checkedBackgroundColor,
-  checkedSize
-}) => ({
-  backgroundColor: checkedBackgroundColor,
-  borderRadius: checkedSize / 2,
-  height: checkedSize,
-  width: checkedSize
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+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 _LabelContent = _interopRequireDefault(require("../InputLabel/LabelContent"));
+
+var _RadioButton = _interopRequireWildcard(require("./RadioButton"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+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; }
+
+// @todo move `LabelContent` outside of the `InputLabel` and fix
+// the issue with the cursor not being pointer on Web
 const selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,
-  containerMarginBottom,
   containerOpacity,
   containerPaddingBottom,
   containerPaddingLeft,
@@ -33,13 +51,12 @@ const selectContainerStyles = ({
 }) => ({
   backgroundColor: containerBackgroundColor,
   borderRadius: containerBorderRadius,
-  marginBottom: containerMarginBottom,
   opacity: containerOpacity,
   paddingBottom: containerPaddingBottom,
   paddingLeft: containerPaddingLeft,
   paddingRight: containerPaddingRight,
   paddingTop: containerPaddingTop,
-  ...applyShadowToken(containerShadow)
+  ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
 });
 
 const selectDescriptionStyles = ({
@@ -51,31 +68,12 @@ const selectDescriptionStyles = ({
   labelMarginLeft = 0
 }) => ({
   marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-  ...applyTextStyles({
+  ...(0, _ThemeProvider.applyTextStyles)({
     fontSize: descriptionFontSize,
     lineHeight: descriptionLineHeight
   })
 });
 
-const selectInputStyles = ({
-  inputBackgroundColor,
-  inputBorderColor,
-  inputBorderWidth,
-  inputOutlineColor,
-  inputOutlineWidth,
-  inputSize
-}) => ({
-  borderColor: inputBorderColor,
-  borderRadius: inputSize / 2,
-  borderWidth: inputBorderWidth,
-  backgroundColor: inputBackgroundColor,
-  height: inputSize,
-  outlineStyle: 'solid',
-  outlineColor: inputOutlineColor,
-  outlineWidth: inputOutlineWidth,
-  width: inputSize
-});
-
 const selectLabelStyles = ({
   labelColor,
   labelFontName,
@@ -83,7 +81,7 @@ const selectLabelStyles = ({
   labelFontWeight,
   labelMarginLeft,
   labelLineHeight
-}) => applyTextStyles({
+}) => (0, _ThemeProvider.applyTextStyles)({
   color: labelColor,
   fontName: labelFontName,
   fontWeight: labelFontWeight,
@@ -125,7 +123,7 @@ const selectLabelStyles = ({
  */
 
 
-const Radio = ({
+const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
   checked,
   defaultChecked,
   description,
@@ -133,159 +131,163 @@ const Radio = ({
   id,
   inactive,
   label,
-  name,
+  name: inputName,
   onChange,
   tokens,
   value,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
     isControlled
-  } = useInputValue({
+  } = (0, _utils.useInputValue)({
     value: checked,
     initialValue: defaultChecked,
     onChange
   }, 'useRadioValue');
-  const getTokens = useThemeTokensCallback('Radio', tokens, {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Radio', tokens, {
     checked: isChecked,
     inactive,
     error,
     ...variant
   });
 
-  const handleChange = () => {
+  const handleChange = event => {
     if (!inactive && !isChecked) {
-      setIsChecked(true);
+      setIsChecked(true, event);
     }
   };
 
-  const accessibilityProps = a11yProps.select(rest);
-  const uniqueId = useUniqueId('radio');
-  const inputId = id ?? uniqueId; // @todo our current version of React Native Web doesn't include
-  // keyboard support on `Pressable` (which starts with 0.15.3), so
-  // the complete accessibility of the `Radio` component on Web
-  // (namely, change on key pressed) is pending RNW upgrade
-  // (see https://github.com/necolas/react-native-web/issues/1950)
+  const handleKeyDown = event => {
+    // The expected keyboard shortcut for activating a radio is the Space key
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
+  };
+
+  const accessibilityProps = _propTypes2.a11yProps.select(rest);
 
-  return /*#__PURE__*/React.createElement(Pressable, Object.assign({
+  const uniqueId = (0, _utils.useUniqueId)('radio');
+  const inputId = id ?? uniqueId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     disabled: inactive,
+    onKeyDown: handleKeyDown,
     onPress: handleChange,
     accessibilityRole: "radio",
     accessibilityState: {
       checked: isChecked,
       disabled: inactive
-    }
-  }, accessibilityProps), ({
-    focused: focus,
-    hovered: hover,
-    pressed
-  }) => {
-    const stateTokens = getTokens({
-      focus,
-      hover,
+    },
+    ...accessibilityProps,
+    children: ({
+      focused: focus,
+      hovered: hover,
       pressed
-    });
-    return /*#__PURE__*/React.createElement(StackView, {
-      space: 0
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [staticStyles.container, selectContainerStyles(stateTokens)]
-    }, /*#__PURE__*/React.createElement(View, {
-      style: StyleSheet.flatten([staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)]),
-      testID: "Radio-Input"
-    }, /*#__PURE__*/React.createElement(RadioInput, {
-      checked: isChecked,
-      defaultChecked: defaultChecked,
-      disabled: inactive,
-      id: inputId,
-      isControlled: isControlled,
-      name: name,
-      value: value
-    }), isChecked && /*#__PURE__*/React.createElement(View, {
-      style: selectCheckedStyles(stateTokens),
-      testID: "Radio-Checked"
-    })), Boolean(label) && /*#__PURE__*/React.createElement(Text, {
-      style: selectLabelStyles(stateTokens)
-    }, /*#__PURE__*/React.createElement(RadioLabel, {
-      forId: inputId
-    }, label))), Boolean(description) && /*#__PURE__*/React.createElement(Text, {
-      style: selectDescriptionStyles(getTokens())
-    }, description));
+    }) => {
+      const stateTokens = getTokens({
+        focus,
+        hover,
+        pressed
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        space: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: [staticStyles.container, selectContainerStyles(stateTokens)],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+            tokens: (0, _RadioButton.selectRadioButtonTokens)(stateTokens),
+            isControlled: isControlled,
+            isChecked: isChecked,
+            inactive: inactive,
+            defaultChecked: defaultChecked,
+            inputId: inputId,
+            handleChange: handleChange,
+            name: inputName,
+            value: value
+          }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: selectLabelStyles(stateTokens),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+              forId: inputId,
+              children: label
+            })
+          })]
+        }), Boolean(description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: selectDescriptionStyles(getTokens()),
+          children: description
+        })]
+      });
+    }
   });
-};
-
-Radio.propTypes = { ...a11yProps.propTypes,
+});
+Radio.displayName = 'Radio';
+Radio.propTypes = { ..._propTypes2.a11yProps.propTypes,
 
   /**
    * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
    */
-  checked: PropTypes.bool,
+  checked: _propTypes.default.bool,
 
   /**
    * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
    */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: _propTypes.default.bool,
 
   /**
    * An optional radio button description.
    */
-  description: PropTypes.string,
+  description: _propTypes.default.string,
 
   /**
    * Radio button ID.
    */
-  id: PropTypes.string,
+  id: _propTypes.default.string,
 
   /**
    * Whether the corresponding input is disabled or active.
    */
-  inactive: PropTypes.bool,
+  inactive: _propTypes.default.bool,
 
   /**
    * The label.
    */
-  label: PropTypes.string,
+  label: _propTypes.default.string,
 
   /**
    * Associate this radio button with a group (set as the name attribute).
    */
-  name: PropTypes.string,
+  name: _propTypes.default.string,
 
   /**
    * Whether the underlying input triggered a validation error or not.
    */
-  error: PropTypes.bool,
+  error: _propTypes.default.bool,
 
   /**
    * The value. Must be unique within the group.
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
 
   /**
    * Callback called when a controlled radio button gets interacted with.
    */
-  onChange: PropTypes.func,
+  onChange: _propTypes.default.func,
 
   /**
    * Radio tokens.
    */
-  tokens: getTokensPropType('Radio'),
+  tokens: (0, _utils.getTokensPropType)('Radio'),
 
   /**
    * Radio variant.
    */
-  variant: variantProp.propType
+  variant: _utils.variantProp.propType
 };
-export default Radio;
-const staticStyles = StyleSheet.create({
+var _default = Radio;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center'
-  },
-  defaultInputStyles: {
-    alignItems: 'center',
-    justifyContent: 'center'
   }
 });

package/lib/Radio/RadioButton.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.selectRadioButtonTokens = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _RadioInput = _interopRequireDefault(require("./RadioInput"));
+
+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; }
+
+// TODO: roll out a standard approach to token sets
+// https://github.com/telus/universal-design-system/issues/782
+const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
+
+const selectRadioButtonTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+
+exports.selectRadioButtonTokens = selectRadioButtonTokens;
+
+const getBorderRadius = inputSize => inputSize / 2;
+
+const selectCheckedStyles = ({
+  checkedBackgroundColor,
+  checkedSize
+}) => ({
+  backgroundColor: checkedBackgroundColor,
+  borderRadius: checkedSize / 2,
+  height: checkedSize,
+  width: checkedSize
+});
+
+const selectInputStyles = ({
+  inputBackgroundColor,
+  inputBorderColor,
+  inputBorderWidth,
+  inputOutlineColor,
+  inputOutlineWidth,
+  inputSize
+}) => ({
+  borderColor: inputBorderColor,
+  borderRadius: getBorderRadius(inputSize),
+  borderWidth: inputBorderWidth,
+  backgroundColor: inputBackgroundColor,
+  height: inputSize,
+  width: inputSize,
+  ..._Platform.default.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth
+    }
+  })
+});
+
+const selectOuterBorderStyles = ({
+  outerBorderColor,
+  outerBorderWidth,
+  outerBorderGap,
+  inputSize
+}) => ({ ...(0, _ThemeProvider.applyOuterBorder)({
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius: getBorderRadius(inputSize)
+  })
+});
+/**
+ * The visual toggle of a radio input. Is not interactive on its own, should be used inside
+ * an interactive parent that passes down props when interacted with.
+ */
+
+
+const RadioButton = /*#__PURE__*/(0, _react.forwardRef)(({
+  isChecked,
+  tokens,
+  inactive,
+  defaultChecked,
+  inputId,
+  isControlled,
+  handleChange,
+  name: inputName,
+  value
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens, {
+    checked: isChecked
+  }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectOuterBorderStyles(themeTokens),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)],
+      testID: "Radio-Input",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioInput.default, {
+        ref: ref,
+        checked: isChecked,
+        defaultChecked: defaultChecked,
+        disabled: inactive,
+        id: inputId,
+        isControlled: isControlled,
+        onChange: handleChange,
+        name: inputName,
+        value: value
+      }), isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectCheckedStyles(themeTokens),
+        testID: "Radio-Checked"
+      })]
+    })
+  });
+});
+RadioButton.displayName = 'RadioButton';
+RadioButton.propTypes = {
+  isChecked: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+    allowFunction: true
+  }),
+  inactive: _propTypes.default.bool,
+  defaultChecked: _propTypes.default.bool,
+  inputId: _propTypes.default.string,
+  isControlled: _propTypes.default.bool,
+  handleChange: _propTypes.default.func,
+  name: _propTypes.default.string,
+  value: _propTypes.default.bool
+};
+
+const staticStyles = _StyleSheet.default.create({
+  defaultInputStyles: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+
+var _default = RadioButton;
+exports.default = _default;