@webiny/app-file-manager 6.0.0-beta.0 → 6.0.0-rc.0

package/components/ImageEditor/toolbar/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","FilterIcon","debounce","Button","Grid","IconButton","Slider","Tooltip","sliders","key","label","min","RenderForm","Component","state","processing","values","componentDidMount","resetFiltersValues","applyFilters","canvas","props","component","Caman","current","revert","Object","keys","forEach","render","setState","reduce","output","createElement","Fragment","map","Column","span","assign","value","Number","max","disabled","onValueChange","className","text","variant","onClick","tool","name","icon","activateTool","trigger","content","renderForm","cancel"],"sources":["filter.tsx"],"sourcesContent":["/**\n * When using Caman, we added @ts-expect-error because it does not exist in packages, but it is loaded in packages/ui/src/ImageEditor/ImageEditor.tsx:38.\n * TODO: use some other library to edit images\n */\nimport React from \"react\";\nimport { ReactComponent as FilterIcon } from \"@webiny/icons/tune.svg\";\nimport debounce from \"lodash/debounce.js\";\nimport { Button, Grid, IconButton, Slider, Tooltip } from \"@webiny/admin-ui\";\nimport type { ImageEditorTool } from \"./types.js\";\n\ninterface RenderFormState {\n    values: Record<string, any>;\n    processing: boolean;\n}\n\ninterface RenderFormProps {\n    canvas: any;\n    renderApplyCancel?: () => void;\n}\n\nconst sliders = [\n    {\n        key: \"brightness\",\n        label: \"Brightness\",\n        min: -100\n    },\n    {\n        key: \"vibrance\",\n        label: \"Vibrance\",\n        min: -100\n    },\n    {\n        key: \"hue\",\n        label: \"Hue\",\n        min: -100\n    },\n    {\n        key: \"gamma\",\n        label: \"Gamma\"\n    },\n    {\n        key: \"clip\",\n        label: \"Clip\"\n    },\n    {\n        key: \"stackBlur\",\n        label: \"Blur\"\n    },\n    {\n        key: \"contrast\",\n        label: \"Contrast\",\n        min: -100\n    },\n    {\n        key: \"saturation\",\n        label: \"Saturation\",\n        min: -100\n    },\n    {\n        key: \"exposure\",\n        label: \"Exposure\",\n        min: -100\n    },\n    {\n        key: \"sepia\",\n        label: \"Sepia\"\n    },\n    {\n        key: \"noise\",\n        label: \"Noise\"\n    },\n    {\n        key: \"sharpen\",\n        label: \"Sharpen\"\n    }\n];\n\nclass RenderForm extends React.Component<RenderFormProps, RenderFormState> {\n    public override state: RenderFormState = {\n        processing: false,\n        values: {}\n    };\n\n    public override componentDidMount() {\n        this.resetFiltersValues();\n    }\n\n    private readonly applyFilters = debounce(() => {\n        const { canvas } = this.props;\n        const { values } = this.state;\n        // eslint-disable-next-line @typescript-eslint/no-this-alias\n        const component = this;\n\n        // @ts-expect-error\n        Caman(canvas.current, function () {\n            // @ts-expect-error\n            this.revert(false);\n            Object.keys(values).forEach(\n                // @ts-expect-error\n                key => values[key] !== 0 && this[key] && this[key](values[key])\n            );\n            // @ts-expect-error\n            this.render();\n            component.setState({ processing: false });\n        });\n    }, 200);\n\n    private readonly resetFiltersValues = () => {\n        this.setState(state => {\n            sliders.reduce((output, current) => {\n                state.values[current.key] = 0;\n                return output;\n            }, {});\n\n            return state;\n        });\n    };\n\n    public override render() {\n        return (\n            <Grid>\n                <>\n                    {sliders.map(props => (\n                        <Grid.Column span={4} key={props.key}>\n                            <Slider\n                                value={Number(this.state.values[props.key])}\n                                min={0}\n                                max={100}\n                                disabled={this.state.processing}\n                                onValueChange={(value: number) => {\n                                    this.setState(state => {\n                                        const values = { ...state.values };\n                                        values[props.key] = value;\n\n                                        return { ...state, processing: true, values };\n                                    }, this.applyFilters);\n                                }}\n                                {...props}\n                            />\n                        </Grid.Column>\n                    ))}\n                </>\n                <Grid.Column span={12} className={\"text-center\"}>\n                    <Button\n                        text={\"Reset filters\"}\n                        variant={\"secondary\"}\n                        onClick={() => {\n                            this.setState({ processing: true }, () => {\n                                this.resetFiltersValues();\n                                this.applyFilters();\n                                this.setState({ processing: false });\n                            });\n                        }}\n                    />\n                </Grid.Column>\n            </Grid>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"filter\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip\n                trigger={\n                    <IconButton\n                        variant={\"ghost\"}\n                        icon={<FilterIcon />}\n                        onClick={() => activateTool(\"filter\")}\n                        data-testid={\"filter-item\"}\n                    />\n                }\n                content={\"Filter\"}\n            />\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    cancel: ({ canvas }) => {\n        // @ts-expect-error\n        Caman(canvas.current, function () {\n            // @ts-expect-error\n            this.revert(false);\n            // @ts-expect-error\n            this.render();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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","ignoreList":[]}

package/components/ImageEditor/toolbar/flip.d.ts

@@ -0,0 +1,4 @@
+import "cropperjs/dist/cropper.css";
+import type { ImageEditorTool } from "./types.js";
+declare const tool: ImageEditorTool;
+export default tool;

package/components/ImageEditor/toolbar/flip.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { Button, IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as FlipIcon } from "@webiny/icons/flip.svg";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+let cropper;
+const flipped = {
+  x: 1,
+  y: 1
+};
+const renderForm = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-center gap-sm"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "FlipX",
+    variant: "secondary",
+    onClick: () => {
+      if (!cropper) {
+        return;
+      }
+      flipped.x = flipped.x === 1 ? -1 : 1;
+      cropper.scaleX(flipped.x);
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    text: "FlipY",
+    variant: "secondary",
+    onClick: () => {
+      if (!cropper) {
+        return;
+      }
+      flipped.y = flipped.y === 1 ? -1 : 1;
+      cropper.scaleY(flipped.y);
+    }
+  }));
+};
+const tool = {
+  name: "flip",
+  icon({
+    activateTool
+  }) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      side: "bottom",
+      content: "Flip",
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React.createElement(FlipIcon, null),
+        onClick: () => activateTool("flip"),
+        "data-testid": "flip-item"
+      })
+    });
+  },
+  renderForm,
+  cancel: () => cropper && cropper.destroy(),
+  onActivate: ({
+    canvas
+  }) => {
+    cropper = new Cropper(canvas.current, {
+      background: false,
+      modal: false,
+      guides: false,
+      dragMode: "none",
+      highlight: false,
+      autoCrop: false
+    });
+  },
+  apply: ({
+    canvas
+  }) => {
+    return new Promise(resolve => {
+      if (!cropper) {
+        resolve();
+        return;
+      }
+      const current = canvas.current;
+      const src = cropper.getCroppedCanvas().toDataURL();
+      if (current) {
+        const image = new window.Image();
+        const ctx = current.getContext("2d");
+        image.onload = () => {
+          ctx.drawImage(image, 0, 0);
+          current.width = image.width;
+          current.height = image.height;
+          ctx.drawImage(image, 0, 0);
+          resolve();
+        };
+        image.src = src;
+      }
+      cropper.destroy();
+    });
+  }
+};
+export default tool;
+
+//# sourceMappingURL=flip.js.map

