@ntbjs/react-components 2.0.0-rc.27 → 2.0.0-rc.29

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 (28) hide show
  1. package/build/AssetAction-98d76ce0.js +133 -0
  2. package/build/AssetActionsBase-9e4c0735.js +38 -0
  3. package/build/{widgets/AssetGallery/AssetGallery.js → AssetGallery-63f721ec.js} +32 -407
  4. package/build/{widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js → AssetPreviewTopBar-acd6353d.js} +4 -4
  5. package/build/{Button-179a2fe4.js → Button-73eb8516.js} +1 -1
  6. package/build/{widgets/ContextMenu/ContextMenu.js → ContextMenu-0f7134e4.js} +3 -3
  7. package/build/{widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js → ContextMenuItem-ea411141.js} +3 -3
  8. package/build/{widgets/InfoCard/InfoCard.js → InfoCard-c98b6f5a.js} +4 -4
  9. package/build/{widgets/Instructions/Instructions.js → Instructions-bfd28cea.js} +6 -25
  10. package/build/{widgets/ProgressBar/ProgressBar.js → ProgressBar-bc4a4a7e.js} +4 -4
  11. package/build/SummaryCard-24040650.js +223 -0
  12. package/build/inputs/Button/index.js +2 -2
  13. package/build/inputs/index.js +2 -2
  14. package/build/styles/utils/colors.scss +4 -4
  15. package/build/widgets/AssetAction/index.js +7 -0
  16. package/build/widgets/AssetActionsBase/index.js +8 -0
  17. package/build/widgets/AssetGallery/index.js +48 -0
  18. package/build/widgets/AssetPreview/AssetPreviewTopBar/index.js +6 -0
  19. package/build/widgets/ContextMenu/ContextMenuItem/index.js +5 -0
  20. package/build/widgets/ContextMenu/index.js +5 -0
  21. package/build/widgets/InfoCard/index.js +6 -0
  22. package/build/widgets/Instructions/index.js +28 -0
  23. package/build/widgets/ProgressBar/index.js +6 -0
  24. package/build/widgets/SummaryCard/index.js +19 -0
  25. package/build/widgets/index.js +53 -0
  26. package/package.json +3 -3
  27. package/styles/utils/colors.scss +4 -4
  28. /package/build/widgets/ContextMenu/ContextMenuItemsGroup/{ContextMenuItemsGroup.js → index.js} +0 -0
