@emailmaker/filemanager 0.10.46 → 0.10.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/components/FileContent/FileContent.d.ts +1 -0
  2. package/components/FileManagerApp/ActionsHeader.d.ts +4 -0
  3. package/components/FileModals/FileModals.d.ts +4 -1
  4. package/components/ImageIcons/IconsControls.d.ts +26 -0
  5. package/components/ImageIcons/IconsGrid.d.ts +26 -0
  6. package/components/ImageIcons/IconsSearchForm.d.ts +13 -0
  7. package/components/ImageIcons/IconsTab.d.ts +4 -0
  8. package/components/ImageIcons/useIconsCopyToFolder.d.ts +28 -0
  9. package/components/ImageIcons/useStreamlineApi.d.ts +47 -0
  10. package/components/index.d.ts +1 -0
  11. package/constants/index.d.ts +2 -0
  12. package/file-manager.css +466 -20
  13. package/file-manager.esm.js +9 -9
  14. package/file-manager.esm.js.map +1 -1
  15. package/file-manager.js +1 -1
  16. package/file-manager.js.LICENSE.txt +2 -0
  17. package/hooks/core/files/actions/useFilesCopy.d.ts +1 -0
  18. package/hooks/core/files/useFilesAPI.d.ts +1 -0
  19. package/hooks/core/files/useFilesSelection.d.ts +1 -0
  20. package/hooks/core/types.d.ts +6 -1
  21. package/hooks/core/useFiles.d.ts +1 -0
  22. package/hooks/useCustomIcons.d.ts +1 -0
  23. package/hooks/useFileActions.d.ts +6 -1
  24. package/hooks/useFolderSelectionMenu.d.ts +26 -0
  25. package/notification.d.ts +16 -8
  26. package/package.json +1 -1
  27. package/types.d.ts +78 -7
  28. package/utils/errorMessages.d.ts +22 -2
  29. package/utils/fileFormatUtils.d.ts +39 -0
  30. package/utils/fileValidation.d.ts +22 -0
  31. package/utils/imageCompression.d.ts +1 -0
  32. package/utils/jsonDataProvider.d.ts +8 -0
  33. package/utils/mimeUtils.d.ts +12 -0
  34. package/utils/nameNormalization.d.ts +23 -0
  35. package/utils/svgToPng.d.ts +11 -0
package/file-manager.css CHANGED
@@ -205,6 +205,10 @@
205
205
  margin-right: 12px;
206
206
  }
207
207
 
208
+ .em-filemanager .buttonSelectAll {
209
+ margin-left: 12px;
210
+ }
211
+
208
212
  .em-filemanager .gridRow {
209
213
  margin: 0;
210
214
  gap: 20px;
@@ -469,6 +473,7 @@
469
473
  padding: calc(var(--marginLG) * 1px);
470
474
  padding-top: 57px !important;
471
475
  padding-bottom: 57px !important;
476
+ margin: auto;
472
477
  line-height: 1.3;
473
478
  border: 1px solid var(--colorBorderSecondary);
474
479
  border-radius: calc(var(--borderRadius) * 2px);
@@ -635,6 +640,37 @@
635
640
  .em-filemanager .folderToolsField {
636
641
  display: none;
637
642
  }
643
+ .em-filemanager .folderToolsField .ant-btn {
644
+ height: 32px;
645
+ padding: 0 10px;
646
+ display: inline-flex;
647
+ align-items: center;
648
+ justify-content: center;
649
+ }
650
+ .em-filemanager .folderToolsField .ant-btn:first-child {
651
+ width: 32px;
652
+ min-width: 32px;
653
+ padding: 0;
654
+ }
655
+
656
+ .em-filemanager .inputButtonOk {
657
+ border: 1px solid var(--colorBorder);
658
+ margin-right: -11px;
659
+ }
660
+ .em-filemanager .inputButtonOk:hover {
661
+ color: var(--colorPrimary) !important;
662
+ border-color: var(--colorPrimary);
663
+ background-color: transparent !important;
664
+ }
665
+
666
+ .em-filemanager .clearTrashProgress {
667
+ margin-top: 16px;
668
+ }
669
+ .em-filemanager .clearTrashProgress .progressText {
670
+ text-align: center;
671
+ margin-top: 8px;
672
+ color: #666;
673
+ }
638
674
 
639
675
  .em-filemanager .closeIcon {
640
676
  color: rgba(0, 0, 0, 0.45) !important;
@@ -882,7 +918,7 @@
882
918
  position: fixed;
883
919
  bottom: 20px;
884
920
  right: 20px;
885
- z-index: 1000;
921
+ z-index: 4005;
886
922
  max-width: 400px;
887
923
  min-width: 320px;
888
924
  }
@@ -978,10 +1014,33 @@
978
1014
  border-bottom: 1px solid var(--colorBorderSecondary);
979
1015
  }
