@ntbjs/react-components 0.0.1-beta.46 → 0.0.1-beta.48

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 (29) hide show
  1. package/{ActionButton-9e502e55.js → ActionButton-90485300.js} +9 -9
  2. package/{AssetGallery-247242ac.js → AssetGallery-4c4801e3.js} +379 -278
  3. package/{Button-88652184.js → Button-0d728b52.js} +36 -28
  4. package/Checkbox-5a78a73e.js +126 -0
  5. package/{Popover-6ca643ba.js → Popover-d3e2f6c0.js} +15 -15
  6. package/Radio-73a1a897.js +80 -0
  7. package/Switch-fcbf628c.js +100 -0
  8. package/TextArea-167d2528.js +170 -0
  9. package/TextInput-b61b7333.js +247 -0
  10. package/{Tooltip-25b6f5fa.js → Tooltip-f95a39f4.js} +11 -11
  11. package/data/Popover/index.js +2 -2
  12. package/data/index.js +3 -3
  13. package/{defaultTheme-d8298500.js → defaultTheme-870f7df1.js} +108 -95
  14. package/inputs/ActionButton/index.js +2 -2
  15. package/inputs/Button/index.js +2 -2
  16. package/inputs/Checkbox/index.js +3 -2
  17. package/inputs/Radio/index.js +2 -2
  18. package/inputs/Switch/index.js +12 -0
  19. package/inputs/TextArea/index.js +2 -2
  20. package/inputs/TextInput/index.js +2 -2
  21. package/inputs/index.js +10 -8
  22. package/package.json +1 -1
  23. package/ssr/index.js +3 -1
  24. package/widgets/AssetGallery/index.js +12 -11
  25. package/widgets/index.js +12 -11
  26. package/Checkbox-25c75a7c.js +0 -122
  27. package/Radio-1521b33c.js +0 -71
  28. package/TextArea-a73b1729.js +0 -103
  29. package/TextInput-143d6346.js +0 -109
package/{AssetGallery-247242ac.js → AssetGallery-4c4801e3.js} RENAMED
@@ -1,18 +1,19 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-d8298500.js');
3
+ var defaultTheme = require('./defaultTheme-870f7df1.js');
4
4
  var React = require('react');
5
5
  var lodash = require('lodash');
6
+ var TextInput = require('./TextInput-b61b7333.js');
6
7
  var ResizeObserver = require('resize-observer-polyfill');
7
8
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
8
- var ActionButton = require('./ActionButton-9e502e55.js');
9
- require('./Button-88652184.js');
10
- require('./Checkbox-25c75a7c.js');
11
- require('./Radio-1521b33c.js');
12
- require('./TextArea-a73b1729.js');
13
- require('./TextInput-143d6346.js');
14
- require('./Popover-6ca643ba.js');
15
- var Tooltip = require('./Tooltip-25b6f5fa.js');
9
+ var ActionButton = require('./ActionButton-90485300.js');
10
+ require('./Button-0d728b52.js');
11
+ require('./Checkbox-5a78a73e.js');
12
+ require('./Radio-73a1a897.js');
13
+ require('./TextArea-167d2528.js');
14
+ require('./Switch-fcbf628c.js');
15
+ require('./Popover-d3e2f6c0.js');
16
+ var Tooltip = require('./Tooltip-f95a39f4.js');
16
17
  var styled = require('styled-components');
17
18
  var polished = require('polished');
18
19
 
@@ -27,12 +28,14 @@ function _interopNamespace(e) {
27
28
  var d = Object.getOwnPropertyDescriptor(e, k);
28
29
  Object.defineProperty(n, k, d.get ? d : {
29
30
  enumerable: true,
30
- get: function () { return e[k]; }
31
+ get: function () {
32
+ return e[k];
33
+ }
31
34
  });
32
35
  }
33
36
  });
34
37
  }
35
- n["default"] = e;
38
+ n['default'] = e;
36
39
  return Object.freeze(n);
37
40
  }
38
41
 
@@ -43,43 +46,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
43
46
 
44
47
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
45
48
 
46
- var toFnRef = function toFnRef(ref) {
47
- return !ref || typeof ref === 'function' ? ref : function (value) {
48
- ref.current = value;
49
- };
50
- };
51
-
52
- function mergeRefs(refA, refB) {
53
- var a = toFnRef(refA);
54
- var b = toFnRef(refB);
55
- return function (value) {
56
- if (a) a(value);
57
- if (b) b(value);
58
- };
59
- }
60
- /**
61
- * Create and returns a single callback ref composed from two other Refs.
62
- *
63
- * ```tsx
64
- * const Button = React.forwardRef((props, ref) => {
65
- * const [element, attachRef] = useCallbackRef<HTMLButtonElement>();
66
- * const mergedRef = useMergedRefs(ref, attachRef);
67
- *
68
- * return <button ref={mergedRef} {...props}/>
69
- * })
70
- * ```
71
- *
72
- * @param refA A Callback or mutable Ref
73
- * @param refB A Callback or mutable Ref
74
- * @category refs
75
- */
76
-
77
- function useMergedRefs(refA, refB) {
78
- return React.useMemo(function () {
79
- return mergeRefs(refA, refB);
80
- }, [refA, refB]);
81
- }
82
-
83
49
  var assetShape = {
84
50
  key: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]).isRequired,
85
51
  previewUrl: defaultTheme.PropTypes.string,
@@ -123,226 +89,260 @@ var css_248z = ".lazy-load-image-background.opacity {\n opacity: 0;\n}\n\n.lazy
123
89
  defaultTheme.styleInject(css_248z);
124
90
 
125
91
  var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
126
- var AssetGalleryCompactCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 100%;\n svg {\n width: 25%;\n }\n }\n"])), function (props) {
92
+ var AssetGalleryCompactCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$2 || (_templateObject$2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n ", ";\n ", ";\n\n ", "\n video {\n width: 100%;\n height: 100%;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 100%;\n svg {\n width: 25%;\n }\n }\n"])), function (props) {
127
93
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
128
94
  }, function (props) {
129
95
  return props.disabled && styled.css(_templateObject2$2 || (_templateObject2$2 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n opacity: 0.4;\n "])));
130
96
  }, function (props) {
131
97
  return props.extendedSelectMode && styled.css(_templateObject3$2 || (_templateObject3$2 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
132
98
  });
133
- var Figure = styled__default["default"].figure(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 100%;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
99
+ var Figure = styled__default['default'].figure(_templateObject4$1 || (_templateObject4$1 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 100%;\n\n .lazy-load-image-background {\n display: block !important;\n }\n\n img {\n display: block;\n height: 100%;\n width: 100%;\n ", "\n }\n"])), function (props) {
134
100
  return props.hasHeightAndWidth ? styled.css(_templateObject5$1 || (_templateObject5$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: cover;\n "]))) : styled.css(_templateObject6$1 || (_templateObject6$1 = defaultTheme._taggedTemplateLiteral(["\n object-fit: contain;\n "])));
135
101
  });
136
- var Overlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
137
- var OverlayBackdrop = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
102
+ var Overlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7$1 || (_templateObject7$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n"])));
103
+ var OverlayBackdrop = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8$1 || (_templateObject8$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n opacity: 0;\n background: linear-gradient(rgba(0, 0, 0, 0.6), transparent 70%, rgba(0, 0, 0, 0.6));\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
138
104
  return props.softSelected && styled.css(_templateObject9$1 || (_templateObject9$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
139
105
  }, Overlay);
140
- var OverlayInfo = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
106
+ var OverlayInfo = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10$1 || (_templateObject10$1 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 15px 12px 10px;\n color: ", ";\n"])), function (props) {
141
107
  return props.theme.getColor('gray-100');
142
108
  });
143
- var OverlayInfoTopTitleAndFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
144
- var OverlayInfoTopTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-right: 20px;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
109
+ var OverlayInfoTopTitleAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11$1 || (_templateObject11$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
110
+ var OverlayInfoTopTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12$1 || (_templateObject12$1 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-right: 20px;\n opacity: 0;\n transition: opacity 220ms;\n\n ", "\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
145
111
  return props.theme.primaryFontFamily;
146
112
  }, function (props) {
147
113
  return props.softSelected && styled.css(_templateObject13$1 || (_templateObject13$1 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
148
114
  }, Overlay);
149
- var OverlayInfoTopFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 19px;\n max-height: 19px;\n"])));
150
- var OverlayInfoTopNoteAndFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
151
- var OverlayInfoTopNote = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
115
+ var OverlayInfoTopFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14$1 || (_templateObject14$1 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 19px;\n max-height: 19px;\n"])));
116
+ var OverlayInfoTopNoteAndFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15$1 || (_templateObject15$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
117
+ var OverlayInfoTopNote = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16$1 || (_templateObject16$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
152
118
  var _props$assetTitle;
119
+
153
120
  return ((_props$assetTitle = props.assetTitle) === null || _props$assetTitle === void 0 ? void 0 : _props$assetTitle.trim().length) > 0 ? styled.css(_templateObject17$1 || (_templateObject17$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject18$1 || (_templateObject18$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
154
121
  });
155
- var OverlayInfoTopFileTypeTopLeft = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
122
+ var OverlayInfoTopFileTypeTopLeft = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19$1 || (_templateObject19$1 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n padding-top: 5px;\n transform: translate3d(0, -100%, 0);\n transition: transform 250ms;\n margin-right: 5px;\n\n svg {\n max-width: 20px;\n max-height: 20px;\n width: 100%;\n flex-shrink: 0;\n }\n\n ", ":hover && {\n ", "\n }\n"])), Overlay, function (props) {
156
123
  var _props$assetTitle2;
124
+
157
125
  return ((_props$assetTitle2 = props.assetTitle) === null || _props$assetTitle2 === void 0 ? void 0 : _props$assetTitle2.trim().length) > 0 ? styled.css(_templateObject20$1 || (_templateObject20$1 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, 0, 0);\n "]))) : styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n transform: translate3d(0, -100%, 0);\n "])));
158
126
  });
159
- var OverlayInfoTopNoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
127
+ var OverlayInfoTopNoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n opacity: 0;\n transition: opacity 250ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
160
128
  return props.theme.primaryFontFamily;
161
129
  }, Overlay);
162
- var OverlayCompleted$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
130
+ var OverlayCompleted$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
163
131
  return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
164
132
  });
165
- var OverlayHasError$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
133
+ var OverlayHasError$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
166
134
  return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
167
135
  });
168
- var OverlaySelected$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
136
+ var OverlaySelected$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
169
137
  return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
170
138
  });
171
- var OverlayInfoBottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
172
- var OverlayInfoBottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
139
+ var OverlayInfoBottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
140
+ var OverlayInfoBottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
173
141
  return props.selected ? 1 : 0;
174
142
  }, function (props) {
175
143
  return props.selected ? props.theme.getColor('orange-500') : 'inherit';
176
144
  }, Overlay);
