@veracity/vui 2.13.4 → 2.13.6

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.
Files changed (32) hide show
  1. package/dist/cjs/footer/footer.js +1 -1
  2. package/dist/cjs/input/consts.js +1 -1
  3. package/dist/cjs/input/input.d.ts.map +1 -1
  4. package/dist/cjs/input/input.js +5 -1
  5. package/dist/cjs/input/inputInput.d.ts.map +1 -1
  6. package/dist/cjs/input/inputInput.js +1 -0
  7. package/dist/cjs/tabs/tabs.d.ts.map +1 -1
  8. package/dist/cjs/tabs/tabs.js +5 -4
  9. package/dist/cjs/tabs/tabs.types.d.ts +4 -2
  10. package/dist/cjs/tabs/tabs.types.d.ts.map +1 -1
  11. package/dist/cjs/tabs/tabsNavBar.d.ts.map +1 -1
  12. package/dist/cjs/tabs/tabsNavBar.js +3 -1
  13. package/dist/esm/footer/footer.js +1 -1
  14. package/dist/esm/input/consts.js +1 -1
  15. package/dist/esm/input/input.d.ts.map +1 -1
  16. package/dist/esm/input/input.js +5 -1
  17. package/dist/esm/input/inputInput.d.ts.map +1 -1
  18. package/dist/esm/input/inputInput.js +1 -0
  19. package/dist/esm/tabs/tabs.d.ts.map +1 -1
  20. package/dist/esm/tabs/tabs.js +5 -4
  21. package/dist/esm/tabs/tabs.types.d.ts +4 -2
  22. package/dist/esm/tabs/tabs.types.d.ts.map +1 -1
  23. package/dist/esm/tabs/tabsNavBar.d.ts.map +1 -1
  24. package/dist/esm/tabs/tabsNavBar.js +3 -1
  25. package/package.json +2 -2
  26. package/src/footer/footer.tsx +1 -1
  27. package/src/input/consts.ts +1 -1
  28. package/src/input/input.tsx +5 -1
  29. package/src/input/inputInput.tsx +1 -0
  30. package/src/tabs/tabs.tsx +5 -4
  31. package/src/tabs/tabs.types.ts +4 -2
  32. package/src/tabs/tabsNavBar.tsx +11 -1
package/dist/cjs/footer/footer.js CHANGED
@@ -78,7 +78,7 @@ exports.Footer = (0, core_1.vui)((props, ref) => {
78
78
  link.items && (react_1.default.createElement(menu_1.default, Object.assign({ isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg" }, rest),
79
79
  react_1.default.createElement(menu_1.default.Button, Object.assign({ as: link_1.Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text }, styles.link, rest)),
80
80
  react_1.default.createElement(menu_1.default.List, Object.assign({ maxH: 400, right: 0, w: 320 }, styles.list), link.items.map(({ text, url }, index) => (react_1.default.createElement(menu_1.default.Item, Object.assign({ isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text }, styles.item))))))),
81
- !link.items && react_1.default.createElement(footerLink_1.default, Object.assign({}, link)))))),
81
+ !link.items && react_1.default.createElement(footerLink_1.default, Object.assign({}, link, { href: link.url })))))),
82
82
  downLg && react_1.default.createElement(divider_1.Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }),
83
83
  react_1.default.createElement(box_1.Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true }, applicationStaticItems === null || applicationStaticItems === void 0 ? void 0 :
