@map-colonies/react-components 3.7.4 → 3.10.0

package/dist/date-range-picker/date-range-picker.form-control.js

@@ -1,15 +1,28 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimeRangePickerFormControl = void 0;
 var react_1 = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
 var react_core_1 = require("@map-colonies/react-core");
@@ -18,12 +31,12 @@ var defaults_1 = __importDefault(require("../models/defaults"));
 var popover_1 = require("../popover");
 var date_range_picker_1 = require("./date-range-picker");
 require("./date-range-picker.form-control.css");
-exports.DateTimeRangePickerFormControl = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    var _h = react_1.useState(null), from = _h[0], setFrom = _h[1];
-    var _j = react_1.useState(null), to = _j[0], setTo = _j[1];
-    var _k = react_1.useState(defaults_1.default.DATE_PICKER.dateFormat), dateFormat = _k[0], setDateFormat = _k[1];
-    var _l = react_1.default.useState(null), anchorEl = _l[0], setAnchorEl = _l[1];
+var DateTimeRangePickerFormControl = function (props) {
+    var _a, _b, _c, _d, _e, _f;
+    var _g = react_1.useState(null), from = _g[0], setFrom = _g[1];
+    var _h = react_1.useState(null), to = _h[0], setTo = _h[1];
+    var _j = react_1.useState(defaults_1.default.DATE_RANGE_PICKER.dateFormat), dateFormat = _j[0], setDateFormat = _j[1];
+    var _k = react_1.default.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
     var handleClick = function (event) {
         setAnchorEl(event.currentTarget);
     };
@@ -37,27 +50,29 @@ exports.DateTimeRangePickerFormControl = function (props) {
         setAnchorEl(null);
     };
     var open = Boolean(anchorEl);
-    var controlsLayout = (_a = props.controlsLayout, (_a !== null && _a !== void 0 ? _a : 'column'));
+    var controlsLayout = (_a = props.controlsLayout) !== null && _a !== void 0 ? _a : 'column';
     react_1.useEffect(function () {
         var _a;
-        setFrom((_a = props.from, (_a !== null && _a !== void 0 ? _a : null)));
+        setFrom((_a = props.from) !== null && _a !== void 0 ? _a : null);
     }, [props.from]);
     react_1.useEffect(function () {
         var _a;
-        setTo((_a = props.to, (_a !== null && _a !== void 0 ? _a : null)));
+        setTo((_a = props.to) !== null && _a !== void 0 ? _a : null);
     }, [props.to]);
     react_1.useEffect(function () {
         var _a;
-        setDateFormat((_a = props.dateFormat, (_a !== null && _a !== void 0 ? _a : defaults_1.default.DATE_PICKER.dateFormat)));
+        setDateFormat((_a = props.dateFormat) !== null && _a !== void 0 ? _a : defaults_1.default.DATE_RANGE_PICKER.dateFormat);
     }, [props.dateFormat]);
-    var startPlaceHolderText = (_c = (_b = props.local) === null || _b === void 0 ? void 0 : _b.startPlaceHolderText, (_c !== null && _c !== void 0 ? _c : defaults_1.default.DATE_PICKER.local.startPlaceHolderText));
-    var endPlaceHolderText = (_e = (_d = props.local) === null || _d === void 0 ? void 0 : _d.endPlaceHolderText, (_e !== null && _e !== void 0 ? _e : defaults_1.default.DATE_PICKER.local.endPlaceHolderText));
+    var startPlaceHolderText = (_c = (_b = props.local) === null || _b === void 0 ? void 0 : _b.startPlaceHolderText) !== null && _c !== void 0 ? _c : defaults_1.default.DATE_RANGE_PICKER.local.startPlaceHolderText;
+    var endPlaceHolderText = (_e = (_d = props.local) === null || _d === void 0 ? void 0 : _d.endPlaceHolderText) !== null && _e !== void 0 ? _e : defaults_1.default.DATE_RANGE_PICKER.local.endPlaceHolderText;
     var renderAsButton = props.renderAsButton === undefined
-        ? defaults_1.default.DATE_PICKER.renderAsButton
+        ? defaults_1.default.DATE_RANGE_PICKER.renderAsButton
         : props.renderAsButton;
-    var offset = props.offset === undefined ? defaults_1.default.DATE_PICKER.offset : props.offset;
+    var offset = props.offset === undefined
+        ? defaults_1.default.DATE_RANGE_PICKER.offset
+        : props.offset;
     var disableFuture = props.disableFuture === undefined
-        ? defaults_1.default.DATE_PICKER.disableFuture
+        ? defaults_1.default.DATE_RANGE_PICKER.disableFuture
         : props.disableFuture;
     var controlText = react_1.useMemo(function () {
         return (from ? date_fns_1.format(from, dateFormat) : startPlaceHolderText) + " - " + (to ? date_fns_1.format(to, dateFormat) : endPlaceHolderText);
@@ -69,12 +84,12 @@ exports.DateTimeRangePickerFormControl = function (props) {
                 onClick: handleClickInput,
             } })),
         react_1.default.createElement(popover_1.Popover, { open: open, anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, keepMounted: true },
-            react_1.default.createElement(date_range_picker_1.DateTimeRangePicker, { controlsLayout: controlsLayout, contentWidth: (_g = (_f = anchorEl) === null || _f === void 0 ? void 0 : _f.clientWidth, (_g !== null && _g !== void 0 ? _g : 0)) - offset, dateFormat: dateFormat, disableFuture: disableFuture, minDate: props.minDate, maxDate: props.maxDate, local: props.local, from: (from !== null && from !== void 0 ? from : undefined), to: (to !== null && to !== void 0 ? to : undefined), onChange: function (_a) {
+            react_1.default.createElement(date_range_picker_1.DateTimeRangePicker, { controlsLayout: controlsLayout, contentWidth: ((_f = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth) !== null && _f !== void 0 ? _f : 0) - offset, dateFormat: dateFormat, disableFuture: disableFuture, minDate: props.minDate, maxDate: props.maxDate, local: props.local, from: from !== null && from !== void 0 ? from : undefined, to: to !== null && to !== void 0 ? to : undefined, onChange: function (_a) {
                     var from = _a.from, to = _a.to;
-                    setFrom((from !== null && from !== void 0 ? from : null));
-                    setTo((to !== null && to !== void 0 ? to : null));
+                    setFrom(from !== null && from !== void 0 ? from : null);
+                    setTo(to !== null && to !== void 0 ? to : null);
                     props.onChange({ from: from, to: to });
                     handleClose();
                 } }))));
 };
