orcs-design-system 3.3.55 → 3.3.56

package/es/components/TabsAlt/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
+import React, { useState, useRef, useEffect, useCallback, createElement as _createElement } from "react";
 import styled, { css } from "styled-components";
 import { NavLink, useLocation } from "react-router-dom";
 import { isEqual } from "lodash";
@@ -21,10 +21,7 @@ const VisibleTabs = styled.div.withConfig({
   componentId: "sc-hkpvfu-2"
 })(["flex-shrink:1;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;height:inherit;"]);
 const activeTabStyle = css(["background-color:", ";color:", ";border-bottom:2px solid ", ";cursor:default;&:hover,&:focus{background-color:", ";color:", ";box-shadow:none;}"], themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primary"));
-const Tab = styled(NavLink).withConfig({
-  displayName: "TabsAlt__Tab",
-  componentId: "sc-hkpvfu-3"
-})(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
+const TabStyles = css(["width:", ";display:block;transition:background 200ms ease-in-out,color 200ms ease-in-out;border-bottom:2px solid ", ";padding:0 ", ";height:", ";display:flex;align-items:center;font-size:", ";font-weight:", ";position:relative;white-space:nowrap;text-decoration:none;text-align:center;background-color:", ";color:", ";cursor:pointer;", " &:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.active{", "}"], _ref => {
   let {
     fullWidth
   } = _ref;
@@ -35,9 +32,17 @@ const Tab = styled(NavLink).withConfig({
   } = _ref2;
   return tabInShowMore ? css(["position:absolute;visibility:hidden;"]) : "";
 }, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
+const NavTab = styled(NavLink).withConfig({
+  displayName: "TabsAlt__NavTab",
+  componentId: "sc-hkpvfu-3"
+})(["", ""], TabStyles);
+const Tab = styled.div.withConfig({
+  displayName: "TabsAlt__Tab",
+  componentId: "sc-hkpvfu-4"
+})(["", ""], TabStyles);
 const ShowMoreButton = styled.button.withConfig({
   displayName: "TabsAlt__ShowMoreButton",
-  componentId: "sc-hkpvfu-4"
+  componentId: "sc-hkpvfu-5"
 })(["appearance:none;border:none;font-family:", ";font-size:", ";font-weight:", ";background-color:", ";border-bottom:2px solid ", ";transition:", ";padding:0 ", ";height:", ";color:", ";display:", ";align-items:center;cursor:pointer;&:hover{background-color:", ";color:", ";box-shadow:inset 0 2px 5px 0 ", ";}&:focus{outline:0;box-shadow:inset 0 2px 5px 0 ", ";}&.hasActive{", "}"], themeGet("fonts.main"), themeGet("fontSizes.1"), themeGet("fontWeights.2"), themeGet("colors.white"), themeGet("colors.greyLighter"), themeGet("transition.transitionDefault"), themeGet("space.4"), themeGet("appScale.tabsHeight"), themeGet("colors.greyDark"), _ref3 => {
   let {
     showMoreVisible
@@ -46,7 +51,7 @@ const ShowMoreButton = styled.button.withConfig({
 }, themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.primaryLightest"), activeTabStyle);
 const ShowMoreTabs = styled.div.withConfig({
   displayName: "TabsAlt__ShowMoreTabs",
-  componentId: "sc-hkpvfu-5"
+  componentId: "sc-hkpvfu-6"
 })(["border-radius:", ";background-color:", ";width:fit-content;overflow:hidden;display:flex;gap:1px;flex-direction:column;justify-content:flex-start;box-shadow:", ";& [class^=\"TabsAlt__Tab\"]{border:0;padding:", ";text-align:left;}"], themeGet("radii.2"), themeGet("colors.greyLighter"), themeGet("shadows.boxDefault"), themeGet("space.3"));
 const tabsGap = 0;
 const TabsAlt = _ref4 => {
@@ -114,6 +119,9 @@ const TabsAlt = _ref4 => {
   const showMoreTabsList = visibleTabsList.filter((_tab, i) => showMoreTabs.includes(i));
   const location = useLocation();
   const showMoreItemActive = showMoreTabsList.find(action => location.pathname.endsWith(action.path));
+  console.log({
+    visibleTabsList
+  });
   return /*#__PURE__*/_jsx(TabsContainer, {
     children: /*#__PURE__*/_jsx(TabWrapper, {
       children: /*#__PURE__*/_jsxs(VisibleTabs, {
@@ -122,15 +130,28 @@ const TabsAlt = _ref4 => {
         },
         ref: containerRef,
         role: "tablist",
-        children: [visibleTabsList.map((tab, i) => /*#__PURE__*/_jsx(Tab, {
-          className: tab.className,
-          id: tab.id,
-          "data-testid": tab["data-testid"],
-          tabInShowMore: showMoreTabs.includes(i),
-          to: tab.path,
-          role: "tab",
-          children: tab.label
-        }, tab.path)), /*#__PURE__*/_jsx(ActionsMenu, {
+        children: [visibleTabsList.map((tab, i) => {
+          const sharedProps = {
+            className: tab.className,
+            id: tab.id,
+            "data-testid": tab["data-testid"],
+            key: tab.path,
+            tabInShowMore: showMoreTabs.includes(i),
+            role: "tab"
+          };
+          if (tab?.onClick) {
+            return /*#__PURE__*/_createElement(Tab, {
+              ...sharedProps,
+              onClick: tab?.onClick,
+              key: tab.id
+            }, tab.label);
+          }
+          return /*#__PURE__*/_createElement(NavTab, {
+            ...sharedProps,
+            to: tab.path,
+            key: tab.id || tab.path
+          }, tab.label);
+        }), /*#__PURE__*/_jsx(ActionsMenu, {
           direction: "bottom-end",
           role: "presentation",
           renderTrigger: props => /*#__PURE__*/_jsxs(ShowMoreButton, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.55",
+  "version": "3.3.56",
   "engines": {
     "node": "20.12.2"
   },