@telus-uds/components-base 2.0.0 → 2.0.2

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

@@ -1,201 +0,0 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector'; // 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.number,
-  nativeId: PropTypes.string,
-  onLayout: PropTypes.func
-};
-/**
- * UDS text inputs accept props related to UDS's useInputValue hook
- */
-
-const inputValueProps = {
-  value: PropTypes.string,
-  initialValue: PropTypes.string,
-  readOnly: PropTypes.bool,
-  inactive: PropTypes.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.string,
-
-  /**
-   * On Native, default is `true`, passing `false` disables autoCorrect.
-   * On web, only supported by Safari and expects "on" or "off" strings.
-   */
-  autoCorrect: PropTypes.oneOf([true, false, 'on', 'off']),
-
-  /**
-   * Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
-   */
-  autoFocus: PropTypes.bool,
-
-  /**
-   * Default is `true` for single line, `false` for multi-line
-   */
-  blurOnSubmit: PropTypes.bool,
-
-  /**
-   * iOS and Web only, no effect on Android
-   */
-  clearTextOnFocus: PropTypes.bool,
-
-  /**
-   * Default is `true`. On web, this works by mapping to input's `readonly` attribute
-   */
-  editable: PropTypes.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.string,
-
-  /**
-   * Uses native tools (no flicker) to cap the maximum number of characters.
-   * On Web, works via `maxlength` attr.
-   */
-  maxLength: PropTypes.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.bool,
-
-  /**
-   * Web and Android only, requires `multiline` to be `true`.
-   */
-  numberOfLines: PropTypes.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.string,
-
-  /**
-   * Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
-   */
-  placeholderTextColor: PropTypes.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.string,
-
-  /**
-   * Obscures passwords and similar. Equivalent to type="password" on Web.
-   * Does not work if multiline is true.
-   */
-  secureTextEntry: PropTypes.bool,
-
-  /**
-   * If true, all text will automatically be selected on focus.
-   */
-  selectTextOnFocus: PropTypes.bool,
-
-  /**
-   * Web and iOS. On iOS, default inherits from `autoCorrect`.
-   * On Web, equivalent to `spellcheck` attr.
-   */
-  spellCheck: PropTypes.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.bool,
-  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string,
-
-  /**
-   * Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
-   * Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
-   */
-  pattern: PropTypes.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.bool,
-  clearButtonMode: PropTypes.string,
-  contextMenuHidden: PropTypes.bool,
-  dataDetectorTypes: PropTypes.string,
-  disableFullscreenUI: PropTypes.bool,
-  enablesReturnKeyAutomatically: PropTypes.bool,
-  importantForAutofill: PropTypes.string,
-  inlineImageLeft: PropTypes.string,
-  keyboardAppearance: PropTypes.string,
-  returnKeyLabel: PropTypes.string,
-  rejectResponderTermination: PropTypes.bool,
-  scrollEnabled: PropTypes.bool,
-  selection: PropTypes.object,
-  selectionColor: PropTypes.string,
-  showSoftInputOnFocus: PropTypes.bool,
-  textAlign: PropTypes.string,
-  textContentType: PropTypes.string,
-  passwordRules: PropTypes.string,
-  textBreakStrategy: PropTypes.string,
-  underlineColorAndroid: PropTypes.string
-};
-export 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: getPropSelector({ ...crossPlatform,
-    ...Platform.select({
-      web: webOnly,
-      default: nativeOnly
-    })
-  })
-};

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

@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import getPropSelector from './getPropSelector'; // 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.number,
-
-  /**
-   * Default is true on web and false on native
-   */
-  selectable: PropTypes.bool
-};
-/**
- * See React Native docs for latest details on these.
- * https://reactnative.dev/docs/text
- */
-
-const nativeOnly = {
-  ellipsizeMode: PropTypes.string,
-  maxFontSizeMultiplier: PropTypes.number,
-  minimumFontScale: PropTypes.number,
-  onTextLayout: PropTypes.func,
-  suppressHighlighting: PropTypes.bool,
-  textBreakStrategy: PropTypes.string
-};
-/**
- * These set HTML attributes of the same name.
- */
-
-const webOnly = {
-  dir: PropTypes.oneOf(['auto', 'ltr', 'rtl']),
-  lang: PropTypes.string
-};
-export 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: getPropSelector({ ...crossPlatform,
-    ...Platform.select({
-      web: webOnly,
-      default: nativeOnly
-    })
-  })
-};

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

