@webiny/app-admin 0.0.0-unstable.de38392959 → 0.0.0-unstable.df7a8bb475

package/components/Dialogs/DialogsContext.js

@@ -0,0 +1,132 @@
+import React, { useState } from "react";
+import { useSnackbar } from "../../hooks/index.js";
+import { Dialog } from "./Dialog.js";
+import { createProvider } from "@webiny/app";
+import { generateId } from "@webiny/utils";
+export const initializeState = (params = {}) => ({
+  id: `dialog-${generateId()}`,
+  title: params.title ?? `Confirmation`,
+  description: params.description,
+  dismissible: params.dismissible,
+  icon: params.icon,
+  content: params.content,
+  acceptLabel: params.acceptLabel === null ? null : params.acceptLabel ?? `Confirm`,
+  cancelLabel: params.cancelLabel === null ? null : params.cancelLabel ?? `Cancel`,
+  loadingLabel: params.loadingLabel ?? `Loading...`,
+  dataLoadingLabel: params.dataLoadingLabel ?? `Loading...`,
+  onAccept: params.onAccept,
+  onClose: params.onClose,
+  open: params.open ?? false,
+  loading: params.loading ?? false,
+  element: params.element,
+  formData: params.formData ?? {},
+  size: params.size ?? "md"
+});
+export const DialogsContext = /*#__PURE__*/React.createContext(undefined);
+export const DialogsProvider = ({
+  children
+}) => {
+  const {
+    showSnackbar
+  } = useSnackbar();
+  const [dialogs, setDialogs] = useState(new Map());
+  const showDialog = params => {
+    const newDialog = initializeState({
+      ...params,
+      open: true
+    });
+    setDialogs(dialogs => new Map(dialogs).set(newDialog.id, newDialog));
+    return () => closeDialog(newDialog.id);
+  };
+  const closeDialog = id => {
+    const dialog = dialogs.get(id);
+
+    // Call the onClose callback if it exists
+    if (dialog?.onClose && typeof dialog.onClose === "function") {
+      try {
+        dialog.onClose();
+      } catch (error) {
+        // Log error but don't prevent dialog cleanup
+        console.error("Error in dialog onClose callback:", error);
+      }
+    }
+    setDialogs(dialogs => {
+      const newDialogs = new Map(dialogs);
+      newDialogs.delete(id);
+      return newDialogs;
+    });
+  };
+  const closeAllDialogs = () => {
+    setDialogs(new Map());
+  };
+  const onSubmit = async (id, data) => {
+    const dialog = dialogs.get(id);
+    if (!dialog) {
+      return;
+    }
+    try {
+      if (typeof dialog.onAccept === "function") {
+        setDialogs(dialogs => {
+          const newDialogs = new Map(dialogs);
+          newDialogs.set(id, {
+            ...dialog,
+            loading: true
+          });
+          return newDialogs;
+        });
+        await dialog.onAccept(data);
+      }
+    } catch (error) {
+      showSnackbar(error.message);
+    } finally {
+      setDialogs(dialogs => {
+        const newDialogs = new Map(dialogs);
+        newDialogs.set(id, {
+          ...dialog,
+          loading: false
+        });
+        return newDialogs;
+      });
+      closeDialog(id);
+    }
+  };
+  const context = {
+    showDialog,
+    closeDialog,
+    closeAllDialogs
+  };
+  return /*#__PURE__*/React.createElement(DialogsContext.Provider, {
+    value: context
+  }, children, Array.from(dialogs.values()).map(dialog => /*#__PURE__*/React.createElement(Dialog, {
+    key: dialog.id,
+    description: dialog.description,
+    dismissible: dialog.dismissible ?? true,
+    icon: dialog.icon ?? /*#__PURE__*/React.createElement(React.Fragment, null),
+    title: dialog.title,
+    content: dialog.content,
+    open: dialog.open,
+    acceptLabel: dialog.acceptLabel,
+    cancelLabel: dialog.cancelLabel,
+    loadingLabel: dialog.loadingLabel,
+    dataLoadingLabel: dialog.dataLoadingLabel,
+    loading: dialog.loading,
+    closeDialog: () => {
+      closeDialog(dialog.id);
+      dialog.onClose && dialog.onClose();
+    },
+    onSubmit: data => onSubmit(dialog.id, data),
+    formData: dialog.formData,
+    size: dialog.size
+  })));
+};
+export const createDialogsProvider = () => {
+  return createProvider(Component => {
+    return function DialogsProviderDecorator({
+      children
+    }) {
+      return /*#__PURE__*/React.createElement(DialogsProvider, null, /*#__PURE__*/React.createElement(Component, null, children));
+    };
+  });
+};
+
+//# sourceMappingURL=DialogsContext.js.map