package/components/ImageEditor/toolbar/flip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Button","IconButton","Tooltip","ReactComponent","FlipIcon","Cropper","cropper","flipped","x","y","renderForm","createElement","className","text","variant","onClick","scaleX","scaleY","tool","name","icon","activateTool","side","content","trigger","cancel","destroy","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["flip.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as FlipIcon } from \"@webiny/icons/flip.svg\";\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\nimport type { ImageEditorTool } from \"./types.js\";\n\nlet cropper: Cropper;\n\nconst flipped = { x: 1, y: 1 };\n\nconst renderForm = () => {\n    return (\n        <div className={\"flex justify-center gap-sm\"}>\n            <Button\n                text={\"FlipX\"}\n                variant={\"secondary\"}\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.x = flipped.x === 1 ? -1 : 1;\n                    cropper.scaleX(flipped.x);\n                }}\n            />\n            <Button\n                text={\"FlipY\"}\n                variant={\"secondary\"}\n                onClick={() => {\n                    if (!cropper) {\n                        return;\n                    }\n\n                    flipped.y = flipped.y === 1 ? -1 : 1;\n                    cropper.scaleY(flipped.y);\n                }}\n            />\n        </div>\n    );\n};\n\nconst tool: ImageEditorTool = {\n    name: \"flip\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip\n                side={\"bottom\"}\n                content={\"Flip\"}\n                trigger={\n                    <IconButton\n                        variant={\"ghost\"}\n                        icon={<FlipIcon />}\n                        onClick={() => activateTool(\"flip\")}\n                        data-testid={\"flip-item\"}\n                    />\n                }\n            />\n        );\n    },\n    renderForm,\n    cancel: () => cropper && cropper.destroy(),\n    onActivate: ({ canvas }) => {\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                    resolve();\n                };\n                image.src = src;\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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","ignoreList":[]}

package/components/ImageEditor/toolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as crop } from "./crop.js";
+export { default as flip } from "./flip.js";
+export { default as filter } from "./filter.js";
+export { default as rotate } from "./rotate.js";

package/components/ImageEditor/toolbar/index.js

@@ -0,0 +1,6 @@
+export { default as crop } from "./crop.js";
+export { default as flip } from "./flip.js";
+export { default as filter } from "./filter.js";
+export { default as rotate } from "./rotate.js";
+
+//# sourceMappingURL=index.js.map