84
84
  applicationStaticItems.map((text, index) => (react_1.default.createElement(box_1.Box, { key: index },
package/dist/cjs/input/consts.js CHANGED
@@ -11,7 +11,7 @@ exports.inputColors = {
11
11
  focus: 'seaBlue.main',
12
12
  error: 'energyRed.45',
13
13
  loading: 'seaBlue.80',
14
- success: 'landGreen.41'
14
+ success: 'landGreen.35'
15
15
  };
16
16
  exports.stateIcons = {
17
17
  error: 'falExclamationTriangle',
package/dist/cjs/input/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAOnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAmJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAOD,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAOnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAmBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAoJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAOD,eAAe,KAAK,CAAA"}
package/dist/cjs/input/input.js CHANGED
@@ -51,6 +51,7 @@ const inputIcon_1 = __importDefault(require("./inputIcon"));
51
51
  const inputInput_1 = __importDefault(require("./inputInput"));
52
52
  exports.InputBase = core_1.styled.divBox `
53
53
  align-items: center;
54
+ color: sandsone.10;
54
55
  background-color: white;
55
56
  border-radius: none;
56
57
  border-width: 1px;
@@ -64,6 +65,8 @@ exports.InputBase = core_1.styled.divBox `
64
65
  &[aria-disabled='true'] {
65
66
  opacity: 0.5;
66
67
  cursor: not-allowed;
68
+ background-color: sandstone.79;
69
+ border-color: sandstone.79;
67
70
  }
68
71
  `;
69
72
  /**
@@ -90,7 +93,8 @@ exports.Input = (0, core_1.vui)((props, ref) => {
90
93
  }
91
94
  const aliasedProps = (0, utils_1.filterUndefined)({
92
95
  'aria-disabled': disabled,
93
- bg: readOnly ? consts_1.inputColors.disabled : undefined,
96
+ bg: readOnly ? 'sandstone.97' : undefined,
97
+ borderColor: readOnly ? 'sandstone.55' : undefined,
94
98
  focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
95
99
  focusWithinRingColor: readOnly ? 'transparent' : undefined
96
100
  });
package/dist/cjs/input/inputInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAe1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAqBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAgB1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAqBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
package/dist/cjs/input/inputInput.js CHANGED
@@ -21,6 +21,7 @@ const utils_1 = require("../utils");
21
21
  const context_1 = require("./context");
22
22
  exports.InputInputBase = core_1.styled.input `
23
23
  align-self: stretch;
24
+ color: sandstone.10;
24
25
  background-color: transparent;
25
26
  border: none;
26
27
  border-radius: none;
package/dist/cjs/tabs/tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA2Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA4Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
package/dist/cjs/tabs/tabs.js CHANGED
@@ -68,7 +68,8 @@ exports.Tabs = (0, core_1.vui)((props, ref) => {
68
68
  icon: child.props.icon,
69
69
  children: child.props.children,
70
70
  disabled: child.props.disabled,
71
- onClick: child.props.onClick
71
+ onClick: child.props.onClick,
72
+ onDelete: child.props.onDelete
72
73
  });
73
74
  });
74
75
  }
@@ -77,16 +78,16 @@ exports.Tabs = (0, core_1.vui)((props, ref) => {
77
78
  setActiveTabIndex(activeTabId);
78
79
  }
79
80
  }, [children, activeTabId]);
80
- const onNavItemClick = (id) => {
81
+ const onNavItemClick = (id, e) => {
81
82
  var _a, _b;
82
83
  setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
83
84
  setActiveTabIndex(id);
84
85
  onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(id);
85
- (_b = (_a = tabs.find(t => t.id === id)) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
86
+ (_b = (_a = tabs.find(t => t.id === id)) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
86
87
  };
87
88
  const activeTab = tabs === null || tabs === void 0 ? void 0 : tabs[activeTabIndex];
88
89
  return (react_1.default.createElement(exports.TabsBase, Object.assign({ className: (0, utils_1.cs)('vui-tabs', className), ref: ref }, styles.container, rest),
89
- !!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && (react_1.default.createElement(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, showBorder: showBorder, size: size, tabs: tabs })),
90
+ !!(tabs === null || tabs === void 0 ? void 0 : tabs.length) && (react_1.default.createElement(tabsNavBar_1.default, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })),
90
91
  (tabs === null || tabs === void 0 ? void 0 : tabs.length) ? (react_1.default.createElement(tab_1.default, { onClick: activeTab === null || activeTab === void 0 ? void 0 : activeTab.onClick, title: activeTab === null || activeTab === void 0 ? void 0 : activeTab.title }, !(activeTab === null || activeTab === void 0 ? void 0 : activeTab.disabled) && (activeTab === null || activeTab === void 0 ? void 0 : activeTab.children))) : (react_1.default.createElement(p_1.P, { p: 2 }, "Please specify Tabs."))));
91
92
  });
