@griddo/ax 11.12.0 → 11.12.1-rc.0

package/src/components/Icon/index.tsx

@@ -1,8 +1,7 @@
 const getImage = (name: string) => {
 	try {
 		return require(`./components/${name}`).default;
-	} catch (err) {
-		console.log(name);
+	} catch (_err) {
 		return null;
 	}
 };

package/src/components/IconAction/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Icon } from "@ax/components";
 
 import * as S from "./style";
@@ -20,6 +19,7 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
 			size={size}
 			inversed={inversed}
 			active={active}
+			tabIndex={0}
 		>
 			<S.Icon data-testid={`icon-action-${icon}`}>
 				<Icon name={icon} />

package/src/components/KeywordsPreviewModal/KeywordItem/index.tsx

@@ -0,0 +1,46 @@
+import { IconAction } from "@ax/components";
+import { useModal } from "@ax/hooks";
+
+import { DeleteKeywordsModal } from "../atoms";
+
+import * as S from "./style";
+
+const KeywordItem = (props: IKeywordItemProps) => {
+	const { keyword, count, isSelected, onClick, deleteKeyword } = props;
+
+	const { isOpen, toggleModal } = useModal();
+
+	const handleDeleteKeyword = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		if (count > 0) {
+			toggleModal();
+		} else {
+			deleteKeyword(keyword);
+		}
+	};
+
+	return (
+		<>
+			<S.KeywordItem tabIndex={0} role="button" onClick={onClick} isSelected={isSelected}>
+				<S.KeyName>{keyword}</S.KeyName>
+				<S.ActionsWrapper>
+					<S.Counter isZero={!count}>{count} used</S.Counter>
+					<S.IconWrapper>
+						<IconAction icon="delete" size="s" onClick={handleDeleteKeyword} />
+					</S.IconWrapper>
+				</S.ActionsWrapper>
+			</S.KeywordItem>
+			<DeleteKeywordsModal isOpen={isOpen} toggleModal={toggleModal} deleteKeyword={() => deleteKeyword(keyword)} />
+		</>
+	);
+};
+
+interface IKeywordItemProps {
+	keyword: string;
+	count: number;
+	isSelected: boolean;
+	onClick: () => void;
+	deleteKeyword: (keyword: string) => void;
+}
+
+export default KeywordItem;