@@ -0,0 +1,133 @@
1
+ import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
2
+ import React__default, { useRef, useState, useCallback } from 'react';
3
+ import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
4
+ import styled from 'styled-components';
5
+ import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions } from '@floating-ui/react';
6
+ import { isFunction } from 'lodash';
7
+
8
+ const AssetAction$1 = styled.div.attrs(applyDefaultTheme)`
9
+ font-family: ${props => props.theme.primaryFontFamily};
10
+ `;
11
+ const AssetActionButton = styled.div.attrs(applyDefaultTheme)`
12
+ border-radius: 50%;
13
+ width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
14
+ height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
15
+ cursor: pointer;
16
+ display: flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
20
+ ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
21
+ svg {
22
+ pointer-events: none;
23
+ width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
24
+ height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
25
+ ${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
26
+ }
27
+ `;
28
+ const ActionTitle = styled.div.attrs(applyDefaultTheme)`
29
+ font-size: 14px;
30
+ border-radius: 4px;
31
+ padding: 8px 12px;
32
+ white-space: nowrap;
33
+ color: white;
34
+ background: ${props => props.theme.getColor('gray-700')};
35
+ `;
36
+ const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)`
37
+ fill: ${props => props.theme.getColor('gray-700')};
38
+ `;
39
+ const Floating = styled.div.attrs(applyDefaultTheme)`
40
+ pointer-events: none;
41
+ `;
42
+
43
+ const AssetAction = React__default.forwardRef(function AssetAction({
44
+ action,
45
+ asset,
46
+ itemKey,
47
+ ...props
48
+ }, forwardedRef) {
49
+ const ARROW_WIDTH = 10;
50
+ const ARROW_HEIGHT = 5;
51
+ const GAP = 3;
52
+ const arrowRef = useRef(null);
53
+ const [isOpen, setIsOpen] = useState(false);
54
+ const [placement] = useState('bottom');
55
+ const {
56
+ refs,
57
+ floatingStyles,
58
+ context
59
+ } = useFloating({
60
+ placement,
61
+ open: isOpen,
62
+ onOpenChange: setIsOpen,
63
+ whileElementsMounted: autoUpdate,
64
+ middleware: [offset(ARROW_HEIGHT + GAP), flip({
65
+ padding: 5
66
+ }), shift({
67
+ padding: 5
68
+ }), arrow({
69
+ element: arrowRef
70
+ })]
71
+ });
72
+ const {
73
+ isMounted,
74
+ styles
75
+ } = useTransitionStyles(context, {
76
+ initial: {
77
+ transform: 'translateY(-8px)',
78
+ opacity: 0
79
+ },
80
+ duration: {
81
+ open: 200,
82
+ close: 100
83
+ }
84
+ });
85
+ const hover = useHover(context);
86
+ const dismiss = useDismiss(context, {
87
+ referencePress: true
88
+ });
89
+ const {
90
+ getReferenceProps,
91
+ getFloatingProps
92
+ } = useInteractions([dismiss, hover]);
93
+ const onActionClick = useCallback((e, action) => {
94
+ e.preventDefault();
95
+ e.stopPropagation();
96
+ if (isFunction(action?.onClick)) {
97
+ action.onClick(asset);
98
+ }
99
+ }, [action]);
100
+ return React__default.createElement(AssetAction$1, _extends({
101
+ ref: forwardedRef
102
+ }, props), React__default.createElement(AssetActionButton, _extends({
103
+ key: itemKey,
104
+ ref: refs.setReference
105
+ }, getReferenceProps(), {
106
+ onClick: e => onActionClick(e, action.onClick(asset), itemKey),
107
+ actionWidthHeight: action.actionWidthHeight
108
+ }), action.icon), isOpen && isMounted && React__default.createElement(Floating, _extends({
109
+ className: "floating",
110
+ ref: refs.setFloating,
111
+ style: floatingStyles
112
+ }, getFloatingProps()), React__default.createElement(ActionTitle, {
113
+ style: styles
114
+ }, action.title), React__default.createElement(StyledFloatingArrow, {
115
+ ref: arrowRef,
116
+ context: context,
117
+ width: ARROW_WIDTH,
118
+ height: ARROW_HEIGHT
119
+ })));
120
+ });
121
+ AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
122
+ action: PropTypes.shape({
123
+ icon: PropTypes.node,
124
+ onClick: PropTypes.func,
125
+ actionWidthHeight: PropTypes.arrayOf(PropTypes.number),
126
+ title: PropTypes.string
127
+ }),
128
+ asset: PropTypes.object,
129
+ itemKey: PropTypes.string
130
+ } : {};
131
+ AssetAction.defaultProps = {};
132
+
133
+ export { AssetAction as A };
@@ -0,0 +1,38 @@
1
+ import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
2
+ import React__default from 'react';
3
+ import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
4
+ import styled from 'styled-components';
5
+ import { A as AssetAction } from './AssetAction-98d76ce0.js';
6
+
7
+ const AssetActions = styled.div.attrs(applyDefaultTheme)`
8
+ font-family: ${props => props.theme.primaryFontFamily};
9
+ font-size: 1rem;
10
+ font-weight: 500;
11
+ display: flex;
12
+ flex-direction: column;
13
+ padding: 2px;
14
+ gap: 8px;
15
+ `;
16
+
17
+ const AssetActionsBase = React__default.forwardRef(function AssetActionsBase({
18
+ actions,
19
+ asset,
20
+ ...props
21
+ }, forwardedRef) {
22
+ const assetActions = actions.map((action, index) => React__default.createElement(AssetAction, _extends({
23
+ key: `index_${action.title}`,
24
+ ref: forwardedRef
25
+ }, props, {
26
+ action: action,
27
+ asset: asset,
28
+ itemKey: `${index}-${action.title}`
29
+ })));
30
+ return React__default.createElement(AssetActions, null, assetActions);
31
+ });
32
+ AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
33
+ actions: PropTypes.arrayOf(PropTypes.object),
34
+ asset: PropTypes.object
35
+ } : {};
36
+ AssetActionsBase.defaultProps = {};
37
+
38
+ export { AssetActionsBase as A };
@@ -1,48 +1,37 @@
1
- import { _ as _extends$4 } from '../../_rollupPluginBabelHelpers-c245b26a.js';
2
- import { isFunction, get, mapKeys, omit, isEmpty, throttle } from 'lodash';
3
- import { P as PropTypes, a as applyDefaultTheme, s as styleInject } from '../../defaultTheme-1bcc2541.js';
1
+ import { _ as _extends$4 } from './_rollupPluginBabelHelpers-c245b26a.js';
2
+ import { get, isFunction, mapKeys, omit, isEmpty, throttle } from 'lodash';
3
+ import { P as PropTypes, a as applyDefaultTheme, s as styleInject } from './defaultTheme-1bcc2541.js';
4
4
  import * as React from 'react';