92
93
  exports.Tabs.displayName = 'Tabs';
package/dist/cjs/tabs/tabs.types.d.ts CHANGED
@@ -17,11 +17,13 @@ export type TabProps = SystemProps & ChildrenProp & {
17
17
  title: ReactNode;
18
18
  disabled?: boolean;
19
19
  className?: string;
20
- onClick?: () => void;
20
+ onClick?: (nativeEvent?: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
21
+ /** If provided, displays a remove button with this function as onClick. */
22
+ onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
21
23
  };
22
24
  export type TabNavBarProps = {
23
25
  tabs: TabProps[];
24
- onNavItemClick: (id: number) => void;
26
+ onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
25
27
  activeNavItem?: number;
26
28
  animationDirection?: AnimationDirection;
27
29
  showBorder?: boolean;
package/dist/cjs/tabs/tabs.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
1
+ {"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
package/dist/cjs/tabs/tabsNavBar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDA+DrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAwErB,CAAA;AAIF,eAAe,UAAU,CAAA"}
package/dist/cjs/tabs/tabsNavBar.js CHANGED
@@ -9,6 +9,7 @@ const box_1 = __importDefault(require("../box"));
9
9
  const core_1 = require("../core");
10
10
  const icon_1 = require("../icon");
11
11
  const list_1 = require("../list");
12
+ const tag_1 = require("../tag");
12
13
  const utils_1 = require("../utils");
13
14
  const consts_1 = require("./consts");
14
15
  const theme_1 = __importDefault(require("./theme"));
@@ -24,10 +25,11 @@ exports.TabsNavBar = (0, core_1.vui)((props, ref) => {
24
25
  const py = sizes[size !== null && size !== void 0 ? size : 'md'].tabsNavBar.py;
25
26
  const iconMarginRight = size === 'xxl' ? '16px' : '8px';
26
27
  const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
27
- return (react_1.default.createElement(list_1.List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, (_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, key: tab.id, onClick: () => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0), position: "relative", px: "16px", py: py },
28
+ return (react_1.default.createElement(list_1.List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: (0, utils_1.cs)('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, (_b = tabs === null || tabs === void 0 ? void 0 : tabs.map) === null || _b === void 0 ? void 0 : _b.call(tabs, tab => (react_1.default.createElement(list_1.ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab === null || tab === void 0 ? void 0 : tab.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, key: tab.id, onClick: e => onNavItemClick === null || onNavItemClick === void 0 ? void 0 : onNavItemClick(tab.id || 0, e), position: "relative", px: "16px", py: py },
28
29
  react_1.default.createElement(box_1.default, { alignItems: "center" },
29
30
  !!tab.icon && react_1.default.createElement(icon_1.Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }),
30
31
  tab.title),
32
+ !!tab.onDelete && (react_1.default.createElement(tag_1.TagButton, { disabled: tab.disabled, hoverColor: "energyRed.main", isRound: false, ml: 1, onClick: e => { var _a; return (_a = tab === null || tab === void 0 ? void 0 : tab.onDelete) === null || _a === void 0 ? void 0 : _a.call(tab, e); } })),
31
33
  isActive(tab) && (react_1.default.createElement(box_1.default, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
32
34
  });
33
35
  exports.TabsNavBar.displayName = 'TabsNavBar';
package/dist/esm/footer/footer.js CHANGED
@@ -60,7 +60,7 @@ export const Footer = vui((props, ref) => {
60
60
  link.items && (React.createElement(Menu, { isLazy: false, offset: [-16, 9], placement: "top-start", size: "lg", ...rest },
61
61
  React.createElement(Menu.Button, { as: Link, className: "vui-footerLink-trigger", pt: "3px", role: "button", text: link.text, title: link.text, ...styles.link, ...rest }),
62
62
  React.createElement(Menu.List, { maxH: 400, right: 0, w: 320, ...styles.list }, link.items.map(({ text, url }, index) => (React.createElement(Menu.Item, { isTruncated: true, key: index, linkProps: { href: url }, text: text, title: text, ...styles.item })))))),
63
- !link.items && React.createElement(FooterLink, { ...link }))))),
63
+ !link.items && React.createElement(FooterLink, { ...link, href: link.url }))))),
64
64
  downLg && React.createElement(Divider, { borderColor: "sandstone.main", mb: 0.5, mt: 1, w: 1 }),
65
65
  React.createElement(Box, { centerV: true, columnGap: 3, flex: { xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }, justifyContent: { sm: 'center', lg: 'flex-end' }, py: { xs: 1, sm: 1, md: 1.25, lg: 1.5 }, wrap: true },
66
66
  applicationStaticItems?.map((text, index) => (React.createElement(Box, { key: index },
package/dist/esm/input/consts.js CHANGED
@@ -8,7 +8,7 @@ export const inputColors = {
8
8
  focus: 'seaBlue.main',
9
9
  error: 'energyRed.45',
10
10
  loading: 'seaBlue.80',
11
- success: 'landGreen.41'
11
+ success: 'landGreen.35'
12
12
  };
13
13
  export const stateIcons = {
14
14
  error: 'falExclamationTriangle',
package/dist/esm/input/input.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAOnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAgBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAmJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAOD,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/input/input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAOnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,UAAU,MAAM,cAAc,CAAA;AAErC,eAAO,MAAM,SAAS,+HAmBrB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,KAAK;UAoJV,gBAAgB;WACf,iBAAiB;cACd,eAAe;CAC1B,CAAA;AAOD,eAAe,KAAK,CAAA"}
package/dist/esm/input/input.js CHANGED
@@ -11,6 +11,7 @@ import InputIcon from './inputIcon';
11
11
  import InputInput from './inputInput';
12
12
  export const InputBase = styled.divBox `
13
13
  align-items: center;
14
+ color: sandsone.10;
14
15
  background-color: white;
15
16
  border-radius: none;
16
17
  border-width: 1px;
@@ -24,6 +25,8 @@ export const InputBase = styled.divBox `
24
25
  &[aria-disabled='true'] {
25
26
  opacity: 0.5;
26
27
  cursor: not-allowed;
28
+ background-color: sandstone.79;
29
+ border-color: sandstone.79;
27
30
  }
28
31
  `;
29
32
  /**
@@ -49,7 +52,8 @@ export const Input = vui((props, ref) => {
49
52
  }
50
53
  const aliasedProps = filterUndefined({
51
54
  'aria-disabled': disabled,
52
- bg: readOnly ? inputColors.disabled : undefined,
55
+ bg: readOnly ? 'sandstone.97' : undefined,
56
+ borderColor: readOnly ? 'sandstone.55' : undefined,
53
57
  focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
54
58
  focusWithinRingColor: readOnly ? 'transparent' : undefined
55
59
  });
package/dist/esm/input/inputInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAe1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAqBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"inputInput.d.ts","sourceRoot":"","sources":["../../../src/input/inputInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAE/C,eAAO,MAAM,cAAc,2GAgB1B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,UAAU,0DAqBrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
package/dist/esm/input/inputInput.js CHANGED
@@ -4,6 +4,7 @@ import { cs, filterUndefined } from '../utils';
4
4
  import { useInputContext } from './context';
5
5
  export const InputInputBase = styled.input `
6
6
  align-self: stretch;
7
+ color: sandstone.10;
7
8
  background-color: transparent;
8
9
  border: none;
9
10
  border-radius: none;
package/dist/esm/tabs/tabs.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA2Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,SAAS,EAAE,MAAM,cAAc,CAAA;AAIlD,eAAO,MAAM,QAAQ;;;;SAEpB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,kDA4Df,CAAA;AAIF,eAAe,IAAI,CAAA"}
package/dist/esm/tabs/tabs.js CHANGED
@@ -27,7 +27,8 @@ export const Tabs = vui((props, ref) => {
27
27
  icon: child.props.icon,
28
28
  children: child.props.children,
29
29
  disabled: child.props.disabled,
30
- onClick: child.props.onClick
30
+ onClick: child.props.onClick,
31
+ onDelete: child.props.onDelete
31
32
  });
32
33
  });
33
34
  }
@@ -36,15 +37,15 @@ export const Tabs = vui((props, ref) => {
36
37
  setActiveTabIndex(activeTabId);
37
38
  }
38
39
  }, [children, activeTabId]);
39
- const onNavItemClick = (id) => {
40
+ const onNavItemClick = (id, e) => {
40
41
  setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight');
41
42
  setActiveTabIndex(id);
42
43
  onTabClick?.(id);
43
- tabs.find(t => t.id === id)?.onClick?.();
44
+ tabs.find(t => t.id === id)?.onClick?.(e);
44
45
  };
45
46
  const activeTab = tabs?.[activeTabIndex];
46
47
  return (React.createElement(TabsBase, { className: cs('vui-tabs', className), ref: ref, ...styles.container, ...rest },
47
- !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: onNavItemClick, showBorder: showBorder, size: size, tabs: tabs })),
48
+ !!tabs?.length && (React.createElement(TabsNavBar, { activeNavItem: activeTabIndex, animationDirection: animationDirection, onNavItemClick: (id, e) => onNavItemClick(id, e), showBorder: showBorder, size: size, tabs: tabs })),
48
49
  tabs?.length ? (React.createElement(Tab, { onClick: activeTab?.onClick, title: activeTab?.title }, !activeTab?.disabled && activeTab?.children)) : (React.createElement(P, { p: 2 }, "Please specify Tabs."))));
49
50
  });