177
- var OverlayInfoBottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
178
- var ConsumerDefinedOverlay$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
179
- var Fragment$1 = styled__default["default"].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
145
+ var OverlayInfoBottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), Overlay);
146
+ var ConsumerDefinedOverlay$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
147
+ var Fragment$1 = styled__default['default'].div(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral([""])));
148
+
149
+ function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
150
+
151
+ var _ref$6 = /*#__PURE__*/React__namespace.createElement("path", {
152
+ fill: "currentColor",
153
+ d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
154
+ fillOpacity: 0.9
155
+ });
180
156
 
181
- var _path$6;
182
- function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
183
157
  function SvgCheckCircleFilled(props) {
184
158
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$6({
185
159
  xmlns: "http://www.w3.org/2000/svg",
186
160
  viewBox: "0 0 24 24"
187
- }, props), _path$6 || (_path$6 = /*#__PURE__*/React__namespace.createElement("path", {
188
- fill: "currentColor",
189
- d: "M12 0a12 12 0 1012 12A12 12 0 0012 0zM9.6 18l-6-6 1.69-1.69L9.6 14.6l9.11-9.1 1.69 1.7z",
190
- fillOpacity: 0.9
191
- })));
161
+ }, props), _ref$6);
192
162
  }
193
163
 
194
- var _path$5;
195
- function _extends$5() { _extends$5 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
164
+ function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
165
+
166
+ var _ref$5 = /*#__PURE__*/React__namespace.createElement("path", {
167
+ fill: "currentColor",
168
+ d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
169
+ });
170
+
196
171
  function SvgWarningCircle(props) {
197
172
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$5({
198
173
  xmlns: "http://www.w3.org/2000/svg",
199
174
  viewBox: "0 0 24 24"
200
- }, props), _path$5 || (_path$5 = /*#__PURE__*/React__namespace.createElement("path", {
201
- fill: "currentColor",
202
- d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
203
- })));
175
+ }, props), _ref$5);
204
176
  }
205
177
 
206
- var _path$4;
207
- function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
178
+ function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
179
+
180
+ var _ref$4 = /*#__PURE__*/React__namespace.createElement("path", {
181
+ fill: "currentColor",
182
+ d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
183
+ });
184
+
208
185
  function SvgPlay(props) {
209
186
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
210
187
  xmlns: "http://www.w3.org/2000/svg",
211
188
  viewBox: "0 0 18.86 24"
212
- }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
213
- fill: "currentColor",
214
- d: "M3.43 6.24l9 5.76-9 5.76V6.24M0 0v24l18.86-12z"
215
- })));
189
+ }, props), _ref$4);
216
190
  }
217
191
 
218
- var _path$3;
219
- function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
192
+ function _extends$3() { _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
193
+
194
+ var _ref$3 = /*#__PURE__*/React__namespace.createElement("path", {
195
+ fill: "currentColor",
196
+ d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
197
+ });
198
+
220
199
  function SvgPdf(props) {
221
200
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
222
201
  xmlns: "http://www.w3.org/2000/svg",
223
202
  viewBox: "0 0 24 24"
224
- }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
225
- fill: "currentColor",
226
- d: "M21 0H3A3 3 0 00.05 2.9V21A3 3 0 003 24h18.1a3 3 0 002.95-3V3A3.11 3.11 0 0021 0zm0 21H3V3h18.1v18zm-6-6v-4.52a1.56 1.56 0 00-1.55-1.55h-3.01v7.58h2.94A1.47 1.47 0 0014.93 15zm-3-4.52h1.54V15H12zm6 3.08h1.55V12H18v-1.52h1.55V9.07h-2.94v7.58h1.55v-3.09zm-12.07 0h1.56A1.55 1.55 0 009 12v-1.52a1.56 1.56 0 00-1.51-1.55H4.4v7.58h1.54zm0-3.08h1.56V12H5.94z"
227
- })));
203
+ }, props), _ref$3);
228
204
  }
229
205
 
230
- var _path$2;
231
- function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
206
+ function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
207
+
208
+ var _ref$2 = /*#__PURE__*/React__namespace.createElement("path", {
209
+ fill: "currentColor",
210
+ d: "M12 0H2.4A2.4 2.4 0 000 2.4v19.2A2.4 2.4 0 002.39 24H16.8a2.41 2.41 0 002.4-2.4V7.2zM2.4 21.6V2.4h8.4v6h6v13.2z"
211
+ });
212
+
232
213
  function SvgFile(props) {
233
214
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
234
215
  xmlns: "http://www.w3.org/2000/svg",
235
216
  viewBox: "0 0 19.2 24"
236
- }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
237
- fill: "currentColor",
238
- d: "M12 0H2.4A2.4 2.4 0 000 2.4v19.2A2.4 2.4 0 002.39 24H16.8a2.41 2.41 0 002.4-2.4V7.2zM2.4 21.6V2.4h8.4v6h6v13.2z"
239
- })));
217
+ }, props), _ref$2);
240
218
  }
241
219
 
242
- var _path$1;
243
- function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
220
+ function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
221
+
222
+ var _ref$1 = /*#__PURE__*/React__namespace.createElement("path", {
223
+ fill: "currentColor",
224
+ d: "M10 21q-1.65 0-2.825-1.175Q6 18.65 6 17q0-1.65 1.175-2.825Q8.35 13 10 13q.575 0 1.062.137.488.138.938.413V3h6v4h-4v10q0 1.65-1.175 2.825Q11.65 21 10 21z"
225
+ });
226
+
244
227
  function SvgAudio(props) {
245
228
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
246
229
  xmlns: "http://www.w3.org/2000/svg",
247
230
  viewBox: "0 0 18.86 24"
248
- }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
249
- fill: "currentColor",
250
- d: "M10 21q-1.65 0-2.825-1.175Q6 18.65 6 17q0-1.65 1.175-2.825Q8.35 13 10 13q.575 0 1.062.137.488.138.938.413V3h6v4h-4v10q0 1.65-1.175 2.825Q11.65 21 10 21z"
251
- })));
231
+ }, props), _ref$1);
252
232
  }
253
233
 
254
- var _path;
255
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
234
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
235
+
236
+ var _ref = /*#__PURE__*/React__namespace.createElement("path", {
237
+ d: "M9 21H5q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-4v-8h4v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h4zm-2-6H5v4h2zm10 0v4h2v-4zm0 0h2-2zM7 15H5z"
238
+ });
239
+
256
240
  function SvgHeadset(props) {
257
241
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
258
242
  xmlns: "http://www.w3.org/2000/svg",
259
243
  fill: "currentColor",
260
244
  viewBox: "0 0 24 24"
261
- }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
262
- d: "M9 21H5q-.825 0-1.413-.587Q3 19.825 3 19v-7q0-1.875.712-3.513.713-1.637 1.926-2.85 1.212-1.212 2.85-1.925Q10.125 3 12 3t3.513.712q1.637.713 2.85 1.925 1.212 1.213 1.925 2.85Q21 10.125 21 12v7q0 .825-.587 1.413Q19.825 21 19 21h-4v-8h4v-1q0-2.925-2.038-4.963Q14.925 5 12 5T7.038 7.037Q5 9.075 5 12v1h4zm-2-6H5v4h2zm10 0v4h2v-4zm0 0h2-2zM7 15H5z"
263
- })));
245
+ }, props), _ref);
264
246
  }
