@webiny/lexical-editor 5.44.1-beta.1 → 5.45.0-beta.0

package/ui/DropDown.js

@@ -1,16 +1,3 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropDown = DropDown;
-exports.DropDownItem = DropDownItem;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -19,22 +6,28 @@ var React = _react;
  *
  */
 
-var DropDownContext = /*#__PURE__*/React.createContext(null);
-function DropDownItem(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    onClick = _ref.onClick,
-    title = _ref.title;
-  var ref = (0, _react.useRef)(null);
-  var dropDownContext = React.useContext(DropDownContext);
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const DropDownContext = /*#__PURE__*/React.createContext(null);
+export function DropDownItem({
+  children,
+  className,
+  onClick,
+  title
+}) {
+  const ref = useRef(null);
+  const dropDownContext = React.useContext(DropDownContext);
   if (dropDownContext === null) {
     throw new Error("DropDownItem must be used within a DropDown");
   }
-  var registerItem = dropDownContext.registerItem;
-  (0, _react.useEffect)(function () {
-    if (ref && ref.current) {
-      registerItem(ref);
+  const {
+    registerItem
+  } = dropDownContext;
+  useEffect(() => {
+    if (!ref.current) {
+      return;
     }
+    registerItem(ref);
   }, [ref, registerItem]);
   return /*#__PURE__*/React.createElement("button", {
     className: className,
@@ -44,45 +37,37 @@ function DropDownItem(_ref) {
     type: "button"
   }, children);
 }
-function DropDownItems(_ref2) {
-  var children = _ref2.children,
-    dropDownRef = _ref2.dropDownRef,
-    _ref2$showScroll = _ref2.showScroll,
-    showScroll = _ref2$showScroll === void 0 ? true : _ref2$showScroll,
-    onClose = _ref2.onClose;
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    highlightedItem = _useState4[0],
-    setHighlightedItem = _useState4[1];
-  var registerItem = (0, _react.useCallback)(function (itemRef) {
-    setItems(function (prev) {
-      return prev ? [].concat((0, _toConsumableArray2.default)(prev), [itemRef]) : [itemRef];
-    });
+function DropDownItems({
+  children,
+  dropDownRef,
+  showScroll = true,
+  onClose
+}) {
+  const [items, setItems] = useState();
+  const [highlightedItem, setHighlightedItem] = useState();
+  const registerItem = useCallback(itemRef => {
+    setItems(prev => prev ? [...prev, itemRef] : [itemRef]);
   }, [setItems]);
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (!items) {
       return;
     }
-    var key = event.key;
+    const key = event.key;
     if (["Escape", "ArrowUp", "ArrowDown", "Tab"].includes(key)) {
       event.preventDefault();
     }
     if (key === "Escape" || key === "Tab") {
       onClose();
     } else if (key === "ArrowUp") {
-      setHighlightedItem(function (prev) {
+      setHighlightedItem(prev => {
         if (!prev) {
           return items[0];
         }
-        var index = items.indexOf(prev) - 1;
+        const index = items.indexOf(prev) - 1;
         return items[index === -1 ? items.length - 1 : index];
       });
     } else if (key === "ArrowDown") {
-      setHighlightedItem(function (prev) {
+      setHighlightedItem(prev => {
         if (!prev) {
           return items[0];
         }
@@ -90,12 +75,10 @@ function DropDownItems(_ref2) {
       });
     }
   };
-  var contextValue = (0, _react.useMemo)(function () {
-    return {
-      registerItem: registerItem
-    };
-  }, [registerItem]);
-  (0, _react.useEffect)(function () {
+  const contextValue = useMemo(() => ({
+    registerItem
+  }), [registerItem]);
+  useEffect(() => {
     if (items && !highlightedItem) {
       setHighlightedItem(items[0]);
     }
@@ -106,54 +89,47 @@ function DropDownItems(_ref2) {
   return /*#__PURE__*/React.createElement(DropDownContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", {
-    className: "lexical-dropdown ".concat(showScroll ? "" : "no-scroll"),
+    className: `lexical-dropdown ${showScroll ? "" : "no-scroll"}`,
     ref: dropDownRef,
     onKeyDown: handleKeyDown
   }, children));
 }
-function DropDown(_ref3) {
-  var _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-    buttonLabel = _ref3.buttonLabel,
-    buttonAriaLabel = _ref3.buttonAriaLabel,
-    buttonClassName = _ref3.buttonClassName,
-    buttonIconClassName = _ref3.buttonIconClassName,
-    children = _ref3.children,
-    stopCloseOnClickSelf = _ref3.stopCloseOnClickSelf,
-    _ref3$showScroll = _ref3.showScroll,
-    showScroll = _ref3$showScroll === void 0 ? true : _ref3$showScroll;
-  var dropDownRef = (0, _react.useRef)(null);
-  var buttonRef = (0, _react.useRef)(null);
+export function DropDown({
+  disabled = false,
+  buttonLabel,
+  buttonAriaLabel,
+  buttonClassName,
+  buttonIconClassName,
+  children,
+  stopCloseOnClickSelf,
+  showScroll = true
+}) {
+  const dropDownRef = useRef(null);
+  const buttonRef = useRef(null);
   // Used to prevent flickering of the dropdown while calculating the dropdown position.
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    positionIsCalculated = _useState6[0],
-    setPositionIsCalculated = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    showDropDown = _useState8[0],
-    setShowDropDown = _useState8[1];
-  var handleClose = function handleClose() {
+  const [positionIsCalculated, setPositionIsCalculated] = useState(false);
+  const [showDropDown, setShowDropDown] = useState(false);
+  const handleClose = () => {
     setPositionIsCalculated(false);
     setShowDropDown(false);
     if (buttonRef && buttonRef.current) {
       buttonRef.current.focus();
     }
   };
-  (0, _react.useEffect)(function () {
-    var button = buttonRef.current;
-    var dropDown = dropDownRef.current;
+  useEffect(() => {
+    const button = buttonRef.current;
+    const dropDown = dropDownRef.current;
     if (showDropDown && button && dropDown) {
       dropDown.style.top = "44px";
-      dropDown.style.left = "".concat(button.offsetLeft, "px");
+      dropDown.style.left = `${button.offsetLeft}px`;
       setPositionIsCalculated(true);
     }
   }, [dropDownRef, buttonRef, showDropDown]);
-  (0, _react.useEffect)(function () {
-    var button = buttonRef.current;
+  useEffect(() => {
+    const button = buttonRef.current;
     if (button && showDropDown) {
-      var handle = function handle(event) {
-        var target = event.target;
+      const handle = event => {
+        const target = event.target;
         if (stopCloseOnClickSelf) {
           if (dropDownRef.current && dropDownRef.current.contains(target)) {
             return;
@@ -164,13 +140,13 @@ function DropDown(_ref3) {
         }
       };
       document.addEventListener("click", handle);
-      return function () {
+      return () => {
         document.removeEventListener("click", handle);
       };
     }
     return;
   }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
-  var displayContainer = (0, _react.useMemo)(function () {
+  const displayContainer = useMemo(() => {
     // To prevent blinking, we show the container only when the dropdown position is calculated.
     // Without this, window would be visible first on left (0px), and after a millisecond on the right side.
     return positionIsCalculated ? {
@@ -186,9 +162,7 @@ function DropDown(_ref3) {
     disabled: disabled,
     "aria-label": buttonAriaLabel || buttonLabel,
     className: buttonClassName,
-    onClick: function onClick() {
-      return setShowDropDown(!showDropDown);
-    },
+    onClick: () => setShowDropDown(!showDropDown),
     ref: buttonRef
   }, buttonIconClassName && /*#__PURE__*/React.createElement("span", {
     className: buttonIconClassName

package/ui/DropDown.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","React","DropDownContext","createContext","DropDownItem","_ref","children","className","onClick","title","ref","useRef","dropDownContext","useContext","Error","registerItem","useEffect","current","createElement","type","DropDownItems","_ref2","dropDownRef","_ref2$showScroll","showScroll","onClose","_useState","useState","_useState2","_slicedToArray2","default","items","setItems","_useState3","_useState4","highlightedItem","setHighlightedItem","useCallback","itemRef","prev","concat","_toConsumableArray2","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","useMemo","focus","Provider","value","onKeyDown","DropDown","_ref3","_ref3$disabled","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","_ref3$showScroll","buttonRef","_useState5","_useState6","positionIsCalculated","setPositionIsCalculated","_useState7","_useState8","showDropDown","setShowDropDown","handleClose","button","dropDown","style","top","left","offsetLeft","handle","target","contains","document","addEventListener","removeEventListener","displayContainer","display","Fragment","position"],"sources":["DropDown.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport * as React from \"react\";\n\ntype DropDownContextType = {\n    registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;\n};\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null);\n\nexport function DropDownItem({\n    children,\n    className,\n    onClick,\n    title\n}: {\n    children: React.ReactNode;\n    className: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n}) {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const dropDownContext = React.useContext(DropDownContext);\n\n    if (dropDownContext === null) {\n        throw new Error(\"DropDownItem must be used within a DropDown\");\n    }\n\n    const { registerItem } = dropDownContext;\n\n    useEffect(() => {\n        if (ref && ref.current) {\n            registerItem(ref);\n        }\n    }, [ref, registerItem]);\n\n    return (\n        <button className={className} onClick={onClick} ref={ref} title={title} type=\"button\">\n            {children}\n        </button>\n    );\n}\n\nfunction DropDownItems({\n    children,\n    dropDownRef,\n    showScroll = true,\n    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\n    showScroll?: boolean;\n    onClose: () => void;\n}) {\n    const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();\n    const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();\n\n    const registerItem = useCallback(\n        (itemRef: React.RefObject<HTMLButtonElement>) => {\n            setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));\n        },\n        [setItems]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!items) {\n            return;\n        }\n\n        const key = event.key;\n\n        if ([\"Escape\", \"ArrowUp\", \"ArrowDown\", \"Tab\"].includes(key)) {\n            event.preventDefault();\n        }\n\n        if (key === \"Escape\" || key === \"Tab\") {\n            onClose();\n        } else if (key === \"ArrowUp\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                const index = items.indexOf(prev) - 1;\n                return items[index === -1 ? items.length - 1 : index];\n            });\n        } else if (key === \"ArrowDown\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                return items[items.indexOf(prev) + 1];\n            });\n        }\n    };\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem\n        }),\n        [registerItem]\n    );\n\n    useEffect(() => {\n        if (items && !highlightedItem) {\n            setHighlightedItem(items[0]);\n        }\n\n        if (highlightedItem && highlightedItem.current) {\n            highlightedItem.current.focus();\n        }\n    }, [items, highlightedItem]);\n\n    return (\n        <DropDownContext.Provider value={contextValue}>\n            <div\n                className={`lexical-dropdown ${showScroll ? \"\" : \"no-scroll\"}`}\n                ref={dropDownRef}\n                onKeyDown={handleKeyDown}\n            >\n                {children}\n            </div>\n        </DropDownContext.Provider>\n    );\n}\n\nexport function DropDown({\n    disabled = false,\n    buttonLabel,\n    buttonAriaLabel,\n    buttonClassName,\n    buttonIconClassName,\n    children,\n    stopCloseOnClickSelf,\n    showScroll = true\n}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: boolean;\n    showScroll?: boolean;\n}): JSX.Element {\n    const dropDownRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    // Used to prevent flickering of the dropdown while calculating the dropdown position.\n    const [positionIsCalculated, setPositionIsCalculated] = useState(false);\n    const [showDropDown, setShowDropDown] = useState(false);\n\n    const handleClose = () => {\n        setPositionIsCalculated(false);\n        setShowDropDown(false);\n        if (buttonRef && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    };\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        const dropDown = dropDownRef.current;\n\n        if (showDropDown && button && dropDown) {\n            dropDown.style.top = \"44px\";\n            dropDown.style.left = `${button.offsetLeft}px`;\n            setPositionIsCalculated(true);\n        }\n    }, [dropDownRef, buttonRef, showDropDown]);\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        if (button && showDropDown) {\n            const handle = (event: MouseEvent) => {\n                const target = event.target;\n                if (stopCloseOnClickSelf) {\n                    if (dropDownRef.current && dropDownRef.current.contains(target as Node)) {\n                        return;\n                    }\n                }\n\n                if (!button.contains(target as Node)) {\n                    setShowDropDown(false);\n                }\n            };\n            document.addEventListener(\"click\", handle);\n            return () => {\n                document.removeEventListener(\"click\", handle);\n            };\n        }\n        return;\n    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);\n\n    const displayContainer = useMemo(() => {\n        // To prevent blinking, we show the container only when the dropdown position is calculated.\n        // Without this, window would be visible first on left (0px), and after a millisecond on the right side.\n        return positionIsCalculated ? { display: \"block\" } : { display: \"none\" };\n    }, [positionIsCalculated]);\n\n    return (\n        <>\n            <button\n                style={{ position: \"relative\" }}\n                disabled={disabled}\n                aria-label={buttonAriaLabel || buttonLabel}\n                className={buttonClassName}\n                onClick={() => setShowDropDown(!showDropDown)}\n                ref={buttonRef}\n            >\n                {buttonIconClassName && <span className={buttonIconClassName} />}\n                {buttonLabel && <span className=\"text dropdown-button-text\">{buttonLabel}</span>}\n                <i className=\"chevron-down\" />\n            </button>\n            {showDropDown && (\n                <div className={\"lexical-dropdown-container\"} style={displayContainer}>\n                    <DropDownItems\n                        showScroll={showScroll}\n                        dropDownRef={dropDownRef}\n                        onClose={handleClose}\n                    >\n                        {children}\n                    </DropDownItems>\n                </div>\n            )}\n        </>\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useRef","useState","DropDownContext","createContext","DropDownItem","children","className","onClick","title","ref","dropDownContext","useContext","Error","registerItem","current","createElement","type","DropDownItems","dropDownRef","showScroll","onClose","items","setItems","highlightedItem","setHighlightedItem","itemRef","prev","handleKeyDown","event","key","includes","preventDefault","index","indexOf","length","contextValue","focus","Provider","value","onKeyDown","DropDown","disabled","buttonLabel","buttonAriaLabel","buttonClassName","buttonIconClassName","stopCloseOnClickSelf","buttonRef","positionIsCalculated","setPositionIsCalculated","showDropDown","setShowDropDown","handleClose","button","dropDown","style","top","left","offsetLeft","handle","target","contains","document","addEventListener","removeEventListener","displayContainer","display","Fragment","position"],"sources":["DropDown.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport type { ReactNode, RefObject } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\ntype DropDownContextType = {\n    registerItem: (ref: React.RefObject<HTMLButtonElement>) => void;\n};\n\nconst DropDownContext = React.createContext<DropDownContextType | null>(null);\n\nexport function DropDownItem({\n    children,\n    className,\n    onClick,\n    title\n}: {\n    children: React.ReactNode;\n    className: string;\n    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    title?: string;\n}) {\n    const ref = useRef<HTMLButtonElement>(null);\n\n    const dropDownContext = React.useContext(DropDownContext);\n\n    if (dropDownContext === null) {\n        throw new Error(\"DropDownItem must be used within a DropDown\");\n    }\n\n    const { registerItem } = dropDownContext;\n\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        registerItem(ref as RefObject<HTMLButtonElement>);\n    }, [ref, registerItem]);\n\n    return (\n        <button className={className} onClick={onClick} ref={ref} title={title} type=\"button\">\n            {children}\n        </button>\n    );\n}\n\nfunction DropDownItems({\n    children,\n    dropDownRef,\n    showScroll = true,\n    onClose\n}: {\n    children: React.ReactNode;\n    dropDownRef?: React.Ref<HTMLDivElement>;\n    showScroll?: boolean;\n    onClose: () => void;\n}) {\n    const [items, setItems] = useState<React.RefObject<HTMLButtonElement>[]>();\n    const [highlightedItem, setHighlightedItem] = useState<React.RefObject<HTMLButtonElement>>();\n\n    const registerItem = useCallback(\n        (itemRef: React.RefObject<HTMLButtonElement>) => {\n            setItems(prev => (prev ? [...prev, itemRef] : [itemRef]));\n        },\n        [setItems]\n    );\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!items) {\n            return;\n        }\n\n        const key = event.key;\n\n        if ([\"Escape\", \"ArrowUp\", \"ArrowDown\", \"Tab\"].includes(key)) {\n            event.preventDefault();\n        }\n\n        if (key === \"Escape\" || key === \"Tab\") {\n            onClose();\n        } else if (key === \"ArrowUp\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                const index = items.indexOf(prev) - 1;\n                return items[index === -1 ? items.length - 1 : index];\n            });\n        } else if (key === \"ArrowDown\") {\n            setHighlightedItem(prev => {\n                if (!prev) {\n                    return items[0];\n                }\n                return items[items.indexOf(prev) + 1];\n            });\n        }\n    };\n\n    const contextValue = useMemo(\n        () => ({\n            registerItem\n        }),\n        [registerItem]\n    );\n\n    useEffect(() => {\n        if (items && !highlightedItem) {\n            setHighlightedItem(items[0]);\n        }\n\n        if (highlightedItem && highlightedItem.current) {\n            highlightedItem.current.focus();\n        }\n    }, [items, highlightedItem]);\n\n    return (\n        <DropDownContext.Provider value={contextValue}>\n            <div\n                className={`lexical-dropdown ${showScroll ? \"\" : \"no-scroll\"}`}\n                ref={dropDownRef}\n                onKeyDown={handleKeyDown}\n            >\n                {children}\n            </div>\n        </DropDownContext.Provider>\n    );\n}\n\nexport function DropDown({\n    disabled = false,\n    buttonLabel,\n    buttonAriaLabel,\n    buttonClassName,\n    buttonIconClassName,\n    children,\n    stopCloseOnClickSelf,\n    showScroll = true\n}: {\n    disabled?: boolean;\n    buttonAriaLabel?: string;\n    buttonClassName: string;\n    buttonIconClassName?: string;\n    buttonLabel?: string;\n    children: ReactNode;\n    stopCloseOnClickSelf?: boolean;\n    showScroll?: boolean;\n}): JSX.Element {\n    const dropDownRef = useRef<HTMLDivElement>(null);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    // Used to prevent flickering of the dropdown while calculating the dropdown position.\n    const [positionIsCalculated, setPositionIsCalculated] = useState(false);\n    const [showDropDown, setShowDropDown] = useState(false);\n\n    const handleClose = () => {\n        setPositionIsCalculated(false);\n        setShowDropDown(false);\n        if (buttonRef && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    };\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        const dropDown = dropDownRef.current;\n\n        if (showDropDown && button && dropDown) {\n            dropDown.style.top = \"44px\";\n            dropDown.style.left = `${button.offsetLeft}px`;\n            setPositionIsCalculated(true);\n        }\n    }, [dropDownRef, buttonRef, showDropDown]);\n\n    useEffect(() => {\n        const button = buttonRef.current;\n        if (button && showDropDown) {\n            const handle = (event: MouseEvent) => {\n                const target = event.target;\n                if (stopCloseOnClickSelf) {\n                    if (dropDownRef.current && dropDownRef.current.contains(target as Node)) {\n                        return;\n                    }\n                }\n\n                if (!button.contains(target as Node)) {\n                    setShowDropDown(false);\n                }\n            };\n            document.addEventListener(\"click\", handle);\n            return () => {\n                document.removeEventListener(\"click\", handle);\n            };\n        }\n        return;\n    }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);\n\n    const displayContainer = useMemo(() => {\n        // To prevent blinking, we show the container only when the dropdown position is calculated.\n        // Without this, window would be visible first on left (0px), and after a millisecond on the right side.\n        return positionIsCalculated ? { display: \"block\" } : { display: \"none\" };\n    }, [positionIsCalculated]);\n\n    return (\n        <>\n            <button\n                style={{ position: \"relative\" }}\n                disabled={disabled}\n                aria-label={buttonAriaLabel || buttonLabel}\n                className={buttonClassName}\n                onClick={() => setShowDropDown(!showDropDown)}\n                ref={buttonRef}\n            >\n                {buttonIconClassName && <span className={buttonIconClassName} />}\n                {buttonLabel && <span className=\"text dropdown-button-text\">{buttonLabel}</span>}\n                <i className=\"chevron-down\" />\n            </button>\n            {showDropDown && (\n                <div className={\"lexical-dropdown-container\"} style={displayContainer}>\n                    <DropDownItems\n                        showScroll={showScroll}\n                        dropDownRef={dropDownRef}\n                        onClose={handleClose}\n                    >\n                        {children}\n                    </DropDownItems>\n                </div>\n            )}\n        </>\n    );\n}\n"],"mappings":"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","ignoreList":[]}

package/ui/ImageResizer.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { LexicalEditor } from "lexical";
 export declare function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled }: {
     editor: LexicalEditor;

package/ui/ImageResizer.js

@@ -1,12 +1,3 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageResizer = ImageResizer;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -15,31 +6,34 @@ var React = _react;
  *
  */
 
+import * as React from "react";
+import { useRef } from "react";
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
-var Direction = {
+const Direction = {
   east: 1 << 0,
   north: 1 << 3,
   south: 1 << 1,
   west: 1 << 2
 };
-function ImageResizer(_ref) {
-  var onResizeStart = _ref.onResizeStart,
-    onResizeEnd = _ref.onResizeEnd,
-    buttonRef = _ref.buttonRef,
-    imageRef = _ref.imageRef,
-    maxWidth = _ref.maxWidth,
-    editor = _ref.editor,
-    showCaption = _ref.showCaption,
-    setShowCaption = _ref.setShowCaption,
-    captionsEnabled = _ref.captionsEnabled;
-  var controlWrapperRef = (0, _react.useRef)(null);
-  var userSelect = (0, _react.useRef)({
+export function ImageResizer({
+  onResizeStart,
+  onResizeEnd,
+  buttonRef,
+  imageRef,
+  maxWidth,
+  editor,
+  showCaption,
+  setShowCaption,
+  captionsEnabled
+}) {
+  const controlWrapperRef = useRef(null);
+  const userSelect = useRef({
     priority: "",
     value: "default"
   });
-  var positioningRef = (0, _react.useRef)({
+  const positioningRef = useRef({
     currentHeight: 0,
     currentWidth: 0,
     direction: 0,
@@ -50,28 +44,28 @@ function ImageResizer(_ref) {
     startX: 0,
     startY: 0
   });
-  var editorRootElement = editor.getRootElement();
+  const editorRootElement = editor.getRootElement();
   // Find max width, accounting for editor padding.
-  var maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
-  var maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
-  var minWidth = 100;
-  var minHeight = 100;
-  var setStartCursor = function setStartCursor(direction) {
-    var ew = direction === Direction.east || direction === Direction.west;
-    var ns = direction === Direction.north || direction === Direction.south;
-    var nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
-    var cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+  const maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  const maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  const minWidth = 100;
+  const minHeight = 100;
+  const setStartCursor = direction => {
+    const ew = direction === Direction.east || direction === Direction.west;
+    const ns = direction === Direction.north || direction === Direction.south;
+    const nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
     if (editorRootElement !== null) {
-      editorRootElement.style.setProperty("cursor", "".concat(cursorDir, "-resize"), "important");
+      editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
     }
     if (document.body !== null) {
-      document.body.style.setProperty("cursor", "".concat(cursorDir, "-resize"), "important");
+      document.body.style.setProperty("cursor", `${cursorDir}-resize`, "important");
       userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
       userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
-      document.body.style.setProperty("-webkit-user-select", "none", "important");
+      document.body.style.setProperty("-webkit-user-select", `none`, "important");
     }
   };
-  var setEndCursor = function setEndCursor() {
+  const setEndCursor = () => {
     if (editorRootElement !== null) {
       editorRootElement.style.setProperty("cursor", "text");
     }
@@ -80,17 +74,18 @@ function ImageResizer(_ref) {
       document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
     }
   };
-  var handlePointerDown = function handlePointerDown(event, direction) {
+  const handlePointerDown = (event, direction) => {
     if (!editor.isEditable()) {
       return;
     }
-    var image = imageRef.current;
-    var controlWrapper = controlWrapperRef.current;
+    const image = imageRef.current;
+    const controlWrapper = controlWrapperRef.current;
     if (image !== null && controlWrapper !== null) {
-      var _image$getBoundingCli = image.getBoundingClientRect(),
-        width = _image$getBoundingCli.width,
-        height = _image$getBoundingCli.height;
-      var positioning = positioningRef.current;
+      const {
+        width,
+        height
+      } = image.getBoundingClientRect();
+      const positioning = positioningRef.current;
       positioning.startWidth = width;
       positioning.startHeight = height;
       positioning.ratio = width / height;
@@ -103,50 +98,50 @@ function ImageResizer(_ref) {
       setStartCursor(direction);
       onResizeStart();
       controlWrapper.classList.add("image-control-wrapper--resizing");
-      image.style.height = "".concat(height, "px");
-      image.style.width = "".concat(width, "px");
+      image.style.height = `${height}px`;
+      image.style.width = `${width}px`;
       document.addEventListener("pointermove", handlePointerMove);
-      document.addEventListener("pointerup", _handlePointerUp);
+      document.addEventListener("pointerup", handlePointerUp);
     }
   };
-  var handlePointerMove = function handlePointerMove(event) {
-    var image = imageRef.current;
-    var positioning = positioningRef.current;
-    var isHorizontal = positioning.direction & (Direction.east | Direction.west);
-    var isVertical = positioning.direction & (Direction.south | Direction.north);
+  const handlePointerMove = event => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    const isVertical = positioning.direction & (Direction.south | Direction.north);
     if (image !== null && positioning.isResizing) {
       // Corner cursor
       if (isHorizontal && isVertical) {
-        var diff = Math.floor(positioning.startX - event.clientX);
+        let diff = Math.floor(positioning.startX - event.clientX);
         diff = positioning.direction & Direction.east ? -diff : diff;
-        var width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
-        var height = width / positioning.ratio;
-        image.style.width = "".concat(width, "px");
-        image.style.height = "".concat(height, "px");
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        const height = width / positioning.ratio;
+        image.style.width = `${width}px`;
+        image.style.height = `${height}px`;
         positioning.currentHeight = height;
         positioning.currentWidth = width;
       } else if (isVertical) {
-        var _diff = Math.floor(positioning.startY - event.clientY);
-        _diff = positioning.direction & Direction.south ? -_diff : _diff;
-        var _height = clamp(positioning.startHeight + _diff, minHeight, maxHeightContainer);
-        image.style.height = "".concat(_height, "px");
-        positioning.currentHeight = _height;
+        let diff = Math.floor(positioning.startY - event.clientY);
+        diff = positioning.direction & Direction.south ? -diff : diff;
+        const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+        image.style.height = `${height}px`;
+        positioning.currentHeight = height;
       } else {
-        var _diff2 = Math.floor(positioning.startX - event.clientX);
-        _diff2 = positioning.direction & Direction.east ? -_diff2 : _diff2;
-        var _width = clamp(positioning.startWidth + _diff2, minWidth, maxWidthContainer);
-        image.style.width = "".concat(_width, "px");
-        positioning.currentWidth = _width;
+        let diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        image.style.width = `${width}px`;
+        positioning.currentWidth = width;
       }
     }
   };
-  var _handlePointerUp = function handlePointerUp() {
-    var image = imageRef.current;
-    var positioning = positioningRef.current;
-    var controlWrapper = controlWrapperRef.current;
+  const handlePointerUp = () => {
+    const image = imageRef.current;
+    const positioning = positioningRef.current;
+    const controlWrapper = controlWrapperRef.current;
     if (image !== null && controlWrapper !== null && positioning.isResizing) {
-      var width = positioning.currentWidth;
-      var height = positioning.currentHeight;
+      const width = positioning.currentWidth;
+      const height = positioning.currentHeight;
       positioning.startWidth = 0;
       positioning.startHeight = 0;
       positioning.ratio = 0;
@@ -159,7 +154,7 @@ function ImageResizer(_ref) {
       setEndCursor();
       onResizeEnd(width, height);
       document.removeEventListener("pointermove", handlePointerMove);
-      document.removeEventListener("pointerup", _handlePointerUp);
+      document.removeEventListener("pointerup", handlePointerUp);
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -167,47 +162,47 @@ function ImageResizer(_ref) {
   }, !showCaption && captionsEnabled && /*#__PURE__*/React.createElement("button", {
     className: "image-caption-button",
     ref: buttonRef,
-    onClick: function onClick() {
+    onClick: () => {
       setShowCaption(!showCaption);
     }
   }, "Add Caption"), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-n",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.north);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-ne",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.north | Direction.east);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-e",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.east);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-se",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.south | Direction.east);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-s",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.south);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-sw",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.south | Direction.west);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-w",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.west);
     }
   }), /*#__PURE__*/React.createElement("div", {
     className: "image-resizer image-resizer-nw",
-    onPointerDown: function onPointerDown(event) {
+    onPointerDown: event => {
       handlePointerDown(event, Direction.north | Direction.west);
     }
   }));