@telus-uds/components-base 1.6.1 → 1.7.0

package/lib/utils/props/textInputProps.js

@@ -0,0 +1,206 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// This file contains common props for components that render a React Native TextInput
+// It excludes interaction handler functions which are in `./handlerProps.js`
+
+/**
+ * TextInput (web and native) supports some common React Native props
+ * shared with React Native's Text component.
+ */
+const textProps = {
+  maxFontSizeMultiplier: _propTypes.default.number,
+  nativeId: _propTypes.default.string,
+  onLayout: _propTypes.default.func
+};
+/**
+ * UDS text inputs accept props related to UDS's useInputValue hook
+ */
+
+const inputValueProps = {
+  value: _propTypes.default.string,
+  initialValue: _propTypes.default.string,
+  readOnly: _propTypes.default.bool
+};
+/**
+ * This collection adds props that can be passed through to both React Native's
+ * and React Native Web's implementations of the React Native TextInput component.
+ */
+
+const crossPlatform = { ...textProps,
+  ...inputValueProps,
+
+  /**
+   * Web and Android; 'off' disables device autocomplete, other strings are platform-specific.
+   * Valid values on Native: https://reactnative.dev/docs/textinput#autocomplete-android
+   * Valid values on Web: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+   */
+  autoComplete: _propTypes.default.string,
+
+  /**
+   * On Native, default is `true`, passing `false` disables autoCorrect.
+   * On web, only supported by Safari and expects "on" or "off" strings.
+   */
+  autoCorrect: _propTypes.default.oneOf([true, false, 'on', 'off']),
+
+  /**
+   * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
+   */
+  autoFocus: _propTypes.default.bool,
+
+  /**
+   * Default is `true` for single line, `false` for multi-line
+   */
+  blurOnSubmit: _propTypes.default.bool,
+
+  /**
+   * iOS and Web only, no effect on Android
+   */
+  clearTextOnFocus: _propTypes.default.bool,
+
+  /**
+   * Default is `true`. On web, this works by mapping to input's `readonly` attribute
+   */
+  editable: _propTypes.default.bool,
+
+  /**
+   * See documentation for allowed values (varies between Web, Android and iOS) and important notes:
+   * - Native: https://reactnative.dev/docs/textinput#keyboardtype
+   * - Web: equivalent to `inputmode` but see https://necolas.github.io/react-native-web/docs/text-input/
+   */
+  keyboardType: _propTypes.default.string,
+
+  /**
+   * Uses native tools (no flicker) to cap the maximum number of characters.
+   * On Web, works via `maxlength` attr.
+   */
+  maxLength: _propTypes.default.number,
+
+  /**
+   * If passed as true, the text input can be multiple lines.
+   *
+   * > It is important to note that this aligns the text to the top on iOS, and centers it on Android.
+   * > Use with textAlignVertical set to top for the same behavior in both platforms.
+   */
+  multiline: _propTypes.default.bool,
+
+  /**
+   * Web and Android only, requires `multiline` to be `true`.
+   */
+  numberOfLines: _propTypes.default.number,
+
+  /**
+   * Text to display when no value set.
+   * Accesibility guidelines recommend using labels to describe the input and using
+   * placeholders rarely and sparingly to prompt a particular format.
+   */
+  placeholder: _propTypes.default.string,
+
+  /**
+   * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
+   */
+  placeholderTextColor: _propTypes.default.string,
+
+  /**
+   * One of a subset of platform-specific options that controls labelling and presentation
+   * in on-screen keyboards and accessibility tools. Uses `enterkeyhint` attr on Web.
+   *
+   * 'done', 'go', 'next', 'search', and 'send' are available for Web, Android and iOS.
+   */
+  returnKeyType: _propTypes.default.string,
+
+  /**
+   * Obscures passwords and similar. Equivalent to type="password" on Web.
+   * Does not work if multiline is true.
+   */
+  secureTextEntry: _propTypes.default.bool,
+
+  /**
+   * If true, all text will automatically be selected on focus.
+   */
+  selectTextOnFocus: _propTypes.default.bool,
+
+  /**
+   * Web and iOS. On iOS, default inherits from `autoCorrect`.
+   * On Web, equivalent to `spellcheck` attr.
+   */
+  spellCheck: _propTypes.default.bool
+};
+/**
+ * These web-only props all control HTML `input` attributes of the same name.
+ * Refer to general HTML documentation for more details.
+ */
+
+const webOnly = {
+  disabled: _propTypes.default.bool,
+  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
+  lang: _propTypes.default.string
+};
+/**
+ * These props are supported in React Native but not React Native Web.
+ *
+ * React Native text inputs can be quirky, so a full set of props should be allowed to handle edge cases.
+ * Refer to React Native documentation for details, allowed values, and Android/iOS support and versions:
+ * https://reactnative.dev/docs/textinput
+ *
+ * Beware that many React Native text input props apply via complicated logic that chooses a built-in
+ * native component based on the values of multiple boolean flags, and may sometimes appear to pick an
+ * option that is inappropriate for one flag based on the values of one or more other other flags.
+ */
+
+const nativeOnly = {
+  caretHidden: _propTypes.default.bool,
+  clearButtonMode: _propTypes.default.string,
+  contextMenuHidden: _propTypes.default.bool,
+  dataDetectorTypes: _propTypes.default.string,
+  disableFullscreenUI: _propTypes.default.bool,
+  enablesReturnKeyAutomatically: _propTypes.default.bool,
+  importantForAutofill: _propTypes.default.string,
+  inlineImageLeft: _propTypes.default.string,
+  keyboardAppearance: _propTypes.default.string,
+  returnKeyLabel: _propTypes.default.string,
+  rejectResponderTermination: _propTypes.default.bool,
+  scrollEnabled: _propTypes.default.bool,
+  selection: _propTypes.default.object,
+  selectionColor: _propTypes.default.string,
+  showSoftInputOnFocus: _propTypes.default.bool,
+  textAlign: _propTypes.default.string,
+  textContentType: _propTypes.default.string,
+  passwordRules: _propTypes.default.string,
+  textBreakStrategy: _propTypes.default.string,
+  underlineColorAndroid: _propTypes.default.string
+};
+var _default = {
+  /**
+   * Subset of proptypes that can be passed down to a React Native or React Native Web
+   * `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.
+   */
+  types: { ...crossPlatform,
+    ...webOnly,
+    ...nativeOnly
+  },
+
+  /**
+   * Filters a props object. Return only platform-appropriate TextInput props, native inputs
+   * may throw errors on receiving unknown props.
+   */
+  select: (0, _getPropSelector.default)({ ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};
+exports.default = _default;

package/lib/utils/props/textProps.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// These are the props accepted specifically on React Native (Web) `Text` elements.
+// They are generally concerned with the behaviour of multiline text.
+const crossPlatform = {
+  /**
+   * Truncates text after this many lines with an ellipsis at the end.
+   * On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
+   */
+  numberOfLines: _propTypes.default.number,
+
+  /**
+   * Default is true on web and false on native
+   */
+  selectable: _propTypes.default.bool
+};
+/**
+ * See React Native docs for latest details on these.
+ * https://reactnative.dev/docs/text
+ */
+
+const nativeOnly = {
+  ellipsizeMode: _propTypes.default.string,
+  maxFontSizeMultiplier: _propTypes.default.number,
+  minimumFontScale: _propTypes.default.number,
+  onTextLayout: _propTypes.default.func,
+  suppressHighlighting: _propTypes.default.bool,
+  textBreakStrategy: _propTypes.default.string
+};
+/**
+ * These set HTML attributes of the same name.
+ */
+
+const webOnly = {
+  dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
+  lang: _propTypes.default.string
+};
+var _default = {
+  /**
+   * Set of prop types specific to React Native and React Native Web `Text`,
+   * which largely revolve around the behaviour of multiline non-pressable text.
+   */
+  types: { ...crossPlatform,
+    ...webOnly,
+    ...nativeOnly
+  },
+
+  /**
+   * Filters a props object, returning only props specific to `Text` elements
+   * on the current platform. Does not include props applicable to `Text` and `View`.
+   */
+  select: (0, _getPropSelector.default)({ ...crossPlatform,
+    ..._Platform.default.select({
+      web: webOnly,
+      default: nativeOnly
+    })
+  })
+};
+exports.default = _default;

package/lib-module/List/ListItem.js

@@ -26,8 +26,7 @@ const selectBulletContainerStyles = ({
   itemBulletContainerAlign
 }) => ({
   width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign,
-  justifyContent: itemBulletContainerAlign
+  alignItems: itemBulletContainerAlign
 });
 
 const selectItemIconTokens = ({
@@ -38,16 +37,20 @@ const selectItemIconTokens = ({
   color: itemIconColor
 });
 
-const selectCommonIconStyles = ({
+const selectSideItemContainerStyles = ({
+  listGutter,
   iconMarginTop
 }) => ({
-  marginTop: iconMarginTop
-});
+  marginTop: iconMarginTop,
+  marginRight: listGutter
+}); // Align bullets with the top line of text the same way icons are aligned
 
-const selectSideItemContainerStyles = ({
-  listGutter
+
+const selectBulletPositioningStyles = ({
+  itemIconSize
 }) => ({
-  marginRight: listGutter
+  width: itemIconSize,
+  height: itemIconSize
 });
 
 const selectItemStyles = ({
@@ -100,8 +103,8 @@ const ListItem = /*#__PURE__*/forwardRef(({
   const dividerStyles = selectDividerStyles(themeTokens);
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
+  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
-  const commonIconStyles = selectCommonIconStyles(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
   const accessibilityRole = Platform.select({
     web: 'listitem',
@@ -144,7 +147,7 @@ const ListItem = /*#__PURE__*/forwardRef(({
 
     if (icon) {
       return /*#__PURE__*/_jsx(View, {
-        style: [sideItemContainerStyles, commonIconStyles],
+        style: sideItemContainerStyles,
         children: /*#__PURE__*/_jsx(IconComponent, {
           size: iconSize || iconTokens.size,
           color: iconColor || iconTokens.color
@@ -155,8 +158,11 @@ const ListItem = /*#__PURE__*/forwardRef(({
     return /*#__PURE__*/_jsx(View, {
       style: [sideItemContainerStyles, itemBulletContainerStyles],
       children: /*#__PURE__*/_jsx(View, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
+        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
+        children: /*#__PURE__*/_jsx(View, {
+          style: itemBulletStyles,
+          testID: "unordered-item-bullet"
+        })
       })
     });
   };
@@ -176,6 +182,10 @@ const staticStyles = StyleSheet.create({
   },
   wrap: {
     flex: 1
+  },
+  bulletPositioning: {
+    alignItems: 'center',
+    justifyContent: 'center'
   }
 });
 ListItem.propTypes = { ...selectedSystemPropTypes,

package/lib-module/Search/Search.js

@@ -1,9 +1,9 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useSpacingScale, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
 import StackView from '../StackView';
@@ -11,7 +11,8 @@ import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 
 const selectInputTokens = ({
   searchTokens,
@@ -66,8 +67,9 @@ const selectIconTokens = ({
 
 
 const Search = /*#__PURE__*/forwardRef(({
-  initialValue = '',
-  placeholder = 'Search',
+  initialValue,
+  value,
+  placeholder,
   inactive,
   onChange,
   onSubmit,
@@ -78,7 +80,14 @@ const Search = /*#__PURE__*/forwardRef(({
   variant,
   ...rest
 }, ref) => {
-  const [value, setValue] = useState(initialValue);
+  const {
+    currentValue = '',
+    setValue
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange
+  });
   const themeTokens = useThemeTokens('Search', tokens, variant);
   const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
   const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
@@ -99,26 +108,24 @@ const Search = /*#__PURE__*/forwardRef(({
 
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
-      onSubmit(value, event);
+      onSubmit(currentValue, event);
     }
   };
 
-  const handleChange = (currentValue, event) => {
-    setValue(currentValue, event);
-    if (onChange !== undefined) onChange(currentValue, event);
-  };
-
   const handleClear = event => {
     setValue('', event);
     if (onClear !== undefined) onClear('', event);
-    if (onChange !== undefined) onChange('', event);
   };
 
-  const isEmpty = value === '';
+  const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
+
+  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
+
+  const placeholderText = placeholder ?? a11yLabelText;
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(TextInputBase, {
+    ...selectContainerProps(rest),
+    children: [/*#__PURE__*/_jsx(TextInputBase, { ...selectInputProps(rest),
       ref: ref,
       tokens: appearances => selectInputTokens({
         searchTokens: getThemeTokens(appearances),
@@ -126,15 +133,15 @@ const Search = /*#__PURE__*/forwardRef(({
         buttonsGapSize,
         isEmpty
       }),
-      placeholder: placeholder,
+      placeholder: placeholderText,
       placeholderTextColor: placeholderColor,
       inactive: inactive,
       enablesReturnKeyAutomatically: true,
       returnKeyType: "search",
-      value: value,
-      onChange: handleChange,
+      value: currentValue,
+      onChange: setValue,
       onSubmitEditing: handleSubmit,
-      accessibilityLabel: accessibilityLabel || getCopy('accessibilityLabel')
+      accessibilityLabel: a11yLabelText
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
       children: /*#__PURE__*/_jsxs(StackView, {
@@ -166,7 +173,8 @@ const Search = /*#__PURE__*/forwardRef(({
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = { ...selectedSystemPropTypes,
+Search.propTypes = { ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
 
   /**
    * Use this to set the initial value of the search input.

package/lib-module/TextInput/TextArea.js

@@ -1,12 +1,12 @@
 import React, { forwardRef, useState } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import { useThemeTokens } from '../ThemeProvider';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 /**
  * Use to collect long-form information such as product feedback or support queries.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.

package/lib-module/TextInput/TextInput.js

@@ -1,11 +1,11 @@
 import React, { forwardRef } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
-import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
 import textInputPropTypes from './propTypes';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.

package/lib-module/TextInput/TextInputBase.js

@@ -5,10 +5,10 @@ import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import PropTypes from 'prop-types';
 import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, useInputValue, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
 
 const selectInputStyles = ({
   backgroundColor,

package/lib-module/Typography/Typography.js

@@ -5,13 +5,14 @@ import View from "react-native-web/dist/exports/View";
 import { useThemeTokens } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, viewProps, getA11yPropsFromHtmlTag } from '../utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 
 const selectTextStyles = ({
   fontWeight,
@@ -50,31 +51,32 @@ const Typography = /*#__PURE__*/forwardRef(({
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
     viewport
   });
-  const textProps = {
+  const resolvedTextProps = { ...selectTextProps(rest),
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
     } : themeTokens),
     dataSet,
     maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
   };
-  const selectedProps = selectProps({ ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...rest
-  });
+  const containerProps = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+    ...selectContainerProps(rest)
+  };
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
-    ...selectedProps,
-    children: /*#__PURE__*/_jsx(Text, { ...textProps,
+    ...containerProps,
+    children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
       children: children
     })
   }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
-    ...textProps,
-    ...selectedProps,
+    ...containerProps,
+    ...resolvedTextProps,
     children: children
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ...selectedSystemPropTypes,
+Typography.propTypes = { ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
   tokens: getTokensPropType('Typography'),
   variant: variantProp.propType,
 

package/lib-module/index.js

@@ -44,5 +44,5 @@ export { default as Typography } from './Typography';
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens } from './ThemeProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
 export * from './utils';

package/lib-module/utils/input.js

@@ -1,4 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
+/**
+ * @typedef {import('react').SyntheticEvent} Event
+ */
+
 const pluralHooks = ['useMultipleInputValues'];
 
 const validateProps = ({
@@ -56,11 +60,9 @@ Consumers of this hook must be one of:
  *
  * @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: string|number|null
- *   setValue: (newValue: string|number|null|UpdaterFunction) => void
+ *   setValue: (newValue: string|number|null|(oldValue: string|number) => string|number, event: Event) => void
  *   resetValue: () => void
  *   isControlled: bool
  * }}
@@ -122,12 +124,10 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
  *
  * @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: string[]|number[]|UpdaterFunction) => void
+ *   setValues: (newValues: string[]|number[]|(oldValues: string[]|number[]) => string[]|number[], event: Event) => void
  *   toggleOneValue: (value: string|number) => void
  *   unsetValues: () => void
  * }}

package/lib-module/utils/props/index.js

@@ -13,5 +13,7 @@ export { default as rectProp } from './rectProp';
 export { default as responsiveProps } from './responsiveProps';
 export { default as spacingProps } from './spacingProps';
 export { default as selectSystemProps } from './selectSystemProps';
+export { default as textInputProps } from './textInputProps';
+export { default as textProps } from './textProps';
 export { default as variantProp } from './variantProp';
 export { default as viewProps } from './viewProps';