@atlaskit/editor-common 74.57.0 → 74.58.0

package/dist/cjs/element-browser/hooks/use-container-width.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useContainerWidth;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _widthDetector = require("@atlaskit/width-detector");
+var _templateObject;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+/**
+ *
+ * Problem:
+ * While using WidthObserver, there's no initial width.
+ * That may cause problems, but not limited to, something like a lag between
+ * renders for conditionally rendered components.
+ *
+ * solution:
+ * useContainerWidth() hook
+ * it pre-measures the width of a parent container on initial mount
+ * and gives you back the containerWidth.
+ *
+ *
+ * Example hook usage:
+ *
+ *  const { containerWidth, ContainerWidthMonitor } = useContainerWidth();
+ *
+ *  return (
+ *   <>
+ *    <ContainerWidthMonitor />
+ *    {containerWidth < 600 ? <MobileComponent /> : <DesktopComponent />}
+ *   </>
+ *  );
+ *
+ */
+
+var widthObserverWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+function useContainerWidth() {
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var current = ref.current;
+    if (ref && current) {
+      setContainerWidth(current.getBoundingClientRect().width);
+    }
+  }, [ref]);
+  var ContainerWidthMonitor = /*#__PURE__*/(0, _react.memo)(function () {
+    return (0, _react2.jsx)("div", {
+      css: widthObserverWrapper,
+      ref: ref,
+      tabIndex: -1
+    }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
+      setWidth: setContainerWidth
+    }));
+  });
+  return {
+    containerWidth: containerWidth,
+    ContainerWidthMonitor: ContainerWidthMonitor
+  };
+}

package/dist/cjs/element-browser/hooks/use-focus.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFocus;
+var _react = require("react");
+/**
+ * A custom hook that handles focus on a DOM element.
+ * Takes in a boolean value and calls element.focus
+ *
+ * @param {boolean} focus
+ *
+ * Example usage:
+ *******************************************************************************
+ *    const SearchBar = ({ focus }) => {
+ *      const ref = useFocus(focus);
+ *      return <input ref={ref} />
+ *    }
+ *******************************************************************************
+ *    const ItemList = ({ items, focus }) => (
+ *       <ul>
+ *        {items.map((item, index) => (
+ *          <Item key={item.uuid} item={item} focus={focus} />
+ *        ))}
+ *       </ul>
+ *     );
+ *
+ *    const Item = ({ item, focus }) => {
+ *      const ref = useFocus(focus);
+ *      return (
+ *        <li ref={ref}>
+ *          {item.name}
+ *        </li>
+ *      )
+ *    }
+ *******************************************************************************
+ */
+
+function useFocus(focus) {
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    var current = ref.current;
+    if (focus && current && document.activeElement !== current) {
+      current.focus({
+        preventScroll: true
+      });
+    }
+  }, [focus]);
+  return ref;
+}

package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js