50
51
  Tabs.displayName = 'Tabs';
package/dist/esm/tabs/tabs.types.d.ts CHANGED
@@ -17,11 +17,13 @@ export type TabProps = SystemProps & ChildrenProp & {
17
17
  title: ReactNode;
18
18
  disabled?: boolean;
19
19
  className?: string;
20
- onClick?: () => void;
20
+ onClick?: (nativeEvent?: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
21
+ /** If provided, displays a remove button with this function as onClick. */
22
+ onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
21
23
  };
22
24
  export type TabNavBarProps = {
23
25
  tabs: TabProps[];
24
- onNavItemClick: (id: number) => void;
26
+ onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
25
27
  activeNavItem?: number;
26
28
  animationDirection?: AnimationDirection;
27
29
  showBorder?: boolean;
package/dist/esm/tabs/tabs.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
1
+ {"version":3,"file":"tabs.types.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GACpB,YAAY,GAAG;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAEH,MAAM,MAAM,QAAQ,GAAG,WAAW,GAChC,YAAY,GAAG;IACb,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IAC7E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;CACnF,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,CAAC,KAAK,IAAI,CAAA;IACpF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA"}
package/dist/esm/tabs/tabsNavBar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDA+DrB,CAAA;AAIF,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"tabsNavBar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tabsNavBar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,cAAc,EAAY,MAAM,cAAc,CAAA;AAKvE,eAAO,MAAM,UAAU,uDAwErB,CAAA;AAIF,eAAe,UAAU,CAAA"}
package/dist/esm/tabs/tabsNavBar.js CHANGED
@@ -3,6 +3,7 @@ import Box from '../box';
3
3
  import { vui } from '../core';
4
4
  import { Icon } from '../icon';
5
5
  import { List, ListItem } from '../list';
6
+ import { TagButton } from '../tag';
6
7
  import { cs } from '../utils';
7
8
  import { iconSizeMapper, tabsColors } from './consts';
8
9
  import theme from './theme';
@@ -17,10 +18,11 @@ export const TabsNavBar = vui((props, ref) => {
17
18
  const py = sizes[size ?? 'md'].tabsNavBar.py;
18
19
  const iconMarginRight = size === 'xxl' ? '16px' : '8px';
19
20
  const isActive = (tab) => !tab.disabled && tab.id === activeNavItem;
20
- return (React.createElement(List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, key: tab.id, onClick: () => onNavItemClick?.(tab.id || 0), position: "relative", px: "16px", py: py },
21
+ return (React.createElement(List, { borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1 }, tabs?.map?.(tab => (React.createElement(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, key: tab.id, onClick: e => onNavItemClick?.(tab.id || 0, e), position: "relative", px: "16px", py: py },
21
22
  React.createElement(Box, { alignItems: "center" },
22
23
  !!tab.icon && React.createElement(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }),
23
24
  tab.title),
25
+ !!tab.onDelete && (React.createElement(TagButton, { disabled: tab.disabled, hoverColor: "energyRed.main", isRound: false, ml: 1, onClick: e => tab?.onDelete?.(e) })),
24
26
  isActive(tab) && (React.createElement(Box, { animation: animationDirection, bg: main, bottom: "-1px", h: borderWidth, left: 0, position: "absolute", w: 1 }, "\u00A0")))))));
25
27
  });