package/src/components/KeywordsPreviewModal/KeywordItem/style.tsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+const IconWrapper = styled.div`
+  margin-left: ${(p) => p.theme.spacing.xs};
+  opacity: 0;
+`;
+
+const KeywordItem = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  min-height: ${(p) => p.theme.spacing.l};
+  border-radius: ${(p) => p.theme.radii.s};
+  cursor: pointer;
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  padding-left: ${(p) => p.theme.spacing.s};
+  padding-right: ${(p) => p.theme.spacing.xs};
+  align-items: center;
+  justify-content: space-between;
+  outline: ${(p) => (p.isSelected ? `2px solid ${p.theme.colors.interactive01}` : "none")};
+
+  &:before {
+    content: "";
+    border-radius: ${(p) => p.theme.radii.s};
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.1s;
+  }
+
+  &:hover {
+    ${IconWrapper} {
+      opacity: 1;
+    }
+  }
+
+  &:hover:before {
+    background-color: ${(p) => p.theme.colors.overlayHoverPrimary};
+    opacity: 1;
+  }
+`;
+
+const KeyName = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const Counter = styled.div<{ isZero: boolean }>`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => (p.isZero ? p.theme.colors.error : p.theme.colors.textLowEmphasis)};
+  font-weight: 600;
+  padding-left: ${(p) => p.theme.spacing.xxs};
+`;
+
+const ActionsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export { KeywordItem, KeyName, Counter, ActionsWrapper, IconWrapper };

package/src/components/KeywordsPreviewModal/atoms.tsx

@@ -0,0 +1,96 @@
+import { useState } from "react";
+
+import type { IModal } from "@ax/types";
+import { Modal, FieldsBehavior } from "@ax/components";
+
+import * as S from "./style";
+
+const AddKeywordsModal = (props: IAddKeywordsModal) => {
+	const { isOpen, toggleModal, addNewKeyword } = props;
+
+	const [value, setValue] = useState<string[]>([]);
+
+	const handleChange = (newValue: string[]) => setValue(newValue);
+
+	const handleClick = () => {
+		addNewKeyword(value);
+		setValue([]);
+		toggleModal();
+	};
+
+	const handleClose = () => {
+		isOpen && toggleModal();
+		setValue([]);
+	};
+
+	const mainModalAction = {
+		title: "Create keyword",
+		onClick: handleClick,
+		disabled: !value.length,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: handleClose };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={handleClose}
+			title="New keyword"
+			secondaryAction={secondaryModalAction}
+			mainAction={mainModalAction}
+			size="S"
+			height={282}
+		>
+			<S.ModalContent>
+				<FieldsBehavior
+					fieldType="TagsField"
+					name="keywords"
+					title="Keywords"
+					value={value}
+					onChange={handleChange}
+					placeholder="Type a keyword..."
+					helptext="Type a tag and press enter to create it"
+				/>
+			</S.ModalContent>
+		</Modal>
+	);
+};
+
+interface IAddKeywordsModal extends IModal {
+	addNewKeyword: (value: string[]) => void;
+}
+
+const DeleteKeywordsModal = (props: IDeleteKeywordsModal) => {
+	const { isOpen, toggleModal, deleteKeyword } = props;
+
+	const mainModalAction = {
+		title: "Delete keyword",
+		onClick: deleteKeyword,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="Delete keyword"
+			secondaryAction={secondaryModalAction}
+			mainAction={mainModalAction}
+			size="S"
+			height={240}
+		>
+			<S.ModalContent>
+				You are about to <strong>delete a keyword that is currently in use.</strong>
+				<br />
+				Please make sure you want to delete it.
+			</S.ModalContent>
+		</Modal>
+	);
+};
+
+interface IDeleteKeywordsModal extends IModal {
+	deleteKeyword: () => void;
+}
+
+export { AddKeywordsModal, DeleteKeywordsModal };

package/src/components/KeywordsPreviewModal/index.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "react";
+
+import { FloatingPanel, Icon, Toast } from "@ax/components";
+import { useModal, useToast } from "@ax/hooks";
+
+import { AddKeywordsModal } from "./atoms";
+import KeywordItem from "./KeywordItem";
+import { countKeywords } from "./utils";
+
+import * as S from "./style";
+
+const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
+	const { isOpen, browserRef, keywords, keywordsFilter, toggleModal, setKeywordsFilter, addKeywords, deleteKeyword } =
+		props;
+	const [keywordCounts, setKeywordCounts] = useState<Record<string, number>>({});
+	const [deletedKeyword, setDeletedKeyword] = useState<string | null>(null);
+	const { isOpen: isAddOpen, toggleModal: toggleAddModal } = useModal();
+	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
+
+	useEffect(() => {
+		if (isOpen && browserRef.current) {
+			const keywordCount = countKeywords(browserRef.current, keywords);
+			setKeywordCounts(keywordCount);
+		}
+	}, [isOpen, browserRef, keywords]);
+
+	const handleDeleteTag = () => setKeywordsFilter([]);
+
+	const handleAddTag = (tag: string) => () =>
+		keywordsFilter.includes(tag) ? setKeywordsFilter([]) : setKeywordsFilter([tag]);
+
+	useEffect(() => {
+		if (deletedKeyword && !keywords.includes(deletedKeyword)) {
+			toggleToast("1 Keyword deleted");
+			setDeletedKeyword(null);
+		}
+	}, [keywords, deletedKeyword, toggleToast]);
+
+	const handleDeleteKeyword = (value: string) => {
+		setDeletedKeyword(value);
+		deleteKeyword(value);
+	};
+
+	return (
+		<S.Wrapper>
+			<FloatingPanel title="Keywords" toggleModal={toggleModal} closeOnOutsideClick={false} isOpen={isOpen} width={358}>
+				{isOpen && (
+					<S.KeywordsWrapper>
+						{keywordsFilter.length > 0 && (
+							<S.FilterWrapper>
+								<S.FilterText>Show keyword:</S.FilterText>
+								<S.TagList>
+									{keywordsFilter.map((tag: string) => {
+										return <S.StyledTag key={tag} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
+									})}
+								</S.TagList>
+							</S.FilterWrapper>
+						)}
+						<S.KeywordsListWrapper>
+							{keywords.length === 0 && <S.StyledSummaryButton />}
+							{Object.keys(keywordCounts).map((key, index) => {
+								const isSelected = keywordsFilter.includes(key);
+								return (
+									<KeywordItem
+										keyword={key}
+										count={keywordCounts[key]}
+										isSelected={isSelected}
+										onClick={handleAddTag(key)}
+										deleteKeyword={handleDeleteKeyword}
+										key={`${key}-${index}`}
+									/>
+								);
+							})}
+							<S.AddKeywordButton onClick={toggleAddModal}>
+								<Icon name="add" size="16" />
+								Add new keyword
+							</S.AddKeywordButton>
+						</S.KeywordsListWrapper>
+					</S.KeywordsWrapper>
+				)}
+			</FloatingPanel>
+			<AddKeywordsModal isOpen={isAddOpen} toggleModal={toggleAddModal} addNewKeyword={addKeywords} />
+			{isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
+		</S.Wrapper>
+	);
+};
+
+interface IKeywordsPreviewProps {
+	isOpen: boolean;
+	browserRef: React.RefObject<HTMLDivElement>;
+	toggleModal: () => void;
+	keywords: string[];
+	keywordsFilter: string[];
+	setKeywordsFilter: (value: string[]) => void;
+	addKeywords: (value: string[]) => void;
+	deleteKeyword: (value: string) => void;
+}
+
+export default KeywordsPreviewModal;

package/src/components/KeywordsPreviewModal/style.tsx

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+
+import SummaryButton from "../Fields/SummaryButton";
+import Tag from "../Tag";
+
+const Wrapper = styled.div``;
+
+const KeywordsWrapper = styled.div`
+  padding: ${(p) => `${p.theme.spacing.m} ${p.theme.spacing.m} 80px ${p.theme.spacing.s}`};
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+    height: 100%;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(p) => p.theme.colors.iconNonActive};
+  }
+`;
+
+const KeywordsListWrapper = styled.div``;
+
+const FilterWrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  width: 100%;
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.xs}`};
+  align-items: center;
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const FilterText = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  flex-shrink: 0;
+`;
+
+const StyledTag = styled(Tag)`
+  margin-right: ${(p) => p.theme.spacing.xs};
+  margin-bottom: 0;
+`;
+
+const TagList = styled.div``;
+
+const AddKeywordButton = styled.button`
+  display: flex;
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.colors.interactive01};
+  min-height: 40px;
+  width: 100%;
+  border: ${(p) => `1px dashed ${p.theme.colors.interactive01}`};
+  border-radius: ${(p) => p.theme.radii.s};
+  align-items: center;
+  justify-content: center;
+  svg {
+    margin-right: ${(p) => p.theme.spacing.xxs};
+  }
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const StyledSummaryButton = styled(SummaryButton)`
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+export {
+	Wrapper,
+	KeywordsWrapper,
+	KeywordsListWrapper,
+	FilterWrapper,
+	FilterText,
+	StyledTag,
+	TagList,
+	AddKeywordButton,
+	ModalContent,
+	StyledSummaryButton,
+};

package/src/components/KeywordsPreviewModal/utils.tsx

@@ -0,0 +1,22 @@
+const countKeywords = (html: HTMLDivElement, keywords: string[]) => {
+	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
+	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
+
+	if (!frameContent) {
+		return {};
+	}
+
+	const htmlContent = frameContent.innerText.toLowerCase();
+	const keywordCounts: Record<string, number> = {};
+
+	keywords.forEach((keyword) => {
+		const lowerKeyword = keyword.toLowerCase();
+		const regex = new RegExp(lowerKeyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
+		const matches = htmlContent.match(regex);
+		keywordCounts[keyword] = matches ? matches.length : 0;
+	});
+
+	return keywordCounts;
+};
+
+export { countKeywords };

package/src/components/MainWrapper/AppBar/index.tsx

@@ -190,6 +190,7 @@ const AppBar = (props: IProps): JSX.Element => {
 							setSelectedTab={tabs.action}
 							isInAppBar={true}
 							inversed={inversed}
+							disabled={tabs.disabled}
 						/>
 					</S.TabsContent>
 				</S.WrapperTabs>
@@ -291,7 +292,13 @@ export interface IAppBarProps {
 	backLink?: boolean | string;
 	rightButton?: { label: string; disabled?: boolean; action: (e: any) => void };
 	rightLineButton?: { label: string; disabled?: boolean; action: (e: any) => void };
-	tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
+	tabs?: {
+		tabSet?: any;
+		icons?: { name: string; text: string }[];
+		selectedTab: string;
+		action: (e: any) => void;
+		disabled?: boolean;
+	};
 	downArrowMenu?: { displayed: boolean; options: any; button: any };
 	title: string;
 	subtitle?: string;

package/src/components/MainWrapper/index.tsx

@@ -38,7 +38,13 @@ export interface IWrapperProps {
 	fixedAppBar?: boolean;
 	additionalClass?: string;
 	downArrowMenu?: { displayed: boolean; options: any; button: any };
-	tabs?: { tabSet?: any; icons?: { name: string; text: string }[]; selectedTab: string; action: (e: any) => void };
+	tabs?: {
+		tabSet?: any;
+		icons?: { name: string; text: string }[];
+		selectedTab: string;
+		action: (e: any) => void;
+		disabled?: boolean;
+	};
 	pageStatus?: string;
 	language?: { locale: string; id: number | null } | null;
 	availableLanguages?: ILanguage[];

package/src/components/Notification/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Icon } from "@ax/components";
 import SubNotification from "./SubNotification";
 
@@ -45,7 +45,7 @@ const Notification = (props: INotificationProps): JSX.Element => {
 	const handleClick = () => (onClick ? onClick() : handleErrorClick());
 
 	const handleClose = () => {
-		resetError && resetError();
+		resetError?.();
 		setIsVisible(false);
 	};
 

package/src/components/PageFinder/index.tsx

@@ -120,7 +120,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 			if (isReqOk(response.status)) {
 				setState((state) => ({ ...state, items: response.data.items, totalItems: response.data.totalItems }));
 			} else {
-				console.log("Error en getAndSetItems");
+				console.error("Error en getAndSetItems");
 			}
 			setIsLoading(false);
 		};

package/src/components/ResizePanel/index.tsx

@@ -4,10 +4,10 @@ import ResizeHandle from "./ResizeHandle";
 
 import * as S from "./style";
 
-const MIN_WIDTH = 344;
+const MIN_WIDTH = 368;
 
 const ResizePanel = (props: IResizePanelProps): JSX.Element => {
-	const { leftPanel, rightPanel, fixed = true, full = false } = props;
+	const { leftPanel, rightPanel, fixed = true, full = false, disabled } = props;
 
 	const [rwidth, setRwidth] = useState(MIN_WIDTH);
 	const rightPanelRef = useRef<HTMLDivElement>(null);
@@ -44,7 +44,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 					leftPanel
 				)}
 			</S.LeftPanel>
-			<ResizeHandle onMouseMove={resize} />
+			{!disabled && <ResizeHandle onMouseMove={resize} />}
 			<S.RightPanel ref={rightPanelRef} data-testid="right-panel" style={{ width: rwidth ? `${rwidth}px` : "auto" }}>
 				{rightPanel}
 			</S.RightPanel>
@@ -57,6 +57,7 @@ export interface IResizePanelProps {
 	rightPanel: JSX.Element | JSX.Element[];
 	fixed?: boolean;
 	full?: boolean;
+	disabled?: boolean;
 }
 
 export default ResizePanel;

package/src/components/ResizePanel/style.tsx

@@ -11,7 +11,7 @@ const RightPanel = styled.section`
   position: relative;
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   flex-shrink: 0;
-  min-width: 344px;
+  min-width: 368px;
   max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
   flex-direction: column;
 `;

package/src/components/SearchField/style.tsx

@@ -1,7 +1,7 @@
-import { Button } from "@ax/components";
-
 import styled from "styled-components";
 
+import Button from "../Button";
+
 const Wrapper = styled.div`
   display: flex;
   position: relative;

