@telus-uds/components-base 1.19.0 → 1.20.0

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,248 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
+import dictionary from './dictionary';
+import Box from '../Box';
+import { Button, ButtonDropdown } from '../Button';
+import { CheckboxGroup } from '../Checkbox';
+import Divider from '../Divider';
+import FlexGrid from '../FlexGrid';
+import Modal from '../Modal';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import { TextButton } from '../Link';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  Col,
+  Row
+} = FlexGrid;
+const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    label,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref;
+  const {
+    currentValues,
+    setValues
+  } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [checkedIds, setCheckedIds] = useState(currentValues !== null && currentValues !== void 0 ? currentValues : []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
+  } // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = getPressHandlersWithArgs(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(true);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Modal, {
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false),
+      variant: {
+        width: colSize > 1 ? 'size576' : 's'
+      },
+      children: [/*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 1
+      }), /*#__PURE__*/_jsx(Box, {
+        scroll: true,
+        children: /*#__PURE__*/_jsx(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
+              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/_jsx(Spacer, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/_jsx(Divider, {
+        variant: {
+          width: 'full',
+          color: 'E3E6E8',
+          decorative: true,
+          weight: 'thin'
+        },
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsxs(StackView, {
+          direction: "row",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id)]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: getTokensPropType('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: PropTypes.string
+  })),
+
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: PropTypes.number,
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: PropTypes.string,
+
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: PropTypes.string,
+
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: PropTypes.number
+};
+export default MultiSelectFilter;

package/lib-module/MultiSelectFilter/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};

package/lib-module/MultiSelectFilter/index.js

@@ -0,0 +1,2 @@
+import MultiSelectFilter from './MultiSelectFilter';
+export default MultiSelectFilter;

package/lib-module/Search/Search.js

@@ -110,8 +110,11 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   };
 
   const handleClear = event => {
+    var _ref$current;
+
     setValue('', event);
-    if (onClear !== undefined) onClear('', event);
+    onClear === null || onClear === void 0 ? void 0 : onClear('', event);
+    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   };
 
   const handleFocus = event => {

package/lib-module/Select/Picker.native.js

@@ -4,7 +4,8 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
 import { a11yProps, componentPropType } from '../utils';
-import Group from './Group'; // styling of the native input is very limited, most of the styles have to be applied to an additional View
+import Group from './Group';
+import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants'; // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -12,28 +13,29 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
-    paddingBottom = 0,
-    paddingTop = 0,
-    borderWidth = 0,
     color
   } = _ref;
   return {
-    height: height - paddingTop - paddingBottom - 2 * borderWidth,
+    height,
+    paddingBottom: 0,
+    paddingTop: 0,
     color
   };
-}; // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
+}; // The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
 
 
 const selectAndroidContainerStyles = _ref2 => {
   let {
-    paddingLeft = 0,
-    paddingRight = 0,
+    paddingLeft = ANDROID_DEFAULT_PADDING,
+    paddingRight = ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  return {
-    paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-    paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-    ...rest
+  return { ...rest,
+    paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingBottom: ANDROID_DEFAULT_PADDING,
+    paddingTop: ANDROID_DEFAULT_PADDING,
+    height: rest.height + ANDROID_HEIGHT_OFFSET
   };
 };
 
@@ -49,7 +51,7 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     placeholder,
     ...rest
   } = _ref3;
-  // ungroup items, since there's no way to support groups on native
+  // Ungroup items, since there's no way to support groups on native
   const flatChildren = Children.toArray(children).flatMap(child => {
     if (child.type === Group) {
       return child.props.children;

package/lib-module/Select/Select.js

@@ -7,6 +7,7 @@ import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../
 import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import Picker from './Picker';
 import InputSupports from '../InputSupports';
+import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
@@ -142,7 +143,11 @@ const selectValidationIconContainerStyles = _ref6 => {
   } = _ref6;
   return {
     paddingRight: icon ? paddingRight + iconSize : paddingRight,
-    paddingBottom
+    ...(Platform.OS === 'android' ? {
+      paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
+    } : {
+      paddingBottom
+    })
   };
 };
 /**

package/lib-module/Select/constants.js

@@ -0,0 +1,5 @@
+// Because Android
+export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+export const ANDROID_HEIGHT_OFFSET = 12;
+export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+export const ANDROID_DEFAULT_PADDING = 0;

package/lib-module/StepTracker/Step.js

@@ -185,7 +185,8 @@ const Step = _ref7 => {
       space: 0,
       tokens: {
         alignItems: 'center',
-        flexGrow: 0
+        flexGrow: 0,
+        justifyContent: 'center'
       },
       children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]

package/lib-module/TextInput/TextInput.js

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
@@ -61,6 +62,11 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = { ...selectedSystemPropTypes,
   ...textInputPropTypes,
+
+  /**
+   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
+   */
+  onClear: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 };

package/lib-module/TextInput/TextInputBase.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
@@ -6,7 +6,9 @@ import NativeTextInput from "react-native-web/dist/exports/TextInput";
 import View from "react-native-web/dist/exports/View";
 import { applyTextStyles, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
 import StackView from '../StackView';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
+import IconButton from '../IconButton';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
+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, textInputHandlerProps, textInputProps, viewProps]);
@@ -136,12 +138,14 @@ const selectButtonsContainerStyle = _ref5 => {
 const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     buttons = [],
+    copy = 'en',
     height,
     inactive,
     initialValue,
     onBlur,
     onChange,
     onChangeText,
+    onClear,
     onFocus,
     onMouseOut,
     onMouseOver,
@@ -176,17 +180,22 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
 
+  const defaultRef = useRef();
+  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
   const {
     currentValue,
+    resetValue,
     setValue,
-    isControlled
+    isControlled,
+    isDirty
   } = useInputValue({
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly
   });
-  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   useEffect(() => {
     if (Platform.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
@@ -210,9 +219,35 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
   const {
-    icon: IconComponent,
-    buttonsGap
+    buttonsGap,
+    clearButtonIcon: ClearButtonIcon,
+    icon: IconComponent
   } = themeTokens;
+  const buttonsGapSize = useSpacingScale(buttonsGap);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+
+  if (onClear && isDirty) {
+    const handleClear = event => {
+      var _inputRef$current;
+
+      onClear === null || onClear === void 0 ? void 0 : onClear(event);
+      resetValue(event);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    };
+
+    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+      icon: ClearButtonIcon,
+      onPress: handleClear,
+      variant: {
+        compact: true
+      }
+    }, "clear"));
+  }
+
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
@@ -224,9 +259,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     // currentValue is being updated even if the input is not controlled, passing it down to the
     // Input could lead to changing its state from uncontrolled to controlled
     value: isControlled ? currentValue : undefined
-  }; // Get the actual gap value for the current viewport
-
-  const buttonsGapSize = useSpacingScale(buttonsGap);
+  };
   const {
     themeOptions
   } = useTheme();
