@atlaskit/editor-core 187.40.2 → 187.41.0

package/dist/cjs/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -1,269 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-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 _reactIntlNext = require("react-intl-next");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _ElementList = _interopRequireDefault(require("./ElementList/ElementList"));
-var _CategoryList = _interopRequireDefault(require("./CategoryList"));
-var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));
-var _constants = require("../constants");
-var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container-width"));
-var _useSelectAndFocusOnArrowNavigation = _interopRequireDefault(require("../hooks/use-select-and-focus-on-arrow-navigation"));
-var _ViewMore = require("../ViewMore");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-/** @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; }
-var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
-var baseBrowserContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
-var mobileElementBrowserContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
-var elementBrowserContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
-var baseSidebarStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
-var mobileSideBarShowCategories = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
-var sideBar = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
-var sideBarShowCategories = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, _constants.SIDEBAR_WIDTH);
-var sidebarHeading = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), _constants.SIDEBAR_HEADING_WRAPPER_HEIGHT, _constants.SIDEBAR_HEADING_PADDING_LEFT);
-var mobileMainContent = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
-var mainContent = (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, _constants.GRID_SIZE * 2);
-var searchContainer = (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: ", "px;\n"])), _constants.GRID_SIZE * 2);
-var mobileCategoryListWrapper = (0, _react2.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), _constants.GRID_SIZE, _constants.GRID_SIZE * 2, _constants.GRID_SIZE * 4);
-var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, _constants.GRID_SIZE * 3);
-function StatelessElementBrowser(props) {
-  var items = props.items,
-    onSelectItem = props.onSelectItem,
-    onInsertItem = props.onInsertItem,
-    viewMoreItem = props.viewMoreItem;
-  var _useContainerWidth = (0, _useContainerWidth2.default)(),
-    containerWidth = _useContainerWidth.containerWidth,
-    ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
-  var _useState = (0, _react.useState)(1),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    columnCount = _useState2[0],
-    setColumnCount = _useState2[1];
-  var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, !!viewMoreItem),
-    selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
-    focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
-    setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
-    focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
-    focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
-    onKeyDown = _useSelectAndFocusOnA.onKeyDown,
-    setFocusOnSearch = _useSelectAndFocusOnA.setFocusOnSearch;
-  (0, _react.useEffect)(function () {
-    (0, _analytics.fireAnalyticsEvent)(props.createAnalyticsEvent)({
-      payload: {
-        action: _analytics.ACTION.OPENED,
-        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT_BROWSER,
-        eventType: _analytics.EVENT_TYPE.UI,
-        attributes: {
-          mode: props.mode
-        }
-      }
-    });
-    return function () {
-      (0, _analytics.fireAnalyticsEvent)(props.createAnalyticsEvent)({
-        payload: {
-          action: _analytics.ACTION.CLOSED,
-          actionSubject: _analytics.ACTION_SUBJECT.ELEMENT_BROWSER,
-          eventType: _analytics.EVENT_TYPE.UI,
-          attributes: {
-            mode: props.mode
-          }
-        }
-      });
-    };
-  }, [props.createAnalyticsEvent, props.mode]);
-
-  /* Only for hitting enter to select item when focused on search bar,
-   * The actual enter key press is handled on individual items level.
-   */
-  var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
-  var onItemsEnterKeyPress = (0, _react.useCallback)(function (e) {
-    if (e.key !== 'Enter') {
-      return;
-    }
-    if (onInsertItem && selectedItem != null) {
-      onInsertItem(selectedItem);
-    }
-    e.preventDefault();
-  }, [onInsertItem, selectedItem]);
-
-  /**
-   * On arrow key selection and clicks the selectedItemIndex will change.
-   * Making sure to update parent component.
-   */
-  (0, _react.useEffect)(function () {
-    if (onSelectItem && selectedItem != null) {
-      onSelectItem(selectedItem);
-    }
-  }, [onSelectItem, selectedItem]);
-  return (0, _react2.jsx)("div", {
-    css: wrapper,
-    "data-testid": "element-browser"
-  }, (0, _react2.jsx)(ContainerWidthMonitor, null), containerWidth < _constants.DEVICE_BREAKPOINT_NUMBERS.medium ? (0, _react2.jsx)(MobileBrowser, (0, _extends2.default)({}, props, {
-    selectedItemIndex: selectedItemIndex,
-    focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: setFocusedItemIndex,
-    focusOnSearch: focusOnSearch,
-    setColumnCount: setColumnCount,
-    setFocusOnSearch: setFocusOnSearch,
-    onKeyPress: onItemsEnterKeyPress,
-    onKeyDown: onKeyDown,
-    viewMoreItem: viewMoreItem,
-    focusOnViewMore: focusOnViewMore
-  })) : (0, _react2.jsx)(DesktopBrowser, (0, _extends2.default)({}, props, {
-    selectedItemIndex: selectedItemIndex,
-    focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: setFocusedItemIndex,
-    focusOnSearch: focusOnSearch,
-    setColumnCount: setColumnCount,
-    setFocusOnSearch: setFocusOnSearch,
-    onKeyPress: onItemsEnterKeyPress,
-    onKeyDown: onKeyDown
-  })));
-}
-function MobileBrowser(_ref) {
-  var showCategories = _ref.showCategories,
-    showSearch = _ref.showSearch,
-    onSearch = _ref.onSearch,
-    mode = _ref.mode,
-    categories = _ref.categories,
-    onSelectCategory = _ref.onSelectCategory,
-    items = _ref.items,
-    onInsertItem = _ref.onInsertItem,
-    selectedCategory = _ref.selectedCategory,
-    selectedItemIndex = _ref.selectedItemIndex,
-    focusedItemIndex = _ref.focusedItemIndex,
-    setFocusedItemIndex = _ref.setFocusedItemIndex,
-    focusOnSearch = _ref.focusOnSearch,
-    focusOnViewMore = _ref.focusOnViewMore,
-    setColumnCount = _ref.setColumnCount,
-    setFocusOnSearch = _ref.setFocusOnSearch,
-    onKeyPress = _ref.onKeyPress,
-    onKeyDown = _ref.onKeyDown,
-    searchTerm = _ref.searchTerm,
-    createAnalyticsEvent = _ref.createAnalyticsEvent,
-    emptyStateHandler = _ref.emptyStateHandler,
-    viewMoreItem = _ref.viewMoreItem;
-  return (0, _react2.jsx)("div", {
-    css: mobileElementBrowserContainer,
-    onKeyDown: onKeyDown,
-    "data-testid": "mobile__element-browser"
-  }, (0, _react2.jsx)("div", {
-    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
-  }, showSearch && (0, _react2.jsx)(_ElementSearch.default, {
-    onSearch: onSearch,
-    onKeyDown: onKeyPress,
-    mode: mode,
-    focus: focusOnSearch,
-    onClick: setFocusOnSearch,
-    searchTerm: searchTerm
-  }), showCategories && (0, _react2.jsx)("nav", {
-    css: mobileCategoryListWrapper,
-    tabIndex: -1
-  }, (0, _react2.jsx)(_CategoryList.default, {
-    categories: categories,
-    onSelectCategory: onSelectCategory,
-    selectedCategory: selectedCategory
-  }))), (0, _react2.jsx)("div", {
-    css: mobileMainContent
-  }, (0, _react2.jsx)(_ElementList.default, {
-    items: items,
-    mode: mode,
-    onInsertItem: onInsertItem,
-    selectedItemIndex: selectedItemIndex,
-    focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: setFocusedItemIndex,
-    setColumnCount: setColumnCount,
-    createAnalyticsEvent: createAnalyticsEvent,
-    emptyStateHandler: emptyStateHandler,
-    selectedCategory: selectedCategory,
-    searchTerm: searchTerm
-  })), viewMoreItem && (0, _react2.jsx)(_ViewMore.ViewMore, {
-    item: viewMoreItem,
-    focus: focusOnViewMore
-  }));
-}
-function DesktopBrowser(_ref2) {
-  var showCategories = _ref2.showCategories,
-    showSearch = _ref2.showSearch,
-    onSearch = _ref2.onSearch,
-    mode = _ref2.mode,
-    categories = _ref2.categories,
-    onSelectCategory = _ref2.onSelectCategory,
-    items = _ref2.items,
-    onInsertItem = _ref2.onInsertItem,
-    selectedCategory = _ref2.selectedCategory,
-    selectedItemIndex = _ref2.selectedItemIndex,
-    focusedItemIndex = _ref2.focusedItemIndex,
-    setFocusedItemIndex = _ref2.setFocusedItemIndex,
-    focusOnSearch = _ref2.focusOnSearch,
-    setColumnCount = _ref2.setColumnCount,
-    setFocusOnSearch = _ref2.setFocusOnSearch,
-    onKeyPress = _ref2.onKeyPress,
-    onKeyDown = _ref2.onKeyDown,
-    searchTerm = _ref2.searchTerm,
-    createAnalyticsEvent = _ref2.createAnalyticsEvent,
-    emptyStateHandler = _ref2.emptyStateHandler;
-  return (0, _react2.jsx)("div", {
-    css: elementBrowserContainer,
-    "data-testid": "desktop__element-browser"
-  }, showCategories && (0, _react2.jsx)("div", {
-    css: showCategories ? sideBarShowCategories : sideBar
-  }, (0, _react2.jsx)("h2", {
-    css: sidebarHeading,
-    "data-testid": "sidebar-heading"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
-    id: "fabric.editor.elementbrowser.sidebar.heading",
-    defaultMessage: "Browse",
-    description: "Sidebar heading"
-  })), (0, _react2.jsx)("nav", {
-    css: categoryListWrapper
-  }, (0, _react2.jsx)(_CategoryList.default, {
-    categories: categories,
-    onSelectCategory: onSelectCategory,
-    selectedCategory: selectedCategory,
-    createAnalyticsEvent: createAnalyticsEvent
-  }))), (0, _react2.jsx)("div", {
-    css: mainContent,
-    onKeyDown: onKeyDown,
-    "data-testid": "main-content"
-  }, showSearch && (0, _react2.jsx)("div", {
-    css: searchContainer
-  }, (0, _react2.jsx)(_ElementSearch.default, {
-    onSearch: onSearch,
-    onKeyDown: onKeyPress,
-    mode: mode,
-    focus: focusOnSearch,
-    onClick: setFocusOnSearch,
-    searchTerm: searchTerm
-  })), (0, _react2.jsx)(_ElementList.default, {
-    items: items,
-    mode: mode,
-    onInsertItem: onInsertItem,
-    selectedItemIndex: selectedItemIndex,
-    focusedItemIndex: focusedItemIndex,
-    setFocusedItemIndex: setFocusedItemIndex,
-    setColumnCount: setColumnCount,
-    createAnalyticsEvent: createAnalyticsEvent,
-    emptyStateHandler: emptyStateHandler,
-    selectedCategory: selectedCategory,
-    searchTerm: searchTerm
-  })));
-}
-var MemoizedElementBrowser = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
-  source: 'ElementBrowser'
-})((0, _analyticsNext.withAnalyticsEvents)()(StatelessElementBrowser)));
-var _default = MemoizedElementBrowser;
-exports.default = _default;

