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

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

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

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

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

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

@@ -1,4 +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.
-export default '.native';
+var _default = '.native';
+exports.default = _default;

package/lib/utils/info/versions.js

@@ -1,5 +1,16 @@
-import { version } from '../../../package.json'; // Add more versions if they are useful e.g. theme schema version
+"use strict";
 
-export default {
-  uds: version
-};
+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

@@ -1,6 +1,22 @@
-import { Platform, StyleSheet } from 'react-native';
-import { pressProps } from './propTypes'; // These roles should result in cursor: pointer but don't in current RNW releases
+"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;
@@ -14,12 +30,12 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
  * @returns
  */
 
-export const getCursorStyle = ({
+const getCursorStyle = ({
   inactive,
   disabled,
   accessibilityRole
 }) => {
-  if (Platform.OS !== 'web') return undefined;
+  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
@@ -39,7 +55,10 @@ export const getCursorStyle = ({
  * @returns {object}
  */
 
-export const resolvePressableState = ({
+
+exports.getCursorStyle = getCursorStyle;
+
+const resolvePressableState = ({
   pressed = false,
   focused = false,
   hovered = false
@@ -58,12 +77,18 @@ export const resolvePressableState = ({
  * @returns {object} - resolved tokens object
  */
 
-export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
+
+exports.resolvePressableState = resolvePressableState;
+
+const resolvePressableTokens = (tokens, pressableState, additionalState) => {
   if (typeof tokens !== 'function') return tokens;
   const udsPressableState = resolvePressableState(pressableState, additionalState);
   return tokens(udsPressableState);
 };
-const staticStyles = StyleSheet.create(Platform.select({
+
+exports.resolvePressableTokens = resolvePressableTokens;
+
+const staticStyles = _StyleSheet.default.create(_Platform.default.select({
   web: {
     notAllowed: {
       cursor: 'not-allowed'
@@ -80,13 +105,16 @@ const staticStyles = StyleSheet.create(Platform.select({
  * to pass in press handlers that are then called with state or values that is otherwise internal.
  */
 
-export const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
+
+const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+  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;