@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/ThemeProvider/utils/theme-tokens.js

@@ -1,151 +0,0 @@
-import PropTypes from 'prop-types';
-import semVerSatisfies from 'semver/functions/satisfies';
-import pkg from '../../../package.json';
-/**
- * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
- * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
- * @typedef {import('../../utils/props/tokens.js').TokensSet} TokensSet
- */
-
-/**
- * General utilities around working with theme tokens
- */
-
-export const getComponentTheme = (theme, componentName) => {
-  var _theme$metadata;
-
-  // Give clear and understandable error messages for common dev errors, for example,
-  // typo in component name, missing export or accessing old version of theme
-  if (!theme) {
-    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
-  }
-
-  const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
-
-  if (!theme.components) {
-    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
-  }
-
-  const componentTheme = theme.components[componentName];
-
-  if (!componentTheme) {
-    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
-  }
-
-  return componentTheme;
-};
-export const doesThemeConditionApply = ([key, value], appearances) => {
-  // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = appearances[key] ?? null;
-  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
-};
-export const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
-/**
- * Turns a tokens prop (which may be either a tokens object or a tokens getter function)
- * into one resolved tokens object, based on current appearances state.
- *
- * This is used inside `useThemeTokens` and `useThemeTokensCallback` for handling the `tokens`
- * props of themed components. It may also be used directly in cases where a non-themed component
- * needs to resolve a tokens prop that may be a tokens getter function or a resolved tokens object.
- *
- * A second tokens prop of tokens overrides may optionally be passed; it will be resolved to an object
- * based on provided appearance state and then shallow-merged over the first set of tokens.
- *
- * @param {TokensProp} defaultTokens - a set of tokens or tokens getter function which may be overridden
- * @param {AppearanceSet} [appearances] - optional appearance set to pass to tokens getter functions
- * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
- * @returns {TokensSet} - object containing resolved tokens with overrides applied
- */
-
-export const resolveThemeTokens = (defaultTokens, appearances = {}, tokenOverrides) => {
-  const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
-
-  if (!tokenOverrides) return resolve(defaultTokens);
-  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, [tokenName, tokenValue]) => tokenValue === undefined ? mergedTokens : { ...mergedTokens,
-    [tokenName]: tokenValue
-  }, resolve(defaultTokens));
-};
-/**
- * Gives a prop types error if a set of resolved tokens doesn't match a provided prop
- * types validator.
- *
- * In production, this is a no-op (PropTypes.checkPropTypes is automatically replaced
- * with a no-op function).
- *
- * @param {TokensSet} themeTokens - object containing resolved theme tokens
- * @param {function} validator - PropTypes validator function
- * @param {string} componentName - identifier to display in PropType error messages
- */
-
-export const validateThemeTokens = (themeTokens, validator, componentName) => {
-  PropTypes.checkPropTypes({
-    tokens: validator
-  }, {
-    tokens: themeTokens
-  }, 'resolved token', componentName);
-  return themeTokens;
-};
-/**
- * Merges variants over states. Must be merged in that order to allow static showcases of a state,
- * e.g. `<Button variant={{ pressed: true }} />` where button's pressed state is `false` by default.
- * Returns an empty object if both variants and states are undefined.
- *
- * @param {AppearanceSet} [variants]
- * @param {AppearanceSet} [states]
- * @returns {AppearanceSet}
- */
-
-export const mergeAppearances = (variants = {}, states) => states ? { ...states,
-  ...variants
-} : variants;
-/**
- * Get a set of theme tokens by applying a theme's component rules based on a component's variants and state.
- *
- * This is used internally in `useThemeTokens` and `useThemeTokensCallback` and should not normally be called directly.
- *
- * @param {object} componentTheme - object containing a theme's `tokens` and `rules` for a component
- * @param {object|function} [tokensProp] - UDS tokens prop containing theming overrides
- * @param {object} [variants] - UDS variant prop containing the variant options for this component instance
- * @param {object} [states] - object containing current state options for this component instance
- * @returns {object} Set of resolved theme tokens
- */
-
-export const getThemeTokens = ({
-  rules = [],
-  tokens: defaultThemeTokens = {}
-}, tokensProp, variants = {}, states) => {
-  const appearances = mergeAppearances(variants, states); // TODO: if in dev mode, validate the appearances and provided propTokens
-  // Get the theme's default tokens set and merge tokens from applicable theme rules over it
-
-  const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? { ...mergedTokens,
-    ...rule.tokens
-  } : mergedTokens, defaultThemeTokens);
-  return resolveThemeTokens(themeTokens, appearances, tokensProp);
-};
-export const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
-/**
- * Throws an error if the theme was built with an incompatible version of @telus-uds/system-theme-tokens
- *
- * This is used internally by the ThemeProvider to force a fast failure when an incompatible version is detected.
- *
- * Version compatibility is calculated with semver.satisfies.
- * Refer to https://github.com/npm/node-semver and https://semver.npmjs.com/ for details about how
- * semver compatibility.
- *
- * @param {object} theme - UDS theme built for react-native
- */
-
-export const validateThemeTokensVersion = theme => {
-  var _theme$metadata2;
-
-  const expectedThemeTokensVersion = pkg.dependencies['@telus-uds/system-theme-tokens'];
-  const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
-
-  if (!semVerSatisfies(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error(`Invalid UDS token schema version detected.
-
-The UDS base components ${pkg.name} v${pkg.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
-
-If you see this error than most likely you have attempted to install ${pkg.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/packages/docs-uds/docs/multi-brand-usage.md`);
-  }
-};

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -1,227 +0,0 @@
-import React, { forwardRef } 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";
-import View from "react-native-web/dist/exports/View";
-import InputLabel from '../InputLabel';
-import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
-import { useInputValue } from '../utils/input';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-
-const selectButtonTokens = tokens => selectTokens('Button', { ...tokens,
-  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-  width: null
-}); // Map and rename icon-specific tokens to name used within Icon
-
-
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
-
-const selectTrackStyles = ({
-  trackBorderWidth,
-  trackBorderColor,
-  trackBorderRadius,
-  width
-}) => ({
-  borderWidth: trackBorderWidth,
-  borderColor: trackBorderColor,
-  borderRadius: trackBorderRadius,
-  width
-});
-
-const selectSwitchStyles = ({
-  switchSize,
-  switchColor,
-  switchBorderWidth,
-  switchBorderColor,
-  switchBorderRadius,
-  switchShadow
-}) => ({
-  width: switchSize,
-  height: switchSize,
-  backgroundColor: switchColor,
-  borderWidth: switchBorderWidth,
-  borderColor: switchBorderColor,
-  borderRadius: switchBorderRadius,
-  ...applyShadowToken(switchShadow),
-  ...Platform.select({
-    // TODO: https://github.com/telus/universal-design-system/issues/487
-    web: {
-      transition: 'transform 200ms'
-    }
-  })
-});
-
-const selectLabelStyles = ({
-  labelMarginLeft
-}) => ({
-  marginLeft: labelMarginLeft
-});
-
-const selectLabelTokens = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelLineHeight
-}) => ({
-  color: labelColor,
-  fontName: labelFontName,
-  fontWeight: labelFontWeight,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight
-});
-
-const ToggleSwitch = /*#__PURE__*/forwardRef(({
-  value,
-  initialValue,
-  onChange,
-  id,
-  label,
-  inactive,
-  tokens,
-  tooltip,
-  variant,
-  accessibilityRole = 'switch',
-  accessibilityLabel = label,
-  ...rest
-}, ref) => {
-  const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
-  const themeTokens = getTokens();
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-
-  const handlePress = event => setValue(!currentValue, event);
-
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
-
-  const uniqueId = useUniqueId('toggleSwitch');
-  const inputId = id ?? uniqueId;
-  return /*#__PURE__*/_jsxs(StackView, {
-    space: 2,
-    direction: "row",
-    children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
-      style: [selectLabelStyles(themeTokens), staticStyles.containText],
-      children: /*#__PURE__*/_jsx(InputLabel, {
-        forId: inputId,
-        label: label,
-        tokens: selectLabelTokens(themeTokens),
-        tooltip: tooltip
-      })
-    }), /*#__PURE__*/_jsx(ButtonBase, {
-      id: id,
-      ref: ref,
-      selected: currentValue,
-      inactive: inactive,
-      tokens: getButtonTokens,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityRole: accessibilityRole,
-      accessibilityState: {
-        checked: currentValue
-      },
-      onPress: handlePress,
-      ...selectProps(rest),
-      children: buttonState => {
-        const stateTokens = getTokens(buttonState);
-        const IconComponent = stateTokens.icon;
-        const switchStyles = selectSwitchStyles(stateTokens);
-        const trackStyles = selectTrackStyles(stateTokens);
-        const iconTokens = selectIconTokens(stateTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-        // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-        const slideStart = 0;
-        const slideEnd = stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2;
-        const switchOffset = buttonState.selected ? slideEnd : slideStart;
-        const switchPositionStyle = {
-          transform: [{
-            translateX: switchOffset
-          }]
-        };
-        return /*#__PURE__*/_jsx(View, {
-          style: [staticStyles.track, trackStyles],
-          children: /*#__PURE__*/_jsx(View, {
-            style: [staticStyles.switch, switchStyles, switchPositionStyle],
-            children: IconComponent && /*#__PURE__*/_jsx(IconComponent, { ...iconTokens
-            })
-          })
-        });
-      }
-    })]
-  });
-});
-ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('ToggleSwitch'),
-  variant: variantProp.propType,
-
-  /**
-   * If this is a "controlled" component and a parent handles its selected state,
-   * tells the switch if it is on (true) or off (false).
-   */
-  value: PropTypes.bool,
-
-  /**
-   * If this is an "uncontrolled" component that handles its own selected state,
-   * optionally tells the switch if it should default to on (true) or off (false).
-   */
-  initialValue: PropTypes.bool,
-
-  /**
-   * Function called when the switch is toggled, with one boolean argument that is the
-   * new position of the switch, on (true) or off (false). For "controlled" components,
-   * this should always be passed and used to control the state of the switch.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Input ID.
-   */
-  id: PropTypes.string,
-
-  /**
-   * An optional label.
-   */
-  label: PropTypes.string,
-
-  /**
-   * If passed, the switch does not respond to user input and may recieve different
-   * theme tokens if the theme supports inactive appearance.
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string
-};
-const staticStyles = StyleSheet.create({
-  track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
-    flexDirection: 'row'
-  },
-  switch: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  containText: {
-    flexShrink: 1
-  }
-});
-export default ToggleSwitch;

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -1,211 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import ToggleSwitch from './ToggleSwitch';
-import Fieldset from '../Fieldset';
-import { getStackedContent } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/forwardRef(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues = 1,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  feedback,
-  hint,
-  tooltip,
-  legend,
-  name: inputGroupName,
-  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-  : Platform.select({
-    web: 'group',
-    default: 'none'
-  }),
-  toggleSwitchTokens,
-  validation,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const {
-    space,
-    fieldSpace
-  } = useThemeTokens('ToggleSwitchGroup', tokens, variant, {
-    viewport
-  });
-  const {
-    currentValues,
-    toggleOneValue
-  } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  });
-  const selectedProps = selectProps({
-    accessibilityRole,
-    ...rest
-  });
-  const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
-  const uniqueFields = ['id', 'label'];
-
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
-  }
-
-  const toggleSwitches = items.map(({
-    label,
-    id = label,
-    accessibilityLabel = label,
-    onChange: itemOnChange,
-    ref: itemRef,
-    tooltip: itemTooltip,
-    ...itemRest
-  }, index) => {
-    const isSelected = currentValues.includes(id);
-
-    const handleChange = (newCheckedState, event) => {
-      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
-      toggleOneValue(id, event);
-    };
-
-    const itemA11y = {
-      accessibilityState: {
-        checked: isSelected
-      },
-      accessibilityRole: itemA11yRole,
-      accessibilityLabel,
-      ...a11yProps.getPositionInSet(items.length, index)
-    };
-    return /*#__PURE__*/_jsx(ToggleSwitch, {
-      id: id,
-      ref: itemRef,
-      onChange: handleChange,
-      tokens: toggleSwitchTokens,
-      value: isSelected,
-      inactive: inactive,
-      label: label,
-      tooltip: itemTooltip,
-      ...itemA11y,
-      ...selectItemProps(itemRest)
-    }, id);
-  });
-  return /*#__PURE__*/_jsx(Fieldset, {
-    ref: ref,
-    name: inputGroupName,
-    legend: legend,
-    tooltip: tooltip,
-    hint: hint,
-    space: fieldSpace,
-    feedback: feedback,
-    inactive: inactive,
-    validation: validation,
-    ...selectedProps,
-    children: getStackedContent(toggleSwitches, {
-      space,
-      direction: 'column'
-    })
-  });
-});
-ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
-ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('ToggleSwitchGroup'),
-  variant: variantProp.propType,
-
-  /**
-   * The maximum number of items a user may select at once. Defaults to 1 and behaves
-   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
-   */
-  maxValues: PropTypes.number,
-
-  /**
-   * The options a user may select
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
-
-    /**
-     * The text displayed to the user on the label.
-     */
-    label: PropTypes.string.isRequired,
-
-    /**
-     * An optional accessibility label may be passed to each ToggleSwitch
-     * and will be applied as normal for a React Native accessibilityLabel prop.
-     */
-    accessibilityLabel: PropTypes.string,
-
-    /**
-     * An optional unique string may be provided to identify this option,
-     * which will be used in code and passed to any onChange function.
-     * If not provided, the label is used.
-     */
-    id: PropTypes.string,
-
-    /**
-     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
-     */
-    ref: ABBPropTypes.ref()
-  })),
-
-  /**
-   * 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,
-
-  /**
-   * If the selected item(s) in the toggle switch group 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 ToggleSwitchGroup 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 ToggleSwitchGroup 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),
-
-  /**
-   * Optional additional text giving more detail to help a user make a choice.
-   */
-  hint: PropTypes.string,
-
-  /**
-   * Optional tooltip text content to include alongside the legend and hint.
-   */
-  tooltip: PropTypes.string,
-
-  /**
-   * If provided, a Feedback element is rendered containing this text.
-   */
-  feedback: PropTypes.string,
-
-  /**
-   * Main text used to describe this group, used in Fieldset's Legend element.
-   */
-  legend: PropTypes.string,
-
-  /**
-   * Toggle switch token overrides.
-   */
-  toggleSwitchTokens: getTokensPropType('ToggleSwitch'),
-
-  /**
-   * Current validation status of the group, passed to the feedback element if there is one.
-   */
-  validation: PropTypes.oneOf(['error', 'success'])
-};
-export default ToggleSwitchGroup;