@@ -0,0 +1,286 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ensureSafeIndex = exports.default = exports.ACTIONS = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * a custom hook that handles keyboard navigation for Arrow keys based on a
+ * given listSize, and a step (for up and down arrows).
+ *
+ * @param {number} listSize
+ * @param {number} upDownStep
+ *
+ * Example usage:
+ *    const list = ['Confluence','Jira','Atlaskit'];
+ *    const {
+ *      selectedItemIndex,
+ *      focusedItemIndex,
+ *      focusOnSearch,
+ *      focusOnViewMore,
+ *      setFocusedItemIndex,
+ *      onKeyDown
+ *    } = useSelectAndFocusOnArrowNavigation(list.length - 1, 1);
+ *
+ *    return (
+ *      <div onKeyDown={onKeyDown}>
+ *        <SearchBar onClick={() => setFocusedItemIndex(undefined)} focus={focusOnSearch} />
+ *        {list.map((item, index) => (
+ *           <ListItem
+ *            title={item}
+ *            style={{ ..., color: selected ? 'selectedStateColor' : defaultColor }}
+ *            onClick={() => {
+ *              setFocusedItemIndex(index);
+ *            }
+ *          />
+ *        )}
+ *      </div>
+ *    );
+ *
+ *    const SearchBar = ({ focus }) => {
+ *      const ref = useRefToFocusOrScroll(focus);
+ *      return <input ref={ref} />
+ *    }
+ *
+ */
+var ACTIONS = /*#__PURE__*/function (ACTIONS) {
+  ACTIONS["FOCUS_SEARCH"] = "focusOnSearch";
+  ACTIONS["UPDATE_STATE"] = "updateState";
+  ACTIONS["MOVE"] = "move";
+  return ACTIONS;
+}({});
+exports.ACTIONS = ACTIONS;
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case ACTIONS.UPDATE_STATE:
+      return _objectSpread(_objectSpread({}, state), action.payload);
+    case ACTIONS.FOCUS_SEARCH:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusedItemIndex: undefined,
+        focusOnSearch: true,
+        focusOnViewMore: false
+      });
+    case ACTIONS.MOVE:
+      return moveReducer(state, action);
+  }
+  return state;
+};
+var moveReducer = function moveReducer(state, action) {
+  var listSize = state.listSize,
+    canFocusViewMore = state.canFocusViewMore;
+  if (state.focusOnSearch) {
+    // up arrow
+    if (action.payload.positions && action.payload.positions <= -1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: !!canFocusViewMore,
+        focusedItemIndex: canFocusViewMore ? undefined : listSize,
+        selectedItemIndex: canFocusViewMore ? undefined : listSize
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: 0,
+        selectedItemIndex: 0
+      });
+    }
+  }
+  if (state.focusOnViewMore) {
+    // down arrow
+    if (action.payload.positions === 1) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: true,
+        focusOnViewMore: false,
+        focusedItemIndex: undefined,
+        // if search is focused then select first item.
+        selectedItemIndex: 0
+      });
+    } else {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        focusOnSearch: false,
+        focusOnViewMore: false,
+        focusedItemIndex: listSize,
+        selectedItemIndex: listSize
+      });
+    }
+  }
+  var newIndex = state.selectedItemIndex ? state.selectedItemIndex + action.payload.positions : action.payload.positions;
+  var safeIndex = ensureSafeIndex(newIndex, state.listSize);
+  // down arrow key is pressed or right arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions >= 1) {
+    // when multi column element browser is open and we are in last
+    //  row then newIndex will be greater than listSize when
+    //  down arrow key is pressed.
+    // Or when last item is focused and down or right arrow key is pressed.
+    var isLastItemFocused = newIndex > listSize;
+    var focusOnSearch = isLastItemFocused && !canFocusViewMore;
+    var focusOnViewMore = isLastItemFocused && !!canFocusViewMore;
+    // if search is focused, then select first item.
+    // otherwise if view more is focused then select item should be undefined.
+    var selectedItemIndex = focusOnSearch ? 0 : focusOnViewMore ? undefined : safeIndex;
+    return _objectSpread(_objectSpread({}, state), {}, {
+      focusOnSearch: focusOnSearch,
+      focusOnViewMore: focusOnViewMore,
+      selectedItemIndex: selectedItemIndex,
+      focusedItemIndex: isLastItemFocused ? undefined : safeIndex
+    });
+  }
+
+  // up arrow key is pressed or left arrow key is pressed.
+  if (state.focusedItemIndex !== undefined && action.payload.positions && action.payload.positions <= -1) {
+    // if arrow up key is pressed when focus is in first row,
+    //  or, arrow left key is pressed when first item is focused,
+    //  then newIndex will become less than zero.
+    // In this case, focus search, and, kept previously selected item.
+    var isFirstRowFocused = newIndex < 0;
+    // if focus goes to search then kept last selected item in first row.
+    var _selectedItemIndex = isFirstRowFocused ? state.selectedItemIndex : safeIndex;
+    return _objectSpread(_objectSpread({}, state), {}, {
+      // focus search if first item is focused on up or left arrow key
+      focusOnSearch: isFirstRowFocused,
+      focusOnViewMore: false,
+      focusedItemIndex: isFirstRowFocused ? undefined : safeIndex,
+      selectedItemIndex: _selectedItemIndex
+    });
+  }
+  return _objectSpread(_objectSpread({}, state), {}, {
+    focusOnSearch: false,
+    focusOnViewMore: false,
+    selectedItemIndex: safeIndex,
+    focusedItemIndex: safeIndex
+  });
+};
+var initialState = {
+  focusOnSearch: true,
+  focusOnViewMore: false,
+  selectedItemIndex: 0,
+  focusedItemIndex: undefined,
+  listSize: 0
+};
+var getInitialState = function getInitialState(listSize, canFocusViewMore) {
+  return function (initialState) {
+    return _objectSpread(_objectSpread({}, initialState), {}, {
+      listSize: listSize,
+      canFocusViewMore: canFocusViewMore
+    });
+  };
+};
+function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
+  var _useReducer = (0, _react.useReducer)(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
+    _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  (0, _react.useEffect)(function () {
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: {
+        canFocusViewMore: canFocusViewMore
+      }
+    });
+  }, [canFocusViewMore]);
+  var selectedItemIndex = state.selectedItemIndex,
+    focusedItemIndex = state.focusedItemIndex,
+    focusOnSearch = state.focusOnSearch,
+    focusOnViewMore = state.focusOnViewMore;
+  var reset = (0, _react.useCallback)(function (listSize) {
+    var payload = _objectSpread(_objectSpread({}, initialState), {}, {
+      listSize: listSize
+    });
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: payload
+    });
+  }, []);
+  var removeFocusFromSearchAndSetOnItem = (0, _react.useCallback)(function (index) {
+    var payload = {
+      focusedItemIndex: index,
+      selectedItemIndex: index,
+      focusOnSearch: false,
+      focusOnViewMore: false
+    };
+    dispatch({
+      type: ACTIONS.UPDATE_STATE,
+      payload: payload
+    });
+  }, [dispatch]);
+  var setFocusOnSearch = (0, _react.useCallback)(function () {
+    dispatch({
+      type: ACTIONS.FOCUS_SEARCH,
+      payload: {}
+    });
+  }, [dispatch]);
+  var isMoving = (0, _react.useRef)(false);
+  var move = (0, _react.useCallback)(function (e, positions, actualStep) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // avoid firing 2 moves at the same time when holding an arrow down as this can freeze the screen
+    if (!isMoving.current) {
+      isMoving.current = true;
+      requestAnimationFrame(function () {
+        isMoving.current = false;
+        dispatch({
+          type: ACTIONS.MOVE,
+          payload: {
+            positions: positions,
+            step: actualStep
+          }
+        });
+      });
+    }
+  }, []);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var avoidKeysWhileSearching = ['/',
+    // While already focused on search bar, let users type in.
+    'ArrowRight', 'ArrowLeft'];
+    if (focusOnSearch && avoidKeysWhileSearching.includes(e.key)) {
+      return;
+    }
+    switch (e.key) {
+      case '/':
+        e.preventDefault();
+        e.stopPropagation();
+        return setFocusOnSearch();
+      case 'ArrowRight':
+        return move(e, +1);
+      case 'ArrowLeft':
+        return move(e, -1);
+      case 'ArrowDown':
+        return move(e, +step);
+      case 'ArrowUp':
+        return move(e, -step, step);
+    }
+  }, [focusOnSearch, setFocusOnSearch, move, step]);
+  (0, _react.useEffect)(function () {
+    // To reset selection when user filters
+    reset(listSize);
+  }, [listSize, reset]);
+  return {
+    selectedItemIndex: selectedItemIndex,
+    onKeyDown: onKeyDown,
+    focusOnSearch: focusOnSearch,
+    focusOnViewMore: focusOnViewMore,
+    setFocusOnSearch: setFocusOnSearch,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: removeFocusFromSearchAndSetOnItem
+  };
+}
+var ensureSafeIndex = function ensureSafeIndex(index, listSize) {
+  if (index < 0) {
+    return 0;
+  }
+  if (index > listSize) {
+    return listSize;
+  }
+  return index;
+};
+exports.ensureSafeIndex = ensureSafeIndex;
+var _default = useSelectAndFocusOnArrowNavigation;
+exports.default = _default;