-//# sourceMappingURL=date-range-picker.form-control.js.map
+exports.DateTimeRangePickerFormControl = DateTimeRangePickerFormControl;

package/dist/date-range-picker/date-range-picker.js

@@ -1,15 +1,28 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimeRangePicker = void 0;
 var react_1 = __importStar(require("react"));
 var date_fns_1 = require("date-fns");
 var locale_1 = require("date-fns/locale");
@@ -41,32 +54,32 @@ var useStyle = styles_1.makeStyles(function (theme) {
         },
     });
 });
-exports.DateTimeRangePicker = function (props) {
+var DateTimeRangePicker = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var classes = useStyle();
     var theme = react_core_1.useTheme();
     var themeMui = theme_1.useMappedMuiTheme(theme);
     var _l = react_1.useState(null), from = _l[0], setFrom = _l[1];
     var _m = react_1.useState(null), to = _m[0], setTo = _m[1];
-    var _o = react_1.useState(defaults_1.default.DATE_PICKER.dateFormat), dateFormat = _o[0], setDateFormat = _o[1];
-    var flexDirection = (_a = props.controlsLayout, (_a !== null && _a !== void 0 ? _a : defaults_1.default.DATE_PICKER.controlsLayout));
-    var disableFuture = (_b = props.disableFuture, (_b !== null && _b !== void 0 ? _b : defaults_1.default.DATE_PICKER.disableFuture));
-    var startPlaceHolderText = (_d = (_c = props.local) === null || _c === void 0 ? void 0 : _c.startPlaceHolderText, (_d !== null && _d !== void 0 ? _d : defaults_1.default.DATE_PICKER.local.startPlaceHolderText));
-    var endPlaceHolderText = (_f = (_e = props.local) === null || _e === void 0 ? void 0 : _e.endPlaceHolderText, (_f !== null && _f !== void 0 ? _f : defaults_1.default.DATE_PICKER.local.endPlaceHolderText));
-    var setText = (_h = (_g = props.local) === null || _g === void 0 ? void 0 : _g.setText, (_h !== null && _h !== void 0 ? _h : defaults_1.default.DATE_PICKER.local.setText));
-    var calendarLocale = (_k = (_j = props.local) === null || _j === void 0 ? void 0 : _j.calendarLocale, (_k !== null && _k !== void 0 ? _k : defaults_1.default.DATE_PICKER.local.calendarLocale));
+    var _o = react_1.useState(defaults_1.default.DATE_RANGE_PICKER.dateFormat), dateFormat = _o[0], setDateFormat = _o[1];
+    var flexDirection = (_a = props.controlsLayout) !== null && _a !== void 0 ? _a : defaults_1.default.DATE_RANGE_PICKER.controlsLayout;
+    var disableFuture = (_b = props.disableFuture) !== null && _b !== void 0 ? _b : defaults_1.default.DATE_RANGE_PICKER.disableFuture;
+    var startPlaceHolderText = (_d = (_c = props.local) === null || _c === void 0 ? void 0 : _c.startPlaceHolderText) !== null && _d !== void 0 ? _d : defaults_1.default.DATE_RANGE_PICKER.local.startPlaceHolderText;
+    var endPlaceHolderText = (_f = (_e = props.local) === null || _e === void 0 ? void 0 : _e.endPlaceHolderText) !== null && _f !== void 0 ? _f : defaults_1.default.DATE_RANGE_PICKER.local.endPlaceHolderText;
+    var setText = (_h = (_g = props.local) === null || _g === void 0 ? void 0 : _g.setText) !== null && _h !== void 0 ? _h : defaults_1.default.DATE_RANGE_PICKER.local.setText;
+    var calendarLocale = (_k = (_j = props.local) === null || _j === void 0 ? void 0 : _j.calendarLocale) !== null && _k !== void 0 ? _k : defaults_1.default.DATE_RANGE_PICKER.local.calendarLocale;
     var locale = calendarLocale === enums_1.SupportedLocales.HE ? locale_1.he : locale_1.enUS;
     react_1.useEffect(function () {
         var _a;
-        setFrom((_a = props.from, (_a !== null && _a !== void 0 ? _a : null)));
+        setFrom((_a = props.from) !== null && _a !== void 0 ? _a : null);
     }, [props.from]);
     react_1.useEffect(function () {
         var _a;
-        setTo((_a = props.to, (_a !== null && _a !== void 0 ? _a : null)));
+        setTo((_a = props.to) !== null && _a !== void 0 ? _a : null);
     }, [props.to]);
     react_1.useEffect(function () {
         var _a;
-        setDateFormat((_a = props.dateFormat, (_a !== null && _a !== void 0 ? _a : defaults_1.default.DATE_PICKER.dateFormat)));
+        setDateFormat((_a = props.dateFormat) !== null && _a !== void 0 ? _a : defaults_1.default.DATE_RANGE_PICKER.dateFormat);
     }, [props.dateFormat]);
     var isRangeValid = Boolean((date_fns_1.isValid(from) && !to) ||
         (date_fns_1.isValid(to) && !from) ||
@@ -80,12 +93,12 @@ exports.DateTimeRangePicker = function (props) {
     return (react_1.default.createElement(core_1.ThemeProvider, { theme: themeMui },
         react_1.default.createElement(box_1.Box, { className: classes.container + " drpContainer", display: "flex", flexDirection: flexDirection, width: flexDirection === 'column' ? props.contentWidth : 'unset' },
             react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: date_fns_2.default, locale: locale },
-                react_1.default.createElement(pickers_1.KeyboardDateTimePicker, { variant: "inline", label: startPlaceHolderText, onChange: function (date) { return setFrom(date); }, value: from, disableFuture: disableFuture, format: dateFormat, maxDate: props.maxDate, minDate: props.minDate }),
-                react_1.default.createElement(pickers_1.KeyboardDateTimePicker, { variant: "inline", label: endPlaceHolderText, className: classes.margin, onChange: function (date) { return setTo(date); }, value: to, disableFuture: disableFuture, format: dateFormat, maxDate: props.maxDate, minDate: props.minDate }),
+                react_1.default.createElement(pickers_1.KeyboardDateTimePicker, { variant: "inline", placeholder: startPlaceHolderText, onChange: function (date) { return setFrom(date); }, value: from, disableFuture: disableFuture, format: dateFormat, maxDate: props.maxDate, minDate: props.minDate }),
+                react_1.default.createElement(pickers_1.KeyboardDateTimePicker, { variant: "inline", placeholder: endPlaceHolderText, className: classes.margin, onChange: function (date) { return setTo(date); }, value: to, disableFuture: disableFuture, format: dateFormat, maxDate: props.maxDate, minDate: props.minDate }),
                 react_1.default.createElement(react_core_2.ThemeProvider, { options: theme },
                     react_1.default.createElement(react_core_1.Button, { className: classes.setButton + " " + classes.margin, raised: true, 
                         // variant="outlined"
                         // size="large"
                         onClick: onChange, disabled: !isRangeValid }, setText))))));
 };
