@capra/core 1.11.1 → 1.12.0
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/index.cjs +55 -91
- package/dist/index.d.cts +20 -16
- package/dist/index.d.mts +20 -16
- package/dist/index.mjs +55 -91
- package/dist/style.css +196 -218
- package/docs/core-menu--usage.md +1 -1
- package/docs/core-tabnav--design.md +2 -0
- package/docs/core-tabnav--usage.md +21 -3
- package/docs/history-changelogs-capra-core--docs.md +16 -0
- package/package.json +3 -3
package/dist/index.cjs
CHANGED
|
@@ -4120,20 +4120,21 @@ const Toast = {
|
|
|
4120
4120
|
//#endregion
|
|
4121
4121
|
//#region src/components/Menu/Menu.module.css
|
|
4122
4122
|
var Menu_module_default = {
|
|
4123
|
-
"divider": "capra-Menu-module-
|
|
4124
|
-
"header": "capra-Menu-module-
|
|
4125
|
-
"list": "capra-Menu-module-
|
|
4126
|
-
"menu": "capra-Menu-module-
|
|
4127
|
-
"menuItem": "capra-Menu-module-
|
|
4128
|
-
"menuItemDescription": "capra-Menu-module-
|
|
4129
|
-
"menuItemLabel": "capra-Menu-module-
|
|
4130
|
-
"menuItemLeadingGutter": "capra-Menu-module-
|
|
4131
|
-
"menuItemListItemShell": "capra-Menu-module-
|
|
4132
|
-
"menuItemShortcut": "capra-Menu-module-
|
|
4133
|
-
"menuItemTrailingGroup": "capra-Menu-module-
|
|
4134
|
-
"menuItemTrailingGutter": "capra-Menu-module-
|
|
4135
|
-
"menuTriggerSlot": "capra-Menu-module-
|
|
4136
|
-
"section": "capra-Menu-module-
|
|
4123
|
+
"divider": "capra-Menu-module-HIhAFW-divider",
|
|
4124
|
+
"header": "capra-Menu-module-HIhAFW-header",
|
|
4125
|
+
"list": "capra-Menu-module-HIhAFW-list",
|
|
4126
|
+
"menu": "capra-Menu-module-HIhAFW-menu",
|
|
4127
|
+
"menuItem": "capra-Menu-module-HIhAFW-menuItem",
|
|
4128
|
+
"menuItemDescription": "capra-Menu-module-HIhAFW-menuItemDescription",
|
|
4129
|
+
"menuItemLabel": "capra-Menu-module-HIhAFW-menuItemLabel",
|
|
4130
|
+
"menuItemLeadingGutter": "capra-Menu-module-HIhAFW-menuItemLeadingGutter",
|
|
4131
|
+
"menuItemListItemShell": "capra-Menu-module-HIhAFW-menuItemListItemShell",
|
|
4132
|
+
"menuItemShortcut": "capra-Menu-module-HIhAFW-menuItemShortcut",
|
|
4133
|
+
"menuItemTrailingGroup": "capra-Menu-module-HIhAFW-menuItemTrailingGroup",
|
|
4134
|
+
"menuItemTrailingGutter": "capra-Menu-module-HIhAFW-menuItemTrailingGutter",
|
|
4135
|
+
"menuTriggerSlot": "capra-Menu-module-HIhAFW-menuTriggerSlot",
|
|
4136
|
+
"section": "capra-Menu-module-HIhAFW-section",
|
|
4137
|
+
"slot": "capra-Menu-module-HIhAFW-slot"
|
|
4137
4138
|
};
|
|
4138
4139
|
//#endregion
|
|
4139
4140
|
//#region src/components/Menu/Menu.tsx
|
|
@@ -4223,7 +4224,7 @@ const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled
|
|
|
4223
4224
|
const labelContent = children ?? label;
|
|
4224
4225
|
const showDescription = description != null && description !== "";
|
|
4225
4226
|
const textValue = ariaLabel || (typeof label === "string" ? label : void 0) || (typeof children === "string" ? children : void 0) || "";
|
|
4226
|
-
const listItemContent = /* @__PURE__ */ react.createElement(react.Fragment, null, (indent || icon) && /* @__PURE__ */ react.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon
|
|
4227
|
+
const listItemContent = /* @__PURE__ */ react.createElement(react.Fragment, null, (indent || icon) && /* @__PURE__ */ react.createElement(ListItem.Leading, { FORCE__className: icon ? Menu_module_default.menuItemLeadingGutter : void 0 }, icon), /* @__PURE__ */ react.createElement(ListItem.Content, null, /* @__PURE__ */ react.createElement(ListItem.Label, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemLabel }, labelContent)), showDescription ? /* @__PURE__ */ react.createElement(ListItem.Description, null, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemDescription }, description)) : null), (shortcut || parent) && /* @__PURE__ */ react.createElement(ListItem.Trailing, { FORCE__className: Menu_module_default.menuItemTrailingGutter }, /* @__PURE__ */ react.createElement("span", { className: Menu_module_default.menuItemTrailingGroup }, [shortcut ? /* @__PURE__ */ react.createElement("span", {
|
|
4227
4228
|
key: "shortcut",
|
|
4228
4229
|
className: Menu_module_default.menuItemShortcut
|
|
4229
4230
|
}, shortcut) : null, parent ? /* @__PURE__ */ react.createElement(_capra_icons.ChevronRight, {
|
|
@@ -4251,7 +4252,8 @@ const MenuItem = ({ as: Component, label, description, ariaLabel, href, disabled
|
|
|
4251
4252
|
"data-has-description": showDescription || void 0,
|
|
4252
4253
|
render,
|
|
4253
4254
|
onClick,
|
|
4254
|
-
onPress
|
|
4255
|
+
onPress,
|
|
4256
|
+
...rest
|
|
4255
4257
|
}, /* @__PURE__ */ react.createElement(ListItem, {
|
|
4256
4258
|
as: "div",
|
|
4257
4259
|
role: "presentation",
|
|
@@ -4293,7 +4295,6 @@ const MenuSubmenu = ({ label, children, itemHoverAppearance = "default", itemAct
|
|
|
4293
4295
|
}, listItemContent)), /* @__PURE__ */ react.createElement(PopoverSurface, {
|
|
4294
4296
|
placement: "rightTop",
|
|
4295
4297
|
isNonModal: true,
|
|
4296
|
-
shouldFlip: false,
|
|
4297
4298
|
offsets: [0, 0],
|
|
4298
4299
|
removeContentPadding: true
|
|
4299
4300
|
}, /* @__PURE__ */ react.createElement("div", menuSessionId != null ? { [MENU_SESSION_DATA_ATTR]: menuSessionId } : {}, /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
|
|
@@ -4361,7 +4362,7 @@ function MenuPanelFocusScope({ controlledOpen, children }) {
|
|
|
4361
4362
|
restoreFocus: true
|
|
4362
4363
|
}, children));
|
|
4363
4364
|
}
|
|
4364
|
-
const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset =
|
|
4365
|
+
const Menu = ({ trigger, children, contentProps, open, onOpenChange, itemHoverAppearance = "default", itemActiveAccentBar = true, itemActiveLabelSemibold = true, panelPadding = "default", popoverOffset = 2, trapFocus = false, FORCE__className: classNameOverride }) => {
|
|
4365
4366
|
const sessionId = react.useId();
|
|
4366
4367
|
const menuPanel = /* @__PURE__ */ react.createElement(react_aria_components.Menu, {
|
|
4367
4368
|
className: clsx(Menu_module_default.menu, classNameOverride),
|
|
@@ -4428,6 +4429,17 @@ var TabNav_module_default = {
|
|
|
4428
4429
|
const SUB_KEY_SEP = "::";
|
|
4429
4430
|
/** Delay before closing a subnav on pointer leave (hover), so users can move into the menu. */
|
|
4430
4431
|
const HOVER_CLOSE_DELAY_MS = 150;
|
|
4432
|
+
function getRoutedLinkProps(source) {
|
|
4433
|
+
return {
|
|
4434
|
+
href: source.href,
|
|
4435
|
+
hrefLang: source.hrefLang,
|
|
4436
|
+
target: source.target,
|
|
4437
|
+
rel: source.rel,
|
|
4438
|
+
download: source.download,
|
|
4439
|
+
referrerPolicy: source.referrerPolicy,
|
|
4440
|
+
routerOptions: source.routerOptions
|
|
4441
|
+
};
|
|
4442
|
+
}
|
|
4431
4443
|
function optionalAriaLabelProps(source) {
|
|
4432
4444
|
const v = source["aria-label"];
|
|
4433
4445
|
return v != null && v !== "" ? { "aria-label": v } : {};
|
|
@@ -4437,7 +4449,7 @@ function optionalAriaLabelProps(source) {
|
|
|
4437
4449
|
* Tab items are links that redirect to URLs. With `subItems`, horizontal tabs open a dropdown menu; vertical tabs
|
|
4438
4450
|
* use an inline indented list (Tab Nav | Vertical in Figma).
|
|
4439
4451
|
*/
|
|
4440
|
-
const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
|
|
4452
|
+
const TabNav = ({ activeKey, onTabPress, onTabClick, items, tabPlacement = "horizontal", centered = false, tabBarExtraSlot, wrap = true, FORCE__className: classNameOverride, "aria-label": ariaLabel = "Navigation", ...props }) => {
|
|
4441
4453
|
const [subMenuOpen, setSubMenuOpen] = react.useState({});
|
|
4442
4454
|
const hoverCloseTimeoutRef = react.useRef(null);
|
|
4443
4455
|
const pendingKeyboardFocusKeyRef = react.useRef(null);
|
|
@@ -4598,15 +4610,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
|
|
|
4598
4610
|
getEnabledMenuItems,
|
|
4599
4611
|
getTriggerElement
|
|
4600
4612
|
]);
|
|
4601
|
-
const handleTabClick = (key, event) => {
|
|
4602
|
-
const item = items.find((i) => i.key === key);
|
|
4603
|
-
if (item?.disabled) {
|
|
4604
|
-
event.preventDefault();
|
|
4605
|
-
return;
|
|
4606
|
-
}
|
|
4607
|
-
if (item?.subItems?.length) return;
|
|
4608
|
-
onTabClick?.(key, event);
|
|
4609
|
-
};
|
|
4610
4613
|
const handleKeyDown = (event, key) => {
|
|
4611
4614
|
const itemIndex = items.findIndex((i) => i.key === key);
|
|
4612
4615
|
if (itemIndex === -1) return;
|
|
@@ -4743,37 +4746,24 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
|
|
|
4743
4746
|
}, item.subItems.map((sub) => {
|
|
4744
4747
|
const subActive = activeMainKey === item.key && activeSubKey === sub.key;
|
|
4745
4748
|
const compoundKey = `${item.key}${SUB_KEY_SEP}${sub.key}`;
|
|
4746
|
-
|
|
4749
|
+
return /* @__PURE__ */ react.createElement("li", {
|
|
4750
|
+
key: sub.key,
|
|
4751
|
+
className: TabNav_module_default.subTabListItem
|
|
4752
|
+
}, /* @__PURE__ */ react.createElement(react_aria_components.Link, {
|
|
4747
4753
|
"data-tab-key": compoundKey,
|
|
4748
4754
|
"data-indent": true,
|
|
4749
4755
|
"data-variant": "default",
|
|
4750
4756
|
"data-active": subActive || void 0,
|
|
4751
|
-
"data-disabled": sub.disabled || void 0,
|
|
4752
4757
|
id: `tabnav-${item.key}-${sub.key}`,
|
|
4753
4758
|
className: clsx(TabNav_module_default.tab, TabNav_module_default.subTab),
|
|
4754
|
-
"aria-current": subActive ? "page" : void 0
|
|
4755
|
-
};
|
|
4756
|
-
if (sub.href && sub.disabled) return /* @__PURE__ */ react.createElement("li", {
|
|
4757
|
-
key: sub.key,
|
|
4758
|
-
className: TabNav_module_default.subTabListItem
|
|
4759
|
-
}, /* @__PURE__ */ react.createElement("a", {
|
|
4760
|
-
...subCommon,
|
|
4761
|
-
...optionalAriaLabelProps(sub),
|
|
4762
|
-
href: sub.href,
|
|
4763
|
-
"aria-disabled": true,
|
|
4764
|
-
tabIndex: -1,
|
|
4765
|
-
onClick: (e) => e.preventDefault()
|
|
4766
|
-
}, /* @__PURE__ */ react.createElement("span", {
|
|
4767
|
-
className: TabNav_module_default.indentSpacer,
|
|
4768
|
-
"aria-hidden": "true"
|
|
4769
|
-
}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
|
|
4770
|
-
if (sub.href) return /* @__PURE__ */ react.createElement("li", {
|
|
4771
|
-
key: sub.key,
|
|
4772
|
-
className: TabNav_module_default.subTabListItem
|
|
4773
|
-
}, /* @__PURE__ */ react.createElement("a", {
|
|
4774
|
-
...subCommon,
|
|
4759
|
+
"aria-current": subActive ? "page" : void 0,
|
|
4775
4760
|
...optionalAriaLabelProps(sub),
|
|
4776
|
-
|
|
4761
|
+
...getRoutedLinkProps(sub),
|
|
4762
|
+
isDisabled: sub.disabled,
|
|
4763
|
+
onPress: () => {
|
|
4764
|
+
sub.onPress?.();
|
|
4765
|
+
onTabPress?.(compoundKey);
|
|
4766
|
+
},
|
|
4777
4767
|
onClick: (e) => {
|
|
4778
4768
|
sub.onClick?.(e);
|
|
4779
4769
|
onTabClick?.(compoundKey, e);
|
|
@@ -4783,26 +4773,6 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
|
|
|
4783
4773
|
className: TabNav_module_default.indentSpacer,
|
|
4784
4774
|
"aria-hidden": "true"
|
|
4785
4775
|
}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
|
|
4786
|
-
return /* @__PURE__ */ react.createElement("li", {
|
|
4787
|
-
key: sub.key,
|
|
4788
|
-
className: TabNav_module_default.subTabListItem
|
|
4789
|
-
}, /* @__PURE__ */ react.createElement("span", {
|
|
4790
|
-
...subCommon,
|
|
4791
|
-
...optionalAriaLabelProps(sub),
|
|
4792
|
-
role: "link",
|
|
4793
|
-
"aria-disabled": sub.disabled,
|
|
4794
|
-
tabIndex: sub.disabled ? -1 : 0,
|
|
4795
|
-
onKeyDown: (e) => {
|
|
4796
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
4797
|
-
e.preventDefault();
|
|
4798
|
-
sub.onClick?.(e);
|
|
4799
|
-
onTabClick?.(compoundKey, e);
|
|
4800
|
-
} else handleKeyDown(e, item.key);
|
|
4801
|
-
}
|
|
4802
|
-
}, /* @__PURE__ */ react.createElement("span", {
|
|
4803
|
-
className: TabNav_module_default.indentSpacer,
|
|
4804
|
-
"aria-hidden": "true"
|
|
4805
|
-
}), /* @__PURE__ */ react.createElement("span", { className: TabNav_module_default.tabLabel }, sub.name)));
|
|
4806
4776
|
})));
|
|
4807
4777
|
}
|
|
4808
4778
|
if (hasSubItems) {
|
|
@@ -4826,7 +4796,7 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
|
|
|
4826
4796
|
itemActiveLabelSemibold: false,
|
|
4827
4797
|
panelPadding: "none",
|
|
4828
4798
|
popoverOffset: 1,
|
|
4829
|
-
open: subMenuOpen[item.key],
|
|
4799
|
+
open: Boolean(subMenuOpen[item.key]),
|
|
4830
4800
|
onOpenChange: (open) => {
|
|
4831
4801
|
if (open) {
|
|
4832
4802
|
openSubMenu(item.key);
|
|
@@ -4862,36 +4832,30 @@ const TabNav = ({ activeKey, onTabClick, items, tabPlacement = "horizontal", cen
|
|
|
4862
4832
|
ariaLabel: sub["aria-label"],
|
|
4863
4833
|
href: sub.href,
|
|
4864
4834
|
disabled: sub.disabled,
|
|
4835
|
+
routerOptions: sub.routerOptions,
|
|
4865
4836
|
active: activeSubKey === sub.key,
|
|
4837
|
+
onPress: () => {
|
|
4838
|
+
sub.onPress?.();
|
|
4839
|
+
onTabPress?.(`${item.key}${SUB_KEY_SEP}${sub.key}`);
|
|
4840
|
+
closeMenu();
|
|
4841
|
+
},
|
|
4866
4842
|
onClick: (e) => {
|
|
4867
4843
|
sub.onClick?.(e);
|
|
4868
|
-
|
|
4844
|
+
onTabClick?.(`${item.key}${SUB_KEY_SEP}${sub.key}`, e);
|
|
4869
4845
|
}
|
|
4870
4846
|
});
|
|
4871
4847
|
}));
|
|
4872
4848
|
}
|
|
4873
|
-
|
|
4849
|
+
return /* @__PURE__ */ react.createElement(react_aria_components.Link, {
|
|
4874
4850
|
key: item.key,
|
|
4875
4851
|
...commonTabProps,
|
|
4876
|
-
|
|
4852
|
+
...getRoutedLinkProps(item),
|
|
4853
|
+
isDisabled: item.disabled,
|
|
4877
4854
|
"aria-current": ariaCurrentPage ? "page" : void 0,
|
|
4878
|
-
|
|
4855
|
+
onPress: () => onTabPress?.(item.key),
|
|
4856
|
+
onClick: (e) => onTabClick?.(item.key, e),
|
|
4879
4857
|
onKeyDown: (e) => handleKeyDown(e, item.key)
|
|
4880
4858
|
}, renderTabContent(item));
|
|
4881
|
-
return /* @__PURE__ */ react.createElement("span", {
|
|
4882
|
-
key: item.key,
|
|
4883
|
-
...commonTabProps,
|
|
4884
|
-
role: "link",
|
|
4885
|
-
"aria-disabled": item.disabled,
|
|
4886
|
-
"aria-current": ariaCurrentPage ? "page" : void 0,
|
|
4887
|
-
tabIndex: item.disabled ? -1 : computedTabIndex ?? 0,
|
|
4888
|
-
onKeyDown: (e) => {
|
|
4889
|
-
if (e.key === "Enter" || e.key === " ") {
|
|
4890
|
-
e.preventDefault();
|
|
4891
|
-
handleTabClick(item.key, e);
|
|
4892
|
-
} else handleKeyDown(e, item.key);
|
|
4893
|
-
}
|
|
4894
|
-
}, renderTabContent(item));
|
|
4895
4859
|
})), tabBarExtraSlot && /* @__PURE__ */ react.createElement("div", { className: TabNav_module_default.extraContent }, tabBarExtraSlot)));
|
|
4896
4860
|
};
|
|
4897
4861
|
TabNav.displayName = "TabNav";
|
package/dist/index.d.cts
CHANGED
|
@@ -1741,7 +1741,7 @@ declare const Toast: ToastAPI & {
|
|
|
1741
1741
|
};
|
|
1742
1742
|
//#endregion
|
|
1743
1743
|
//#region src/components/Menu/Menu.d.ts
|
|
1744
|
-
type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & StylingOverrideProps & {
|
|
1744
|
+
type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & RoutedLinkProps & StylingOverrideProps & {
|
|
1745
1745
|
/**
|
|
1746
1746
|
* The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop.
|
|
1747
1747
|
*/
|
|
@@ -1758,10 +1758,6 @@ type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.Componen
|
|
|
1758
1758
|
* Accessible name when it differs from the visible `label` (e.g. tab position and selection state). Passed to the menu item as `aria-label`.
|
|
1759
1759
|
*/
|
|
1760
1760
|
ariaLabel?: string;
|
|
1761
|
-
/**
|
|
1762
|
-
* URL for the default native `<a>` (full document navigation). With `as={Link}` from your router, use that component’s props (`to`, `href`, …) instead or in addition.
|
|
1763
|
-
*/
|
|
1764
|
-
href?: string;
|
|
1765
1761
|
/**
|
|
1766
1762
|
* Whether the item is disabled.
|
|
1767
1763
|
*/
|
|
@@ -1908,8 +1904,9 @@ interface MenuProps extends StylingOverrideProps {
|
|
|
1908
1904
|
panelPadding?: 'default' | 'none';
|
|
1909
1905
|
/**
|
|
1910
1906
|
* Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).
|
|
1911
|
-
*
|
|
1912
|
-
*
|
|
1907
|
+
* Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS.
|
|
1908
|
+
* Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).
|
|
1909
|
+
* @default 2
|
|
1913
1910
|
*/
|
|
1914
1911
|
popoverOffset?: number;
|
|
1915
1912
|
/**
|
|
@@ -1972,7 +1969,7 @@ declare const tabNavPlacements: readonly ['horizontal', 'vertical'];
|
|
|
1972
1969
|
type TabNavPlacement = (typeof tabNavPlacements)[number];
|
|
1973
1970
|
declare const tabNavItemVariants: readonly ['default', 'dropdown'];
|
|
1974
1971
|
type TabNavItemVariant = (typeof tabNavItemVariants)[number];
|
|
1975
|
-
interface TabNavSubItemType {
|
|
1972
|
+
interface TabNavSubItemType extends RoutedLinkProps {
|
|
1976
1973
|
/** Unique key for the sub-item. */
|
|
1977
1974
|
key: string;
|
|
1978
1975
|
/** Visible text in the submenu row (dropdown or vertical list). */
|
|
@@ -1983,10 +1980,17 @@ interface TabNavSubItemType {
|
|
|
1983
1980
|
href?: string;
|
|
1984
1981
|
/** Whether the sub-item is disabled. */
|
|
1985
1982
|
disabled?: boolean;
|
|
1986
|
-
/**
|
|
1983
|
+
/**
|
|
1984
|
+
* Press handler.
|
|
1985
|
+
*/
|
|
1986
|
+
onPress?: () => void;
|
|
1987
|
+
/**
|
|
1988
|
+
* Click handler. Use e.preventDefault() in demos to prevent navigation.
|
|
1989
|
+
* @deprecated Use `onPress` instead.
|
|
1990
|
+
*/
|
|
1987
1991
|
onClick?: (e: React$2.MouseEvent) => void;
|
|
1988
1992
|
}
|
|
1989
|
-
interface TabNavItemType {
|
|
1993
|
+
interface TabNavItemType extends RoutedLinkProps {
|
|
1990
1994
|
/**
|
|
1991
1995
|
* Unique key for the tab.
|
|
1992
1996
|
*/
|
|
@@ -1995,11 +1999,6 @@ interface TabNavItemType {
|
|
|
1995
1999
|
name: React$2.ReactNode;
|
|
1996
2000
|
/** Optional accessible name for the tab (maps to `aria-label` on the control). */
|
|
1997
2001
|
'aria-label'?: string;
|
|
1998
|
-
/**
|
|
1999
|
-
* Link URL. When provided, the tab navigates to this URL on click.
|
|
2000
|
-
* Required for tabs without subItems.
|
|
2001
|
-
*/
|
|
2002
|
-
href?: string;
|
|
2003
2002
|
/**
|
|
2004
2003
|
* Whether the tab is disabled.
|
|
2005
2004
|
*/
|
|
@@ -2028,8 +2027,13 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
|
|
|
2028
2027
|
* Key of the currently active tab (for visual styling). Typically derived from the current URL.
|
|
2029
2028
|
*/
|
|
2030
2029
|
activeKey?: string;
|
|
2030
|
+
/**
|
|
2031
|
+
* Callback when a tab link is pressed (before navigation).
|
|
2032
|
+
*/
|
|
2033
|
+
onTabPress?: (key: string) => void;
|
|
2031
2034
|
/**
|
|
2032
2035
|
* Callback when a tab link is clicked (before navigation).
|
|
2036
|
+
* @deprecated Use `onTabPress` instead.
|
|
2033
2037
|
*/
|
|
2034
2038
|
onTabClick?: (key: string, event: React$2.MouseEvent) => void;
|
|
2035
2039
|
/**
|
|
@@ -2056,7 +2060,7 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
|
|
|
2056
2060
|
*/
|
|
2057
2061
|
wrap?: boolean;
|
|
2058
2062
|
};
|
|
2059
|
-
declare function TabNav({ activeKey, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
|
|
2063
|
+
declare function TabNav({ activeKey, onTabPress, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
|
|
2060
2064
|
declare namespace TabNav {
|
|
2061
2065
|
var displayName: string;
|
|
2062
2066
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1741,7 +1741,7 @@ declare const Toast: ToastAPI & {
|
|
|
1741
1741
|
};
|
|
1742
1742
|
//#endregion
|
|
1743
1743
|
//#region src/components/Menu/Menu.d.ts
|
|
1744
|
-
type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & StylingOverrideProps & {
|
|
1744
|
+
type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.ComponentPropsWithoutRef<As>, 'className' | 'as' | 'children' | 'href' | 'onClick' | 'disabled' | 'type' | 'role'> & RoutedLinkProps & StylingOverrideProps & {
|
|
1745
1745
|
/**
|
|
1746
1746
|
* The component to use for the item. Default is either 'a' or 'button' based on the presence of the href prop.
|
|
1747
1747
|
*/
|
|
@@ -1758,10 +1758,6 @@ type MenuItemProps<As extends React$2.ElementType = 'a'> = Omit<React$2.Componen
|
|
|
1758
1758
|
* Accessible name when it differs from the visible `label` (e.g. tab position and selection state). Passed to the menu item as `aria-label`.
|
|
1759
1759
|
*/
|
|
1760
1760
|
ariaLabel?: string;
|
|
1761
|
-
/**
|
|
1762
|
-
* URL for the default native `<a>` (full document navigation). With `as={Link}` from your router, use that component’s props (`to`, `href`, …) instead or in addition.
|
|
1763
|
-
*/
|
|
1764
|
-
href?: string;
|
|
1765
1761
|
/**
|
|
1766
1762
|
* Whether the item is disabled.
|
|
1767
1763
|
*/
|
|
@@ -1908,8 +1904,9 @@ interface MenuProps extends StylingOverrideProps {
|
|
|
1908
1904
|
panelPadding?: 'default' | 'none';
|
|
1909
1905
|
/**
|
|
1910
1906
|
* Gap along the main axis between the trigger and the menu panel (React Aria `Popover` `offset`).
|
|
1911
|
-
*
|
|
1912
|
-
*
|
|
1907
|
+
* Defaults to 2px to match `spacing.xs`; `Popover` positioning takes a number, so the token cannot be applied via CSS.
|
|
1908
|
+
* Use a smaller value (e.g. 1) when the panel should clear a trigger underline/border (e.g. horizontal TabNav).
|
|
1909
|
+
* @default 2
|
|
1913
1910
|
*/
|
|
1914
1911
|
popoverOffset?: number;
|
|
1915
1912
|
/**
|
|
@@ -1972,7 +1969,7 @@ declare const tabNavPlacements: readonly ['horizontal', 'vertical'];
|
|
|
1972
1969
|
type TabNavPlacement = (typeof tabNavPlacements)[number];
|
|
1973
1970
|
declare const tabNavItemVariants: readonly ['default', 'dropdown'];
|
|
1974
1971
|
type TabNavItemVariant = (typeof tabNavItemVariants)[number];
|
|
1975
|
-
interface TabNavSubItemType {
|
|
1972
|
+
interface TabNavSubItemType extends RoutedLinkProps {
|
|
1976
1973
|
/** Unique key for the sub-item. */
|
|
1977
1974
|
key: string;
|
|
1978
1975
|
/** Visible text in the submenu row (dropdown or vertical list). */
|
|
@@ -1983,10 +1980,17 @@ interface TabNavSubItemType {
|
|
|
1983
1980
|
href?: string;
|
|
1984
1981
|
/** Whether the sub-item is disabled. */
|
|
1985
1982
|
disabled?: boolean;
|
|
1986
|
-
/**
|
|
1983
|
+
/**
|
|
1984
|
+
* Press handler.
|
|
1985
|
+
*/
|
|
1986
|
+
onPress?: () => void;
|
|
1987
|
+
/**
|
|
1988
|
+
* Click handler. Use e.preventDefault() in demos to prevent navigation.
|
|
1989
|
+
* @deprecated Use `onPress` instead.
|
|
1990
|
+
*/
|
|
1987
1991
|
onClick?: (e: React$2.MouseEvent) => void;
|
|
1988
1992
|
}
|
|
1989
|
-
interface TabNavItemType {
|
|
1993
|
+
interface TabNavItemType extends RoutedLinkProps {
|
|
1990
1994
|
/**
|
|
1991
1995
|
* Unique key for the tab.
|
|
1992
1996
|
*/
|
|
@@ -1995,11 +1999,6 @@ interface TabNavItemType {
|
|
|
1995
1999
|
name: React$2.ReactNode;
|
|
1996
2000
|
/** Optional accessible name for the tab (maps to `aria-label` on the control). */
|
|
1997
2001
|
'aria-label'?: string;
|
|
1998
|
-
/**
|
|
1999
|
-
* Link URL. When provided, the tab navigates to this URL on click.
|
|
2000
|
-
* Required for tabs without subItems.
|
|
2001
|
-
*/
|
|
2002
|
-
href?: string;
|
|
2003
2002
|
/**
|
|
2004
2003
|
* Whether the tab is disabled.
|
|
2005
2004
|
*/
|
|
@@ -2028,8 +2027,13 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
|
|
|
2028
2027
|
* Key of the currently active tab (for visual styling). Typically derived from the current URL.
|
|
2029
2028
|
*/
|
|
2030
2029
|
activeKey?: string;
|
|
2030
|
+
/**
|
|
2031
|
+
* Callback when a tab link is pressed (before navigation).
|
|
2032
|
+
*/
|
|
2033
|
+
onTabPress?: (key: string) => void;
|
|
2031
2034
|
/**
|
|
2032
2035
|
* Callback when a tab link is clicked (before navigation).
|
|
2036
|
+
* @deprecated Use `onTabPress` instead.
|
|
2033
2037
|
*/
|
|
2034
2038
|
onTabClick?: (key: string, event: React$2.MouseEvent) => void;
|
|
2035
2039
|
/**
|
|
@@ -2056,7 +2060,7 @@ type TabNavProps = StylingOverrideProps & Omit<React$2.HTMLAttributes<HTMLDivEle
|
|
|
2056
2060
|
*/
|
|
2057
2061
|
wrap?: boolean;
|
|
2058
2062
|
};
|
|
2059
|
-
declare function TabNav({ activeKey, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
|
|
2063
|
+
declare function TabNav({ activeKey, onTabPress, onTabClick, items, tabPlacement, centered, tabBarExtraSlot, wrap, FORCE__className: classNameOverride, 'aria-label': ariaLabel, ...props }: TabNavProps): React$2.JSX.Element;
|
|
2060
2064
|
declare namespace TabNav {
|
|
2061
2065
|
var displayName: string;
|
|
2062
2066
|
}
|