@bigbinary/neeto-folders-frontend 1.1.5 → 1.1.7

package/README.md

@@ -1,7 +1,7 @@
 # neeto-folders-nano
 
-The `neeto-folders-nano` acts as the source of truth for the new nano's structure,
-configs, data etc.
+The `neeto-folders-nano` acts as the source of truth for the new nano's
+structure, configs, data etc.
 
 ## Contents
 
@@ -37,13 +37,7 @@ configs, data etc.
    bundle install
    ```
 
-3. Add this line to your application's `config/routes.rb` file
-
-   ```ruby
-    mount NeetoFoldersEngine::Engine => "/neeto_folders_engine"
-   ```
-
-4. Add required migrations in the `db/migrate` folder. Run the following
+3. Add required migrations in the `db/migrate` folder. Run the following
    commands to copy the migrations from the engine to the host application.
 
    ```shell
@@ -53,23 +47,60 @@ configs, data etc.
 
 #### Usage
 
-1. Replace NeetoFoldersNano with your project name
+1. Define the folder model in your application by extending the
+   `NeetoFoldersEngine::Folder` base class. Below is the sample code in
+   NeetoRecord that defines a `RecordingFolder` model by extending the
+   `NeetoFoldersEngine::Folder` to manage recordings.
+
+   ```ruby
+   class RecordingFolder < NeetoFoldersEngine::Folder
+     has_many :recordings, -> { unscope(where: :deleted_at) }, foreign_key: :folder_id, dependent: :nullify
+   ```
 
-   Create a `script.rb` file in the project root and paste the script from the
-   following file.
+   `NeetoFoldersEngine` also expects a instance method `items` to be defined in
+   the extended class. This enables the `NeetoFoldersEngine` to keep track of
+   the count of items in the folder. Below is a sample code from NeetoRecord.
 
-   [Replace project name script](./docs/engine/replace-project-name-script.md)
+   ```ruby
+   def items
+     recordings
+   end
+   ```
 
-2. Run the file using the following command:
+2. Include the `NeetoFoldersEngine::Folderable` in the model which should belong
+   to a folder. Order of include is important. Include `Folderable` after
+   `Deletable` from neeto-commons-backend to allow `Folderable` to override the
+   `soft_delete` method.
 
-   ```shell
-      ruby script.rb
+   ```ruby
+   include NeetoFoldersEngine::Folderable
    ```
 
-Notes ⚠️
+3. `NeetoFoldersEngine` also exposes a controller class
+   `NeetoFoldersEngine::FoldersController` with `index`, `show`, `create`,
+   `update`, `destroy`, `bulk_update`, `bulk_destroy`, and `reorder` actions to
+   manage folders. The host application can extend this class to manage their
+   folders. Make sure the routes are properly configured to direct to these
+   actions.
 
-- Don't commit this file.
-- Project name should be given in PascalCase.
+   Similar to the `RecordingFolder < NeetoFoldersEngine::Folder`, the
+   `NeetoFoldersEngine::FoldersController` base controller expects a `folders`
+   method to be defined in the extended class that allows the controller to
+   target folder instances that belongs to a particular type. Given below is
+   sample definition in NeetoRecord which extracts recording folders that should
+   be managed by the extended controller.
+
+   ```ruby
+   class Api::V1::FoldersController < NeetoFoldersEngine::FoldersController
+
+     private
+
+       def folders
+         @_folders ||= @organization.recording_folders.includes(:recordings)
+       end
+     end
+
+   ```
 
 ### Frontend package
 
@@ -82,21 +113,248 @@ Notes ⚠️
    ```
 
 ### Instructions for development