-//# sourceMappingURL=date-range-picker.js.map
+exports.DateTimeRangePicker = DateTimeRangePicker;

package/dist/date-range-picker/index.d.ts

@@ -1,3 +1,2 @@
 export * from './date-range-picker';
 export * from './date-range-picker.form-control';
-//# sourceMappingURL=index.d.ts.map

package/dist/date-range-picker/index.js

@@ -1,8 +1,14 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./date-range-picker"));
-__export(require("./date-range-picker.form-control"));
-//# sourceMappingURL=index.js.map
+__exportStar(require("./date-range-picker"), exports);
+__exportStar(require("./date-range-picker.form-control"), exports);

package/dist/file-picker/file-picker.css

@@ -0,0 +1,56 @@
+body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
+  direction: rtl !important;
+}
+
+body[dir='rtl'] .chonky-chonkyRoot {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-infoText {
+  margin-left: unset;
+  margin-right: 12px;
+}
+
+body[dir='rtl'] .chonky-contextMenuList .MuiListItemText-root,
+body[dir='rtl'] .chonky-dropdownList .MuiListItemText-root {
+  text-align: right;
+}
+
+body[dir='rtl'] .chonky-icon {
+  margin-right: unset;
+  margin-left: 8px;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide'] {
+  box-shadow: unset;
+}
+
+.chonky-chonkyRoot div[class^='folderBackSide']::after {
+  border-color: var(--fp-theme-background, #fff)
+    var(--fp-theme-background, #fff) transparent transparent;
+}
+
+.chonky-chonkyRoot div[class^='listFileEntryIcon-'] {
+  color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class*='previewFile-d'] {
+  background-color: #d5d5d5;
+}
+
+.chonky-chonkyRoot div[class^='selectionIndicator-'] {
+  background: var(--fp-theme-selection-background, #455570);
+}
+
+.chonky-chonkyRoot {
+  background-color: var(--fp-theme-background, #fff) !important;
+}
+
+.chonky-contextMenuList {
+  background-color: var(--fp-theme-surface, #fff) !important;
+}
+
+button[class*='chonky-activeButton'],
+.chonky-selectionSizeText {
+  color: var(--fp-theme-primary, #24aee9) !important;
+}

package/dist/file-picker/file-picker.d.ts

@@ -0,0 +1,275 @@
+import React from 'react';
+import { ChonkyFileActionData, FileArray as ChonkyFileArray, FileBrowserProps, FileData as ChonkyFileData, FileHelper as ChonkyFileHelper } from 'chonky';
+import { SupportedLocales } from '../models';
+import './file-picker.css';
+export declare type FileActionData = ChonkyFileActionData;
+export declare type FileArray = ChonkyFileArray;
+export declare type FileData = ChonkyFileData;
+export declare class FileHelper extends ChonkyFileHelper {
+}
+export declare const FilePickerActions: {
+    CopyFiles: import("tsdef").WritableProps<{
+        readonly id: "copy_files";
+        readonly requiresSelection: true;
+        readonly hotkeys: readonly ["ctrl+c"];
+        readonly button: {
+            readonly name: "Copy selection";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.copy;
+        };
+    }>;
+    CreateFolder: import("tsdef").WritableProps<{
+        readonly id: "create_folder";
+        readonly button: {
+            readonly name: "Create folder";
+            readonly toolbar: true;
+            readonly tooltip: "Create a folder";
+            readonly icon: import("chonky").ChonkyIconName.folderCreate;
+        };
+    }>;
+    UploadFiles: import("tsdef").WritableProps<{
+        readonly id: "upload_files";
+        readonly button: {
+            readonly name: "Upload files";
+            readonly toolbar: true;
+            readonly tooltip: "Upload files";
+            readonly icon: import("chonky").ChonkyIconName.upload;
+        };
+    }>;
+    DownloadFiles: import("tsdef").WritableProps<{
+        readonly id: "download_files";
+        readonly requiresSelection: true;
+        readonly button: {
+            readonly name: "Download files";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.download;
+        };
+    }>;
+    DeleteFiles: import("tsdef").WritableProps<{
+        readonly id: "delete_files";
+        readonly requiresSelection: true;
+        readonly hotkeys: readonly ["delete"];
+        readonly button: {
+            readonly name: "Delete files";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.trash;
+        };
+    }>;
+    OpenSelection: import("tsdef").WritableProps<{
+        readonly id: "open_selection";
+        readonly hotkeys: readonly ["enter"];
+        readonly requiresSelection: true;
+        readonly fileFilter: typeof ChonkyFileHelper.isOpenable;
+        readonly button: {
+            readonly name: "Open selection";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.openFiles;
+        };
+    }>;
+    SelectAllFiles: import("tsdef").WritableProps<{
+        readonly id: "select_all_files";
+        readonly hotkeys: readonly ["ctrl+a"];
+        readonly button: {
+            readonly name: "Select all files";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.selectAllFiles;
+        };
+        readonly selectionTransform: import("chonky").FileSelectionTransform;
+    }>;
+    ClearSelection: import("tsdef").WritableProps<{
+        readonly id: "clear_selection";
+        readonly hotkeys: readonly ["escape"];
+        readonly button: {
+            readonly name: "Clear selection";
+            readonly toolbar: true;
+            readonly contextMenu: true;
+            readonly group: "Actions";
+            readonly icon: import("chonky").ChonkyIconName.clearSelection;
+        };
+        readonly selectionTransform: import("chonky").FileSelectionTransform;
+    }>;
+    EnableListView: import("tsdef").WritableProps<{
+        readonly id: "enable_list_view";
+        readonly fileViewConfig: {
+            readonly mode: import("chonky").FileViewMode.List;
+            readonly entryHeight: 30;
+        };
+        readonly button: {
+            readonly name: "Switch to List view";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.list;
+            readonly iconOnly: true;
+        };
+    }>;
+    EnableCompactView: import("tsdef").WritableProps<{
+        readonly id: "enable_compact_view";
+        readonly fileViewConfig: {
+            readonly mode: import("chonky").FileViewMode.Compact;
+            readonly entryHeight: 40;
+            readonly entryWidth: 220;
+        };
+        readonly button: {
+            readonly name: "Switch to Compact view";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.compact;
+            readonly iconOnly: true;
+        };
+    }>;
+    EnableGridView: import("tsdef").WritableProps<{
+        readonly id: "enable_grid_view";
+        readonly fileViewConfig: {
+            readonly mode: import("chonky").FileViewMode.Grid;
+            readonly entryWidth: 165;
+            readonly entryHeight: 130;
+        };
+        readonly button: {
+            readonly name: "Switch to Grid view";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.smallThumbnail;
+            readonly iconOnly: true;
+        };
+    }>;
+    SortFilesByName: import("tsdef").WritableProps<{
+        readonly id: "sort_files_by_name";
+        readonly sortKeySelector: (file: import("tsdef").Nullable<ChonkyFileData>) => string | undefined;
+        readonly button: {
+            readonly name: "Sort by name";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    SortFilesBySize: import("tsdef").WritableProps<{
+        readonly id: "sort_files_by_size";
+        readonly sortKeySelector: (file: import("tsdef").Nullable<ChonkyFileData>) => number | undefined;
+        readonly button: {
+            readonly name: "Sort by size";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    SortFilesByDate: import("tsdef").WritableProps<{
+        readonly id: "sort_files_by_date";
+        readonly sortKeySelector: (file: import("tsdef").Nullable<ChonkyFileData>) => string | Date | undefined;
+        readonly button: {
+            readonly name: "Sort by date";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    ToggleHiddenFiles: import("tsdef").WritableProps<{
+        readonly id: "toggle_hidden_files";
+        readonly hotkeys: readonly ["ctrl+h"];
+        readonly option: {
+            readonly id: string;
+            readonly defaultValue: true;
+        };
+        readonly button: {
+            readonly name: "Show hidden files";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    ToggleShowFoldersFirst: import("tsdef").WritableProps<{
+        readonly id: "toggle_show_folders_first";
+        readonly option: {
+            readonly id: string;
+            readonly defaultValue: true;
+        };
+        readonly button: {
+            readonly name: "Show folders first";
+            readonly toolbar: true;
+            readonly group: "Options";
+        };
+    }>;
+    FocusSearchInput: import("tsdef").WritableProps<{
+        readonly id: "focus_search_input";
+        readonly hotkeys: readonly ["ctrl+f"];
+    }>;
+    ToggleDarkMode: import("tsdef").WritableProps<{
+        readonly id: "enable_dark_mode";
+        readonly option: {
+            readonly id: string;
+            readonly defaultValue: false;
+        };
+        readonly button: {
+            readonly name: "Enable dark mode";
+            readonly toolbar: true;
+            readonly icon: import("chonky").ChonkyIconName.list;
+            readonly iconOnly: true;
+        };
+    }>;
+    MouseClickFile: import("tsdef").WritableProps<{
+        readonly id: "mouse_click_file";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").MouseClickFilePayload;
+    }>;
+    KeyboardClickFile: import("tsdef").WritableProps<{
+        readonly id: "keyboard_click_file";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").KeyboardClickFilePayload;
+    }>;
+    StartDragNDrop: import("tsdef").WritableProps<{
+        readonly id: "start_drag_n_drop";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").StartDragNDropPayload;
+    }>;
+    EndDragNDrop: import("tsdef").WritableProps<{
+        readonly id: "end_drag_n_drop";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").EndDragNDropPayload;
+    }>;
+    MoveFiles: import("tsdef").WritableProps<{
+        readonly id: "move_files";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").MoveFilesPayload;
+    }>;
+    ChangeSelection: import("tsdef").WritableProps<{
+        readonly id: "change_selection";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").ChangeSelectionPayload;
+    }>;
+    OpenFiles: import("tsdef").WritableProps<{
+        readonly id: "open_files";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").OpenFilesPayload;
+    }>;
+    OpenParentFolder: import("tsdef").WritableProps<{
+        readonly id: "open_parent_folder";
+        readonly hotkeys: readonly ["backspace"];
+        readonly button: {
+            readonly name: "Go up a directory";
+            readonly toolbar: true;
+            readonly contextMenu: false;
+            readonly icon: import("chonky").ChonkyIconName.openParentFolder;
+            readonly iconOnly: true;
+        };
+    }>;
+    OpenFileContextMenu: import("tsdef").WritableProps<{
+        readonly id: "open_file_context_menu";
+        readonly __payloadType: import("chonky/dist/types/action-payloads.types").OpenFileContextMenuPayload;
+    }>;
+};
+export declare type FilePickerView = typeof FilePickerView[keyof typeof FilePickerView];
+export declare const FilePickerView: {
+    readonly listView: "enable_list_view";
+    readonly gridView: "enable_grid_view";
+};
+export interface FilePickerTheme {
+    primary: string;
+    background: string;
+    surface: string;
+    textOnBackground: string;
+    selectionBackground: string;
+}
+interface FilePickerProps extends Partial<FileBrowserProps> {
+    theme?: FilePickerTheme;
+    styles?: Record<string, string>;
+    defaultView?: FilePickerView;
+    readOnlyMode?: boolean;
+    locale?: SupportedLocales;
+}
+export declare const FilePicker: React.FC<FilePickerProps>;
+export {};