@@ -1,133 +0,0 @@
-import PropTypes from 'prop-types';
-import { components as tokenKeys } from '@telus-uds/system-theme-tokens'; // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
-// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
-// or components (e.g. Icon tokens)
-
-const tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.elementType]);
-const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)]);
-export const getTokenNames = componentName => {
-  const componentTokenSchema = tokenKeys[componentName];
-
-  if (!componentTokenSchema) {
-    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-theme-tokens"));
-  }
-
-  return Object.keys(componentTokenSchema);
-};
-/**
- * Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
- * or by a provided array of tokens. A prefix may be provided, for example:
- *
- * @example
- * ```jsx
- * // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
- * selectTokens('Button', themeTokens)
- * ```
- *
- * @example
- * ```jsx
- * // returns `{ backgroundColor, width }` where the values of those keys come from
- * // the source object's `{ containerBackgroundColor, containerWidth }` properties.
- * selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
- * ```
- *
- * @example
- * ```jsx
- * // returns tokens that are defined in the `Button` theme schema, from tokens with
- * // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
- * selectTokens('Button', themeTokens, 'button')
- * ```
- *
- * @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
- * @param {object} tokens - a source object of theme tokens
- * @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
- * @returns {object} - subset of theme tokens
- */
-
-export const selectTokens = (specifier, tokens, prefix) => {
-  const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
-  const filteredTokens = tokenNames.reduce((validTokens, key) => {
-    const prefixedKey = prefix ? "".concat(prefix).concat(key[0].toUpperCase()).concat(key.slice(1)) : key;
-    const token = tokens[prefixedKey];
-    return token !== undefined ? { ...validTokens,
-      [key]: token
-    } : validTokens;
-  }, {});
-  return filteredTokens;
-};
-/**
- * @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
- * @typedef {{[key: string]: TokenValue}} TokensSet
- * @typedef {(AppearanceSet) => TokensSet} TokensGetter
- * @typedef {TokensSet|TokensGetter} TokensProp
- */
-
-/**
- * 'tokens' is an optional object prop on all themable components. Its keys must match the
- * token keys in the component's theme schema.
- *
- * This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
- * where the main theming system doesn't apply. It is intentionally permissive about values.
- *
- * @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
- * @return {function} - a custom PropTypes validator
- *
- * @example
- * Component.propTypes = {
- *   // accepts all tokens keys defined in Component schema
- *   tokens: getTokensPropType('Component')
- * }
- *
- * Component.propTypes = {
- *   // accepts all tokens keys defined in schemas for Component1 and Component2
- *   tokens: getTokensPropType('Component1', 'Component2')
- * }
- */
-
-export const getTokensPropType = function () {
-  for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    componentsNames[_key] = arguments[_key];
-  }
-
-  return (props, propName, componentName) => {
-    PropTypes.checkPropTypes({
-      [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-    }, props, propName, componentName);
-
-    if (typeof props[propName] !== 'function') {
-      PropTypes.checkPropTypes({
-        [propName]: PropTypes.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
-      }, props, propName, componentName);
-    }
-  };
-};
-/**
- * Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
- *
- * For example, for a set of tokens used in a common style, or for a set of tokens required by
- * a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
- *
- * By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
- *
- * @param {string[]} componentTokenKeys - array of strings of token names
- * @param {object} [options]
- * @param {boolean} [options.partial] - if true, allows tokens to be undefined
- * @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
- * @returns
- */
-
-export const getTokensSetPropType = function (componentTokenKeys) {
-  let {
-    partial = false,
-    allowFunction = false
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const tokensObjectValidator = PropTypes.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
-  function (props, propName) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-      args[_key2 - 2] = arguments[_key2];
-    }
-
-    return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
-  }])));
-  return allowFunction ? PropTypes.oneOfType([tokensObjectValidator, PropTypes.func]) : tokensObjectValidator;
-};

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

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-/**
- * @typedef {{[key: string]: string|number|boolean}} AppearanceSet
- * @typedef {AppearanceSet} VariantProp
- */
-
-export default {
-  /**
-   * 'variant' is an optional object prop on all themable components.
-   *
-   * Contains an object with keys that correspond to the current component theme's allowed
-   * appearances and values that correspond to the allowed values of that component.
-   *
-   * Since the particular keys and values depend on which theme is currently active,
-   * the exact shape of variant props is not enforced using PropTypes.
-   */
-  propType: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]))
-};

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

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-import getPropSelector from './getPropSelector';
-const viewPropTypes = {
-  pointerEvents: PropTypes.oneOf(['all', 'none', 'box-only', 'box-none']),
-  onLayout: PropTypes.func,
-  nativeID: PropTypes.string,
-  testID: PropTypes.string,
-  dataSet: PropTypes.object
-};
-export default {
-  /**
-   * Subset of `View` proptypes that could conceivably be needed on any component
-   * that renders a single View.
-   */
-  types: viewPropTypes,
-
-  /**
-   * Filters a props object, returning only cross-platform View props that are potentially
-   * relevant to any basic layout component that renders one View.
-   */
-  select: getPropSelector(viewPropTypes)
-};