265
247
 
266
- var _excluded$3 = ["component", "asset"],
267
- _excluded2$1 = ["component", "className"];
268
248
  var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
269
249
  var component = _ref.component,
270
- asset = _ref.asset,
271
- props = defaultTheme._objectWithoutProperties(_ref, _excluded$3);
250
+ asset = _ref.asset,
251
+ props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
252
+
272
253
  var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
254
+
273
255
  if (component) {
274
256
  if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
275
- if (React__default["default"].isValidElement(component(asset, newProps.children))) {
276
- return React__default["default"].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
257
+
258
+ if (React__default['default'].isValidElement(component(asset, newProps.children))) {
259
+ return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
277
260
  }
278
261
  }
279
- return React__default["default"].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
262
+
263
+ return React__default['default'].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
280
264
  ref: newProps.innerRef
281
265
  }, newProps));
282
266
  };
283
- var ComputedActionButton$1 = React__default["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
267
+
268
+ var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
284
269
  var component = _ref2.component,
285
- className = _ref2.className,
286
- props = defaultTheme._objectWithoutProperties(_ref2, _excluded2$1);
270
+ className = _ref2.className,
271
+ props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className"]);
272
+
287
273
  var newProps = props;
288
- newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
274
+ newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
289
275
  ref: forwardedRef,
290
276
  className: className,
291
277
  icon: newProps.icon,
292
278
  onClick: newProps.onClick
293
279
  });
280
+
294
281
  if (component) {
295
282
  if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
296
- if (React__default["default"].isValidElement(component())) {
297
- return React__default["default"].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
283
+
284
+ if (React__default['default'].isValidElement(component())) {
285
+ return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
298
286
  }
299
287
  }
300
- return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
288
+
289
+ return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
301
290
  });
291
+
302
292
  var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
303
293
  var _asset$note;
294
+
304
295
  var asset = props.asset,
305
- selectable = props.selectable,
306
- hasHeightAndWidth = props.hasHeightAndWidth,
307
- selected = props.selected,
308
- extendedSelectMode = props.extendedSelectMode,
309
- onAssetSelected = props.onAssetSelected,
310
- onAssetUnselected = props.onAssetUnselected,
311
- softSelected = props.softSelected,
312
- component = props.component,
313
- scrollPosition = props.scrollPosition;
296
+ selectable = props.selectable,
297
+ hasHeightAndWidth = props.hasHeightAndWidth,
298
+ selected = props.selected,
299
+ extendedSelectMode = props.extendedSelectMode,
300
+ onAssetSelected = props.onAssetSelected,
301
+ onAssetUnselected = props.onAssetUnselected,
302
+ softSelected = props.softSelected,
303
+ component = props.component,
304
+ scrollPosition = props.scrollPosition;
305
+
314
306
  function onClick(event) {
315
307
  if (extendedSelectMode) {
316
308
  return onSelectClick(event);
317
309
  }
310
+
318
311
  if (lodash.isFunction(asset.onClick)) {
319
312
  asset.onClick(event, asset);
320
313
  }
321
314
  }
315
+
322
316
  function onSelectClick(event) {
323
317
  event.preventDefault();
324
318
  event.stopPropagation();
319
+
325
320
  if (selected) {
326
321
  return onAssetUnselected(asset.key);
327
322
  }
323
+
328
324
  if (selectable) {
329
325
  return onAssetSelected(asset.key);
330
326
  }
331
327
  }
328
+
332
329
  function onActionClick(event, action) {
333
330
  event.preventDefault();
334
331
  event.stopPropagation();
335
332
  action.onClick(asset);
336
333
  }
334
+
337
335
  function onContextMenu(event) {
338
336
  event.preventDefault();
339
337
  asset.onContextMenu(event);
340
338
  }
