@cubone/react-file-manager 1.0.1 → 1.1.0

package/dist/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";.background-secondary{background-color:#6155b4!important}.text-white{color:#fff}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}img,svg{vertical-align:middle}.fm-modal{border:1px solid #c6c6c6;border-radius:5px;width:fit-content;overflow-x:hidden;padding:0;box-shadow:0 2px 10px #00000041}.w-25{width:25%}.file-explorer{font-family:Nunito Sans,sans-serif;border:1px solid #dddddd;height:72dvh;position:relative;width:100%;background-color:#fff;margin-top:1rem;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.file-explorer button{font-family:Nunito Sans,sans-serif}.file-explorer .file-explorer-loading{z-index:3;position:fixed;display:flex;justify-content:center;align-items:center;height:72dvh;width:-webkit-fill-available;background-color:#ffffff8a}.file-explorer .toolbar{min-height:35px;border-bottom:1px solid #dddddd;padding:6px 10px}.file-explorer .toolbar .file-action-container{display:flex;justify-content:space-between}.file-explorer .toolbar .file-action-container>div{display:flex}.file-explorer .toolbar .file-action-container .file-action{background-color:transparent;gap:5px}.file-explorer .toolbar .file-action-container .file-action:hover:not(:disabled){cursor:pointer;background-color:#0000008c!important;border-radius:3px;color:#fff;text-shadow:0px 0px 1px white}.file-explorer .toolbar .file-action-container .file-action:hover:disabled{cursor:default;background-color:transparent!important;color:#b0b0b0;text-shadow:none}.file-explorer .toolbar .fm-toolbar{display:flex;justify-content:space-between}.file-explorer .toolbar .fm-toolbar>div{display:flex}.file-explorer .toolbar .fm-toolbar .toolbar-left-items{display:flex}.file-explorer .toolbar .item-action{background-color:#fff;display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:14px;width:fit-content;border:none}.file-explorer .toolbar .item-action:hover{cursor:pointer;background-color:#0000001f!important;border-radius:3px;color:#5549a3}.file-explorer .toolbar .icon-only{padding:8px!important}.file-explorer .toolbar .item-separator{height:36px;background:#dee1e3;width:1px;margin:0 5px}.file-explorer .file-selected{background-color:#0000000a}.file-explorer .files-container{display:flex;height:calc(72dvh - 52px)}.file-explorer .files-container .navigation-pane{z-index:1;padding:8px 0;position:relative}.file-explorer .files-container .navigation-pane .sb-folders-list{list-style:none;padding:0 6px;height:100%;overflow-y:auto!important}.file-explorer .files-container .navigation-pane .sb-folders-list::-webkit-scrollbar{width:5px;height:8px;padding-top:2px}.file-explorer .files-container .navigation-pane .sb-folders-list::-webkit-scrollbar-thumb{background:#6155b4!important}.file-explorer .files-container .navigation-pane .sb-folders-list .folder-collapsible{margin-left:10px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item{display:flex;align-items:center;margin-bottom:4px;padding:6px 5px;border-radius:4px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item:hover{cursor:pointer;background-color:#0000000a}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .non-expanable{min-width:20px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details{display:flex;align-items:center}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details .folder-open-icon{margin:0 7px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details .folder-close-icon{margin:1px 9px 0 8px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details .sb-folder-name{width:max-content}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .folder-rotate-down{animation:rotateFolderDown .5s linear forwards}@keyframes rotateFolderDown{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .folder-rotate-right{animation:rotateRight .5s linear forwards}@keyframes rotateRight{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.file-explorer .files-container .navigation-pane .sb-folders-list .active-list-item{background-color:#6155b4;color:#fff}.file-explorer .files-container .navigation-pane .sb-folders-list .active-list-item:hover{cursor:pointer;background-color:#6155b4}.file-explorer .files-container .navigation-pane .sb-folders-list .empty-nav-pane{display:flex;justify-content:center;align-items:center;height:100%}.file-explorer .files-container .navigation-pane .sidebar-resize{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10;border-right:1px solid #dee2e6}.file-explorer .files-container .navigation-pane .sidebar-resize:hover,.file-explorer .files-container .navigation-pane .sidebar-dragging{border-right:1px solid #1e3a8a}.file-explorer .files-container .folers-preview{z-index:2;background-color:#fff;padding-right:0;padding-left:0}.file-explorer .files-container .breadcrumb{display:flex;gap:.5rem;overflow-x:scroll;border-bottom:1px solid #dddddd;padding:10px 15px}.file-explorer .files-container .breadcrumb::-webkit-scrollbar{width:5px;padding-top:2px;scrollbar-width:none}.file-explorer .files-container .breadcrumb::-webkit-scrollbar-thumb{background:#6155b4!important}.file-explorer .files-container .folder-name{display:flex;align-items:center;gap:.25rem;font-weight:500;min-width:fit-content}.file-explorer .files-container .folder-name:hover{cursor:pointer;color:#6155b4}.file-explorer .files-container .files{display:flex;align-content:flex-start;flex-wrap:wrap;column-gap:.5em;row-gap:5px;height:60dvh;overflow-y:auto;padding:8px 4px 8px 8px}.file-explorer .files-container .files::-webkit-scrollbar{width:5px;padding-top:2px}.file-explorer .files-container .files::-webkit-scrollbar-thumb{background:#6155b4!important}.file-explorer .files-container .files .file-item{height:80px;width:118px;display:flex;flex-direction:column;gap:.5rem;align-items:center;padding:13px 10px 10px;margin:5px 0;border-radius:5px}.file-explorer .files-container .files .file-item:hover{cursor:pointer;background-color:#0000000a}.file-explorer .files-container .files .file-item .file-name{max-width:115px}.file-explorer .files-container .files .file-moving{opacity:.5}.file-explorer .files-container .empty-folder{display:flex;justify-content:center;align-items:center;width:100%;height:100%}@media screen and (min-height: 600px) and (max-height: 900px){.file-explorer,.file-explorer .file-explorer-loading{height:63dvh}.file-explorer .files-container{height:calc(63dvh - 51px)}.file-explorer .files-container .files{height:46dvh}}@media screen and (min-height: 550px) and (max-height: 600px){.file-explorer,.file-explorer .file-explorer-loading{height:58dvh}.file-explorer .files-container{height:calc(58dvh - 51px)}.file-explorer .files-container .files{height:46dvh}}.close-icon{padding:5px;border-radius:50%}.close-icon:hover{cursor:pointer;background-color:#00000012}.action-input{border:none;border-bottom:1px solid grey;border-top-left-radius:5px;border-top-right-radius:5px;transition:box-shadow .3s;background-color:#f5f5f5;padding:6px 9px;margin-right:8px;width:calc(100% - 18px)}.action-input:focus{outline:none;border-bottom-color:#6155b4!important;box-shadow:inset 0 -1px #6155b4}.folder-error{color:#dc3545;font-size:.8em;margin-top:4px}.file-upload-container .rs-uploader-file-items{max-height:165px;overflow-y:auto!important;overflow-x:hidden!important}.file-upload-container .rs-uploader-file-items::-webkit-scrollbar{width:5px;padding-top:2px}.file-upload-container .rs-uploader-file-items::-webkit-scrollbar-thumb{background:#6155b4!important}.file-upload-container .rs-uploader-file-items:before{content:"Selected files";color:#6155b4;font-weight:600;display:none;margin-left:1px}.file-upload-container .rs-uploader-file-item{border-radius:5px;margin:13px 5px 3px;box-shadow:1px 1px 3px 1px #00000038;-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.22);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,.22)}.file-upload-container.show-uploaded-files .rs-uploader-file-items:before{display:block}.file-previewer{height:75vh}.file-previewer .photo-popup-image{opacity:1;object-fit:contain;height:100%;width:100%;transition:opacity .5s ease-in-out}.file-previewer .img-loading{opacity:0;height:0%;width:0%}.file-context-menu-list{font-size:1.1em}.file-context-menu-list ul{list-style-type:none;padding-left:0;margin:0}.file-context-menu-list ul li{display:flex;gap:6px;align-items:center;padding:6px 18px 6px 14px}.file-context-menu-list ul li:hover{cursor:pointer;background-color:#0000000a}.file-context-menu-list ul li.disable-paste{opacity:.5}.file-context-menu-list ul li.disable-paste:hover{cursor:default;background-color:transparent}.file-delete-confirm .file-delete-confirm-text{border-bottom:1px solid #dddddd;padding:10px 15px;margin-bottom:1rem}.file-delete-confirm .file-delete-confirm-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:1rem;margin-right:1rem}.fm-create-folder-container{padding:8px 0}.fm-create-folder-container .fm-create-folder-input{border-bottom:1px solid #c6c6c6;padding:8px 12px 12px}.fm-create-folder-container .fm-create-folder-action{display:flex;gap:8px;justify-content:flex-end;padding:8px 8px 0 0}.fm-rename-folder-container{padding:8px 0}.fm-rename-folder-container .fm-rename-folder-input{border-bottom:1px solid #c6c6c6;padding:8px 12px 12px}.fm-rename-folder-container .fm-rename-folder-input .fm-rename-warning{display:flex;align-items:center;gap:10px}.fm-rename-folder-container .fm-rename-folder-action{display:flex;gap:8px;justify-content:flex-end;padding:8px 8px 0 0}.fm-upload-file{padding:18px 15px;display:flex;gap:18px}.fm-upload-file .select-files{width:100%}.fm-upload-file .select-files .draggable-file-input{color:#696969;background-color:#f7f7f7;margin-bottom:18px;height:220px;border:2px dashed #ccc;border-radius:5px;display:flex;justify-content:center;align-items:center}.fm-upload-file .select-files .draggable-file-input .input-text{pointer-events:none;display:flex;flex-direction:column;align-items:center}.fm-upload-file .select-files .draggable-file-input:hover,.fm-upload-file .select-files .draggable-file-input.dragging{border-color:#6155b4}.fm-upload-file .select-files .btn-choose-file{display:flex;justify-content:center}.fm-upload-file .select-files .btn-choose-file label{display:inline-block;padding:.4rem .8rem}.fm-upload-file .select-files .btn-choose-file label:hover{cursor:pointer}.fm-upload-file .select-files .btn-choose-file .choose-file-input{display:none}.fm-upload-file .files-progress{width:60%}.fm-upload-file .files-progress h2{font-size:.9em;margin:0}.fm-upload-file .files-progress ul{padding-left:0;padding-right:5px;padding-bottom:10px;margin-top:.7rem;height:220px;overflow-y:auto!important;font-weight:500}.fm-upload-file .files-progress ul::-webkit-scrollbar{width:3px;height:8px;padding-top:2px}.fm-upload-file .files-progress ul::-webkit-scrollbar-thumb{background:#6155b4!important}.fm-upload-file .files-progress ul li{list-style:none;border-bottom:1px solid #c6c6c6;display:flex;gap:5px;margin-bottom:18px;padding-bottom:12px}.fm-upload-file .files-progress ul li .file-icon{width:10%}.fm-upload-file .files-progress ul li .file{width:90%}.fm-upload-file .files-progress ul li .file .file-details{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.fm-upload-file .files-progress ul li .file .file-details .file-info{width:90%;display:flex;align-items:baseline}.fm-upload-file .files-progress ul li .file .file-details .file-info .file-name{display:inline-block;max-width:72%;margin-right:8px}.fm-upload-file .files-progress ul li .file .file-details .file-size{font-size:.7em}.fm-upload-file .files-progress ul li .file .file-details .rm-file:hover{cursor:pointer;color:red}.file-selcted .select-files{width:40%}.fm-context-menu{position:absolute;background-color:#fff;border:1px solid #c6c6c6;border-radius:5px;padding:5px 0;z-index:1}.fm-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e9ecef;padding:.5rem 1rem}.fm-modal-header .fm-modal-heading{margin:0;font-weight:700;color:#000}.dialog[open]{animation:expand .4s forwards}.dialog[open]::backdrop{background:#00000080}@keyframes expand{0%{transform:scale(.4)}to{transform:scale(1)}}.fm-button{border-radius:5px;font-weight:600;border:none}.fm-button:hover{cursor:pointer}.fm-button-primary{background-color:#6155b4;color:#fff}.fm-button-primary:hover{background-color:#4b3f9f}.fm-button-secondary{background-color:#f0f0f0;color:#000}.fm-button-secondary:hover{background-color:#e0e0e0}.fm-button-danger{background-color:#f44336;color:#fff}.fm-button-danger:hover{background-color:#d32f2f}.fm-progress{display:flex;flex-direction:column;gap:5px}.fm-progress .fm-progress-bar{width:100%;border-radius:5px;background-color:#c6c6c6;height:5px}.fm-progress .fm-progress-bar .fm-progress-bar-fill{height:100%;background-color:#6155b4;border-radius:5px;max-width:100%}.fm-progress .fm-progress-status{font-size:.7em}.fm-loader{z-index:3;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:-webkit-fill-available;background-color:#ffffff8a}
+@import"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap";.background-secondary{background-color:#6155b4!important}.text-white{color:#fff}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}img,svg{vertical-align:middle}.fm-modal{border:1px solid #c6c6c6;border-radius:5px;width:fit-content;overflow-x:hidden;padding:0;box-shadow:0 2px 10px #00000041}.w-25{width:25%}.file-explorer{font-family:Nunito Sans,sans-serif;border:1px solid #dddddd;height:72dvh;position:relative;width:100%;background-color:#fff;margin-top:1rem;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.file-explorer button{font-family:Nunito Sans,sans-serif}.file-explorer .file-explorer-loading{z-index:3;position:fixed;display:flex;justify-content:center;align-items:center;height:72dvh;width:-webkit-fill-available;background-color:#ffffff8a}.file-explorer .toolbar{min-height:35px;border-bottom:1px solid #dddddd;padding:6px 10px}.file-explorer .toolbar .file-action-container{display:flex;justify-content:space-between}.file-explorer .toolbar .file-action-container>div{display:flex}.file-explorer .toolbar .file-action-container .file-action{background-color:transparent;gap:5px}.file-explorer .toolbar .file-action-container .file-action:hover:not(:disabled){cursor:pointer;background-color:#0000008c!important;border-radius:3px;color:#fff;text-shadow:0px 0px 1px white}.file-explorer .toolbar .file-action-container .file-action:hover:disabled{cursor:default;background-color:transparent!important;color:#b0b0b0;text-shadow:none}.file-explorer .toolbar .fm-toolbar{display:flex;justify-content:space-between}.file-explorer .toolbar .fm-toolbar>div{display:flex}.file-explorer .toolbar .fm-toolbar .toolbar-left-items{display:flex}.file-explorer .toolbar .item-action{background-color:#fff;display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:14px;width:fit-content;border:none}.file-explorer .toolbar .item-action:hover{cursor:pointer;background-color:#0000001f!important;border-radius:3px;color:#5549a3}.file-explorer .toolbar .icon-only{padding:8px!important}.file-explorer .toolbar .item-separator{height:36px;background:#dee1e3;width:1px;margin:0 5px}.file-explorer .file-selected{background-color:#0000000a}.file-explorer .files-container{display:flex;height:calc(72dvh - 52px)}.file-explorer .files-container .navigation-pane{z-index:1;padding:8px 0;position:relative}.file-explorer .files-container .navigation-pane .sb-folders-list{list-style:none;padding:0 6px;height:100%;overflow-y:auto!important}.file-explorer .files-container .navigation-pane .sb-folders-list::-webkit-scrollbar{width:5px;height:8px;padding-top:2px}.file-explorer .files-container .navigation-pane .sb-folders-list::-webkit-scrollbar-thumb{background:#6155b4!important}.file-explorer .files-container .navigation-pane .sb-folders-list .folder-collapsible{margin-left:10px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item{display:flex;align-items:center;margin-bottom:4px;padding:6px 5px;border-radius:4px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item:hover{cursor:pointer;background-color:#0000000a}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .non-expanable{min-width:20px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details{display:flex;align-items:center}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details .folder-open-icon{margin:0 7px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details .folder-close-icon{margin:1px 9px 0 8px}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .sb-folder-details .sb-folder-name{width:max-content}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .folder-rotate-down{animation:rotateFolderDown .5s linear forwards}@keyframes rotateFolderDown{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.file-explorer .files-container .navigation-pane .sb-folders-list .sb-folders-list-item .folder-rotate-right{animation:rotateRight .5s linear forwards}@keyframes rotateRight{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.file-explorer .files-container .navigation-pane .sb-folders-list .active-list-item{background-color:#6155b4;color:#fff}.file-explorer .files-container .navigation-pane .sb-folders-list .active-list-item:hover{cursor:pointer;background-color:#6155b4}.file-explorer .files-container .navigation-pane .sb-folders-list .empty-nav-pane{display:flex;justify-content:center;align-items:center;height:100%}.file-explorer .files-container .navigation-pane .sidebar-resize{position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:10;border-right:1px solid #dee2e6}.file-explorer .files-container .navigation-pane .sidebar-resize:hover,.file-explorer .files-container .navigation-pane .sidebar-dragging{border-right:1px solid #1e3a8a}.file-explorer .files-container .folers-preview{z-index:2;background-color:#fff;padding-right:0;padding-left:0}.file-explorer .files-container .breadcrumb{display:flex;gap:.5rem;overflow-x:scroll;border-bottom:1px solid #dddddd;padding:10px 15px}.file-explorer .files-container .breadcrumb::-webkit-scrollbar{width:5px;padding-top:2px;scrollbar-width:none}.file-explorer .files-container .breadcrumb::-webkit-scrollbar-thumb{background:#6155b4!important}.file-explorer .files-container .folder-name{display:flex;align-items:center;gap:.25rem;font-weight:500;min-width:fit-content}.file-explorer .files-container .folder-name:hover{cursor:pointer;color:#6155b4}.file-explorer .files-container .files{display:flex;align-content:flex-start;flex-wrap:wrap;column-gap:.5em;row-gap:5px;height:60dvh;overflow-y:auto;padding:8px 4px 8px 8px}.file-explorer .files-container .files::-webkit-scrollbar{width:5px;padding-top:2px}.file-explorer .files-container .files::-webkit-scrollbar-thumb{background:#6155b4!important}.file-explorer .files-container .files .file-item{height:80px;width:118px;display:flex;flex-direction:column;gap:.5rem;align-items:center;padding:13px 10px 10px;margin:5px 0;border-radius:5px}.file-explorer .files-container .files .file-item:hover{cursor:pointer;background-color:#0000000a}.file-explorer .files-container .files .file-item .file-name{max-width:115px}.file-explorer .files-container .files .file-moving{opacity:.5}.file-explorer .files-container .empty-folder{display:flex;justify-content:center;align-items:center;width:100%;height:100%}@media screen and (min-height: 600px) and (max-height: 900px){.file-explorer,.file-explorer .file-explorer-loading{height:63dvh}.file-explorer .files-container{height:calc(63dvh - 51px)}.file-explorer .files-container .files{height:46dvh}}@media screen and (min-height: 550px) and (max-height: 600px){.file-explorer,.file-explorer .file-explorer-loading{height:58dvh}.file-explorer .files-container{height:calc(58dvh - 51px)}.file-explorer .files-container .files{height:46dvh}}.close-icon{padding:5px;border-radius:50%}.close-icon:hover{cursor:pointer;background-color:#00000012}.action-input{border:none;border-bottom:1px solid grey;border-top-left-radius:5px;border-top-right-radius:5px;transition:box-shadow .3s;background-color:#f5f5f5;padding:6px 9px;margin-right:8px;width:calc(100% - 18px)}.action-input:focus{outline:none;border-bottom-color:#6155b4!important;box-shadow:inset 0 -1px #6155b4}.folder-error{color:#dc3545;font-size:.8em;margin-top:4px}.file-upload-container .rs-uploader-file-items{max-height:165px;overflow-y:auto!important;overflow-x:hidden!important}.file-upload-container .rs-uploader-file-items::-webkit-scrollbar{width:5px;padding-top:2px}.file-upload-container .rs-uploader-file-items::-webkit-scrollbar-thumb{background:#6155b4!important}.file-upload-container .rs-uploader-file-items:before{content:"Selected files";color:#6155b4;font-weight:600;display:none;margin-left:1px}.file-upload-container .rs-uploader-file-item{border-radius:5px;margin:13px 5px 3px;box-shadow:1px 1px 3px 1px #00000038;-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.22);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,.22)}.file-upload-container.show-uploaded-files .rs-uploader-file-items:before{display:block}.file-previewer{height:75vh}.file-previewer .photo-popup-image{opacity:1;object-fit:contain;height:100%;width:100%;transition:opacity .5s ease-in-out}.file-previewer .img-loading{opacity:0;height:0%;width:0%}.file-context-menu-list{font-size:1.1em}.file-context-menu-list ul{list-style-type:none;padding-left:0;margin:0}.file-context-menu-list ul li{display:flex;gap:6px;align-items:center;padding:6px 18px 6px 14px}.file-context-menu-list ul li:hover{cursor:pointer;background-color:#0000000a}.file-context-menu-list ul li.disable-paste{opacity:.5}.file-context-menu-list ul li.disable-paste:hover{cursor:default;background-color:transparent}.file-delete-confirm .file-delete-confirm-text{border-bottom:1px solid #dddddd;padding:10px 15px;margin-bottom:1rem}.file-delete-confirm .file-delete-confirm-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:1rem;margin-right:1rem}.fm-create-folder-container{padding:8px 0}.fm-create-folder-container .fm-create-folder-input{border-bottom:1px solid #c6c6c6;padding:8px 12px 12px}.fm-create-folder-container .fm-create-folder-action{display:flex;gap:8px;justify-content:flex-end;padding:8px 8px 0 0}.fm-rename-folder-container{padding:8px 0}.fm-rename-folder-container .fm-rename-folder-input{border-bottom:1px solid #c6c6c6;padding:8px 12px 12px}.fm-rename-folder-container .fm-rename-folder-input .fm-rename-warning{display:flex;align-items:center;gap:10px}.fm-rename-folder-container .fm-rename-folder-action{display:flex;gap:8px;justify-content:flex-end;padding:8px 8px 0 0}.fm-upload-file{padding:18px 15px;display:flex;gap:18px}.fm-upload-file .select-files{width:100%}.fm-upload-file .select-files .draggable-file-input{color:#696969;background-color:#f7f7f7;margin-bottom:18px;height:220px;border:2px dashed #ccc;border-radius:5px;display:flex;justify-content:center;align-items:center}.fm-upload-file .select-files .draggable-file-input .input-text{pointer-events:none;display:flex;flex-direction:column;align-items:center}.fm-upload-file .select-files .draggable-file-input:hover,.fm-upload-file .select-files .draggable-file-input.dragging{border-color:#6155b4}.fm-upload-file .select-files .btn-choose-file{display:flex;justify-content:center}.fm-upload-file .select-files .btn-choose-file label{display:inline-block;padding:.4rem .8rem}.fm-upload-file .select-files .btn-choose-file label:hover{cursor:pointer}.fm-upload-file .select-files .btn-choose-file .choose-file-input{display:none}.fm-upload-file .files-progress{width:60%}.fm-upload-file .files-progress .heading{display:flex;gap:4px}.fm-upload-file .files-progress h2{font-size:.9em;margin:0}.fm-upload-file .files-progress ul{padding-left:0;padding-right:5px;padding-bottom:10px;margin-top:.7rem;height:220px;overflow-y:auto!important;font-weight:500}.fm-upload-file .files-progress ul::-webkit-scrollbar{width:3px;height:8px;padding-top:2px}.fm-upload-file .files-progress ul::-webkit-scrollbar-thumb{background:#6155b4!important}.fm-upload-file .files-progress ul li{list-style:none;border-bottom:1px solid #c6c6c6;display:flex;gap:5px;margin-bottom:18px;padding-bottom:12px}.fm-upload-file .files-progress ul li .file-icon{width:10%}.fm-upload-file .files-progress ul li .file{width:90%}.fm-upload-file .files-progress ul li .file .file-details{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.fm-upload-file .files-progress ul li .file .file-details .file-info{width:90%;display:flex;align-items:baseline}.fm-upload-file .files-progress ul li .file .file-details .file-info .file-name{display:inline-block;max-width:72%;margin-right:8px}.fm-upload-file .files-progress ul li .file .file-details .file-size{font-size:.7em}.fm-upload-file .files-progress ul li .file .file-details .retry-upload{padding:3px;border-radius:50%}.fm-upload-file .files-progress ul li .file .file-details .retry-upload:hover{cursor:pointer;background-color:#00000012;color:#6155b4}.fm-upload-file .files-progress ul li .file .file-details .rm-file:hover{cursor:pointer;color:red}.file-selcted .select-files{width:40%}.fm-context-menu{position:absolute;background-color:#fff;border:1px solid #c6c6c6;border-radius:5px;padding:5px 0;z-index:1}.fm-modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e9ecef;padding:.5rem 1rem}.fm-modal-header .fm-modal-heading{margin:0;font-weight:700;color:#000}.dialog[open]{animation:expand .4s forwards}.dialog[open]::backdrop{background:#00000080}@keyframes expand{0%{transform:scale(.4)}to{transform:scale(1)}}.fm-button{border-radius:5px;font-weight:600;border:none}.fm-button:hover{cursor:pointer}.fm-button-primary{background-color:#6155b4;color:#fff}.fm-button-primary:hover{background-color:#4b3f9f}.fm-button-secondary{background-color:#f0f0f0;color:#000}.fm-button-secondary:hover{background-color:#e0e0e0}.fm-button-danger{background-color:#f44336;color:#fff}.fm-button-danger:hover{background-color:#d32f2f}.fm-progress{display:flex;flex-direction:column;gap:5px}.fm-progress .fm-progress-bar{width:100%;border-radius:5px;background-color:#c6c6c6;height:5px}.fm-progress .fm-progress-bar .fm-progress-bar-fill{height:100%;background-color:#6155b4;border-radius:5px;max-width:100%}.fm-progress .fm-progress-status{font-size:.75em;font-weight:600;display:flex;justify-content:space-between}.fm-progress .fm-upload-canceled{font-size:.75em;font-weight:600;color:red}.fm-loader{z-index:3;position:absolute;display:flex;justify-content:center;align-items:center;height:100%;width:-webkit-fill-available;background-color:#ffffff8a}

package/package.json

@@ -1,57 +1,58 @@
-{
-  "name": "@cubone/react-file-manager",
-  "private": false,
-  "version": "1.0.1",
-  "type": "module",
-  "module": "dist/react-file-manager.es.js",
-  "files": [
-    "dist/",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "semantic-release": "semantic-release"
-  },
-  "dependencies": {
-    "react": "^18.3.1",
-    "react-collapsible": "^2.10.0",
-    "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1",
-    "react-loading": "^2.0.3"
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "sass": "^1.77.6",
-    "semantic-release": "^24.1.0",
-    "vite": "^5.3.1"
-  },
-  "description": "The File Manager Component is an open-source React.js package designed to help developers easily integrate a file manager into their applications. This component provides a user-friendly interface along with essential functionalities for managing files and folders, such as viewing, uploading and deleting within a specified directory structure. Ideal for anyone looking to build or enhance a file management system, this package offers both UI and backend integration capabilities.",
-  "main": "src/index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Saifullah-dev/react-file-manager.git"
-  },
-  "keywords": [
-    "react",
-    "file-manager",
-    "component"
-  ],
-  "author": "Saifullah Zubair",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Saifullah-dev/react-file-manager/issues"
-  },
-  "homepage": "https://github.com/Saifullah-dev/react-file-manager#readme"
-}
+{
+  "name": "@cubone/react-file-manager",
+  "private": false,
+  "version": "1.1.0",
+  "type": "module",
+  "module": "dist/react-file-manager.es.js",
+  "files": [
+    "dist/",
+    "../README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "semantic-release": "semantic-release"
+  },
+  "dependencies": {
+    "axios": "^1.7.5",
+    "react": "^18.3.1",
+    "react-collapsible": "^2.10.0",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-loading": "^2.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "sass": "^1.77.6",
+    "semantic-release": "^24.1.0",
+    "vite": "^5.3.1"
+  },
+  "description": "The File Manager Component is an open-source React.js package designed to help developers easily integrate a file manager into their applications. This component provides a user-friendly interface along with essential functionalities for managing files and folders, such as viewing, uploading and deleting within a specified directory structure. Ideal for anyone looking to build or enhance a file management system, this package offers both UI and backend integration capabilities.",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Saifullah-dev/react-file-manager.git"
+  },
+  "keywords": [
+    "react",
+    "file-manager",
+    "component"
+  ],
+  "author": "Saifullah Zubair",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Saifullah-dev/react-file-manager/issues"
+  },
+  "homepage": "https://github.com/Saifullah-dev/react-file-manager#readme"
+}