5
- import React__default, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
5
+ import React__default, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
6
6
  import useMergedRefs from '@restart/hooks/useMergedRefs';
7
7
  import ResizeObserver from 'resize-observer-polyfill';
8
- import { u as useIsomorphicLayoutEffect } from '../../MultiLevelCheckboxSelect-d8044c88.js';
8
+ import { u as useIsomorphicLayoutEffect } from './MultiLevelCheckboxSelect-d8044c88.js';
9
9
  import styled, { css } from 'styled-components';
10
- import { S as SvgWarningCircle } from '../../warning-circle-24f3efcd.js';
11
- import { A as Alert } from '../../Alert-e6847a22.js';
12
- import { B as Badge } from '../../Badge-d93586a9.js';
13
- import { P as Popover } from '../../Popover-20050b91.js';
14
- import '../../Tab-04d435c3.js';
15
- import '../../Tabs-74d1ea8a.js';
16
- import { T as Tooltip } from '../../Tooltip-c1d1199e.js';
17
- import '../../VerificationStatusIcon-49cb1c1b.js';
18
- import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions, useMergeRefs } from '@floating-ui/react';
10
+ import { S as SvgWarningCircle } from './warning-circle-24f3efcd.js';
11
+ import './Alert-e6847a22.js';
12
+ import { B as Badge } from './Badge-d93586a9.js';
13
+ import { P as Popover } from './Popover-20050b91.js';
14
+ import './Tab-04d435c3.js';
15
+ import './Tabs-74d1ea8a.js';
16
+ import { T as Tooltip } from './Tooltip-c1d1199e.js';
17
+ import './VerificationStatusIcon-49cb1c1b.js';
18
+ import { S as SummaryCard } from './SummaryCard-24040650.js';
19
19
  import { rgba } from 'polished';