-Check the [Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) for step-by-step instructions to develop the frontend package.
+
+Check the
+[Frontend package development guide](https://neeto-engineering.neetokb.com/p/a-d34cb4b0)
+for step-by-step instructions to develop the frontend package.
 
 #### Usage
 
-1. Import `WelcomeScreen` component from "@bigbinary/neeto-folders-frontend"
+`neeto-folders-frontend` exports a set of components, hooks, utils and constants
+to be integrated in the host application.
 
-   ```javascript
-   import React from "react";
+Most of the above exports accepts a configuration object with certain
+properties. Given below is the structure of default `config` object. You can
+pass your own config object as argument or props to customize behaviors that
+suits the host product. Define this constant in a constant file and customize
+certain properties such as params as necessary.
 
-   import { WelcomeScreen } from "@bigbinary/neeto-folders-frontend";
+```js
+{
 
-   const App = () => <WelcomeScreen />;
+  type: "FOLDER", // A unique type key for query keys.
+  maxDepth: 2, // Maximum allowed depth for folder tree
+  folderPath: "/folders/:folderId", // Path for handling URL redirections and params matching.
+  itemLabel: t("common.items"), // For displaying the item label in counts
+  itemKeys: [], // For invalidation purposes. Keys in this array will be invalidated along with folders.
+  params: {}, // Params to be passed to APIs along with other params. Can be used for sorting and similar.
+  api: { // Folder CRUD methods.
+    fetch: noop,
+    get: noop,
+    create: noop,
+    update: noop,
+    destroy: noop,
+    bulkUpdate: noop,
+    bulkDestroy: noop,
+  }
+}
+```
 
-   export default App;
-   ```
+#### Components
+
+```js
+import * as components from "@bigbinary/neeto-folders-frontend/components";
+```
+
+1.  `FoldersContext`: This component renders all alerts and panes related to
+    folders. Make sure this component is included in some part of your
+    application.
+
+    ###### Props:
+
+    - `config`: A config object to customize the folders behavior.
+
+    Sample usage:
+
+    ```jsx
+    import { FoldersContext } from "@bigbinary/neeto-folders-frontend/components";
+    // ....
+    <FoldersContext config={foldersConfig}>
+      <ApplicationComponent>
+    </FoldersContext>
+    ```
+
+2.  `FoldersTree`: This component renders the folders in tree a tree structure.
+
+    ###### Props:
+
+    - `config`: A config object to customize the folders behavior.
+
+    Sample usage:
+
+    ```jsx
+    import { FoldersTree } from "@bigbinary/neeto-folders-frontend/components";
+    // ....
+    <FoldersTree config={foldersConfig} />;
+    ```
+
+3.  `FoldersList`: Component renders list of folders. If no folder is
+    selected/active, renders list of root folders. If inside a selected folder,
+    renders list of sub-folders. The active folder is identified based on the
+    param in the URL that matches the `folderPath` in the `config` object.
+
+    ###### Props:
+
+    - `config`: A config object to customize the folders behavior.
+
+    - `selection`: An array of folder ids indicating id of selected folders for
+      bulk selection.
+
+    - `onSelect`: Callback triggered when checkbox is selected for a folder item
+      for bulk selection.
+
+    Sample usage:
+
+    ```jsx
+    import { FoldersList } from "@bigbinary/neeto-folders-frontend/components";
+    // ....
+    <FoldersList
+      config={foldersConfig}
+      onSelect={onSelectFolder}
+      selection={folderSelection}
+    />;
+    ```
+
+4.  `MoveToFoldersPane`: This component can be used in host applications to move
+    items to a folder. Component renders current list of folders in pane with
+    radio buttons and invokes callbacks for folder selections.
+
+    ###### Props:
+
+    - `isOpen`: Boolean value that controls pane visibility.
+
+    - `item`: An item object that is to be moved to the folder.
+
+    - `config`: A config object to customize the folders behavior.
+
+    - `submitButtonProps`: Pane "Submit" button overrides.
+
+    - `cancelButtonProps`: Pane "Cancel" button overrides.
+
+    - `removeButtonProps`: Pane "Remove from folder" button overrides. Note that
+      the button will be hidden unless the `onRemove` prop is supplied.
+
+    - `onSubmit(folderId)`: Callback invoked with id of selected folder on
+      submit.
+
+    - `onClose()`: Callback invoked when the pane is closed.
+
+    - `onRemove()`: Callback invoked when the Remove from folder button is
+      pressed. Note that the button will be hidden unless this prop is supplied.
+
+    - `onSelect`: Callback triggered when checkbox is selected for a folder item
+      for bulk selection.
+
+    Sample usage:
+
+    ```jsx
+    import { MoveToFoldersPane } from "@bigbinary/neeto-folders-frontend/components";
+    // ....
+    <MoveToFoldersPane
+      item={itemToMove}
+      onSelect={onSelectFolder}
+      selection={folderSelection}
+    />;
+    ```
+
+#### Hooks
+
+```js
+import * as hooks from "@bigbinary/neeto-folders-frontend/hooks";
+```
+
+1. `useFolders(config)`: Hook that return the data for all folders in tree
+   structure.
+
+   ###### Arguments:
+
+   - `config`: A config object to customize the folders behavior.
+
+   ###### Returns:
+
+   - `isLoading`: `true` when data is being fetched for active folder. `false`
+     otherwise.
+
+   - `folders`: Data of all folders of given type in tree structure.
+
+2. `useFolder(config)`: Hook that return the data related to current active
+   folder based on URL param.
+
+   ###### Arguments:
+
+   - `config`: A config object to customize the folders behavior.
+
+   ###### Returns:
+
+   - `isLoading`: `true` when data is being fetched for active folder. `false`
+     otherwise.
+
+   - `folderId`: SID of the current active folder based on URL param.
+
+   - `folder`: Data of the current folder if exists.
+
+3. `useFolderActions(config)`: Hook that return a set of callbacks to trigger
+   actions from host application.
+
+   ###### Arguments:
+
+   - `config`: A config object to customize the folders behavior.
+
+   ###### Returns:
+
+   - `isPending`: `true` when action is in progress. `false` otherwise.
+
+   - `onAdd()`: Initiates the folder create action.
+
+   - `onEdit(folder)`: Initiates the folder edit action. Accepts `folder` data
+     as argument.
+
+   - `onMove(folder)`: Initiates the folder edit action. Accepts `folder` data
+     as argument.
+
+   - `onDelete(folder)`: Initiates the folders delete action. Accepts `folder`
+     data as argument.
+
+   - `onReorder()`: Initiates the reorder folder action. Opens the "Reorder"
+     pane.
+
+#### Utils
+
+```js
+import * as utils from "@bigbinary/neeto-folders-frontend/utils";
+```
+
+1. pathToFolder(folders, folderId):
+
+   ###### Arguments:
+
+   - `folders`: Folders data in tree structure, returned by the `useFolders`
+     hook.
+
+   - `folderId`: Target folder id.
+
+   Returns an flattened array of folders from root folder to current folder with
+   id `folderId`. Useful for showing breadcrumbs and similar.
+
+#### Constants
+
+```js
+import * as constants from "@bigbinary/neeto-folders-frontend/constants";
+```
+
+1. `QUERY_KEYS`: Use query keys to target React Query actions such as
+   invalidations.
+
+   - `[QUERY_KEYS.FOLDERS]`: Targets every query related to folders.
+
+   - `[QUERY_KEYS.FOLDERS, config.folderType]`: Targets every query related to
+     folders of particular type.
+
+   - `[QUERY_KEYS.FOLDERS, config.folderType, QUERY_KEYS.LIST]`: Targets folders
+     list.
+
+   - `[QUERY_KEYS.FOLDERS, config.folderType, QUERY_KEYS.DETAILS, folderId]`:
+     Target folder details of a folder with id `folderId`
 
 ## Instructions for Publishing
 

package/dist/cjs/components.js

@@ -28,9 +28,8 @@ var ramda = require('ramda');
 var Button = require('@bigbinary/neetoui/Button');
 var neetoCist = require('@bigbinary/neeto-cist');
 var Radio = require('@bigbinary/neetoui/Radio');
-var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var core = require('@dnd-kit/core');
-var Folder = require('@bigbinary/neeto-icons/Folder');
+var Reorder = require('@bigbinary/neeto-icons/Reorder');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var reactDom = require('react-dom');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
@@ -357,6 +356,7 @@ var AddEditPane = function AddEditPane(_ref) {
       children: function children() {
         return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+            className: "pb-6",
             children: /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
               className: "w-full space-y-5",
               children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
@@ -413,12 +413,12 @@ var Node = function Node(_ref, ref) {
   }));
   folder.itemCount > 0 && metaInfo.push("".concat(folder.itemCount, " ").concat(itemLabel));
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex",
+    className: "flex w-full min-w-0",
     children: [Array.from({
       length: depth
     }).map(function (_, index) {
       return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "neeto-ui-border-gray-200 relative border-l",
+        className: "neeto-ui-border-gray-300 relative flex-shrink-0 border-l",
         style: {
           width: indentSize,
           left: Math.round(indentSize / 2)
@@ -432,12 +432,14 @@ var Node = function Node(_ref, ref) {
       children: [icon, /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "ml-2",
         children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-          style: "body3",
+          lineHeight: "snug",
+          style: "body1",
           weight: "medium",
           children: folder.name
         }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-          className: "relative -top-0.5",
-          style: "nano",
+          className: "relative mt-0.5",
+          lineHeight: "snug",
+          style: "body3",
           weight: "normal",
           children: metaInfo.join(" . ")
         })]
@@ -477,28 +479,26 @@ var _SelectableNode = function SelectableNode(_ref) {
       }));
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
-    content: t("moveToFolder.notAllowed"),
-    disabled: !isDisabled,
-    position: "top",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames({
-        "opacity-40": isDisabled
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "aria-disabled": isDisabled,
+    className: classNames({
+      "opacity-60": isDisabled
+    }),
+    title: isDisabled ? t("moveToFolder.notAllowed") : undefined,
+    children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
+      depth: depth,
+      folder: folder
+    })), {}, {
+      icon: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
+        readOnly: true,
+        checked: selection === folder.id,
+        className: "neeto-ui-radio__container",
+        name: "move-folder-option"
       }),
