@telus-uds/components-base 1.0.0 → 1.2.0

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -11,18 +11,24 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
 
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _propTypes2 = require("../utils/propTypes");
 
 var _input = require("../utils/input");
 
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -80,16 +86,41 @@ const selectSwitchStyles = ({
   })
 });
 
+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__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
+  id,
+  label,
   inactive,
   tokens,
+  tooltip,
   variant,
-  accessibilityRole = 'switch'
+  accessibilityRole = 'switch',
+  accessibilityLabel = label
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
+  const themeTokens = getTokens();
   const {
     currentValue,
     setValue
@@ -103,41 +134,57 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-    ref: ref,
-    selected: currentValue,
-    inactive: inactive,
-    tokens: getButtonTokens,
-    accessibilityRole: accessibilityRole,
-    accessibilityState: {
-      checked: currentValue
-    },
-    onPress: handlePress,
-    children: buttonState => {
-      const themeTokens = getTokens(buttonState);
-      const IconComponent = themeTokens.icon;
-      const switchStyles = selectSwitchStyles(themeTokens);
-      const trackStyles = selectTrackStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens); // 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 = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
-      const switchOffset = buttonState.selected ? slideEnd : slideStart;
-      const switchPositionStyle = {
-        transform: [{
-          translateX: switchOffset
-        }]
-      };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [staticStyles.track, trackStyles],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [staticStyles.switch, switchStyles, switchPositionStyle],
-          children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+  const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
+  const inputId = id ?? uniqueId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: 2,
+    direction: "row",
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectLabelStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        forId: inputId,
+        label: label,
+        tokens: selectLabelTokens(themeTokens),
+        tooltip: tooltip
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      id: id,
+      ref: ref,
+      selected: currentValue,
+      inactive: inactive,
+      tokens: getButtonTokens,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: accessibilityRole,
+      accessibilityState: {
+        checked: currentValue
+      },
+      onPress: handlePress,
+      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__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.track, trackStyles],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.switch, switchStyles, switchPositionStyle],
+            children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+            })
           })
-        })
-      });
-    }
+        });
+      }
+    })]
   });
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
@@ -165,11 +212,26 @@ ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * Input ID.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * An optional label.
+   */
+  label: _propTypes.default.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.default.bool
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string
 };
 
 const staticStyles = _StyleSheet.default.create({

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
+var _StackView = require("../StackView");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _input = require("../utils/input");
+
+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; }
+
+const ToggleSwitchGroup = /*#__PURE__*/(0, _react.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.default.select({
+    web: 'group',
+    default: 'none'
+  }),
+  toggleSwitchTokens,
+  validation,
+  ...rest
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    space,
+    fieldSpace
+  } = (0, _ThemeProvider.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _input.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+
+  const a11y = _propTypes2.a11yProps.select({
+    accessibilityRole,
+    ...rest
+  });
+
+  const itemA11yRole = a11y.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const toggleSwitches = items.map(({
+    label,
+    id = label,
+    accessibilityLabel = label,
+    onChange: itemOnChange,
+    ref: itemRef,
+    tooltip: itemTooltip
+  }, 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,
+      ..._propTypes2.a11yProps.getPositionInSet(items.length, index)
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      id: id,
+      ref: itemRef,
+      onChange: handleChange,
+      tokens: toggleSwitchTokens,
+      value: isSelected,
+      inactive: inactive,
+      label: label,
+      tooltip: itemTooltip,
+      ...itemA11y
+    }, id);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    inactive: inactive,
+    validation: validation,
+    ...a11y,
+    children: (0, _StackView.getStackedContent)(toggleSwitches, {
+      space,
+      direction: 'column'
+    })
+  });
+});
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
+ToggleSwitchGroup.propTypes = { ..._propTypes2.a11yProps.propTypes,
+  ..._propTypes2.pressProps.propTypes,
+  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _propTypes2.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.default.number,
+
+  /**
+   * The options a user may select
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user on the label.
+     */
+    label: _propTypes.default.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.default.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.default.string,
+
+    /**
+     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+     */
+    ref: _airbnbPropTypes.default.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.default.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.default.arrayOf(_propTypes.default.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.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = ToggleSwitchGroup;
+exports.default = _default;

package/lib/ToggleSwitch/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitchGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitchGroup.default;
+  }
+});
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ToggleSwitchGroup = _interopRequireDefault(require("./ToggleSwitchGroup"));
 
-var _default = _ToggleSwitch.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/index.js

