@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/utils/input.js

@@ -1,17 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useMultipleInputValues = exports.useInputValue = void 0;
-
-var _react = require("react");
-
+import { useCallback, useRef, useState } from 'react';
 /**
  * @typedef {import('react').SyntheticEvent} Event
  */
-const pluralHooks = ['useMultipleInputValues'];
 
+const pluralHooks = ['useMultipleInputValues'];
 const validateProps = (_ref, _ref2, hookName) => {
   let {
     value,
@@ -24,29 +16,31 @@ const validateProps = (_ref, _ref2, hookName) => {
     isControlled
   } = _ref2;
   const s = pluralHooks.includes(hookName) ? 's' : '';
-
   const usageError = error => {
     // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
     // Help devs out by telling them exactly which hook threw the error as well as why.
-    throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
-  };
+    throw new Error(`${hookName} ${error}.
 
+Consumers of this hook must be one of:
+1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
+2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
+3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
+`);
+  };
   if (value && !onChange && !readOnly) {
-    usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
+    usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
   }
-
   if (initialValue && value) {
-    usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
+    usageError(`has both \`initialValue${s}\` and \`value${s}\``);
   }
-
   if (isControlled && !isCurrentlyControlled) {
-    usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
+    usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
   }
-
   if (!isControlled && isCurrentlyControlled) {
-    usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
+    usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
   }
 };
+
 /**
  * Hook used for controlling the input state of input components that have a singular value.
  * If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
@@ -70,13 +64,11 @@ const validateProps = (_ref, _ref2, hookName) => {
  *   isControlled: bool
  * }}
  */
-
-
-const useInputValue = function () {
+export const useInputValue = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
   const isCurrentlyControlled = props.value !== undefined;
-  const [isControlled] = (0, _react.useState)(isCurrentlyControlled);
+  const [isControlled] = useState(isCurrentlyControlled);
   validateProps(props, {
     isControlled,
     isCurrentlyControlled
@@ -88,30 +80,29 @@ const useInputValue = function () {
     onChange,
     readOnly = false
   } = props;
-  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 [ownValue, setOwnValue] = useState(!isControlled && initialValue);
+  const currentValue = isControlled ? value : ownValue;
 
-  const valueRef = (0, _react.useRef)({
+  // 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 valueRef = useRef({
     initial: currentValue,
     value: currentValue
-  }); // Make current value accessible inside useCallback without rememoizing every time the value changes
-
+  });
+  // Make current value accessible inside useCallback without rememoizing every time the value changes
   valueRef.current.value = currentValue;
   const isDirty = currentValue !== valueRef.current.initial;
-  const setValue = (0, _react.useCallback)((arg, event) => {
+  const setValue = useCallback((arg, event) => {
     if (readOnly) return;
     const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
-
     if (!isControlled) {
       setOwnValue(newValue);
-      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue !== null && newValue !== void 0 ? newValue : '';
-    } // Call onChange handler if there's something for it to handle (event or a changed value)
-
-
+      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = 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);
   }, [inputRef, isControlled, onChange, readOnly]);
-  const resetValue = (0, _react.useCallback)(event => setValue(valueRef.current.initial, event), [setValue]);
+  const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
@@ -120,6 +111,7 @@ const useInputValue = function () {
     isDirty
   };
 };
+
 /**
  * Hook used for controlling the input state of input components that have multiple named on/off states.
  * If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
@@ -145,11 +137,7 @@ const useInputValue = function () {
  *   unsetValues: () => void
  * }}
  */
-
-
-exports.useInputValue = useInputValue;
-
-const useMultipleInputValues = function () {
+export const useMultipleInputValues = function () {
   let {
     values,
     initialValues,
@@ -166,24 +154,24 @@ const useMultipleInputValues = function () {
     onChange,
     value: values,
     // if we're controlling our own state, always start with an array
-    initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
+    initialValue: initialValues ?? (values === undefined ? [] : undefined)
   }, 'useMultipleInputValues');
-  const enforceMaxValues = (0, _react.useCallback)(newValues => {
+  const enforceMaxValues = 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 = (0, _react.useCallback)((newValues, event) => {
+  const setValues = useCallback((newValues, event) => {
     const validNewValues = enforceMaxValues(newValues);
     setValue(validNewValues, event);
   }, [setValue, enforceMaxValues]);
   const resetValues = resetValue;
-  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
+  const unsetValues = useCallback(event => setValues([], event), [setValues]);
+  const toggleOneValue = 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.
-
     const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
     setValues(newValues, event);
   }, [currentValues, readOnly, setValues]);
@@ -194,6 +182,4 @@ const useMultipleInputValues = function () {
     toggleOneValue,
     unsetValues
   };
-};
-
-exports.useMultipleInputValues = useMultipleInputValues;
+};

package/lib/utils/pressability.js

@@ -1,23 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.resolvePressableTokens = exports.resolvePressableState = exports.getPressHandlersWithArgs = 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 _pressProps = _interopRequireDefault(require("./props/pressProps"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import pressProps from './props/pressProps';
 
 /**
  * @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
@@ -29,18 +20,18 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
  * @param {string} [props.accessibilityRole]
  * @returns
  */
-
-const getCursorStyle = _ref => {
+export const getCursorStyle = _ref => {
   let {
     inactive,
     disabled,
     accessibilityRole
   } = _ref;
-  if (_Platform.default.OS !== 'web') return undefined;
+  if (Platform.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
  */
@@ -55,23 +46,21 @@ const getCursorStyle = _ref => {
  *   such as `inactive`, `selected`, etc.
  * @returns {object}
  */
-
-
-exports.getCursorStyle = getCursorStyle;
-
-const resolvePressableState = function () {
+export const resolvePressableState = function () {
   let {
     pressed = false,
     focused = false,
     hovered = false
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let additionalState = arguments.length > 1 ? arguments[1] : undefined;
-  return { ...additionalState,
+  return {
+    ...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.
@@ -81,19 +70,12 @@ const resolvePressableState = function () {
  * @param {object} [additionalState] - properties specific to the current component
  * @returns {object} - resolved tokens object
  */
-
-
-exports.resolvePressableState = resolvePressableState;
-
-const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+export 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({
+const staticStyles = StyleSheet.create(Platform.select({
   web: {
     notAllowed: {
       cursor: 'not-allowed'
@@ -104,31 +86,27 @@ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
   },
   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 = function () {
+export const getPressHandlersWithArgs = function () {
   let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(_ref2 => {
+  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(_ref2 => {
     let [key, handler] = _ref2;
     return {
       [key]: function () {
         for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
           defaultArgs[_key] = arguments[_key];
         }
-
         // Pass each handler data on this button and current selection
         handler(...args, ...defaultArgs);
       }
     };
   }));
   return pressHandlers;
-};
-
-exports.getPressHandlersWithArgs = getPressHandlersWithArgs;
+};