@pismo/marola 1.0.5 → 1.0.7
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/{Group-DspH8hyO.js → Group-ZXteFV4M.js} +19 -9
- package/dist/Tabs.module-DSjBjg0Z.js +25 -0
- package/dist/{Toggle-MfR7l8Wn.js → Toggle-BuZjueQ7.js} +1 -1
- package/dist/assets/Tabs.css +1 -1
- package/dist/components/Chip/Chip.js +2 -2
- package/dist/components/Chip/Chip.stories.d.ts +1 -1
- package/dist/components/ConfirmationDialog/ConfirmationDialog.stories.d.ts +1 -1
- package/dist/components/Dialog/Dialog.stories.d.ts +1 -1
- package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +1 -1
- package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +1 -1
- package/dist/components/Popover/Popover.stories.d.ts +1 -1
- package/dist/components/ResultWithChips/ResultWithChips.js +1 -1
- package/dist/components/RowItem/RowItem.js +2 -2
- package/dist/components/Snackbar/Snackbar.stories.d.ts +1 -1
- package/dist/components/Tabs/Tab.d.ts +5 -0
- package/dist/components/Tabs/Tab.js +103 -97
- package/dist/components/Tabs/Tab.stories.d.ts +4 -0
- package/dist/components/Tabs/TabPanel.js +1 -1
- package/dist/components/Tabs/Tabs.js +1 -1
- package/dist/components/ToggleGroup/Group.d.ts +2 -0
- package/dist/components/ToggleGroup/Group.js +1 -1
- package/dist/components/ToggleGroup/Toggle.js +2 -2
- package/dist/components/ToggleGroup/ToggleGroup.js +2 -2
- package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +2 -1
- package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
- package/dist/components/Typography/Typography.stories.d.ts +1 -1
- package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts +1 -1
- package/dist/main.js +2 -2
- package/package.json +1 -1
- package/dist/Tabs.module-BGGTkDc5.js +0 -22
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import './assets/Group.css';
|
|
2
2
|
import { jsxs as l, jsx as o } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as n } from "react";
|
|
4
|
-
import { c as
|
|
5
|
-
import { Icon as
|
|
4
|
+
import { c as m } from "./clsx-DB4S2d7J.js";
|
|
5
|
+
import { Icon as u } from "./components/Icon/Icon.js";
|
|
6
6
|
import { Typography as c } from "./components/Typography/Typography.js";
|
|
7
7
|
const p = "_toggle__input_hu6m0_1", h = "_toggle__label_hu6m0_11", t = {
|
|
8
8
|
toggle__input: p,
|
|
@@ -13,18 +13,28 @@ const p = "_toggle__input_hu6m0_1", h = "_toggle__label_hu6m0_11", t = {
|
|
|
13
13
|
"toggle-group__options": "_toggle-group__options_hu6m0_40",
|
|
14
14
|
"toggle-group__options-same-width": "_toggle-group__options-same-width_hu6m0_44",
|
|
15
15
|
"toggle-group__error": "_toggle-group__error_hu6m0_47"
|
|
16
|
-
},
|
|
17
|
-
const { children: s, legend: _, error: g, equalWidth: a } = e,
|
|
16
|
+
}, v = n((e, r) => {
|
|
17
|
+
const { children: s, legend: _, error: g, equalWidth: a } = e, i = e["data-testid"] ? `${e["data-testid"]}-legend` : void 0, d = e["data-testid"] ? `${e["data-testid"]}-error` : void 0;
|
|
18
18
|
return /* @__PURE__ */ l("fieldset", { ref: r, "data-testid": e["data-testid"], className: t["toggle-group__fieldset"], children: [
|
|
19
|
-
_ && /* @__PURE__ */ o("legend", { "data-testid":
|
|
20
|
-
/* @__PURE__ */ o(
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
_ && /* @__PURE__ */ o("legend", { "data-testid": i, children: _ }),
|
|
20
|
+
/* @__PURE__ */ o(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: m(
|
|
24
|
+
t["toggle-group__options"],
|
|
25
|
+
a && t["toggle-group__options-same-width"],
|
|
26
|
+
e.classNameForOptions
|
|
27
|
+
),
|
|
28
|
+
children: s
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
g && /* @__PURE__ */ l(c, { className: t["toggle-group__error"], "data-testid": d, children: [
|
|
32
|
+
/* @__PURE__ */ o(u, { icon: "circle-exclamation" }),
|
|
23
33
|
g
|
|
24
34
|
] })
|
|
25
35
|
] });
|
|
26
36
|
});
|
|
27
37
|
export {
|
|
28
|
-
|
|
38
|
+
v as G,
|
|
29
39
|
t as s
|
|
30
40
|
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import './assets/Tabs.css';
|
|
2
|
+
import * as _ from "react";
|
|
3
|
+
const a = /* @__PURE__ */ _.createContext(null);
|
|
4
|
+
process.env.NODE_ENV !== "production" && (a.displayName = "TabsContext");
|
|
5
|
+
function e() {
|
|
6
|
+
const t = _.useContext(a);
|
|
7
|
+
if (t == null)
|
|
8
|
+
throw new Error("No TabsContext provided");
|
|
9
|
+
return t;
|
|
10
|
+
}
|
|
11
|
+
const s = "_tabs_q5he5_1", b = "_tabs__tab_q5he5_5", o = {
|
|
12
|
+
tabs: s,
|
|
13
|
+
tabs__tab: b,
|
|
14
|
+
"tabs__tab--disabled": "_tabs__tab--disabled_q5he5_26",
|
|
15
|
+
"tabs__tab--selected": "_tabs__tab--selected_q5he5_35",
|
|
16
|
+
"tabs__tab--chip": "_tabs__tab--chip_q5he5_39",
|
|
17
|
+
"tabs__tab--chip--disabled": "_tabs__tab--chip--disabled_q5he5_59",
|
|
18
|
+
"tabs__tab-panel": "_tabs__tab-panel_q5he5_69",
|
|
19
|
+
"tabs__tab-icon": "_tabs__tab-icon_q5he5_73"
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
a as T,
|
|
23
|
+
o as s,
|
|
24
|
+
e as u
|
|
25
|
+
};
|
|
@@ -16,7 +16,7 @@ import "./components/Select/Select.js";
|
|
|
16
16
|
import "./components/Popover/Popover.js";
|
|
17
17
|
import "./components/Table/Table.js";
|
|
18
18
|
import "./components/Tabs/Tabs.js";
|
|
19
|
-
import { s as y } from "./Group-
|
|
19
|
+
import { s as y } from "./Group-ZXteFV4M.js";
|
|
20
20
|
import "./contexts/SnackbarProvider/SnackbarProvider.js";
|
|
21
21
|
import { B as x } from "./Button-BAljjMv3.js";
|
|
22
22
|
const I = "_chip_1wvod_61", P = "_chip__adornment_1wvod_116", z = "_chip__remove_1wvod_121", n = {
|
package/dist/assets/Tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabs_q5he5_1{gap:8px;width:100%}._tabs__tab_q5he5_5{min-width:94px;height:48px;padding:0 4px 0 0;color:var(--gray-75);cursor:pointer;background-color:transparent;border:none;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center}._tabs__tab_q5he5_5:hover{color:var(--hover);border-bottom:2px solid var(--hover)}._tabs__tab_q5he5_5:active{color:var(--active);border-bottom:2px solid var(--active)}._tabs__tab--disabled_q5he5_26{color:#00000040;cursor:default;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--disabled_q5he5_26:focus,._tabs__tab--disabled_q5he5_26:active,._tabs__tab--disabled_q5he5_26:hover{color:#00000040;border-bottom:2px solid rgba(0,0,0,.25)}._tabs__tab--selected_q5he5_35{color:var(--accent);border-bottom:2px solid var(--accent)}._tabs__tab--selected_q5he5_35._tabs__tab--chip_q5he5_39{color:var(--accent);border-color:var(--accent)}._tabs__tab--chip_q5he5_39{height:32px;border:1px solid var(--gray-75);border-radius:var(--border-radius);color:var(--gray-75);background-color:transparent}._tabs__tab--chip_q5he5_39:hover{color:var(--hover);border-color:var(--hover);border-bottom:1px solid var(--hover)}._tabs__tab--chip_q5he5_39:active{color:var(--active);border-color:var(--active)}._tabs__tab--chip--disabled_q5he5_59{color:#00000040;cursor:default;border:1px solid rgba(0,0,0,.25)}._tabs__tab--chip--disabled_q5he5_59:focus,._tabs__tab--chip--disabled_q5he5_59:active,._tabs__tab--chip--disabled_q5he5_59:hover{color:#00000040;border:1px solid rgba(0,0,0,.25);background-color:transparent}._tabs__tab-panel_q5he5_69{width:100%;margin-top:16px}._tabs__tab-icon_q5he5_73{height:16px;width:16px;margin-right:12px}
|
|
@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
|
|
|
7
7
|
import "../Input/Input.js";
|
|
8
8
|
import "../Avatar/Avatar.js";
|
|
9
9
|
import "../Button/Button.js";
|
|
10
|
-
import { C as u } from "../../Toggle-
|
|
10
|
+
import { C as u } from "../../Toggle-BuZjueQ7.js";
|
|
11
11
|
import "../Dialog/Dialog.js";
|
|
12
12
|
import "../Skeleton/Skeleton.js";
|
|
13
13
|
import "../IconButton/IconButton.js";
|
|
@@ -16,7 +16,7 @@ import "../Select/Select.js";
|
|
|
16
16
|
import "../Popover/Popover.js";
|
|
17
17
|
import "../Table/Table.js";
|
|
18
18
|
import "../Tabs/Tabs.js";
|
|
19
|
-
import "../../Group-
|
|
19
|
+
import "../../Group-ZXteFV4M.js";
|
|
20
20
|
import "../../contexts/SnackbarProvider/SnackbarProvider.js";
|
|
21
21
|
import "../../Button-BAljjMv3.js";
|
|
22
22
|
export {
|
|
@@ -4,7 +4,7 @@ declare const meta: {
|
|
|
4
4
|
title: string;
|
|
5
5
|
component: import('react').ForwardRefExoticComponent<import('./Chip').ChipProps & import('react').RefAttributes<unknown>>;
|
|
6
6
|
tags: string[];
|
|
7
|
-
decorators: ((Story: import('@storybook/
|
|
7
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
8
8
|
label: import('react').ReactNode;
|
|
9
9
|
loading?: boolean | undefined;
|
|
10
10
|
leftAdornment?: import('../Adornment/Adornment').AdornmentProps | undefined;
|
|
@@ -5,7 +5,7 @@ declare const meta: {
|
|
|
5
5
|
title: string;
|
|
6
6
|
component: ({ open, onClose, title, subtitle, content, cancelAction, confirmAction, confirmLabel, cancelLabel, }: ConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
tags: string[];
|
|
8
|
-
decorators: ((Story: import('@storybook/
|
|
8
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
9
9
|
open: boolean;
|
|
10
10
|
onClose: () => void;
|
|
11
11
|
title?: import('react').ReactNode;
|
|
@@ -10,7 +10,7 @@ declare const meta: {
|
|
|
10
10
|
Actions: import('react').FunctionComponent<import('./Actions').DialogActionProps>;
|
|
11
11
|
};
|
|
12
12
|
tags: string[];
|
|
13
|
-
decorators: ((Story: import('@storybook/
|
|
13
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
14
14
|
color?: string | undefined;
|
|
15
15
|
ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
|
|
16
16
|
children: import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>> & import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<unknown>>;
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|
|
11
|
-
decorators: ((Story: import('@storybook/
|
|
11
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
12
12
|
children: import('react').ReactNode;
|
|
13
13
|
title: import('react').ReactNode;
|
|
14
14
|
style?: import('react').CSSProperties | undefined;
|
|
@@ -4,7 +4,7 @@ declare const meta: {
|
|
|
4
4
|
title: string;
|
|
5
5
|
component: ({ invert, classNames }: import('./LoadingSpinner').LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
tags: string[];
|
|
7
|
-
decorators: ((Story: import('@storybook/
|
|
7
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
8
8
|
invert?: boolean | undefined;
|
|
9
9
|
classNames?: string | undefined;
|
|
10
10
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
@@ -25,7 +25,7 @@ declare const meta: {
|
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
27
|
tags: string[];
|
|
28
|
-
decorators: ((Story: import('@storybook/
|
|
28
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
29
29
|
[x: string]: any;
|
|
30
30
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
31
31
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../../assets/ResultWithChips.css';
|
|
2
2
|
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
3
|
-
import { C as t } from "../../Toggle-
|
|
3
|
+
import { C as t } from "../../Toggle-BuZjueQ7.js";
|
|
4
4
|
const r = "_container_hgp0p_1", o = "_label_hgp0p_17", a = {
|
|
5
5
|
container: r,
|
|
6
6
|
"chip-item-wrapper": "_chip-item-wrapper_hgp0p_8",
|
|
@@ -7,7 +7,7 @@ import "../Typography/Typography.js";
|
|
|
7
7
|
import "../Input/Input.js";
|
|
8
8
|
import "../Avatar/Avatar.js";
|
|
9
9
|
import "../Button/Button.js";
|
|
10
|
-
import { R as h, R as j } from "../../Toggle-
|
|
10
|
+
import { R as h, R as j } from "../../Toggle-BuZjueQ7.js";
|
|
11
11
|
import "../Dialog/Dialog.js";
|
|
12
12
|
import "../IconButton/IconButton.js";
|
|
13
13
|
import "../InputSearch/InputSearch.js";
|
|
@@ -15,7 +15,7 @@ import "../Select/Select.js";
|
|
|
15
15
|
import "../Popover/Popover.js";
|
|
16
16
|
import "../Table/Table.js";
|
|
17
17
|
import "../Tabs/Tabs.js";
|
|
18
|
-
import "../../Group-
|
|
18
|
+
import "../../Group-ZXteFV4M.js";
|
|
19
19
|
import "../../contexts/SnackbarProvider/SnackbarProvider.js";
|
|
20
20
|
export {
|
|
21
21
|
h as RowItem,
|
|
@@ -5,7 +5,7 @@ declare const meta: {
|
|
|
5
5
|
title: string;
|
|
6
6
|
component: ({ snackbarMessage, variant, autoHideDuration, open, onClose, onClosed, classNameWrapper, "data-testid": dataTestId, }: SnackbarProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
tags: string[];
|
|
8
|
-
decorators: ((Story: import('@storybook/
|
|
8
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
9
9
|
accept?: string | undefined;
|
|
10
10
|
alt?: string | undefined;
|
|
11
11
|
autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { IconName } from '../Icon/types.ts';
|
|
1
2
|
import { ReactNode } from 'react';
|
|
2
3
|
|
|
3
4
|
export interface TabProps {
|
|
@@ -12,5 +13,9 @@ export interface TabProps {
|
|
|
12
13
|
className?: string;
|
|
13
14
|
/** Id to be applied as `data-testid` on the container element */
|
|
14
15
|
'data-testid'?: string;
|
|
16
|
+
/** Icon to be displayed in the tab */
|
|
17
|
+
icon?: IconName | ReactNode;
|
|
18
|
+
/** Is the tab a chip */
|
|
19
|
+
chip?: boolean;
|
|
15
20
|
}
|
|
16
21
|
export declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,124 +1,125 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import * as
|
|
3
|
-
import { forwardRef as H, useContext as U, useMemo as
|
|
4
|
-
import { c as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { u as
|
|
8
|
-
import { u as Q } from "../../
|
|
9
|
-
import { u as
|
|
10
|
-
import { u as
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { jsx as y, jsxs as w } from "react/jsx-runtime";
|
|
2
|
+
import * as P from "react";
|
|
3
|
+
import { forwardRef as H, useContext as U, useMemo as k } from "react";
|
|
4
|
+
import { c as B } from "../../clsx-DB4S2d7J.js";
|
|
5
|
+
import { Icon as D } from "../Icon/Icon.js";
|
|
6
|
+
import { u as L, T as W, s as i } from "../../Tabs.module-DSjBjg0Z.js";
|
|
7
|
+
import { g as $, a as q, u as I, f as z, b as m, _ as A, c as G, P as e, d as J, e as K } from "../../useSlotProps-C_I1kEHr.js";
|
|
8
|
+
import { u as Q, c as X } from "../../combineHooksSlotProps-C-zYvfnF.js";
|
|
9
|
+
import { u as Y } from "../../useId-BW-oWmul.js";
|
|
10
|
+
import { u as Z } from "../../useButton-DcihopJG.js";
|
|
11
|
+
import { u as ee } from "../../useCompoundItem-B7Eo_qZk.js";
|
|
12
|
+
const O = "Tab";
|
|
13
|
+
function te(o) {
|
|
14
|
+
return $(O, o);
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
-
function
|
|
16
|
+
q(O, ["root", "selected", "disabled"]);
|
|
17
|
+
function se(o) {
|
|
17
18
|
return o.size;
|
|
18
19
|
}
|
|
19
|
-
function
|
|
20
|
+
function oe(o) {
|
|
20
21
|
const {
|
|
21
22
|
value: t,
|
|
22
23
|
rootRef: s,
|
|
23
|
-
disabled:
|
|
24
|
-
id:
|
|
25
|
-
} = o,
|
|
26
|
-
value:
|
|
27
|
-
selectionFollowsFocus:
|
|
28
|
-
getTabPanelId:
|
|
29
|
-
} =
|
|
30
|
-
disabled:
|
|
31
|
-
ref:
|
|
32
|
-
id:
|
|
33
|
-
}), [
|
|
34
|
-
id:
|
|
35
|
-
index:
|
|
36
|
-
totalItemCount:
|
|
37
|
-
} =
|
|
38
|
-
getRootProps:
|
|
39
|
-
highlighted:
|
|
40
|
-
selected:
|
|
41
|
-
} =
|
|
42
|
-
item:
|
|
24
|
+
disabled: r = !1,
|
|
25
|
+
id: u
|
|
26
|
+
} = o, a = P.useRef(null), n = Y(u), {
|
|
27
|
+
value: d,
|
|
28
|
+
selectionFollowsFocus: l,
|
|
29
|
+
getTabPanelId: b
|
|
30
|
+
} = L(), R = P.useMemo(() => ({
|
|
31
|
+
disabled: r,
|
|
32
|
+
ref: a,
|
|
33
|
+
id: n
|
|
34
|
+
}), [r, a, n]), {
|
|
35
|
+
id: c,
|
|
36
|
+
index: g,
|
|
37
|
+
totalItemCount: h
|
|
38
|
+
} = ee(t ?? se, R), {
|
|
39
|
+
getRootProps: T,
|
|
40
|
+
highlighted: _,
|
|
41
|
+
selected: f
|
|
42
|
+
} = Q({
|
|
43
|
+
item: c
|
|
43
44
|
}), {
|
|
44
45
|
getRootProps: C,
|
|
45
|
-
rootRef:
|
|
46
|
+
rootRef: p,
|
|
46
47
|
active: v,
|
|
47
|
-
focusVisible:
|
|
48
|
+
focusVisible: F,
|
|
48
49
|
setFocusVisible: V
|
|
49
|
-
} =
|
|
50
|
-
disabled:
|
|
51
|
-
focusableWhenDisabled: !
|
|
50
|
+
} = Z({
|
|
51
|
+
disabled: r,
|
|
52
|
+
focusableWhenDisabled: !l,
|
|
52
53
|
type: "button"
|
|
53
|
-
}),
|
|
54
|
+
}), x = I(a, s, p), M = c !== void 0 ? b(c) : void 0;
|
|
54
55
|
return {
|
|
55
|
-
getRootProps: (
|
|
56
|
-
const S =
|
|
57
|
-
return
|
|
56
|
+
getRootProps: (N = {}) => {
|
|
57
|
+
const S = z(N), j = X(T, C);
|
|
58
|
+
return m({}, N, j(S), {
|
|
58
59
|
role: "tab",
|
|
59
60
|
"aria-controls": M,
|
|
60
|
-
"aria-selected":
|
|
61
|
-
id:
|
|
62
|
-
ref:
|
|
61
|
+
"aria-selected": f,
|
|
62
|
+
id: n,
|
|
63
|
+
ref: x
|
|
63
64
|
});
|
|
64
65
|
},
|
|
65
66
|
active: v,
|
|
66
|
-
focusVisible:
|
|
67
|
-
highlighted:
|
|
68
|
-
index:
|
|
69
|
-
rootRef:
|
|
67
|
+
focusVisible: F,
|
|
68
|
+
highlighted: _,
|
|
69
|
+
index: g,
|
|
70
|
+
rootRef: x,
|
|
70
71
|
// the `selected` state isn't set on the server (it relies on effects to be calculated),
|
|
71
72
|
// so we fall back to checking the `value` prop with the selectedValue from the TabsContext
|
|
72
|
-
selected:
|
|
73
|
+
selected: f || c === d,
|
|
73
74
|
setFocusVisible: V,
|
|
74
|
-
totalTabsCount:
|
|
75
|
+
totalTabsCount: h
|
|
75
76
|
};
|
|
76
77
|
}
|
|
77
|
-
const
|
|
78
|
+
const ae = ["action", "children", "disabled", "onChange", "onClick", "onFocus", "slotProps", "slots", "value"], ne = (o) => {
|
|
78
79
|
const {
|
|
79
80
|
selected: t,
|
|
80
81
|
disabled: s
|
|
81
82
|
} = o;
|
|
82
|
-
return
|
|
83
|
+
return J({
|
|
83
84
|
root: ["root", t && "selected", s && "disabled"]
|
|
84
|
-
},
|
|
85
|
-
},
|
|
86
|
-
var
|
|
85
|
+
}, K(te));
|
|
86
|
+
}, E = /* @__PURE__ */ P.forwardRef(function(t, s) {
|
|
87
|
+
var r;
|
|
87
88
|
const {
|
|
88
|
-
children:
|
|
89
|
-
disabled:
|
|
90
|
-
slotProps:
|
|
91
|
-
slots:
|
|
92
|
-
value:
|
|
93
|
-
} = t,
|
|
94
|
-
active:
|
|
95
|
-
highlighted:
|
|
96
|
-
selected:
|
|
97
|
-
getRootProps:
|
|
98
|
-
} =
|
|
99
|
-
rootRef:
|
|
100
|
-
value:
|
|
101
|
-
})),
|
|
102
|
-
active:
|
|
103
|
-
disabled:
|
|
104
|
-
highlighted:
|
|
105
|
-
selected:
|
|
106
|
-
}), C =
|
|
107
|
-
elementType:
|
|
108
|
-
getSlotProps:
|
|
109
|
-
externalSlotProps:
|
|
110
|
-
externalForwardedProps:
|
|
89
|
+
children: u,
|
|
90
|
+
disabled: a = !1,
|
|
91
|
+
slotProps: n = {},
|
|
92
|
+
slots: d = {},
|
|
93
|
+
value: l
|
|
94
|
+
} = t, b = A(t, ae), R = P.useRef(), c = I(R, s), {
|
|
95
|
+
active: g,
|
|
96
|
+
highlighted: h,
|
|
97
|
+
selected: T,
|
|
98
|
+
getRootProps: _
|
|
99
|
+
} = oe(m({}, t, {
|
|
100
|
+
rootRef: c,
|
|
101
|
+
value: l
|
|
102
|
+
})), f = m({}, t, {
|
|
103
|
+
active: g,
|
|
104
|
+
disabled: a,
|
|
105
|
+
highlighted: h,
|
|
106
|
+
selected: T
|
|
107
|
+
}), C = ne(f), p = (r = d.root) != null ? r : "button", v = G({
|
|
108
|
+
elementType: p,
|
|
109
|
+
getSlotProps: _,
|
|
110
|
+
externalSlotProps: n.root,
|
|
111
|
+
externalForwardedProps: b,
|
|
111
112
|
additionalProps: {
|
|
112
113
|
ref: s
|
|
113
114
|
},
|
|
114
|
-
ownerState:
|
|
115
|
+
ownerState: f,
|
|
115
116
|
className: C.root
|
|
116
117
|
});
|
|
117
|
-
return /* @__PURE__ */
|
|
118
|
-
children:
|
|
118
|
+
return /* @__PURE__ */ y(p, m({}, v, {
|
|
119
|
+
children: u
|
|
119
120
|
}));
|
|
120
121
|
});
|
|
121
|
-
process.env.NODE_ENV !== "production" && (
|
|
122
|
+
process.env.NODE_ENV !== "production" && (E.propTypes = {
|
|
122
123
|
// ┌────────────────────────────── Warning ──────────────────────────────┐
|
|
123
124
|
// │ These PropTypes are generated from the TypeScript type definitions. │
|
|
124
125
|
// │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
|
|
@@ -164,20 +165,25 @@ process.env.NODE_ENV !== "production" && (F.propTypes = {
|
|
|
164
165
|
*/
|
|
165
166
|
value: e.oneOfType([e.number, e.string])
|
|
166
167
|
});
|
|
167
|
-
const
|
|
168
|
-
({ children: o, value: t, disabled: s, className:
|
|
169
|
-
const
|
|
170
|
-
() =>
|
|
171
|
-
|
|
172
|
-
t === (
|
|
173
|
-
s &&
|
|
174
|
-
n
|
|
168
|
+
const Re = H(
|
|
169
|
+
({ children: o, value: t, disabled: s, className: r, "data-testid": u, icon: a, chip: n }, d) => {
|
|
170
|
+
const l = U(W), b = k(
|
|
171
|
+
() => B(
|
|
172
|
+
i.tabs__tab,
|
|
173
|
+
t === (l == null ? void 0 : l.value) && i["tabs__tab--selected"],
|
|
174
|
+
s && !n && i["tabs__tab--disabled"],
|
|
175
|
+
n && i["tabs__tab--chip"],
|
|
176
|
+
n && s && i["tabs__tab--chip--disabled"],
|
|
177
|
+
r
|
|
175
178
|
),
|
|
176
|
-
[t,
|
|
179
|
+
[t, l, s, n]
|
|
177
180
|
);
|
|
178
|
-
return /* @__PURE__ */
|
|
181
|
+
return /* @__PURE__ */ w(E, { className: b, disabled: s, value: t, "data-testid": u, ref: d, children: [
|
|
182
|
+
a && /* @__PURE__ */ y("span", { className: i["tabs__tab-icon"], children: typeof a == "string" ? /* @__PURE__ */ y(D, { icon: a }) : a }),
|
|
183
|
+
o
|
|
184
|
+
] });
|
|
179
185
|
}
|
|
180
186
|
);
|
|
181
187
|
export {
|
|
182
|
-
|
|
188
|
+
Re as Tab
|
|
183
189
|
};
|
|
@@ -12,4 +12,8 @@ declare const meta: {
|
|
|
12
12
|
export default meta;
|
|
13
13
|
type Story = StoryObj<typeof meta>;
|
|
14
14
|
export declare const Simple: Story;
|
|
15
|
+
export declare const Icon: Story;
|
|
16
|
+
export declare const Chip: Story;
|
|
17
|
+
export declare const IconChip: Story;
|
|
15
18
|
export declare const Disabled: Story;
|
|
19
|
+
export declare const DisabledChip: Story;
|
|
@@ -2,7 +2,7 @@ import { jsx as T } from "react/jsx-runtime";
|
|
|
2
2
|
import * as P from "react";
|
|
3
3
|
import { forwardRef as v } from "react";
|
|
4
4
|
import { c as y } from "../../clsx-DB4S2d7J.js";
|
|
5
|
-
import { u as x, s as C } from "../../Tabs.module-
|
|
5
|
+
import { u as x, s as C } from "../../Tabs.module-DSjBjg0Z.js";
|
|
6
6
|
import { g as N, a as _, u as w, b, _ as O, c as E, P as o, d as I, e as S } from "../../useSlotProps-C_I1kEHr.js";
|
|
7
7
|
import { u as U } from "../../useId-BW-oWmul.js";
|
|
8
8
|
import { u as j } from "../../useCompoundItem-B7Eo_qZk.js";
|
|
@@ -2,7 +2,7 @@ import { jsx as T } from "react/jsx-runtime";
|
|
|
2
2
|
import * as r from "react";
|
|
3
3
|
import { forwardRef as q } from "react";
|
|
4
4
|
import { c as B } from "../../clsx-DB4S2d7J.js";
|
|
5
|
-
import { T as G, u as J, s as Q } from "../../Tabs.module-
|
|
5
|
+
import { T as G, u as J, s as Q } from "../../Tabs.module-DSjBjg0Z.js";
|
|
6
6
|
import { Tab as Ie } from "./Tab.js";
|
|
7
7
|
import { TabPanel as Fe } from "./TabPanel.js";
|
|
8
8
|
import { g as I, a as _, b as C, _ as F, c as $, P as t, d as N, e as w } from "../../useSlotProps-C_I1kEHr.js";
|
|
@@ -15,6 +15,8 @@ export type ToggleGroupProps = {
|
|
|
15
15
|
'data-testid'?: string;
|
|
16
16
|
/** Controls if children items should have same width */
|
|
17
17
|
equalWidth?: boolean;
|
|
18
|
+
/** Space separated list of CSS classes to apply to options */
|
|
19
|
+
classNameForOptions?: string;
|
|
18
20
|
};
|
|
19
21
|
declare const Group: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
|
|
20
22
|
export default Group;
|
|
@@ -6,7 +6,7 @@ import "../Typography/Typography.js";
|
|
|
6
6
|
import "../Input/Input.js";
|
|
7
7
|
import "../Avatar/Avatar.js";
|
|
8
8
|
import "../Button/Button.js";
|
|
9
|
-
import { T as j } from "../../Toggle-
|
|
9
|
+
import { T as j } from "../../Toggle-BuZjueQ7.js";
|
|
10
10
|
import "../Dialog/Dialog.js";
|
|
11
11
|
import "../IconButton/IconButton.js";
|
|
12
12
|
import "../InputSearch/InputSearch.js";
|
|
@@ -14,7 +14,7 @@ import "../Select/Select.js";
|
|
|
14
14
|
import "../Popover/Popover.js";
|
|
15
15
|
import "../Table/Table.js";
|
|
16
16
|
import "../Tabs/Tabs.js";
|
|
17
|
-
import "../../Group-
|
|
17
|
+
import "../../Group-ZXteFV4M.js";
|
|
18
18
|
import "../../contexts/SnackbarProvider/SnackbarProvider.js";
|
|
19
19
|
export {
|
|
20
20
|
j as default
|
|
@@ -6,12 +6,13 @@ declare const meta: {
|
|
|
6
6
|
title: string;
|
|
7
7
|
component: import('react').ForwardRefExoticComponent<ToggleGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
|
|
8
8
|
tags: string[];
|
|
9
|
-
decorators: ((Story: import('@storybook/
|
|
9
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
10
10
|
legend?: import('react').ReactNode;
|
|
11
11
|
error?: import('react').ReactNode;
|
|
12
12
|
children: import('react').ReactElement<import('./Toggle.tsx').ToggleGroupItemProps<string | number>, string | import('react').JSXElementConstructor<any>>[];
|
|
13
13
|
'data-testid'?: string | undefined;
|
|
14
14
|
equalWidth?: boolean | undefined;
|
|
15
|
+
classNameForOptions?: string | undefined;
|
|
15
16
|
ref?: import('react').LegacyRef<HTMLFieldSetElement> | undefined;
|
|
16
17
|
key?: import('react').Key | null | undefined;
|
|
17
18
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
@@ -8,7 +8,7 @@ declare const meta: {
|
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|
|
11
|
-
decorators: ((Story: import('@storybook/
|
|
11
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
12
12
|
children: import('react').ReactNode;
|
|
13
13
|
title: import('react').ReactNode;
|
|
14
14
|
open?: boolean | undefined;
|
|
@@ -12,7 +12,7 @@ declare const meta: {
|
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
};
|
|
15
|
-
decorators: ((Story: import('@storybook/
|
|
15
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
16
16
|
children: import('react').ReactNode;
|
|
17
17
|
element?: import('react').ElementType | undefined;
|
|
18
18
|
variant?: import('./Typography').VariantType | undefined;
|
|
@@ -12,7 +12,7 @@ declare const meta: {
|
|
|
12
12
|
};
|
|
13
13
|
};
|
|
14
14
|
tags: string[];
|
|
15
|
-
decorators: ((Story: import('@storybook/
|
|
15
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
16
16
|
[x: string]: any;
|
|
17
17
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
18
18
|
};
|
package/dist/main.js
CHANGED
|
@@ -5,7 +5,7 @@ import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
|
|
|
5
5
|
import { Avatar as i } from "./components/Avatar/Avatar.js";
|
|
6
6
|
import { Button as T } from "./components/Button/Button.js";
|
|
7
7
|
import { Checkbox as g } from "./components/Checkbox/Checkbox.js";
|
|
8
|
-
import { C as u, R as S, T as d } from "./Toggle-
|
|
8
|
+
import { C as u, R as S, T as d } from "./Toggle-BuZjueQ7.js";
|
|
9
9
|
import { ConfirmationDialog as k } from "./components/ConfirmationDialog/ConfirmationDialog.js";
|
|
10
10
|
import { Description as h } from "./components/Description/Description.js";
|
|
11
11
|
import { Dialog as A } from "./components/Dialog/Dialog.js";
|
|
@@ -31,7 +31,7 @@ import { Tabs as bo } from "./components/Tabs/Tabs.js";
|
|
|
31
31
|
import { Tag as Co } from "./components/Tag/Tag.js";
|
|
32
32
|
import { TextDisplay as Do } from "./components/TextDisplay/TextDisplay.js";
|
|
33
33
|
import { Toggle as Io } from "./components/Toggle/Toggle.js";
|
|
34
|
-
import { G as Po } from "./Group-
|
|
34
|
+
import { G as Po } from "./Group-ZXteFV4M.js";
|
|
35
35
|
import { Tooltip as Bo } from "./components/Tooltip/Tooltip.js";
|
|
36
36
|
import { Text as Go, Typography as Ho } from "./components/Typography/Typography.js";
|
|
37
37
|
import { SnackbarContext as Eo, SnackbarProvider as Lo, useSnackbar as No } from "./contexts/SnackbarProvider/SnackbarProvider.js";
|
package/package.json
CHANGED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import './assets/Tabs.css';
|
|
2
|
-
import * as a from "react";
|
|
3
|
-
const s = /* @__PURE__ */ a.createContext(null);
|
|
4
|
-
process.env.NODE_ENV !== "production" && (s.displayName = "TabsContext");
|
|
5
|
-
function e() {
|
|
6
|
-
const t = a.useContext(s);
|
|
7
|
-
if (t == null)
|
|
8
|
-
throw new Error("No TabsContext provided");
|
|
9
|
-
return t;
|
|
10
|
-
}
|
|
11
|
-
const _ = "_tabs_1xfbu_1", b = "_tabs__tab_1xfbu_5", o = {
|
|
12
|
-
tabs: _,
|
|
13
|
-
tabs__tab: b,
|
|
14
|
-
"tabs__tab--disabled": "_tabs__tab--disabled_1xfbu_23",
|
|
15
|
-
"tabs__tab--selected": "_tabs__tab--selected_1xfbu_32",
|
|
16
|
-
"tabs__tab-panel": "_tabs__tab-panel_1xfbu_36"
|
|
17
|
-
};
|
|
18
|
-
export {
|
|
19
|
-
s as T,
|
|
20
|
-
o as s,
|
|
21
|
-
e as u
|
|
22
|
-
};
|