package/components/ImageEditor/toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["default","crop","flip","filter","rotate"],"sources":["index.ts"],"sourcesContent":["export { default as crop } from \"./crop.js\";\nexport { default as flip } from \"./flip.js\";\nexport { default as filter } from \"./filter.js\";\nexport { default as rotate } from \"./rotate.js\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,IAAI;AACxB,SAASD,OAAO,IAAIE,IAAI;AACxB,SAASF,OAAO,IAAIG,MAAM;AAC1B,SAASH,OAAO,IAAII,MAAM","ignoreList":[]}

package/components/ImageEditor/toolbar/rotate.d.ts

@@ -0,0 +1,4 @@
+import type { ImageEditorTool } from "./types.js";
+import "cropperjs/dist/cropper.css";
+declare const tool: ImageEditorTool;
+export default tool;

package/components/ImageEditor/toolbar/rotate.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { IconButton, Slider, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as RotateRight } from "@webiny/icons/rotate_right.svg";
+import Cropper from "cropperjs";
+import "cropperjs/dist/cropper.css";
+let cropper;
+class RenderForm extends React.Component {
+  state = {
+    rangeInput: 0
+  };
+  render() {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Slider, {
+      label: "Range Input",
+      value: Number(this.state.rangeInput),
+      min: 0,
+      max: 360,
+      step: 10,
+      onValueChange: value => {
+        this.setState({
+          rangeInput: value
+        }, async () => {
+          if (cropper) {
+            cropper.rotateTo(parseInt(String(value), 10));
+          }
+        });
+      }
+    }));
+  }
+}
+const tool = {
+  name: "rotate",
+  icon({
+    activateTool
+  }) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      side: "bottom",
+      content: "Rotate",
+      trigger: /*#__PURE__*/React.createElement(IconButton, {
+        variant: "ghost",
+        icon: /*#__PURE__*/React.createElement(RotateRight, null),
+        onClick: () => activateTool("rotate"),
+        "data-testid": "rotate-item"
+      })
+    });
+  },
+  renderForm(props) {
+    return /*#__PURE__*/React.createElement(RenderForm, props);
+  },
+  onActivate: ({
+    canvas
+  }) => {
+    /**
+     * We can safely cast canvas.current as HTMLCanvasElement
+     */
+    cropper = new Cropper(canvas.current, {
+      background: false,
+      modal: false,
+      guides: false,
+      dragMode: "none",
+      highlight: false,
+      autoCrop: false
+    });
+  },
+  cancel: () => cropper && cropper.destroy(),
+  apply: ({
+    canvas
+  }) => {
+    return new Promise(resolve => {
+      if (!cropper) {
+        resolve();
+        return;
+      }
+      const current = canvas.current;
+      const src = cropper.getCroppedCanvas().toDataURL();
+      if (current) {
+        const image = new window.Image();
+        const ctx = current.getContext("2d");
+        image.onload = () => {
+          ctx.drawImage(image, 0, 0);
+          current.width = image.width;
+          current.height = image.height;
+          ctx.drawImage(image, 0, 0);
+        };
+        image.src = src;
+        resolve();
+      }
+      cropper.destroy();
+    });
+  }
+};
+export default tool;
+
+//# sourceMappingURL=rotate.js.map