339
+
341
340
  React.useEffect(function () {
342
341
  if (lodash.isFunction(asset.onContextMenu)) {
343
342
  if (cardRef.current) {
344
343
  cardRef.current.addEventListener('contextmenu', onContextMenu);
345
344
  }
345
+
346
346
  return function () {
347
347
  if (cardRef.current) {
348
348
  cardRef.current.removeEventListener('contextmenu', onContextMenu);
@@ -350,14 +350,17 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
350
350
  };
351
351
  }
352
352
  }, []);
353
+
353
354
  function onDragstart(event) {
354
355
  asset.onDragstart(event);
355
356
  }
357
+
356
358
  React.useEffect(function () {
357
359
  if (lodash.isFunction(asset.onDragstart)) {
358
360
  if (dragRef.current) {
359
361
  dragRef.current.addEventListener('dragstart', onDragstart);
360
362
  }
363
+
361
364
  return function () {
362
365
  if (dragRef.current) {
363
366
  dragRef.current.removeEventListener('dragstart', onDragstart);
@@ -368,79 +371,93 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
368
371
  var videoPlayerRef = React.useRef();
369
372
  var cardRef = React.useRef();
370
373
  var dragRef = React.useRef(null);
374
+
371
375
  function onMouseEnter(event) {
372
376
  event.stopPropagation();
377
+
373
378
  if (videoPlayerRef.current) {
374
379
  var playPromise = videoPlayerRef.current.play();
380
+
375
381
  if (playPromise !== undefined) {
376
382
  playPromise.then(function () {})["catch"](function () {});
377
383
  }
378
384
  }
385
+
379
386
  if (lodash.isFunction(asset.onMouseEnter)) {
380
387
  asset.onMouseEnter(event, asset);
381
388
  }
382
389
  }
390
+
383
391
  function onMouseLeave(event) {
384
392
  event.stopPropagation();
393
+
385
394
  if (videoPlayerRef.current) {
386
395
  videoPlayerRef.current.pause();
387
396
  }
388
397
  }
398
+
389
399
  var typeIcon = React.useMemo(function () {
390
400
  switch (asset.fileType) {
391
401
  case 'video':
392
402
  {
393
- return React__default["default"].createElement(OverlayInfoTopFileType, {
403
+ return React__default['default'].createElement(OverlayInfoTopFileType, {
394
404
  as: SvgPlay
395
405
  });
396
406
  }
407
+
397
408
  case 'pdf':
398
409
  {
399
- return React__default["default"].createElement(OverlayInfoTopFileType, {
410
+ return React__default['default'].createElement(OverlayInfoTopFileType, {
400
411
  as: SvgPdf
401
412
  });
402
413
  }
414
+
403
415
  case 'audio':
404
416
  {
405
- return React__default["default"].createElement(OverlayInfoTopFileType, {
417
+ return React__default['default'].createElement(OverlayInfoTopFileType, {
406
418
  as: SvgAudio
407
419
  });
408
420
  }
421
+
409
422
  case 'file':
410
423
  {
411
- return React__default["default"].createElement(OverlayInfoTopFileType, {
424
+ return React__default['default'].createElement(OverlayInfoTopFileType, {
412
425
  as: SvgFile
413
426
  });
414
427
  }
428
+
415
429
  default:
416
430
  {
417
431
  return null;
418
432
  }
419
433
  }
420
434
  }, [asset.fileType]);
435
+
421
436
  var renderPreview = function renderPreview(asset) {
422
437
  if (['video'].includes(asset.fileType)) {
423
- return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
438
+ return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
424
439
  scrollPosition: scrollPosition
425
- }, React__default["default"].createElement("video", {
440
+ }, React__default['default'].createElement("video", {
426
441
  ref: videoPlayerRef,
427
442
  loop: true,
428
443
  muted: true
429
- }, React__default["default"].createElement("source", {
444
+ }, React__default['default'].createElement("source", {
430
445
  src: asset.previewUrl,
431
446
  type: "video/mp4"
432
447
  })));
433
448
  }
449
+
434
450
  if (['audio'].includes(asset.fileType)) {
435
- return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
451
+ return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
436
452
  scrollPosition: scrollPosition
437
- }, React__default["default"].createElement("div", {
453
+ }, React__default['default'].createElement("div", {
438
454
  className: "audio"
439
- }, React__default["default"].createElement(SvgHeadset, null)));
455
+ }, React__default['default'].createElement(SvgHeadset, null)));
440
456
  }
441
- return React__default["default"].createElement(Figure, {
457
+
458
+ return React__default['default'].createElement(Figure, {
442
459
  hasHeightAndWidth: hasHeightAndWidth
443
- }, React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
460
+ }, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
444
461
  alt: asset.title,
445
462
  src: asset.previewUrl,
446
463
  height: "100%",
@@ -451,6 +468,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
451
468
  scrollPosition: scrollPosition
452
469
  }));
453
470
  };
471
+
454
472
  React.useEffect(function () {
455
473
  if (softSelected) {
456
474
  cardRef.current.scrollIntoView({
@@ -459,7 +477,7 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
459
477
  });
460
478
  }
461
479
  }, [softSelected]);
462
- return React__default["default"].createElement(AssetGalleryCompactCard$2, {
480
+ return React__default['default'].createElement(AssetGalleryCompactCard$2, {
463
481
  as: ComputedRootComponent$1,
464
482
  component: component,
465
483
  disabled: asset.disabled,
@@ -470,27 +488,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
470
488
  onMouseLeave: onMouseLeave,
471
489
  draggable: asset.draggable,
472
490
  innerRef: dragRef
473
- }, asset.previewUrl && renderPreview(asset), React__default["default"].createElement(Overlay, {
491
+ }, asset.previewUrl && renderPreview(asset), React__default['default'].createElement(Overlay, {
474
492
  ref: cardRef
475
- }, React__default["default"].createElement(OverlayBackdrop, {
493
+ }, React__default['default'].createElement(OverlayBackdrop, {
476
494
  softSelected: softSelected
477
- }), React__default["default"].createElement(OverlayInfo, null, React__default["default"].createElement("div", null, React__default["default"].createElement(OverlayInfoTopTitleAndFileType, null, React__default["default"].createElement(OverlayInfoTopTitle, {
495
+ }), React__default['default'].createElement(OverlayInfo, null, React__default['default'].createElement("div", null, React__default['default'].createElement(OverlayInfoTopTitleAndFileType, null, React__default['default'].createElement(OverlayInfoTopTitle, {
478
496
  title: asset.title,
479
497
  softSelected: softSelected
480
- }, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default["default"].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default["default"].createElement(OverlayInfoTopFileTypeTopLeft, {
498
+ }, asset.title || "\xA0"), (!asset.fileTypeIconPosition || asset.fileTypeIconPosition === 'top-right') && typeIcon), React__default['default'].createElement(OverlayInfoTopNoteAndFileType, null, asset.fileTypeIconPosition === 'top-left' && React__default['default'].createElement(OverlayInfoTopFileTypeTopLeft, {
481
499
  assetTitle: asset.title
482
- }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(OverlayInfoTopNote, {
500
+ }, typeIcon), ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(OverlayInfoTopNote, {
483
501
  title: asset.note.title,
484
502
  assetTitle: asset.title
485
- }, asset.note.icon ? asset.note.icon : React__default["default"].createElement(SvgWarningCircle, null), React__default["default"].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default["default"].createElement(OverlayInfoBottom, null, selectable && React__default["default"].createElement(OverlayInfoBottomSelectButton, {
503
+ }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(OverlayInfoTopNoteTitle, null, asset.note.title)))), React__default['default'].createElement(OverlayInfoBottom, null, selectable && React__default['default'].createElement(OverlayInfoBottomSelectButton, {
486
504
  selected: selected
487
- }, React__default["default"].createElement(SvgCheckCircleFilled, {
505
+ }, React__default['default'].createElement(SvgCheckCircleFilled, {
488
506
  onClick: onSelectClick
489
- })), React__default["default"].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
490
- return React__default["default"].createElement(Tooltip.Tooltip, {
507
+ })), React__default['default'].createElement(OverlayInfoBottomActions, null, asset.actions && asset.actions.map(function (action) {
508
+ return React__default['default'].createElement(Tooltip.Tooltip, {
491
509
  key: "".concat(asset.key, "-").concat(action.title),
492
510
  content: action.title
493
- }, React__default["default"].createElement(Fragment$1, {
511
+ }, React__default['default'].createElement(Fragment$1, {
494
512
  as: ComputedActionButton$1,
495
513
  component: action.component,
496
514
  className: action.className,
@@ -499,15 +517,16 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
499
517
  return onActionClick(event, action);
500
518
  }
501
519
  }));
502
- })))), asset.completed && React__default["default"].createElement(OverlayCompleted$1, {
520
+ })))), asset.completed && React__default['default'].createElement(OverlayCompleted$1, {
503
521
  softSelected: softSelected
504
- }), asset.hasError && React__default["default"].createElement(OverlayHasError$1, {
522
+ }), asset.hasError && React__default['default'].createElement(OverlayHasError$1, {
505
523
  softSelected: softSelected
506
- }), selectable && React__default["default"].createElement(OverlaySelected$1, {
524
+ }), selectable && React__default['default'].createElement(OverlaySelected$1, {
507
525
  selected: selected,
508
526
  softSelected: softSelected
509
- })), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
527
+ })), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay$1, null, asset.overlay));
510
528
  };
529
+
511
530
  AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
512
531
  asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
513
532
  hasHeightAndWidth: defaultTheme.PropTypes.bool.isRequired,
@@ -521,7 +540,7 @@ AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
521
540
  scrollPosition: defaultTheme.PropTypes.number
522
541
  } : {};
523
542
  AssetGalleryCompactCard.defaultProps = {};
524
- var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
543
+ var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryCompactCard, function (prevProps, nextProps) {
525
544
  var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth'];
526
545
  return reactiveProps.every(function (propKey) {
527
546
  return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
@@ -529,7 +548,7 @@ var AssetGalleryCompactCard$1 = reactLazyLoadImageComponent.trackWindowScroll(Re
529
548
  }));
530
549
 
531
550
  var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
532
- var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n margin: 0;\n ", "\n border: 1px solid;\n ", ";\n ", ";\n ", "\n box-sizing: border-box;\n text-decoration: none;\n"])), function (props) {
551
+ var AssetGalleryGridCard$2 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n height: 100%;\n margin: 0;\n ", "\n border: 1px solid;\n ", ";\n ", ";\n ", "\n box-sizing: border-box;\n text-decoration: none;\n"])), function (props) {
533
552
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
534
553
  }, function (props) {
535
554
  return props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-300'));
@@ -538,155 +557,180 @@ var AssetGalleryGridCard$2 = styled__default["default"].div.attrs(defaultTheme.a
538
557
  }, function (props) {
539
558
  return props.extendedSelectMode && styled.css(_templateObject3$1 || (_templateObject3$1 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n "])));
540
559
  });
541
- var ContentWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: ", "px;\n"])), function (props) {
560
+ var ContentWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n height: ", "px;\n"])), function (props) {
542
561
  return props.layout.height;
543
562
  });
544
- var Note = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 9px 15px 7px;\n\n svg {\n max-width: 18px;\n max-height: 18px;\n width: auto;\n flex-shrink: 0;\n }\n"])));
545
- var NoteTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n"])), function (props) {
563
+ var Note = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 9px 15px 7px;\n\n svg {\n max-width: 18px;\n max-height: 18px;\n width: auto;\n flex-shrink: 0;\n }\n"])));
564
+ var NoteTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.4;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n margin-left: 5px;\n"])), function (props) {
546
565
  return props.theme.secondaryFontFamily;
547
566
  });
548
- var Asset = styled__default["default"].div(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n padding-top: 35px;\n padding-left: 8px;\n padding-right: 8px;\n\n video {\n display: block;\n width: 100%;\n height: 200px;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 200px;\n svg {\n width: 25%;\n }\n }\n"])));
549
- var AssetFigure = styled__default["default"].figure(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 200px;\n\n img {\n object-fit: contain;\n height: 100%;\n width: 100%;\n }\n"])));
550
- var Info = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.7;\n padding: 15px 15px 5px;\n"])), function (props) {
567
+ var Asset = styled__default['default'].div(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n padding-top: 35px;\n padding-left: 8px;\n padding-right: 8px;\n\n video {\n display: block;\n width: 100%;\n height: 200px;\n }\n\n .audio {\n display: flex;\n justify-content: center;\n height: 200px;\n svg {\n width: 25%;\n }\n }\n"])));
568
+ var AssetFigure = styled__default['default'].figure(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n height: 200px;\n\n img {\n object-fit: contain;\n height: 100%;\n width: 100%;\n }\n"])));
569
+ var Info = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.7;\n padding: 15px 15px 5px;\n"])), function (props) {
551
570
  return props.theme.primaryFontFamily;
552
571
  });
553
- var InfoTitle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n margin-bottom: 4px;\n"])));
554
- var InfoFileType = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 18px;\n max-height: 18px;\n"])));
555
- var InfoDescription = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
556
- var Bottom = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-top: auto;\n padding: 0 10px 10px;\n"])));
557
- var BottomSelectButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
572
+ var InfoTitle = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n flex-grow: 1;\n font-weight: 500;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n margin-bottom: 4px;\n"])));
573
+ var InfoFileType = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n width: auto;\n max-width: 18px;\n max-height: 18px;\n"])));
574
+ var InfoDescription = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n"])));
575
+ var Bottom = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-top: auto;\n padding: 0 10px 10px;\n"])));
576
+ var BottomSelectButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: ", ";\n flex-shrink: 0;\n cursor: pointer;\n transition: opacity 220ms;\n\n > svg {\n width: 23px;\n height: 100%;\n transition: color 120ms;\n color: ", ";\n }\n\n ", ":hover & {\n opacity: 1;\n }\n"])), function (props) {
558
577
  return props.selected ? 1 : 0;
559
578
  }, function (props) {
560
579
  return props.selected ? props.theme.getColor('orange-500') : 'inherit';
561
580
  }, AssetGalleryGridCard$2);
562
- var BottomActions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), AssetGalleryGridCard$2);
563
- var OverlayCompleted = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
581
+ var BottomActions = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n margin-left: auto;\n opacity: 0;\n transition: opacity 220ms;\n\n ", ":hover & {\n opacity: 1;\n }\n"])), AssetGalleryGridCard$2);
582
+ var OverlayCompleted = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
564
583
  return !props.softSelected && polished.rgba(props.theme.getColor('emerald-500'), 0.7);
565
584
  });
566
- var OverlayHasError = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
585
+ var OverlayHasError = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid ", ";\n"])), function (props) {
567
586
  return !props.softSelected && polished.rgba(props.theme.getColor('red-500'), 0.7);
568
587
  });
569
- var OverlaySelected = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
588
+ var OverlaySelected = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: -1px;\n bottom: -1px;\n left: -1px;\n right: -1px;\n pointer-events: none;\n transition: border-color 120ms;\n border: 4px solid\n ", ";\n"])), function (props) {
570
589
  return props.softSelected ? polished.rgba(props.theme.getColor('orange-500'), 0.5) : props.selected ? props.theme.getColor('orange-500') : 'transparent';
571
590
  });
572
- var ConsumerDefinedOverlay = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
573
- var Fragment = styled__default["default"].div(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral([""])));
591
+ var ConsumerDefinedOverlay = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n pointer-events: none;\n"])));
592
+ var Fragment = styled__default['default'].div(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral([""])));
574
593
 