@@ -21,6 +21,8 @@ var _exportNames = {
   IconButton: true,
   InputLabel: true,
   List: true,
+  ListItem: true,
+  ListBase: true,
   Modal: true,
   Notification: true,
   Pagination: true,
@@ -36,7 +38,6 @@ var _exportNames = {
   StepTracker: true,
   Tabs: true,
   Tags: true,
-  ToggleSwitch: true,
   Tooltip: true,
   TooltipButton: true,
   Typography: true,
@@ -153,6 +154,18 @@ Object.defineProperty(exports, "List", {
     return _List.default;
   }
 });
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _List.ListItem;
+  }
+});
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.ListBase;
+  }
+});
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
@@ -243,12 +256,6 @@ Object.defineProperty(exports, "Tags", {
     return _Tags.default;
   }
 });
-Object.defineProperty(exports, "ToggleSwitch", {
-  enumerable: true,
-  get: function () {
-    return _ToggleSwitch.default;
-  }
-});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -420,7 +427,7 @@ Object.keys(_Link).forEach(function (key) {
   });
 });
 
-var _List = _interopRequireDefault(require("./List"));
+var _List = _interopRequireWildcard(require("./List"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
 
@@ -502,7 +509,19 @@ Object.keys(_TextInput).forEach(function (key) {
   });
 });
 
-var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+var _ToggleSwitch = require("./ToggleSwitch");
+
+Object.keys(_ToggleSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ToggleSwitch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleSwitch[key];
+    }
+  });
+});
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 

package/lib/utils/a11y/propTypes.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes.native"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = { ..._propTypes2.default,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: _propTypes.default.string,
+  accessibilityAtomic: _propTypes.default.bool,
+  accessibilityAutoComplete: _propTypes.default.string,
+  accessibilityBusy: _propTypes.default.bool,
+  accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: _propTypes.default.number,
+  accessibilityColumnIndex: _propTypes.default.number,
+  accessibilityColumnSpan: _propTypes.default.number,
+  accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityDetails: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  accessibilityErrorMessage: _propTypes.default.string,
+  accessibilityExpanded: _propTypes.default.bool,
+  accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityHasPopup: _propTypes.default.string,
+  accessibilityHidden: _propTypes.default.bool,
+  accessibilityInvalid: _propTypes.default.bool,
+  accessibilityKeyShortcuts: _propTypes.default.string,
+  accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityLevel: _propTypes.default.number,
+  accessibilityModal: _propTypes.default.bool,
+  accessibilityMultiline: _propTypes.default.bool,
+  accessibilityMultiSelectable: _propTypes.default.bool,
+  accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityPlaceholder: _propTypes.default.string,
+  accessibilityPosInSet: _propTypes.default.number,
+  accessibilityPressed: _propTypes.default.bool,
+  accessibilityReadOnly: _propTypes.default.bool,
+  accessibilityRequired: _propTypes.default.bool,
+  accessibilityRoleDescription: _propTypes.default.string,
+  accessibilityRowCount: _propTypes.default.number,
+  accessibilityRowIndex: _propTypes.default.number,
+  accessibilityRowSpan: _propTypes.default.number,
+  accessibilitySelected: _propTypes.default.bool,
+  accessibilitySetSize: _propTypes.default.number,
+  accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: _propTypes.default.number,
+  accessibilityValueMin: _propTypes.default.number,
+  accessibilityValueNow: _propTypes.default.number,
+  accessibilityValueText: _propTypes.default.string
+};
+exports.default = _default;

package/lib/utils/a11y/propTypes.native.js

@@ -0,0 +1,47 @@
+"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 }; }
+
+// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
+// so we have to define them ourselves.
+var _default = {
+  accessible: _propTypes.default.bool,
+  focusable: _propTypes.default.bool,
+  accessibilityElementsHidden: _propTypes.default.bool,
+  accessibilityHint: _propTypes.default.string,
+  // react-native-web ignores `accessibilityHint`
+  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.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.default.shape({
+    min: _propTypes.default.number,
+    max: _propTypes.default.number,
+    now: _propTypes.default.number,
+    text: _propTypes.default.string
+  }),
+  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
+};
+exports.default = _default;

package/lib/utils/index.js

@@ -9,7 +9,8 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
-  useUniqueId: true
+  useUniqueId: true,
+  withLinkRouter: true
 };
 Object.defineProperty(exports, "info", {
   enumerable: true,
@@ -47,6 +48,12 @@ Object.defineProperty(exports, "useUniqueId", {
     return _useUniqueId.default;
   }
 });
+Object.defineProperty(exports, "withLinkRouter", {
+  enumerable: true,
+  get: function () {
+    return _withLinkRouter.default;
+  }
+});
 
 var _a11y = require("./a11y");
 
@@ -156,6 +163,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
 
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
+var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
+
 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; }