@frontify/fondue 12.0.0-beta.368 → 12.0.0-beta.369
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/ComponentEnum.es.js +1 -1
- package/dist/components/ComponentEnum.es.js.map +1 -1
- package/dist/components/Tabs/Tabs.es.js +26 -25
- package/dist/components/Tabs/Tabs.es.js.map +1 -1
- package/dist/components/TextInput/TextInput.es.js +48 -48
- package/dist/components/TextInput/TextInput.es.js.map +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var d = /* @__PURE__ */ ((e) => (e["Fondue - Accordion"] = "Accordion", e["Fondue - AccordionHeader"] = "AccordionHeader", e["Fondue - AccordionHeaderIcon"] = "AccordionHeaderIcon", e["Fondue -
|
|
1
|
+
var d = /* @__PURE__ */ ((e) => (e["Fondue - Accordion"] = "Accordion", e["Fondue - AccordionHeader"] = "AccordionHeader", e["Fondue - AccordionHeaderIcon"] = "AccordionHeaderIcon", e["Fondue - AddBlockButton"] = "AddBlockButton", e["Fondue - AssetInput"] = "AssetInput", e["Fondue - AssetThumbnail"] = "AssetThumbnail", e["Fondue - Badge"] = "Badge", e["Fondue - BadgeStatusIcon"] = "BadgeStatusIcon", e["Fondue - Box"] = "Box", e["Fondue - BreadcrumbItem"] = "BreadcrumbItem", e["Fondue - Breadcrumbs"] = "Breadcrumbs", e["Fondue - CurrentBreadcrumbItem"] = "CurrentBreadcrumbItem", e["Fondue - Button"] = "Button", e["Fondue - ButtonGroup"] = "ButtonGroup", e["Fondue - Card"] = "Card", e["Fondue - Checkbox"] = "Checkbox", e["Fondue - Checklist"] = "Checklist", e["Fondue - CollapsibleWrap"] = "CollapsibleWrap", e["Fondue - ColorInputTitle"] = "ColorInputTitle", e["Fondue - ColorPickerFlyout"] = "ColorPickerFlyout", e["Fondue - ColorPickerTrigger"] = "ColorPickerTrigger", e["Fondue - BrandColorPicker"] = "BrandColorPicker", e["Fondue - ColorInput"] = "ColorInput", e["Fondue - ColorPicker"] = "ColorPicker", e["Fondue - ColorPreview"] = "ColorPreview", e["Fondue - CustomColorPicker"] = "CustomColorPicker", e["Fondue - Container"] = "Container", e["Fondue - DatePicker"] = "DatePicker", e["Fondue - DatePickerTrigger"] = "DatePickerTrigger", e["Fondue - Dialog"] = "Dialog", e["Fondue - DialogBody"] = "DialogBody", e["Fondue - DialogFooter"] = "DialogFooter", e["Fondue - DialogHeader"] = "DialogHeader", e["Fondue - Divider"] = "Divider", e["Fondue - DropZone"] = "DropZone", e["Fondue - Dropdown"] = "Dropdown", e["Fondue - EditableText"] = "EditableText", e["Fondue - FieldsetHeader"] = "FieldsetHeader", e["Fondue - Flex"] = "Flex", e["Fondue - Flyout"] = "Flyout", e["Fondue - FlyoutFooter"] = "FlyoutFooter", e["Fondue - Overlay"] = "Overlay", e["Fondue - Form"] = "Form", e["Fondue - FormControl"] = "FormControl", e["Fondue - FormField"] = "FormField", e["Fondue - FrontifyPattern"] = "FrontifyPattern", e["Fondue - Grid"] = "Grid", e["Fondue - InlineDialog"] = "InlineDialog", e["Fondue - InputLabel"] = "InputLabel", e["Fondue - LegacyCollectionItem"] = "LegacyCollectionItem", e["Fondue - LegacyOrderableList"] = "LegacyOrderableList", e["Fondue - BrightHeader"] = "BrightHeader", e["Fondue - LegacyTooltip"] = "LegacyTooltip", e["Fondue - LinkChooser"] = "LinkChooser", e["Fondue - NavigationMenu"] = "NavigationMenu", e["Fondue - Popover"] = "Popover", e["Fondue - SearchInput"] = "SearchInput", e["Fondue - SearchResultOption"] = "SearchResultOption", e["Fondue - SearchResultSection"] = "SearchResultSection", e["Fondue - SearchResultsList"] = "SearchResultsList", e["Fondue - LoadingBar"] = "LoadingBar", e["Fondue - LoadingCircle"] = "LoadingCircle", e["Fondue - Menu"] = "Menu", e["Fondue - MenuItem"] = "MenuItem", e["Fondue - MenuItemContent"] = "MenuItemContent", e["Fondue - Modal"] = "Modal", e["Fondue - ModalBody"] = "ModalBody", e["Fondue - ModalFooter"] = "ModalFooter", e["Fondue - ModalHeader"] = "ModalHeader", e["Fondue - ModalVisual"] = "ModalVisual", e["Fondue - MultiInput"] = "MultiInput", e["Fondue - MultiSelect"] = "MultiSelect", e["Fondue - NumberInput"] = "NumberInput", e["Fondue - OrderableList"] = "OrderableList", e["Fondue - OverflowMenu"] = "OverflowMenu", e["Fondue - Popper"] = "Popper", e["Fondue - Portal"] = "Portal", e["Fondue - RadioButton"] = "RadioButton", e["Fondue - RadioList"] = "RadioList", e["Fondue - RadioPill"] = "RadioPill", e["Fondue - RichTextEditor"] = "RichTextEditor", e["Fondue - ScrollWrapper"] = "ScrollWrapper", e["Fondue - SegmentedControls"] = "SegmentedControls", e["Fondue - Slider"] = "Slider", e["Fondue - Stack"] = "Stack", e["Fondue - Switch"] = "Switch", e["Fondue - Table"] = "Table", e["Fondue - TableCell"] = "TableCell", e["Fondue - TableColumnHeader"] = "TableColumnHeader", e["Fondue - TableHeaderRow"] = "TableHeaderRow", e["Fondue - TableRow"] = "TableRow", e["Fondue - TabItem"] = "TabItem", e["Fondue - Tabs"] = "Tabs", e["Fondue - Tag"] = "Tag", e["Fondue - TextInput"] = "TextInput", e["Fondue - Textarea"] = "Textarea", e["Fondue - Toast"] = "Toast", e["Fondue - types"] = "types", e["Fondue - Tooltip"] = "Tooltip", e["Fondue - TooltipIcon"] = "TooltipIcon", e["Fondue - Tree"] = "Tree", e["Fondue - Trigger"] = "Trigger", e))(d || {});
|
|
2
2
|
export {
|
|
3
3
|
d as ComponentEnum
|
|
4
4
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComponentEnum.es.js","sources":["../../src/components/ComponentEnum.ts"],"sourcesContent":["\n export enum ComponentEnum {\n \"Fondue - Accordion\" = \"Accordion\",\n\"Fondue - AccordionHeader\" = \"AccordionHeader\",\n\"Fondue - AccordionHeaderIcon\" = \"AccordionHeaderIcon\",\n\"Fondue -
|
|
1
|
+
{"version":3,"file":"ComponentEnum.es.js","sources":["../../src/components/ComponentEnum.ts"],"sourcesContent":["\n export enum ComponentEnum {\n \"Fondue - Accordion\" = \"Accordion\",\n\"Fondue - AccordionHeader\" = \"AccordionHeader\",\n\"Fondue - AccordionHeaderIcon\" = \"AccordionHeaderIcon\",\n\"Fondue - AddBlockButton\" = \"AddBlockButton\",\n\"Fondue - AssetInput\" = \"AssetInput\",\n\"Fondue - AssetThumbnail\" = \"AssetThumbnail\",\n\"Fondue - Badge\" = \"Badge\",\n\"Fondue - BadgeStatusIcon\" = \"BadgeStatusIcon\",\n\"Fondue - Box\" = \"Box\",\n\"Fondue - BreadcrumbItem\" = \"BreadcrumbItem\",\n\"Fondue - Breadcrumbs\" = \"Breadcrumbs\",\n\"Fondue - CurrentBreadcrumbItem\" = \"CurrentBreadcrumbItem\",\n\"Fondue - Button\" = \"Button\",\n\"Fondue - ButtonGroup\" = \"ButtonGroup\",\n\"Fondue - Card\" = \"Card\",\n\"Fondue - Checkbox\" = \"Checkbox\",\n\"Fondue - Checklist\" = \"Checklist\",\n\"Fondue - CollapsibleWrap\" = \"CollapsibleWrap\",\n\"Fondue - ColorInputTitle\" = \"ColorInputTitle\",\n\"Fondue - ColorPickerFlyout\" = \"ColorPickerFlyout\",\n\"Fondue - ColorPickerTrigger\" = \"ColorPickerTrigger\",\n\"Fondue - BrandColorPicker\" = \"BrandColorPicker\",\n\"Fondue - ColorInput\" = \"ColorInput\",\n\"Fondue - ColorPicker\" = \"ColorPicker\",\n\"Fondue - ColorPreview\" = \"ColorPreview\",\n\"Fondue - CustomColorPicker\" = \"CustomColorPicker\",\n\"Fondue - Container\" = \"Container\",\n\"Fondue - DatePicker\" = \"DatePicker\",\n\"Fondue - DatePickerTrigger\" = \"DatePickerTrigger\",\n\"Fondue - Dialog\" = \"Dialog\",\n\"Fondue - DialogBody\" = \"DialogBody\",\n\"Fondue - DialogFooter\" = \"DialogFooter\",\n\"Fondue - DialogHeader\" = \"DialogHeader\",\n\"Fondue - Divider\" = \"Divider\",\n\"Fondue - DropZone\" = \"DropZone\",\n\"Fondue - Dropdown\" = \"Dropdown\",\n\"Fondue - EditableText\" = \"EditableText\",\n\"Fondue - FieldsetHeader\" = \"FieldsetHeader\",\n\"Fondue - Flex\" = \"Flex\",\n\"Fondue - Flyout\" = \"Flyout\",\n\"Fondue - FlyoutFooter\" = \"FlyoutFooter\",\n\"Fondue - Overlay\" = \"Overlay\",\n\"Fondue - Form\" = \"Form\",\n\"Fondue - FormControl\" = \"FormControl\",\n\"Fondue - FormField\" = \"FormField\",\n\"Fondue - FrontifyPattern\" = \"FrontifyPattern\",\n\"Fondue - Grid\" = \"Grid\",\n\"Fondue - InlineDialog\" = \"InlineDialog\",\n\"Fondue - InputLabel\" = \"InputLabel\",\n\"Fondue - LegacyCollectionItem\" = \"LegacyCollectionItem\",\n\"Fondue - LegacyOrderableList\" = \"LegacyOrderableList\",\n\"Fondue - BrightHeader\" = \"BrightHeader\",\n\"Fondue - LegacyTooltip\" = \"LegacyTooltip\",\n\"Fondue - LinkChooser\" = \"LinkChooser\",\n\"Fondue - NavigationMenu\" = \"NavigationMenu\",\n\"Fondue - Popover\" = \"Popover\",\n\"Fondue - SearchInput\" = \"SearchInput\",\n\"Fondue - SearchResultOption\" = \"SearchResultOption\",\n\"Fondue - SearchResultSection\" = \"SearchResultSection\",\n\"Fondue - SearchResultsList\" = \"SearchResultsList\",\n\"Fondue - LoadingBar\" = \"LoadingBar\",\n\"Fondue - LoadingCircle\" = \"LoadingCircle\",\n\"Fondue - Menu\" = \"Menu\",\n\"Fondue - MenuItem\" = \"MenuItem\",\n\"Fondue - MenuItemContent\" = \"MenuItemContent\",\n\"Fondue - Modal\" = \"Modal\",\n\"Fondue - ModalBody\" = \"ModalBody\",\n\"Fondue - ModalFooter\" = \"ModalFooter\",\n\"Fondue - ModalHeader\" = \"ModalHeader\",\n\"Fondue - ModalVisual\" = \"ModalVisual\",\n\"Fondue - MultiInput\" = \"MultiInput\",\n\"Fondue - MultiSelect\" = \"MultiSelect\",\n\"Fondue - NumberInput\" = \"NumberInput\",\n\"Fondue - OrderableList\" = \"OrderableList\",\n\"Fondue - OverflowMenu\" = \"OverflowMenu\",\n\"Fondue - Popper\" = \"Popper\",\n\"Fondue - Portal\" = \"Portal\",\n\"Fondue - RadioButton\" = \"RadioButton\",\n\"Fondue - RadioList\" = \"RadioList\",\n\"Fondue - RadioPill\" = \"RadioPill\",\n\"Fondue - RichTextEditor\" = \"RichTextEditor\",\n\"Fondue - ScrollWrapper\" = \"ScrollWrapper\",\n\"Fondue - SegmentedControls\" = \"SegmentedControls\",\n\"Fondue - Slider\" = \"Slider\",\n\"Fondue - Stack\" = \"Stack\",\n\"Fondue - Switch\" = \"Switch\",\n\"Fondue - Table\" = \"Table\",\n\"Fondue - TableCell\" = \"TableCell\",\n\"Fondue - TableColumnHeader\" = \"TableColumnHeader\",\n\"Fondue - TableHeaderRow\" = \"TableHeaderRow\",\n\"Fondue - TableRow\" = \"TableRow\",\n\"Fondue - TabItem\" = \"TabItem\",\n\"Fondue - Tabs\" = \"Tabs\",\n\"Fondue - Tag\" = \"Tag\",\n\"Fondue - TextInput\" = \"TextInput\",\n\"Fondue - Textarea\" = \"Textarea\",\n\"Fondue - Toast\" = \"Toast\",\n\"Fondue - types\" = \"types\",\n\"Fondue - Tooltip\" = \"Tooltip\",\n\"Fondue - TooltipIcon\" = \"TooltipIcon\",\n\"Fondue - Tree\" = \"Tree\",\n\"Fondue - Trigger\" = \"Trigger\"\n };\n "],"names":["ComponentEnum"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as u, Fragment as z, jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as V, useState as y, Children as A, isValidElement as L, useCallback as U, useEffect as T, cloneElement as W } from "react";
|
|
3
|
-
import { merge as
|
|
3
|
+
import { merge as g } from "../../utilities/merge.es.js";
|
|
4
4
|
import { motion as H } from "framer-motion";
|
|
5
5
|
import { useFocusRing as Y } from "@react-aria/focus";
|
|
6
6
|
import { FOCUS_STYLE as _ } from "../../utilities/focusStyle.es.js";
|
|
@@ -14,40 +14,40 @@ const Q = {
|
|
|
14
14
|
Small: "tw-pl-s",
|
|
15
15
|
Medium: "tw-pl-m",
|
|
16
16
|
Large: "tw-pl-l"
|
|
17
|
-
}, Z = (o,
|
|
17
|
+
}, Z = (o, p) => o.disabled ? "tw-text-text-disabled" : o.id === p ? "tw-font-medium tw-text-text" : "tw-text-text-weak hover:tw-text-text", X = ({
|
|
18
18
|
paddingX: o,
|
|
19
|
-
size:
|
|
19
|
+
size: p,
|
|
20
20
|
activeItemId: i,
|
|
21
21
|
children: v,
|
|
22
22
|
onChange: N,
|
|
23
23
|
maxHeight: $,
|
|
24
24
|
minHeight: C
|
|
25
25
|
}) => {
|
|
26
|
-
const M = q(), k = V(null), [
|
|
26
|
+
const M = q(), k = V(null), [S, D] = y(!1), [w, c] = y(!1), x = A.map(v, (t) => L(t) ? t == null ? void 0 : t.props : null) ?? [], [F, R] = y([0]), a = U(() => {
|
|
27
27
|
const t = k.current;
|
|
28
28
|
D((t && t.scrollWidth > t.clientWidth) ?? !1);
|
|
29
29
|
const r = [];
|
|
30
30
|
if (t) {
|
|
31
31
|
for (const e of t.children) {
|
|
32
|
-
const s = [...t.children].indexOf(e), f = t.getBoundingClientRect(),
|
|
33
|
-
(
|
|
32
|
+
const s = [...t.children].indexOf(e), f = t.getBoundingClientRect(), m = e.getBoundingClientRect();
|
|
33
|
+
(m.right > f.right || m.left < f.left) && r.push(s);
|
|
34
34
|
}
|
|
35
35
|
const n = [...r].sort((e, s) => e - s);
|
|
36
36
|
R(n);
|
|
37
37
|
}
|
|
38
|
-
}, []), b = () => F.map((t) => x[t]),
|
|
38
|
+
}, []), b = () => F.map((t) => x[t]), E = (t, r) => {
|
|
39
39
|
const n = t.findIndex((e) => e.id === i);
|
|
40
40
|
return t.filter((e, s) => r === "next" && s > n && !e.disabled || r === "previous" && s < n && !e.disabled ? e : !1);
|
|
41
41
|
}, O = (t) => {
|
|
42
42
|
t.stopPropagation();
|
|
43
|
-
const r = b(), n = t.target, e = n.id.includes("-m"), s = n.id.replace("-btn-m", ""), f = e ? r : x,
|
|
44
|
-
(t.key === "ArrowRight" || t.key === "ArrowDown") &&
|
|
43
|
+
const r = b(), n = t.target, e = n.id.includes("-m"), s = n.id.replace("-btn-m", ""), f = e ? r : x, m = E(f, "next"), h = E(f, "previous");
|
|
44
|
+
(t.key === "ArrowRight" || t.key === "ArrowDown") && m.length > 0 && d(m[0].id, e), (t.key === "ArrowLeft" || t.key === "ArrowUp") && h.length > 0 && d(h[h.length - 1].id, e), t.key === "Enter" && e && (d(s, !0), c(!1), document.getElementById(`${s}-content`).focus()), n.id.includes("-m") || c(!1);
|
|
45
45
|
}, d = (t, r) => {
|
|
46
46
|
try {
|
|
47
47
|
const n = document.getElementById(`${t}-btn`), e = document.getElementById(
|
|
48
48
|
r ? `${t}-btn-m` : `${t}-btn`
|
|
49
49
|
);
|
|
50
|
-
N && N(t),
|
|
50
|
+
N && N(t), S && n.scrollIntoView({ behavior: "smooth", block: "end", inline: "end" }), e.focus();
|
|
51
51
|
} catch (n) {
|
|
52
52
|
throw n.message;
|
|
53
53
|
}
|
|
@@ -65,23 +65,23 @@ const Q = {
|
|
|
65
65
|
}, [a]), T(() => (window.addEventListener("resize", a), () => {
|
|
66
66
|
window.removeEventListener("resize", a);
|
|
67
67
|
}), [a]);
|
|
68
|
-
const { isFocusVisible: I, focusProps:
|
|
69
|
-
return /* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
68
|
+
const { isFocusVisible: I, focusProps: K } = Y();
|
|
69
|
+
return /* @__PURE__ */ u(z, { children: [
|
|
70
|
+
/* @__PURE__ */ u("div", { "data-test-id": "tabs", className: "tw-flex tw-relative tw-border-b tw-border-line", children: [
|
|
71
71
|
/* @__PURE__ */ l(
|
|
72
72
|
"div",
|
|
73
73
|
{
|
|
74
74
|
ref: k,
|
|
75
75
|
role: "tablist",
|
|
76
|
-
className:
|
|
76
|
+
className: g([
|
|
77
77
|
"tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start",
|
|
78
78
|
Q[
|
|
79
79
|
o ?? "Small"
|
|
80
80
|
/* Small */
|
|
81
81
|
],
|
|
82
|
-
|
|
82
|
+
p === "Small" ? "tw-gap-xxs" : "tw-gap-xs "
|
|
83
83
|
]),
|
|
84
|
-
children: x.map((t) => /* @__PURE__ */
|
|
84
|
+
children: x.map((t) => /* @__PURE__ */ u(
|
|
85
85
|
"button",
|
|
86
86
|
{
|
|
87
87
|
"data-test-id": "tab-item",
|
|
@@ -92,9 +92,10 @@ const Q = {
|
|
|
92
92
|
"aria-hidden": t.disabled,
|
|
93
93
|
tabIndex: t.id === i ? 0 : -1,
|
|
94
94
|
id: `${t.id}-btn`,
|
|
95
|
-
className:
|
|
96
|
-
"tw-group tw-relative tw-mx-0 tw-
|
|
97
|
-
Z(t, i)
|
|
95
|
+
className: g([
|
|
96
|
+
"tw-group tw-relative tw-mx-0 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap",
|
|
97
|
+
Z(t, i),
|
|
98
|
+
p === "Small" ? "tw-h-12 tw-text-body-medium" : "tw-h-14 tw-text-body-large"
|
|
98
99
|
]),
|
|
99
100
|
onClick: () => {
|
|
100
101
|
t.disabled || (d(t.id, !1), c(!1));
|
|
@@ -120,7 +121,7 @@ const Q = {
|
|
|
120
121
|
))
|
|
121
122
|
}
|
|
122
123
|
),
|
|
123
|
-
|
|
124
|
+
S && /* @__PURE__ */ u(
|
|
124
125
|
"div",
|
|
125
126
|
{
|
|
126
127
|
"data-test-id": "tab-overflow",
|
|
@@ -129,7 +130,7 @@ const Q = {
|
|
|
129
130
|
/* @__PURE__ */ l(
|
|
130
131
|
"button",
|
|
131
132
|
{
|
|
132
|
-
className:
|
|
133
|
+
className: g([
|
|
133
134
|
"tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center",
|
|
134
135
|
I ? _ : ""
|
|
135
136
|
]),
|
|
@@ -138,7 +139,7 @@ const Q = {
|
|
|
138
139
|
a(), c(!w);
|
|
139
140
|
},
|
|
140
141
|
onKeyDown: (t) => j(t),
|
|
141
|
-
...
|
|
142
|
+
...K,
|
|
142
143
|
children: /* @__PURE__ */ l(G, {})
|
|
143
144
|
}
|
|
144
145
|
),
|
|
@@ -149,10 +150,10 @@ const Q = {
|
|
|
149
150
|
role: "dialog",
|
|
150
151
|
children: b().map((t) => {
|
|
151
152
|
var r, n;
|
|
152
|
-
return /* @__PURE__ */
|
|
153
|
+
return /* @__PURE__ */ u(
|
|
153
154
|
"button",
|
|
154
155
|
{
|
|
155
|
-
className:
|
|
156
|
+
className: g([
|
|
156
157
|
"tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak",
|
|
157
158
|
t.disabled && "tw-text-text-disabled"
|
|
158
159
|
]),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n Children,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon/Generated';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { DimensionUnity } from '@utilities/dimensions';\n\nexport enum TabsPaddingX {\n None = 'None',\n XSmall = 'XSmall',\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n maxHeight?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.None]: 'tw-pl-0',\n [TabsPaddingX.XSmall]: 'tw-pl-xs',\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nconst getTabButtonTextStyle = (tab: TabItemProps, activeItemId: string) => {\n if (tab.disabled) {\n return 'tw-text-text-disabled';\n }\n\n if (tab.id === activeItemId) {\n return 'tw-font-medium tw-text-text';\n }\n\n return 'tw-text-text-weak hover:tw-text-text';\n};\n\nexport const Tabs = ({\n paddingX,\n size,\n activeItemId,\n children,\n onChange,\n maxHeight,\n minHeight,\n}: TabsProps): ReactElement => {\n const groupId = useMemoizedId();\n const tabNavRef = useRef<HTMLDivElement | null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n const tabs: TabItemProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<TabItemProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n const [overflowArray, setOverflowArray] = useState([0]);\n\n const checkIfOverflowing = useCallback(() => {\n const tabNav = tabNavRef.current;\n setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n const overFlowIndex = [];\n if (tabNav) {\n for (const tabItem of tabNav.children) {\n const i = [...tabNav.children].indexOf(tabItem);\n const navPosition = tabNav.getBoundingClientRect();\n const tabPosition = tabItem.getBoundingClientRect();\n if (tabPosition.right > navPosition.right || tabPosition.left < navPosition.left) {\n overFlowIndex.push(i);\n }\n }\n\n const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n setOverflowArray(overFlowIndexInAscOrder);\n }\n }, []);\n\n const getOverflownTabs = () => {\n return overflowArray.map((i) => {\n return tabs[i];\n });\n };\n\n const filterTabList = (array: TabItemProps[], direction: string) => {\n const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n const overflownTabs = getOverflownTabs();\n const target = event.target as HTMLElement;\n const fromOverflow = target.id.includes('-m');\n const currentTabId = target.id.replace('-btn-m', '');\n const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n const nextTabs = filterTabList(currentTabsArray, 'next');\n const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n if ((event.key === 'ArrowRight' || event.key === 'ArrowDown') && nextTabs.length > 0) {\n triggerTabButton(nextTabs[0].id, fromOverflow);\n }\n\n if ((event.key === 'ArrowLeft' || event.key === 'ArrowUp') && previousTabs.length > 0) {\n triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n }\n\n if (event.key === 'Enter' && fromOverflow) {\n triggerTabButton(currentTabId, true);\n setIsMenuOpened(false);\n const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n contentSection.focus();\n }\n\n if (!target.id.includes('-m')) {\n setIsMenuOpened(false);\n }\n };\n\n const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n try {\n const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n const buttonElement = document.getElementById(\n fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n ) as HTMLButtonElement;\n if (onChange) {\n onChange(elementId);\n }\n if (isOverflowing) {\n tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n }\n buttonElement.focus();\n } catch (error) {\n throw (error as Error).message;\n }\n };\n\n const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n checkIfOverflowing();\n const overflownTabs = getOverflownTabs();\n\n if (event.key === 'Enter') {\n if (!isMenuOpened && overflownTabs.length > 0) {\n const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n if (buttonElement) {\n buttonElement.focus();\n }\n }\n }\n\n if (isMenuOpened && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {\n triggerTabButton(overflownTabs[0].id, true);\n }\n };\n\n // First render\n useEffect(() => {\n checkIfOverflowing();\n }, [checkIfOverflowing]);\n\n useEffect(() => {\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, [checkIfOverflowing]);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <>\n <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n <div\n ref={tabNavRef}\n role=\"tablist\"\n className={merge([\n 'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start',\n paddingMap[paddingX ?? TabsPaddingX.Small],\n size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n ])}\n >\n {tabs.map((tab) => {\n return (\n <button\n data-test-id=\"tab-item\"\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={tab.id === activeItemId ? 0 : -1}\n id={`${tab.id}-btn`}\n className={merge([\n 'tw-group tw-relative tw-mx-0 tw-py-4 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n getTabButtonTextStyle(tab, activeItemId),\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, false);\n setIsMenuOpened(false);\n }\n }}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n <span>{tab.label}</span>\n\n {tab.badge && (\n <span className=\"tw-ml-1.5\">\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n </span>\n )}\n {tab.id === activeItemId && (\n <motion.div\n initial={false}\n layoutDependency={activeItemId}\n data-test-id=\"tab-active-highlight\"\n layoutId={groupId}\n className=\"tw-absolute tw-h-[3px] tw-bg-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-absolute tw-z-50 tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n >\n <button\n className={merge([\n 'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n isFocusVisible ? FOCUS_STYLE : '',\n ])}\n type=\"button\"\n onClick={() => {\n checkIfOverflowing();\n setIsMenuOpened(!isMenuOpened);\n }}\n onKeyDown={(event) => triggerOverflowMenu(event)}\n {...focusProps}\n >\n <IconDotsHorizontal />\n </button>\n {isMenuOpened && (\n <div\n className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n role=\"dialog\"\n >\n {getOverflownTabs().map((tab) => {\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n tab.disabled && 'tw-text-text-disabled',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, true);\n setIsMenuOpened(false);\n }\n }}\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n id={`${tab.id}-btn-m`}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator}\n <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge?.style}>\n {tab.badge?.children}\n </Badge>\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n )}\n </div>\n\n <div data-test-id=\"tab-content\" className=\"tw-flex tw-flex-col tw-overflow-y-auto\">\n <div className=\"tw-mr-0\" style={{ maxHeight, minHeight }}>\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n })}\n </div>\n </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","getTabButtonTextStyle","tab","activeItemId","Tabs","paddingX","size","children","onChange","maxHeight","minHeight","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","i","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","filterTabList","array","direction","activeItemIndex","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","jsxs","Fragment","jsx","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tabs.es.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n Children,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { TabItemProps } from '@components/Tabs/TabItem';\nimport { merge } from '@utilities/merge';\nimport { IconDotsHorizontal } from '@foundation/Icon/Generated';\nimport { Badge } from '@components/Badge';\nimport { motion } from 'framer-motion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { DimensionUnity } from '@utilities/dimensions';\n\nexport enum TabsPaddingX {\n None = 'None',\n XSmall = 'XSmall',\n Small = 'Small',\n Medium = 'Medium',\n Large = 'Large',\n}\n\nexport enum TabSize {\n Small = 'Small',\n Large = 'Large',\n}\n\nexport type TabsProps = {\n paddingX?: TabsPaddingX;\n size?: TabSize;\n activeItemId: string;\n children: ReactNode;\n onChange?: (tabId: string) => void;\n maxHeight?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n};\n\nconst paddingMap: Record<TabsPaddingX, string> = {\n [TabsPaddingX.None]: 'tw-pl-0',\n [TabsPaddingX.XSmall]: 'tw-pl-xs',\n [TabsPaddingX.Small]: 'tw-pl-s',\n [TabsPaddingX.Medium]: 'tw-pl-m',\n [TabsPaddingX.Large]: 'tw-pl-l',\n};\n\nconst getTabButtonTextStyle = (tab: TabItemProps, activeItemId: string) => {\n if (tab.disabled) {\n return 'tw-text-text-disabled';\n }\n\n if (tab.id === activeItemId) {\n return 'tw-font-medium tw-text-text';\n }\n\n return 'tw-text-text-weak hover:tw-text-text';\n};\n\nexport const Tabs = ({\n paddingX,\n size,\n activeItemId,\n children,\n onChange,\n maxHeight,\n minHeight,\n}: TabsProps): ReactElement => {\n const groupId = useMemoizedId();\n const tabNavRef = useRef<HTMLDivElement | null>(null);\n const [isOverflowing, setIsOverflowing] = useState(false);\n const [isMenuOpened, setIsMenuOpened] = useState(false);\n\n const tabs: TabItemProps[] =\n Children.map(children, (child) => {\n if (!isValidElement<TabItemProps>(child)) {\n return null;\n }\n return child?.props;\n }) ?? [];\n\n const [overflowArray, setOverflowArray] = useState([0]);\n\n const checkIfOverflowing = useCallback(() => {\n const tabNav = tabNavRef.current;\n setIsOverflowing((tabNav && tabNav.scrollWidth > tabNav.clientWidth) ?? false);\n const overFlowIndex = [];\n if (tabNav) {\n for (const tabItem of tabNav.children) {\n const i = [...tabNav.children].indexOf(tabItem);\n const navPosition = tabNav.getBoundingClientRect();\n const tabPosition = tabItem.getBoundingClientRect();\n if (tabPosition.right > navPosition.right || tabPosition.left < navPosition.left) {\n overFlowIndex.push(i);\n }\n }\n\n const overFlowIndexInAscOrder = [...overFlowIndex].sort((a, b) => a - b);\n setOverflowArray(overFlowIndexInAscOrder);\n }\n }, []);\n\n const getOverflownTabs = () => {\n return overflowArray.map((i) => {\n return tabs[i];\n });\n };\n\n const filterTabList = (array: TabItemProps[], direction: string) => {\n const activeItemIndex = array.findIndex((tab) => tab.id === activeItemId);\n\n return array.filter((tab, index) => {\n if (direction === 'next') {\n if (index > activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n if (direction === 'previous') {\n if (index < activeItemIndex && !tab.disabled) {\n return tab;\n }\n }\n\n return false;\n });\n };\n\n const handleKeyboardTabChange = (event: KeyboardEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n const overflownTabs = getOverflownTabs();\n const target = event.target as HTMLElement;\n const fromOverflow = target.id.includes('-m');\n const currentTabId = target.id.replace('-btn-m', '');\n const currentTabsArray = fromOverflow ? overflownTabs : tabs;\n\n const nextTabs = filterTabList(currentTabsArray, 'next');\n const previousTabs = filterTabList(currentTabsArray, 'previous');\n\n if ((event.key === 'ArrowRight' || event.key === 'ArrowDown') && nextTabs.length > 0) {\n triggerTabButton(nextTabs[0].id, fromOverflow);\n }\n\n if ((event.key === 'ArrowLeft' || event.key === 'ArrowUp') && previousTabs.length > 0) {\n triggerTabButton(previousTabs[previousTabs.length - 1].id, fromOverflow);\n }\n\n if (event.key === 'Enter' && fromOverflow) {\n triggerTabButton(currentTabId, true);\n setIsMenuOpened(false);\n const contentSection = document.getElementById(`${currentTabId}-content`) as HTMLDivElement;\n contentSection.focus();\n }\n\n if (!target.id.includes('-m')) {\n setIsMenuOpened(false);\n }\n };\n\n const triggerTabButton = (elementId: string, fromOverflow: boolean) => {\n try {\n const tabElement = document.getElementById(`${elementId}-btn`) as HTMLButtonElement;\n const buttonElement = document.getElementById(\n fromOverflow ? `${elementId}-btn-m` : `${elementId}-btn`,\n ) as HTMLButtonElement;\n if (onChange) {\n onChange(elementId);\n }\n if (isOverflowing) {\n tabElement.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });\n }\n buttonElement.focus();\n } catch (error) {\n throw (error as Error).message;\n }\n };\n\n const triggerOverflowMenu = (event: KeyboardEvent<HTMLButtonElement>) => {\n checkIfOverflowing();\n const overflownTabs = getOverflownTabs();\n\n if (event.key === 'Enter') {\n if (!isMenuOpened && overflownTabs.length > 0) {\n const buttonElement = document.getElementById(`${overflownTabs[0].id}-btn-m`) as HTMLButtonElement;\n if (buttonElement) {\n buttonElement.focus();\n }\n }\n }\n\n if (isMenuOpened && (event.key === 'ArrowRight' || event.key === 'ArrowDown')) {\n triggerTabButton(overflownTabs[0].id, true);\n }\n };\n\n // First render\n useEffect(() => {\n checkIfOverflowing();\n }, [checkIfOverflowing]);\n\n useEffect(() => {\n window.addEventListener('resize', checkIfOverflowing);\n return () => {\n window.removeEventListener('resize', checkIfOverflowing);\n };\n }, [checkIfOverflowing]);\n\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return (\n <>\n <div data-test-id=\"tabs\" className=\"tw-flex tw-relative tw-border-b tw-border-line\">\n <div\n ref={tabNavRef}\n role=\"tablist\"\n className={merge([\n 'tw-overflow-x-hidden tw-flex-shrink-0 tw-h-full tw-w-full tw-flex tw-justify-start',\n paddingMap[paddingX ?? TabsPaddingX.Small],\n size === TabSize.Small ? 'tw-gap-xxs' : 'tw-gap-xs ',\n ])}\n >\n {tabs.map((tab) => {\n return (\n <button\n data-test-id=\"tab-item\"\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={tab.id === activeItemId ? 0 : -1}\n id={`${tab.id}-btn`}\n className={merge([\n 'tw-group tw-relative tw-mx-0 tw-px-2 tw-w-max tw-cursor-pointer tw-flex tw-items-center tw-justify-center tw-whitespace-nowrap',\n getTabButtonTextStyle(tab, activeItemId),\n size === TabSize.Small\n ? 'tw-h-12 tw-text-body-medium'\n : 'tw-h-14 tw-text-body-large',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, false);\n setIsMenuOpened(false);\n }\n }}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator && <span className=\"tw-mr-1.5\">{tab.decorator}</span>}\n\n <span>{tab.label}</span>\n\n {tab.badge && (\n <span className=\"tw-ml-1.5\">\n <Badge disabled={tab.disabled} style={tab.badge.style}>\n {tab.badge.children}\n </Badge>\n </span>\n )}\n {tab.id === activeItemId && (\n <motion.div\n initial={false}\n layoutDependency={activeItemId}\n data-test-id=\"tab-active-highlight\"\n layoutId={groupId}\n className=\"tw-absolute tw-h-[3px] tw-bg-box-selected-strong tw-rounded-t-x-large tw-w-full tw-bottom-0\"\n />\n )}\n </button>\n );\n })}\n </div>\n {isOverflowing && (\n <div\n data-test-id=\"tab-overflow\"\n className=\"tw-absolute tw-z-50 tw-right-3 tw-bottom-0 tw-top-0 tw-flex tw-justify-center tw-items-center\"\n >\n <button\n className={merge([\n 'tw-w-6 tw-h-6 tw-bg-box-neutral tw-rounded tw-flex tw-justify-center tw-items-center',\n isFocusVisible ? FOCUS_STYLE : '',\n ])}\n type=\"button\"\n onClick={() => {\n checkIfOverflowing();\n setIsMenuOpened(!isMenuOpened);\n }}\n onKeyDown={(event) => triggerOverflowMenu(event)}\n {...focusProps}\n >\n <IconDotsHorizontal />\n </button>\n {isMenuOpened && (\n <div\n className=\"tw-absolute tw-right-0 tw-top-11 tw-px-3 tw-pt-3 tw-bg-base tw-shadow tw-w-max\"\n role=\"dialog\"\n >\n {getOverflownTabs().map((tab) => {\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-w-full tw-mb-3 tw-text-left tw-text-text-weak',\n tab.disabled && 'tw-text-text-disabled',\n ])}\n key={tab.id}\n onClick={() => {\n if (!tab.disabled) {\n triggerTabButton(tab.id, true);\n setIsMenuOpened(false);\n }\n }}\n role=\"tab\"\n type=\"button\"\n aria-selected={tab.id === activeItemId}\n aria-controls={`${tab.id}-content`}\n aria-hidden={tab.disabled}\n tabIndex={!tab.disabled && isMenuOpened ? 0 : -1}\n id={`${tab.id}-btn-m`}\n onKeyDown={(event) => handleKeyboardTabChange(event)}\n >\n {tab.decorator}\n <span className=\"tw-mr-1 tw-ml-1.5\">{tab.label}</span>\n {tab.badge && (\n <Badge disabled={tab.disabled} style={tab.badge?.style}>\n {tab.badge?.children}\n </Badge>\n )}\n </button>\n );\n })}\n </div>\n )}\n </div>\n )}\n </div>\n\n <div data-test-id=\"tab-content\" className=\"tw-flex tw-flex-col tw-overflow-y-auto\">\n <div className=\"tw-mr-0\" style={{ maxHeight, minHeight }}>\n {Children.map(children, (child) => {\n if (!isValidElement(child)) {\n return null;\n }\n\n return cloneElement(child, { ...child.props, active: child.props.id === activeItemId });\n })}\n </div>\n </div>\n </>\n );\n};\nTabs.displayName = 'FondueTabs';\n"],"names":["TabsPaddingX","TabSize","paddingMap","getTabButtonTextStyle","tab","activeItemId","Tabs","paddingX","size","children","onChange","maxHeight","minHeight","groupId","useMemoizedId","tabNavRef","useRef","isOverflowing","setIsOverflowing","useState","isMenuOpened","setIsMenuOpened","tabs","Children","child","isValidElement","overflowArray","setOverflowArray","checkIfOverflowing","useCallback","tabNav","overFlowIndex","tabItem","i","navPosition","tabPosition","overFlowIndexInAscOrder","a","b","getOverflownTabs","filterTabList","array","direction","activeItemIndex","index","handleKeyboardTabChange","event","overflownTabs","target","fromOverflow","currentTabId","currentTabsArray","nextTabs","previousTabs","triggerTabButton","elementId","tabElement","buttonElement","error","triggerOverflowMenu","useEffect","isFocusVisible","focusProps","useFocusRing","jsxs","Fragment","jsx","merge","Badge","motion","FOCUS_STYLE","IconDotsHorizontal","_a","_b","cloneElement"],"mappings":"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"}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
1
|
import { jsxs as S, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { useCopy as tt } from "../../hooks/useCopy.es.js";
|
|
3
3
|
import { useMemoizedId as et } from "../../hooks/useMemoizedId.es.js";
|
|
4
|
-
import { useFocusRing as
|
|
5
|
-
import { FOCUS_STYLE as
|
|
4
|
+
import { useFocusRing as p } from "@react-aria/focus";
|
|
5
|
+
import { FOCUS_STYLE as f } from "../../utilities/focusStyle.es.js";
|
|
6
6
|
import { merge as s } from "../../utilities/merge.es.js";
|
|
7
7
|
import { validationClassMap as ot, Validation as c } from "../../utilities/validation.es.js";
|
|
8
8
|
import { forwardRef as rt, useRef as st, useState as it, useEffect as O } from "react";
|
|
9
9
|
import { LegacyTooltip as nt } from "../LegacyTooltip/LegacyTooltip.es.js";
|
|
10
10
|
import ct from "../../foundation/Icon/Generated/IconCross.es.js";
|
|
11
|
-
import
|
|
12
|
-
import
|
|
11
|
+
import lt from "../../foundation/Icon/Generated/IconEye.es.js";
|
|
12
|
+
import at from "../../foundation/Icon/Generated/IconEyeOff.es.js";
|
|
13
13
|
import ut from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
|
|
14
14
|
import wt from "../../foundation/Icon/Generated/IconCrossCircle.es.js";
|
|
15
15
|
import pt from "../../foundation/Icon/Generated/IconClipboard.es.js";
|
|
16
16
|
import ft from "../../foundation/Icon/Generated/IconCheckMark.es.js";
|
|
17
|
-
import { LoadingCircle as dt, LoadingCircleSize as
|
|
18
|
-
var
|
|
19
|
-
const xt = ({ extraAction: o, disabled: n, isFocusVisible:
|
|
17
|
+
import { LoadingCircle as dt, LoadingCircleSize as bt } from "../LoadingCircle/LoadingCircle.es.js";
|
|
18
|
+
var mt = /* @__PURE__ */ ((o) => (o.Text = "text", o.Password = "password", o.Number = "number", o))(mt || {});
|
|
19
|
+
const xt = ({ extraAction: o, disabled: n, isFocusVisible: d, focusProps: i }, x) => {
|
|
20
20
|
if (!o)
|
|
21
21
|
return null;
|
|
22
|
-
const
|
|
22
|
+
const l = n || o.disabled;
|
|
23
23
|
return /* @__PURE__ */ e(
|
|
24
24
|
"button",
|
|
25
25
|
{
|
|
26
26
|
className: s([
|
|
27
|
-
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1",
|
|
28
|
+
l ? "tw-cursor-default tw-text-text-disabled" : "tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
|
|
29
|
+
d && f
|
|
30
30
|
]),
|
|
31
31
|
onClick: o.onClick,
|
|
32
32
|
"data-test-id": "fondue-extra-action-icon",
|
|
33
33
|
"aria-label": o.title.toLowerCase(),
|
|
34
|
-
disabled:
|
|
35
|
-
"aria-disabled":
|
|
34
|
+
disabled: l,
|
|
35
|
+
"aria-disabled": l,
|
|
36
36
|
type: "button",
|
|
37
37
|
ref: x,
|
|
38
38
|
...i,
|
|
@@ -42,22 +42,22 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
42
42
|
}, R = rt(xt), kt = ({
|
|
43
43
|
id: o,
|
|
44
44
|
type: n = "text",
|
|
45
|
-
decorator:
|
|
45
|
+
decorator: d,
|
|
46
46
|
validation: i = c.Default,
|
|
47
47
|
clearable: x = !1,
|
|
48
|
-
placeholder:
|
|
48
|
+
placeholder: l,
|
|
49
49
|
required: z,
|
|
50
|
-
obfuscated:
|
|
50
|
+
obfuscated: a,
|
|
51
51
|
disabled: r = !1,
|
|
52
52
|
autocomplete: D = !1,
|
|
53
53
|
dotted: M = !1,
|
|
54
54
|
value: k = "",
|
|
55
55
|
copyable: W = !1,
|
|
56
|
-
onChange:
|
|
57
|
-
onEnterPressed:
|
|
56
|
+
onChange: u,
|
|
57
|
+
onEnterPressed: F,
|
|
58
58
|
onBlur: $,
|
|
59
|
-
onClear:
|
|
60
|
-
onFocus:
|
|
59
|
+
onClear: v,
|
|
60
|
+
onFocus: C,
|
|
61
61
|
size: K,
|
|
62
62
|
spellcheck: I,
|
|
63
63
|
readonly: h,
|
|
@@ -66,38 +66,38 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
66
66
|
extraActions: g,
|
|
67
67
|
...Y
|
|
68
68
|
}) => {
|
|
69
|
-
const { isFocusVisible: _, focusProps: q } =
|
|
70
|
-
typeof
|
|
69
|
+
const { isFocusVisible: _, focusProps: q } = p({ within: !0, isTextInput: !0 }), { isFocusVisible: E, focusProps: G } = p(), { isFocusVisible: P, focusProps: H } = p(), { isFocusVisible: V, focusProps: J } = p(), { isFocusVisible: B, focusProps: j } = p(), { copy: Q, status: y } = tt(), w = st(null), [b, T] = it(
|
|
70
|
+
typeof a == "boolean" ? a : n === "password"
|
|
71
71
|
/* Password */
|
|
72
72
|
);
|
|
73
73
|
O(() => {
|
|
74
74
|
setTimeout(() => {
|
|
75
75
|
var t;
|
|
76
|
-
N && ((t =
|
|
76
|
+
N && ((t = w.current) == null || t.focus());
|
|
77
77
|
}, 0);
|
|
78
78
|
}, [N]), O(() => {
|
|
79
|
-
typeof
|
|
80
|
-
}, [
|
|
79
|
+
typeof a == "boolean" && T(a);
|
|
80
|
+
}, [a]);
|
|
81
81
|
const X = (t) => {
|
|
82
|
-
t.key === "Enter" &&
|
|
83
|
-
}, Z = () => n === "password" ?
|
|
82
|
+
t.key === "Enter" && F && F(t);
|
|
83
|
+
}, Z = () => n === "password" ? b ? "password" : "text" : n, A = typeof I == "boolean" ? { spellCheck: I } : null;
|
|
84
84
|
return /* @__PURE__ */ S(
|
|
85
85
|
"div",
|
|
86
86
|
{
|
|
87
87
|
...q,
|
|
88
88
|
...Y,
|
|
89
89
|
className: s([
|
|
90
|
-
"tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-
|
|
90
|
+
"tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-body-small tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent",
|
|
91
91
|
M ? "tw-border-dashed" : "tw-border-solid",
|
|
92
92
|
r || h ? "tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90" : s([
|
|
93
93
|
"focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong",
|
|
94
94
|
ot[i],
|
|
95
|
-
_ && !E && !P && !V &&
|
|
95
|
+
_ && !E && !P && !V && f
|
|
96
96
|
])
|
|
97
97
|
]),
|
|
98
98
|
"data-test-id": "fondue-text-input-component",
|
|
99
99
|
children: [
|
|
100
|
-
|
|
100
|
+
d && /* @__PURE__ */ e(
|
|
101
101
|
"div",
|
|
102
102
|
{
|
|
103
103
|
className: s([
|
|
@@ -105,33 +105,33 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
105
105
|
r ? "tw-text-black-60" : "tw-text-black-80"
|
|
106
106
|
]),
|
|
107
107
|
"data-test-id": "decorator",
|
|
108
|
-
children:
|
|
108
|
+
children: d
|
|
109
109
|
}
|
|
110
110
|
),
|
|
111
111
|
/* @__PURE__ */ e(
|
|
112
112
|
"input",
|
|
113
113
|
{
|
|
114
114
|
id: et(o),
|
|
115
|
-
ref:
|
|
115
|
+
ref: w,
|
|
116
116
|
className: s([
|
|
117
117
|
"tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
|
|
118
118
|
r || h ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
|
|
119
119
|
]),
|
|
120
120
|
onClick: () => {
|
|
121
121
|
var t;
|
|
122
|
-
return (t =
|
|
122
|
+
return (t = w.current) == null ? void 0 : t.focus();
|
|
123
123
|
},
|
|
124
|
-
onChange: (t) =>
|
|
124
|
+
onChange: (t) => u == null ? void 0 : u(t.currentTarget.value),
|
|
125
125
|
onBlur: $,
|
|
126
126
|
onKeyDown: X,
|
|
127
|
-
placeholder:
|
|
127
|
+
placeholder: l,
|
|
128
128
|
value: k,
|
|
129
129
|
type: Z(),
|
|
130
130
|
required: z,
|
|
131
131
|
readOnly: h,
|
|
132
132
|
disabled: r,
|
|
133
133
|
onFocus: (t) => {
|
|
134
|
-
U && t.target.select(),
|
|
134
|
+
U && t.target.select(), C && C(t);
|
|
135
135
|
},
|
|
136
136
|
autoComplete: D ? "on" : "off",
|
|
137
137
|
size: K,
|
|
@@ -139,8 +139,8 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
139
139
|
...A
|
|
140
140
|
}
|
|
141
141
|
),
|
|
142
|
-
g && g.length > 0 && g.map((t,
|
|
143
|
-
const L = `text-input-extra-action-${
|
|
142
|
+
g && g.length > 0 && g.map((t, m) => {
|
|
143
|
+
const L = `text-input-extra-action-${m}`;
|
|
144
144
|
return t.tooltip ? /* @__PURE__ */ e(
|
|
145
145
|
nt,
|
|
146
146
|
{
|
|
@@ -173,11 +173,11 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
173
173
|
className: s([
|
|
174
174
|
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
|
|
175
175
|
r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
|
|
176
|
-
E &&
|
|
176
|
+
E && f
|
|
177
177
|
]),
|
|
178
178
|
onClick: () => {
|
|
179
|
-
var t,
|
|
180
|
-
(t =
|
|
179
|
+
var t, m;
|
|
180
|
+
(t = w.current) == null || t.focus(), (m = w.current) == null || m.setAttribute("value", ""), u && u(""), v && v();
|
|
181
181
|
},
|
|
182
182
|
"data-test-id": "clear-icon",
|
|
183
183
|
title: "Clear text input",
|
|
@@ -194,19 +194,19 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
194
194
|
className: s([
|
|
195
195
|
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
|
|
196
196
|
r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
|
|
197
|
-
P &&
|
|
197
|
+
P && f
|
|
198
198
|
]),
|
|
199
|
-
onClick: () => T(!
|
|
199
|
+
onClick: () => T(!b),
|
|
200
200
|
"data-test-id": "visibility-icon",
|
|
201
201
|
title: "Toggle text visibility",
|
|
202
202
|
type: "button",
|
|
203
|
-
"aria-label": `${
|
|
203
|
+
"aria-label": `${b ? "unveil" : "obfuscate"} text input`,
|
|
204
204
|
disabled: r,
|
|
205
205
|
...H,
|
|
206
|
-
children:
|
|
206
|
+
children: b ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(at, {})
|
|
207
207
|
}
|
|
208
208
|
),
|
|
209
|
-
i === c.Loading && /* @__PURE__ */ e("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10", children: /* @__PURE__ */ e(dt, { size:
|
|
209
|
+
i === c.Loading && /* @__PURE__ */ e("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10", children: /* @__PURE__ */ e(dt, { size: bt.ExtraSmall }) }),
|
|
210
210
|
(i === c.Error || i === c.Warning) && /* @__PURE__ */ e(
|
|
211
211
|
"span",
|
|
212
212
|
{
|
|
@@ -225,7 +225,7 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
225
225
|
className: s([
|
|
226
226
|
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
|
|
227
227
|
r ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
|
|
228
|
-
V &&
|
|
228
|
+
V && f
|
|
229
229
|
]),
|
|
230
230
|
onClick: () => Q(k),
|
|
231
231
|
"data-test-id": "copy-icon",
|
|
@@ -247,6 +247,6 @@ const xt = ({ extraAction: o, disabled: n, isFocusVisible: f, focusProps: i }, x
|
|
|
247
247
|
kt.displayName = "FondueTextInput";
|
|
248
248
|
export {
|
|
249
249
|
kt as TextInput,
|
|
250
|
-
|
|
250
|
+
mt as TextInputType
|
|
251
251
|
};
|
|
252
252
|
//# sourceMappingURL=TextInput.es.js.map
|