@react-fabric/core 1.0.0-beta.30 → 1.0.0-beta.31
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/cjs/components/tabpanel/Tab.js +5 -3
- package/dist/cjs/components/tabpanel/TabPanel.module.css +1 -1
- package/dist/esm/components/tabpanel/Tab.js +5 -3
- package/dist/esm/components/tabpanel/TabPanel.module.css +1 -1
- package/dist/types/components/tabpanel/Tab.d.ts +1 -1
- package/package.json +3 -3
- package/src/components/tabpanel/Tab.tsx +4 -3
- package/src/components/tabpanel/TabPanel.module.css +41 -41
|
@@ -18,7 +18,7 @@ require('../../types/icons.js');
|
|
|
18
18
|
var DropdownTool = require('../dropdown/DropdownTool.js');
|
|
19
19
|
var TabPanel_module = require('./TabPanel.module.css');
|
|
20
20
|
|
|
21
|
-
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "
|
|
21
|
+
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
|
|
22
22
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
23
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
24
|
var Tab = function Tab(_ref) {
|
|
@@ -35,7 +35,6 @@ var Tab = function Tab(_ref) {
|
|
|
35
35
|
disabled = _ref.disabled,
|
|
36
36
|
onClose = _ref.onClose,
|
|
37
37
|
active = _ref.active,
|
|
38
|
-
minimal = _ref.minimal,
|
|
39
38
|
_onClick = _ref.onClick,
|
|
40
39
|
tabFlex = _ref.tabFlex,
|
|
41
40
|
color = _ref.color,
|
|
@@ -46,6 +45,9 @@ var Tab = function Tab(_ref) {
|
|
|
46
45
|
var badgeProps = react.useMemo(function () {
|
|
47
46
|
return Badge.getBadgeProps(badge);
|
|
48
47
|
}, [badge]);
|
|
48
|
+
var minimal = react.useMemo(function () {
|
|
49
|
+
return !label;
|
|
50
|
+
}, [label]);
|
|
49
51
|
var tooltipProps = react.useMemo(function () {
|
|
50
52
|
if (utilities.isString(tooltip)) return {
|
|
51
53
|
content: tooltip
|
|
@@ -60,7 +62,7 @@ var Tab = function Tab(_ref) {
|
|
|
60
62
|
disabled: disabled,
|
|
61
63
|
"data-color": color,
|
|
62
64
|
"data-inner-clickable": true,
|
|
63
|
-
className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-
|
|
65
|
+
className: classNames(TabPanel_module.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 px-2 py-1" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
|
|
64
66
|
onClick: function onClick() {
|
|
65
67
|
return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
|
|
66
68
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500)
|
|
1
|
+
@layer comp{.tabPanel{--color:theme(colors.primary.500);&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -18,7 +18,7 @@ import '../../types/icons.js';
|
|
|
18
18
|
import { DropdownTool } from '../dropdown/DropdownTool.js';
|
|
19
19
|
import classes from './TabPanel.module.css';
|
|
20
20
|
|
|
21
|
-
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "
|
|
21
|
+
var _excluded = ["ref", "as", "id", "className", "label", "icon", "iconBg", "iconColor", "rtlFlip", "badge", "disabled", "onClose", "active", "onClick", "tabFlex", "color", "actions", "tooltip", "activeClassName"];
|
|
22
22
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
23
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
24
24
|
var Tab = function Tab(_ref) {
|
|
@@ -35,7 +35,6 @@ var Tab = function Tab(_ref) {
|
|
|
35
35
|
disabled = _ref.disabled,
|
|
36
36
|
onClose = _ref.onClose,
|
|
37
37
|
active = _ref.active,
|
|
38
|
-
minimal = _ref.minimal,
|
|
39
38
|
_onClick = _ref.onClick,
|
|
40
39
|
tabFlex = _ref.tabFlex,
|
|
41
40
|
color = _ref.color,
|
|
@@ -46,6 +45,9 @@ var Tab = function Tab(_ref) {
|
|
|
46
45
|
var badgeProps = useMemo(function () {
|
|
47
46
|
return getBadgeProps(badge);
|
|
48
47
|
}, [badge]);
|
|
48
|
+
var minimal = useMemo(function () {
|
|
49
|
+
return !label;
|
|
50
|
+
}, [label]);
|
|
49
51
|
var tooltipProps = useMemo(function () {
|
|
50
52
|
if (isString(tooltip)) return {
|
|
51
53
|
content: tooltip
|
|
@@ -60,7 +62,7 @@ var Tab = function Tab(_ref) {
|
|
|
60
62
|
disabled: disabled,
|
|
61
63
|
"data-color": color,
|
|
62
64
|
"data-inner-clickable": true,
|
|
63
|
-
className: classNames(classes.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-
|
|
65
|
+
className: classNames(classes.tabButton, className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6 px-2 py-1" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
|
|
64
66
|
onClick: function onClick() {
|
|
65
67
|
return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
|
|
66
68
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500)
|
|
1
|
+
@layer comp{.tabPanel{--color:theme(colors.primary.500);&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;.tabHeader{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;.tabHeader{box-shadow:inset 0 1px 0 theme(borderColor.dimmed);margin-top:1px}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;.tabHeader{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;.tabHeader{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{& .tabList>.tabButton:global(.active){pointer-events:none}&>.tabHeader{grid-area:tablist;&>.tabList>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{& .tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{& .tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{& .tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top] .tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom] .tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start] .tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end] .tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top] .tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom] .tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start] .tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end] .tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -42,4 +42,4 @@ export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaP
|
|
|
42
42
|
*/
|
|
43
43
|
onClick?: (id: string) => CallbackReturn;
|
|
44
44
|
}
|
|
45
|
-
export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active,
|
|
45
|
+
export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, onClick, tabFlex, color, actions, tooltip, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-fabric/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.31",
|
|
4
4
|
"description": "RUF: Core package",
|
|
5
5
|
"author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@floating-ui/react": "^0.26.24",
|
|
39
|
-
"@react-fabric/utilities": "^1.0.0-beta.
|
|
39
|
+
"@react-fabric/utilities": "^1.0.0-beta.31",
|
|
40
40
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
41
41
|
"@tailwindcss/forms": "^0.5.7",
|
|
42
42
|
"@tailwindcss/typography": "^0.5.13",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"node": ">=18.12.0",
|
|
57
57
|
"npm": ">=8.19.0"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "de71c6875264d385666d0fa441785b9884951561"
|
|
60
60
|
}
|
|
@@ -108,8 +108,6 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
108
108
|
onClose,
|
|
109
109
|
// @ts-expect-error ignore
|
|
110
110
|
active,
|
|
111
|
-
// @ts-expect-error ignore
|
|
112
|
-
minimal,
|
|
113
111
|
onClick,
|
|
114
112
|
tabFlex,
|
|
115
113
|
color,
|
|
@@ -122,6 +120,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
122
120
|
return getBadgeProps(badge);
|
|
123
121
|
}, [badge]);
|
|
124
122
|
|
|
123
|
+
const minimal = useMemo(() => !label, [label]);
|
|
124
|
+
|
|
125
125
|
const tooltipProps = useMemo(() => {
|
|
126
126
|
if (isString(tooltip)) return { content: tooltip };
|
|
127
127
|
|
|
@@ -143,7 +143,8 @@ export const Tab = <Tag extends React.ElementType = "button">({
|
|
|
143
143
|
active && "active pointer-events-none",
|
|
144
144
|
active && activeClassName,
|
|
145
145
|
disabled && "text-tint-500 pointer-events-none",
|
|
146
|
-
tabFlex ? "flex-1" : "flex-initial max-w-36
|
|
146
|
+
tabFlex ? "flex-1" : "flex-initial max-w-36",
|
|
147
|
+
minimal ? "min-w-6 px-2 py-1" : "min-w-18",
|
|
147
148
|
"flex items-center justify-center px-1 rounded overflow-hidden",
|
|
148
149
|
)}
|
|
149
150
|
onClick={() => !active && onClick?.(id)}
|
|
@@ -25,6 +25,47 @@
|
|
|
25
25
|
.tabPanel {
|
|
26
26
|
--color: theme(colors.primary.500);
|
|
27
27
|
|
|
28
|
+
&[data-orientation="top"] {
|
|
29
|
+
grid-template: "tablist" auto "content" 1fr / 1fr;
|
|
30
|
+
|
|
31
|
+
.tabHeader {
|
|
32
|
+
box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&[data-orientation="bottom"] {
|
|
37
|
+
grid-template: "content" 1fr "tablist" auto / 1fr;
|
|
38
|
+
|
|
39
|
+
.tabHeader {
|
|
40
|
+
margin-top: 1px;
|
|
41
|
+
box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[data-orientation="start"] {
|
|
46
|
+
grid-template: "tablist content" 1fr / auto 1fr;
|
|
47
|
+
|
|
48
|
+
.tabHeader {
|
|
49
|
+
box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&[data-orientation="end"] {
|
|
54
|
+
grid-template: "content tablist" 1fr / 1fr auto;
|
|
55
|
+
|
|
56
|
+
.tabHeader {
|
|
57
|
+
box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@layer util {
|
|
64
|
+
.tabPanel {
|
|
65
|
+
& .tabList > .tabButton:global(.active) {
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
28
69
|
& > .tabHeader {
|
|
29
70
|
grid-area: tablist;
|
|
30
71
|
|
|
@@ -85,47 +126,6 @@
|
|
|
85
126
|
}
|
|
86
127
|
}
|
|
87
128
|
|
|
88
|
-
&[data-orientation="top"] {
|
|
89
|
-
grid-template: "tablist" auto "content" 1fr / 1fr;
|
|
90
|
-
|
|
91
|
-
.tabHeader {
|
|
92
|
-
box-shadow: 0 -1px 0 theme(borderColor.dimmed) inset;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
&[data-orientation="bottom"] {
|
|
97
|
-
grid-template: "content" 1fr "tablist" auto / 1fr;
|
|
98
|
-
|
|
99
|
-
.tabHeader {
|
|
100
|
-
margin-top: 1px;
|
|
101
|
-
box-shadow: 0 1px 0 theme(borderColor.dimmed) inset;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&[data-orientation="start"] {
|
|
106
|
-
grid-template: "tablist content" 1fr / auto 1fr;
|
|
107
|
-
|
|
108
|
-
.tabHeader {
|
|
109
|
-
box-shadow: -1px 0 0 theme(borderColor.dimmed) inset;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
&[data-orientation="end"] {
|
|
114
|
-
grid-template: "content tablist" 1fr / 1fr auto;
|
|
115
|
-
|
|
116
|
-
.tabHeader {
|
|
117
|
-
box-shadow: 1px 0 0 theme(borderColor.dimmed) inset;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
@layer util {
|
|
124
|
-
.tabPanel {
|
|
125
|
-
& .tabList > .tabButton:global(.active) {
|
|
126
|
-
pointer-events: none;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
129
|
&[data-orientation="top"] .tabList {
|
|
130
130
|
& > .tabButton:global(.active) {
|
|
131
131
|
box-shadow:
|