asma-ui-core 3.100.0 → 3.100.1
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/dist/components/utils/filter-menu/StyledFilterButton.js +18 -12
- package/dist/components/utils/filter-menu/StyledFilterMenu.js +36 -30
- package/dist/src/components/utils/filter-menu/StyledFilterButton.d.ts +1 -1
- package/dist/src/components/utils/filter-menu/StyledFilterMenu.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { StyledBadge as m } from "../../data-display/badge/StyledBadge.js";
|
|
2
|
+
import { FilterIcon as c } from "../../icons/filter-icon/FilterIcon.js";
|
|
3
|
+
import { StyledButton as s } from "../../inputs/button/StyledButton.js";
|
|
4
|
+
import { useDynamicToolbarLayout as p } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
|
|
5
|
+
import f from "clsx";
|
|
6
|
+
import { Fragment as u, jsx as r, jsxs as g } from "react/jsx-runtime";
|
|
7
|
+
var B = ({ filterIsActive: i, label: o, hideLabel: l, size: t = "large", variant: a = "outlined", ...n }) => {
|
|
8
|
+
const { filterIconOnly: d } = p(), e = l ?? d;
|
|
9
|
+
return /* @__PURE__ */ r(u, { children: /* @__PURE__ */ g("div", {
|
|
9
10
|
className: "relative h-fit w-fit",
|
|
10
|
-
children: [/* @__PURE__ */ r(
|
|
11
|
+
children: [/* @__PURE__ */ r(s, {
|
|
11
12
|
...n,
|
|
12
13
|
type: "button",
|
|
13
14
|
"aria-label": e ? o ?? "Filter" : void 0,
|
|
14
|
-
startIcon: /* @__PURE__ */ r(
|
|
15
|
+
startIcon: /* @__PURE__ */ r(c, {
|
|
15
16
|
width: t === "large" ? 24 : 20,
|
|
16
17
|
height: t === "large" ? 24 : 20
|
|
17
18
|
}),
|
|
18
19
|
variant: a,
|
|
19
20
|
size: t,
|
|
20
21
|
children: !e && (o ?? "Filter")
|
|
21
|
-
}), i && /* @__PURE__ */ r(
|
|
22
|
+
}), i && /* @__PURE__ */ r(m, {
|
|
23
|
+
dataTest: "filter-button-active-dot",
|
|
24
|
+
variant: "dot",
|
|
25
|
+
purpose: "filter",
|
|
26
|
+
className: f("absolute", t === "large" ? "right-2 top-2" : "right-1 top-1")
|
|
27
|
+
})]
|
|
22
28
|
}) });
|
|
23
29
|
};
|
|
24
30
|
export {
|
|
25
|
-
|
|
31
|
+
B as StyledFilterButton
|
|
26
32
|
};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { StyledBadge as O } from "../../data-display/badge/StyledBadge.js";
|
|
1
2
|
import { FilterIcon as b } from "../../icons/filter-icon/FilterIcon.js";
|
|
2
|
-
import { StyledButton as
|
|
3
|
-
import { StyledPopover as
|
|
4
|
-
import { useDynamicToolbarLayout as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { Fragment as
|
|
8
|
-
var
|
|
9
|
-
const [r, t] =
|
|
3
|
+
import { StyledButton as E } from "../../inputs/button/StyledButton.js";
|
|
4
|
+
import { StyledPopover as F } from "../popover/StyledPopover.js";
|
|
5
|
+
import { useDynamicToolbarLayout as k } from "../../custom/module/header-layout/DynamicToolbarLayoutContext.js";
|
|
6
|
+
import x from "clsx";
|
|
7
|
+
import s, { useState as C } from "react";
|
|
8
|
+
import { Fragment as I, jsx as c, jsxs as y } from "react/jsx-runtime";
|
|
9
|
+
var S = () => {
|
|
10
|
+
const [r, t] = C(null), e = (a) => {
|
|
10
11
|
const o = a.currentTarget;
|
|
11
12
|
t(o);
|
|
12
13
|
}, l = () => {
|
|
@@ -16,38 +17,43 @@ var I = () => {
|
|
|
16
17
|
anchorEl: r,
|
|
17
18
|
onClose: l,
|
|
18
19
|
onAnchorClick: (a) => {
|
|
19
|
-
r ? l() :
|
|
20
|
+
r ? l() : e(a);
|
|
20
21
|
}
|
|
21
22
|
};
|
|
22
|
-
}, N = (r) =>
|
|
23
|
-
const { onAnchorClick: u, onClose: m, anchorEl:
|
|
24
|
-
isOpen: !!
|
|
23
|
+
}, N = (r) => s.isValidElement(r) || typeof r == "string" || typeof r == "number" || r === null || Array.isArray(r), D = ({ filterIsActive: r, popoverContent: t, dataTest: e, disabled: l, size: n = "large", variant: a = "outlined", popoverProps: o, anchorNode: d, label: h, hideLabel: v }) => {
|
|
24
|
+
const { onAnchorClick: u, onClose: m, anchorEl: i } = S(), { filterIconOnly: A } = k(), g = v ?? A, f = d?.({
|
|
25
|
+
isOpen: !!i,
|
|
25
26
|
onClose: m
|
|
26
|
-
}), p =
|
|
27
|
-
return /* @__PURE__ */ y(
|
|
27
|
+
}), p = s.useId();
|
|
28
|
+
return /* @__PURE__ */ y(I, { children: [/* @__PURE__ */ y("div", {
|
|
28
29
|
className: "relative h-fit w-fit",
|
|
29
|
-
children: [
|
|
30
|
+
children: [d && s.isValidElement(f) ? s.cloneElement(f, { onClick: u }) : /* @__PURE__ */ c(E, {
|
|
30
31
|
type: "button",
|
|
31
32
|
disabled: l,
|
|
32
33
|
variant: a,
|
|
33
|
-
startIcon: /* @__PURE__ */
|
|
34
|
-
width:
|
|
35
|
-
height:
|
|
34
|
+
startIcon: /* @__PURE__ */ c(b, {
|
|
35
|
+
width: n === "large" ? 24 : 20,
|
|
36
|
+
height: n === "large" ? 24 : 20
|
|
36
37
|
}),
|
|
37
38
|
onClick: u,
|
|
38
|
-
size:
|
|
39
|
-
dataTest:
|
|
40
|
-
"aria-label": g ?
|
|
39
|
+
size: n,
|
|
40
|
+
dataTest: e,
|
|
41
|
+
"aria-label": g ? h ?? "Filter" : void 0,
|
|
41
42
|
"aria-haspopup": "true",
|
|
42
|
-
"aria-expanded": !!
|
|
43
|
-
"aria-controls":
|
|
44
|
-
children: !g && (
|
|
45
|
-
}), r && /* @__PURE__ */
|
|
46
|
-
|
|
43
|
+
"aria-expanded": !!i,
|
|
44
|
+
"aria-controls": i ? p : void 0,
|
|
45
|
+
children: !g && (h ?? "Filter")
|
|
46
|
+
}), r && /* @__PURE__ */ c(O, {
|
|
47
|
+
dataTest: `${e}-active-dot`,
|
|
48
|
+
variant: "dot",
|
|
49
|
+
purpose: "filter",
|
|
50
|
+
className: x("absolute", n === "large" ? "right-2 top-2" : "right-1 top-1")
|
|
51
|
+
})]
|
|
52
|
+
}), /* @__PURE__ */ c(F, {
|
|
47
53
|
...o,
|
|
48
54
|
id: p,
|
|
49
|
-
open: !!
|
|
50
|
-
anchorEl:
|
|
55
|
+
open: !!i,
|
|
56
|
+
anchorEl: i,
|
|
51
57
|
onClose: m,
|
|
52
58
|
anchorOrigin: o?.anchorOrigin ?? {
|
|
53
59
|
vertical: "bottom",
|
|
@@ -59,11 +65,11 @@ var I = () => {
|
|
|
59
65
|
},
|
|
60
66
|
className: o?.className ?? "my-1",
|
|
61
67
|
children: N(t) ? t : t({
|
|
62
|
-
isOpen: !!
|
|
68
|
+
isOpen: !!i,
|
|
63
69
|
onClose: m
|
|
64
70
|
})
|
|
65
71
|
})] });
|
|
66
72
|
};
|
|
67
73
|
export {
|
|
68
|
-
|
|
74
|
+
D as StyledFilterMenu
|
|
69
75
|
};
|
|
@@ -2,7 +2,7 @@ import { StyledButtonProps } from '../../inputs/button';
|
|
|
2
2
|
/**
|
|
3
3
|
* @figmaNode wXrXt5uKNNzV2DnQCgyYZH#16741-35884 (Design-System · "Filter button") — button-only variant
|
|
4
4
|
* of `StyledFilterMenu` (no popover). Aligned `StyledButton` (Outlined) + the "Filters applied" badge:
|
|
5
|
-
*
|
|
5
|
+
* Figma's `Parent=Filter` dot at top-right when `filterIsActive`.
|
|
6
6
|
*
|
|
7
7
|
* Custom props:
|
|
8
8
|
* @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
|
|
@@ -4,8 +4,8 @@ import { StyledPopoverProps } from '../popover';
|
|
|
4
4
|
* @figmaNode wXrXt5uKNNzV2DnQCgyYZH#16741-35884 (Design-System · "Filter button")
|
|
5
5
|
*
|
|
6
6
|
* Composes the aligned `StyledButton` (Secondary/Outlined, filter icon 24/20) + `StyledPopover`
|
|
7
|
-
* (Menus surface). `filterIsActive` shows the DS "Filters applied" badge —
|
|
8
|
-
* top-right. No own styling beyond that dot; all visuals come from the aligned primitives.
|
|
7
|
+
* (Menus surface). `filterIsActive` shows the DS "Filters applied" badge — Figma's `Parent=Filter`
|
|
8
|
+
* dot at top-right. No own styling beyond that dot; all visuals come from the aligned primitives.
|
|
9
9
|
*
|
|
10
10
|
* Custom props:
|
|
11
11
|
* @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
|