980
1016
 
1017
+ .em-filemanager .uploadProgress__file-item--error {
1018
+ padding: 10px 0 !important;
1019
+ }
1020
+
981
1021
  .uploadProgress__body--error .uploadProgress__file-item {
982
1022
  display: grid !important;
983
1023
  }
984
1024
 
1025
+ /* Ошибка загрузки: стиль как у уведомления — читаемый список */
1026
+ .em-filemanager .uploadProgress__error-item {
1027
+ display: flex;
1028
+ flex-direction: column;
1029
+ gap: 4px;
1030
+ margin-top: 4px;
1031
+ }
1032
+
1033
+ .em-filemanager .uploadProgress__error-message {
1034
+ font-size: 12px !important;
1035
+ line-height: 1.3;
1036
+ }
1037
+
1038
+ .em-filemanager .uploadProgress__error-hint {
1039
+ font-size: 11px !important;
1040
+ line-height: 1.3;
1041
+ color: var(--colorTextSecondary) !important;
1042
+ }
1043
+
985
1044
  .em-filemanager .uploadProgress__file-item:last-child {
986
1045
  border-bottom: none;
987
1046
  }
@@ -1010,21 +1069,12 @@
1010
1069
  margin-top: 4px;
1011
1070
  }
1012
1071
 
1013
- .em-filemanager .uploadProgress__error-note {
1014
- margin-top: 8px;
1015
- padding: 8px;
1016
- background-color: #fff2f0;
1017
- border: 1px solid #ffccc7;
1018
- border-radius: 4px;
1019
- line-height: 1.2;
1020
- }
1021
-
1022
1072
  /* Минимизированное состояние */
1023
1073
  .em-filemanager .uploadProgress__minimized {
1024
1074
  position: fixed;
1025
1075
  top: 20px;
1026
1076
  left: 20px;
1027
- z-index: 1000;
1077
+ z-index: 4005;
1028
1078
  }
1029
1079
 
1030
1080
  .em-filemanager .uploadProgress__minimized-button {
@@ -1102,7 +1152,7 @@
1102
1152
  }
1103
1153
 
1104
1154
  .em-filemanager .gifSearchInput {
1105
- padding: 0 2px 0 2px;
1155
+ padding: 0;
1106
1156
  width: 640px;
1107
1157
  max-width: 100%;
1108
1158
  transition: width 1s ease;
@@ -1261,7 +1311,7 @@
1261
1311
  }
1262
1312
 