20
- import { A as ActionButton } from '../../ActionButton-4db754c3.js';
21
- import '../../Button-179a2fe4.js';
22
- import '../../Checkbox-4a5fd716.js';
23
- import '../../CompactAutocompleteSelect-52c49513.js';
24
- import '../../CompactStarRating-9af2f427.js';
25
- import '../../CompactTextInput-42ca5d42.js';
26
- import '../../MultiSelect-9f497e62.js';
27
- import '../../Radio-73ca3ae2.js';
28
- import '../../TextArea-1e5b9201.js';
29
- import '../../TextInput-fab35842.js';
30
- import '../../Switch-ecf3122b.js';
31
- import ContextMenu from '../ContextMenu/ContextMenu.js';
32
- import ContextMenuItem from '../ContextMenu/ContextMenuItem/ContextMenuItem.js';
33
- import '../../InputGroup-1294d190.js';
34
- import '../../SectionSeparator-f47760a2.js';
35
- import '../../close-a5d37608.js';
36
- import '@restart/hooks/useUpdateEffect';
37
- import '@tippyjs/react';
38
- import '../../shift-away-subtle-0dd94a03.js';
39
- import 'popper-max-size-modifier';
40
- import '../../expand-more-c5523c46.js';
41
- import 'nanoid';
42
- import 'react-select';
43
- import 'react-select-async-paginate';
44
- import 'react-select/creatable';
45
- import '../../edit-note-283a0e15.js';
20
+ import { FloatingArrow, useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions, useMergeRefs } from '@floating-ui/react';
21
+ import { A as AssetActionsBase } from './AssetActionsBase-9e4c0735.js';
22
+ import { A as ActionButton } from './ActionButton-4db754c3.js';
23
+ import './Button-73eb8516.js';
24
+ import './Checkbox-4a5fd716.js';
25
+ import './CompactAutocompleteSelect-52c49513.js';
26
+ import './CompactStarRating-9af2f427.js';
27
+ import './CompactTextInput-42ca5d42.js';
28
+ import './MultiSelect-9f497e62.js';
29
+ import './Radio-73ca3ae2.js';
30
+ import './TextArea-1e5b9201.js';
31
+ import './TextInput-fab35842.js';
32
+ import './Switch-ecf3122b.js';
33
+ import { C as ContextMenu } from './ContextMenu-0f7134e4.js';
34
+ import { C as ContextMenuItem } from './ContextMenuItem-ea411141.js';
46
35
 
47
36
  var _path$3;
48
37
  function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
@@ -189,214 +178,6 @@ const convertMsToHMS = ms => {
189
178
  return hmsString;
190
179
  };
191
180
 