package/lib-module/utils/ssr.js

@@ -1,144 +0,0 @@
-import React from 'react';
-import AppRegistry from "react-native-web/dist/exports/AppRegistry";
-/** @typedef {import('react').ComponentType} ReactComponent */
-
-/** @typedef {import('react').ReactElement} ReactElement */
-
-/**
- * Returns object with `renderApp` and `getStyles` functions.
- * Weave these into your app's server-side render process:
- *
- * - Call `renderApp` first to do the actual server-side render
- * - After the render is complete, call `getStyles`
- * - Include the style tags returned by `getStyles` in the SSR <head>
- *
- * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
- * @param {object} [options] -
- *  - `styleGetters`: optional array of additional style getter functions to call after render
- *  - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
- * @param {boolean} [options.styleGetters]
- * @param {(ReactElement) => ReactElement} [options.collectStyles]
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-export const ssrStyles = function () {
-  let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'UDS app';
-  let {
-    styleGetters = [],
-    collectStyles
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  let hasAppRendered = false;
-  return {
-    /**
-     * Server-side-renders the provided app in a way that supports collecting
-     * styles for Styled Components and React Native Web stylesheets.
-     *
-     * @param {ReactComponent} App - the root component for the app
-     * @param {object} [props] - props for this render e.g. page routing props
-     * @param {object} [options] -
-     *  - `renderedByRNW`: pass as true if the main render is by AppRegistry.runApplication from React Native
-     *  - `WrapperComponent`: Component rendered with no props around app content and inside root tag
-     * @param {boolean} [options.renderedByRNW]
-     * @param {ReactComponent} [options.WrapperComponent]
-     *
-     * @returns {ReactElement} - the rendered app output
-     */
-    renderApp: function (App, props) {
-      let {
-        renderedByRNW = false,
-        WrapperComponent
-      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-      AppRegistry.registerComponent(appName, () => App); // AppRegistry.getApplication renders the app in a container, and collects styles.
-
-      const {
-        element,
-        getStyleElement
-      } = AppRegistry.getApplication(appName, {
-        WrapperComponent,
-        initialProps: props
-      });
-      let renderedApp = // React Native Web's AppRegistry.getApplication assumes the app is rendered using
-      // AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
-      // in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
-      // So, use that IF user says AppRegistry.runApplication will do the client-side render.
-      renderedByRNW && element || // If the live app is not rendered using AppRegistry.runApplication, we need to
-      // re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
-      // Default to this as many platforms (e.g. NextJS) will use their own renderers.
-      WrapperComponent ? /*#__PURE__*/_jsx(WrapperComponent, {
-        children: /*#__PURE__*/_jsx(App, { ...props
-        })
-      }) : /*#__PURE__*/_jsx(App, { ...props
-      });
-
-      const getRNWStyle = () => getStyleElement({
-        key: 'react-native-stylesheet'
-      });
-
-      styleGetters.push(getRNWStyle);
-
-      if (typeof collectStyles === 'function') {
-        renderedApp = collectStyles(renderedApp);
-      }
-
-      hasAppRendered = true;
-      return renderedApp;
-    },
-
-    /**
-     * Turns styles collected during renderApp into an array of React elements of
-     * HTML <style> tags ready for insertion into the SSR HTML's <head>.
-     *
-     * Must be called after `renderApp` has completed.
-     *
-     * @param {...ReactElement} existingStyles - any existing style tag elements to merge in
-     * @returns {ReactElement[]} - flat array of <style> React elements
-     */
-    getStyles: function () {
-      if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
-
-      for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
-        existingStyles[_key] = arguments[_key];
-      }
-
-      return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
-    }
-  };
-};
-export default ssrStyles;
-/**
- * @deprecated - use ssrStyles instead
- *
- * Registers the app's root component with React Native Web and generates
- * the main <style> tag containing React Native Web stylesheet styles.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @returns {ReactElement[]}
- */
-
-export const getReactNativeWebSSRStyles = function (AppRoot) {
-  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
-  AppRegistry.registerComponent(appName, () => AppRoot);
-  const {
-    getStyleElement
-  } = AppRegistry.getApplication(appName);
-  return [getStyleElement()];
-};
-/**
- * @deprecated - use ssrStyles instead
- *
- * Gets style tags for each currently supported CSS-in-JS library and returns
- * them alongside any existing style tags.
- *
- * @param {ReactComponent} AppRoot
- * @param {string} [appName]
- * @param {ReactElement[]} [existingStyles]
- * @returns {ReactElement[]}
- */
-
-export const getSSRStyles = function (AppRoot) {
-  let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
-  let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
-  ];
-};

