@pismo/marola 2.1.50 → 2.1.51
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._dropdown-container_1szwv_1{position:relative;display:inline-block}._menu-button_1szwv_6{position:relative}._menu-options_1szwv_10{position:absolute;top:100%;left:0;z-index:1001;display:flex;flex-direction:column;min-width:16.25rem;padding-top:1rem;background-color:var(--white-100);border:1px solid var(--border-secondary);border-radius:.375rem;box-shadow:0 .125rem .625rem #0000000d}._menu-options_1szwv_10 ._menu-section--title_1szwv_24{padding-left:1rem}._menu-options_1szwv_10 ._menu-section_1szwv_24:not(:last-of-type){padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--border-secondary)}._menu-options_1szwv_10 ul{padding:0;margin:0;margin-bottom:.5rem;list-style:none}._menu-options_1szwv_10 li{display:flex;column-gap:.5rem;align-items:center;padding:.375rem 1rem;margin:.5rem .25rem;cursor:pointer;border-radius:.25rem}._menu-options_1szwv_10 li:hover{background-color:#0000000a}
|
|
@@ -17,8 +17,9 @@ type DropdownMenuProps = {
|
|
|
17
17
|
buttonProps?: Omit<ButtonProps, 'link'>;
|
|
18
18
|
menuSections: MenuSections;
|
|
19
19
|
buttonLabel: ReactNode;
|
|
20
|
-
|
|
20
|
+
containerClassName?: string;
|
|
21
|
+
dropdownClassName?: string;
|
|
21
22
|
'data-testid'?: string;
|
|
22
23
|
};
|
|
23
|
-
export declare const DropdownMenu: ({ buttonProps, menuSections, buttonLabel,
|
|
24
|
+
export declare const DropdownMenu: ({ buttonProps, menuSections, buttonLabel, containerClassName, dropdownClassName, "data-testid": dataTestId, }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
25
|
export default DropdownMenu;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import { Typography as
|
|
1
|
+
import { jsxs as s, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { useState as f } from "react";
|
|
3
|
+
import { c as l } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Icon as C } from "../Icon/Icon.js";
|
|
5
|
+
import { Typography as m } from "../Typography/Typography.js";
|
|
6
6
|
import "../Input/Input.js";
|
|
7
7
|
import "../Avatar/Avatar.js";
|
|
8
|
-
import { Button as
|
|
8
|
+
import { Button as k } from "../Button/Button.js";
|
|
9
9
|
import "../../Toggle-DcZTfLrC.js";
|
|
10
10
|
import "../Dialog/Dialog.js";
|
|
11
11
|
import "../DatePicker/DatePicker.js";
|
|
@@ -20,50 +20,53 @@ import "../Tabs/Tabs.js";
|
|
|
20
20
|
import "../../Group-DJz1rK2n.js";
|
|
21
21
|
import "../../contexts/SnackbarProvider/SnackbarProvider.js";
|
|
22
22
|
import "../../utils/iconsList.js";
|
|
23
|
-
import '../../assets/DropdownMenu.css';const
|
|
24
|
-
"
|
|
25
|
-
"menu-
|
|
26
|
-
"menu-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
23
|
+
import '../../assets/DropdownMenu.css';const r = {
|
|
24
|
+
"dropdown-container": "_dropdown-container_1szwv_1",
|
|
25
|
+
"menu-button": "_menu-button_1szwv_6",
|
|
26
|
+
"menu-options": "_menu-options_1szwv_10",
|
|
27
|
+
"menu-section--title": "_menu-section--title_1szwv_24",
|
|
28
|
+
"menu-section": "_menu-section_1szwv_24"
|
|
29
|
+
}, Q = ({
|
|
30
|
+
buttonProps: e,
|
|
31
|
+
menuSections: a,
|
|
32
|
+
buttonLabel: p,
|
|
33
|
+
containerClassName: d,
|
|
34
|
+
dropdownClassName: _,
|
|
35
|
+
"data-testid": u
|
|
33
36
|
}) => {
|
|
34
|
-
const [
|
|
35
|
-
return /* @__PURE__ */
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
|
|
37
|
+
const [c, t] = f(!1), h = l(r["menu-options"], _), v = l(r["dropdown-container"], d);
|
|
38
|
+
return /* @__PURE__ */ s("div", { className: v, children: [
|
|
39
|
+
/* @__PURE__ */ i("div", { className: r["menu-button"], children: /* @__PURE__ */ i(
|
|
40
|
+
k,
|
|
38
41
|
{
|
|
39
|
-
"data-testid":
|
|
40
|
-
...
|
|
42
|
+
"data-testid": u,
|
|
43
|
+
...e,
|
|
41
44
|
onClick: () => {
|
|
42
|
-
var
|
|
43
|
-
(
|
|
45
|
+
var n;
|
|
46
|
+
(n = e == null ? void 0 : e.onClick) == null || n.call(e), t(!c);
|
|
44
47
|
},
|
|
45
|
-
children:
|
|
48
|
+
children: p
|
|
46
49
|
}
|
|
47
50
|
) }),
|
|
48
|
-
|
|
49
|
-
!!
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
+
c && /* @__PURE__ */ i("div", { className: h, children: a.map((n, w) => /* @__PURE__ */ s("div", { className: r["menu-section"], children: [
|
|
52
|
+
!!n.sectionTitle && /* @__PURE__ */ i("div", { className: r["menu-section--title"], children: /* @__PURE__ */ i(m, { ...n.sectionTitleProps, children: n.sectionTitle }) }),
|
|
53
|
+
/* @__PURE__ */ i("ul", { children: n.sectionItems.map((o) => /* @__PURE__ */ s(
|
|
51
54
|
"li",
|
|
52
55
|
{
|
|
53
56
|
onClick: () => {
|
|
54
|
-
|
|
57
|
+
o == null || o.onClick(), t(!1);
|
|
55
58
|
},
|
|
56
59
|
children: [
|
|
57
|
-
|
|
58
|
-
/* @__PURE__ */
|
|
60
|
+
o.icon && /* @__PURE__ */ i(C, { color: o.iconColor || "var(--accent)", icon: o.icon }),
|
|
61
|
+
/* @__PURE__ */ i(m, { ...o.labelProps, children: o.label })
|
|
59
62
|
]
|
|
60
63
|
},
|
|
61
|
-
|
|
64
|
+
o.key
|
|
62
65
|
)) })
|
|
63
|
-
] },
|
|
66
|
+
] }, w)) })
|
|
64
67
|
] });
|
|
65
68
|
};
|
|
66
69
|
export {
|
|
67
|
-
|
|
68
|
-
|
|
70
|
+
Q as DropdownMenu,
|
|
71
|
+
Q as default
|
|
69
72
|
};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ buttonProps, menuSections, buttonLabel,
|
|
4
|
+
component: ({ buttonProps, menuSections, buttonLabel, containerClassName, dropdownClassName, "data-testid": dataTestId, }: {
|
|
5
5
|
buttonProps?: Omit<import('../Button/Button').ButtonProps, "link"> | undefined;
|
|
6
6
|
menuSections: import('./DropdownMenu').MenuSections;
|
|
7
7
|
buttonLabel: import('react').ReactNode;
|
|
8
|
-
|
|
8
|
+
containerClassName?: string | undefined;
|
|
9
|
+
dropdownClassName?: string | undefined;
|
|
9
10
|
'data-testid'?: string | undefined;
|
|
10
11
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
tags: string[];
|