1263
1313
  .em-filemanager .stockSearchInput {
1264
- padding: 0 2px 0 2px;
1314
+ padding: 0;
1265
1315
  width: 640px;
1266
1316
  transition: all 200ms ease;
1267
1317
  margin: auto auto 24px;
@@ -1687,6 +1737,391 @@
1687
1737
  .em-filemanager .imageAiDark .antBtn:hover {
1688
1738
  color: var(--colorPrimary);
1689
1739
  }
1740
+ .em-filemanager .iconsTab {
1741
+ display: flex;
1742
+ flex-direction: column;
1743
+ height: 100%;
1744
+ }
1745
+ .em-filemanager .iconsTab.hasSearch {
1746
+ padding-top: 0;
1747
+ }
1748
+
1749
+ .em-filemanager .iconsSearchWrapper {
1750
+ width: 100%;
1751
+ height: 100%;
1752
+ overflow: auto;
1753
+ line-height: 0;
1754
+ display: flex;
1755
+ flex-direction: column;
1756
+ align-items: center;
1757
+ padding: 24px;
1758
+ }
1759
+
1760
+ .em-filemanager .iconsSearchForm {
1761
+ display: flex;
1762
+ gap: 8px;
1763
+ width: 100%;
1764
+ margin-bottom: 0;
1765
+ }
1766
+
1767
+ .em-filemanager .iconsSearchFormCenteredContainer {
1768
+ display: flex;
1769
+ flex-direction: column;
1770
+ align-items: flex-start;
1771
+ justify-content: flex-start;
1772
+ width: 100%;
1773
+ padding: 24px 24px 0;
1774
+ }
1775
+
1776
+ .em-filemanager .iconsSearchFormCentered {
1777
+ display: flex;
1778
+ flex-direction: row;
1779
+ width: 100%;
1780
+ align-items: flex-start;
1781
+ justify-content: center;
1782
+ }
1783
+ .em-filemanager .iconsSearchFormCentered .iconsSearchFormInput {
1784
+ width: 640px;
1785
+ max-width: 100%;
1786
+ padding: 0;
1787
+ margin: auto auto 12px;
1788
+ transition: all 300ms ease;
1789
+ }
1790
+ .em-filemanager .iconsSearchFormCentered .iconsSearchFormInputInput {
1791
+ max-width: 100%;
1792
+ width: 100%;
1793
+ }
1794
+
1795
+ .em-filemanager .iconsSearchFormInput {
1796
+ width: 240px;
1797
+ padding: 0;
1798
+ margin-bottom: 0;
1799
+ transition: all 300ms ease;
1800
+ }
1801
+
1802
+ .em-filemanager .iconsSearchResults {
1803
+ width: 100%;
1804
+ display: flex;
1805
+ flex-direction: row;
1806
+ gap: 8px;
1807
+ align-items: flex-start;
1808
+ justify-content: flex-start;
1809
+ }
1810
+ .em-filemanager .iconsSearchResults .iconsSearchFormInput {
1811
+ width: 240px;
1812
+ flex: 0 0 auto;
1813
+ margin-bottom: 0;
1814
+ }
1815
+
1816
+ .em-filemanager .iconsControlsControls {
1817
+ display: flex;
1818
+ align-items: center;
1819
+ gap: 16px;
1820
+ }
1821
+
1822
+ .em-filemanager .iconsSearchFormInputInput {
1823
+ width: 100%;
1824
+ }
1825
+
1826
+ .em-filemanager .iconsControls {
1827
+ display: flex;
1828
+ justify-content: space-between;
1829
+ align-items: center;
1830
+ width: 100%;
1831
+ padding: 24px 6px 24px 24px;
1832
+ border-bottom: 1px solid var(--colorBorder);
1833
+ }
1834
+
1835
+ .em-filemanager .iconsControlsFamilySlug {
1836
+ opacity: 0.7;
1837
+ }
1838
+
1839
+ .em-filemanager .iconsControlElement {
1840
+ display: flex;
1841
+ align-items: center;
1842
+ gap: 8px;
1843
+ }
1844
+ .em-filemanager .iconsControlElement > span {
1845
+ color: var(--colorTextTertiary);
1846
+ }
1847
+
1848
+ .em-filemanager .iconsControlsStrokeWidth {
1849
+ display: flex;
1850
+ align-items: center;
1851
+ gap: 8px;
1852
+ }
1853
+ .em-filemanager .iconsControlsStrokeWidth > span {
1854
+ color: var(--colorTextTertiary);
1855
+ }
1856
+ .em-filemanager .iconsControlsStrokeWidth .ant-input-number {
1857
+ width: 80px;
1858
+ }
1859
+
1860
+ .em-filemanager .iconsControlsCompact {
1861
+ position: relative;
1862
+ }
1863
+
1864
+ .em-filemanager .iconsControlsInputNumber {
1865
+ width: 110px;
1866
+ }
1867
+
1868
+ .em-filemanager .iconsControlsDropdownBtn {
1869
+ padding: 0;
1870
+ height: 32px;
1871
+ min-width: 36px;
1872
+ width: 36px;
1873
+ border-top-right-radius: 6px !important;
1874
+ border-bottom-right-radius: 6px !important;
1875
+ border-top-left-radius: 0 !important;
1876
+ border-bottom-left-radius: 0 !important;
1877
+ display: inline-flex;
1878
+ align-items: center;
1879
+ justify-content: center;
1880
+ color: var(--colorTextTertiary);
1881
+ }
1882
+ .em-filemanager .iconsControlsDropdownBtn:hover {
1883
+ color: var(--colorTextSecondary);
1884
+ }
1885
+
1886
+ .em-filemanager .iconsControlsCompact .iconsControlsDropdownBtn {
1887
+ border-top-right-radius: 6px !important;
1888
+ border-bottom-right-radius: 6px !important;
1889
+ }
1890
+
1891
+ .em-filemanager .sliderDropdown {
1892
+ position: absolute;
1893
+ left: 50%;
1894
+ transform: translateX(-50%);
1895
+ top: calc(100% + 6px);
1896
+ width: 240px;
1897
+ background: #fff;
1898
+ border: 1px solid rgba(0, 0, 0, 0.08);
1899
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
1900
+ border-radius: 8px;
1901
+ padding: 10px 12px;
1902
+ z-index: 1000;
1903
+ }
1904
+
1905
+ .em-filemanager .iconsControlsHeader {
1906
+ display: flex;
1907
+ align-items: center;
1908
+ }
1909
+
1910
+ .em-filemanager .iconsSearchFormSelect {
1911
+ width: 160px !important;
1912
+ }
1913
+
1914
+ .em-filemanager .iconsSearchFormStyleItem {
1915
+ margin-bottom: 0;
1916
+ animation: fadeInSlide 300ms ease forwards;
1917
+ }
1918
+
1919
+ @keyframes fadeInSlide {
1920
+ from {
1921
+ opacity: 0;
1922
+ transform: translateX(-10px);
1923
+ }
1924
+ to {
1925
+ opacity: 1;
1926
+ transform: translateX(0);
1927
+ }
1928
+ }
1929
+ .em-filemanager .iconsSearchDivider {
1930
+ margin-top: 24px;
1931
+ margin-bottom: 0;
1932
+ border-color: var(--colorBorder);
1933
+ width: 100%;
1934
+ }
1935
+
1936
+ .em-filemanager .iconsSearchFormInputIcon {
1937
+ font-size: 16px;
1938
+ cursor: pointer;
1939
+ }
1940
+
1941
+ .em-filemanager .iconsGrid {
1942
+ width: 100%;
1943
+ flex: 1 1 auto;
1944
+ min-height: 0;
1945
+ overflow: auto;
1946
+ padding: 24px;
1947
+ }
1948
+
1949
+ .em-filemanager .iconsBottomBar {
1950
+ position: sticky;
1951
+ bottom: 0;
1952
+ background: var(--colorBgLayout);
1953
+ z-index: 5;
1954
+ width: 100%;
1955
+ }
1956
+
1957
+ .em-filemanager .iconsBottomBarContent {
1958
+ display: flex;
1959
+ justify-content: right;
1960
+ padding: 17px 24px;
1961
+ align-items: center;
1962
+ }
1963
+
1964
+ .em-filemanager .iconsGridEmpty {
1965
+ margin: 40px 0px;
1966
+ }
1967
+
1968
+ .em-filemanager .iconsGridEmptyState {
1969
+ display: flex;
1970
+ justify-content: center;
1971
+ align-items: center;
1972
+ padding: 0;
1973
+ }
1974
+
1975
+ .em-filemanager .resultsContainer {
1976
+ width: 640px;
1977
+ max-width: 100%;
1978
+ overflow: auto;
1979
+ padding: 60px 16px;
1980
+ border-radius: 12px;
1981
+ background-color: var(--colorBgContainer);
1982
+ display: flex;
1983
+ align-items: center;
1984
+ justify-content: center;
1985
+ flex-direction: column;
1986
+ text-align: center;
1987
+ }
1988
+
1989
+ .em-filemanager .playButton {
1990
+ color: var(--colorPrimary);
1991
+ margin-bottom: 16px;
1992
+ }
1993
+
1994
+ .em-filemanager .title {
1995
+ font-size: 16px;
1996
+ font-weight: 600;
1997
+ line-height: 1.2;
1998
+ margin-bottom: 4px;
1999
+ }
2000
+
2001
+ .em-filemanager .subtitle {
2002
+ font-size: 14px;
2003
+ color: var(--colorSecondary);
2004
+ line-height: 1.2;
2005
+ }
2006
+
2007
+ .em-filemanager .iconsGridInfiniteScroll {
2008
+ overflow: hidden !important;
2009
+ }
2010
+
2011
+ .em-filemanager .iconsGridGrid {
2012
+ display: grid;
2013
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
2014
+ gap: 16px;
2015
+ }
2016
+
2017
+ .em-filemanager .iconsGridItem {
2018
+ position: relative;
2019
+ border-radius: 8px;
2020
+ padding: 12px;
2021
+ background: #fff;
2022
+ cursor: pointer;
2023
+ }
2024
+
2025
+ .em-filemanager .iconsGridItemThumbnail {
2026
+ display: flex;
2027
+ align-items: center;
2028
+ justify-content: center;
2029
+ }
2030
+
2031
+ .em-filemanager .iconsGridItemSvg {
2032
+ width: 100%;
2033
+ height: 100%;
2034
+ display: flex;
2035
+ align-items: center;
2036
+ justify-content: center;
2037
+ }
2038
+
2039
+ .em-filemanager .iconsGridItemImg {
2040
+ max-width: 100%;
2041
+ object-fit: contain;
2042
+ }
2043
+
2044
+ .em-filemanager .iconsGridItemName {
2045
+ margin-top: 8px;
2046
+ font-size: 12px;
2047
+ white-space: nowrap;
2048
+ text-overflow: ellipsis;
2049
+ overflow: hidden;
2050
+ }
2051
+
2052
+ .em-filemanager .iconsGridItemInsertButton {
2053
+ position: absolute;
2054
+ top: 8px;
2055
+ right: 8px;
2056
+ }
2057
+
2058
+ .em-filemanager .iconsGridLoading {
2059
+ position: absolute;
2060
+ top: 8;
2061
+ right: 8;
2062
+ }
2063
+
2064
+ .em-filemanager .iconsControlsBackButton {
2065
+ margin-right: 20px;
2066
+ }
2067
+
2068
+ .em-filemanager .iconsGridCheckbox {
2069
+ position: absolute;
2070
+ top: 8px;
2071
+ left: 8px;
2072
+ z-index: 2;
2073
+ opacity: 0;
2074
+ pointer-events: none;
2075
+ transition: opacity 0.15s ease-in-out;
2076
+ }
2077
+
2078
+ .em-filemanager .iconsGridItem:hover .iconsGridCheckbox {
2079
+ opacity: 1;
2080
+ pointer-events: auto;
2081
+ }
2082
+
2083
+ .em-filemanager .iconsGridShowCheckboxes .iconsGridCheckbox {
2084
+ opacity: 1;
2085
+ pointer-events: auto;
2086
+ }
2087
+
2088
+ .em-filemanager .iconsHeaderContainer {
2089
+ display: flex;
2090
+ align-items: center;
2091
+ justify-content: space-between;
2092
+ gap: 12px;
2093
+ padding: 25px 0;
2094
+ margin: 0 24px;
2095
+ border-bottom: 1px solid var(--colorBorder);
2096
+ }
2097
+
2098
+ .em-filemanager .iconsHeaderContainerLeft {
2099
+ display: flex;
2100
+ gap: 10px;
2101
+ align-items: center;
2102
+ }
2103
+
2104
+ .em-filemanager .iconsHeaderDivider {
2105
+ margin-top: 24px;
2106
+ margin-bottom: 0;
2107
+ border-color: var(--colorBorder);
2108
+ width: 100%;
2109
+ }
2110
+
2111
+ .em-filemanager .copyToFolderModalBody {
2112
+ position: relative;
2113
+ }
2114
+
2115
+ .em-filemanager .copyToFolderModalLoadingOverlay {
2116
+ position: absolute;
2117
+ inset: 0;
2118
+ z-index: 10;
2119
+ display: flex;
2120
+ align-items: center;
2121
+ justify-content: center;
2122
+ background: rgba(255, 255, 255, 0.6);
2123
+ pointer-events: all;
2124
+ }
1690
2125
  @charset "UTF-8";
1691
2126
  /* FileManagerApp стили */
1692
2127
  .em-filemanager.ant-app {
@@ -1727,6 +2162,9 @@
1727
2162
  min-width: 250px;
1728
2163
  margin-right: 24px;
1729
2164
  }
2165
+ .em-filemanager .file-manager__layout .header-title-container .clear-trash-button {
2166
+ margin-left: 16px;
2167
+ }
1730
2168
  .em-filemanager .file-manager__layout h5.header-title {
1731
2169
  margin-right: calc(var(--margin) * 1px);
1732
2170
  margin-bottom: 0;
@@ -1753,6 +2191,7 @@
1753
2191
  }
1754
2192
  .em-filemanager .file-manager__layout .file-manager__content {
1755
2193
  flex: 1;
2194
+ width: 100%;
1756
2195
  }
1757
2196
  .em-filemanager .file-manager__layout .ant-table-wrapper table,
1758
2197
  .em-filemanager .file-manager__layout .ant-table-wrapper .ant-table-container,
@@ -1821,7 +2260,10 @@
1821
2260
  }