package/components/Dialogs/DialogsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useSnackbar","Dialog","createProvider","generateId","initializeState","params","id","title","description","dismissible","icon","content","acceptLabel","cancelLabel","loadingLabel","dataLoadingLabel","onAccept","onClose","open","loading","element","formData","size","DialogsContext","createContext","undefined","DialogsProvider","children","showSnackbar","dialogs","setDialogs","Map","showDialog","newDialog","set","closeDialog","dialog","get","error","console","newDialogs","delete","closeAllDialogs","onSubmit","data","message","context","createElement","Provider","value","Array","from","values","map","key","Fragment","createDialogsProvider","Component","DialogsProviderDecorator"],"sources":["DialogsContext.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useState } from \"react\";\nimport type { GenericFormData } from \"@webiny/form\";\nimport { useSnackbar } from \"~/hooks/index.js\";\nimport { Dialog, type DialogProps } from \"./Dialog.js\";\nimport { createProvider } from \"@webiny/app\";\nimport { generateId } from \"@webiny/utils\";\n\ninterface ShowDialogParams {\n    title: ReactNode;\n    description?: ReactNode;\n    dismissible?: boolean;\n    content: ReactNode;\n    actions?: JSX.Element;\n    icon?: JSX.Element;\n    acceptLabel?: ReactNode;\n    cancelLabel?: ReactNode;\n    loadingLabel?: ReactNode;\n    dataLoadingLabel?: ReactNode;\n    onAccept?: (data: GenericFormData) => void;\n    onClose?: () => void;\n    formData?: DialogProps[\"formData\"];\n    size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n}\n\nexport interface DialogsContext {\n    showDialog: (params: ShowDialogParams) => () => void;\n    closeAllDialogs: () => void;\n}\n\ninterface DialogsProviderProps {\n    children: ReactNode;\n}\n\ninterface DialogState extends ShowDialogParams {\n    id: string;\n    open: boolean;\n    loading: boolean;\n    element?: JSX.Element;\n}\n\nexport const initializeState = (params: Partial<DialogState> = {}): DialogState => ({\n    id: `dialog-${generateId()}`,\n    title: params.title ?? `Confirmation`,\n    description: params.description,\n    dismissible: params.dismissible,\n    icon: params.icon,\n    content: params.content,\n    acceptLabel: params.acceptLabel === null ? null : (params.acceptLabel ?? `Confirm`),\n    cancelLabel: params.cancelLabel === null ? null : (params.cancelLabel ?? `Cancel`),\n    loadingLabel: params.loadingLabel ?? `Loading...`,\n    dataLoadingLabel: params.dataLoadingLabel ?? `Loading...`,\n    onAccept: params.onAccept,\n    onClose: params.onClose,\n    open: params.open ?? false,\n    loading: params.loading ?? false,\n    element: params.element,\n    formData: params.formData ?? {},\n    size: params.size ?? \"md\"\n});\n\nexport const DialogsContext = React.createContext<DialogsContext | undefined>(undefined);\n\nexport const DialogsProvider = ({ children }: DialogsProviderProps) => {\n    const { showSnackbar } = useSnackbar();\n    const [dialogs, setDialogs] = useState<Map<string, DialogState>>(new Map());\n\n    const showDialog = (params: ShowDialogParams) => {\n        const newDialog = initializeState({ ...params, open: true });\n        setDialogs(dialogs => new Map(dialogs).set(newDialog.id, newDialog));\n        return () => closeDialog(newDialog.id);\n    };\n\n    const closeDialog = (id: string) => {\n        const dialog = dialogs.get(id);\n\n        // Call the onClose callback if it exists\n        if (dialog?.onClose && typeof dialog.onClose === \"function\") {\n            try {\n                dialog.onClose();\n            } catch (error) {\n                // Log error but don't prevent dialog cleanup\n                console.error(\"Error in dialog onClose callback:\", error);\n            }\n        }\n\n        setDialogs(dialogs => {\n            const newDialogs = new Map(dialogs);\n            newDialogs.delete(id);\n            return newDialogs;\n        });\n    };\n\n    const closeAllDialogs = () => {\n        setDialogs(new Map());\n    };\n\n    const onSubmit = async (id: string, data: GenericFormData) => {\n        const dialog = dialogs.get(id);\n        if (!dialog) {\n            return;\n        }\n\n        try {\n            if (typeof dialog.onAccept === \"function\") {\n                setDialogs(dialogs => {\n                    const newDialogs = new Map(dialogs);\n                    newDialogs.set(id, { ...dialog, loading: true });\n                    return newDialogs;\n                });\n\n                await dialog.onAccept(data);\n            }\n        } catch (error) {\n            showSnackbar(error.message);\n        } finally {\n            setDialogs(dialogs => {\n                const newDialogs = new Map(dialogs);\n                newDialogs.set(id, { ...dialog, loading: false });\n                return newDialogs;\n            });\n            closeDialog(id);\n        }\n    };\n\n    const context = {\n        showDialog,\n        closeDialog,\n        closeAllDialogs\n    };\n\n    return (\n        <DialogsContext.Provider value={context}>\n            {children}\n            {Array.from(dialogs.values()).map(dialog => (\n                <Dialog\n                    key={dialog.id}\n                    description={dialog.description}\n                    dismissible={dialog.dismissible ?? true}\n                    icon={dialog.icon ?? <></>}\n                    title={dialog.title}\n                    content={dialog.content}\n                    open={dialog.open}\n                    acceptLabel={dialog.acceptLabel}\n                    cancelLabel={dialog.cancelLabel}\n                    loadingLabel={dialog.loadingLabel}\n                    dataLoadingLabel={dialog.dataLoadingLabel}\n                    loading={dialog.loading}\n                    closeDialog={() => {\n                        closeDialog(dialog.id);\n                        dialog.onClose && dialog.onClose();\n                    }}\n                    onSubmit={data => onSubmit(dialog.id, data)}\n                    formData={dialog.formData}\n                    size={dialog.size}\n                />\n            ))}\n        </DialogsContext.Provider>\n    );\n};\n\nexport const createDialogsProvider = () => {\n    return createProvider(Component => {\n        return function DialogsProviderDecorator({ children }: DialogsProviderProps) {\n            return (\n                <DialogsProvider>\n                    <Component>{children}</Component>\n                </DialogsProvider>\n            );\n        };\n    });\n};\n"],"mappings":"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","ignoreList":[]}