26
28
  TabsNavBar.displayName = 'TabsNavBar';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veracity/vui",
3
- "version": "2.13.4",
3
+ "version": "2.13.6",
4
4
  "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
5
5
  "module": "./dist/esm/index.js",
6
6
  "main": "./dist/cjs/index.js",
@@ -27,7 +27,7 @@
27
27
  "@xstyled/system": "2.5.0",
28
28
  "@xstyled/util": "2.2.3",
29
29
  "react-focus-lock": "2.9.4",
30
- "styled-components": "5.3.6",
30
+ "styled-components": "5.3.10",
31
31
  "tippy.js": "6.3.7"
32
32
  },
33
33
  "peerDependencies": {
package/src/footer/footer.tsx CHANGED
@@ -128,7 +128,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
128
128
  </Menu>
129
129
  )}
130
130
 
131
- {!link.items && <FooterLink {...link} />}
131
+ {!link.items && <FooterLink {...link} href={link.url} />}
132
132
  </Box>
133
133
  ))}
134
134
  </Box>
package/src/input/consts.ts CHANGED
@@ -10,7 +10,7 @@ export const inputColors = {
10
10
  focus: 'seaBlue.main',
11
11
  error: 'energyRed.45',
12
12
  loading: 'seaBlue.80',
13
- success: 'landGreen.41'
13
+ success: 'landGreen.35'
14
14
  }