-      children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$7(_objectSpread$7({}, _objectSpread$7(_objectSpread$7({}, rest), {}, {
-        depth: depth,
-        folder: folder
-      })), {}, {
-        icon: /*#__PURE__*/jsxRuntime.jsx(Radio.Item, {
-          readOnly: true,
-          checked: selection === folder.id,
-          name: "move-folder-option"
-        }),
-        onClick: isDisabled ? neetoCist.noop : function () {
-          return onSelect(folder);
-        }
-      })), renderChildren()]
-    })
+      onClick: isDisabled ? neetoCist.noop : function () {
+        return onSelect(folder);
+      }
+    })), renderChildren()]
   });
 };
 
@@ -557,6 +557,7 @@ var PaneBody = function PaneBody(_ref) {
         onClick: onAddFolder
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Pane.Body, {
+      className: "pb-6",
       children: folders.map(function (folder) {
         return /*#__PURE__*/react.createElement(_SelectableNode, {
           folder: folder,
@@ -662,10 +663,11 @@ var _DraggableNode = function DraggableNode(_ref) {
       }));
     });
   };
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Node$1, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, rest), {}, {
       className: classNames({
-        "neeto-ui-bg-gray-100 opacity-50 ": isDragging,
+        "neeto-ui-rounded-lg hover:neeto-ui-bg-gray-100 w-full min-w-0 cursor-move transition-colors": true,
+        "neeto-ui-bg-gray-100 opacity-50": isDragging,
         "neeto-ui-border-primary-500 border": isOver,
         "border border-transparent": !isOver
       })
@@ -747,7 +749,9 @@ var ReorderFoldersPane = function ReorderFoldersPane(_ref) {
     });
   };
   var nodeProps = {
-    icon: /*#__PURE__*/jsxRuntime.jsx(Folder, {}),
+    icon: /*#__PURE__*/jsxRuntime.jsx(Reorder, {
+      className: "neeto-ui-text-gray-500 relative -left-[0.3125rem] flex-shrink-0"
+    }),
     itemLabel: config.itemLabel
   };
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -896,7 +900,7 @@ var FolderTile = function FolderTile(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsxs("span", {
       className: "flex min-w-0 flex-grow flex-col gap-2",
       children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
-        className: "-mt-0.5 line-clamp-2 pr-8",
+        className: "-mt-0.5 line-clamp-2 break-words pr-8",
         lineHeight: "snug",
         style: "body1",
         title: folder.name,
@@ -996,7 +1000,7 @@ var FolderNode = function FolderNode(_ref) {
     },
     to: link,
     children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-      className: "line-clamp-1",
+      className: "line-clamp-1 block truncate",
       component: "span",
       style: "body2",
       title: folder.name,
@@ -1075,7 +1079,7 @@ var FoldersTree = function FoldersTree(_ref) {
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{padding-inline:6px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBQ0UsNEJBQ0YsQ0FFQSwyRkFFRSwyQ0FBQSxDQURBLCtDQUFBLENBRUEsZUFDRixDQUVBLGdGQUNFLGlCQUNGLENBRUEsaUNBQ0UseURBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyIubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWVfX2ZvbGRlci1ub2RlIHtcbiAgY29sb3I6IGluaGVyaXQgIWltcG9ydGFudDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlciB7XG4gIHBhZGRpbmctaW5saW5lOiA2cHggIWltcG9ydGFudFxufVxuXG4ubmVldG8tc2lkZWJhci1mb2xkZXJzLXRyZWUuYW50LXRyZWUgLmFudC10cmVlLW5vZGUtY29udGVudC13cmFwcGVyLmFudC10cmVlLW5vZGUtc2VsZWN0ZWQge1xuICBjb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLWFjY2VudC04MDApKSAhaW1wb3J0YW50O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2IodmFyKC0tbmVldG8tdWktd2hpdGUpKTtcbiAgZm9udC13ZWlnaHQ6IDUwMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1zd2l0Y2hlciAuYW50LXRyZWUtc3dpdGNoZXItaWNvbiB7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbn1cblxuLm5lZXRvLWZvbGRlcnMtZ3JpZC12aWV3LXdyYXBwZXIge1xuICBncmlkLXRlbXBsYXRlLWNvbHVtbnM6IHJlcGVhdChhdXRvLWZpbGwsIG1pbm1heCgyNTZweCwgMWZyKSk7XG59XG4iXX0= */";
+var css = ".neeto-sidebar-folders-tree__folder-node{color:inherit!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper{min-width:0;padding-inline:6px!important}.neeto-sidebar-folders-tree.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:rgb(var(--neeto-ui-white));color:rgb(var(--neeto-ui-accent-800))!important;font-weight:500}.neeto-sidebar-folders-tree.ant-tree .ant-tree-switcher .ant-tree-switcher-icon{position:relative}.neeto-folders-grid-view-wrapper{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC9qYXZhc2NyaXB0L3NyYy9jb21wb25lbnRzL25lZXRvLWZvbGRlcnMtbmFuby5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHlDQUNFLHVCQUNGLENBRUEsb0VBRUUsV0FBQSxDQURBLDRCQUVGLENBRUEsMkZBRUUsMkNBQUEsQ0FEQSwrQ0FBQSxDQUVBLGVBQ0YsQ0FFQSxnRkFDRSxpQkFDRixDQUVBLGlDQUNFLHlEQUNGIiwic291cmNlc0NvbnRlbnQiOlsiLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlX19mb2xkZXItbm9kZSB7XG4gIGNvbG9yOiBpbmhlcml0ICFpbXBvcnRhbnQ7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtbm9kZS1jb250ZW50LXdyYXBwZXIge1xuICBwYWRkaW5nLWlubGluZTogNnB4ICFpbXBvcnRhbnQ7XG4gIG1pbi13aWR0aDogMDtcbn1cblxuLm5lZXRvLXNpZGViYXItZm9sZGVycy10cmVlLmFudC10cmVlIC5hbnQtdHJlZS1ub2RlLWNvbnRlbnQtd3JhcHBlci5hbnQtdHJlZS1ub2RlLXNlbGVjdGVkIHtcbiAgY29sb3I6IHJnYih2YXIoLS1uZWV0by11aS1hY2NlbnQtODAwKSkgIWltcG9ydGFudDtcbiAgYmFja2dyb3VuZC1jb2xvcjogcmdiKHZhcigtLW5lZXRvLXVpLXdoaXRlKSk7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbi5uZWV0by1zaWRlYmFyLWZvbGRlcnMtdHJlZS5hbnQtdHJlZSAuYW50LXRyZWUtc3dpdGNoZXIgLmFudC10cmVlLXN3aXRjaGVyLWljb24ge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG59XG5cbi5uZWV0by1mb2xkZXJzLWdyaWQtdmlldy13cmFwcGVyIHtcbiAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiByZXBlYXQoYXV0by1maWxsLCBtaW5tYXgoMjU2cHgsIDFmcikpO1xufSJdfQ== */";
 n(css,{});
 
 exports.FoldersContext = FoldersContext;