package/components/Dialogs/useDialogs.d.ts

@@ -0,0 +1,2 @@
+import { DialogsContext } from "./DialogsContext.js";
+export declare const useDialogs: () => DialogsContext;

package/components/Dialogs/useDialogs.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { DialogsContext } from "./DialogsContext.js";
+export const useDialogs = () => {
+  const context = useContext(DialogsContext);
+  if (!context) {
+    throw new Error("useDialogs must be used within a DialogsContext.Provider");
+  }
+  return context;
+};
+
+//# sourceMappingURL=useDialogs.js.map

package/components/Dialogs/useDialogs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useContext","DialogsContext","useDialogs","context","Error"],"sources":["useDialogs.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { DialogsContext } from \"./DialogsContext.js\";\n\nexport const useDialogs = () => {\n    const context = useContext(DialogsContext);\n\n    if (!context) {\n        throw new Error(\"useDialogs must be used within a DialogsContext.Provider\");\n    }\n\n    return context;\n};\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,cAAc;AAEvB,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC5B,MAAMC,OAAO,GAAGH,UAAU,CAACC,cAAc,CAAC;EAE1C,IAAI,CAACE,OAAO,EAAE;IACV,MAAM,IAAIC,KAAK,CAAC,0DAA0D,CAAC;EAC/E;EAEA,OAAOD,OAAO;AAClB,CAAC","ignoreList":[]}

package/components/EmptyView.d.ts

@@ -1,8 +1,8 @@
-import { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 export interface EmptyViewProps {
     icon?: ReactElement;
     title: string;
-    action: ReactElement | null;
+    action?: ReactElement | null;
 }
-declare const EmptyView: ({ icon, title, action }: EmptyViewProps) => JSX.Element;
-export default EmptyView;
+export declare const EmptyView: ({ icon, title, action }: EmptyViewProps) => React.JSX.Element;

package/components/EmptyView.js

@@ -1,64 +1,34 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Typography = require("@webiny/ui/Typography");
-var _touch_app = require("@material-design-icons/svg/filled/touch_app.svg");
-var EmptyViewWrapper = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "eu81oh40",
-  label: "EmptyViewWrapper"
-})({
-  width: "100%",
-  height: "80%",
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-  justifyContent: "center",
-  "& .media": {
-    "& svg": {
-      width: 75,
-      height: 75,
-      fill: "var(--mdc-theme-text-icon-on-background)"
+import React from "react";
+import { Icon, Text } from "@webiny/admin-ui";
+import { ReactComponent as FileIcon } from "@webiny/icons/description.svg";
+export const EmptyView = ({
+  icon = /*#__PURE__*/React.createElement(FileIcon, null),
+  title,
+  action
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-full flex flex-col items-center justify-center gap-md"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 128,
+      height: 128
     },
-    marginBottom: 30
-  },
-  "& .title__container": {
-    maxWidth: 276,
-    textAlign: "center",
-    marginBottom: 24,
-    "& .title": {
-      color: "var(--mdc-theme-text-secondary-on-background)"
-    }
-  },
-  "& .action__container": {
-    "& .mdc-button": {
-      padding: "0px 16px",
-      backgroundColor: "var(--mdc-theme-surface)"
+    className: "flex justify-center items-center bg-neutral-dimmed rounded-full fill-neutral-strong [&_svg]:size-xxl"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    label: "Empty"
+  }))), /*#__PURE__*/React.createElement(Text, {
+    size: "md",
+    className: "text-center text-neutral-strong",
+    as: "div",
+    style: {
+      maxWidth: 276
     }
-  }
-});
-var EmptyView = function EmptyView(_ref) {
-  var _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_touch_app.ReactComponent, null) : _ref$icon,
-    title = _ref.title,
-    action = _ref.action;
-  return /*#__PURE__*/_react.default.createElement(EmptyViewWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "media"
-  }, icon), /*#__PURE__*/_react.default.createElement("div", {
-    className: "title__container"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
-    use: "subtitle1",
-    className: "title"
-  }, title)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "action__container"
+  }, title), action && /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center gap-sm"
   }, action));
 };
-var _default = EmptyView;
-exports.default = _default;
 
 //# sourceMappingURL=EmptyView.js.map