15
15
 
16
16
  export const stateIcons = {
package/src/input/input.tsx CHANGED
@@ -14,6 +14,7 @@ import InputInput from './inputInput'
14
14
 
15
15
  export const InputBase = styled.divBox`
16
16
  align-items: center;
17
+ color: sandsone.10;
17
18
  background-color: white;
18
19
  border-radius: none;
19
20
  border-width: 1px;
@@ -27,6 +28,8 @@ export const InputBase = styled.divBox`
27
28
  &[aria-disabled='true'] {
28
29
  opacity: 0.5;
29
30
  cursor: not-allowed;
31
+ background-color: sandstone.79;
32
+ border-color: sandstone.79;
30
33
  }
31
34
  `
32
35
 
@@ -99,7 +102,8 @@ export const Input = vui<'div', InputProps>((props, ref) => {
99
102
 
100
103
  const aliasedProps = filterUndefined({
101
104
  'aria-disabled': disabled,
102
- bg: readOnly ? inputColors.disabled : undefined,
105
+ bg: readOnly ? 'sandstone.97' : undefined,
106
+ borderColor: readOnly ? 'sandstone.55' : undefined,
103
107
  focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
104
108
  focusWithinRingColor: readOnly ? 'transparent' : undefined
105
109
  })
package/src/input/inputInput.tsx CHANGED
@@ -7,6 +7,7 @@ import { InputInputProps } from './input.types'
7
7
 
8
8
  export const InputInputBase = styled.input`
9
9
  align-self: stretch;
10
+ color: sandstone.10;
10
11
  background-color: transparent;
11
12
  border: none;
12
13
  border-radius: none;
package/src/tabs/tabs.tsx CHANGED
@@ -34,7 +34,8 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
34
34
  icon: child.props.icon,
35
35
  children: child.props.children,
36
36
  disabled: child.props.disabled,
37
- onClick: child.props.onClick
37
+ onClick: child.props.onClick,
38
+ onDelete: child.props.onDelete
38
39
  })