package/dist/cjs/ui/ElementBrowser/constants.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.MODAL_WRAPPER_PADDING = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
-var _constants = require("@atlaskit/theme/constants");
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
-// TODO: Migrate away from gridSize
-// Recommendation: Replace gridSize with 8
-var GRID_SIZE = (0, _constants.gridSize)();
-exports.GRID_SIZE = GRID_SIZE;
-var DEVICE_BREAKPOINT_NUMBERS = {
-  small: GRID_SIZE * 40,
-  medium: GRID_SIZE * 75,
-  large: GRID_SIZE * 128
-};
-exports.DEVICE_BREAKPOINT_NUMBERS = DEVICE_BREAKPOINT_NUMBERS;
-var FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = {
-  small: GRID_SIZE * 50,
-  medium: DEVICE_BREAKPOINT_NUMBERS.medium,
-  large: DEVICE_BREAKPOINT_NUMBERS.large
-};
-exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS;
-var SIDEBAR_WIDTH = "".concat(GRID_SIZE * 25, "px");
-exports.SIDEBAR_WIDTH = SIDEBAR_WIDTH;
-var SIDEBAR_HEADING_WRAPPER_HEIGHT = "".concat(GRID_SIZE * 6, "px");
-exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = SIDEBAR_HEADING_WRAPPER_HEIGHT;
-var SIDEBAR_HEADING_PADDING_LEFT = '12px';
-exports.SIDEBAR_HEADING_PADDING_LEFT = SIDEBAR_HEADING_PADDING_LEFT;
-var INLINE_SIDEBAR_HEIGHT = '54px';
-exports.INLINE_SIDEBAR_HEIGHT = INLINE_SIDEBAR_HEIGHT;
-var SEARCH_ITEM_HEIGHT_WIDTH = '20px';
-exports.SEARCH_ITEM_HEIGHT_WIDTH = SEARCH_ITEM_HEIGHT_WIDTH;
-var SCROLLBAR_WIDTH = 15;
-exports.SCROLLBAR_WIDTH = SCROLLBAR_WIDTH;
-var ELEMENT_LIST_PADDING = 2;
-exports.ELEMENT_LIST_PADDING = ELEMENT_LIST_PADDING;
-var MODAL_WRAPPER_PADDING = 16;
-exports.MODAL_WRAPPER_PADDING = MODAL_WRAPPER_PADDING;
-var ELEMENT_ITEM_HEIGHT = 75;
-exports.ELEMENT_ITEM_HEIGHT = ELEMENT_ITEM_HEIGHT;

package/dist/cjs/ui/ElementBrowser/hooks/use-container-width.js

@@ -1,70 +0,0 @@
-"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/ui/ElementBrowser/hooks/use-focus.js

@@ -1,51 +0,0 @@
-"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;
-}