package/components/EmptyView.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_Typography","_touch_app","EmptyViewWrapper","styled","target","label","width","height","display","flexDirection","alignItems","justifyContent","fill","marginBottom","maxWidth","textAlign","color","padding","backgroundColor","EmptyView","_ref","_ref$icon","icon","default","createElement","ReactComponent","title","action","className","Typography","use","_default","exports"],"sources":["EmptyView.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport { ReactComponent as TouchIcon } from \"@material-design-icons/svg/filled/touch_app.svg\";\n\nconst EmptyViewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"80%\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n\n    \"& .media\": {\n        \"& svg\": {\n            width: 75,\n            height: 75,\n            fill: \"var(--mdc-theme-text-icon-on-background)\"\n        },\n        marginBottom: 30\n    },\n    \"& .title__container\": {\n        maxWidth: 276,\n        textAlign: \"center\",\n        marginBottom: 24,\n        \"& .title\": {\n            color: \"var(--mdc-theme-text-secondary-on-background)\"\n        }\n    },\n    \"& .action__container\": {\n        \"& .mdc-button\": {\n            padding: \"0px 16px\",\n            backgroundColor: \"var(--mdc-theme-surface)\"\n        }\n    }\n});\nexport interface EmptyViewProps {\n    icon?: ReactElement;\n    title: string;\n    action: ReactElement | null;\n}\nconst EmptyView = ({ icon = <TouchIcon />, title, action }: EmptyViewProps) => {\n    return (\n        <EmptyViewWrapper>\n            <div className={\"media\"}>{icon}</div>\n            <div className=\"title__container\">\n                <Typography use={\"subtitle1\"} className={\"title\"}>\n                    {title}\n                </Typography>\n            </div>\n            <div className=\"action__container\">{action}</div>\n        </EmptyViewWrapper>\n    );\n};\n\nexport default EmptyView;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAEA,IAAMI,gBAAgB,oBAAGC,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EACnCC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,KAAK;EACbC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,UAAU,EAAE,QAAQ;EACpBC,cAAc,EAAE,QAAQ;EAExB,UAAU,EAAE;IACR,OAAO,EAAE;MACLL,KAAK,EAAE,EAAE;MACTC,MAAM,EAAE,EAAE;MACVK,IAAI,EAAE;IACV,CAAC;IACDC,YAAY,EAAE;EAClB,CAAC;EACD,qBAAqB,EAAE;IACnBC,QAAQ,EAAE,GAAG;IACbC,SAAS,EAAE,QAAQ;IACnBF,YAAY,EAAE,EAAE;IAChB,UAAU,EAAE;MACRG,KAAK,EAAE;IACX;EACJ,CAAC;EACD,sBAAsB,EAAE;IACpB,eAAe,EAAE;MACbC,OAAO,EAAE,UAAU;MACnBC,eAAe,EAAE;IACrB;EACJ;AACJ,CAAC,CAAC;AAMF,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAAgE;EAAA,IAAAC,SAAA,GAAAD,IAAA,CAA1DE,IAAI;IAAJA,IAAI,GAAAD,SAAA,2BAAGzB,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACvB,UAAA,CAAAwB,cAAS,MAAE,CAAC,GAAAJ,SAAA;IAAEK,KAAK,GAAAN,IAAA,CAALM,KAAK;IAAEC,MAAM,GAAAP,IAAA,CAANO,MAAM;EACpD,oBACI/B,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACtB,gBAAgB,qBACbN,MAAA,CAAA2B,OAAA,CAAAC,aAAA;IAAKI,SAAS,EAAE;EAAQ,GAAEN,IAAU,CAAC,eACrC1B,MAAA,CAAA2B,OAAA,CAAAC,aAAA;IAAKI,SAAS,EAAC;EAAkB,gBAC7BhC,MAAA,CAAA2B,OAAA,CAAAC,aAAA,CAACxB,WAAA,CAAA6B,UAAU;IAACC,GAAG,EAAE,WAAY;IAACF,SAAS,EAAE;EAAQ,GAC5CF,KACO,CACX,CAAC,eACN9B,MAAA,CAAA2B,OAAA,CAAAC,aAAA;IAAKI,SAAS,EAAC;EAAmB,GAAED,MAAY,CAClC,CAAC;AAE3B,CAAC;AAAC,IAAAI,QAAA,GAEaZ,SAAS;AAAAa,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}
+{"version":3,"names":["React","Icon","Text","ReactComponent","FileIcon","EmptyView","icon","createElement","title","action","className","style","width","height","label","size","as","maxWidth"],"sources":["EmptyView.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport React from \"react\";\nimport { Icon, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as FileIcon } from \"@webiny/icons/description.svg\";\n\nexport interface EmptyViewProps {\n    icon?: ReactElement;\n    title: string;\n    action?: ReactElement | null;\n}\n\nexport const EmptyView = ({ icon = <FileIcon />, title, action }: EmptyViewProps) => {\n    return (\n        <div className=\"w-full h-full flex flex-col items-center justify-center gap-md\">\n            <div className=\"flex justify-center\">\n                <div\n                    style={{ width: 128, height: 128 }}\n                    className=\"flex justify-center items-center bg-neutral-dimmed rounded-full fill-neutral-strong [&_svg]:size-xxl\"\n                >\n                    <Icon icon={icon} label={\"Empty\"} />\n                </div>\n            </div>\n            <Text\n                size={\"md\"}\n                className={\"text-center text-neutral-strong\"}\n                as={\"div\"}\n                style={{ maxWidth: 276 }}\n            >\n                {title}\n            </Text>\n            {action && <div className={\"flex justify-center gap-sm\"}>{action}</div>}\n        </div>\n    );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAC7C,SAASC,cAAc,IAAIC,QAAQ,QAAQ,+BAA+B;AAQ1E,OAAO,MAAMC,SAAS,GAAGA,CAAC;EAAEC,IAAI,gBAAGN,KAAA,CAAAO,aAAA,CAACH,QAAQ,MAAE,CAAC;EAAEI,KAAK;EAAEC;AAAuB,CAAC,KAAK;EACjF,oBACIT,KAAA,CAAAO,aAAA;IAAKG,SAAS,EAAC;EAAgE,gBAC3EV,KAAA,CAAAO,aAAA;IAAKG,SAAS,EAAC;EAAqB,gBAChCV,KAAA,CAAAO,aAAA;IACII,KAAK,EAAE;MAAEC,KAAK,EAAE,GAAG;MAAEC,MAAM,EAAE;IAAI,CAAE;IACnCH,SAAS,EAAC;EAAsG,gBAEhHV,KAAA,CAAAO,aAAA,CAACN,IAAI;IAACK,IAAI,EAAEA,IAAK;IAACQ,KAAK,EAAE;EAAQ,CAAE,CAClC,CACJ,CAAC,eACNd,KAAA,CAAAO,aAAA,CAACL,IAAI;IACDa,IAAI,EAAE,IAAK;IACXL,SAAS,EAAE,iCAAkC;IAC7CM,EAAE,EAAE,KAAM;IACVL,KAAK,EAAE;MAAEM,QAAQ,EAAE;IAAI;EAAE,GAExBT,KACC,CAAC,EACNC,MAAM,iBAAIT,KAAA,CAAAO,aAAA;IAAKG,SAAS,EAAE;EAA6B,GAAED,MAAY,CACrE,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/Filters/Filters.d.ts

@@ -1,16 +1,16 @@
 import React from "react";
-import { FormOnSubmit, FormProps, GenericFormData } from "@webiny/form";
-declare type Filter = {
+import type { FormOnSubmit, FormProps, GenericFormData } from "@webiny/form";
+type Filter = {
     name: string;
     element: React.ReactElement;
 };
-export declare type GenericFiltersData = GenericFormData;
-export declare type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;
-export interface FiltersProps<T> extends Pick<FormProps<T>, "data" | "onChange"> {
+export type GenericFiltersData = GenericFormData;
+export type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;
+export interface FiltersProps<T extends GenericFormData = GenericFormData> extends Pick<FormProps<T>, "data" | "onChange"> {
     filters: Filter[];
     show: boolean;
     children?: React.ReactNode;
     ["data-testid"]?: string;
 }
-export declare const Filters: <T extends GenericFormData = GenericFormData>(props: FiltersProps<T>) => JSX.Element | null;
+export declare const Filters: <T extends GenericFiltersData = GenericFiltersData>(props: FiltersProps<T>) => React.JSX.Element | null;
 export {};

package/components/Filters/Filters.js

@@ -1,30 +1,21 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Filters = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _form = require("@webiny/form");
-var _Filters = require("./Filters.styled");
-var Filters = function Filters(props) {
+import React from "react";
+import { Separator } from "@webiny/admin-ui";
+import { Form } from "@webiny/form";
+export const Filters = props => {
   if (!props.show || !props.filters.length) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_Filters.FiltersContainer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full bg-neutral-base px-md my-sm",
     "data-testid": props["data-testid"] || "filters-container"
-  }, /*#__PURE__*/_react.default.createElement(_form.Form, {
+  }, /*#__PURE__*/React.createElement(Form, {
     data: props.data,
     onChange: props.onChange
-  }, function () {
-    return /*#__PURE__*/_react.default.createElement(_Filters.FormContainer, null, props.filters.map(function (filter) {
-      return /*#__PURE__*/_react.default.createElement(_Filters.FilterContainer, {
-        key: filter.name
-      }, filter.element);
-    }), props.children);
-  }));
+  }, () => /*#__PURE__*/React.createElement("div", {
+    className: "w-full flex gap-sm flex-wrap"
+  }, props.filters.map(filter => /*#__PURE__*/React.createElement("div", {
+    key: filter.name
+  }, filter.element)), props.children))), /*#__PURE__*/React.createElement(Separator, null));
 };
