@telus-uds/components-web 2.9.0 → 2.11.0

package/src/Toast/Toast.jsx

@@ -156,9 +156,21 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
 
 Toast.propTypes = {
   ...selectedSystemPropTypes,
+  /**
+   * If true, the toast will be displayed
+   */
   toast: PropTypes.bool,
+  /**
+   * The copy to display in the toast
+   */
   copy: PropTypes.string.isRequired,
+  /**
+   * The headline to display in the toast (before copy)
+   */
   headline: PropTypes.string,
+  /**
+   * The link to display in the toast (after copy)
+   */
   link: PropTypes.shape({
     href: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,

package/src/Video/ControlBar/ControlBar.jsx

@@ -2,7 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base'
+import {
+  StackView,
+  useThemeTokens,
+  selectSystemProps,
+  Icon,
+  useViewport
+} from '@telus-uds/components-base'
 
 import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar'
 import VolumeSlider from './Controls/VolumeSlider/VolumeSlider'
@@ -24,11 +30,11 @@ const ControlBarContainer = styled.div(({ isHidden, isMobile }) => ({
   display: isMobile ? 'none' : undefined
 }))
 
-const StyledControlBar = styled.div(({ padding }) => ({
+const StyledControlBar = styled.div(({ padding, height }) => ({
   boxSizing: 'border-box',
   position: 'absolute',
   width: '100%',
-  height: 56,
+  height,
   padding,
   bottom: 0,
   backgroundColor: 'rgba(42, 44, 46, 0.85)', // TODO: replace with opaque greyThunder
@@ -89,21 +95,21 @@ const ControlBar = ({
   variant,
   ...rest
 }) => {
+  const viewport = useViewport()
   const {
     paddingTop,
     paddingBottom,
-    paddingLeft: paddingLeftDefault,
-    paddingRight: paddingRightDefault,
-    paddingLeftCompactMode,
-    paddingRightCompactMode,
+    paddingLeft,
+    paddingRight,
     menuBottom,
     menuRight,
     menuMarginLeft,
     captionsIcon,
     settingsIcon,
     minimizeIcon,
-    maximizeIcon
-  } = useThemeTokens('VideoControlBar', tokens, variant)
+    maximizeIcon,
+    height
+  } = useThemeTokens('VideoControlBar', tokens, variant, { viewport })
 
   const parseVideoQuality = () => {
     return sources.map((source) => {
@@ -122,21 +128,19 @@ const ControlBar = ({
     return parsed
   }
 
-  const paddingLeft =
-    videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode
-  const paddingRight =
-    videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode
   const menuContainerStyleProps = { menuBottom, menuRight, menuMarginLeft }
 
   return (
     <ControlBarContainer isHidden={isHidden} isMobile={isMobile} {...selectProps(rest)}>
       <StyledControlBar
         padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+        height={`${height}px`}
       >
         <VideoProgressBarContainer>
           <VideoProgressBar
             copy={copy}
             videoPlayer={videoPlayer}
+            playing={videoPlaying}
             videoLength={videoLength}
             videoCurrentTime={videoCurrentTime}
             videoBufferEnd={videoBufferEnd}

package/src/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.jsx

@@ -106,6 +106,7 @@ const VideoProgressBar = ({
   videoLength,
   videoCurrentTime,
   videoBufferEnd,
+  playing,
   setSeek,
   resetInactivityTimer,
   tokens,
@@ -121,7 +122,7 @@ const VideoProgressBar = ({
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
-  } = useThemeTokens('VideoProgressBar', tokens, variant)
+  } = useThemeTokens('VideoProgressBar', tokens, variant, { playing })
 
   const videoProgressBar = React.createRef()
 

package/src/VideoPicker/VideoPicker.jsx

@@ -85,7 +85,7 @@ const VideoPicker = ({
   }, [selectedVideo])
 
   // `frame` variant should only work on larger screens
-  const isFramed = frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
+  const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport)
 
   const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
 

package/src/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.jsx

@@ -77,6 +77,11 @@ const selectButtonContentTokens = ({
   buttonPaddingRight
 })
 
+const getLabelTokens = ({ labelFontName: fontName, labelFontWeight: fontWeight }) => ({
+  fontName,
+  fontWeight
+})
+
 const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength }) => {
   const { buttonContentChildrenBackground } = useThemeTokens(
     'SplashButtonWithDetails',
@@ -102,7 +107,9 @@ const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength })
           <PlayIcon size={13} color={playIconColor} />
         </PlayIconContainer>
         <DetailsContainer {...selectDetailsContainerTokens(themeTokens)}>
-          <Typography variant={{ bold: true }}>{label}</Typography>
+          <Typography variant={{ bold: true }} tokens={getLabelTokens(themeTokens)}>
+            {label}
+          </Typography>
           <Typography
             variant={{
               colour: 'secondary' /* TODO: this is not the same color as in designs */,

package/src/utils/index.js

@@ -1,7 +1,7 @@
+import { htmlAttrs } from '@telus-uds/components-base'
 import { warn, deprecate } from './logger'
 import { transformGradient } from './transforms'
 import useTypographyTheme from './useTypographyTheme'
-import htmlAttrs from './htmlAttrs'
 import media from './media'
 import ssrStyles from './ssr'
 import renderStructuredContent from './renderStructuredContent'

package/lib/Listbox/PressableItem.js

@@ -1,149 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _componentsBase = require("@telus-uds/components-base");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _utils = require("../utils");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/* eslint-disable react/require-default-props */
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
-const getItemStyles = _ref => {
-  let {
-    tokens
-  } = _ref;
-  return {
-    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-    fontSize: tokens.itemFontSize,
-    paddingTop: tokens.itemPaddingTop,
-    paddingBottom: tokens.itemPaddingBottom,
-    paddingLeft: tokens.itemPaddingLeft,
-    paddingRight: tokens.itemPaddingRight,
-    borderWidth: tokens.itemBorderWidth,
-    width: '100%',
-    backgroundColor: tokens.itemBackgroundColor,
-    color: tokens.groupColor,
-    display: tokens.itemDisplay,
-    outline: tokens.itemOutline,
-    textDecoration: tokens.itemTextDecoration
-  };
-};
-
-const StyledLink = /*#__PURE__*/_styledComponents.default.a.withConfig({
-  displayName: "PressableItem__StyledLink",
-  componentId: "components-web__sc-1h6cvsc-0"
-})(_ref2 => {
-  let {
-    isChild,
-    tokens
-  } = _ref2;
-  return { ...getItemStyles({
-      isChild,
-      tokens
-    }),
-    borderLeft: isChild ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}` : 'none',
-    cursor: 'pointer',
-    [`&:hover, &:focus, &:active`]: {
-      color: tokens.itemColor
-    },
-    '&:hover': {
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    // Highlighting for pressable items that are not links per se
-    // TODO: find a better way to display and style a pressable link
-    '&:hover > div, &:hover > div > span': {
-      color: `${tokens.itemColor} !important`
-    },
-    '&:focus': {
-      border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderRadius: !isChild && tokens.groupBorderRadius,
-      paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-      paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-      paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-      paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    '&:active': {
-      backgroundColor: tokens.itemBorderBackgroundColor
-    }
-  };
-});
-
-const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
-  let {
-    children,
-    href,
-    isChild = false,
-    onBlur,
-    onPress,
-    tabIndex = 0,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-
-  const handleKeyPress = event => {
-    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
-      onPress === null || onPress === void 0 ? void 0 : onPress(event);
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown' && nextItemRef !== null && nextItemRef !== void 0 && nextItemRef.current) {
-      nextItemRef.current.focus();
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
-      prevItemRef.current.focus();
-    }
-  };
-
-  const systemTokens = (0, _componentsBase.useThemeTokens)('ListBox', tokens, variant, {
-    isChild,
-    hover: true
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLink, {
-    isChild: isChild,
-    tokens: systemTokens,
-    onBlur: onBlur,
-    onClick: onPress,
-    onKeyPress: handleKeyPress,
-    ref: ref,
-    tabIndex: tabIndex,
-    ...(href && {
-      href
-    }),
-    ...(onPress && {
-      onClick: onPress
-    }),
-    ...selectProps(rest),
-    children: children
-  });
-});
-PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = { ...selectedSystemPropTypes,
-  href: _propTypes.default.string,
-  isChild: _propTypes.default.bool,
-  children: _propTypes.default.node.isRequired,
-  onBlur: _propTypes.default.func,
-  onPress: _propTypes.default.func,
-  nextItemRef: _propTypes.default.object,
-  prevItemRef: _propTypes.default.object
-};
-var _default = PressableItem;
-exports.default = _default;

package/lib/utils/htmlAttrs.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const htmlAttrTypes = {
-  dataSet: _propTypes.default.object,
-  id: _propTypes.default.string,
-  loading: _propTypes.default.oneOf(['eager', 'lazy']),
-  // @todo figure out if we need to enum all the possible roles or maybe use
-  // an npm package
-  role: _propTypes.default.string,
-  src: _propTypes.default.string,
-  tabIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  testID: _propTypes.default.string,
-  title: _propTypes.default.string
-};
-var _default = {
-  types: htmlAttrTypes,
-  select: props => Object.entries(props).reduce((items, _ref) => {
-    let [key, value] = _ref;
-    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
-      [key]: value
-    } : items;
-  }, {})
-};
-exports.default = _default;

package/lib-module/Listbox/PressableItem.js

@@ -1,128 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
-const getItemStyles = _ref => {
-  let {
-    tokens
-  } = _ref;
-  return {
-    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-    fontSize: tokens.itemFontSize,
-    paddingTop: tokens.itemPaddingTop,
-    paddingBottom: tokens.itemPaddingBottom,
-    paddingLeft: tokens.itemPaddingLeft,
-    paddingRight: tokens.itemPaddingRight,
-    borderWidth: tokens.itemBorderWidth,
-    width: '100%',
-    backgroundColor: tokens.itemBackgroundColor,
-    color: tokens.groupColor,
-    display: tokens.itemDisplay,
-    outline: tokens.itemOutline,
-    textDecoration: tokens.itemTextDecoration
-  };
-};
-
-const StyledLink = /*#__PURE__*/styled.a.withConfig({
-  displayName: "PressableItem__StyledLink",
-  componentId: "components-web__sc-1h6cvsc-0"
-})(_ref2 => {
-  let {
-    isChild,
-    tokens
-  } = _ref2;
-  return { ...getItemStyles({
-      isChild,
-      tokens
-    }),
-    borderLeft: isChild ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}` : 'none',
-    cursor: 'pointer',
-    [`&:hover, &:focus, &:active`]: {
-      color: tokens.itemColor
-    },
-    '&:hover': {
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    // Highlighting for pressable items that are not links per se
-    // TODO: find a better way to display and style a pressable link
-    '&:hover > div, &:hover > div > span': {
-      color: `${tokens.itemColor} !important`
-    },
-    '&:focus': {
-      border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderRadius: !isChild && tokens.groupBorderRadius,
-      paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-      paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-      paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-      paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    '&:active': {
-      backgroundColor: tokens.itemBorderBackgroundColor
-    }
-  };
-});
-const PressableItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    children,
-    href,
-    isChild = false,
-    onBlur,
-    onPress,
-    tabIndex = 0,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-
-  const handleKeyPress = event => {
-    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
-      onPress === null || onPress === void 0 ? void 0 : onPress(event);
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown' && nextItemRef !== null && nextItemRef !== void 0 && nextItemRef.current) {
-      nextItemRef.current.focus();
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
-      prevItemRef.current.focus();
-    }
-  };
-
-  const systemTokens = useThemeTokens('ListBox', tokens, variant, {
-    isChild,
-    hover: true
-  });
-  return /*#__PURE__*/_jsx(StyledLink, {
-    isChild: isChild,
-    tokens: systemTokens,
-    onBlur: onBlur,
-    onClick: onPress,
-    onKeyPress: handleKeyPress,
-    ref: ref,
-    tabIndex: tabIndex,
-    ...(href && {
-      href
-    }),
-    ...(onPress && {
-      onClick: onPress
-    }),
-    ...selectProps(rest),
-    children: children
-  });
-});
-PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = { ...selectedSystemPropTypes,
-  href: PropTypes.string,
-  isChild: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  onBlur: PropTypes.func,
-  onPress: PropTypes.func,
-  nextItemRef: PropTypes.object,
-  prevItemRef: PropTypes.object
-};
-export default PressableItem;

package/lib-module/utils/htmlAttrs.js

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-const htmlAttrTypes = {
-  dataSet: PropTypes.object,
-  id: PropTypes.string,
-  loading: PropTypes.oneOf(['eager', 'lazy']),
-  // @todo figure out if we need to enum all the possible roles or maybe use
-  // an npm package
-  role: PropTypes.string,
-  src: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  testID: PropTypes.string,
-  title: PropTypes.string
-};
-export default {
-  types: htmlAttrTypes,
-  select: props => Object.entries(props).reduce((items, _ref) => {
-    let [key, value] = _ref;
-    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
-      [key]: value
-    } : items;
-  }, {})
-};

package/src/Listbox/PressableItem.jsx

@@ -1,121 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
-const getItemStyles = ({ tokens }) => ({
-  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-  fontSize: tokens.itemFontSize,
-  paddingTop: tokens.itemPaddingTop,
-  paddingBottom: tokens.itemPaddingBottom,
-  paddingLeft: tokens.itemPaddingLeft,
-  paddingRight: tokens.itemPaddingRight,
-  borderWidth: tokens.itemBorderWidth,
-  width: '100%',
-  backgroundColor: tokens.itemBackgroundColor,
-  color: tokens.groupColor,
-  display: tokens.itemDisplay,
-  outline: tokens.itemOutline,
-  textDecoration: tokens.itemTextDecoration
-})
-
-const StyledLink = styled.a(({ isChild, tokens }) => ({
-  ...getItemStyles({ isChild, tokens }),
-  borderLeft: isChild
-    ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}`
-    : 'none',
-  cursor: 'pointer',
-
-  [`&:hover, &:focus, &:active`]: {
-    color: tokens.itemColor
-  },
-
-  '&:hover': {
-    backgroundColor: tokens.groupBackgroundColor
-  },
-
-  // Highlighting for pressable items that are not links per se
-  // TODO: find a better way to display and style a pressable link
-  '&:hover > div, &:hover > div > span': {
-    color: `${tokens.itemColor} !important`
-  },
-
-  '&:focus': {
-    border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-    borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-    borderRadius: !isChild && tokens.groupBorderRadius,
-    paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-    paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-    paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-    paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
-    backgroundColor: tokens.groupBackgroundColor
-  },
-
-  '&:active': {
-    backgroundColor: tokens.itemBorderBackgroundColor
-  }
-}))
-
-const PressableItem = forwardRef(
-  (
-    {
-      children,
-      href,
-      isChild = false,
-      onBlur,
-      onPress,
-      tabIndex = 0,
-      nextItemRef,
-      prevItemRef,
-      tokens,
-      variant = {},
-      ...rest
-    },
-    ref
-  ) => {
-    const handleKeyPress = (event) => {
-      if (['Enter', ' '].includes(event?.key)) {
-        onPress?.(event)
-      } else if (event?.key === 'ArrowDown' && nextItemRef?.current) {
-        nextItemRef.current.focus()
-      } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
-        prevItemRef.current.focus()
-      }
-    }
-    const systemTokens = useThemeTokens('ListBox', tokens, variant, { isChild, hover: true })
-
-    return (
-      <StyledLink
-        isChild={isChild}
-        tokens={systemTokens}
-        onBlur={onBlur}
-        onClick={onPress}
-        onKeyPress={handleKeyPress}
-        ref={ref}
-        tabIndex={tabIndex}
-        {...(href && { href })}
-        {...(onPress && { onClick: onPress })}
-        {...selectProps(rest)}
-      >
-        {children}
-      </StyledLink>
-    )
-  }
-)
-PressableItem.displayName = 'PressableItem'
-PressableItem.propTypes = {
-  ...selectedSystemPropTypes,
-  href: PropTypes.string,
-  isChild: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  onBlur: PropTypes.func,
-  onPress: PropTypes.func,
-  nextItemRef: PropTypes.object,
-  prevItemRef: PropTypes.object
-}
-
-export default PressableItem

package/src/utils/htmlAttrs.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types'
-
-const htmlAttrTypes = {
-  dataSet: PropTypes.object,
-  id: PropTypes.string,
-  loading: PropTypes.oneOf(['eager', 'lazy']),
-  // @todo figure out if we need to enum all the possible roles or maybe use
-  // an npm package
-  role: PropTypes.string,
-  src: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  testID: PropTypes.string,
-  title: PropTypes.string
-}
-
-export default {
-  types: htmlAttrTypes,
-  select: (props) =>
-    Object.entries(props).reduce(
-      (items, [key, value]) =>
-        Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key)
-          ? {
-              ...items,
-              [key]: value
-            }
-          : items,
-      {}
-    )
-}