package/src/components/SideModal/index.tsx

@@ -140,6 +140,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
 	const filteredOptions = options.options?.map((option) => {
 		const optionComponent = typeof option === "string" ? option : option.component;
+		const optionKey = typeof option === "string" ? option : (option.id ?? option.editorID ?? optionComponent);
 		const displayName = getDisplayName(optionComponent);
 		if (searchQuery.length > 0) {
 			const name = displayName.toLowerCase();
@@ -147,7 +148,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 			if (!name.includes(search)) return null;
 		}
 		return (
-			<SideModalOption option={option} handleClick={handleClick} key={optionComponent} theme={theme}>
+			<SideModalOption option={option} handleClick={handleClick} key={optionKey} theme={theme}>
 				{displayName}
 			</SideModalOption>
 		);

package/src/components/Tabs/index.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { Icon, Tooltip } from "@ax/components";
 
 import * as S from "./style";
 
 const Tabs = (props: ITabsProps): JSX.Element => {
-	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed } = props;
+	const { tabs, icons, active, setSelectedTab, isInAppBar, noMargins, inversed, disabled } = props;
 
 	useEffect(() => {
 		tabs && tabs.length === 1 && setSelectedTab(tabs[0]);
@@ -14,7 +14,10 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 		return (
 			<S.TabsRow isInAppBar={isInAppBar} noMargins={noMargins} data-testid="tabs-row">
 				{tabs.map((tab: any) => {
-					const handleClick = () => setSelectedTab(tab);
+					const handleClick = () => {
+						if (disabled) return;
+						setSelectedTab(tab);
+					};
 					return (
 						<S.TabItem
 							isInAppBar={isInAppBar}
@@ -22,6 +25,7 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 							active={tab === active}
 							onClick={handleClick}
 							data-testid="tab"
+							isDisabled={disabled}
 						>
 							{tab}
 						</S.TabItem>
@@ -35,13 +39,17 @@ const Tabs = (props: ITabsProps): JSX.Element => {
 		return (
 			<S.TabsRow icons={true} isInAppBar={isInAppBar} data-testid="icons-tabs-row">
 				{icons.map((tab: ITabIcon) => {
-					const handleClick = () => setSelectedTab(tab.name);
+					const handleClick = () => {
+						if (disabled) return;
+						setSelectedTab(tab.name);
+					};
 					return (
 						<S.TabItem
 							key={tab.name}
 							active={tab.name === active}
 							onClick={handleClick}
 							inversed={inversed}
+							isDisabled={disabled}
 							data-testid="icon-tab"
 						>
 							<S.TabIcon>
@@ -67,6 +75,7 @@ export interface ITabsProps {
 	setSelectedTab: any;
 	noMargins?: boolean;
 	inversed?: boolean;
+	disabled?: boolean;
 }
 
 export interface ITabIcon {

package/src/components/Tabs/style.tsx

@@ -8,15 +8,14 @@ const TabsRow = styled.div<{ icons?: boolean; isInAppBar?: boolean; noMargins?:
   height: ${(p) => (p.noMargins || p.isInAppBar ? "auto" : "100%")};
 `;
 
-const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean }>`
+const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?: boolean; isDisabled?: boolean }>`
   flex-grow: 1;
-  border: none;
-  border-bottom: 4px solid
-    ${(p) =>
-			!p.active ? "transparent" : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01};
   ${(p) => p.theme.textStyle.headingXS};
+  border: none;
+  border-bottom: ${(p) => (p.active ? "4px solid" : "none")};
+  border-color: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
-  cursor: ${(p) => (p.active ? "initial" : "pointer")};
+  cursor: ${(p) => (p.active || p.isDisabled ? "initial" : "pointer")};
   background: transparent;
   height: ${(p) => (p.isInAppBar ? "100%" : "48px")};
 
@@ -24,7 +23,7 @@ const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?
     color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.interactive01)};
     svg {
       path {
-        fill: ${(p) => (p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
+        fill: ${(p) => (p.isDisabled ? p.theme.color.interactiveDisabled : p.inversed ? p.theme.color.iconHighEmphasisInverse : p.theme.color.interactive01)};
       }
     }
   }
@@ -39,7 +38,7 @@ const TabItem = styled.button<{ active: boolean; isInAppBar?: boolean; inversed?
     height: ${(p) => p.theme.spacing.m};
     path {
       fill: ${(p) =>
-				!p.active
+				!p.active || p.isDisabled
 					? p.theme.color.interactiveDisabled
 					: p.inversed
 						? p.theme.color.iconHighEmphasisInverse