-exports.Filters = Filters;
 
 //# sourceMappingURL=Filters.js.map

package/components/Filters/Filters.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_form","_Filters","Filters","props","show","filters","length","default","createElement","FiltersContainer","Form","data","onChange","FormContainer","map","filter","FilterContainer","key","name","element","children","exports"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport { Form, FormOnSubmit, FormProps, GenericFormData } from \"@webiny/form\";\n\nimport { FilterContainer, FiltersContainer, FormContainer } from \"./Filters.styled\";\n\ntype Filter = {\n    name: string;\n    element: React.ReactElement;\n};\n\nexport type GenericFiltersData = GenericFormData;\n\nexport type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;\n\nexport interface FiltersProps<T> extends Pick<FormProps<T>, \"data\" | \"onChange\"> {\n    filters: Filter[];\n    show: boolean;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const Filters = <T extends GenericFiltersData = GenericFiltersData>(\n    props: FiltersProps<T>\n) => {\n    if (!props.show || !props.filters.length) {\n        return null;\n    }\n\n    return (\n        <FiltersContainer data-testid={props[\"data-testid\"] || \"filters-container\"}>\n            <Form data={props.data} onChange={props.onChange}>\n                {() => (\n                    <FormContainer>\n                        {props.filters.map(filter => (\n                            <FilterContainer key={filter.name}>{filter.element}</FilterContainer>\n                        ))}\n                        {props.children}\n                    </FormContainer>\n                )}\n            </Form>\n        </FiltersContainer>\n    );\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,QAAA,GAAAF,OAAA;AAkBO,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAChBC,KAAsB,EACrB;EACD,IAAI,CAACA,KAAK,CAACC,IAAI,IAAI,CAACD,KAAK,CAACE,OAAO,CAACC,MAAM,EAAE;IACtC,OAAO,IAAI;EACf;EAEA,oBACIT,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,QAAA,CAAAQ,gBAAgB;IAAC,eAAaN,KAAK,CAAC,aAAa,CAAC,IAAI;EAAoB,gBACvEN,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,KAAA,CAAAU,IAAI;IAACC,IAAI,EAAER,KAAK,CAACQ,IAAK;IAACC,QAAQ,EAAET,KAAK,CAACS;EAAS,GAC5C;IAAA,oBACGf,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,QAAA,CAAAY,aAAa,QACTV,KAAK,CAACE,OAAO,CAACS,GAAG,CAAC,UAAAC,MAAM;MAAA,oBACrBlB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACP,QAAA,CAAAe,eAAe;QAACC,GAAG,EAAEF,MAAM,CAACG;MAAK,GAAEH,MAAM,CAACI,OAAyB,CAAC;IAAA,CACxE,CAAC,EACDhB,KAAK,CAACiB,QACI,CAAC;EAAA,CAElB,CACQ,CAAC;AAE3B,CAAC;AAACC,OAAA,CAAAnB,OAAA,GAAAA,OAAA"}
+{"version":3,"names":["React","Separator","Form","Filters","props","show","filters","length","createElement","Fragment","className","data","onChange","map","filter","key","name","element","children"],"sources":["Filters.tsx"],"sourcesContent":["import React from \"react\";\nimport { Separator } from \"@webiny/admin-ui\";\nimport type { FormOnSubmit, FormProps, GenericFormData } from \"@webiny/form\";\nimport { Form } from \"@webiny/form\";\n\ntype Filter = {\n    name: string;\n    element: React.ReactElement;\n};\n\nexport type GenericFiltersData = GenericFormData;\n\nexport type FiltersOnSubmit<T extends GenericFiltersData = GenericFiltersData> = FormOnSubmit<T>;\n\nexport interface FiltersProps<T extends GenericFormData = GenericFormData>\n    extends Pick<FormProps<T>, \"data\" | \"onChange\"> {\n    filters: Filter[];\n    show: boolean;\n    children?: React.ReactNode;\n    [\"data-testid\"]?: string;\n}\n\nexport const Filters = <T extends GenericFiltersData = GenericFiltersData>(\n    props: FiltersProps<T>\n) => {\n    if (!props.show || !props.filters.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <div\n                className={\"w-full bg-neutral-base px-md my-sm\"}\n                data-testid={props[\"data-testid\"] || \"filters-container\"}\n            >\n                <Form data={props.data} onChange={props.onChange}>\n                    {() => (\n                        <div className={\"w-full flex gap-sm flex-wrap\"}>\n                            {props.filters.map(filter => (\n                                <div key={filter.name}>{filter.element}</div>\n                            ))}\n                            {props.children}\n                        </div>\n                    )}\n                </Form>\n            </div>\n            <Separator />\n        </>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,kBAAkB;AAE5C,SAASC,IAAI,QAAQ,cAAc;AAmBnC,OAAO,MAAMC,OAAO,GAChBC,KAAsB,IACrB;EACD,IAAI,CAACA,KAAK,CAACC,IAAI,IAAI,CAACD,KAAK,CAACE,OAAO,CAACC,MAAM,EAAE;IACtC,OAAO,IAAI;EACf;EAEA,oBACIP,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,qBACIT,KAAA,CAAAQ,aAAA;IACIE,SAAS,EAAE,oCAAqC;IAChD,eAAaN,KAAK,CAAC,aAAa,CAAC,IAAI;EAAoB,gBAEzDJ,KAAA,CAAAQ,aAAA,CAACN,IAAI;IAACS,IAAI,EAAEP,KAAK,CAACO,IAAK;IAACC,QAAQ,EAAER,KAAK,CAACQ;EAAS,GAC5C,mBACGZ,KAAA,CAAAQ,aAAA;IAAKE,SAAS,EAAE;EAA+B,GAC1CN,KAAK,CAACE,OAAO,CAACO,GAAG,CAACC,MAAM,iBACrBd,KAAA,CAAAQ,aAAA;IAAKO,GAAG,EAAED,MAAM,CAACE;EAAK,GAAEF,MAAM,CAACG,OAAa,CAC/C,CAAC,EACDb,KAAK,CAACc,QACN,CAEP,CACL,CAAC,eACNlB,KAAA,CAAAQ,aAAA,CAACP,SAAS,MAAE,CACd,CAAC;AAEX,CAAC","ignoreList":[]}

package/components/Filters/FiltersToggle.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface FiltersToggleProps {
+    onFiltersToggle: () => void;
+    showingFilters: boolean;
+    "data-testid"?: string;
+}
+export declare const FiltersToggle: (props: FiltersToggleProps) => React.JSX.Element;

package/components/Filters/FiltersToggle.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FilterIcon } from "@webiny/icons/filter_list.svg";
+import { ReactComponent as CloseFilterIcon } from "@webiny/icons/filter_list_off.svg";
+const Icon = ({
+  showingFilters
+}) => {
+  return showingFilters ? /*#__PURE__*/React.createElement(CloseFilterIcon, null) : /*#__PURE__*/React.createElement(FilterIcon, null);
+};
+const IconComponent = /*#__PURE__*/React.memo(Icon);
+export const FiltersToggle = props => {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    side: "bottom",
+    content: props.showingFilters ? "Hide filters" : "Show filters",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      variant: "ghost",
+      icon: /*#__PURE__*/React.createElement(IconComponent, {
+        showingFilters: props.showingFilters
+      }),
+      onClick: props.onFiltersToggle,
+      "data-testid": props["data-testid"]
+    })
+  });
+};
+
+//# sourceMappingURL=FiltersToggle.js.map

