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

package/lib/utils/info/platform/platform.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = '.web (default)';
+exports.default = _default;

package/lib/utils/info/platform/platform.native.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
+// If this gets picked, either an unsupported React Native platform is being used somehow
+// (e.g. a native Windows app), or there's a serious config problem somewhere.
+var _default = '.native';
+exports.default = _default;

package/lib/utils/info/versions.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _package = _interopRequireDefault(require("../../../package.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Add more versions if they are useful e.g. theme schema version
+var _default = {
+  uds: _package.default.version
+};
+exports.default = _default;

package/lib/utils/input.js

@@ -1,4 +1,12 @@
-import { useCallback, useState } from 'react';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultipleInputValues = exports.useInputValue = void 0;
+
+var _react = require("react");
+
 const pluralHooks = ['useMultipleInputValues'];
 
 const validateProps = ({
@@ -49,25 +57,27 @@ Consumers of this hook must be one of:
  * management tools such as Formik and React Hooks Form.
  *
  * @param {object} props
- * @param {any} [props.value] - for a controlled input, the active values as set by a parent
- * @param {any} [props.initialValue] - for an uncontrolled input, the default active values
+ * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
+ * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
  * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
  * @param {boolean} [props.readOnly] - if true, stops the input values from changing
  *
  * @param {string} hookName - optional, used for tailoring error messages
  *
+ * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
+ *          a function returning a new value from the old value
  * @returns {{
- *   currentValue: any
- *   setValue: (value: any) => void
+ *   currentValue: string|number|null
+ *   setValue: (newValue: string|number|null|UpdaterFunction) => void
  *   resetValue: () => void
  *   isControlled: bool
  * }}
  */
 
 
-export const useInputValue = (props = {}, hookName = 'useInputValue') => {
+const useInputValue = (props = {}, hookName = 'useInputValue') => {
   const isCurrentlyControlled = props.value !== undefined;
-  const [isControlled] = useState(isCurrentlyControlled);
+  const [isControlled] = (0, _react.useState)(isCurrentlyControlled);
   validateProps(props, {
     isControlled,
     isCurrentlyControlled
@@ -78,17 +88,24 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
     onChange,
     readOnly = false
   } = props;
-  const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
+  const [ownValue, setOwnValue] = (0, _react.useState)(!isControlled && initialValue);
   const currentValue = isControlled ? value : ownValue; // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
   // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
 
-  const [initializedValue] = useState(currentValue);
-  const setValue = useCallback(newValue => {
+  const valueRef = (0, _react.useRef)({
+    initial: currentValue,
+    value: currentValue
+  }); // Make current value accessible inside useCallback without rememoizing every time the value changes
+
+  valueRef.current.value = currentValue;
+  const setValue = (0, _react.useCallback)((arg, event) => {
     if (readOnly) return;
-    if (onChange) onChange(newValue);
-    if (!isControlled) setOwnValue(newValue);
+    const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
+    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
+
+    if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
   }, [isControlled, onChange, readOnly]);
-  const resetValue = useCallback(() => setValue(initializedValue), [initializedValue, setValue]);
+  const resetValue = (0, _react.useCallback)(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
@@ -105,24 +122,29 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
  * management tools such as Formik and React Hooks Form.
  *
  * @param {object} props
- * @param {any[]} [props.values] - for a controlled input, the active values as set by a parent
- * @param {any[]} [props.initialValues] - for an uncontrolled input, the default active values
+ * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
+ * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
  * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
  * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
  * @param {boolean} [props.readOnly] - if true, stops the input values from changing
  *
  * @param {string} componentName - optional, used in error messages
  *
+ * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
+ *          a function returning new values from old values
  * @returns {{
  *   currentValues: any
  *   resetValues: () => void
- *   setValues: (newValues: any[]) => void
+ *   setValues: (newValues: string[]|number[]|UpdaterFunction) => void
  *   toggleOneValue: (value: string|number) => void
  *   unsetValues: () => void
  * }}
  */
 
-export const useMultipleInputValues = ({
+
+exports.useInputValue = useInputValue;
+
+const useMultipleInputValues = ({
   values,
   initialValues,
   maxValues,
@@ -140,20 +162,24 @@ export const useMultipleInputValues = ({
     // if we're controlling our own state, always start with an array
     initialValue: initialValues ?? (values === undefined ? [] : undefined)
   }, 'useMultipleInputValues');
-  const enforceMaxValues = useCallback(newValues => {
+  const enforceMaxValues = (0, _react.useCallback)(newValues => {
     if (!maxValues) return newValues;
     const excess = newValues.length - maxValues;
     return excess > 0 ? newValues.slice(excess) : newValues;
   }, [maxValues]);
   const currentValues = enforceMaxValues(currentValue);
-  const setValues = useCallback(newValues => setValue(enforceMaxValues(newValues)), [setValue, enforceMaxValues]);
+  const setValues = (0, _react.useCallback)((newValues, event) => {
+    const validNewValues = enforceMaxValues(newValues);
+    setValue(validNewValues, event);
+  }, [setValue, enforceMaxValues]);
   const resetValues = resetValue;
-  const unsetValues = useCallback(() => setValues([]), [setValues]);
-  const toggleOneValue = useCallback(newValue => {
-    if (readOnly) return;
-    setValues( // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
+  const unsetValues = (0, _react.useCallback)(event => setValues([], event), [setValues]);
+  const toggleOneValue = (0, _react.useCallback)((newValue, event) => {
+    if (readOnly) return; // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
     // a deepEqual() function if there's any use case for toggling stored objects or arrays.
-    currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue]);
+
+    const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
+    setValues(newValues, event);
   }, [currentValues, readOnly, setValues]);
   return {
     currentValues,
@@ -162,4 +188,6 @@ export const useMultipleInputValues = ({
     toggleOneValue,
     unsetValues
   };
-};
+};
+
+exports.useMultipleInputValues = useMultipleInputValues;

package/lib/utils/pressability.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPressHandlersWithArgs = exports.resolvePressableTokens = exports.resolvePressableState = exports.getCursorStyle = void 0;
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes = require("./propTypes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @typedef {import('react').ReactNode} ReactNode
+ */
+// These roles should result in cursor: pointer but don't in current RNW releases
+const shouldUseCursor = ['checkbox', 'radio', 'switch'];
+/**
+ * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
+ * however, it misses certain cases. This fills in known cases where widely used versions of RNW
+ * fail to apply an expected cursor style.
+ *
+ * @param {object} props
+ * @param {boolean} [props.inactive]
+ * @param {boolean} [props.disabled]
+ * @param {string} [props.accessibilityRole]
+ * @returns
+ */
+
+const getCursorStyle = ({
+  inactive,
+  disabled,
+  accessibilityRole
+}) => {
+  if (_Platform.default.OS !== 'web') return undefined;
+  if (inactive || disabled) return staticStyles.notAllowed;
+  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
+  return undefined; // allows React Native Web's built-in logic to apply
+};
+/**
+ * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
+ */
+
+/**
+ * Maps the state object given by the React Native `Pressable` component to the set of
+ * equivalent appearance names used in UDS.
+ *
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
+ *   render functions passed to its `style` or `children` props.
+ * @param {object} [additionalState] - properties specific to the current component,
+ *   such as `inactive`, `selected`, etc.
+ * @returns {object}
+ */
+
+
+exports.getCursorStyle = getCursorStyle;
+
+const resolvePressableState = ({
+  pressed = false,
+  focused = false,
+  hovered = false
+} = {}, additionalState) => ({ ...additionalState,
+  focus: focused,
+  hover: hovered,
+  pressed
+});
+/**
+ * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
+ * object passed from the React Native `Pressable` component and optional extra properties.
+ *
+ * @param {object|function} tokens - UDS system tokens prop
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
+ * @param {object} [additionalState] - properties specific to the current component
+ * @returns {object} - resolved tokens object
+ */
+
+
+exports.resolvePressableState = resolvePressableState;
+
+const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+  if (typeof tokens !== 'function') return tokens;
+  const udsPressableState = resolvePressableState(pressableState, additionalState);
+  return tokens(udsPressableState);
+};
+
+exports.resolvePressableTokens = resolvePressableTokens;
+
+const staticStyles = _StyleSheet.default.create(_Platform.default.select({
+  web: {
+    notAllowed: {
+      cursor: 'not-allowed'
+    },
+    pointer: {
+      cursor: 'pointer'
+    }
+  },
+  default: {}
+}));
+/**
+ * From an object of props, extracts any platform-appropriate press handler functions and wraps
+ * them in a function that passes in some provided args. Allows components containing a Pressable
+ * to pass in press handlers that are then called with state or values that is otherwise internal.
+ */
+
+
+const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+  // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
+  const pressHandlers = Object.fromEntries(Object.entries(_propTypes.pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+    [key]: (...defaultArgs) => {
+      // Pass each handler data on this button and current selection
+      handler(...args, ...defaultArgs);
+    }
+  })));
+  return pressHandlers;
+};
+
+exports.getPressHandlersWithArgs = getPressHandlersWithArgs;