botframework-webchat-component/lib/Utils/AccessibleTextArea.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; }

// Differences between <textarea> and <AccessibleTextArea>:
// - Disable behavior
//   - When the widget is disabled
//     - Set "aria-disabled" attribute to "true"
//     - Set "readonly" attribute
//     - Set "tabIndex" to -1
//     - Remove "onChange" handler
//   - Why this is needed
//     - Browser compatibility: when the widget is disabled, different browser send focus to different places
//     - When the widget is 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 move the focus 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 the code that checks disabled through the "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 AccessibleTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
  var disabled = _ref.disabled,
      onChange = _ref.onChange,
      onFocus = _ref.onFocus,
      onKeyDown = _ref.onKeyDown,
      onKeyPress = _ref.onKeyPress,
      onSelect = _ref.onSelect,
      tabIndex = _ref.tabIndex,
      props = _objectWithoutProperties(_ref, ["disabled", "onChange", "onFocus", "onKeyDown", "onKeyPress", "onSelect", "tabIndex"]);

  var targetRef = (0, _react.useRef)();
  var ref = forwardedRef || targetRef;
  return /*#__PURE__*/_react.default.createElement("textarea", _extends({
    "aria-disabled": disabled || undefined,
    onChange: disabled ? undefined : onChange,
    onFocus: disabled ? undefined : onFocus,
    onKeyDown: disabled ? undefined : onKeyDown,
    onKeyPress: disabled ? undefined : onKeyPress,
    onSelect: disabled ? undefined : onSelect,
    readOnly: disabled,
    ref: ref,
    tabIndex: disabled ? -1 : tabIndex
  }, props));
});
AccessibleTextArea.defaultProps = {
  disabled: undefined,
  onChange: undefined,
  onFocus: undefined,
  onKeyDown: undefined,
  onKeyPress: undefined,
  onSelect: undefined,
  tabIndex: undefined
};
AccessibleTextArea.displayName = 'AccessibleTextArea';
AccessibleTextArea.propTypes = {
  disabled: _propTypes.default.bool,
  onChange: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  onKeyDown: _propTypes.default.func,
  onKeyPress: _propTypes.default.func,
  onSelect: _propTypes.default.func,
  tabIndex: _propTypes.default.number
};
var _default = AccessibleTextArea;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9VdGlscy9BY2Nlc3NpYmxlVGV4dEFyZWEuanMiXSwibmFtZXMiOlsiQWNjZXNzaWJsZVRleHRBcmVhIiwiZm9yd2FyZGVkUmVmIiwiZGlzYWJsZWQiLCJvbkNoYW5nZSIsIm9uRm9jdXMiLCJvbktleURvd24iLCJvbktleVByZXNzIiwib25TZWxlY3QiLCJ0YWJJbmRleCIsInByb3BzIiwidGFyZ2V0UmVmIiwicmVmIiwidW5kZWZpbmVkIiwiZGVmYXVsdFByb3BzIiwiZGlzcGxheU5hbWUiLCJwcm9wVHlwZXMiLCJQcm9wVHlwZXMiLCJib29sIiwiZnVuYyIsIm51bWJlciJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBRUE7O0FBQ0E7Ozs7Ozs7Ozs7Ozs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFFQSxJQUFNQSxrQkFBa0IsZ0JBQUcsdUJBQ3pCLGdCQUF1RkMsWUFBdkYsRUFBd0c7QUFBQSxNQUFyR0MsUUFBcUcsUUFBckdBLFFBQXFHO0FBQUEsTUFBM0ZDLFFBQTJGLFFBQTNGQSxRQUEyRjtBQUFBLE1BQWpGQyxPQUFpRixRQUFqRkEsT0FBaUY7QUFBQSxNQUF4RUMsU0FBd0UsUUFBeEVBLFNBQXdFO0FBQUEsTUFBN0RDLFVBQTZELFFBQTdEQSxVQUE2RDtBQUFBLE1BQWpEQyxRQUFpRCxRQUFqREEsUUFBaUQ7QUFBQSxNQUF2Q0MsUUFBdUMsUUFBdkNBLFFBQXVDO0FBQUEsTUFBMUJDLEtBQTBCOztBQUN0RyxNQUFNQyxTQUFTLEdBQUcsb0JBQWxCO0FBRUEsTUFBTUMsR0FBRyxHQUFHVixZQUFZLElBQUlTLFNBQTVCO0FBRUEsc0JBQ0U7QUFDRSxxQkFBZVIsUUFBUSxJQUFJVSxTQUQ3QjtBQUVFLElBQUEsUUFBUSxFQUFFVixRQUFRLEdBQUdVLFNBQUgsR0FBZVQsUUFGbkM7QUFHRSxJQUFBLE9BQU8sRUFBRUQsUUFBUSxHQUFHVSxTQUFILEdBQWVSLE9BSGxDO0FBSUUsSUFBQSxTQUFTLEVBQUVGLFFBQVEsR0FBR1UsU0FBSCxHQUFlUCxTQUpwQztBQUtFLElBQUEsVUFBVSxFQUFFSCxRQUFRLEdBQUdVLFNBQUgsR0FBZU4sVUFMckM7QUFNRSxJQUFBLFFBQVEsRUFBRUosUUFBUSxHQUFHVSxTQUFILEdBQWVMLFFBTm5DO0FBT0UsSUFBQSxRQUFRLEVBQUVMLFFBUFo7QUFRRSxJQUFBLEdBQUcsRUFBRVMsR0FSUDtBQVNFLElBQUEsUUFBUSxFQUFFVCxRQUFRLEdBQUcsQ0FBQyxDQUFKLEdBQVFNO0FBVDVCLEtBVU1DLEtBVk4sRUFERjtBQWNELENBcEJ3QixDQUEzQjtBQXVCQVQsa0JBQWtCLENBQUNhLFlBQW5CLEdBQWtDO0FBQ2hDWCxFQUFBQSxRQUFRLEVBQUVVLFNBRHNCO0FBRWhDVCxFQUFBQSxRQUFRLEVBQUVTLFNBRnNCO0FBR2hDUixFQUFBQSxPQUFPLEVBQUVRLFNBSHVCO0FBSWhDUCxFQUFBQSxTQUFTLEVBQUVPLFNBSnFCO0FBS2hDTixFQUFBQSxVQUFVLEVBQUVNLFNBTG9CO0FBTWhDTCxFQUFBQSxRQUFRLEVBQUVLLFNBTnNCO0FBT2hDSixFQUFBQSxRQUFRLEVBQUVJO0FBUHNCLENBQWxDO0FBVUFaLGtCQUFrQixDQUFDYyxXQUFuQixHQUFpQyxvQkFBakM7QUFFQWQsa0JBQWtCLENBQUNlLFNBQW5CLEdBQStCO0FBQzdCYixFQUFBQSxRQUFRLEVBQUVjLG1CQUFVQyxJQURTO0FBRTdCZCxFQUFBQSxRQUFRLEVBQUVhLG1CQUFVRSxJQUZTO0FBRzdCZCxFQUFBQSxPQUFPLEVBQUVZLG1CQUFVRSxJQUhVO0FBSTdCYixFQUFBQSxTQUFTLEVBQUVXLG1CQUFVRSxJQUpRO0FBSzdCWixFQUFBQSxVQUFVLEVBQUVVLG1CQUFVRSxJQUxPO0FBTTdCWCxFQUFBQSxRQUFRLEVBQUVTLG1CQUFVRSxJQU5TO0FBTzdCVixFQUFBQSxRQUFRLEVBQUVRLG1CQUFVRztBQVBTLENBQS9CO2VBVWVuQixrQiIsInNvdXJjZVJvb3QiOiJjb21wb25lbnQ6Ly8vIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50IG5vLW1hZ2ljLW51bWJlcnM6IFtcImVycm9yXCIsIHsgXCJpZ25vcmVcIjogWy0xXSB9XSAqL1xuXG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYsIHVzZVJlZiB9IGZyb20gJ3JlYWN0JztcblxuLy8gRGlmZmVyZW5jZXMgYmV0d2VlbiA8dGV4dGFyZWE+IGFuZCA8QWNjZXNzaWJsZVRleHRBcmVhPjpcbi8vIC0gRGlzYWJsZSBiZWhhdmlvclxuLy8gICAtIFdoZW4gdGhlIHdpZGdldCBpcyBkaXNhYmxlZFxuLy8gICAgIC0gU2V0IFwiYXJpYS1kaXNhYmxlZFwiIGF0dHJpYnV0ZSB0byBcInRydWVcIlxuLy8gICAgIC0gU2V0IFwicmVhZG9ubHlcIiBhdHRyaWJ1dGVcbi8vICAgICAtIFNldCBcInRhYkluZGV4XCIgdG8gLTFcbi8vICAgICAtIFJlbW92ZSBcIm9uQ2hhbmdlXCIgaGFuZGxlclxuLy8gICAtIFdoeSB0aGlzIGlzIG5lZWRlZFxuLy8gICAgIC0gQnJvd3NlciBjb21wYXRpYmlsaXR5OiB3aGVuIHRoZSB3aWRnZXQgaXMgZGlzYWJsZWQsIGRpZmZlcmVudCBicm93c2VyIHNlbmQgZm9jdXMgdG8gZGlmZmVyZW50IHBsYWNlc1xuLy8gICAgIC0gV2hlbiB0aGUgd2lkZ2V0IGlzIGRpc2FibGVkLCBpdCdzIHJlYXNvbmFibGUgdG8ga2VlcCB0aGUgZm9jdXMgb24gdGhlIHNhbWUgd2lkZ2V0IGZvciBhbiBleHRlbmRlZCBwZXJpb2Qgb2YgdGltZVxuLy8gICAgICAgLSBXaGVuIHRoZSB1c2VyIHByZXNzZXMgVEFCIGFmdGVyIHRoZSBjdXJyZW50IHdpZGdldCBpcyBkaXNhYmxlZCwgaXQgc2hvdWxkIG1vdmUgdGhlIGZvY3VzIHRvIHRoZSBuZXh0IG5vbi1kaXNhYmxlZCB3aWRnZXRcblxuLy8gRGV2ZWxvcGVycyB1c2luZyB0aGlzIGFjY2Vzc2libGUgd2lkZ2V0IHdpbGwgbmVlZCB0bzpcbi8vIC0gU3R5bGUgdGhlIGRpc2FibGVkIHdpZGdldCB0aGVtc2VsdmVzIHVzaW5nIENTUyBxdWVyeSBgOmRpc2FibGVkLCBbYXJpYS1kaXNhYmxlZD1cInRydWVcIl0ge31gXG4vLyAtIE1vZGlmeSBhbGwgdGhlIGNvZGUgdGhhdCBjaGVja3MgZGlzYWJsZWQgdGhyb3VnaCB0aGUgXCJkaXNhYmxlZFwiIGF0dHJpYnV0ZSB0byB1c2UgYXJpYS1kaXNhYmxlZD1cInRydWVcIiBpbnN0ZWFkXG4vLyAgIC0gYXJpYS1kaXNhYmxlZD1cInRydWVcIiBpcyB0aGUgc291cmNlIG9mIHRydXRoXG4vLyAtIElmIHRoZSB3aWRnZXQgaXMgY29udGFpbmVkIGJ5IGEgPGZvcm0+LCB0aGUgZGV2ZWxvcGVyIG5lZWQgdG8gZmlsdGVyIG91dCBzb21lIGBvblN1Ym1pdGAgZXZlbnQgY2F1c2VkIGJ5IHRoaXMgd2lkZ2V0XG5cbmNvbnN0IEFjY2Vzc2libGVUZXh0QXJlYSA9IGZvcndhcmRSZWYoXG4gICh7IGRpc2FibGVkLCBvbkNoYW5nZSwgb25Gb2N1cywgb25LZXlEb3duLCBvbktleVByZXNzLCBvblNlbGVjdCwgdGFiSW5kZXgsIC4uLnByb3BzIH0sIGZvcndhcmRlZFJlZikgPT4ge1xuICAgIGNvbnN0IHRhcmdldFJlZiA9IHVzZVJlZigpO1xuXG4gICAgY29uc3QgcmVmID0gZm9yd2FyZGVkUmVmIHx8IHRhcmdldFJlZjtcblxuICAgIHJldHVybiAoXG4gICAgICA8dGV4dGFyZWFcbiAgICAgICAgYXJpYS1kaXNhYmxlZD17ZGlzYWJsZWQgfHwgdW5kZWZpbmVkfVxuICAgICAgICBvbkNoYW5nZT17ZGlzYWJsZWQgPyB1bmRlZmluZWQgOiBvbkNoYW5nZX1cbiAgICAgICAgb25Gb2N1cz17ZGlzYWJsZWQgPyB1bmRlZmluZWQgOiBvbkZvY3VzfVxuICAgICAgICBvbktleURvd249e2Rpc2FibGVkID8gdW5kZWZpbmVkIDogb25LZXlEb3dufVxuICAgICAgICBvbktleVByZXNzPXtkaXNhYmxlZCA/IHVuZGVmaW5lZCA6IG9uS2V5UHJlc3N9XG4gICAgICAgIG9uU2VsZWN0PXtkaXNhYmxlZCA/IHVuZGVmaW5lZCA6IG9uU2VsZWN0fVxuICAgICAgICByZWFkT25seT17ZGlzYWJsZWR9XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB0YWJJbmRleD17ZGlzYWJsZWQgPyAtMSA6IHRhYkluZGV4fVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAvPlxuICAgICk7XG4gIH1cbik7XG5cbkFjY2Vzc2libGVUZXh0QXJlYS5kZWZhdWx0UHJvcHMgPSB7XG4gIGRpc2FibGVkOiB1bmRlZmluZWQsXG4gIG9uQ2hhbmdlOiB1bmRlZmluZWQsXG4gIG9uRm9jdXM6IHVuZGVmaW5lZCxcbiAgb25LZXlEb3duOiB1bmRlZmluZWQsXG4gIG9uS2V5UHJlc3M6IHVuZGVmaW5lZCxcbiAgb25TZWxlY3Q6IHVuZGVmaW5lZCxcbiAgdGFiSW5kZXg6IHVuZGVmaW5lZFxufTtcblxuQWNjZXNzaWJsZVRleHRBcmVhLmRpc3BsYXlOYW1lID0gJ0FjY2Vzc2libGVUZXh0QXJlYSc7XG5cbkFjY2Vzc2libGVUZXh0QXJlYS5wcm9wVHlwZXMgPSB7XG4gIGRpc2FibGVkOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25DaGFuZ2U6IFByb3BUeXBlcy5mdW5jLFxuICBvbkZvY3VzOiBQcm9wVHlwZXMuZnVuYyxcbiAgb25LZXlEb3duOiBQcm9wVHlwZXMuZnVuYyxcbiAgb25LZXlQcmVzczogUHJvcFR5cGVzLmZ1bmMsXG4gIG9uU2VsZWN0OiBQcm9wVHlwZXMuZnVuYyxcbiAgdGFiSW5kZXg6IFByb3BUeXBlcy5udW1iZXJcbn07XG5cbmV4cG9ydCBkZWZhdWx0IEFjY2Vzc2libGVUZXh0QXJlYTtcbiJdfQ==