package/components/Filters/FiltersToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconButton","Tooltip","ReactComponent","FilterIcon","CloseFilterIcon","Icon","showingFilters","createElement","IconComponent","memo","FiltersToggle","props","side","content","trigger","variant","icon","onClick","onFiltersToggle"],"sources":["FiltersToggle.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/filter_list.svg\";\nimport { ReactComponent as CloseFilterIcon } from \"@webiny/icons/filter_list_off.svg\";\n\ninterface IconProps {\n    showingFilters?: boolean;\n}\n\nconst Icon = ({ showingFilters }: IconProps) => {\n    return showingFilters ? <CloseFilterIcon /> : <FilterIcon />;\n};\nconst IconComponent = React.memo(Icon);\n\nexport interface FiltersToggleProps {\n    onFiltersToggle: () => void;\n    showingFilters: boolean;\n    \"data-testid\"?: string;\n}\n\nexport const FiltersToggle = (props: FiltersToggleProps) => {\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            content={props.showingFilters ? \"Hide filters\" : \"Show filters\"}\n            trigger={\n                <IconButton\n                    variant={\"ghost\"}\n                    icon={<IconComponent showingFilters={props.showingFilters} />}\n                    onClick={props.onFiltersToggle}\n                    data-testid={props[\"data-testid\"]}\n                />\n            }\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,OAAO,QAAQ,kBAAkB;AACtD,SAASC,cAAc,IAAIC,UAAU,QAAQ,+BAA+B;AAC5E,SAASD,cAAc,IAAIE,eAAe,QAAQ,mCAAmC;AAMrF,MAAMC,IAAI,GAAGA,CAAC;EAAEC;AAA0B,CAAC,KAAK;EAC5C,OAAOA,cAAc,gBAAGP,KAAA,CAAAQ,aAAA,CAACH,eAAe,MAAE,CAAC,gBAAGL,KAAA,CAAAQ,aAAA,CAACJ,UAAU,MAAE,CAAC;AAChE,CAAC;AACD,MAAMK,aAAa,gBAAGT,KAAK,CAACU,IAAI,CAACJ,IAAI,CAAC;AAQtC,OAAO,MAAMK,aAAa,GAAIC,KAAyB,IAAK;EACxD,oBACIZ,KAAA,CAAAQ,aAAA,CAACN,OAAO;IACJW,IAAI,EAAE,QAAS;IACfC,OAAO,EAAEF,KAAK,CAACL,cAAc,GAAG,cAAc,GAAG,cAAe;IAChEQ,OAAO,eACHf,KAAA,CAAAQ,aAAA,CAACP,UAAU;MACPe,OAAO,EAAE,OAAQ;MACjBC,IAAI,eAAEjB,KAAA,CAAAQ,aAAA,CAACC,aAAa;QAACF,cAAc,EAAEK,KAAK,CAACL;MAAe,CAAE,CAAE;MAC9DW,OAAO,EAAEN,KAAK,CAACO,eAAgB;MAC/B,eAAaP,KAAK,CAAC,aAAa;IAAE,CACrC;EACJ,CACJ,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/Filters/index.d.ts