package/components/ImageEditor/toolbar/rotate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","IconButton","Slider","Tooltip","ReactComponent","RotateRight","Cropper","cropper","RenderForm","Component","state","rangeInput","render","createElement","label","value","Number","min","max","step","onValueChange","setState","rotateTo","parseInt","String","tool","name","icon","activateTool","side","content","trigger","variant","onClick","renderForm","props","onActivate","canvas","current","background","modal","guides","dragMode","highlight","autoCrop","cancel","destroy","apply","Promise","resolve","src","getCroppedCanvas","toDataURL","image","window","Image","ctx","getContext","onload","drawImage","width","height"],"sources":["rotate.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Slider, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as RotateRight } from \"@webiny/icons/rotate_right.svg\";\nimport type { ImageEditorTool } from \"./types.js\";\n\nimport Cropper from \"cropperjs\";\nimport \"cropperjs/dist/cropper.css\";\n\nlet cropper: Cropper;\n\nclass RenderForm extends React.Component<any, any> {\n    public override state = {\n        rangeInput: 0\n    };\n\n    public override render() {\n        return (\n            <div>\n                <Slider\n                    label={\"Range Input\"}\n                    value={Number(this.state.rangeInput)}\n                    min={0}\n                    max={360}\n                    step={10}\n                    onValueChange={(value: number) => {\n                        this.setState({ rangeInput: value }, async () => {\n                            if (cropper) {\n                                cropper.rotateTo(parseInt(String(value), 10));\n                            }\n                        });\n                    }}\n                />\n            </div>\n        );\n    }\n}\n\nconst tool: ImageEditorTool = {\n    name: \"rotate\",\n    icon({ activateTool }) {\n        return (\n            <Tooltip\n                side={\"bottom\"}\n                content={\"Rotate\"}\n                trigger={\n                    <IconButton\n                        variant={\"ghost\"}\n                        icon={<RotateRight />}\n                        onClick={() => activateTool(\"rotate\")}\n                        data-testid={\"rotate-item\"}\n                    />\n                }\n            />\n        );\n    },\n    renderForm(props) {\n        return <RenderForm {...props} />;\n    },\n    onActivate: ({ canvas }) => {\n        /**\n         * We can safely cast canvas.current as HTMLCanvasElement\n         */\n        cropper = new Cropper(canvas.current as HTMLCanvasElement, {\n            background: false,\n            modal: false,\n            guides: false,\n            dragMode: \"none\",\n            highlight: false,\n            autoCrop: false\n        });\n    },\n    cancel: () => cropper && cropper.destroy(),\n    apply: ({ canvas }) => {\n        return new Promise((resolve: any) => {\n            if (!cropper) {\n                resolve();\n                return;\n            }\n\n            const current = canvas.current;\n            const src = cropper.getCroppedCanvas().toDataURL();\n            if (current) {\n                const image = new window.Image();\n                const ctx = current.getContext(\"2d\") as CanvasRenderingContext2D;\n                image.onload = () => {\n                    ctx.drawImage(image, 0, 0);\n                    current.width = image.width;\n                    current.height = image.height;\n\n                    ctx.drawImage(image, 0, 0);\n                };\n                image.src = src;\n                resolve();\n            }\n\n            cropper.destroy();\n        });\n    }\n};\n\nexport default tool;\n"],"mappings":"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","ignoreList":[]}

package/components/ImageEditor/toolbar/types.d.ts

@@ -0,0 +1,32 @@
+import type React from "react";
+export type ToolbarTool = "crop" | "flip" | "rotate" | "filter";
+interface RenderFormParams {
+    canvas: React.RefObject<HTMLCanvasElement | null>;
+    image: HTMLImageElement;
+    renderApplyCancel?: () => void;
+    options?: {
+        [key: string]: any;
+    };
+}
+interface OnActivateParams {
+    options: any;
+    canvas: React.RefObject<HTMLCanvasElement | null>;
+}
+interface IconParams {
+    activateTool: (tool: ToolbarTool) => void;
+}
+interface ApplyParams {
+    canvas: React.RefObject<HTMLCanvasElement | null>;
+}
+interface CancelParams {
+    canvas: React.RefObject<HTMLCanvasElement | null>;
+}
+export interface ImageEditorTool {
+    name: string;
+    apply?: (params: ApplyParams) => void;
+    cancel?: (params: CancelParams) => void;
+    onActivate?: (params: OnActivateParams) => void;
+    icon: (params: IconParams) => React.ReactElement<any>;
+    renderForm?: (params: RenderFormParams) => React.ReactNode;
+}
+export {};

package/components/ImageEditor/toolbar/types.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=types.js.map

package/components/ImageEditor/toolbar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type React from \"react\";\n\nexport type ToolbarTool = \"crop\" | \"flip\" | \"rotate\" | \"filter\";\n\ninterface RenderFormParams {\n    canvas: React.RefObject<HTMLCanvasElement | null>;\n    image: HTMLImageElement;\n    renderApplyCancel?: () => void;\n    options?: { [key: string]: any };\n}\n\ninterface OnActivateParams {\n    options: any;\n    canvas: React.RefObject<HTMLCanvasElement | null>;\n}\n\ninterface IconParams {\n    activateTool: (tool: ToolbarTool) => void;\n}\n\ninterface ApplyParams {\n    canvas: React.RefObject<HTMLCanvasElement | null>;\n}\n\ninterface CancelParams {\n    canvas: React.RefObject<HTMLCanvasElement | null>;\n}\n\nexport interface ImageEditorTool {\n    name: string;\n    apply?: (params: ApplyParams) => void;\n    cancel?: (params: CancelParams) => void;\n    onActivate?: (params: OnActivateParams) => void;\n    icon: (params: IconParams) => React.ReactElement<any>;\n    renderForm?: (params: RenderFormParams) => React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}

package/components/LayoutSwitch/LayoutSwitch.js