575
- var _excluded$2 = ["component", "asset"],
576
- _excluded2 = ["component", "className"];
577
594
  var ComputedRootComponent = function ComputedRootComponent(_ref) {
578
595
  var component = _ref.component,
579
- asset = _ref.asset,
580
- props = defaultTheme._objectWithoutProperties(_ref, _excluded$2);
596
+ asset = _ref.asset,
597
+ props = defaultTheme._objectWithoutProperties(_ref, ["component", "asset"]);
598
+
581
599
  var newProps = lodash.omit(props, ['theme', 'extendedSelectMode']);
600
+
582
601
  if (component) {
583
602
  if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
584
- if (React__default["default"].isValidElement(component(asset, newProps.children))) {
585
- return React__default["default"].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
603
+
604
+ if (React__default['default'].isValidElement(component(asset, newProps.children))) {
605
+ return React__default['default'].cloneElement(component(asset, newProps.children), lodash.omit(newProps, ['children']));
586
606
  }
587
607
  }
588
- return React__default["default"].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
608
+
609
+ return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
589
610
  ref: newProps.innerRef
590
611
  }, newProps));
591
612
  };
613
+
592
614
  ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
593
- var ComputedActionButton = React__default["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
615
+ var ComputedActionButton = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
594
616
  var component = _ref2.component,
595
- className = _ref2.className,
596
- props = defaultTheme._objectWithoutProperties(_ref2, _excluded2);
617
+ className = _ref2.className,
618
+ props = defaultTheme._objectWithoutProperties(_ref2, ["component", "className"]);
619
+
597
620
  var newProps = props;
598
- newProps.children = React__default["default"].createElement(ActionButton.ActionButton, {
621
+ newProps.children = React__default['default'].createElement(ActionButton.ActionButton, {
599
622
  ref: forwardedRef,
600
623
  className: className,
601
624
  icon: newProps.icon,
602
625
  onClick: newProps.onClick
603
626
  });
627
+
604
628
  if (component) {
605
629
  if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
606
- if (React__default["default"].isValidElement(component())) {
607
- return React__default["default"].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
630
+
631
+ if (React__default['default'].isValidElement(component())) {
632
+ return React__default['default'].cloneElement(component(), defaultTheme._objectSpread2({}, lodash.omit(newProps, 'icon')));
608
633
  }
609
634
  }
610
- return React__default["default"].createElement(React__default["default"].Fragment, null, newProps.children);
635
+
636
+ return React__default['default'].createElement(React__default['default'].Fragment, null, newProps.children);
611
637
  });
638
+
612
639
  var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
613
640
  var _asset$note;
641
+
614
642
  var asset = props.asset,
615
- selectable = props.selectable,
616
- selected = props.selected,
617
- extendedSelectMode = props.extendedSelectMode,
618
- onAssetSelected = props.onAssetSelected,
619
- onAssetUnselected = props.onAssetUnselected,
620
- softSelected = props.softSelected,
621
- component = props.component,
622
- scrollPosition = props.scrollPosition;
643
+ selectable = props.selectable,
644
+ selected = props.selected,
645
+ extendedSelectMode = props.extendedSelectMode,
646
+ onAssetSelected = props.onAssetSelected,
647
+ onAssetUnselected = props.onAssetUnselected,
648
+ softSelected = props.softSelected,
649
+ component = props.component,
650
+ scrollPosition = props.scrollPosition;
623
651
  var videoPlayerRef = React.useRef();
624
652
  var cardRef = React.useRef();
625
653
  var dragRef = React.useRef(null);
654
+
626
655
  function onMouseEnter(event) {
627
656
  event.stopPropagation();
657
+
628
658
  if (videoPlayerRef.current) {
629
659
  var playPromise = videoPlayerRef.current.play();
660
+
630
661
  if (playPromise !== undefined) {
631
662
  playPromise.then(function () {})["catch"](function () {});
632
663
  }
633
664
  }
665
+
634
666
  if (lodash.isFunction(asset.onMouseEnter)) {
635
667
  asset.onMouseEnter(event, asset);
636
668
  }
637
669
  }
670
+
638
671
  function onMouseLeave(event) {
639
672
  event.stopPropagation();
673
+
640
674
  if (videoPlayerRef.current) {
641
675
  videoPlayerRef.current.pause();
642
676
  }
643
677
  }
678
+
644
679
  function onClick(event) {
645
680
  if (extendedSelectMode) {
646
681
  return onSelectClick(event);
647
682
  }
683
+
648
684
  if (lodash.isFunction(asset.onClick)) {
649
685
  asset.onClick(event, asset);
650
686
  }
651
687
  }
688
+
652
689
  function onSelectClick(event) {
653
690
  event.preventDefault();
654
691
  event.stopPropagation();
692
+
655
693
  if (selected) {
656
694
  return onAssetUnselected(asset.key);
657
695
  }
696
+
658
697
  return onAssetSelected(asset.key);
659
698
  }
699
+
660
700
  function onActionClick(event, action) {
661
701
  event.preventDefault();
662
702
  event.stopPropagation();
663
703
  action.onClick(asset);
664
704
  }
705
+
665
706
  function onContextMenu(event) {
666
707
  event.preventDefault();
667
708
  asset.onContextMenu(event);
668
709
  }
710
+
669
711
  function renderPreview(asset) {
670
712
  if (['video'].includes(asset.fileType)) {
671
- return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
713
+ return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
672
714
  scrollPosition: scrollPosition
673
- }, React__default["default"].createElement("video", {
715
+ }, React__default['default'].createElement("video", {
674
716
  ref: videoPlayerRef,
675
717
  loop: true,
676
718
  muted: true
677
- }, React__default["default"].createElement("source", {
719
+ }, React__default['default'].createElement("source", {
678
720
  src: asset.previewUrl,
679
721
  type: "video/mp4"
680
722
  })));
681
723
  }
724
+
682
725
  if (['audio'].includes(asset.fileType)) {
683
- return React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
726
+ return React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
684
727
  scrollPosition: scrollPosition
685
- }, React__default["default"].createElement("div", {
728
+ }, React__default['default'].createElement("div", {
686
729
  className: "audio"
687
- }, React__default["default"].createElement(SvgHeadset, null)));
730
+ }, React__default['default'].createElement(SvgHeadset, null)));
688
731
  }
689
- return React__default["default"].createElement(AssetFigure, null, React__default["default"].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
732
+
733
+ return React__default['default'].createElement(AssetFigure, null, React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadImage, {
690
734
  alt: asset.title,
691
735
  src: asset.previewUrl,
692
736
  height: "100%",
@@ -697,11 +741,13 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
697
741
  scrollPosition: scrollPosition
698
742
  }));
699
743
  }