@@ -1 +1,2 @@
-export * from "./Filters";
+export * from "./Filters.js";
+export * from "./FiltersToggle.js";

package/components/Filters/index.js

@@ -1,18 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Filters = require("./Filters");
-Object.keys(_Filters).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Filters[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Filters[key];
-    }
-  });
-});
+export * from "./Filters.js";
+export * from "./FiltersToggle.js";
 
 //# sourceMappingURL=index.js.map

package/components/Filters/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Filters","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Filters\";\n"],"mappings":";;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,QAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,QAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,QAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Filters.js\";\nexport * from \"./FiltersToggle.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/components/FloatingActionButton.d.ts

@@ -2,5 +2,5 @@ import * as React from "react";
 interface FloatingActionButtonProps {
     children: React.ReactNode;
 }
-declare const FloatingActionButton: (props: FloatingActionButtonProps) => JSX.Element;
+declare const FloatingActionButton: (props: FloatingActionButtonProps) => React.JSX.Element;
 export { FloatingActionButton };

package/components/FloatingActionButton.js

@@ -1,25 +1,18 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FloatingActionButton = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Button = require("@webiny/ui/Button");
-var _add = require("@material-design-icons/svg/outlined/add.svg");
+import * as React from "react";
+import { ButtonFloating } from "@webiny/ui/Button/index.js";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
 // Set "styles" inline, since no customizations are possible / needed here.