package/lib-module/ToggleSwitch/index.js

@@ -1,3 +0,0 @@
-import ToggleSwitch from './ToggleSwitch';
-import ToggleSwitchGroup from './ToggleSwitchGroup';
-export { ToggleSwitch, ToggleSwitchGroup };

package/lib-module/Tooltip/Backdrop.js

@@ -1,52 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-function createPortalNode(nodeId) {
-  const node = document.createElement('div');
-  node.id = nodeId; // we're mimicking React Native's Modal component, except for using an `absolute` position
-  // this way the backdrop stays in place when scrolling the window - that's why we need to
-  // position it at the scroll position when rendering
-
-  node.style.cssText = `
-  position: absolute; 
-  top: ${window.scrollY}px;
-  left: ${window.scrollX}px; 
-  right: 0; 
-  bottom: 0; 
-  z-index: 9999; 
-  pointer-events: none;
-  `;
-  document.body.appendChild(node);
-  return node;
-}
-
-function removePortalNode(nodeId) {
-  const node = document.getElementById(nodeId);
-  node.parentElement.removeChild(node);
-}
-/**
- * The Web version of Backdrop utilizes React Portal for overlaying page content, so it is
- * dependent on ReactDOM. Tooltip's closing is handled by the onBlur callback of the control.
- */
-
-
-function Backdrop({
-  children
-}) {
-  const [portalNode, setPortalNode] = useState();
-  useEffect(() => {
-    const nodeId = `tooltip-backdrop-${Date.now()}`;
-    const node = createPortalNode(nodeId);
-    setPortalNode(node);
-    return () => {
-      removePortalNode(nodeId);
-    };
-  }, []);
-  return portalNode ? /*#__PURE__*/ReactDOM.createPortal(children, portalNode) : null;
-}
-
-Backdrop.propTypes = {
-  children: PropTypes.node
-};
-export default Backdrop;

package/lib-module/Tooltip/Backdrop.native.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import Modal from "react-native-web/dist/exports/Modal";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-/**
- * The Native version of Backdrop utilizes React Native's Modal component for overlaying
- * the app's content, since this is the only reliable to do it. The only drawback of this
- * approach is that a press on the Backdrop will actually stop the press event from propagating,
- * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-function Backdrop({
-  onPress,
-  children
-}) {
-  return /*#__PURE__*/_jsx(Modal, {
-    transparent: true,
-    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-      onPress: onPress,
-      children: /*#__PURE__*/_jsx(View, {
-        style: staticStyles.backdrop,
-        children: children
-      })
-    })
-  });
-}
-
-export default Backdrop;
-Backdrop.propTypes = {
-  onPress: PropTypes.func,
-  children: PropTypes.node
-};
-const staticStyles = StyleSheet.create({
-  backdrop: {
-    flexBasis: '100%',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable
-
-  }
-});