@@ -1,33 +1,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LayoutSwitch = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _view_module = require("@material-design-icons/svg/outlined/view_module.svg");
-var _view_list = require("@material-design-icons/svg/outlined/view_list.svg");
-var _i18n = require("@webiny/app/i18n");
-var _Button = require("@webiny/ui/Button");
-var _Tooltip = require("@webiny/ui/Tooltip");
-var _FileManagerViewProvider = require("../../modules/FileManagerRenderer/FileManagerViewProvider");
-var _templateObject, _templateObject2;
-var t = _i18n.i18n.ns("app-file-manager/components/layout-switch");
-var LayoutSwitch = exports.LayoutSwitch = function LayoutSwitch() {
-  var view = (0, _FileManagerViewProvider.useFileManagerView)();
-  return /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-    content: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["{mode} layout"])))({
-      mode: view.listTable ? "Grid" : "Table"
+import React from "react";
+import { IconButton, Tooltip } from "@webiny/admin-ui";
+import { ReactComponent as GridIcon } from "@webiny/icons/view_module.svg";
+import { ReactComponent as TableIcon } from "@webiny/icons/view_list.svg";
+import { i18n } from "@webiny/app/i18n/index.js";
+import { useFileManagerView } from "../../modules/FileManagerRenderer/FileManagerViewProvider/index.js";
+const t = i18n.ns("app-file-manager/components/layout-switch");
+export const LayoutSwitch = () => {
+  const view = useFileManagerView();
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    side: "bottom",
+    trigger: /*#__PURE__*/React.createElement(IconButton, {
+      icon: view.listTable ? /*#__PURE__*/React.createElement(GridIcon, null) : /*#__PURE__*/React.createElement(TableIcon, null),
+      onClick: () => view.setListTable(!view.listTable)
     }),
-    placement: "bottom"
-  }, /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
-    icon: view.listTable ? /*#__PURE__*/_react.default.createElement(_view_module.ReactComponent, null) : /*#__PURE__*/_react.default.createElement(_view_list.ReactComponent, null),
-    onClick: function onClick() {
-      return view.setListTable(!view.listTable);
-    }
-  }, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Switch"])))));
+    content: t`{mode} layout`({
+      mode: view.listTable ? "Grid" : "Table"
+    })
+  });
 };
 
 //# sourceMappingURL=LayoutSwitch.js.map

package/components/LayoutSwitch/LayoutSwitch.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_view_module","_view_list","_i18n","_Button","_Tooltip","_FileManagerViewProvider","_templateObject","_templateObject2","t","i18n","ns","LayoutSwitch","exports","view","useFileManagerView","default","createElement","Tooltip","content","_taggedTemplateLiteral2","mode","listTable","placement","IconButton","icon","ReactComponent","onClick","setListTable"],"sources":["LayoutSwitch.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ReactComponent as GridIcon } from \"@material-design-icons/svg/outlined/view_module.svg\";\nimport { ReactComponent as TableIcon } from \"@material-design-icons/svg/outlined/view_list.svg\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Tooltip } from \"@webiny/ui/Tooltip\";\n\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider\";\n\nconst t = i18n.ns(\"app-file-manager/components/layout-switch\");\n\nexport const LayoutSwitch = () => {\n    const view = useFileManagerView();\n\n    return (\n        <Tooltip\n            content={t`{mode} layout`({\n                mode: view.listTable ? \"Grid\" : \"Table\"\n            })}\n            placement={\"bottom\"}\n        >\n            <IconButton\n                icon={view.listTable ? <GridIcon /> : <TableIcon />}\n                onClick={() => view.setListTable(!view.listTable)}\n            >\n                {t`Switch`}\n            </IconButton>\n        </Tooltip>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAEA,IAAAM,wBAAA,GAAAN,OAAA;AAA2F,IAAAO,eAAA,EAAAC,gBAAA;AAE3F,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,2CAA2C,CAAC;AAEvD,IAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,SAAfA,YAAYA,CAAA,EAAS;EAC9B,IAAME,IAAI,GAAG,IAAAC,2CAAkB,EAAC,CAAC;EAEjC,oBACIjB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACZ,QAAA,CAAAa,OAAO;IACJC,OAAO,EAAEV,CAAC,CAAAF,eAAA,KAAAA,eAAA,OAAAa,uBAAA,CAAAJ,OAAA,uBAAgB;MACtBK,IAAI,EAAEP,IAAI,CAACQ,SAAS,GAAG,MAAM,GAAG;IACpC,CAAC,CAAE;IACHC,SAAS,EAAE;EAAS,gBAEpBzB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACb,OAAA,CAAAoB,UAAU;IACPC,IAAI,EAAEX,IAAI,CAACQ,SAAS,gBAAGxB,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAAChB,YAAA,CAAAyB,cAAQ,MAAE,CAAC,gBAAG5B,MAAA,CAAAkB,OAAA,CAAAC,aAAA,CAACf,UAAA,CAAAwB,cAAS,MAAE,CAAE;IACpDC,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAMb,IAAI,CAACc,YAAY,CAAC,CAACd,IAAI,CAACQ,SAAS,CAAC;IAAA;EAAC,GAEjDb,CAAC,CAAAD,gBAAA,KAAAA,gBAAA,OAAAY,uBAAA,CAAAJ,OAAA,eACM,CACP,CAAC;AAElB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","IconButton","Tooltip","ReactComponent","GridIcon","TableIcon","i18n","useFileManagerView","t","ns","LayoutSwitch","view","createElement","side","trigger","icon","listTable","onClick","setListTable","content","mode"],"sources":["LayoutSwitch.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconButton, Tooltip } from \"@webiny/admin-ui\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/view_module.svg\";\nimport { ReactComponent as TableIcon } from \"@webiny/icons/view_list.svg\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\n\nimport { useFileManagerView } from \"~/modules/FileManagerRenderer/FileManagerViewProvider/index.js\";\n\nconst t = i18n.ns(\"app-file-manager/components/layout-switch\");\n\nexport const LayoutSwitch = () => {\n    const view = useFileManagerView();\n\n    return (\n        <Tooltip\n            side={\"bottom\"}\n            trigger={\n                <IconButton\n                    icon={view.listTable ? <GridIcon /> : <TableIcon />}\n                    onClick={() => view.setListTable(!view.listTable)}\n                />\n            }\n            content={t`{mode} layout`({\n                mode: view.listTable ? \"Grid\" : \"Table\"\n            })}\n        />\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,OAAO,QAAQ,kBAAkB;AACtD,SAASC,cAAc,IAAIC,QAAQ,QAAQ,+BAA+B;AAC1E,SAASD,cAAc,IAAIE,SAAS,QAAQ,6BAA6B;AACzE,SAASC,IAAI,QAAQ,2BAA2B;AAEhD,SAASC,kBAAkB;AAE3B,MAAMC,CAAC,GAAGF,IAAI,CAACG,EAAE,CAAC,2CAA2C,CAAC;AAE9D,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAMC,IAAI,GAAGJ,kBAAkB,CAAC,CAAC;EAEjC,oBACIP,KAAA,CAAAY,aAAA,CAACV,OAAO;IACJW,IAAI,EAAE,QAAS;IACfC,OAAO,eACHd,KAAA,CAAAY,aAAA,CAACX,UAAU;MACPc,IAAI,EAAEJ,IAAI,CAACK,SAAS,gBAAGhB,KAAA,CAAAY,aAAA,CAACR,QAAQ,MAAE,CAAC,gBAAGJ,KAAA,CAAAY,aAAA,CAACP,SAAS,MAAE,CAAE;MACpDY,OAAO,EAAEA,CAAA,KAAMN,IAAI,CAACO,YAAY,CAAC,CAACP,IAAI,CAACK,SAAS;IAAE,CACrD,CACJ;IACDG,OAAO,EAAEX,CAAC,eAAe,CAAC;MACtBY,IAAI,EAAET,IAAI,CAACK,SAAS,GAAG,MAAM,GAAG;IACpC,CAAC;EAAE,CACN,CAAC;AAEV,CAAC","ignoreList":[]}