package/dist/cjs/element-browser/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ELEMENT_ITEM_HEIGHT", {
+  enumerable: true,
+  get: function get() {
+    return _constants.ELEMENT_ITEM_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "ElementBrowser", {
+  enumerable: true,
+  get: function get() {
+    return _ElementBrowserLoader.default;
+  }
+});
+var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
+var _constants = require("./constants");

package/dist/cjs/element-browser/types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modes = void 0;
+var Modes = /*#__PURE__*/function (Modes) {
+  Modes["full"] = "full";
+  Modes["inline"] = "inline";
+  return Modes;
+}({});
+exports.Modes = Modes;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.57.0";
+var packageVersion = "74.58.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.57.0";
+var packageVersion = "74.58.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/utils/performance/measure-render.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDistortedDurationMonitor = getDistortedDurationMonitor;
+exports.getDistortedDurationMonitor = void 0;
 exports.measureRender = measureRender;
 var _isPerformanceApiAvailable = require("./is-performance-api-available");
 /**
@@ -11,7 +11,7 @@ var _isPerformanceApiAvailable = require("./is-performance-api-available");
  * distorted duration measurements (where the measurement uses the
  * requestAnimationFrame api).
  */
-function getDistortedDurationMonitor() {
+var getDistortedDurationMonitor = function getDistortedDurationMonitor() {
   if (typeof document === 'undefined') {
     return {
       distortedDuration: false,
@@ -43,7 +43,7 @@ function getDistortedDurationMonitor() {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
     }
   };
-}
+};
 
 /**
  * Measures time it takes to render a frame including -> style, paint, layout and composition.
@@ -58,6 +58,7 @@ function getDistortedDurationMonitor() {
  * | javascript (framework)           | style | layout | paint | composite | javascript  | ...
  *  | startMark + scheduling rAF |                                                       | rAF callback, endMark
  */
+exports.getDistortedDurationMonitor = getDistortedDurationMonitor;
 function measureRender(
 /**
  * Unique name for the measurement

package/dist/cjs/utils/performance/measure-tti.js

@@ -8,6 +8,7 @@ exports.getTTISeverity = getTTISeverity;
 exports.measureTTI = measureTTI;
 var _analytics = require("../analytics");
 var _isPerformanceApiAvailable = require("./is-performance-api-available");
+var _measureRender = require("./measure-render");
 function measureTTI(onMeasureComplete) {
   var idleThreshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1000;
   var cancelAfter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 60;
@@ -18,6 +19,8 @@ function measureTTI(onMeasureComplete) {
     return;
   }
   var start = performance.now();
+  // Keeping track of users moving away from the tab, which distorts the TTI measurement
+  var distortedDurationMonitor = (0, _measureRender.getDistortedDurationMonitor)();
   var prevLongTask;
   var lastLongTask = {
     startTime: start,
@@ -48,13 +51,16 @@ function measureTTI(onMeasureComplete) {
     var canceled = elapsedTimeMs > cancelAfterMs;
     if (!prevLongTask) {
       observer.disconnect();
-      return onMeasureComplete(prevEnd, 0, false);
+      distortedDurationMonitor.cleanup();
+      return onMeasureComplete(prevEnd, 0, false, distortedDurationMonitor.distortedDuration);
     } else if (lastLongTask.startTime - prevEnd >= idleThreshold) {
       observer.disconnect();
-      return onMeasureComplete(prevEnd, prevEnd - start, canceled);
+      distortedDurationMonitor.cleanup();
+      return onMeasureComplete(prevEnd, prevEnd - start, canceled, distortedDurationMonitor.distortedDuration);
     } else if (now - lastEnd >= idleThreshold || canceled) {
       observer.disconnect();
-      return onMeasureComplete(lastEnd, lastEnd - start, canceled);
+      distortedDurationMonitor.cleanup();
+      return onMeasureComplete(lastEnd, lastEnd - start, canceled, distortedDurationMonitor.distortedDuration);
     }
     return setTimeout(checkIdle, idleThreshold);
   };

package/dist/es2019/element-browser/ElementBrowser.js

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import StatelessElementBrowser from './components/StatelessElementBrowser';
+export default class ElementBrowser extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      categories: [],
+      items: [],
+      searchTerm: '',
+      selectedCategory: this.props.defaultCategory
+    });
+    _defineProperty(this, "getCategories", (items = this.fetchItems()) =>
+    // NOTE: we fetch all items to determine available categories.
+    this.filterCategories(items, this.props.categories));
+    _defineProperty(this, "filterCategories", (items, categories = []) => {
+      const {
+        showCategories
+      } = this.props;
+      if (!showCategories) {
+        return [];
+      }
+      return categories.filter(category => category.name === 'all' || items.some(item => (item.categories || []).includes(category.name)));
+    });
+    _defineProperty(this, "fetchItems", (query, category) => {
+      return this.props.getItems(query, category);
+    });
+    _defineProperty(this, "handleSearch", searchTerm => {
+      const {
+        defaultCategory
+      } = this.props;
+      this.setState({
+        searchTerm,
+        selectedCategory: defaultCategory
+      });
+    });
+    _defineProperty(this, "handleCategorySelection", clickedCategory => {
+      const {
+        selectedCategory: stateCategoryValue
+      } = this.state;
+
+      /**
+       * Reset selection if clicked on the same category twice.
+       */
+      if (stateCategoryValue === clickedCategory.name) {
+        return this.setState({
+          selectedCategory: this.props.defaultCategory
+        });
+      }
+      this.setState({
+        selectedCategory: clickedCategory.name,
+        searchTerm: ''
+      });
+    });
+  }
+  componentDidMount() {
+    const items = this.fetchItems();
+    this.setState({
+      items,
+      categories: this.getCategories(items)
+    });
+  }
+  componentDidUpdate(prevProps, prevState) {
+    const {
+      searchTerm,
+      selectedCategory
+    } = this.state;
+
+    // Update both items and categories when there's a new getItems
+    if (this.props.getItems !== prevProps.getItems) {
+      this.setState({
+        categories: this.getCategories(),
+        items: this.fetchItems(searchTerm, selectedCategory)
+      });
+    } else if (searchTerm !== prevState.searchTerm || selectedCategory !== prevState.selectedCategory) {
+      this.setState({
+        items: this.fetchItems(searchTerm, selectedCategory)
+      });
+    }
+  }
+  render() {
+    const {
+      onInsertItem,
+      onSelectItem,
+      showSearch,
+      showCategories,
+      mode,
+      emptyStateHandler,
+      viewMoreItem
+    } = this.props;
+    const {
+      categories,
+      searchTerm,
+      selectedCategory,
+      items
+    } = this.state;
+    return /*#__PURE__*/React.createElement(StatelessElementBrowser, {
+      items: items,
+      categories: categories,
+      onSearch: this.handleSearch,
+      onSelectCategory: this.handleCategorySelection,
+      onSelectItem: onSelectItem,
+      onInsertItem: onInsertItem,
+      selectedCategory: selectedCategory,
+      showSearch: showSearch,
+      showCategories: showCategories,
+      mode: mode,
+      searchTerm: searchTerm,
+      emptyStateHandler: emptyStateHandler,
+      viewMoreItem: viewMoreItem
+    });
+  }
+}
+_defineProperty(ElementBrowser, "defaultProps", {
+  defaultCategory: 'all',
+  onInsertItem: () => {}
+});