@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
198 lines (194 loc) • 8.96 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { Component } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
import Layer from '../Layer';
var packageName = "@atlaskit/editor-common";
var packageVersion = "99.4.0";
var halfFocusRing = 1;
var dropOffset = '0, 8';
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/react/no-class-components
var DropList = /*#__PURE__*/function (_Component) {
function DropList() {
var _this;
_classCallCheck(this, DropList);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, DropList, [].concat(args));
_defineProperty(_this, "wrapperStyles", css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
flex: _this.props.shouldFitContainer ? '1 1 auto' : undefined,
transitionDuration: '0.2s',
transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)'
}));
_defineProperty(_this, "triggerStyles", css({
transitionDuration: '0.2s',
transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
display: _this.props.shouldFitContainer ? 'block' : 'inline-flex',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
boxSizing: _this.props.shouldFitContainer ? 'border-box' : undefined
}));
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
_defineProperty(_this, "menuWrapper", function () {
return css({
color: "var(--ds-text-subtle, #44546F)",
backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
borderRadius: "var(--ds-border-radius, 3px)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
boxSizing: 'border-box',
overflow: 'auto',
padding: "var(--ds-space-050, 4px)".concat(" 0"),
maxHeight: '90vh'
});
});
/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
_defineProperty(_this, "componentDidMount", function () {
_this.setContentWidth();
// We use a captured event here to avoid a radio or checkbox dropdown item firing its
// click event first, which would cause a re-render of the element and prevent DropList
// from detecting the actual source of this original click event.
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
document.addEventListener('click', _this.handleClickOutside, true);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
document.addEventListener('keydown', _this.handleEsc);
});
_defineProperty(_this, "componentDidUpdate", function () {
if (_this.props.isOpen) {
_this.setContentWidth();
}
});
_defineProperty(_this, "componentWillUnmount", function () {
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
document.removeEventListener('click', _this.handleClickOutside, true);
// Ignored via go/ees005
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
document.removeEventListener('keydown', _this.handleEsc);
});
_defineProperty(_this, "setContentWidth", function () {
var _this2 = _this,
dropContentRef = _this2.dropContentRef,
triggerRef = _this2.triggerRef;
var shouldFitContainer = _this.props.shouldFitContainer;
// We need to manually set the content width to match the trigger width
if (shouldFitContainer && dropContentRef && triggerRef) {
dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
}
});
_defineProperty(_this, "handleEsc", function (event) {
if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
_this.close(event);
}
});
_defineProperty(_this, "handleClickOutside", function (event) {
if (_this.props.isOpen) {
if (event.target instanceof Node) {
// Rather than check for the target within the entire DropList, we specify the trigger/content.
// This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
// blanket which stretches to the viewport should not stop 'close' from being triggered.
var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
if (!withinTrigger && !withinContent) {
_this.close(event);
}
}
}
});
_defineProperty(_this, "close", function (event) {
if (_this.props.onOpenChange) {
_this.props.onOpenChange({
isOpen: false,
event: event
});
}
});
_defineProperty(_this, "handleContentRef", function (ref) {
_this.dropContentRef = ref;
// If the dropdown has just been opened, we focus on the containing element so the
// user can tab to the first dropdown item. We will only receive this ref if isOpen
// is true or null, so no need to check for truthiness here.
if (ref) {
ref.focus();
}
});
_defineProperty(_this, "handleDroplistRef", function (ref) {
var _this$props$onDroplis, _this$props;
(_this$props$onDroplis = (_this$props = _this.props).onDroplistRef) === null || _this$props$onDroplis === void 0 || _this$props$onDroplis.call(_this$props, ref);
});
_defineProperty(_this, "handleTriggerRef", function (ref) {
_this.triggerRef = ref;
});
return _this;
}
_inherits(DropList, _Component);
return _createClass(DropList, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
children = _this$props2.children,
isOpen = _this$props2.isOpen,
position = _this$props2.position,
trigger = _this$props2.trigger,
onPositioned = _this$props2.onPositioned,
testId = _this$props2.testId,
id = _this$props2.id;
var layerContent = isOpen ? jsx("div", {
css: this.menuWrapper,
"data-role": "droplistContent",
"data-testid": testId && "".concat(testId, "--content"),
ref: this.handleContentRef,
id: id,
role: "presentation"
}, children) : null;
return jsx("div", {
css: this.wrapperStyles,
ref: this.handleDroplistRef
}, jsx(Layer, {
content: layerContent,
offset: dropOffset,
position: position,
onPositioned: onPositioned
}, jsx("div", {
css: this.triggerStyles,
ref: this.handleTriggerRef
}, trigger)));
}
}]);
}(Component);
var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
export default withAnalyticsContext({
componentName: 'droplist',
packageName: packageName,
packageVersion: packageVersion
})(withAnalyticsEvents({
onOpenChange: createAndFireEventOnAtlaskit({
action: 'toggled',
actionSubject: 'droplist',
attributes: {
componentName: 'droplist',
packageName: packageName,
packageVersion: packageVersion
}
})
})(DropList));