-var FloatingActionButton = function FloatingActionButton(props) {
+const FloatingActionButton = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: "absolute",
       bottom: 20,
       right: 20
     }
-  }, /*#__PURE__*/React.createElement(_Button.ButtonFloating, Object.assign({}, props, {
-    icon: /*#__PURE__*/React.createElement(_add.ReactComponent, null)
+  }, /*#__PURE__*/React.createElement(ButtonFloating, Object.assign({}, props, {
+    icon: /*#__PURE__*/React.createElement(AddIcon, null)
   })));
 };
-exports.FloatingActionButton = FloatingActionButton;
+export { FloatingActionButton };
 
 //# sourceMappingURL=FloatingActionButton.js.map

package/components/FloatingActionButton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","_interopRequireWildcard","require","_Button","_add","FloatingActionButton","props","createElement","style","position","bottom","right","ButtonFloating","Object","assign","icon","ReactComponent","exports"],"sources":["FloatingActionButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ButtonFloating } from \"@webiny/ui/Button\";\nimport { ReactComponent as AddIcon } from \"@material-design-icons/svg/outlined/add.svg\";\n\ninterface FloatingActionButtonProps {\n    children: React.ReactNode;\n}\n\n// Set \"styles\" inline, since no customizations are possible / needed here.\nconst FloatingActionButton = (props: FloatingActionButtonProps) => {\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                bottom: 20,\n                right: 20\n            }}\n        >\n            <ButtonFloating {...props} icon={<AddIcon />} />\n        </div>\n    );\n};\n\nexport { FloatingActionButton };\n"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,IAAA,GAAAF,OAAA;AAMA;AACA,IAAMG,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAIC,KAAgC,EAAK;EAC/D,oBACIN,KAAA,CAAAO,aAAA;IACIC,KAAK,EAAE;MACHC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,EAAE;MACVC,KAAK,EAAE;IACX;EAAE,gBAEFX,KAAA,CAAAO,aAAA,CAACJ,OAAA,CAAAS,cAAc,EAAAC,MAAA,CAAAC,MAAA,KAAKR,KAAK;IAAES,IAAI,eAAEf,KAAA,CAAAO,aAAA,CAACH,IAAA,CAAAY,cAAO,MAAE;EAAE,EAAE,CAC9C,CAAC;AAEd,CAAC;AAACC,OAAA,CAAAZ,oBAAA,GAAAA,oBAAA"}
+{"version":3,"names":["React","ButtonFloating","ReactComponent","AddIcon","FloatingActionButton","props","createElement","style","position","bottom","right","Object","assign","icon"],"sources":["FloatingActionButton.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ButtonFloating } from \"@webiny/ui/Button/index.js\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\n\ninterface FloatingActionButtonProps {\n    children: React.ReactNode;\n}\n\n// Set \"styles\" inline, since no customizations are possible / needed here.\nconst FloatingActionButton = (props: FloatingActionButtonProps) => {\n    return (\n        <div\n            style={{\n                position: \"absolute\",\n                bottom: 20,\n                right: 20\n            }}\n        >\n            <ButtonFloating {...props} icon={<AddIcon />} />\n        </div>\n    );\n};\n\nexport { FloatingActionButton };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AAMjE;AACA,MAAMC,oBAAoB,GAAIC,KAAgC,IAAK;EAC/D,oBACIL,KAAA,CAAAM,aAAA;IACIC,KAAK,EAAE;MACHC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,EAAE;MACVC,KAAK,EAAE;IACX;EAAE,gBAEFV,KAAA,CAAAM,aAAA,CAACL,cAAc,EAAAU,MAAA,CAAAC,MAAA,KAAKP,KAAK;IAAEQ,IAAI,eAAEb,KAAA,CAAAM,aAAA,CAACH,OAAO,MAAE;EAAE,EAAE,CAC9C,CAAC;AAEd,CAAC;AAED,SAASC,oBAAoB","ignoreList":[]}

package/components/FloatingPanel.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface FloatingPanelRenderProp {
+    (params: {
+        height: number;
+        width: number;
+    }): React.ReactNode;
+}
+export interface FloatingPanelProps {
+    shortcut: string;
+    dragHandle: string;
+    children: FloatingPanelRenderProp;
+}
+export declare const FloatingPanel: ({ dragHandle, shortcut, children }: FloatingPanelProps) => React.ReactPortal;