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

package/lib/utils/propTypes.js

@@ -1,20 +1,35 @@
-import PropTypes from 'prop-types';
-import { Linking, Platform } from 'react-native';
-import { components as tokenKeys } from '@telus-uds/system-themes/schema';
-export const paddingProp = {
-  propType: PropTypes.shape({
-    paddingBottom: PropTypes.number,
-    paddingLeft: PropTypes.number,
-    paddingRight: PropTypes.number,
-    paddingTop: PropTypes.number
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Linking = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Linking"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const paddingProp = {
+  propType: _propTypes.default.shape({
+    paddingBottom: _propTypes.default.number,
+    paddingLeft: _propTypes.default.number,
+    paddingRight: _propTypes.default.number,
+    paddingTop: _propTypes.default.number
   })
 };
-export const rectProp = {
-  propType: PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
+exports.paddingProp = paddingProp;
+const rectProp = {
+  propType: _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
   })
 };
 /**
@@ -22,7 +37,8 @@ export const rectProp = {
  * @typedef {AppearanceSet} VariantProp
  */
 
-export const variantProp = {
+exports.rectProp = rectProp;
+const variantProp = {
   /**
    * 'variant' is an optional object prop on all themable components.
    *
@@ -32,32 +48,68 @@ export const variantProp = {
    * 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]))
-}; // 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(...)' ... })
+  propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
+}; // 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)
+
+exports.variantProp = variantProp;
+
+const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
 
-const tokenValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]);
-const tokenValueType = PropTypes.oneOfType([tokenValue, PropTypes.objectOf(tokenValue)]);
+const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
 
 const getTokenNames = componentName => {
-  const componentTokenNames = tokenKeys[componentName];
+  const componentTokenNames = _schema.components[componentName];
 
   if (!componentTokenNames) {
-    throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-themes/schema`);
+    throw new Error("No \"".concat(componentName, "\" tokenKeys in @telus-uds/system-themes/schema"));
   }
 
   return componentTokenNames;
 };
 /**
  * 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 = (componentName, tokens) => {
-  const tokenNames = getTokenNames(componentName);
-  const filteredTokens = Object.entries(tokens).reduce((validTokens, [key, value]) => tokenNames.includes(key) ? { ...validTokens,
-    [key]: value
-  } : validTokens, {});
+exports.getTokenNames = getTokenNames;
+
+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;
 };
 /**
@@ -89,17 +141,49 @@ export const selectTokens = (componentName, tokens) => {
  * }
  */
 
-export const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
-  PropTypes.checkPropTypes({
-    [propName]: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
+
+exports.selectTokens = selectTokens;
+
+const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
+  _propTypes.default.checkPropTypes({
+    [propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.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]))))
+    _propTypes.default.checkPropTypes({
+      [propName]: _propTypes.default.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
+ */
+
+
+exports.getTokensPropType = getTokensPropType;
+
+const getTokensSetPropType = (componentTokenKeys, {
+  partial = false,
+  allowFunction = false
+} = {}) => {
+  const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
+  (props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
+
+  return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
+};
+
+exports.getTokensSetPropType = getTokensSetPropType;
 
 function getPropSelector(propTypes, regexp) {
   const keys = Object.keys(propTypes);
@@ -111,40 +195,39 @@ function getPropSelector(propTypes, regexp) {
 
 
 const a11yPropTypes = {
-  // react-native-web >= 0.15.0 ignores `accessible` and looks for `focusable`
-  accessible: PropTypes.bool,
-  focusable: PropTypes.bool,
-  accessibilityElementsHidden: PropTypes.bool,
-  accessibilityHint: PropTypes.string,
+  accessible: _propTypes.default.bool,
+  focusable: _propTypes.default.bool,
+  accessibilityElementsHidden: _propTypes.default.bool,
+  accessibilityHint: _propTypes.default.string,
   // react-native-web ignores `accessibilityHint`
-  accessibilityIgnoresInvertColors: PropTypes.bool,
-  accessibilityLabel: PropTypes.string,
-  accessibilityRole: PropTypes.string,
-  accessibilityActions: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    label: PropTypes.string
+  accessibilityIgnoresInvertColors: _propTypes.default.bool,
+  accessibilityLabel: _propTypes.default.string,
+  accessibilityRole: _propTypes.default.string,
+  accessibilityActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string
   })),
-  accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
-  accessibilityState: PropTypes.shape({
-    disabled: PropTypes.bool,
-    selected: PropTypes.bool,
-    checked: PropTypes.oneOf([true, false, 'mixed']),
-    busy: PropTypes.bool,
-    expanded: PropTypes.bool
+  accessibilityLiveRegion: _propTypes.default.oneOf(['none', 'polite', 'assertive']),
+  accessibilityState: _propTypes.default.shape({
+    disabled: _propTypes.default.bool,
+    selected: _propTypes.default.bool,
+    checked: _propTypes.default.oneOf([true, false, 'mixed']),
+    busy: _propTypes.default.bool,
+    expanded: _propTypes.default.bool
   }),
-  accessibilityValue: PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    now: PropTypes.number,
-    text: PropTypes.string
+  accessibilityValue: _propTypes.default.shape({
+    min: _propTypes.default.number,
+    max: _propTypes.default.number,
+    now: _propTypes.default.number,
+    text: _propTypes.default.string
   }),
-  accessibilityViewIsModal: PropTypes.bool,
-  importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
-  onAccessibilityAction: PropTypes.func,
-  onAccessibilityEscape: PropTypes.func,
-  onAccessibilityTap: PropTypes.func
+  accessibilityViewIsModal: _propTypes.default.bool,
+  importantForAccessibility: _propTypes.default.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
+  onAccessibilityAction: _propTypes.default.func,
+  onAccessibilityEscape: _propTypes.default.func,
+  onAccessibilityTap: _propTypes.default.func
 };
-export const a11yProps = {
+const a11yProps = {
   /**
    * Proptypes for recognised React Native accessiblity (a11y) props.
    * Spread this in the propTypes of components that accept React Native a11y props.
@@ -164,11 +247,9 @@ export const a11yProps = {
    */
   nonFocusableProps: {
     focusable: false,
-    // for android, and for keyboard nav in web (RNW >= 0.15.x)
-    ...Platform.select({
+    // for android, and for keyboard nav in web
+    ..._Platform.default.select({
       web: {
-        accessible: false,
-        // workaround for web keyboard nav in RNW < 0.15.x
         accessibilityHidden: true // web screenreaders
 
       },
@@ -190,7 +271,7 @@ export const a11yProps = {
    * @param {number} index - the current item's index in the set
    * @returns {object} - platform-applicable a11y props describing this position (if available)
    */
-  getPositionInSet: (itemsCount, index) => Platform.select({
+  getPositionInSet: (itemsCount, index) => _Platform.default.select({
     web: {
       // accessibilityPosInSet etc exists in React Native Web main branch
       // but not in a release compatible with Expo etc; just use `aria-*`
@@ -202,14 +283,15 @@ export const a11yProps = {
   })
 }; // Props related to HTML <a> anchor link attributes.
 
+exports.a11yProps = a11yProps;
 const targetValues = ['_self', '_blank', '_parent', '_top'];
-export const hrefAttrsProp = {
+const hrefAttrsProp = {
   types: {
     // React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
     // and passes them to <a> if an element has a href prop or accessibilityRole "link"
-    download: PropTypes.string,
-    rel: PropTypes.string,
-    target: PropTypes.oneOf(targetValues)
+    download: _propTypes.default.string,
+    rel: _propTypes.default.string,
+    target: _propTypes.default.oneOf(targetValues)
   },
 
   /**
@@ -228,55 +310,33 @@ export const hrefAttrsProp = {
       target
     },
     rest
-  }),
-
-  /**
-   * Takes a hrefAttrs object and returns an object that can be spread into Pressable props
-   * in a way that handles compatibility before and after React Native Web 0.15.0
-   */
-  spread: hrefAttrs => ({
-    /**
-     * React Native Web >= 0.15.0 supports hrefAttrs prop but requires React 17
-     * so is incompatible with Expo until July 2021
-     */
-    hrefAttrs,
-
-    /**
-     * React Native Web < 0.15.0 uses `target` and `rel` props.
-     * React Native Web >= 0.15.0 ignores these and reads hrefAttrs only.
-     */
-    rel: hrefAttrs?.rel,
-    target: hrefAttrs?.target
-    /**
-     * Don't spread hrefAttrs.download, RNW <0.15.0 doesn't support it.
-     */
-
   })
 };
+exports.hrefAttrsProp = hrefAttrsProp;
 const pressHandlerPropTypes = {
-  onPress: PropTypes.func,
-  onPressIn: PropTypes.func,
-  onPressOut: PropTypes.func,
-  ...Platform.select({
+  onPress: _propTypes.default.func,
+  onPressIn: _propTypes.default.func,
+  onPressOut: _propTypes.default.func,
+  ..._Platform.default.select({
     web: {
-      onMouseEnter: PropTypes.func,
-      onMouseLeave: PropTypes.func,
-      onFocus: PropTypes.func,
-      onBlur: PropTypes.func
+      onMouseEnter: _propTypes.default.func,
+      onMouseLeave: _propTypes.default.func,
+      onFocus: _propTypes.default.func,
+      onBlur: _propTypes.default.func
     },
     default: {
-      onLongPress: PropTypes.func
+      onLongPress: _propTypes.default.func
     }
   })
 };
 const pressPropTypes = { ...pressHandlerPropTypes,
-  disabled: PropTypes.bool,
-  ...Platform.select({
-    hitSlop: PropTypes.number,
-    pressRetentionOffset: PropTypes.oneOfType([PropTypes.number, rectProp.propType])
+  disabled: _propTypes.default.bool,
+  ..._Platform.default.select({
+    hitSlop: _propTypes.default.number,
+    pressRetentionOffset: _propTypes.default.oneOfType([_propTypes.default.number, rectProp.propType])
   })
 };
-export const pressProps = {
+const pressProps = {
   /**
    * Proptypes for clickable or pressable components, including web-only props
    */
@@ -288,12 +348,13 @@ export const pressProps = {
   select: getPropSelector(pressPropTypes),
   selectHandlers: getPropSelector(pressHandlerPropTypes)
 };
+exports.pressProps = pressProps;
 const linkPropTypes = { ...pressPropTypes,
-  href: PropTypes.string,
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
+  href: _propTypes.default.string,
+  hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
   ...a11yPropTypes
 };
-export const linkProps = {
+const linkProps = {
   /**
    * Proptypes for components that, on Web, can output <a href="..."> link elements
    */
@@ -325,9 +386,29 @@ export const linkProps = {
       throw new Error('handleHref requires either href or onPress');
     }
 
-    return Platform.OS !== 'web' && href ? () => Linking.openURL(href) : onPress;
+    return _Platform.default.OS !== 'web' && href ? () => _Linking.default.openURL(href) : onPress;
   }
 };
+exports.linkProps = linkProps;
+const viewPropTypes = {
+  pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
+  onLayout: _propTypes.default.func,
+  nativeID: _propTypes.default.string
+};
+const viewProps = {
+  /**
+   * 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)
+};
+exports.viewProps = viewProps;
 
 const getByViewport = propType => ({
   xs: propType,
@@ -352,10 +433,10 @@ const getByViewport = propType => ({
  */
 
 
-export const responsiveProps = {
+const responsiveProps = {
   getByViewport,
-  getTypeByViewport: propType => PropTypes.shape(getByViewport(propType)),
-  getTypeOptionallyByViewport: propType => PropTypes.oneOfType([propType, PropTypes.shape(getByViewport(propType))])
+  getTypeByViewport: propType => _propTypes.default.shape(getByViewport(propType)),
+  getTypeOptionallyByViewport: propType => _propTypes.default.oneOfType([propType, _propTypes.default.shape(getByViewport(propType))])
 };
 /**
  * @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
@@ -377,13 +458,16 @@ export const responsiveProps = {
  * @typedef {SpacingIndex|SpacingObject} SpacingValue
  */
 
+exports.responsiveProps = responsiveProps;
 const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-const spacingIndexPropType = PropTypes.oneOf(spacingScale);
-const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
+
+const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
+
+const spacingObjectPropType = _propTypes.default.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
   space: spacingIndexPropType,
-  options: PropTypes.shape({
+  options: _propTypes.default.shape({
     variant: variantProp.propType,
-    size: PropTypes.number
+    size: _propTypes.default.number
   })
 });
 /**
@@ -401,13 +485,14 @@ const spacingObjectPropType = PropTypes.shape({ ...responsiveProps.getByViewport
  *   viewports or `space` to apply at all viewports.
  */
 
-export const spacingProps = {
+
+const spacingProps = {
   scale: spacingScale,
   types: {
     spacingIndex: spacingIndexPropType,
     spacingObject: spacingObjectPropType,
     // Most spacing components and utilities take this prop / arg type:
-    spacingValue: PropTypes.oneOfType([spacingIndexPropType, spacingObjectPropType])
+    spacingValue: _propTypes.default.oneOfType([spacingIndexPropType, spacingObjectPropType])
   }
 };
 /**
@@ -421,7 +506,9 @@ export const spacingProps = {
  * @return {function}
  */
 
-export const componentPropType = (passedName, checkDisplayName = false) => {
+exports.spacingProps = spacingProps;
+
+const componentPropType = (passedName, checkDisplayName = false) => {
   const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
 
   const checkProp = (props, propName, componentName) => {
@@ -440,7 +527,7 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
     const testNameInFunction = () => typeof props[propName] === 'function' && (!checkDisplayName && !passedNames.includes(props[propName].name) || checkDisplayName && !passedNames.includes(props[propName].displayName));
 
     if (props[propName] && typeof props[propName] !== 'object' && typeof props[propName] !== 'function' || testNameInObject() || testNameInFunction()) {
-      return new Error(`${componentName}: Component passed to \`${propName}\` prop should be ${passedNames.join(' or ')}`);
+      return new Error("".concat(componentName, ": Component passed to `").concat(propName, "` prop should be ").concat(passedNames.join(' or ')));
     }
 
     return undefined;
@@ -448,7 +535,7 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
 
   const checkRequired = (props, propName, componentName) => {
     if (props[propName] === undefined) {
-      return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
+      return new Error("The prop `".concat(propName, "` is marked as required in `").concat(componentName, "`, but its value is ").concat(props[propName], "."));
     }
 
     return undefined;
@@ -474,4 +561,9 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
   validate.isRequired = createValidate(true);
   return validate;
 };
-export const copyPropTypes = PropTypes.oneOf(['en', 'fr']);
+
+exports.componentPropType = componentPropType;
+
+const copyPropTypes = _propTypes.default.oneOf(['en', 'fr']);
+
+exports.copyPropTypes = copyPropTypes;

package/lib/utils/useCopy.js

@@ -1,16 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_COPY = void 0;
+const DEFAULT_COPY = 'en';
 /**
  * Extract translations from a keyed dictionary for a given language.
  * Returns a getter.
  *
- * @param {object} dictionary
- * @param {'en'|'fr'} copy - language
+ * @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}
  */
+
+exports.DEFAULT_COPY = DEFAULT_COPY;
+
 function useCopy({
   dictionary,
-  copy
+  copy = DEFAULT_COPY
 }) {
-  return key => dictionary[copy][key];
+  if (typeof copy === 'string') {
+    return key => dictionary[copy][key];
+  } // support overriding the entire copy dictionary with an object for a single language
+
+
+  return key => copy[key];
 }
 
-export default useCopy;
+var _default = useCopy;
+exports.default = _default;

package/lib/utils/useHash.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+const doAction = action => {
+  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);
+};
+/**
+ * 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) => void} action - a function to act on the current hash on load and when it changes
+ * @returns
+ */
+
+
+const useHash = (action, isReady = true) => {
+  const [isDone, setIsDone] = (0, _react.useState)(false); // Do the action just once when ready after component mount, from hash on page load
+
+  const isToDo = isReady && !isDone;
+  (0, _react.useEffect)(() => {
+    if (isToDo) {
+      setIsDone(true);
+      doAction(action);
+    }
+  }, [isToDo, action]); // Bind the action for each hash change; do re-bind if the function changes.
+
+  (0, _react.useEffect)(() => {
+    const handleChange = () => doAction(action);
+
+    window.addEventListener('hashchange', handleChange);
+    return () => window.removeEventListener('hashchange', handleChange);
+  }, [action]);
+};
+
+var _default = useHash;
+exports.default = _default;

package/lib/utils/useHash.native.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 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 = () => {};
+
+var _default = useHash;
+exports.default = _default;