@hortiview/shared-components 2.24.2 → 2.25.0
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.
- package/CHANGELOG.md +16 -0
- package/README.md +30 -32
- package/dist/assets/ContextMenu.css +1 -0
- package/dist/assets/stepper.css +1 -1
- package/dist/components/AllowedButton/AllowedButton.js +7 -7
- package/dist/components/AllowedIconButton/AllowedIconButton.d.ts +5 -18
- package/dist/components/AllowedIconButton/AllowedIconButton.js +21 -56
- package/dist/components/BaseView/BaseView.d.ts +9 -1
- package/dist/components/BaseView/BaseView.js +94 -89
- package/dist/components/ContextMenu/ContextMenu.d.ts +24 -57
- package/dist/components/ContextMenu/ContextMenu.js +72 -111
- package/dist/components/EmptyView/EmptyView.js +1 -1
- package/dist/components/Filter/Filter.js +1 -1
- package/dist/components/FloatingActionButton/FloatingActionButton.d.ts +76 -0
- package/dist/components/FloatingActionButton/FloatingActionButton.js +150 -0
- package/dist/components/ModulePadding/ModulePadding.js +1 -1
- package/dist/components/Stepper/Stepper.js +1 -1
- package/dist/components/Stepper/components/StepperButton.js +34 -33
- package/dist/components/Stepper/components/StepperHeader.js +1 -1
- package/dist/components/Stepper/components/StepperItem.js +1 -1
- package/dist/main.d.ts +1 -0
- package/dist/main.js +115 -113
- package/dist/services/UtilService.js +1 -1
- package/dist/stepper.module-C_EMu-Fl.js +22 -0
- package/dist/types/ListElement.d.ts +13 -3
- package/package.json +1 -1
- package/dist/contextMenu.module-RWPDK7Ds.js +0 -17
- package/dist/stepper.module-DR_FbENS.js +0 -23
- /package/dist/assets/{contextMenu.css → FloatingActionButton.css} +0 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ListItemProps } from '@element-public/react-list';
|
|
2
2
|
import { OfflineViewProps } from '../OfflineView/OfflineView';
|
|
3
|
+
import { IsAllowedProps } from '../PermissionChecks/PermissionService.tsx';
|
|
3
4
|
|
|
4
5
|
type ContextMenuProps = {
|
|
5
6
|
/**
|
|
@@ -16,9 +17,6 @@ type ContextMenuProps = {
|
|
|
16
17
|
* Default is 'vertical'
|
|
17
18
|
*/
|
|
18
19
|
iconOrientation?: 'vertical' | 'horizontal';
|
|
19
|
-
/**
|
|
20
|
-
* data-testid for testing
|
|
21
|
-
*/
|
|
22
20
|
'data-testid'?: string;
|
|
23
21
|
/**
|
|
24
22
|
* Whether the user is online; shows OfflineView when false.
|
|
@@ -28,40 +26,6 @@ type ContextMenuProps = {
|
|
|
28
26
|
* Props forwarded to <OfflineView /> when offline.
|
|
29
27
|
*/
|
|
30
28
|
offlineViewProps?: Partial<OfflineViewProps>;
|
|
31
|
-
/**
|
|
32
|
-
* If only one action is provided/allowed, trigger that action without opening the context menu
|
|
33
|
-
* @remarks Basically turns the component into an icon button
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
isSingleActionTriggeredOnClick?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* If only one action is provided/allowed, show the icon of that action, instead of the default menu one
|
|
39
|
-
*
|
|
40
|
-
* @default true
|
|
41
|
-
*/
|
|
42
|
-
hasActionIconForSingleAction?: boolean;
|
|
43
|
-
} & FloatingActionButtonProps;
|
|
44
|
-
export type FloatingActionButtonProps = {
|
|
45
|
-
/**
|
|
46
|
-
* Determines if the button should be rendered as a floating action button (FAB) on mobile devices.
|
|
47
|
-
* @default false
|
|
48
|
-
*/
|
|
49
|
-
isFloatingActionButtonOnMobile?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Specify a target element (query selector) to insert an extra padding element below.
|
|
52
|
-
* The padding element is used to make sure the FAB doesn't block any elements at the end of a view.
|
|
53
|
-
* @example '#layout-container'
|
|
54
|
-
* @remarks This padding attribute is not related to floatingButtonScreenOffsetType. The inserted padding is always the same size, slightly taller than the button height
|
|
55
|
-
*/
|
|
56
|
-
floatingButtonPaddingInsertTarget?: string;
|
|
57
|
-
/**
|
|
58
|
-
* Determines the distance/offset of the floating action button from the bottom and right edge of the screen
|
|
59
|
-
* - 'buttonAppBar' adds offset for when the element ButtonAppBar is used, so the button stays slightly above the bar
|
|
60
|
-
* - 'fullScreen' adds offset for a full-screen view, with the button sitting slightly above the screen edges
|
|
61
|
-
* @default 'buttonAppBar'
|
|
62
|
-
* @remarks This padding attribute is not related to floatingButtonPaddingInsertTarget. The paddingType just controls the offset of the button to the screen edges.
|
|
63
|
-
*/
|
|
64
|
-
floatingButtonScreenOffsetType?: 'buttonAppBar' | 'fullScreen';
|
|
65
29
|
};
|
|
66
30
|
export type ActionProps = ListItemProps & {
|
|
67
31
|
closeOnClick?: boolean;
|
|
@@ -70,35 +34,38 @@ export type ActionProps = ListItemProps & {
|
|
|
70
34
|
dividerAfter?: boolean;
|
|
71
35
|
/**
|
|
72
36
|
* whether the user has the permission to trigger the action, if false the action will not be shown
|
|
37
|
+
* @deprecated Use `permissionConfiguration` to simplify or `isHidden` instead
|
|
73
38
|
*/
|
|
74
39
|
isAllowed?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Permission configuration used to determine whether this action is shown.
|
|
42
|
+
* If the current user does not meet them, the action is hidden.
|
|
43
|
+
*
|
|
44
|
+
* Leave blank to always show the action.
|
|
45
|
+
*/
|
|
46
|
+
permissionConfiguration?: IsAllowedProps;
|
|
47
|
+
/**
|
|
48
|
+
* Whether the action should be hidden. If true, the action will not be shown.
|
|
49
|
+
* @remarks Use to control visibility based on specific conditions (aside from permissions)
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
52
|
+
isHidden?: boolean;
|
|
75
53
|
};
|
|
76
54
|
/**
|
|
77
|
-
* Renders action menu with optional permission-aware filtering, offline fallback,
|
|
78
|
-
* and mobile FAB presentation.
|
|
79
55
|
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
* @
|
|
85
|
-
* @param actions Menu actions to render.
|
|
56
|
+
* @param {boolean} triggerOpen indicates if the menu should be open
|
|
57
|
+
* @param {ListItemProps[]} actions list of actions to display in the context menu as ListItems
|
|
58
|
+
* @param testId id for testing, automatically prefixed
|
|
59
|
+
* @recommended `primaryText`, `onClick`, `leadingBlock`
|
|
60
|
+
* @requires `ListItemProps` from `@element-public/react-components`
|
|
86
61
|
* @example const actions = [
|
|
87
62
|
* { primaryText: 'Open', onClick: () => openSomeModal(), leadingBlock: 'add' },
|
|
88
63
|
* { primaryText: 'Delete', onClick: () => DeleteSomeThing(), leadingBlock: 'delete_outline'},
|
|
89
64
|
* { primaryText: 'Edit', onClick: () => EditSomeThing(), leadingBlock: 'edit'},
|
|
90
65
|
* ];
|
|
91
|
-
*
|
|
92
|
-
* @param
|
|
93
|
-
* @
|
|
94
|
-
* @param offlineViewProps Props forwarded to `OfflineView`.
|
|
95
|
-
*
|
|
96
|
-
* @param isSingleActionTriggeredOnClick Whether single allowed action should execute immediately.
|
|
97
|
-
* @param hasActionIconForSingleAction Whether single allowed action icon should replace default button icon.
|
|
98
|
-
* @param isFloatingActionButtonOnMobile Whether to render the button as a FAB on mobile.
|
|
99
|
-
* @param floatingButtonPaddingInsertTarget Selector for optional spacer insertion target.
|
|
100
|
-
* @param floatingButtonScreenOffsetType FAB offset preset for bottom spacing.
|
|
101
|
-
* @returns Context menu trigger and menu content, or `null` when no allowed actions exist.
|
|
66
|
+
* @param {boolean} isOnline Whether the user is online; shows OfflineView when false.
|
|
67
|
+
* @param {OfflineViewProps} offlineViewProps Props forwarded to OfflineView when offline.
|
|
68
|
+
* @returns a context menu with the given actions as ListItems
|
|
102
69
|
*/
|
|
103
|
-
export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps,
|
|
70
|
+
export declare const ContextMenu: ({ triggerOpen, actions, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
104
71
|
export {};
|
|
@@ -1,129 +1,90 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { I as
|
|
3
|
-
import { M as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
floatingButtonPaddingInsertTarget: m,
|
|
21
|
-
floatingButtonScreenOffsetType: v = "buttonAppBar"
|
|
1
|
+
import { jsx as t, jsxs as I } from "react/jsx-runtime";
|
|
2
|
+
import { I as A } from "../../index.es-CkB4776y.js";
|
|
3
|
+
import { M as h, L as k, a as c, b as y } from "../../index.es-Cg57snrN.js";
|
|
4
|
+
import { useState as q, useCallback as m, useEffect as L, useMemo as V, Fragment as B } from "react";
|
|
5
|
+
import { u as N } from "../../uniqueId-CJo-XRQb.js";
|
|
6
|
+
import { OfflineView as b } from "../OfflineView/OfflineView.js";
|
|
7
|
+
import { useIsAllowed as $ } from "../PermissionChecks/PermissionService.js";
|
|
8
|
+
import '../../assets/ContextMenu.css';const j = "_menu_x6qd9_1", z = "_icon_x6qd9_6", H = "_listItem_x6qd9_10", O = "_offlineViewMargin_x6qd9_20", n = {
|
|
9
|
+
menu: j,
|
|
10
|
+
icon: z,
|
|
11
|
+
listItem: H,
|
|
12
|
+
offlineViewMargin: O
|
|
13
|
+
}, U = ({
|
|
14
|
+
triggerOpen: s = null,
|
|
15
|
+
actions: r,
|
|
16
|
+
iconOrientation: _ = "vertical",
|
|
17
|
+
"data-testid": a,
|
|
18
|
+
isOnline: p = !0,
|
|
19
|
+
offlineViewProps: M
|
|
22
20
|
}) => {
|
|
23
|
-
const [
|
|
24
|
-
|
|
25
|
-
}, []),
|
|
26
|
-
|
|
27
|
-
}, [
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}, [
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
), { isDesktop: A } = E(), l = S && !A, k = d(() => {
|
|
35
|
-
if (s.length === 1 && b) {
|
|
36
|
-
const e = s[0];
|
|
37
|
-
if (typeof e.leadingBlock == "string")
|
|
38
|
-
return e.leadingBlock;
|
|
39
|
-
}
|
|
40
|
-
return p === "vertical" ? "more_vert" : "more_horiz";
|
|
41
|
-
}, [s, p, b]), C = d(() => m ? document.querySelector(m) : null, [m]);
|
|
42
|
-
if (s.length === 0) return null;
|
|
43
|
-
const y = /* @__PURE__ */ i(
|
|
44
|
-
F,
|
|
21
|
+
const [f, i] = q(!1), u = $(), d = m(() => {
|
|
22
|
+
i(!1);
|
|
23
|
+
}, []), g = m(() => {
|
|
24
|
+
i((e) => !e);
|
|
25
|
+
}, []);
|
|
26
|
+
L(() => {
|
|
27
|
+
i(s !== null ? s : !1);
|
|
28
|
+
}, [s]);
|
|
29
|
+
const o = V(() => r.filter((e) => e.isHidden || e.isAllowed === !1 ? !1 : !(e.permissionConfiguration && !u(e.permissionConfiguration))), [r, u]);
|
|
30
|
+
return o.length === 0 ? null : /* @__PURE__ */ t(
|
|
31
|
+
h,
|
|
45
32
|
{
|
|
46
|
-
className:
|
|
47
|
-
"data-testid":
|
|
48
|
-
open:
|
|
33
|
+
className: n.menu,
|
|
34
|
+
"data-testid": a ?? "contextMenu-undefined",
|
|
35
|
+
open: f,
|
|
49
36
|
surfaceOnly: !0,
|
|
50
|
-
hoistToBody: !
|
|
51
|
-
onClose:
|
|
52
|
-
trigger: /* @__PURE__ */
|
|
53
|
-
|
|
37
|
+
hoistToBody: !0,
|
|
38
|
+
onClose: d,
|
|
39
|
+
trigger: /* @__PURE__ */ t(
|
|
40
|
+
A,
|
|
54
41
|
{
|
|
55
|
-
className:
|
|
56
|
-
variant:
|
|
57
|
-
iconSize: l ? "xlarge" : void 0,
|
|
42
|
+
className: n.icon,
|
|
43
|
+
variant: f ? "filled-primary" : void 0,
|
|
58
44
|
"data-testid": "open-button",
|
|
59
|
-
icon:
|
|
60
|
-
onClick:
|
|
61
|
-
s.length === 1 && L ? (s[0].onClick?.(), a()) : w();
|
|
62
|
-
},
|
|
63
|
-
"data-icon": k
|
|
45
|
+
icon: _ === "vertical" ? "more_vert" : "more_horiz",
|
|
46
|
+
onClick: g
|
|
64
47
|
}
|
|
65
48
|
),
|
|
66
|
-
children:
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
49
|
+
children: p ? /* @__PURE__ */ t(k, { "data-testid": "selection-list", children: o.map((e, l) => {
|
|
50
|
+
const {
|
|
51
|
+
closeOnClick: w,
|
|
52
|
+
dividerBefore: x,
|
|
53
|
+
dividerAfter: C,
|
|
54
|
+
permissionConfiguration: S,
|
|
55
|
+
isAllowed: T,
|
|
56
|
+
isHidden: D,
|
|
57
|
+
...v
|
|
58
|
+
} = e;
|
|
59
|
+
return /* @__PURE__ */ I(B, { children: [
|
|
60
|
+
x && l !== 0 && /* @__PURE__ */ t(c, {}),
|
|
61
|
+
/* @__PURE__ */ t(
|
|
62
|
+
y,
|
|
63
|
+
{
|
|
64
|
+
className: n.listItem,
|
|
65
|
+
...v,
|
|
66
|
+
leadingBlockType: "icon",
|
|
67
|
+
"data-testid": e["data-testid"] ?? `contextMenu-action-${l}`,
|
|
68
|
+
onClick: () => {
|
|
69
|
+
e?.onClick?.(), w !== !1 && d();
|
|
70
|
+
}
|
|
77
71
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
72
|
+
),
|
|
73
|
+
C && l !== o.length - 1 && /* @__PURE__ */ t(c, {})
|
|
74
|
+
] }, N(`LI_${e.primaryText?.toString()}_`));
|
|
75
|
+
}) }) : /* @__PURE__ */ t(
|
|
76
|
+
b,
|
|
83
77
|
{
|
|
84
78
|
size: "small",
|
|
85
79
|
variant: "filled",
|
|
86
|
-
className:
|
|
87
|
-
...
|
|
80
|
+
className: n.offlineViewMargin,
|
|
81
|
+
...M
|
|
88
82
|
}
|
|
89
83
|
)
|
|
90
84
|
},
|
|
91
|
-
"
|
|
85
|
+
`contextMenu-${a ?? "undefined"}`
|
|
92
86
|
);
|
|
93
|
-
if (l) {
|
|
94
|
-
const e = /* @__PURE__ */ i(
|
|
95
|
-
"div",
|
|
96
|
-
{
|
|
97
|
-
className: o(
|
|
98
|
-
t.fabContainer,
|
|
99
|
-
v === "buttonAppBar" && t.buttonAppBar,
|
|
100
|
-
v === "fullScreen" && t.fullScreen
|
|
101
|
-
),
|
|
102
|
-
"data-testid": "fab-container",
|
|
103
|
-
children: y
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
return /* @__PURE__ */ g(_, { children: [
|
|
107
|
-
f(e, document.body),
|
|
108
|
-
f(
|
|
109
|
-
/* @__PURE__ */ i(
|
|
110
|
-
"div",
|
|
111
|
-
{
|
|
112
|
-
className: o(t.scrim, r && t.scrimVisible),
|
|
113
|
-
onClick: a,
|
|
114
|
-
"data-testid": "context-menu-scrim"
|
|
115
|
-
}
|
|
116
|
-
),
|
|
117
|
-
document.body
|
|
118
|
-
),
|
|
119
|
-
C && f(
|
|
120
|
-
/* @__PURE__ */ i("div", { className: t.fabSpacer, "data-testid": "fab-spacer" }),
|
|
121
|
-
C
|
|
122
|
-
)
|
|
123
|
-
] });
|
|
124
|
-
}
|
|
125
|
-
return y;
|
|
126
87
|
};
|
|
127
88
|
export {
|
|
128
|
-
|
|
89
|
+
U as ContextMenu
|
|
129
90
|
};
|
|
@@ -8,8 +8,8 @@ import "../../react-tooltip.min-Dkz5ltCC.js";
|
|
|
8
8
|
import "../../orderBy-Ce85KqD6.js";
|
|
9
9
|
import "../../index-CuHybtft.js";
|
|
10
10
|
import "../SharedComponentsPermissionProvider/PermissionContext.js";
|
|
11
|
-
import "react-dom";
|
|
12
11
|
import "../../uniqueId-CJo-XRQb.js";
|
|
12
|
+
import "react-dom";
|
|
13
13
|
import { LoadingSpinner as w } from "../LoadingSpinner/Default/LoadingSpinner.js";
|
|
14
14
|
import "react-hook-form";
|
|
15
15
|
import "../../get-CBFiuc3f.js";
|
|
@@ -14,8 +14,8 @@ import { SearchBar as I } from "../SearchBar/SearchBar.js";
|
|
|
14
14
|
import "../../index-CuHybtft.js";
|
|
15
15
|
import "../SharedComponentsPermissionProvider/PermissionContext.js";
|
|
16
16
|
import { Modal as K } from "../Modal/Modal.js";
|
|
17
|
-
import "react-dom";
|
|
18
17
|
import "../../uniqueId-CJo-XRQb.js";
|
|
18
|
+
import "react-dom";
|
|
19
19
|
import { Select as M } from "../Select/Select.js";
|
|
20
20
|
import "react-hook-form";
|
|
21
21
|
import "../../get-CBFiuc3f.js";
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { OfflineViewProps } from '../OfflineView/OfflineView';
|
|
2
|
+
import { ActionProps } from '../ContextMenu/ContextMenu.tsx';
|
|
3
|
+
|
|
4
|
+
export type FloatingActionButtonProps = {
|
|
5
|
+
/**
|
|
6
|
+
* List of actions to display in the FAB as ListItems
|
|
7
|
+
*/
|
|
8
|
+
actions: ActionProps[];
|
|
9
|
+
/**
|
|
10
|
+
* If not null, the menu will be open
|
|
11
|
+
*/
|
|
12
|
+
triggerOpen?: boolean | null;
|
|
13
|
+
/**
|
|
14
|
+
* Determines if the menu icon should be vertical or horizontal three dots when multiple actions are present
|
|
15
|
+
* Default is 'vertical'
|
|
16
|
+
*/
|
|
17
|
+
iconOrientation?: 'vertical' | 'horizontal';
|
|
18
|
+
'data-testid'?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the user is online; shows OfflineView when false.
|
|
21
|
+
*/
|
|
22
|
+
isOnline?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Props forwarded to <OfflineView /> when offline.
|
|
25
|
+
*/
|
|
26
|
+
offlineViewProps?: Partial<OfflineViewProps>;
|
|
27
|
+
/**
|
|
28
|
+
* If only one action is provided/allowed, trigger that action without opening the menu
|
|
29
|
+
* @remarks Basically turns the component into an icon button
|
|
30
|
+
* @default true
|
|
31
|
+
*/
|
|
32
|
+
isSingleActionTriggeredOnClick?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* If only one action is provided/visible, show the icon of that action in the FAB button instead of the default menu icon
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
hasActionIconForSingleAction?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Specify a target element (query selector) to insert an extra padding element below.
|
|
40
|
+
* The padding element is used to make sure the FAB doesn't block any elements at the end of a view.
|
|
41
|
+
* @example '#layout-container'
|
|
42
|
+
*/
|
|
43
|
+
floatingButtonPaddingInsertTarget?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Determines the distance/offset of the floating action button from the bottom and right edge of the screen
|
|
46
|
+
* - 'buttonAppBar' adds offset for when the element ButtonAppBar is used, so the button stays slightly above the bar
|
|
47
|
+
* - 'fullScreen' adds offset for a full-screen view, with the button sitting slightly above the screen edges
|
|
48
|
+
* @default 'buttonAppBar'
|
|
49
|
+
*/
|
|
50
|
+
floatingButtonScreenOffsetType?: 'buttonAppBar' | 'fullScreen';
|
|
51
|
+
/**
|
|
52
|
+
* Variants prefixed with filled- will add a background color to the icon according to the theme.
|
|
53
|
+
* Variants prefixed with color- will change the color of the icon according to the theme.
|
|
54
|
+
* Default: 'filled-primary'
|
|
55
|
+
*/
|
|
56
|
+
variant?: 'filled-danger-alt' | 'filled-danger' | 'filled-primary' | 'filled-secondary' | 'color-primary' | 'color-secondary' | 'color-on-dark' | 'color-on-unknown-black' | 'secondary-on-surface';
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* FloatingActionButton (FAB) for mobile and tablet layouts.
|
|
60
|
+
*
|
|
61
|
+
* Renders a floating action button fixed near the bottom-right of the viewport,
|
|
62
|
+
* providing quick access to contextual actions. Not rendered on desktop breakpoints.
|
|
63
|
+
*
|
|
64
|
+
* Behavior depends on the amount of actions:
|
|
65
|
+
* - No actions: renders nothing
|
|
66
|
+
* - Single action: clicking the FAB triggers it directly; optionally displays that action's icon on the FAB.
|
|
67
|
+
* This can be controlled using the `isSingleActionTriggeredOnClick` and `hasActionIconForSingleAction` props
|
|
68
|
+
* - Multiple actions: clicking the FAB toggles a menu with all available actions
|
|
69
|
+
*
|
|
70
|
+
* FAB and scrim are portaled to `document.body` to float above layout constraints
|
|
71
|
+
* Optional spacer element can be inserted into a target element via `floatingButtonPaddingInsertTarget` to prevent the FAB from covering content
|
|
72
|
+
*
|
|
73
|
+
* This component is anchored as a floating overlay
|
|
74
|
+
* Use `floatingButtonScreenOffsetType` to control the distance from screen edges (above bottom app bar or full-screen layout)
|
|
75
|
+
*/
|
|
76
|
+
export declare const FloatingActionButton: ({ actions, triggerOpen, iconOrientation, "data-testid": dataTestId, isOnline, offlineViewProps, hasActionIconForSingleAction, isSingleActionTriggeredOnClick, floatingButtonPaddingInsertTarget, floatingButtonScreenOffsetType, variant, }: FloatingActionButtonProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { jsx as n, jsxs as M, Fragment as z } from "react/jsx-runtime";
|
|
2
|
+
import { I as F } from "../../index.es-CkB4776y.js";
|
|
3
|
+
import { M as j, L as D, a as k, b as H } from "../../index.es-Cg57snrN.js";
|
|
4
|
+
import { c as r } from "../../index-Df2FYN-K.js";
|
|
5
|
+
import { useState as E, useCallback as w, useEffect as G, useMemo as f, Fragment as J } from "react";
|
|
6
|
+
import { createPortal as d } from "react-dom";
|
|
7
|
+
import { useBreakpoints as K } from "../../hooks/useBreakpoints.js";
|
|
8
|
+
import { OfflineView as O } from "../OfflineView/OfflineView.js";
|
|
9
|
+
import { useIsAllowed as Q } from "../PermissionChecks/PermissionService.js";
|
|
10
|
+
import '../../assets/FloatingActionButton.css';const R = "_menu_1bdpq_1", T = "_icon_1bdpq_6", U = "_listItem_1bdpq_10", W = "_offlineViewMargin_1bdpq_20", X = "_fabContainer_1bdpq_24", Y = "_buttonAppBar_1bdpq_29", Z = "_fullScreen_1bdpq_34", P = "_fabIcon_1bdpq_39", ee = "_fabMenu_1bdpq_43", te = "_scrim_1bdpq_47", ne = "_scrimVisible_1bdpq_60", ie = "_fabSpacer_1bdpq_65", t = {
|
|
11
|
+
menu: R,
|
|
12
|
+
icon: T,
|
|
13
|
+
listItem: U,
|
|
14
|
+
offlineViewMargin: W,
|
|
15
|
+
fabContainer: X,
|
|
16
|
+
buttonAppBar: Y,
|
|
17
|
+
fullScreen: Z,
|
|
18
|
+
fabIcon: P,
|
|
19
|
+
fabMenu: ee,
|
|
20
|
+
scrim: te,
|
|
21
|
+
scrimVisible: ne,
|
|
22
|
+
fabSpacer: ie
|
|
23
|
+
}, _e = ({
|
|
24
|
+
actions: m,
|
|
25
|
+
triggerOpen: a = null,
|
|
26
|
+
iconOrientation: u = "vertical",
|
|
27
|
+
"data-testid": b,
|
|
28
|
+
isOnline: B = !0,
|
|
29
|
+
offlineViewProps: S,
|
|
30
|
+
hasActionIconForSingleAction: p = !0,
|
|
31
|
+
isSingleActionTriggeredOnClick: h = !0,
|
|
32
|
+
floatingButtonPaddingInsertTarget: l,
|
|
33
|
+
floatingButtonScreenOffsetType: _ = "buttonAppBar",
|
|
34
|
+
variant: v = "filled-primary"
|
|
35
|
+
}) => {
|
|
36
|
+
const [g, c] = E(!1), { isDesktop: I } = K(), C = Q(), s = w(() => {
|
|
37
|
+
c(!1);
|
|
38
|
+
}, []), y = w(() => {
|
|
39
|
+
c((e) => !e);
|
|
40
|
+
}, []);
|
|
41
|
+
G(() => {
|
|
42
|
+
a !== null && c(!!a);
|
|
43
|
+
}, [a]);
|
|
44
|
+
const i = f(() => m.filter((e) => e.isHidden || e.isAllowed === !1 ? !1 : !(e.permissionConfiguration && !C(e.permissionConfiguration))), [m, C]), q = f(() => {
|
|
45
|
+
if (i.length === 1 && p) {
|
|
46
|
+
const e = i[0];
|
|
47
|
+
if (typeof e.leadingBlock == "string")
|
|
48
|
+
return e.leadingBlock;
|
|
49
|
+
}
|
|
50
|
+
return u === "vertical" ? "more_vert" : "more_horiz";
|
|
51
|
+
}, [i, u, p]), A = f(() => l ? document.querySelector(l) : null, [l]);
|
|
52
|
+
if (I || i.length === 0)
|
|
53
|
+
return null;
|
|
54
|
+
const V = /* @__PURE__ */ n(
|
|
55
|
+
j,
|
|
56
|
+
{
|
|
57
|
+
className: r(t.menu, t.fabMenu),
|
|
58
|
+
"data-testid": b ?? "fab-undefined",
|
|
59
|
+
open: g,
|
|
60
|
+
surfaceOnly: !0,
|
|
61
|
+
hoistToBody: !1,
|
|
62
|
+
onClose: s,
|
|
63
|
+
trigger: /* @__PURE__ */ n(
|
|
64
|
+
F,
|
|
65
|
+
{
|
|
66
|
+
className: r(t.icon, t.fabIcon),
|
|
67
|
+
variant: v,
|
|
68
|
+
iconSize: "xlarge",
|
|
69
|
+
"data-testid": "open-button",
|
|
70
|
+
icon: q,
|
|
71
|
+
onClick: () => {
|
|
72
|
+
i.length === 1 && h ? (i[0].onClick?.(), s()) : y();
|
|
73
|
+
},
|
|
74
|
+
"data-icon": q
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
children: B ? /* @__PURE__ */ n(D, { "data-testid": "selection-list", children: i.map((e, o) => {
|
|
78
|
+
const {
|
|
79
|
+
closeOnClick: N,
|
|
80
|
+
dividerBefore: L,
|
|
81
|
+
dividerAfter: $,
|
|
82
|
+
permissionConfiguration: se,
|
|
83
|
+
isAllowed: oe,
|
|
84
|
+
isHidden: re,
|
|
85
|
+
...x
|
|
86
|
+
} = e;
|
|
87
|
+
return /* @__PURE__ */ M(J, { children: [
|
|
88
|
+
L && o !== 0 && /* @__PURE__ */ n(k, {}),
|
|
89
|
+
/* @__PURE__ */ n(
|
|
90
|
+
H,
|
|
91
|
+
{
|
|
92
|
+
className: t.listItem,
|
|
93
|
+
...x,
|
|
94
|
+
leadingBlockType: "icon",
|
|
95
|
+
"data-testid": e["data-testid"] ?? `fab-action-${o}`,
|
|
96
|
+
onClick: () => {
|
|
97
|
+
e?.onClick?.(), N !== !1 && s();
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
$ && o !== i.length - 1 && /* @__PURE__ */ n(k, {})
|
|
102
|
+
] }, `LI_${e.primaryText?.toString()}_${o}`);
|
|
103
|
+
}) }) : /* @__PURE__ */ n(
|
|
104
|
+
O,
|
|
105
|
+
{
|
|
106
|
+
size: "small",
|
|
107
|
+
variant: "filled",
|
|
108
|
+
className: t.offlineViewMargin,
|
|
109
|
+
...S
|
|
110
|
+
}
|
|
111
|
+
)
|
|
112
|
+
},
|
|
113
|
+
`fab-${b ?? "undefined"}`
|
|
114
|
+
);
|
|
115
|
+
return /* @__PURE__ */ M(z, { children: [
|
|
116
|
+
d(
|
|
117
|
+
/* @__PURE__ */ n(
|
|
118
|
+
"div",
|
|
119
|
+
{
|
|
120
|
+
className: r(
|
|
121
|
+
t.fabContainer,
|
|
122
|
+
_ === "buttonAppBar" && t.buttonAppBar,
|
|
123
|
+
_ === "fullScreen" && t.fullScreen
|
|
124
|
+
),
|
|
125
|
+
"data-testid": "fab-container",
|
|
126
|
+
children: V
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
document.body
|
|
130
|
+
),
|
|
131
|
+
d(
|
|
132
|
+
/* @__PURE__ */ n(
|
|
133
|
+
"div",
|
|
134
|
+
{
|
|
135
|
+
className: r(t.scrim, g && t.scrimVisible),
|
|
136
|
+
onClick: s,
|
|
137
|
+
"data-testid": "context-menu-scrim"
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
document.body
|
|
141
|
+
),
|
|
142
|
+
A && d(
|
|
143
|
+
/* @__PURE__ */ n("div", { className: t.fabSpacer, "data-testid": "fab-spacer" }),
|
|
144
|
+
A
|
|
145
|
+
)
|
|
146
|
+
] });
|
|
147
|
+
};
|
|
148
|
+
export {
|
|
149
|
+
_e as FloatingActionButton
|
|
150
|
+
};
|
|
@@ -7,8 +7,8 @@ import "../../react-tooltip.min-Dkz5ltCC.js";
|
|
|
7
7
|
import "../../orderBy-Ce85KqD6.js";
|
|
8
8
|
import "../../index-CuHybtft.js";
|
|
9
9
|
import "../SharedComponentsPermissionProvider/PermissionContext.js";
|
|
10
|
-
import "react-dom";
|
|
11
10
|
import "../../uniqueId-CJo-XRQb.js";
|
|
11
|
+
import "react-dom";
|
|
12
12
|
import "react-hook-form";
|
|
13
13
|
import "../../get-CBFiuc3f.js";
|
|
14
14
|
import "../../isArray-olhCpv2e.js";
|
|
@@ -3,7 +3,7 @@ import { G as d } from "../../index.es-Z0aF-7Cn.js";
|
|
|
3
3
|
import { useMemo as f } from "react";
|
|
4
4
|
import { StepperPreviousButton as C, StepperNextButton as S } from "./components/StepperButton.js";
|
|
5
5
|
import { StepperHeader as k } from "./components/StepperHeader.js";
|
|
6
|
-
import { s as b } from "../../stepper.module-
|
|
6
|
+
import { s as b } from "../../stepper.module-C_EMu-Fl.js";
|
|
7
7
|
import { StepperStyle as D } from "./stepperStyles.js";
|
|
8
8
|
const G = ({
|
|
9
9
|
stepperStyle: m = D.DESKTOP,
|