package/lib-module/utils/useCopy.js

@@ -1,44 +0,0 @@
-export const DEFAULT_COPY = 'en';
-/**
- * Extract translations from a keyed dictionary for a given language.
- * Returns a getter.
- *
- * @example
- * const getCopy = useCopy({
- *   copy: 'en',
- *   dictionary: {
- *     en: { label: 'english label' },
- *     fr: { label: 'french label' }
- *   }
- * })
- *
- * getCopy('label') => 'english label'
- *
- * @description The entire dictionary may be overridden by simply passing a single language object as `copy`:
- * @example
- * const getCopy = useCopy({
- *   copy: { label: 'custom label' }
- * })
- *
- * getCopy('label') => 'custom label'
- *
- * @param {object} [dictionary]
- * @param {'en'|'fr'|object} copy - language
- * @return {function(string): string}
- */
-
-function useCopy(_ref) {
-  let {
-    dictionary,
-    copy = DEFAULT_COPY
-  } = _ref;
-
-  if (typeof copy === 'string') {
-    return key => key ? dictionary[copy][key] : dictionary[copy];
-  } // support overriding the entire copy dictionary with an object for a single language
-
-
-  return key => copy[key];
-}
-
-export default useCopy;

package/lib-module/utils/useHash.js

@@ -1,45 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const doAction = (action, event) => {
-  var _window, _window$location;
-
-  return typeof action === 'function' && action((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.hash, event);
-};
-/**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
-
-/**
- * Calls a function (passing it the current hash) based on the current hash state on mount,
- * and binds it to call it again any time the hash changes.
- *
- * Consider using `useCallback` on the function to minimise adding and removing of event listeners.
- *
- * On Native, this is replaced with a harmless no-op function as there is no direct equivalent.
- *
- * @param {(hash: string, event?: SyntheticEvent) => void} action - a function to act on the current hash on load and when it changes
- * @returns
- */
-
-
-const useHash = function (action) {
-  let isReady = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  const [isDone, setIsDone] = useState(false); // Do the action just once when ready after component mount, from hash on page load
-
-  const isToDo = isReady && !isDone;
-  useEffect(() => {
-    if (isToDo) {
-      setIsDone(true);
-      doAction(action);
-    }
-  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
-
-  useEffect(() => {
-    const handleChange = event => doAction(action, event);
-
-    window.addEventListener('hashchange', handleChange);
-    return () => window.removeEventListener('hashchange', handleChange);
-  }, [action]);
-};
-
-export default useHash;

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

@@ -1,7 +0,0 @@
-/**
- * No URL hashes on Native, so do a no-op. Remembering scenes for reloads
- * is handled at OS level and deep links have completely different usage.
- */
-const useHash = () => {};
-
-export default useHash;