@@ -236,7 +269,7 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/_jsx(NativeTextInput, {
-      ref: ref,
+      ref: inputRef,
       style: nativeInputStyle,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {
@@ -260,12 +293,21 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
   buttons: PropTypes.arrayOf(PropTypes.node),
+
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
+    clearButtonAccessibilityLabel: PropTypes.string
+  })]),
   height: PropTypes.number,
   inactive: PropTypes.bool,
   initialValue: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onChangeText: PropTypes.func,
+  onClear: PropTypes.func,
   onFocus: PropTypes.func,
   onMouseOut: PropTypes.func,
   onMouseOver: PropTypes.func,

package/lib-module/TextInput/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer'
+  }
+};

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -12,8 +12,10 @@ const ThemeProvider = _ref => {
     children,
     defaultTheme,
     // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    // TODO: switch `forceZIndex` to be false by default in the next major version
     themeOptions = {
-      forceAbsoluteFontSizing: true
+      forceAbsoluteFontSizing: true,
+      forceZIndex: true
     }
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
@@ -48,9 +50,12 @@ ThemeProvider.propTypes = {
    *   relative sizing (in `rem`, scales depending on the browser settings)
    * - `contentMaxWidth`: allows configuration of the content max width to be used in components
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
+   *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool,
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 };

package/lib-module/index.js

@@ -21,6 +21,7 @@ export { default as InputSupports } from './InputSupports';
 export * from './Link';
 export { default as List, ListItem, ListBase } from './List';
 export { default as Modal } from './Modal';
+export { default as MultiSelectFilter } from './MultiSelectFilter';
 export { default as Notification } from './Notification';
 export { default as Pagination } from './Pagination';
 export { default as Progress } from './Progress';

package/lib-module/utils/BaseView/BaseView.js

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import NativeView from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useTheme } from '../../ThemeProvider';
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  const {
+    themeOptions
+  } = useTheme();
+  const styleProp = Array.isArray(style) ? [...style] : [style];
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex);
+  }
+
+  return /*#__PURE__*/_jsx(NativeView, { ...rest,
+    style: styleProp,
+    ref: ref,
+    children: children
+  });
+});
+BaseView.displayName = 'BaseView';
+const styles = StyleSheet.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+});
+BaseView.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+export default BaseView;

package/lib-module/utils/BaseView/BaseView.native.js

@@ -0,0 +1,6 @@
+import BaseView from "react-native-web/dist/exports/View";
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+
+export default BaseView;

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

@@ -0,0 +1,2 @@
+import BaseView from './BaseView';
+export default BaseView;

package/lib-module/utils/index.js

@@ -15,4 +15,5 @@ export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';
 export * from './ssr';
-export { default as containUniqueFields } from './containUniqueFields';
+export { default as containUniqueFields } from './containUniqueFields';
+export { default as BaseView } from './BaseView';

package/lib-module/utils/input.js

@@ -77,6 +77,7 @@ export const useInputValue = function () {
   const {
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly = false
   } = props;
@@ -90,19 +91,26 @@ export const useInputValue = function () {
   }); // 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 = useCallback((arg, event) => {
     if (readOnly) return;
     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 (!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 (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
-  }, [isControlled, onChange, readOnly]);
+  }, [inputRef, isControlled, onChange, readOnly]);
   const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
     resetValue,
-    isControlled
+    isControlled,
+    isDirty
   };
 };
 /**