744
+
700
745
  React.useEffect(function () {
701
746
  if (lodash.isFunction(asset.onContextMenu)) {
702
747
  if (cardRef.current) {
703
748
  cardRef.current.addEventListener('contextmenu', onContextMenu);
704
749
  }
750
+
705
751
  return function () {
706
752
  if (cardRef.current) {
707
753
  cardRef.current.removeEventListener('contextmenu', onContextMenu);
@@ -709,14 +755,17 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
709
755
  };
710
756
  }
711
757
  }, []);
758
+
712
759
  function onDragstart(event) {
713
760
  asset.onDragstart(event);
714
761
  }
762
+
715
763
  React.useEffect(function () {
716
764
  if (lodash.isFunction(asset.onDragstart)) {
717
765
  if (dragRef.current) {
718
766
  dragRef.current.addEventListener('dragstart', onDragstart);
719
767
  }
768
+
720
769
  return function () {
721
770
  if (dragRef.current) {
722
771
  dragRef.current.removeEventListener('dragstart', onDragstart);
@@ -732,7 +781,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
732
781
  });
733
782
  }
734
783
  }, [softSelected]);
735
- return React__default["default"].createElement(AssetGalleryGridCard$2, {
784
+ return React__default['default'].createElement(AssetGalleryGridCard$2, {
736
785
  as: ComputedRootComponent,
737
786
  component: component,
738
787
  asset: asset,
@@ -744,36 +793,36 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
744
793
  onMouseLeave: onMouseLeave,
745
794
  draggable: asset.draggable,
746
795
  innerRef: dragRef
747
- }, React__default["default"].createElement(ContentWrapper, {
796
+ }, React__default['default'].createElement(ContentWrapper, {
748
797
  layout: asset.layout,
749
798
  ref: cardRef
750
- }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default["default"].createElement(Note, {
799
+ }, ((_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React__default['default'].createElement(Note, {
751
800
  title: asset.note.title
752
- }, asset.note.icon ? asset.note.icon : React__default["default"].createElement(SvgWarningCircle, null), React__default["default"].createElement(NoteTitle, null, asset.note.title)), React__default["default"].createElement(Asset, {
801
+ }, asset.note.icon ? asset.note.icon : React__default['default'].createElement(SvgWarningCircle, null), React__default['default'].createElement(NoteTitle, null, asset.note.title)), React__default['default'].createElement(Asset, {
753
802
  "data-id": "ss"
754
- }, asset.previewUrl && renderPreview(asset)), React__default["default"].createElement(Info, null, React__default["default"].createElement("div", {
803
+ }, asset.previewUrl && renderPreview(asset)), React__default['default'].createElement(Info, null, React__default['default'].createElement("div", {
755
804
  style: {
756
805
  display: 'flex'
757
806
  }
758
- }, React__default["default"].createElement(InfoTitle, {
807
+ }, React__default['default'].createElement(InfoTitle, {
759
808
  title: asset.title
760
- }, asset.title || '—'), asset.fileType === 'video' && React__default["default"].createElement(InfoFileType, {
809
+ }, asset.title || '—'), asset.fileType === 'video' && React__default['default'].createElement(InfoFileType, {
761
810
  as: SvgPlay
762
- }), asset.fileType === 'audio' && React__default["default"].createElement(InfoFileType, {
811
+ }), asset.fileType === 'audio' && React__default['default'].createElement(InfoFileType, {
763
812
  as: SvgAudio
764
- }), asset.fileType === 'pdf' && React__default["default"].createElement(InfoFileType, {
813
+ }), asset.fileType === 'pdf' && React__default['default'].createElement(InfoFileType, {
765
814
  as: SvgPdf
766
- }), asset.fileType === 'file' && React__default["default"].createElement(InfoFileType, {
815
+ }), asset.fileType === 'file' && React__default['default'].createElement(InfoFileType, {
767
816
  as: SvgFile
768
- })), React__default["default"].createElement(InfoDescription, null, asset.description)), React__default["default"].createElement(Bottom, null, selectable && React__default["default"].createElement(BottomSelectButton, {
817
+ })), React__default['default'].createElement(InfoDescription, null, asset.description)), React__default['default'].createElement(Bottom, null, selectable && React__default['default'].createElement(BottomSelectButton, {
769
818
  selected: selected
770
- }, React__default["default"].createElement(SvgCheckCircleFilled, {
819
+ }, React__default['default'].createElement(SvgCheckCircleFilled, {
771
820
  onClick: onSelectClick
772
- })), React__default["default"].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
773
- return React__default["default"].createElement(Tooltip.Tooltip, {
821
+ })), React__default['default'].createElement(BottomActions, null, asset.actions && asset.actions.map(function (action) {
822
+ return React__default['default'].createElement(Tooltip.Tooltip, {
774
823
  key: "".concat(asset.key, "-").concat(action.title),
775
824
  content: action.title
776
- }, React__default["default"].createElement(Fragment, {
825
+ }, React__default['default'].createElement(Fragment, {
777
826
  as: ComputedActionButton,
778
827
  component: action.component,
779
828
  className: action.className,
@@ -782,15 +831,16 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
782
831
  return onActionClick(event, action);
783
832
  }
784
833
  }));
785
- })))), asset.completed && React__default["default"].createElement(OverlayCompleted, {
834
+ })))), asset.completed && React__default['default'].createElement(OverlayCompleted, {
786
835
  softSelected: softSelected
787
- }), asset.hasError && React__default["default"].createElement(OverlayHasError, {
836
+ }), asset.hasError && React__default['default'].createElement(OverlayHasError, {
788
837
  softSelected: softSelected
789
- }), selectable && React__default["default"].createElement(OverlaySelected, {
838
+ }), selectable && React__default['default'].createElement(OverlaySelected, {
790
839
  selected: selected,
791
840
  softSelected: softSelected
792
- }), asset.overlay && React__default["default"].createElement(ConsumerDefinedOverlay, null, asset.overlay));
841
+ }), asset.overlay && React__default['default'].createElement(ConsumerDefinedOverlay, null, asset.overlay));
793
842
  };
843
+
794
844
  AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
795
845
  asset: defaultTheme.PropTypes.shape(assetShapeWithLayout).isRequired,
796
846
  selectable: defaultTheme.PropTypes.bool,
@@ -803,7 +853,7 @@ AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
803
853
  scrollPosition: defaultTheme.PropTypes.number
804
854
  } : {};
805
855
  AssetGalleryGridCard.defaultProps = {};
806
- var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default["default"].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
856
+ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React__default['default'].memo(AssetGalleryGridCard, function (prevProps, nextProps) {
807
857
  var reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
808
858
  return reactiveProps.every(function (propKey) {
809
859
  return lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey);
@@ -811,37 +861,39 @@ var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(React
811
861
  }));
812
862
 
813
863
  var _templateObject, _templateObject2, _templateObject3;
814
- var AssetGalleryBase$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
815
- var GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n ", "\n display: flex;\n align-items: flex-end;\n position: absolute;\n padding-bottom: 4px;\n box-sizing: border-box;\n"])), function (props) {
864
+ var AssetGalleryBase$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n"])));
865
+ var GroupLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n ", "\n display: flex;\n align-items: flex-end;\n position: absolute;\n padding-bottom: 4px;\n box-sizing: border-box;\n"])), function (props) {
816
866
  return props.theme.primaryFontFamily;
817
867
  }, function (props) {
818
868
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
819
869
  });
820
- var AssetGalleryCardBase = styled__default["default"].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n overflow: hidden;\n will-change: transform, width, height;\n"])));
870
+ var AssetGalleryCardBase = styled__default['default'].div(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n margin: 0;\n overflow: hidden;\n will-change: transform, width, height;\n"])));
821
871
 
822
- var _excluded$1 = ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"];
823
- var AssetGalleryBase = React__default["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
872
+ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
824
873
  var assetsProp = _ref.assets,
825
- viewMode = _ref.viewMode,
826
- thumbnailMaxHeight = _ref.thumbnailMaxHeight,
827
- selectable = _ref.selectable,
828
- selectedAssetKeys = _ref.selectedAssetKeys,
829
- onAssetSelected = _ref.onAssetSelected,
830
- onAssetUnselected = _ref.onAssetUnselected,
831
- softSelectable = _ref.softSelectable,
832
- softSelectedAssetKey = _ref.softSelectedAssetKey,
833
- onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
834
- component = _ref.component,
835
- props = defaultTheme._objectWithoutProperties(_ref, _excluded$1);
874
+ viewMode = _ref.viewMode,
875
+ thumbnailMaxHeight = _ref.thumbnailMaxHeight,
876
+ selectable = _ref.selectable,
877
+ selectedAssetKeys = _ref.selectedAssetKeys,
878
+ onAssetSelected = _ref.onAssetSelected,
879
+ onAssetUnselected = _ref.onAssetUnselected,
880
+ softSelectable = _ref.softSelectable,
881
+ softSelectedAssetKey = _ref.softSelectedAssetKey,
882
+ onAssetSoftSelectedChanged = _ref.onAssetSoftSelectedChanged,
883
+ component = _ref.component,
884
+ props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "onAssetSoftSelectedChanged", "component"]);
885
+
836
886
  var assetGalleryDOMNode = React.useRef();