package/src/index.js

@@ -1 +1 @@
-export { default as FileManager } from "./File Manager/FileManager";
+export { default as FileManager } from "./File Manager/FileManager";

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Saifullah Zubair
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,93 +0,0 @@
-# React File Manager
-
-An open-source React.js package for easy integration of a file manager into applications. It provides a user-friendly interface for managing files and folders, including viewing, uploading, and deleting, with full UI and backend integration.
-
-## Features
-
-- **View Files and Folders**: Display the directory structure with folders and files.
-- **Upload Files**: Upload new files to a selected directory.
-- **Delete Files and Folders**: Remove unwanted files or folders.
-- **Toolbar**: Access common file operations such as upload, delete, and refresh with a convenient toolbar.
-- **Breadcrumb Navigation**: Easily navigate through the directory structure.
-- **Navigation Pane**: Easily switch between folders and directories with a sidebar navigation pane.
-- **Context Menu**: Right-click to open a context menu with options for cutting, copying, pasting, renaming, and deleting files or folders.
-
-## Installation
-
-To install `React File Manager`, use the following command:
-
-```bash
-npm i @cubone/react-file-manager
-```
-
-## Usage
-
-Here’s a basic example of how to use the File Manager Component in your React application:
-
-```javascript
-import { useState } from "react";
-import { FileManager } from "@cubone/react-file-manager";
-import "@cubone/react-file-manager/dist/style.css";
-
-function App() {
-  const [files, setFiles] = useState([
-    {
-      name: "Documents",
-      isDirectory: true,
-      path: "", // Root directory
-    },
-    {
-      name: "Pictures",
-      isDirectory: true,
-      path: "", // Root directory
-    },
-    {
-      name: "Pic.png",
-      isDirectory: false,
-      path: "/Pictures", // Located inside the "Pictures" folder
-    },
-  ]);
-
-  return (
-    <>
-      <FileManager files={files} />
-    </>
-  );
-}
-```
-## Props
-
-| Name       | Type                                                                                           | Description                                                                 |
-|-----------------|------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|
-| `files`         | `Array<{ name: string, isDirectory: boolean, path: string }>`                                 | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
-| `isLoading`     | `boolean`                                                                                      | A boolean indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if `true`. |
-| `onCreateFolder`| `(files: { name: string, isDirectory: boolean, path: string }[], folderName: string, folderPath: string) => void` | A callback function triggered when a new folder is created. Update the `files` state to include the new folder in the specified path. |
-| `onRename`      | `(files: { name: string, isDirectory: boolean, path: string }[], selectedFile: { name: string, isDirectory: boolean, path: string }, newName: string) => void` | A callback function triggered when a file or folder is renamed. Update the `files` state to reflect the new name for the specified file or folder. |
-| `onDelete`      | `(files: { name: string, isDirectory: boolean, path: string }[], file: { name: string, isDirectory: boolean, path: string }) => void` | A callback function triggered when a file or folder is deleted. Update the `files` state to remove the specified file or folder from the structure. |
-| `onPaste`       | `(files: { name: string, isDirectory: boolean, path: string }[], pastePath: string, clipBoard: { isMoving: boolean, files: { name: string, isDirectory: boolean, path: string, children?: { name: string, isDirectory: boolean, path: string }[] }[] }) => void` | A callback function triggered when a file or folder is pasted (moved or copied). Update the files state to reflect the new location of the pasted items based on the clipBoard data. |
-| `onRefresh`     | `() => void`                                                                                   | A callback function triggered when the file manager is refreshed. Use this to reload or refresh the `files` state to reflect any changes or updates. |
-
-## Contributing
-
-Contributions are welcome! To contribute:
-
-1. Fork the repository.
-2. Create a new branch (`git checkout -b feature/branch-name`).
-3. Make your changes.
-4. Commit your changes (`git commit -m 'Add some feature'`).
-5. Push to the branch (`git push origin feature/branch-name`).
-6. Open a Pull Request.
-
-Get started by running following commands:
-
-```bash
-git clone https://github.com/Saifullah-dev/react-file-manager.git
-cd react-file-manager
-npm i
-npm run dev
-```
-The application should now be running on `http://localhost:5173`, have fun!
-
-## License
-
-React File Manager is [MIT Licensed](LICENSE).