package/components/LayoutSwitch/index.d.ts

@@ -1 +1 @@
-export * from "./LayoutSwitch";
+export * from "./LayoutSwitch.js";

package/components/LayoutSwitch/index.js

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

package/components/LayoutSwitch/index.js.map

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

package/components/NoPermissions/NoPermissions.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const NoPermissions: () => React.JSX.Element;

package/components/NoPermissions/NoPermissions.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { Heading, Text } from "@webiny/admin-ui";
+import { ReactComponent as VisibilityOffIcon } from "@webiny/icons/visibility_off.svg";
+export const NoPermissions = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-full p-lg flex items-center justify-center bg-neutral-base"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center justify-center gap-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fill-neutral-strong"
+  }, /*#__PURE__*/React.createElement(VisibilityOffIcon, {
+    width: 75,
+    height: 75
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    className: "text-neutral-strong"
+  }, "Permission Required"), /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    style: {
+      width: "300px"
+    },
+    className: "text-neutral-strong"
+  }, "You don’t have the necessary permissions to access these files. Please contact your administrator for access."))));
+};
+
+//# sourceMappingURL=NoPermissions.js.map

package/components/NoPermissions/NoPermissions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Heading","Text","ReactComponent","VisibilityOffIcon","NoPermissions","createElement","className","width","height","level","as","style"],"sources":["NoPermissions.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as VisibilityOffIcon } from \"@webiny/icons/visibility_off.svg\";\n\nexport const NoPermissions = () => {\n    return (\n        <div className={\"w-full h-full p-lg flex items-center justify-center bg-neutral-base\"}>\n            <div className={\"flex flex-col items-center justify-center gap-sm\"}>\n                <div className={\"fill-neutral-strong\"}>\n                    <VisibilityOffIcon width={75} height={75} />\n                </div>\n                <div className={\"text-center\"}>\n                    <Heading level={4} className={\"text-neutral-strong\"}>\n                        {\"Permission Required\"}\n                    </Heading>\n                    <Text\n                        as={\"div\"}\n                        style={{\n                            width: \"300px\"\n                        }}\n                        className={\"text-neutral-strong\"}\n                    >\n                        {\n                            \"You don’t have the necessary permissions to access these files. Please contact your administrator for access.\"\n                        }\n                    </Text>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,EAAEC,IAAI,QAAQ,kBAAkB;AAChD,SAASC,cAAc,IAAIC,iBAAiB,QAAQ,kCAAkC;AAEtF,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EAC/B,oBACIL,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAsE,gBAClFP,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAmD,gBAC/DP,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAsB,gBAClCP,KAAA,CAAAM,aAAA,CAACF,iBAAiB;IAACI,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,CAAE,CAC1C,CAAC,eACNT,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAE;EAAc,gBAC1BP,KAAA,CAAAM,aAAA,CAACL,OAAO;IAACS,KAAK,EAAE,CAAE;IAACH,SAAS,EAAE;EAAsB,GAC/C,qBACI,CAAC,eACVP,KAAA,CAAAM,aAAA,CAACJ,IAAI;IACDS,EAAE,EAAE,KAAM;IACVC,KAAK,EAAE;MACHJ,KAAK,EAAE;IACX,CAAE;IACFD,SAAS,EAAE;EAAsB,GAG7B,+GAEF,CACL,CACJ,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/NoPermissions/index.d.ts