837
- var assetGalleryCompactRef = useMergedRefs(forwardedRef, assetGalleryDOMNode);
887
+ var assetGalleryCompactRef = TextInput.useMergedRefs(forwardedRef, assetGalleryDOMNode);
838
888
  var assetGalleryWidth = React.useRef(0);
839
889
  var minimumRowAspectRatio = React.useRef(0);
840
890
  var calculatedAssets = React.useRef([]);
891
+
841
892
  var _useState = React.useState([]),
842
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
843
- assets = _useState2[0],
844
- setAssets = _useState2[1];
893
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
894
+ assets = _useState2[0],
895
+ setAssets = _useState2[1];
896
+
845
897
  var MAXIMUM_ROW_HEIGHT = React.useMemo(function () {
846
898
  return viewMode === 'grid' ? 450 : thumbnailMaxHeight;
847
899
  }, [viewMode, thumbnailMaxHeight]);
@@ -860,8 +912,9 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
860
912
  useIsomorphicLayoutEffect(function () {
861
913
  if (!assetGalleryDOMNode.current) return;
862
914
  var throttledOnResize = lodash.throttle(onResize, 1);
863
- var resizeObserver = new ResizeObserver__default["default"](throttledOnResize);
915
+ var resizeObserver = new ResizeObserver__default['default'](throttledOnResize);
864
916
  resizeObserver.observe(assetGalleryDOMNode.current);
917
+
865
918
  function onResize(entries) {
866
919
  entries.forEach(function (entry) {
867
920
  if (assetGalleryWidth.current === entry.contentRect.width) return;
@@ -871,6 +924,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
871
924
  });
872
925
  });
873
926
  }
927
+
874
928
  return function () {
875
929
  resizeObserver.unobserve(assetGalleryDOMNode.current);
876
930
  };
@@ -878,20 +932,24 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
878
932
  React.useEffect(function () {
879
933
  main();
880
934
  }, [MAXIMUM_ROW_HEIGHT, assetsProp]);
935
+
881
936
  var main = function main() {
882
937
  calculateAssetGalleryAspectRatio();
883
938
  calculateLayout();
884
939
  calculateVisibility();
885
940
  };
941
+
886
942
  var calculateAssetGalleryAspectRatio = function calculateAssetGalleryAspectRatio() {
887
943
  if (assetGalleryWidth.current > 0) {
888
944
  minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
889
945
  }
890
946
  };
947
+
891
948
  var calculateLayout = function calculateLayout() {
892
949
  var assetsWithoutAKey = assetsProp.filter(function (a) {
893
950
  return !a.key;
894
951
  });
952
+
895
953
  if (assetsWithoutAKey.length > 0) {
896
954
  assetsProp = assetsProp.filter(function (a) {
897
955
  return a.key;
@@ -900,6 +958,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
900
958
  return console.warn("Omitted asset from the gallery because it was missing the unique `key` property.", a);
901
959
  });
902
960
  }
961
+
903
962
  if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
904
963
  var row = [];
905
964
  var translateX = 0;
@@ -910,6 +969,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
910
969
  var desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
911
970
  assetsProp.forEach(function (asset, index) {
912
971
  var _assetsProp;
972
+
913
973
  if (asset.group && asset.group !== lastGroup) {
914
974
  computedAssets.push({
915
975
  title: asset.group,
@@ -924,7 +984,9 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
924
984
  lastGroup = asset.group;
925
985
  translateY += 50 + SPACE_UNDER_ASSETS;
926
986
  }
987
+
927
988
  row.push(asset);
989
+
928
990
  if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
929
991
  row.forEach(function (rowAsset) {
930
992
  computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
@@ -954,6 +1016,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
954
1016
  var _computedAssets = [];
955
1017
  assetsProp.forEach(function (asset, index) {
956
1018
  var _assetsProp2;
1019
+
957
1020
  if (asset.group && asset.group !== _lastGroup) {
958
1021
  _computedAssets.push({
959
1022
  title: asset.group,
@@ -965,17 +1028,23 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
965
1028
  translateY: Math.round(_translateY)
966
1029
  }
967
1030
  });
1031
+
968
1032
  _lastGroup = asset.group;
969
1033
  _translateY += 50 + SPACE_UNDER_ASSETS;
970
1034
  }
1035
+
971
1036
  rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
1037
+
972
1038
  _row.push(asset);
1039
+
973
1040
  if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
974
1041
  rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
975
1042
  var totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (_row.length - 1);
976
1043
  var rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
1044
+
977
1045
  _row.forEach(function (rowAsset) {
978
1046
  var assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
1047
+
979
1048
  _computedAssets.push(defaultTheme._objectSpread2(defaultTheme._objectSpread2({}, rowAsset), {}, {
980
1049
  layout: {
981
1050
  type: 'asset',
@@ -986,8 +1055,10 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
986
1055
  hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
987
1056
  }
988
1057
  }));
1058
+
989
1059
  _translateX += assetWidth + SPACE_BETWEEN_ASSETS;
990
1060
  });
1061
+
991
1062
  _row = [];
992
1063
  rowAspectRatio = 0;
993
1064
  _translateY += rowHeight + SPACE_UNDER_ASSETS;
@@ -998,13 +1069,16 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
998
1069
  }
999
1070
  }
1000
1071
  };
1072
+
1001
1073
  function calculateAspectRatio(width, height) {
1002
1074
  return width / height;
1003
1075
  }
1076
+
1004
1077
  var totalGalleryHeight = React.useMemo(function () {
1005
1078
  if (assets.length === 0) {
1006
1079
  return 0;
1007
1080
  }
1081
+
1008
1082
  var lastAsset = assets[assets.length - 1];
1009
1083
  return lastAsset.layout.translateY + lastAsset.layout.height;
1010
1084
  }, [assets]);
@@ -1015,16 +1089,19 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1015
1089
  return window.removeEventListener('scroll', throttledOnScroll, false);
1016
1090
  };
1017
1091
  }, [assetGalleryDOMNode, calculatedAssets]);
1092
+
1018
1093
  function onScroll() {
1019
1094
  setScrollPositionAndDirection();
1020
1095
  calculateVisibility();
1021
1096
  }
1097
+
1022
1098
  function setScrollPositionAndDirection() {
1023
1099
  var newYOffset = window.pageYOffset;
1024
1100
  previousYOffset.current = latestYOffset.current;
1025
1101
  latestYOffset.current = newYOffset;
1026
1102
  scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
1027
1103
  }
1104
+
1028
1105
  var calculateVisibility = function calculateVisibility() {
1029
1106
  if (!assetGalleryDOMNode.current) return;
1030
1107
  var bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
@@ -1040,35 +1117,44 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1040
1117
  } else {
1041
1118
  asset.layout.show = true;
1042
1119
  }
1120
+
1043
1121
  return asset;
1044
1122
  });
1045
1123
  setAssets(finalizedAssets);
1046
1124
  };
1125
+
1047
1126
  function getOffsetTop(elem) {
1048
1127
  var offsetTop = 0;
1128
+
1049
1129
  do {
1050
1130
  if (!isNaN(elem.offsetTop)) {
1051
1131
  offsetTop += elem.offsetTop;
1052
1132
  }
1133
+
1053
1134
  elem = elem.offsetParent;
1054
1135
  } while (elem);
1136
+
1055
1137
  return offsetTop;
1056
1138
  }
1139
+
1057
1140
  var handleKeyPress = React.useCallback(function (e) {
1058
1141
  function isElementVisible(el) {
1059
1142
  var rect = el.getBoundingClientRect(),
1060
- vWidth = window.innerWidth || document.documentElement.clientWidth,
1061
- vHeight = window.innerHeight || document.documentElement.clientHeight,
1062
- efp = function efp(x, y) {
1063
- return document.elementFromPoint(x, y);
1064
- };
1143
+ vWidth = window.innerWidth || document.documentElement.clientWidth,
1144
+ vHeight = window.innerHeight || document.documentElement.clientHeight,
1145
+ efp = function efp(x, y) {
1146
+ return document.elementFromPoint(x, y);
1147
+ };
1148
+
1065
1149
  if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
1066
1150
  return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
1067
1151
  }
1152
+
1068
1153
  function softSelectFirstVisibleAsset() {
1069
1154
  var visibleAssets = assets.filter(function (asset) {
1070
1155
  return asset.layout.show;
1071
1156
  });
1157
+
1072
1158
  for (var i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
1073
1159
  if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
1074
1160
  onAssetSoftSelectedChanged(visibleAssets[i].key);
@@ -1076,18 +1162,22 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1076
1162
  }
1077
1163
  }
1078
1164
  }
1165
+
1079
1166
  if (assets.length === 0) return;
1167
+
1080
1168
  if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
1081
1169
  if (softSelectedAssetKey === null) {
1082
1170
  softSelectFirstVisibleAsset();
1083
1171
  return;
1084
1172
  }
1085
1173
  }
