botframework-webchat-component/lib/Utils/AccessibleButton.js

React component of botframework-webchat

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _react = _interopRequireWildcard(require("react"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var PREVENT_DEFAULT_HANDLER = function PREVENT_DEFAULT_HANDLER(event) {
  return event.preventDefault();
}; // Differences between <button> and <AccessibleButton>:
// - Disable behavior
//   - When the widget is disabled
//     - Set "aria-disabled" attribute to "true"
//     - Set "readonly" attribute
//     - Set "tabIndex" to -1
//     - Remove "onClick" handler
//   - Why this is needed
//     - Browser compatibility: when the widget is disabled, different browser send focus to different places
//     - When the widget become disabled, it's reasonable to keep the focus on the same widget for an extended period of time
//       - When the user presses TAB after the current widget is disabled, it should jump to the next non-disabled widget
// Developers using this accessible widget will need to:
// - Style the disabled widget themselves, using CSS query `:disabled, [aria-disabled="true"] {}`
// - Modify all code that check disabled through "disabled" attribute to use aria-disabled="true" instead
//   - aria-disabled="true" is the source of truth
// - If the widget is contained by a <form>, the developer need to filter out some `onSubmit` event caused by this widget


var AccessibleButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
  var ariaHidden = _ref['aria-hidden'],
      disabled = _ref.disabled,
      onClick = _ref.onClick,
      tabIndex = _ref.tabIndex,
      props = _objectWithoutProperties(_ref, ["aria-hidden", "disabled", "onClick", "tabIndex"]);

  var targetRef = (0, _react.useRef)();
  var ref = forwardedRef || targetRef;
  return /*#__PURE__*/_react.default.createElement("button", _extends({
    "aria-disabled": disabled || undefined,
    "aria-hidden": ariaHidden,
    onClick: disabled ? PREVENT_DEFAULT_HANDLER : onClick,
    ref: ref,
    tabIndex: disabled ? -1 : tabIndex
  }, props, {
    type: "button"
  }));
});
AccessibleButton.defaultProps = {
  'aria-hidden': undefined,
  disabled: undefined,
  onClick: undefined,
  tabIndex: undefined
};
AccessibleButton.displayName = 'AccessibleButton';
AccessibleButton.propTypes = {
  'aria-hidden': _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  onClick: _propTypes.default.func,
  tabIndex: _propTypes.default.number,
  type: _propTypes.default.oneOf(['button']).isRequired
};
var _default = AccessibleButton;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9VdGlscy9BY2Nlc3NpYmxlQnV0dG9uLmpzIl0sIm5hbWVzIjpbIlBSRVZFTlRfREVGQVVMVF9IQU5ETEVSIiwiZXZlbnQiLCJwcmV2ZW50RGVmYXVsdCIsIkFjY2Vzc2libGVCdXR0b24iLCJmb3J3YXJkZWRSZWYiLCJhcmlhSGlkZGVuIiwiZGlzYWJsZWQiLCJvbkNsaWNrIiwidGFiSW5kZXgiLCJwcm9wcyIsInRhcmdldFJlZiIsInJlZiIsInVuZGVmaW5lZCIsImRlZmF1bHRQcm9wcyIsImRpc3BsYXlOYW1lIiwicHJvcFR5cGVzIiwiUHJvcFR5cGVzIiwiYm9vbCIsImZ1bmMiLCJudW1iZXIiLCJ0eXBlIiwib25lT2YiLCJpc1JlcXVpcmVkIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFFQTs7QUFDQTs7Ozs7Ozs7Ozs7Ozs7QUFFQSxJQUFNQSx1QkFBdUIsR0FBRyxTQUExQkEsdUJBQTBCLENBQUFDLEtBQUs7QUFBQSxTQUFJQSxLQUFLLENBQUNDLGNBQU4sRUFBSjtBQUFBLENBQXJDLEMsQ0FFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7O0FBRUEsSUFBTUMsZ0JBQWdCLGdCQUFHLHVCQUN2QixnQkFBdUVDLFlBQXZFLEVBQXdGO0FBQUEsTUFBdEVDLFVBQXNFLFFBQXJGLGFBQXFGO0FBQUEsTUFBMURDLFFBQTBELFFBQTFEQSxRQUEwRDtBQUFBLE1BQWhEQyxPQUFnRCxRQUFoREEsT0FBZ0Q7QUFBQSxNQUF2Q0MsUUFBdUMsUUFBdkNBLFFBQXVDO0FBQUEsTUFBMUJDLEtBQTBCOztBQUN0RixNQUFNQyxTQUFTLEdBQUcsb0JBQWxCO0FBRUEsTUFBTUMsR0FBRyxHQUFHUCxZQUFZLElBQUlNLFNBQTVCO0FBRUEsc0JBQ0U7QUFDRSxxQkFBZUosUUFBUSxJQUFJTSxTQUQ3QjtBQUVFLG1CQUFhUCxVQUZmO0FBR0UsSUFBQSxPQUFPLEVBQUVDLFFBQVEsR0FBR04sdUJBQUgsR0FBNkJPLE9BSGhEO0FBSUUsSUFBQSxHQUFHLEVBQUVJLEdBSlA7QUFLRSxJQUFBLFFBQVEsRUFBRUwsUUFBUSxHQUFHLENBQUMsQ0FBSixHQUFRRTtBQUw1QixLQU1NQyxLQU5OO0FBT0UsSUFBQSxJQUFJLEVBQUM7QUFQUCxLQURGO0FBV0QsQ0FqQnNCLENBQXpCO0FBb0JBTixnQkFBZ0IsQ0FBQ1UsWUFBakIsR0FBZ0M7QUFDOUIsaUJBQWVELFNBRGU7QUFFOUJOLEVBQUFBLFFBQVEsRUFBRU0sU0FGb0I7QUFHOUJMLEVBQUFBLE9BQU8sRUFBRUssU0FIcUI7QUFJOUJKLEVBQUFBLFFBQVEsRUFBRUk7QUFKb0IsQ0FBaEM7QUFPQVQsZ0JBQWdCLENBQUNXLFdBQWpCLEdBQStCLGtCQUEvQjtBQUVBWCxnQkFBZ0IsQ0FBQ1ksU0FBakIsR0FBNkI7QUFDM0IsaUJBQWVDLG1CQUFVQyxJQURFO0FBRTNCWCxFQUFBQSxRQUFRLEVBQUVVLG1CQUFVQyxJQUZPO0FBRzNCVixFQUFBQSxPQUFPLEVBQUVTLG1CQUFVRSxJQUhRO0FBSTNCVixFQUFBQSxRQUFRLEVBQUVRLG1CQUFVRyxNQUpPO0FBSzNCQyxFQUFBQSxJQUFJLEVBQUVKLG1CQUFVSyxLQUFWLENBQWdCLENBQUMsUUFBRCxDQUFoQixFQUE0QkM7QUFMUCxDQUE3QjtlQVFlbkIsZ0IiLCJzb3VyY2VSb290IjoiY29tcG9uZW50Oi8vLyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludCBuby1tYWdpYy1udW1iZXJzOiBbXCJlcnJvclwiLCB7IFwiaWdub3JlXCI6IFstMV0gfV0gKi9cblxuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCBSZWFjdCwgeyBmb3J3YXJkUmVmLCB1c2VSZWYgfSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IFBSRVZFTlRfREVGQVVMVF9IQU5ETEVSID0gZXZlbnQgPT4gZXZlbnQucHJldmVudERlZmF1bHQoKTtcblxuLy8gRGlmZmVyZW5jZXMgYmV0d2VlbiA8YnV0dG9uPiBhbmQgPEFjY2Vzc2libGVCdXR0b24+OlxuLy8gLSBEaXNhYmxlIGJlaGF2aW9yXG4vLyAgIC0gV2hlbiB0aGUgd2lkZ2V0IGlzIGRpc2FibGVkXG4vLyAgICAgLSBTZXQgXCJhcmlhLWRpc2FibGVkXCIgYXR0cmlidXRlIHRvIFwidHJ1ZVwiXG4vLyAgICAgLSBTZXQgXCJyZWFkb25seVwiIGF0dHJpYnV0ZVxuLy8gICAgIC0gU2V0IFwidGFiSW5kZXhcIiB0byAtMVxuLy8gICAgIC0gUmVtb3ZlIFwib25DbGlja1wiIGhhbmRsZXJcbi8vICAgLSBXaHkgdGhpcyBpcyBuZWVkZWRcbi8vICAgICAtIEJyb3dzZXIgY29tcGF0aWJpbGl0eTogd2hlbiB0aGUgd2lkZ2V0IGlzIGRpc2FibGVkLCBkaWZmZXJlbnQgYnJvd3NlciBzZW5kIGZvY3VzIHRvIGRpZmZlcmVudCBwbGFjZXNcbi8vICAgICAtIFdoZW4gdGhlIHdpZGdldCBiZWNvbWUgZGlzYWJsZWQsIGl0J3MgcmVhc29uYWJsZSB0byBrZWVwIHRoZSBmb2N1cyBvbiB0aGUgc2FtZSB3aWRnZXQgZm9yIGFuIGV4dGVuZGVkIHBlcmlvZCBvZiB0aW1lXG4vLyAgICAgICAtIFdoZW4gdGhlIHVzZXIgcHJlc3NlcyBUQUIgYWZ0ZXIgdGhlIGN1cnJlbnQgd2lkZ2V0IGlzIGRpc2FibGVkLCBpdCBzaG91bGQganVtcCB0byB0aGUgbmV4dCBub24tZGlzYWJsZWQgd2lkZ2V0XG5cbi8vIERldmVsb3BlcnMgdXNpbmcgdGhpcyBhY2Nlc3NpYmxlIHdpZGdldCB3aWxsIG5lZWQgdG86XG4vLyAtIFN0eWxlIHRoZSBkaXNhYmxlZCB3aWRnZXQgdGhlbXNlbHZlcywgdXNpbmcgQ1NTIHF1ZXJ5IGA6ZGlzYWJsZWQsIFthcmlhLWRpc2FibGVkPVwidHJ1ZVwiXSB7fWBcbi8vIC0gTW9kaWZ5IGFsbCBjb2RlIHRoYXQgY2hlY2sgZGlzYWJsZWQgdGhyb3VnaCBcImRpc2FibGVkXCIgYXR0cmlidXRlIHRvIHVzZSBhcmlhLWRpc2FibGVkPVwidHJ1ZVwiIGluc3RlYWRcbi8vICAgLSBhcmlhLWRpc2FibGVkPVwidHJ1ZVwiIGlzIHRoZSBzb3VyY2Ugb2YgdHJ1dGhcbi8vIC0gSWYgdGhlIHdpZGdldCBpcyBjb250YWluZWQgYnkgYSA8Zm9ybT4sIHRoZSBkZXZlbG9wZXIgbmVlZCB0byBmaWx0ZXIgb3V0IHNvbWUgYG9uU3VibWl0YCBldmVudCBjYXVzZWQgYnkgdGhpcyB3aWRnZXRcblxuY29uc3QgQWNjZXNzaWJsZUJ1dHRvbiA9IGZvcndhcmRSZWYoXG4gICh7ICdhcmlhLWhpZGRlbic6IGFyaWFIaWRkZW4sIGRpc2FibGVkLCBvbkNsaWNrLCB0YWJJbmRleCwgLi4ucHJvcHMgfSwgZm9yd2FyZGVkUmVmKSA9PiB7XG4gICAgY29uc3QgdGFyZ2V0UmVmID0gdXNlUmVmKCk7XG5cbiAgICBjb25zdCByZWYgPSBmb3J3YXJkZWRSZWYgfHwgdGFyZ2V0UmVmO1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxidXR0b25cbiAgICAgICAgYXJpYS1kaXNhYmxlZD17ZGlzYWJsZWQgfHwgdW5kZWZpbmVkfVxuICAgICAgICBhcmlhLWhpZGRlbj17YXJpYUhpZGRlbn1cbiAgICAgICAgb25DbGljaz17ZGlzYWJsZWQgPyBQUkVWRU5UX0RFRkFVTFRfSEFORExFUiA6IG9uQ2xpY2t9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB0YWJJbmRleD17ZGlzYWJsZWQgPyAtMSA6IHRhYkluZGV4fVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgLz5cbiAgICApO1xuICB9XG4pO1xuXG5BY2Nlc3NpYmxlQnV0dG9uLmRlZmF1bHRQcm9wcyA9IHtcbiAgJ2FyaWEtaGlkZGVuJzogdW5kZWZpbmVkLFxuICBkaXNhYmxlZDogdW5kZWZpbmVkLFxuICBvbkNsaWNrOiB1bmRlZmluZWQsXG4gIHRhYkluZGV4OiB1bmRlZmluZWRcbn07XG5cbkFjY2Vzc2libGVCdXR0b24uZGlzcGxheU5hbWUgPSAnQWNjZXNzaWJsZUJ1dHRvbic7XG5cbkFjY2Vzc2libGVCdXR0b24ucHJvcFR5cGVzID0ge1xuICAnYXJpYS1oaWRkZW4nOiBQcm9wVHlwZXMuYm9vbCxcbiAgZGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgdGFiSW5kZXg6IFByb3BUeXBlcy5udW1iZXIsXG4gIHR5cGU6IFByb3BUeXBlcy5vbmVPZihbJ2J1dHRvbiddKS5pc1JlcXVpcmVkXG59O1xuXG5leHBvcnQgZGVmYXVsdCBBY2Nlc3NpYmxlQnV0dG9uO1xuIl19