1822
2261
  .em-filemanager .file-manager__layout .file-manager__main-content {
1823
2262
  position: relative;
2263
+ overflow: clip;
1824
2264
  border-bottom-right-radius: 14px;
2265
+ flex: 1;
2266
+ width: 100%;
1825
2267
  }
1826
2268
  .em-filemanager .file-manager__layout .content-layout {
1827
2269
  padding: 24px;
@@ -2239,9 +2681,6 @@
2239
2681
  display: flex;
2240
2682
  align-items: center;
2241
2683
  }
2242
- .em-filemanager .ant-tree .ant-btn.ant-btn-icon-only {
2243
- width: inherit;
2244
- }
2245
2684
  .em-filemanager .ant-tree .ant-tree-title {
2246
2685
  color: inherit;
2247
2686
  }
@@ -2287,7 +2726,6 @@
2287
2726
  overflow: hidden;
2288
2727
  }
2289
2728
  .em-filemanager .ant-tree .ant-tree-treenode[data-key=folders] {
2290
- border-bottom: 1px solid var(--colorBorderSecondary);
2291
2729
  margin-bottom: 8px;
2292
2730
  padding-bottom: 8px;
2293
2731
  }
@@ -2319,7 +2757,8 @@
2319
2757
  gap: 4px;
2320
2758
  position: absolute;