1174
+
1086
1175
  if (e.key === 'ArrowLeft') {
1087
1176
  var previousAssetIndex = assets.findIndex(function (asset) {
1088
1177
  return asset.key === softSelectedAssetKey;
1089
1178
  }) - 1;
1090
1179
  var previousAsset = assets[previousAssetIndex];
1180
+
1091
1181
  if (previousAsset) {
1092
1182
  if (previousAsset.layout.show) {
1093
1183
  onAssetSoftSelectedChanged(previousAsset.key);
@@ -1095,13 +1185,16 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1095
1185
  softSelectFirstVisibleAsset();
1096
1186
  }
1097
1187
  }
1188
+
1098
1189
  return;
1099
1190
  }
1191
+
1100
1192
  if (e.key === 'ArrowRight') {
1101
1193
  var nextAssetIndex = assets.findIndex(function (asset) {
1102
1194
  return asset.key === softSelectedAssetKey;
1103
1195
  }) + 1;
1104
1196
  var nextAsset = assets[nextAssetIndex];
1197
+
1105
1198
  if (nextAsset) {
1106
1199
  if (nextAsset.layout.show) {
1107
1200
  onAssetSoftSelectedChanged(nextAsset.key);
@@ -1109,10 +1202,13 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1109
1202
  softSelectFirstVisibleAsset();
1110
1203
  }
1111
1204
  }
1205
+
1112
1206
  return;
1113
1207
  }
1208
+
1114
1209
  if (e.key === 'Enter') {
1115
1210
  if (softSelectedAssetKey === null) return;
1211
+
1116
1212
  if (selectedAssetKeys.includes(softSelectedAssetKey)) {
1117
1213
  onAssetUnselected(softSelectedAssetKey);
1118
1214
  } else {
@@ -1127,6 +1223,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1127
1223
  if (softSelectable) {
1128
1224
  document.addEventListener('keydown', handleKeyPress);
1129
1225
  }
1226
+
1130
1227
  return function () {
1131
1228
  return document.removeEventListener('keydown', handleKeyPress);
1132
1229
  };
@@ -1135,31 +1232,32 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1135
1232
  if (softSelectable && softSelectedAssetKey !== null) {
1136
1233
  document.addEventListener('click', handleClick, true);
1137
1234
  }
1235
+
1138
1236
  return function () {
1139
1237
  return document.removeEventListener('click', handleClick, true);
1140
1238
  };
1141
1239
  }, [softSelectable, softSelectedAssetKey, handleClick]);
1142
- return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(AssetGalleryBase$1, defaultTheme._extends({
1240
+ return React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(AssetGalleryBase$1, defaultTheme._extends({
1143
1241
  ref: assetGalleryCompactRef,
1144
1242
  style: {
1145
1243
  height: "".concat(totalGalleryHeight, "px")
1146
1244
  },
1147
1245
  className: props.className
1148
1246
  }, props), assets.map(function (asset) {
1149
- return asset.layout.show && React__default["default"].createElement(React__default["default"].Fragment, {
1247
+ return asset.layout.show && React__default['default'].createElement(React__default['default'].Fragment, {
1150
1248
  key: "asset-gallery-".concat(asset.layout.type, "-").concat(asset.key)
1151
- }, asset.layout.type === 'groupLabel' && React__default["default"].createElement(GroupLabel, {
1249
+ }, asset.layout.type === 'groupLabel' && React__default['default'].createElement(GroupLabel, {
1152
1250
  style: {
1153
1251
  transform: "translate3d(".concat(asset.layout.translateX, "px,").concat(asset.layout.translateY, "px, 0)"),
1154
1252
  height: "".concat(asset.layout.height, "px")
1155
1253
  }
1156
- }, asset.title), asset.layout.type === 'asset' && React__default["default"].createElement(AssetGalleryCardBase, {
1254
+ }, asset.title), asset.layout.type === 'asset' && React__default['default'].createElement(AssetGalleryCardBase, {
1157
1255
  style: {
1158
1256
  transform: "translate3d(".concat(asset.layout.translateX, "px, ").concat(asset.layout.translateY, "px, 0)"),
1159
1257
  width: "".concat(asset.layout.width, "px"),
1160
1258
  height: "".concat(asset.layout.height, "px")
1161
1259
  }
1162
- }, viewMode === 'grid' ? React__default["default"].createElement(AssetGalleryGridCard$1, {
1260
+ }, viewMode === 'grid' ? React__default['default'].createElement(AssetGalleryGridCard$1, {
1163
1261
  asset: asset,
1164
1262
  selectable: 'selectable' in asset ? asset.selectable : selectable,
1165
1263
  selected: selectedAssetKeys.includes(asset.key),
@@ -1168,7 +1266,7 @@ var AssetGalleryBase = React__default["default"].forwardRef(function AssetGaller
1168
1266
  onAssetUnselected: onAssetUnselected,
1169
1267
  softSelected: softSelectedAssetKey === asset.key,
1170
1268
  component: component
1171
- }) : React__default["default"].createElement(AssetGalleryCompactCard$1, {
1269
+ }) : React__default['default'].createElement(AssetGalleryCompactCard$1, {
1172
1270
  asset: asset,
1173
1271
  hasHeightAndWidth: asset.layout.hasHeightAndWidth,
1174
1272
  selectable: 'selectable' in asset ? asset.selectable : selectable,
@@ -1196,31 +1294,34 @@ AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
1196
1294
  className: defaultTheme.PropTypes.string
1197
1295
  } : {};
1198
1296
 
1199
- var _excluded = ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"];
1200
- var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_ref, forwardedRef) {
1297
+ var AssetGallery = React__default['default'].forwardRef(function AssetGallery(_ref, forwardedRef) {
1201
1298
  var assets = _ref.assets,
1202
- viewMode = _ref.viewMode,
1203
- thumbnailMaxHeight = _ref.thumbnailMaxHeight,
1204
- selectable = _ref.selectable,
1205
- selectedAssetKeys = _ref.selectedAssetKeys,
1206
- onSelectedChanged = _ref.onSelectedChanged,
1207
- softSelectable = _ref.softSelectable,
1208
- onSoftSelectedChanged = _ref.onSoftSelectedChanged,
1209
- component = _ref.component,
1210
- props = defaultTheme._objectWithoutProperties(_ref, _excluded);
1299
+ viewMode = _ref.viewMode,
1300
+ thumbnailMaxHeight = _ref.thumbnailMaxHeight,
1301
+ selectable = _ref.selectable,
1302
+ selectedAssetKeys = _ref.selectedAssetKeys,
1303
+ onSelectedChanged = _ref.onSelectedChanged,
1304
+ softSelectable = _ref.softSelectable,
1305
+ onSoftSelectedChanged = _ref.onSoftSelectedChanged,
1306
+ component = _ref.component,
1307
+ props = defaultTheme._objectWithoutProperties(_ref, ["assets", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onSelectedChanged", "softSelectable", "onSoftSelectedChanged", "component"]);
1308
+
1211
1309
  var _useState = React.useState(selectedAssetKeys || []),
1212
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
1213
- selectedAssetKeysInternalState = _useState2[0],
1214
- setSelectedAssetKeysInternalState = _useState2[1];
1310
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
1311
+ selectedAssetKeysInternalState = _useState2[0],
1312
+ setSelectedAssetKeysInternalState = _useState2[1];
1313
+
1215
1314
  var _useState3 = React.useState(null),
1216
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
1217
- softSelectedAssetKeyInternalState = _useState4[0],
1218
- setSoftSelectedAssetKeyInternalState = _useState4[1];
1315
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
1316
+ softSelectedAssetKeyInternalState = _useState4[0],
1317
+ setSoftSelectedAssetKeyInternalState = _useState4[1];
1318
+
1219
1319
  React.useEffect(function () {
1220
1320
  setSelectedAssetKeysInternalState(selectedAssetKeys || []);
1221
1321
  }, [selectedAssetKeys]);
1222
1322
  React.useEffect(function () {
1223
1323
  if (selectedAssetKeys === selectedAssetKeysInternalState) return;
1324
+
1224
1325
  if (lodash.isFunction(onSelectedChanged)) {
1225
1326
  onSelectedChanged(selectedAssetKeysInternalState);
1226
1327
  }
@@ -1246,7 +1347,7 @@ var AssetGallery = React__default["default"].forwardRef(function AssetGallery(_r
1246
1347
  var assetKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
1247
1348
  setSoftSelectedAssetKeyInternalState(assetKey);
1248
1349
  }, []);
1249
- return React__default["default"].createElement(AssetGalleryBase, defaultTheme._extends({
1350
+ return React__default['default'].createElement(AssetGalleryBase, defaultTheme._extends({
1250
1351
  ref: forwardedRef,
1251
1352
  assets: assets,
1252
1353
  thumbnailMaxHeight: thumbnailMaxHeight,