192
- const shouldForwardProp$1 = prop => {
193
- return prop !== 'theme' && !prop.startsWith('$');
194
- };
195
- const SummaryCard$1 = styled.div.withConfig({
196
- shouldForwardProp: shouldForwardProp$1
197
- }).attrs(applyDefaultTheme)`
198
- display: flex;
199
- flex-direction: column;
200
- border-radius: 4px;
201
- width: ${props => props.width ? `${props.width}px` : '100%'};
202
- ${props => props.view === 'compact' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')) : 'background: transparent'};
203
-
204
- ${props => props.$useBorder ? props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-500')}`, `1px solid ${props.theme.getColor('gray-300')}`) : null}
205
- `;
206
- const Gutter = styled.div.withConfig({
207
- shouldForwardProp: shouldForwardProp$1
208
- }).attrs(applyDefaultTheme)`
209
- ${props => {
210
- if (props.renderAsMargin) {
211
- return css`
212
- margin-bottom: ${props.$gutter || 8}px;
213
- `;
214
- } else {
215
- return css`
216
- padding-bottom: ${props.$gutter || 8}px;
217
- `;
218
- }
219
- }}
220
- padding-bottom: ${props => props.$gutter || 8}px;
221
- `;
222
- const Header = styled.div.withConfig({
223
- shouldForwardProp: shouldForwardProp$1
224
- }).attrs(applyDefaultTheme)`
225
- display: flex;
226
- align-items: center;
227
- justify-content: space-between;
228
- padding: 0 16px;
229
- `;
230
- const HeaderLeft = styled.div.withConfig({
231
- shouldForwardProp: shouldForwardProp$1
232
- }).attrs(applyDefaultTheme)`
233
- display: flex;
234
- align-items: center;
235
- justify-content: flex-start;
236
-
237
- > * {
238
- margin-right: 4px;
239
- }
240
- `;
241
- const HeaderRight = styled.div.withConfig({
242
- shouldForwardProp: shouldForwardProp$1
243
- }).attrs(applyDefaultTheme)`
244
- display: flex;
245
- align-items: center;
246
- justify-content: flex-end;
247
-
248
- > * {
249
- margin-left: 4px;
250
- }
251
- `;
252
- const Title = styled.span.withConfig({
253
- shouldForwardProp: shouldForwardProp$1
254
- }).attrs(applyDefaultTheme)`
255
- display: inline-block;
256
- padding: 0 16px;
257
- font: normal normal 500 14px/19px Roboto;
258
- letter-spacing: 0.28px;
259
- display: -webkit-box;
260
- -webkit-line-clamp: 1;
261
- -webkit-box-orient: vertical;
262
- overflow: hidden;
263
- text-overflow: ellipsis;
264
- box-sizing: border-box;
265
-
266
- ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
267
- `;
268
- const Description = styled.span.withConfig({
269
- shouldForwardProp: shouldForwardProp$1
270
- }).attrs(applyDefaultTheme)`
271
- padding: 0 16px;
272
- text-align: left;
273
- font: normal normal normal 12px/16px Roboto;
274
- letter-spacing: 0.24px;
275
- display: -webkit-box;
276
- -webkit-line-clamp: 3;
277
- -webkit-box-orient: vertical;
278
- overflow: hidden;
279
- text-overflow: ellipsis;
280
- box-sizing: border-box;
281
-
282
- ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
283
- `;
284
- const Instruction = styled.div.withConfig({
285
- shouldForwardProp: shouldForwardProp$1
286
- }).attrs(applyDefaultTheme)``;
287
- const Footer = styled.div.withConfig({
288
- shouldForwardProp: shouldForwardProp$1
289
- }).attrs(applyDefaultTheme)`
290
- display: flex;
291
- align-items: center;
292
- justify-content: space-between;
293
- padding: 0 16px;
294
- `;
295
- const FooterLeft = styled.div.withConfig({
296
- shouldForwardProp: shouldForwardProp$1
297
- }).attrs(applyDefaultTheme)`
298
- display: flex;
299
- align-items: center;
300
- justify-content: flex-start;
301
-
302
- > * {
303
- margin-right: 4px;
304
- }
305
- `;
306
- const FooterRight = styled.div.withConfig({
307
- shouldForwardProp: shouldForwardProp$1
308
- }).attrs(applyDefaultTheme)`
309
- display: flex;
310
- align-items: center;
311
- justify-content: flex-end;
312
-
313
- > * {
314
- margin-left: 4px;
315
- }
316
- `;
317
- styled(FloatingArrow).withConfig({
318
- shouldForwardProp: shouldForwardProp$1
319
- }).attrs(applyDefaultTheme)`
320
- ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
321
- `;
322
-
323
- const SummaryCard = React__default.forwardRef(function AssetSummaryCard({
324
- activeSummaryCard,
325
- title,
326
- description,
327
- instructions,
328
- instructionsType,
329
- headerLeft,
330
- headerRight,
331
- footerLeft,
332
- footerRight,
333
- width,
334
- useBorder,
335
- view,
336
- ...props
337
- }, forwardedRef) {
338
- const shouldRenderInstructions = !!instructions;
339
- const shouldRenderHeader = !!headerLeft || !!headerRight;
340
- const shouldRenderFooter = !!footerLeft || !!footerRight;
341
- const shouldAddGutterAfterInstructions = shouldRenderInstructions && shouldRenderFooter;
342
- const shouldAddGutterAfterTitle = !!title && (!!description || !!instructions || shouldRenderFooter);
343
- if (!activeSummaryCard) return null;
344
- return React__default.createElement(SummaryCard$1, _extends$4({
345
- ref: forwardedRef,
346
- width: width,
347
- useBorder: useBorder
348
- }, props, {
349
- view: view
350
- }), shouldRenderHeader && React__default.createElement(React__default.Fragment, null, React__default.createElement(Gutter, {
351
- gutter: 8
352
- }), React__default.createElement(Header, null, React__default.createElement(HeaderLeft, null, headerLeft), React__default.createElement(HeaderRight, null, headerRight))), React__default.createElement(Gutter, {
353
- gutter: shouldRenderHeader ? 8 : 16
354
- }), title && React__default.createElement(Title, null, title), shouldAddGutterAfterTitle && React__default.createElement(Gutter, {
355
- gutter: 4
356
- }), description && React__default.createElement(Description, null, description), React__default.createElement(Gutter, {
357
- gutter: 16
358
- }), shouldRenderInstructions && React__default.createElement(Instruction, null, React__default.createElement(Alert, {
359
- icon: React__default.createElement(SvgWarningCircle, null),
360
- alertMessage: instructions,
361
- type: instructionsType,
362
- fontSize: 12,
363
- verticalPadding: 12,
364
- horizontalPadding: 16,
365
- width: width,
366
- lineClamp: 1
367
- })), shouldAddGutterAfterInstructions && React__default.createElement(Gutter, {
368
- gutter: 16
369
- }), shouldRenderFooter && React__default.createElement(Footer, null, React__default.createElement(FooterLeft, null, footerLeft), React__default.createElement(FooterRight, null, footerRight)), shouldRenderFooter && React__default.createElement(Gutter, {
370
- gutter: 16
371
- }));
372
- });
373
- SummaryCard.propTypes = process.env.NODE_ENV !== "production" ? {
374
- activeSummaryCard: PropTypes.bool,
375
- title: PropTypes.string,
376
- description: PropTypes.string,
377
- instructions: PropTypes.string,
378
- instructionsType: PropTypes.oneOf(['warning', 'error', 'info']),
379
- headerLeft: PropTypes.node,
380
- headerRight: PropTypes.node,
381
- footerLeft: PropTypes.node,
382
- footerRight: PropTypes.node,
383
- width: PropTypes.number,
384
- useBorder: PropTypes.bool,
385
- view: PropTypes.string
386
- } : {};
387
- SummaryCard.defaultProps = {
388
- title: '',
389
- description: '',
390
- instructions: '',
391
- instructionsType: 'info',
392
- headerLeft: null,
393
- headerRight: null,
394
- footerLeft: null,
395
- footerRight: null,
396
- useBorder: false,
397
- activeSummaryCard: false
398
- };
399
-
400
181
  const shouldForwardProp = prop => {
401
182
  return prop !== 'theme' && !prop.startsWith('$');
402
183
  };
@@ -713,168 +494,12 @@ styled.div.withConfig({
713
494
  padding: 4px 8px;
714
495
  border-radius: 4px;
715
496
  `;