39
40
  })
40
41
  }
@@ -44,11 +45,11 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
44
45
  }
45
46
  }, [children, activeTabId])
46
47
 
47
- const onNavItemClick = (id: number) => {
48
+ const onNavItemClick = (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
48
49
  setAnimationDirection(id < activeTabIndex ? 'fadeLeft' : 'fadeRight')
49
50
  setActiveTabIndex(id)
50
51
  onTabClick?.(id)
51
- tabs.find(t => t.id === id)?.onClick?.()
52
+ tabs.find(t => t.id === id)?.onClick?.(e)
52
53
  }
53
54
 
54
55
  const activeTab = tabs?.[activeTabIndex]
@@ -59,7 +60,7 @@ export const Tabs = vui<'div', TabsProps>((props, ref) => {
59
60
  <TabsNavBar
60
61
  activeNavItem={activeTabIndex}
61
62
  animationDirection={animationDirection}
62
- onNavItemClick={onNavItemClick}
63
+ onNavItemClick={(id, e) => onNavItemClick(id, e)}
63
64
  showBorder={showBorder}
64
65
  size={size}
65
66
  tabs={tabs}
package/src/tabs/tabs.types.ts CHANGED
@@ -25,12 +25,14 @@ export type TabProps = SystemProps &
25
25
  title: ReactNode
26
26
  disabled?: boolean
27
27
  className?: string
28
- onClick?: () => void
28
+ onClick?: (nativeEvent?: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
29
+ /** If provided, displays a remove button with this function as onClick. */
30
+ onDelete?: (nativeEvent?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
29
31
  }
30
32
 
31
33
  export type TabNavBarProps = {
32
34
  tabs: TabProps[]
33
- onNavItemClick: (id: number) => void
35
+ onNavItemClick: (id: number, e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void
34
36
  activeNavItem?: number
35
37
  animationDirection?: AnimationDirection
36
38
  showBorder?: boolean
package/src/tabs/tabsNavBar.tsx CHANGED
@@ -4,6 +4,7 @@ import Box from '../box'
4
4
  import { vui } from '../core'
5
5
  import { Icon } from '../icon'
6
6
  import { List, ListItem } from '../list'
7
+ import { TagButton } from '../tag'
7
8
  import { cs, Dict } from '../utils'
8
9
  import { iconSizeMapper, tabsColors } from './consts'
9
10
  import { NavBarIconSize, TabNavBarProps, TabProps } from './tabs.types'
@@ -48,7 +49,7 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
48
49
  h={h}
49
50
  hoverBg={tab.disabled ? undefined : hover}
50
51
  key={tab.id}
51
- onClick={() => onNavItemClick?.(tab.id || 0)}
52
+ onClick={e => onNavItemClick?.(tab.id || 0, e)}
52
53
  position="relative"
53
54
  px="16px"
54
55
  py={py}
@@ -57,6 +58,15 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
57
58
  {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}
58
59
  {tab.title}
59
60
  </Box>
61
+ {!!tab.onDelete && (
62
+ <TagButton
63
+ disabled={tab.disabled}
64
+ hoverColor="energyRed.main"
65
+ isRound={false}
66
+ ml={1}
67
+ onClick={e => tab?.onDelete?.(e)}
68
+ />
69
+ )}
60
70
  {isActive(tab) && (
61
71
  <Box
62
72
  animation={animationDirection}