@@ -0,0 +1 @@
+export * from "./NoPermissions.js";

package/components/NoPermissions/index.js

@@ -0,0 +1,3 @@
+export * from "./NoPermissions.js";
+
+//# sourceMappingURL=index.js.map

package/components/NoPermissions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.tsx"],"sourcesContent":["export * from \"./NoPermissions.js\";\n"],"mappings":"AAAA","ignoreList":[]}

package/components/NoResults/NoResults.js

@@ -1,18 +1,22 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NoResults = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = _interopRequireDefault(require("react"));
-var _i18n = require("@webiny/app/i18n");
-var _styled = require("./styled");
-var _templateObject;
-var t = _i18n.i18n.ns("app-admin/file-manager/components/no-results");
-var NoResults = exports.NoResults = function NoResults() {
-  return /*#__PURE__*/_react.default.createElement(_styled.NoResultsWrapper, null, /*#__PURE__*/_react.default.createElement("div", null, t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["No results found."])))));
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+import { ReactComponent as SearchOffIcon } from "@webiny/icons/search_off.svg";
+export const NoResults = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full h-full p-lg flex items-center justify-center bg-neutral-base"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center justify-center gap-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fill-neutral-strong"
+  }, /*#__PURE__*/React.createElement(SearchOffIcon, {
+    width: 75,
+    height: 75
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "text-center"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    level: 4,
+    className: "text-neutral-strong"
+  }, "No results found."))));
 };
 
 //# sourceMappingURL=NoResults.js.map

package/components/NoResults/NoResults.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_i18n","_styled","_templateObject","t","i18n","ns","NoResults","exports","default","createElement","NoResultsWrapper","_taggedTemplateLiteral2"],"sources":["NoResults.tsx"],"sourcesContent":["import React from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\n\nimport { NoResultsWrapper } from \"./styled\";\n\nconst t = i18n.ns(\"app-admin/file-manager/components/no-results\");\n\nexport const NoResults = () => {\n    return (\n        <NoResultsWrapper>\n            <div>{t`No results found.`}</div>\n        </NoResultsWrapper>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAA4C,IAAAG,eAAA;AAE5C,IAAMC,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,8CAA8C,CAAC;AAE1D,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAA,EAAS;EAC3B,oBACIT,MAAA,CAAAW,OAAA,CAAAC,aAAA,CAACR,OAAA,CAAAS,gBAAgB,qBACbb,MAAA,CAAAW,OAAA,CAAAC,aAAA,cAAMN,CAAC,CAAAD,eAAA,KAAAA,eAAA,OAAAS,uBAAA,CAAAH,OAAA,0BAAyB,CAClB,CAAC;AAE3B,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Heading","ReactComponent","SearchOffIcon","NoResults","createElement","className","width","height","level"],"sources":["NoResults.tsx"],"sourcesContent":["import React from \"react\";\nimport { Heading } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchOffIcon } from \"@webiny/icons/search_off.svg\";\n\nexport const NoResults = () => {\n    return (\n        <div className={\"w-full h-full p-lg flex items-center justify-center bg-neutral-base\"}>\n            <div className={\"flex flex-col items-center justify-center gap-sm\"}>\n                <div className={\"fill-neutral-strong\"}>\n                    <SearchOffIcon width={75} height={75} />\n                </div>\n                <div className={\"text-center\"}>\n                    <Heading level={4} className={\"text-neutral-strong\"}>\n                        {\"No results found.\"}\n                    </Heading>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,IAAIC,aAAa,QAAQ,8BAA8B;AAE9E,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC3B,oBACIJ,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsE,gBAClFN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAmD,gBAC/DN,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAsB,gBAClCN,KAAA,CAAAK,aAAA,CAACF,aAAa;IAACI,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,CAAE,CACtC,CAAC,eACNR,KAAA,CAAAK,aAAA;IAAKC,SAAS,EAAE;EAAc,gBAC1BN,KAAA,CAAAK,aAAA,CAACJ,OAAO;IAACQ,KAAK,EAAE,CAAE;IAACH,SAAS,EAAE;EAAsB,GAC/C,mBACI,CACR,CACJ,CACJ,CAAC;AAEd,CAAC","ignoreList":[]}