716
- const StyledFloatingArrow$1 = styled(FloatingArrow).withConfig({
497
+ const StyledFloatingArrow = styled(FloatingArrow).withConfig({
717
498
  shouldForwardProp
718
499
  }).attrs(applyDefaultTheme)`
719
500
  ${props => props.theme.themeProp('fill', props.theme.getColor('gray-700'), props.theme.getColor('white'))}
720
501
  `;
721
502
 
722
- const AssetActions = styled.div.attrs(applyDefaultTheme)`
723
- font-family: ${props => props.theme.primaryFontFamily};
724
- font-size: 1rem;
725
- font-weight: 500;
726
- display: flex;
727
- flex-direction: column;
728
- padding: 2px;
729
- gap: 8px;
730
- `;
731
-
732
- const AssetAction$1 = styled.div.attrs(applyDefaultTheme)`
733
- font-family: ${props => props.theme.primaryFontFamily};
734
- `;
735
- const AssetActionButton = styled.div.attrs(applyDefaultTheme)`
736
- border-radius: 50%;
737
- width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0]}px` : 'auto'};
738
- height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1]}px` : 'auto'};
739
- cursor: pointer;
740
- display: flex;
741
- justify-content: center;
742
- align-items: center;
743
- box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
744
- ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
745
- svg {
746
- pointer-events: none;
747
- width: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[0] - 14}px` : 'auto'};
748
- height: ${props => props.actionWidthHeight ? `${props.actionWidthHeight[1] - 14}px` : 'auto'};
749
- ${props => props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
750
- }
751
- `;
752
- const ActionTitle = styled.div.attrs(applyDefaultTheme)`
753
- font-size: 14px;
754
- border-radius: 4px;
755
- padding: 8px 12px;
756
- white-space: nowrap;
757
- color: white;
758
- background: ${props => props.theme.getColor('gray-700')};
759
- `;
760
- const StyledFloatingArrow = styled(FloatingArrow).attrs(applyDefaultTheme)`
761
- fill: ${props => props.theme.getColor('gray-700')};
762
- `;
763
- const Floating = styled.div.attrs(applyDefaultTheme)`
764
- pointer-events: none;
765
- `;
766
-
767
- const AssetAction = React__default.forwardRef(function AssetAction({
768
- action,
769
- asset,
770
- itemKey,
771
- ...props
772
- }, forwardedRef) {
773
- const ARROW_WIDTH = 10;
774
- const ARROW_HEIGHT = 5;
775
- const GAP = 3;
776
- const arrowRef = useRef(null);
777
- const [isOpen, setIsOpen] = useState(false);
778
- const [placement] = useState('bottom');
779
- const {
780
- refs,
781
- floatingStyles,
782
- context
783
- } = useFloating({
784
- placement,
785
- open: isOpen,
786
- onOpenChange: setIsOpen,
787
- whileElementsMounted: autoUpdate,
788
- middleware: [offset(ARROW_HEIGHT + GAP), flip({
789
- padding: 5
790
- }), shift({
791
- padding: 5
792
- }), arrow({
793
- element: arrowRef
794
- })]
795
- });
796
- const {
797
- isMounted,
798
- styles
799
- } = useTransitionStyles(context, {
800
- initial: {
801
- transform: 'translateY(-8px)',
802
- opacity: 0
803
- },
804
- duration: {
805
- open: 200,
806
- close: 100
807
- }
808
- });
809
- const hover = useHover(context);
810
- const dismiss = useDismiss(context, {
811
- referencePress: true
812
- });
813
- const {
814
- getReferenceProps,
815
- getFloatingProps
816
- } = useInteractions([dismiss, hover]);
817
- const onActionClick = useCallback((e, action) => {
818
- e.preventDefault();
819
- e.stopPropagation();
820
- if (isFunction(action?.onClick)) {
821
- action.onClick(asset);
822
- }
823
- }, [action]);
824
- return React__default.createElement(AssetAction$1, _extends$4({
825
- ref: forwardedRef
826
- }, props), React__default.createElement(AssetActionButton, _extends$4({
827
- key: itemKey,
828
- ref: refs.setReference
829
- }, getReferenceProps(), {
830
- onClick: e => onActionClick(e, action.onClick(asset), itemKey),
831
- actionWidthHeight: action.actionWidthHeight
832
- }), action.icon), isOpen && isMounted && React__default.createElement(Floating, _extends$4({
833
- className: "floating",
834
- ref: refs.setFloating,
835
- style: floatingStyles
836
- }, getFloatingProps()), React__default.createElement(ActionTitle, {
837
- style: styles
838
- }, action.title), React__default.createElement(StyledFloatingArrow, {
839
- ref: arrowRef,
840
- context: context,
841
- width: ARROW_WIDTH,
842
- height: ARROW_HEIGHT
843
- })));
844
- });
845
- AssetAction.propTypes = process.env.NODE_ENV !== "production" ? {
846
- action: PropTypes.shape({
847
- icon: PropTypes.node,
848
- onClick: PropTypes.func,
849
- actionWidthHeight: PropTypes.arrayOf(PropTypes.number),
850
- title: PropTypes.string
851
- }),
852
- asset: PropTypes.object,
853
- itemKey: PropTypes.string
854
- } : {};
855
- AssetAction.defaultProps = {};
856
-
857
- const AssetActionsBase = React__default.forwardRef(function AssetActionsBase({
858
- actions,
859
- asset,
860
- ...props
861
- }, forwardedRef) {
862
- const assetActions = actions.map((action, index) => React__default.createElement(AssetAction, _extends$4({
863
- key: `index_${action.title}`,
864
- ref: forwardedRef
865
- }, props, {
866
- action: action,
867
- asset: asset,
868
- itemKey: `${index}-${action.title}`
869
- })));
870
- return React__default.createElement(AssetActions, null, assetActions);
871
- });
872
- AssetActionsBase.propTypes = process.env.NODE_ENV !== "production" ? {
873
- actions: PropTypes.arrayOf(PropTypes.object),
874
- asset: PropTypes.object
875
- } : {};
876
- AssetActionsBase.defaultProps = {};
877
-
878
503
  const ComputedRootComponent$1 = ({
879
504
  component,
880
505
  asset,
@@ -1221,7 +846,7 @@ const AssetGalleryCompactCard = props => {
1221
846
  }, getFloatingProps()), React__default.createElement("div", {
1222
847
  style: styles,
1223
848
  className: "floating"
1224
- }, renderPopoverContent(), React__default.createElement(StyledFloatingArrow$1, {
849
+ }, renderPopoverContent(), React__default.createElement(StyledFloatingArrow, {
1225
850
  ref: arrowRef,
1226
851
  context: context,
1227
852
  width: ARROW_WIDTH,
@@ -2353,4 +1978,4 @@ AssetGallery.defaultProps = {
2353
1978
  displayIcon: ''
2354
1979
  };
2355
1980
 
2356
- export { AssetGallery as default };
1981
+ export { AssetGallery as A };
@@ -1,9 +1,9 @@
1
- import { _ as _extends$1 } from '../../../_rollupPluginBabelHelpers-c245b26a.js';
1
+ import { _ as _extends$1 } from './_rollupPluginBabelHelpers-c245b26a.js';
2
2
  import * as React from 'react';
3
3
  import React__default from 'react';
4
- import { a as applyDefaultTheme, P as PropTypes } from '../../../defaultTheme-1bcc2541.js';
4
+ import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
5
5
  import styled, { css } from 'styled-components';
6
- import { S as SvgClose } from '../../../close-a5d37608.js';
6
+ import { S as SvgClose } from './close-a5d37608.js';
7
7
 
8
8
  var _path;
9
9
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -124,4 +124,4 @@ AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
124
124
  } : {};
125
125
  AssetPreviewTopBar.defaultProps = {};
126
126
 
127
- export { AssetPreviewTopBar as default };
127
+ export { AssetPreviewTopBar as A };
@@ -3,7 +3,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
3
3
  import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
4
4
  import styled, { css } from 'styled-components';
5
5
  import { P as Popover } from './Popover-20050b91.js';
6
- import ContextMenu from './widgets/ContextMenu/ContextMenu.js';
6
+ import { C as ContextMenu } from './ContextMenu-0f7134e4.js';
7
7
  import { S as SvgExpandMore } from './expand-more-c5523c46.js';
8
8
 
9
9
  const Button$1 = styled.button.attrs(applyDefaultTheme)`
@@ -1,6 +1,6 @@
1
- import { _ as _extends } from '../../_rollupPluginBabelHelpers-c245b26a.js';
1
+ import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
2
2
  import React__default from 'react';
3
- import { a as applyDefaultTheme, P as PropTypes } from '../../defaultTheme-1bcc2541.js';
3
+ import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
4
4
  import styled from 'styled-components';
5
5
 
6
6
  const ContextMenu$1 = styled.div.attrs(applyDefaultTheme)`
@@ -23,4 +23,4 @@ ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
23
23
  } : {};
24
24
  ContextMenu.defaultProps = {};
25
25
 
26
- export { ContextMenu as default };
26
+ export { ContextMenu as C };