@frontify/fondue 12.0.0-beta.279 → 12.0.0-beta.280
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.
|
@@ -3,15 +3,15 @@ import { useFocusRing as u } from "@react-aria/focus";
|
|
|
3
3
|
import { FOCUS_STYLE as m, FOCUS_VISIBLE_STYLE as v } from "../../utilities/focusStyle.es.js";
|
|
4
4
|
import { merge as r } from "../../utilities/merge.es.js";
|
|
5
5
|
import { Validation as n, validationClassMap as S } from "../../utilities/validation.es.js";
|
|
6
|
-
import
|
|
6
|
+
import t from "react";
|
|
7
7
|
import F from "../../foundation/Icon/Generated/IconCross.es.js";
|
|
8
8
|
import C from "../../foundation/Icon/Generated/IconTrashBin.es.js";
|
|
9
9
|
import N from "../../foundation/Icon/Generated/IconCaretDown.es.js";
|
|
10
|
-
import
|
|
11
|
-
var
|
|
12
|
-
const y = (
|
|
10
|
+
import I from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
|
|
11
|
+
var h = /* @__PURE__ */ ((e) => (e.Small = "Small", e.Large = "Large", e))(h || {}), D = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e))(D || {});
|
|
12
|
+
const y = (e, l, s, i, o) => r([
|
|
13
13
|
"tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]",
|
|
14
|
-
|
|
14
|
+
e && m,
|
|
15
15
|
l ? "tw-border-black-5 tw-bg-black-5 tw-pointer-events-none" : r([
|
|
16
16
|
"hover:tw-border-line-xx-strong",
|
|
17
17
|
i === "Weak" ? "" : "tw-bg-base",
|
|
@@ -19,7 +19,7 @@ const y = (t, l, s, i, o) => r([
|
|
|
19
19
|
i === "Weak" ? "tw-border-0 hover:tw-outline hover:tw-outline-1" : S[o]
|
|
20
20
|
])
|
|
21
21
|
]), z = ({
|
|
22
|
-
buttonProps:
|
|
22
|
+
buttonProps: e,
|
|
23
23
|
onClear: l,
|
|
24
24
|
onDelete: s,
|
|
25
25
|
children: i,
|
|
@@ -33,14 +33,14 @@ const y = (t, l, s, i, o) => r([
|
|
|
33
33
|
/* Default */
|
|
34
34
|
}) => {
|
|
35
35
|
const { focusProps: x, isFocusVisible: d } = u(), { focusProps: k, isFocusVisible: E } = u();
|
|
36
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ t.createElement(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
"data-test-id": "trigger",
|
|
40
40
|
className: y(b, o, c, g, a)
|
|
41
41
|
},
|
|
42
42
|
i,
|
|
43
|
-
/* @__PURE__ */
|
|
43
|
+
/* @__PURE__ */ t.createElement(
|
|
44
44
|
"div",
|
|
45
45
|
{
|
|
46
46
|
className: r([
|
|
@@ -48,7 +48,7 @@ const y = (t, l, s, i, o) => r([
|
|
|
48
48
|
f === "Large" ? "tw-right-5 tw-gap-1.5" : "tw-right-3 tw-gap-1"
|
|
49
49
|
])
|
|
50
50
|
},
|
|
51
|
-
p && /* @__PURE__ */
|
|
51
|
+
p && /* @__PURE__ */ t.createElement(
|
|
52
52
|
"button",
|
|
53
53
|
{
|
|
54
54
|
...x,
|
|
@@ -61,9 +61,9 @@ const y = (t, l, s, i, o) => r([
|
|
|
61
61
|
]),
|
|
62
62
|
onClick: () => !!l && l()
|
|
63
63
|
},
|
|
64
|
-
/* @__PURE__ */
|
|
64
|
+
/* @__PURE__ */ t.createElement(F, { size: w.Size12 })
|
|
65
65
|
),
|
|
66
|
-
!!s && /* @__PURE__ */
|
|
66
|
+
!!s && /* @__PURE__ */ t.createElement(
|
|
67
67
|
"button",
|
|
68
68
|
{
|
|
69
69
|
...k,
|
|
@@ -77,14 +77,14 @@ const y = (t, l, s, i, o) => r([
|
|
|
77
77
|
]),
|
|
78
78
|
onClick: s
|
|
79
79
|
},
|
|
80
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ t.createElement(C, { size: w.Size12 })
|
|
81
81
|
),
|
|
82
|
-
/* @__PURE__ */
|
|
82
|
+
/* @__PURE__ */ t.createElement("div", { "aria-hidden": !0 }, /* @__PURE__ */ t.createElement(
|
|
83
83
|
"button",
|
|
84
84
|
{
|
|
85
|
-
...
|
|
86
|
-
"aria-hidden": "true",
|
|
85
|
+
...e,
|
|
87
86
|
type: "button",
|
|
87
|
+
tabIndex: -1,
|
|
88
88
|
disabled: o,
|
|
89
89
|
className: r([
|
|
90
90
|
"tw-rounded",
|
|
@@ -95,9 +95,9 @@ const y = (t, l, s, i, o) => r([
|
|
|
95
95
|
])
|
|
96
96
|
])
|
|
97
97
|
},
|
|
98
|
-
/* @__PURE__ */
|
|
99
|
-
),
|
|
100
|
-
(a === n.Error || a === n.Warning) && /* @__PURE__ */
|
|
98
|
+
/* @__PURE__ */ t.createElement("div", { className: r(["tw-transition-transform", c && "tw-rotate-180"]) }, /* @__PURE__ */ t.createElement(N, { size: w.Size16 }))
|
|
99
|
+
)),
|
|
100
|
+
(a === n.Error || a === n.Warning) && /* @__PURE__ */ t.createElement(
|
|
101
101
|
"span",
|
|
102
102
|
{
|
|
103
103
|
className: r([
|
|
@@ -107,7 +107,7 @@ const y = (t, l, s, i, o) => r([
|
|
|
107
107
|
]),
|
|
108
108
|
"data-test-id": "error-state-exclamation-mark-icon"
|
|
109
109
|
},
|
|
110
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ t.createElement(I, null)
|
|
111
111
|
)
|
|
112
112
|
)
|
|
113
113
|
);
|
|
@@ -115,7 +115,7 @@ const y = (t, l, s, i, o) => r([
|
|
|
115
115
|
z.displayName = "FondueTrigger";
|
|
116
116
|
export {
|
|
117
117
|
z as Trigger,
|
|
118
|
-
|
|
119
|
-
|
|
118
|
+
D as TriggerEmphasis,
|
|
119
|
+
h as TriggerSize
|
|
120
120
|
};
|
|
121
121
|
//# sourceMappingURL=Trigger.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { HTMLAttributes, ReactElement, ReactNode } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n children?: ReactNode;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}: TriggerProps): ReactElement => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <button\n
|
|
1
|
+
{"version":3,"file":"Trigger.es.js","sources":["../../../src/components/Trigger/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconExclamationMarkTriangle, IconTrashBin } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE, FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport React, { HTMLAttributes, ReactElement, ReactNode } from 'react';\n\nexport enum TriggerSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport enum TriggerEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type TriggerProps = {\n disabled?: boolean;\n children?: ReactNode;\n isOpen?: boolean;\n onClear?: () => void;\n onDelete?: () => void;\n buttonProps?: HTMLAttributes<HTMLElement>;\n isFocusVisible?: boolean;\n size?: TriggerSize;\n showClear?: boolean;\n validation?: Validation;\n emphasis?: TriggerEmphasis;\n};\n\nconst getTriggerClassNames = (\n isFocusVisible: boolean,\n disabled: boolean,\n isOpen: boolean,\n emphasis: TriggerEmphasis,\n validation: Validation,\n) =>\n merge([\n 'tw-group tw-relative tw-flex tw-w-full tw-items-center tw-justify-between tw-border tw-rounded tw-transition-colors tw-min-h-[36px]',\n isFocusVisible && FOCUS_STYLE,\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 tw-pointer-events-none'\n : merge([\n 'hover:tw-border-line-xx-strong',\n emphasis === TriggerEmphasis.Weak ? '' : 'tw-bg-base',\n isOpen ? 'tw-border-line-xx-strong' : 'tw-border-line',\n emphasis === TriggerEmphasis.Weak\n ? 'tw-border-0 hover:tw-outline hover:tw-outline-1'\n : validationClassMap[validation],\n ]),\n ]);\n\nexport const Trigger = ({\n buttonProps,\n onClear,\n onDelete,\n children,\n disabled = false,\n isOpen = false,\n isFocusVisible = false,\n size = TriggerSize.Small,\n showClear = false,\n validation = Validation.Default,\n emphasis = TriggerEmphasis.Default,\n}: TriggerProps): ReactElement => {\n const { focusProps: clearableFocusProps, isFocusVisible: isClearFocusVisible } = useFocusRing();\n const { focusProps: onDeleteFocusProps, isFocusVisible: isOnDeleteFocusVisible } = useFocusRing();\n\n return (\n <div\n data-test-id=\"trigger\"\n className={getTriggerClassNames(isFocusVisible, disabled, isOpen, emphasis, validation)}\n >\n {children}\n <div\n className={merge([\n 'tw-flex-none tw-flex tw-items-center tw-absolute',\n size === TriggerSize.Large ? 'tw-right-5 tw-gap-1.5' : 'tw-right-3 tw-gap-1',\n ])}\n >\n {showClear && (\n <button\n {...clearableFocusProps}\n data-test-id=\"dropdown-clear-button\"\n aria-label=\"Clear selection\"\n type=\"button\"\n className={merge([\n isClearFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={() => !!onClear && onClear()}\n >\n <IconCross size={IconSize.Size12} />\n </button>\n )}\n {!!onDelete && (\n <button\n {...onDeleteFocusProps}\n data-test-id=\"dropdown-delete-button\"\n aria-label=\"Delete selection\"\n type=\"button\"\n className={merge([\n 'tw-rounded',\n isOnDeleteFocusVisible && FOCUS_STYLE,\n disabled ? 'tw-pointer-events-none tw-text-black-40' : 'tw-text-black-80',\n ])}\n onClick={onDelete}\n >\n <IconTrashBin size={IconSize.Size12} />\n </button>\n )}\n <div aria-hidden={true}>\n <button\n {...buttonProps}\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n className={merge([\n 'tw-rounded',\n disabled\n ? 'tw-pointer-events-none tw-text-black-40'\n : merge([\n 'group-hover:tw-text-black ',\n isOpen ? 'tw-text-black-100' : 'tw-text-black-80',\n FOCUS_VISIBLE_STYLE,\n ]),\n ])}\n >\n <div className={merge(['tw-transition-transform', isOpen && 'tw-rotate-180'])}>\n <IconCaretDown size={IconSize.Size16} />\n </div>\n </button>\n </div>\n\n {(validation === Validation.Error || validation === Validation.Warning) && (\n <span\n className={merge([\n 'tw-flex tw-items-center tw-justify-center',\n validation === Validation.Error && 'tw-text-text-negative',\n validation === Validation.Warning && 'tw-text-text-warning',\n ])}\n data-test-id=\"error-state-exclamation-mark-icon\"\n >\n <IconExclamationMarkTriangle />\n </span>\n )}\n </div>\n </div>\n );\n};\nTrigger.displayName = 'FondueTrigger';\n"],"names":["TriggerSize","TriggerEmphasis","getTriggerClassNames","isFocusVisible","disabled","isOpen","emphasis","validation","merge","FOCUS_STYLE","validationClassMap","Trigger","buttonProps","onClear","onDelete","children","size","showClear","Validation","clearableFocusProps","isClearFocusVisible","useFocusRing","onDeleteFocusProps","isOnDeleteFocusVisible","React","IconCross","IconSize","IconTrashBin","FOCUS_VISIBLE_STYLE","IconCaretDown","IconExclamationMarkTriangle"],"mappings":"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"}
|