@mackin.com/styleguide 11.0.2 → 11.0.3
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/index.d.ts +8 -2
- package/index.esm.js +61 -27
- package/index.js +61 -27
- package/package.json +1 -1
package/index.d.ts
CHANGED
|
@@ -886,8 +886,12 @@ interface TabHeaderTabProps {
|
|
|
886
886
|
title?: string;
|
|
887
887
|
}
|
|
888
888
|
interface TabHeaderProps {
|
|
889
|
+
/** Required for generating element IDs for ARIA. */
|
|
890
|
+
id: string;
|
|
889
891
|
tabs: TabHeaderTabProps[];
|
|
890
|
-
|
|
892
|
+
ariaLabel: string;
|
|
893
|
+
/** The ID of the content panel with `role=tabpanel` this header is associated with. */
|
|
894
|
+
ariaControlsId: string;
|
|
891
895
|
/** Defaults to 10rem. */
|
|
892
896
|
maxTabWidth?: string;
|
|
893
897
|
/** Defaults to 'tab'. */
|
|
@@ -1110,13 +1114,15 @@ interface ThemeRendererProps extends MackinTheme {
|
|
|
1110
1114
|
declare const ThemeRenderer: (p: ThemeRendererProps) => React.JSX.Element;
|
|
1111
1115
|
|
|
1112
1116
|
interface TabContainerProps {
|
|
1117
|
+
/** Required for generating element IDs for ARIA. */
|
|
1118
|
+
id: string;
|
|
1119
|
+
ariaLabel: string;
|
|
1113
1120
|
tabs: {
|
|
1114
1121
|
name: string | JSX.Element;
|
|
1115
1122
|
/** The HTML title of the tab button. Defaults to 'name' prop. */
|
|
1116
1123
|
title?: string;
|
|
1117
1124
|
getContent: () => JSX.Element;
|
|
1118
1125
|
}[];
|
|
1119
|
-
id?: string;
|
|
1120
1126
|
/** Defaults to 10rem. */
|
|
1121
1127
|
maxTabWidth?: string;
|
|
1122
1128
|
/** Defaults to 'tab'. */
|
package/index.esm.js
CHANGED
|
@@ -1580,7 +1580,7 @@ const Checkbox = (props) => {
|
|
|
1580
1580
|
`}
|
|
1581
1581
|
`;
|
|
1582
1582
|
const iconStyles = css `
|
|
1583
|
-
${!!label && `
|
|
1583
|
+
${!!label && !hideLabel && `
|
|
1584
1584
|
margin-right: 0.5rem;
|
|
1585
1585
|
`}
|
|
1586
1586
|
${props.disabled && `
|
|
@@ -2883,7 +2883,6 @@ const Nav = (props) => {
|
|
|
2883
2883
|
padding-top:0;
|
|
2884
2884
|
`;
|
|
2885
2885
|
React.useEffect(() => {
|
|
2886
|
-
console.log('useEffect');
|
|
2887
2886
|
if (!backdrop.showing) {
|
|
2888
2887
|
props.toggle(false);
|
|
2889
2888
|
}
|
|
@@ -2894,7 +2893,6 @@ const Nav = (props) => {
|
|
|
2894
2893
|
backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
|
|
2895
2894
|
}, props.show);
|
|
2896
2895
|
React.useLayoutEffect(() => {
|
|
2897
|
-
console.log('useLayoutEffect');
|
|
2898
2896
|
if (nav && nav.current) {
|
|
2899
2897
|
if (props.show) {
|
|
2900
2898
|
if (!nav.current.classList.contains(classNavShowing)) {
|
|
@@ -2902,7 +2900,6 @@ const Nav = (props) => {
|
|
|
2902
2900
|
setTimeout(() => {
|
|
2903
2901
|
var _a;
|
|
2904
2902
|
(_a = document.querySelector(props.focusSelector)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
2905
|
-
console.log(props.focusSelector, document.querySelector(props.focusSelector), 'focused');
|
|
2906
2903
|
}, slideMs + 1);
|
|
2907
2904
|
}
|
|
2908
2905
|
}
|
|
@@ -4095,8 +4092,37 @@ const TabHeader = (p) => {
|
|
|
4095
4092
|
borderBottom: theme.controls.border,
|
|
4096
4093
|
paddingBottom: '1rem'
|
|
4097
4094
|
});
|
|
4095
|
+
function onTabSelect(index, tabId, focusAfter) {
|
|
4096
|
+
const onChange = () => {
|
|
4097
|
+
var _a;
|
|
4098
|
+
setTabIndex(index);
|
|
4099
|
+
(_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
|
|
4100
|
+
if (focusAfter) {
|
|
4101
|
+
setTimeout(() => {
|
|
4102
|
+
var _a;
|
|
4103
|
+
(_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4104
|
+
}, 0);
|
|
4105
|
+
}
|
|
4106
|
+
};
|
|
4107
|
+
if (p.onBeforeTabChanged) {
|
|
4108
|
+
setTabsChanging(true);
|
|
4109
|
+
p.onBeforeTabChanged(index)
|
|
4110
|
+
.then(() => {
|
|
4111
|
+
onChange();
|
|
4112
|
+
})
|
|
4113
|
+
.catch(() => {
|
|
4114
|
+
/* do nothing */
|
|
4115
|
+
})
|
|
4116
|
+
.finally(() => {
|
|
4117
|
+
setTabsChanging(false);
|
|
4118
|
+
});
|
|
4119
|
+
}
|
|
4120
|
+
else {
|
|
4121
|
+
onChange();
|
|
4122
|
+
}
|
|
4123
|
+
}
|
|
4098
4124
|
return (React.createElement("div", { className: "tabHeader" },
|
|
4099
|
-
React.createElement("ul", { className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
|
|
4125
|
+
React.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
|
|
4100
4126
|
var _a, _b;
|
|
4101
4127
|
const active = index === tabIndex;
|
|
4102
4128
|
let tabStyles;
|
|
@@ -4140,28 +4166,31 @@ const TabHeader = (p) => {
|
|
|
4140
4166
|
else {
|
|
4141
4167
|
buttonContent = tab.name;
|
|
4142
4168
|
}
|
|
4169
|
+
const tabId = getTabHeaderTabId(p.id, index);
|
|
4143
4170
|
return (React.createElement("li", { key: index, className: cx(tabStyles, p.tabClassName) },
|
|
4144
|
-
React.createElement(Button, {
|
|
4145
|
-
|
|
4146
|
-
|
|
4147
|
-
|
|
4148
|
-
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
|
|
4152
|
-
|
|
4153
|
-
|
|
4154
|
-
|
|
4155
|
-
}
|
|
4156
|
-
.catch(() => {
|
|
4157
|
-
/* do nothing */
|
|
4158
|
-
})
|
|
4159
|
-
.finally(() => {
|
|
4160
|
-
setTabsChanging(false);
|
|
4161
|
-
});
|
|
4171
|
+
React.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
|
|
4172
|
+
onTabSelect(index, tabId, false);
|
|
4173
|
+
}, onKeyDown: e => {
|
|
4174
|
+
e.stopPropagation();
|
|
4175
|
+
let newIndex = index;
|
|
4176
|
+
if (e.code === 'ArrowLeft') {
|
|
4177
|
+
if (index === 0) {
|
|
4178
|
+
newIndex = p.tabs.length - 1;
|
|
4179
|
+
}
|
|
4180
|
+
else {
|
|
4181
|
+
newIndex = index - 1;
|
|
4182
|
+
}
|
|
4162
4183
|
}
|
|
4163
|
-
else {
|
|
4164
|
-
|
|
4184
|
+
else if (e.code === 'ArrowRight') {
|
|
4185
|
+
if (index === p.tabs.length - 1) {
|
|
4186
|
+
newIndex = 0;
|
|
4187
|
+
}
|
|
4188
|
+
else {
|
|
4189
|
+
newIndex = index + 1;
|
|
4190
|
+
}
|
|
4191
|
+
}
|
|
4192
|
+
if (newIndex !== index) {
|
|
4193
|
+
onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
|
|
4165
4194
|
}
|
|
4166
4195
|
} }, buttonContent)));
|
|
4167
4196
|
})),
|
|
@@ -4173,6 +4202,9 @@ const TabHeader = (p) => {
|
|
|
4173
4202
|
position: 'relative'
|
|
4174
4203
|
}), p.tabHeaderDividerClassName) }))));
|
|
4175
4204
|
};
|
|
4205
|
+
function getTabHeaderTabId(tabHeaderId, tabIndex) {
|
|
4206
|
+
return `${tabHeaderId}_tab_${tabIndex}`;
|
|
4207
|
+
}
|
|
4176
4208
|
|
|
4177
4209
|
const Table = (props) => {
|
|
4178
4210
|
const theme = useThemeSafely();
|
|
@@ -4942,15 +4974,17 @@ const TabContainer = (p) => {
|
|
|
4942
4974
|
var _a;
|
|
4943
4975
|
const [tabIndex, setTabIndex] = React.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
|
|
4944
4976
|
const theme = useThemeSafely();
|
|
4977
|
+
const tabPanelId = `${p.id}_tabpanel`;
|
|
4978
|
+
const tabHeaderId = `${p.id}_TabHeader`;
|
|
4945
4979
|
return (React.createElement("div", { className: css({
|
|
4946
4980
|
label: 'TabContainer'
|
|
4947
4981
|
}) },
|
|
4948
|
-
React.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
|
|
4982
|
+
React.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
|
|
4949
4983
|
var _a;
|
|
4950
4984
|
setTabIndex(newIndex);
|
|
4951
4985
|
(_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
|
|
4952
4986
|
} }),
|
|
4953
|
-
React.createElement("div", { className: cx(css({
|
|
4987
|
+
React.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: cx(css({
|
|
4954
4988
|
label: 'TabContainerContent',
|
|
4955
4989
|
padding: '1rem',
|
|
4956
4990
|
borderLeft: theme.controls.border,
|
package/index.js
CHANGED
|
@@ -1598,7 +1598,7 @@ const Checkbox = (props) => {
|
|
|
1598
1598
|
`}
|
|
1599
1599
|
`;
|
|
1600
1600
|
const iconStyles = css.css `
|
|
1601
|
-
${!!label && `
|
|
1601
|
+
${!!label && !hideLabel && `
|
|
1602
1602
|
margin-right: 0.5rem;
|
|
1603
1603
|
`}
|
|
1604
1604
|
${props.disabled && `
|
|
@@ -2901,7 +2901,6 @@ const Nav = (props) => {
|
|
|
2901
2901
|
padding-top:0;
|
|
2902
2902
|
`;
|
|
2903
2903
|
React__namespace.useEffect(() => {
|
|
2904
|
-
console.log('useEffect');
|
|
2905
2904
|
if (!backdrop.showing) {
|
|
2906
2905
|
props.toggle(false);
|
|
2907
2906
|
}
|
|
@@ -2912,7 +2911,6 @@ const Nav = (props) => {
|
|
|
2912
2911
|
backdrop.setShow(current, { key: (_a = props.id) !== null && _a !== void 0 ? _a : 'Nav', zIndex });
|
|
2913
2912
|
}, props.show);
|
|
2914
2913
|
React__namespace.useLayoutEffect(() => {
|
|
2915
|
-
console.log('useLayoutEffect');
|
|
2916
2914
|
if (nav && nav.current) {
|
|
2917
2915
|
if (props.show) {
|
|
2918
2916
|
if (!nav.current.classList.contains(classNavShowing)) {
|
|
@@ -2920,7 +2918,6 @@ const Nav = (props) => {
|
|
|
2920
2918
|
setTimeout(() => {
|
|
2921
2919
|
var _a;
|
|
2922
2920
|
(_a = document.querySelector(props.focusSelector)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
2923
|
-
console.log(props.focusSelector, document.querySelector(props.focusSelector), 'focused');
|
|
2924
2921
|
}, slideMs + 1);
|
|
2925
2922
|
}
|
|
2926
2923
|
}
|
|
@@ -4113,8 +4110,37 @@ const TabHeader = (p) => {
|
|
|
4113
4110
|
borderBottom: theme.controls.border,
|
|
4114
4111
|
paddingBottom: '1rem'
|
|
4115
4112
|
});
|
|
4113
|
+
function onTabSelect(index, tabId, focusAfter) {
|
|
4114
|
+
const onChange = () => {
|
|
4115
|
+
var _a;
|
|
4116
|
+
setTabIndex(index);
|
|
4117
|
+
(_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, index);
|
|
4118
|
+
if (focusAfter) {
|
|
4119
|
+
setTimeout(() => {
|
|
4120
|
+
var _a;
|
|
4121
|
+
(_a = document.getElementById(tabId)) === null || _a === void 0 ? void 0 : _a.focus();
|
|
4122
|
+
}, 0);
|
|
4123
|
+
}
|
|
4124
|
+
};
|
|
4125
|
+
if (p.onBeforeTabChanged) {
|
|
4126
|
+
setTabsChanging(true);
|
|
4127
|
+
p.onBeforeTabChanged(index)
|
|
4128
|
+
.then(() => {
|
|
4129
|
+
onChange();
|
|
4130
|
+
})
|
|
4131
|
+
.catch(() => {
|
|
4132
|
+
/* do nothing */
|
|
4133
|
+
})
|
|
4134
|
+
.finally(() => {
|
|
4135
|
+
setTabsChanging(false);
|
|
4136
|
+
});
|
|
4137
|
+
}
|
|
4138
|
+
else {
|
|
4139
|
+
onChange();
|
|
4140
|
+
}
|
|
4141
|
+
}
|
|
4116
4142
|
return (React__namespace.createElement("div", { className: "tabHeader" },
|
|
4117
|
-
React__namespace.createElement("ul", { className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
|
|
4143
|
+
React__namespace.createElement("ul", { role: 'tablist', "aria-label": p.ariaLabel, className: css.cx(menuStyles, p.containerClassName) }, p.tabs.map((tab, index) => {
|
|
4118
4144
|
var _a, _b;
|
|
4119
4145
|
const active = index === tabIndex;
|
|
4120
4146
|
let tabStyles;
|
|
@@ -4158,28 +4184,31 @@ const TabHeader = (p) => {
|
|
|
4158
4184
|
else {
|
|
4159
4185
|
buttonContent = tab.name;
|
|
4160
4186
|
}
|
|
4187
|
+
const tabId = getTabHeaderTabId(p.id, index);
|
|
4161
4188
|
return (React__namespace.createElement("li", { key: index, className: css.cx(tabStyles, p.tabClassName) },
|
|
4162
|
-
React__namespace.createElement(Button, {
|
|
4163
|
-
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
}
|
|
4174
|
-
.catch(() => {
|
|
4175
|
-
/* do nothing */
|
|
4176
|
-
})
|
|
4177
|
-
.finally(() => {
|
|
4178
|
-
setTabsChanging(false);
|
|
4179
|
-
});
|
|
4189
|
+
React__namespace.createElement(Button, { id: tabId, tabIndex: active ? 0 : -1, role: "tab", "aria-controls": p.ariaControlsId, "aria-selected": active, disabled: tabsChanging, className: buttonStyles, variant: buttonVariant, title: title, readOnly: active, onClick: () => {
|
|
4190
|
+
onTabSelect(index, tabId, false);
|
|
4191
|
+
}, onKeyDown: e => {
|
|
4192
|
+
e.stopPropagation();
|
|
4193
|
+
let newIndex = index;
|
|
4194
|
+
if (e.code === 'ArrowLeft') {
|
|
4195
|
+
if (index === 0) {
|
|
4196
|
+
newIndex = p.tabs.length - 1;
|
|
4197
|
+
}
|
|
4198
|
+
else {
|
|
4199
|
+
newIndex = index - 1;
|
|
4200
|
+
}
|
|
4180
4201
|
}
|
|
4181
|
-
else {
|
|
4182
|
-
|
|
4202
|
+
else if (e.code === 'ArrowRight') {
|
|
4203
|
+
if (index === p.tabs.length - 1) {
|
|
4204
|
+
newIndex = 0;
|
|
4205
|
+
}
|
|
4206
|
+
else {
|
|
4207
|
+
newIndex = index + 1;
|
|
4208
|
+
}
|
|
4209
|
+
}
|
|
4210
|
+
if (newIndex !== index) {
|
|
4211
|
+
onTabSelect(newIndex, getTabHeaderTabId(p.id, newIndex), true);
|
|
4183
4212
|
}
|
|
4184
4213
|
} }, buttonContent)));
|
|
4185
4214
|
})),
|
|
@@ -4191,6 +4220,9 @@ const TabHeader = (p) => {
|
|
|
4191
4220
|
position: 'relative'
|
|
4192
4221
|
}), p.tabHeaderDividerClassName) }))));
|
|
4193
4222
|
};
|
|
4223
|
+
function getTabHeaderTabId(tabHeaderId, tabIndex) {
|
|
4224
|
+
return `${tabHeaderId}_tab_${tabIndex}`;
|
|
4225
|
+
}
|
|
4194
4226
|
|
|
4195
4227
|
const Table = (props) => {
|
|
4196
4228
|
const theme = useThemeSafely();
|
|
@@ -4960,15 +4992,17 @@ const TabContainer = (p) => {
|
|
|
4960
4992
|
var _a;
|
|
4961
4993
|
const [tabIndex, setTabIndex] = React__namespace.useState((_a = p.startingIndex) !== null && _a !== void 0 ? _a : 0);
|
|
4962
4994
|
const theme = useThemeSafely();
|
|
4995
|
+
const tabPanelId = `${p.id}_tabpanel`;
|
|
4996
|
+
const tabHeaderId = `${p.id}_TabHeader`;
|
|
4963
4997
|
return (React__namespace.createElement("div", { className: css.css({
|
|
4964
4998
|
label: 'TabContainer'
|
|
4965
4999
|
}) },
|
|
4966
|
-
React__namespace.createElement(TabHeader, { tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: newIndex => {
|
|
5000
|
+
React__namespace.createElement(TabHeader, { id: tabHeaderId, ariaControlsId: tabPanelId, ariaLabel: p.ariaLabel, tabs: p.tabs, maxTabWidth: p.maxTabWidth, variant: p.variant, containerClassName: p.tabHeaderClassName, tabClassName: p.tabClassName, tabHeaderDividerClassName: p.tabHeaderDividerClassName, startingIndex: tabIndex, onBeforeTabChanged: p.onBeforeTabChanged, onTabChanged: (newIndex) => {
|
|
4967
5001
|
var _a;
|
|
4968
5002
|
setTabIndex(newIndex);
|
|
4969
5003
|
(_a = p.onTabChanged) === null || _a === void 0 ? void 0 : _a.call(p, newIndex);
|
|
4970
5004
|
} }),
|
|
4971
|
-
React__namespace.createElement("div", { className: css.cx(css.css({
|
|
5005
|
+
React__namespace.createElement("div", { role: 'tabpanel', id: tabPanelId, "aria-labelledby": getTabHeaderTabId(tabHeaderId, tabIndex), className: css.cx(css.css({
|
|
4972
5006
|
label: 'TabContainerContent',
|
|
4973
5007
|
padding: '1rem',
|
|
4974
5008
|
borderLeft: theme.controls.border,
|