@veracity/vui 2.13.5 → 2.14.0-beta.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.
Files changed (16) hide show
  1. package/dist/cjs/tabs/tabs.d.ts.map +1 -1
  2. package/dist/cjs/tabs/tabs.js +5 -4
  3. package/dist/cjs/tabs/tabs.types.d.ts +4 -2
  4. package/dist/cjs/tabs/tabs.types.d.ts.map +1 -1
  5. package/dist/cjs/tabs/tabsNavBar.d.ts.map +1 -1
  6. package/dist/cjs/tabs/tabsNavBar.js +3 -1
  7. package/dist/esm/tabs/tabs.d.ts.map +1 -1
  8. package/dist/esm/tabs/tabs.js +5 -4
  9. package/dist/esm/tabs/tabs.types.d.ts +4 -2
  10. package/dist/esm/tabs/tabs.types.d.ts.map +1 -1
  11. package/dist/esm/tabs/tabsNavBar.d.ts.map +1 -1
  12. package/dist/esm/tabs/tabsNavBar.js +3 -1
  13. package/package.json +1 -1
  14. package/src/tabs/tabs.tsx +5 -4
  15. package/src/tabs/tabs.types.ts +4 -2
  16. package/src/tabs/tabsNavBar.tsx +11 -1
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/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.5",
3
+ "version": "2.14.0-beta.0",
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",
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}