package/components/NoResults/index.d.ts

@@ -1 +1 @@
-export * from "./NoResults";
+export * from "./NoResults.js";

package/components/NoResults/index.js

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

package/components/NoResults/index.js.map

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

package/components/SearchWidget/SearchWidget.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { DelayedOnChange, Icon, Input } from "@webiny/admin-ui";
+import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
+import { useFileManagerApi, useFileManagerView } from "../../index.js";
+export const SearchWidget = () => {
+  const fileManager = useFileManagerApi();
+  const view = useFileManagerView();
+  return /*#__PURE__*/React.createElement(DelayedOnChange, {
+    value: view.searchQuery,
+    onChange: value => view.setSearchQuery(value)
+  }, ({
+    value,
+    onChange
+  }) => /*#__PURE__*/React.createElement(Input, {
+    id: "file-manager__search-input",
+    value: value,
+    onChange: value => onChange(value),
+    placeholder: view.searchLabel || "Search library...",
+    disabled: !fileManager.canRead,
+    "data-testid": "file-manager.search-input",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Search",
+      icon: /*#__PURE__*/React.createElement(SearchIcon, null)
+    }),
+    size: "md",
+    variant: "ghost"
+  }));
+};
+
+//# sourceMappingURL=SearchWidget.js.map

package/components/SearchWidget/SearchWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","DelayedOnChange","Icon","Input","ReactComponent","SearchIcon","useFileManagerApi","useFileManagerView","SearchWidget","fileManager","view","createElement","value","searchQuery","onChange","setSearchQuery","id","placeholder","searchLabel","disabled","canRead","startIcon","label","icon","size","variant"],"sources":["SearchWidget.tsx"],"sourcesContent":["import React from \"react\";\nimport { DelayedOnChange, Icon, Input } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { useFileManagerApi, useFileManagerView } from \"~/index.js\";\n\nexport const SearchWidget = () => {\n    const fileManager = useFileManagerApi();\n    const view = useFileManagerView();\n\n    return (\n        <DelayedOnChange value={view.searchQuery} onChange={value => view.setSearchQuery(value)}>\n            {({ value, onChange }) => (\n                <Input\n                    id={\"file-manager__search-input\"}\n                    value={value}\n                    onChange={value => onChange(value)}\n                    placeholder={view.searchLabel || \"Search library...\"}\n                    disabled={!fileManager.canRead}\n                    data-testid={\"file-manager.search-input\"}\n                    startIcon={<Icon label={\"Search\"} icon={<SearchIcon />} />}\n                    size={\"md\"}\n                    variant={\"ghost\"}\n                />\n            )}\n        </DelayedOnChange>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC/D,SAASC,cAAc,IAAIC,UAAU,QAAQ,0BAA0B;AACvE,SAASC,iBAAiB,EAAEC,kBAAkB;AAE9C,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAMC,WAAW,GAAGH,iBAAiB,CAAC,CAAC;EACvC,MAAMI,IAAI,GAAGH,kBAAkB,CAAC,CAAC;EAEjC,oBACIP,KAAA,CAAAW,aAAA,CAACV,eAAe;IAACW,KAAK,EAAEF,IAAI,CAACG,WAAY;IAACC,QAAQ,EAAEF,KAAK,IAAIF,IAAI,CAACK,cAAc,CAACH,KAAK;EAAE,GACnF,CAAC;IAAEA,KAAK;IAAEE;EAAS,CAAC,kBACjBd,KAAA,CAAAW,aAAA,CAACR,KAAK;IACFa,EAAE,EAAE,4BAA6B;IACjCJ,KAAK,EAAEA,KAAM;IACbE,QAAQ,EAAEF,KAAK,IAAIE,QAAQ,CAACF,KAAK,CAAE;IACnCK,WAAW,EAAEP,IAAI,CAACQ,WAAW,IAAI,mBAAoB;IACrDC,QAAQ,EAAE,CAACV,WAAW,CAACW,OAAQ;IAC/B,eAAa,2BAA4B;IACzCC,SAAS,eAAErB,KAAA,CAAAW,aAAA,CAACT,IAAI;MAACoB,KAAK,EAAE,QAAS;MAACC,IAAI,eAAEvB,KAAA,CAAAW,aAAA,CAACN,UAAU,MAAE;IAAE,CAAE,CAAE;IAC3DmB,IAAI,EAAE,IAAK;IACXC,OAAO,EAAE;EAAQ,CACpB,CAEQ,CAAC;AAE1B,CAAC","ignoreList":[]}

package/components/SearchWidget/index.d.ts

@@ -0,0 +1 @@
+export * from "./SearchWidget.js";

package/components/SearchWidget/index.js

@@ -0,0 +1,3 @@
+export * from "./SearchWidget.js";
+
+//# sourceMappingURL=index.js.map

package/components/SearchWidget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SearchWidget.js\";\n"],"mappings":"AAAA","ignoreList":[]}