2321
2759
  right: 4px;
2322
- top: 4px;
2760
+ top: 50%;
2761
+ transform: translateY(-50%);
2323
2762
  }
2324
2763
 
2325
2764
  .em-filemanager .fm-upload-progress .ant-list .ant-list-item .ant-list-item-meta .ant-list-item-meta-content {
@@ -2369,16 +2808,23 @@
2369
2808
  margin-bottom: 0;
2370
2809
  display: none;
2371
2810
  position: absolute;
2372
- top: 2px;
2811
+ top: 0;
2373
2812
  left: 0;
2374
2813
  right: 4px;
2375
2814
  bottom: 0;
2376
2815
  z-index: 100;
2377
- height: 44px;
2816
+ height: 100%;
2378
2817
  }
2379
2818
  .em-filemanager .ant-modal-root .ant-form-item.form-item-moveto.form-item_active {
2380
2819
  display: block;
2381
2820
  }
2821
+ .em-filemanager .ant-modal-root .ant-form-item.form-item-moveto .ant-input-affix-wrapper.form-input {
2822
+ border: none;
2823
+ box-shadow: none;
2824
+ height: 100%;
2825
+ line-height: 40px;
2826
+ background: none;
2827
+ }
2382
2828
  .em-filemanager .ant-modal-root .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
2383
2829
  background-color: #ffffff;
2384
2830
  }