fictoan-react 0.44.0 → 0.45.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+### 0.45.0
+- Add support for defaultTabIndex props in `Tabs` component because by default it select first tab as active tab
+
 ### 0.44.0
 - Rename `style` prop for `Heading` and `Text` to `fontStyle` since `style` is a reserved
   prop name in React and causes the react/style-prop-object eslint rule to complain in any

package/dist/cjs/components/Tabs/Tabs.d.ts

@@ -9,6 +9,7 @@ export interface TabsCustomProps {
     tabs: TabType[];
     /** wrapper to render additional content inside the nav along with tab labels */
     additionalNavContentWrapper?: React.ReactNode;
+    defaultActiveTab?: string;
 }
 export declare type TabsElementType = HTMLDivElement;
 export declare type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;

package/dist/cjs/components/Tabs/Tabs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),a=require("../HRule/HRule.js"),l=require("../Typography/Text.js"),n=require("./Tabs.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../HRule/HRule.styled.js"),require("styled-components");var u=/*#__PURE__*/r(t);const s=u.default.forwardRef(((r,s)=>{var{tabs:i,additionalNavContentWrapper:d}=r,o=e.__rest(r,["tabs","additionalNavContentWrapper"]);const[c,f]=u.default.useState(i.length>0?i[0]:void 0),[m,y]=u.default.useState(!1),E=e=>{y(!0),setTimeout((()=>{y(!1),f(e)}),120)};return t.useEffect((()=>{if(i.length>0){const e=i.find((e=>e.key===(null==c?void 0:c.key)));E(e||i[0])}else f(void 0)}),[i]),u.default.createElement(e.Element,Object.assign({as:n.TabsStyled,ref:s},o),i.length>0&&c?u.default.createElement(u.default.Fragment,null,u.default.createElement("nav",null,u.default.createElement("ul",{className:"tab-labels-list"},i.map((e=>u.default.createElement("li",{key:e.key},u.default.createElement(l.Text,{className:`is-clickable ${e.key===c.key?"is-active":""} }`,onClick:()=>E(e),marginBottom:"none"},e.label))))),d&&u.default.createElement(u.default.Fragment,null,d)),u.default.createElement(a.HRule,{kind:"secondary",marginTop:"none",marginBottom:"micro"}),u.default.createElement(e.Element,{as:"div",className:"tabs-content "+(m?"exiting":"")},c.content)):u.default.createElement(u.default.Fragment,null))}));exports.Tabs=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../external/Element.js"),t=require("react"),a=require("../HRule/HRule.js"),l=require("../Typography/Text.js"),n=require("./Tabs.styled.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../HRule/HRule.styled.js"),require("styled-components");var u=/*#__PURE__*/r(t);const s=u.default.forwardRef(((r,s)=>{var{tabs:d,additionalNavContentWrapper:i,defaultActiveTab:c}=r,o=e.__rest(r,["tabs","additionalNavContentWrapper","defaultActiveTab"]);const f=d.findIndex((e=>e.key===c)),m=f>-1?f:0,[y,b]=u.default.useState(d.length>0?d[m]:void 0),[v,E]=u.default.useState(!1),p=e=>{E(!0),setTimeout((()=>{E(!1),b(e)}),120)};return t.useEffect((()=>{if(d.length>0){const e=d.find((e=>e.key===(null==y?void 0:y.key)));p(e||d[0])}else b(void 0)}),[d]),u.default.createElement(e.Element,Object.assign({as:n.TabsStyled,ref:s},o),d.length>0&&y?u.default.createElement(u.default.Fragment,null,u.default.createElement("nav",null,u.default.createElement("ul",{className:"tab-labels-list"},d.map((e=>u.default.createElement("li",{key:e.key},u.default.createElement(l.Text,{className:`is-clickable ${e.key===y.key?"is-active":""} }`,onClick:()=>p(e),marginBottom:"none"},e.label))))),i&&u.default.createElement(u.default.Fragment,null,i)),u.default.createElement(a.HRule,{kind:"secondary",marginTop:"none",marginBottom:"micro"}),u.default.createElement(e.Element,{as:"div",className:"tabs-content "+(v?"exiting":"")},y.content)):u.default.createElement(u.default.Fragment,null))}));exports.Tabs=s;
 //# sourceMappingURL=Tabs.js.map

package/dist/cjs/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n    key     : string;\n    label   : string;\n    content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n    tabs : TabType[];\n    /** wrapper to render additional content inside the nav along with tab labels */\n    additionalNavContentWrapper?: React.ReactNode; \n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    ({ tabs, additionalNavContentWrapper, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n        const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[0] : undefined);\n        const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n        const handleTabChange = (tab: TabType) => {\n            setIsExiting(true);\n            setTimeout(() => {\n                setIsExiting(false);\n                setActiveTab(tab);\n            }, 120);\n        };\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n                if (matchingTab) {\n                    handleTabChange(matchingTab);\n                } else {\n                    handleTabChange(tabs[0]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [tabs]);\n\n        return (\n            <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n                {tabs.length > 0 && activeTab ? (\n                    <>\n                        <nav>\n                            <ul className=\"tab-labels-list\">\n                                {tabs.map((tab) => (\n                                    <li key={tab.key}>\n                                        <Text\n                                            className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"} }`}\n                                            onClick={() => handleTabChange(tab)}\n                                            marginBottom=\"none\"\n                                        >\n                                            {tab.label}\n                                        </Text>\n                                    </li>\n                                ))}\n                            </ul>\n                            {additionalNavContentWrapper && <>{additionalNavContentWrapper}</>}\n                        </nav>\n                        <HRule kind=\"secondary\" marginTop=\"none\" marginBottom=\"micro\" />\n                        <Element as=\"div\" className={`tabs-content ${isExiting ? \"exiting\" : \"\"}`}>\n                            {activeTab.content}\n                        </Element>\n                    </>\n                ) : (\n                    <></>\n                )}\n            </Element>\n        );\n    }\n);\n"],"names":["Tabs","React","forwardRef","_a","ref","tabs","additionalNavContentWrapper","props","activeTab","setActiveTab","useState","length","undefined","isExiting","setIsExiting","handleTabChange","tab","setTimeout","useEffect","matchingTab","find","key","Element","as","TabsStyled","className","map","Text","onClick","marginBottom","label","HRule","kind","marginTop","content"],"mappings":"yYA0BaA,EAAOC,UAAMC,YACtB,CAACC,EAA4DC,SAA5DC,KAAEA,EAAFC,4BAAQA,KAAgCC,aAAxC,8CACUC,EAAWC,GAAgBR,UAAMS,SAA8BL,EAAKM,OAAS,EAAIN,EAAK,QAAKO,IAC3FC,EAAWC,GAAgBb,UAAMS,UAAkB,GAEpDK,EAAmBC,IACrBF,GAAa,GACbG,YAAW,KACPH,GAAa,GACbL,EAAaO,KACd,aAGPE,aAAU,QACFb,EAAKM,OAAS,EAAG,OACXQ,EAAcd,EAAKe,MAAMJ,GAAQA,EAAIK,OAAQb,MAAAA,SAAAA,EAAWa,OAE1DN,EADAI,GAGgBd,EAAK,SAGzBI,OAAaG,KAElB,CAACP,IAGAJ,wBAACqB,yBAAyBC,GAAIC,aAAYpB,IAAKA,GAASG,GACnDF,EAAKM,OAAS,GAAKH,EAChBP,gDACIA,mCACIA,8BAAIwB,UAAU,mBACTpB,EAAKqB,KAAKV,GACPf,8BAAIoB,IAAKL,EAAIK,KACTpB,wBAAC0B,QACGF,0BAA2BT,EAAIK,MAAQb,EAAUa,IAAM,YAAc,OACrEO,QAAS,IAAMb,EAAgBC,GAC/Ba,aAAa,QAEZb,EAAIc,WAKpBxB,GAA+BL,gDAAGK,IAEvCL,wBAAC8B,SAAMC,KAAK,YAAYC,UAAU,OAAOJ,aAAa,UACtD5B,wBAACqB,WAAQC,GAAG,MAAME,2BAA2BZ,EAAY,UAAY,KAChEL,EAAU0B,UAInBjC"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n    key     : string;\n    label   : string;\n    content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n    tabs : TabType[];\n    /** wrapper to render additional content inside the nav along with tab labels */\n    additionalNavContentWrapper?: React.ReactNode; \n    defaultActiveTab?: string;\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    ({ tabs, additionalNavContentWrapper, defaultActiveTab, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n        const index = tabs.findIndex(tab => tab.key === defaultActiveTab);\n        const defaultTabIndex = index > -1 ? index : 0;\n        const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[defaultTabIndex] : undefined);\n        const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n        const handleTabChange = (tab: TabType) => {\n            setIsExiting(true);\n            setTimeout(() => {\n                setIsExiting(false);\n                setActiveTab(tab);\n            }, 120);\n        };\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n                if (matchingTab) {\n                    handleTabChange(matchingTab);\n                } else {\n                    handleTabChange(tabs[0]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [tabs]);\n\n        return (\n            <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n                {tabs.length > 0 && activeTab ? (\n                    <>\n                        <nav>\n                            <ul className=\"tab-labels-list\">\n                                {tabs.map((tab) => (\n                                    <li key={tab.key}>\n                                        <Text\n                                            className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"} }`}\n                                            onClick={() => handleTabChange(tab)}\n                                            marginBottom=\"none\"\n                                        >\n                                            {tab.label}\n                                        </Text>\n                                    </li>\n                                ))}\n                            </ul>\n                            {additionalNavContentWrapper && <>{additionalNavContentWrapper}</>}\n                        </nav>\n                        <HRule kind=\"secondary\" marginTop=\"none\" marginBottom=\"micro\" />\n                        <Element as=\"div\" className={`tabs-content ${isExiting ? \"exiting\" : \"\"}`}>\n                            {activeTab.content}\n                        </Element>\n                    </>\n                ) : (\n                    <></>\n                )}\n            </Element>\n        );\n    }\n);\n"],"names":["Tabs","React","forwardRef","_a","ref","tabs","additionalNavContentWrapper","defaultActiveTab","props","index","findIndex","tab","key","defaultTabIndex","activeTab","setActiveTab","useState","length","undefined","isExiting","setIsExiting","handleTabChange","setTimeout","useEffect","matchingTab","find","Element","as","TabsStyled","className","map","Text","onClick","marginBottom","label","HRule","kind","marginTop","content"],"mappings":"yYA2BaA,EAAOC,UAAMC,YACtB,CAACC,EAA8EC,SAA9EC,KAAEA,EAAFC,4BAAQA,EAARC,iBAAqCA,KAAqBC,aAA1D,iEACSC,EAAQJ,EAAKK,WAAUC,GAAOA,EAAIC,MAAQL,IAC1CM,EAAkBJ,GAAS,EAAIA,EAAQ,GACtCK,EAAWC,GAAgBd,UAAMe,SAA8BX,EAAKY,OAAS,EAAIZ,EAAKQ,QAAmBK,IACzGC,EAAWC,GAAgBnB,UAAMe,UAAkB,GAEpDK,EAAmBV,IACrBS,GAAa,GACbE,YAAW,KACPF,GAAa,GACbL,EAAaJ,KACd,aAGPY,aAAU,QACFlB,EAAKY,OAAS,EAAG,OACXO,EAAcnB,EAAKoB,MAAMd,GAAQA,EAAIC,OAAQE,MAAAA,SAAAA,EAAWF,OAE1DS,EADAG,GAGgBnB,EAAK,SAGzBU,OAAaG,KAElB,CAACb,IAGAJ,wBAACyB,yBAAyBC,GAAIC,aAAYxB,IAAKA,GAASI,GACnDH,EAAKY,OAAS,GAAKH,EAChBb,gDACIA,mCACIA,8BAAI4B,UAAU,mBACTxB,EAAKyB,KAAKnB,GACPV,8BAAIW,IAAKD,EAAIC,KACTX,wBAAC8B,QACGF,0BAA2BlB,EAAIC,MAAQE,EAAUF,IAAM,YAAc,OACrEoB,QAAS,IAAMX,EAAgBV,GAC/BsB,aAAa,QAEZtB,EAAIuB,WAKpB5B,GAA+BL,gDAAGK,IAEvCL,wBAACkC,SAAMC,KAAK,YAAYC,UAAU,OAAOJ,aAAa,UACtDhC,wBAACyB,WAAQC,GAAG,MAAME,2BAA2BV,EAAY,UAAY,KAChEL,EAAUwB,UAInBrC"}

package/dist/es/components/Tabs/Tabs.d.ts

@@ -9,6 +9,7 @@ export interface TabsCustomProps {
     tabs: TabType[];
     /** wrapper to render additional content inside the nav along with tab labels */
     additionalNavContentWrapper?: React.ReactNode;
+    defaultActiveTab?: string;
 }
 export declare type TabsElementType = HTMLDivElement;
 export declare type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;

package/dist/es/components/Tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{_ as e,E as t}from"../../external/Element.js";import a,{useEffect as n}from"react";import{HRule as l}from"../HRule/HRule.js";import{Text as r}from"../Typography/Text.js";import{TabsStyled as o}from"./Tabs.styled.js";import"../HRule/HRule.styled.js";import"styled-components";const m=/*#__PURE__*/a.forwardRef(((m,s)=>{var{tabs:i,additionalNavContentWrapper:c}=m,p=e(m,["tabs","additionalNavContentWrapper"]);const[d,u]=a.useState(i.length>0?i[0]:void 0),[g,y]=a.useState(!1),E=e=>{y(!0),setTimeout((()=>{y(!1),u(e)}),120)};return n((()=>{if(i.length>0){const e=i.find((e=>e.key===(null==d?void 0:d.key)));E(e||i[0])}else u(void 0)}),[i]),/*#__PURE__*/a.createElement(t,Object.assign({as:o,ref:s},p),i.length>0&&d?/*#__PURE__*/a.createElement(a.Fragment,null,/*#__PURE__*/a.createElement("nav",null,/*#__PURE__*/a.createElement("ul",{className:"tab-labels-list"},i.map((e=>/*#__PURE__*/a.createElement("li",{key:e.key},/*#__PURE__*/a.createElement(r,{className:`is-clickable ${e.key===d.key?"is-active":""} }`,onClick:()=>E(e),marginBottom:"none"},e.label))))),c&&/*#__PURE__*/a.createElement(a.Fragment,null,c)),/*#__PURE__*/a.createElement(l,{kind:"secondary",marginTop:"none",marginBottom:"micro"}),/*#__PURE__*/a.createElement(t,{as:"div",className:"tabs-content "+(g?"exiting":"")},d.content)):/*#__PURE__*/a.createElement(a.Fragment,null))}));export{m as Tabs};
+import{_ as e,E as t}from"../../external/Element.js";import a,{useEffect as n}from"react";import{HRule as l}from"../HRule/HRule.js";import{Text as r}from"../Typography/Text.js";import{TabsStyled as o}from"./Tabs.styled.js";import"../HRule/HRule.styled.js";import"styled-components";const m=/*#__PURE__*/a.forwardRef(((m,s)=>{var{tabs:i,additionalNavContentWrapper:c,defaultActiveTab:d}=m,p=e(m,["tabs","additionalNavContentWrapper","defaultActiveTab"]);const u=i.findIndex((e=>e.key===d)),f=u>-1?u:0,[y,g]=a.useState(i.length>0?i[f]:void 0),[E,b]=a.useState(!1),v=e=>{b(!0),setTimeout((()=>{b(!1),g(e)}),120)};return n((()=>{if(i.length>0){const e=i.find((e=>e.key===(null==y?void 0:y.key)));v(e||i[0])}else g(void 0)}),[i]),/*#__PURE__*/a.createElement(t,Object.assign({as:o,ref:s},p),i.length>0&&y?/*#__PURE__*/a.createElement(a.Fragment,null,/*#__PURE__*/a.createElement("nav",null,/*#__PURE__*/a.createElement("ul",{className:"tab-labels-list"},i.map((e=>/*#__PURE__*/a.createElement("li",{key:e.key},/*#__PURE__*/a.createElement(r,{className:`is-clickable ${e.key===y.key?"is-active":""} }`,onClick:()=>v(e),marginBottom:"none"},e.label))))),c&&/*#__PURE__*/a.createElement(a.Fragment,null,c)),/*#__PURE__*/a.createElement(l,{kind:"secondary",marginTop:"none",marginBottom:"micro"}),/*#__PURE__*/a.createElement(t,{as:"div",className:"tabs-content "+(E?"exiting":"")},y.content)):/*#__PURE__*/a.createElement(a.Fragment,null))}));export{m as Tabs};
 //# sourceMappingURL=Tabs.js.map

package/dist/es/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n    key     : string;\n    label   : string;\n    content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n    tabs : TabType[];\n    /** wrapper to render additional content inside the nav along with tab labels */\n    additionalNavContentWrapper?: React.ReactNode; \n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    ({ tabs, additionalNavContentWrapper, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n        const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[0] : undefined);\n        const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n        const handleTabChange = (tab: TabType) => {\n            setIsExiting(true);\n            setTimeout(() => {\n                setIsExiting(false);\n                setActiveTab(tab);\n            }, 120);\n        };\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n                if (matchingTab) {\n                    handleTabChange(matchingTab);\n                } else {\n                    handleTabChange(tabs[0]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [tabs]);\n\n        return (\n            <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n                {tabs.length > 0 && activeTab ? (\n                    <>\n                        <nav>\n                            <ul className=\"tab-labels-list\">\n                                {tabs.map((tab) => (\n                                    <li key={tab.key}>\n                                        <Text\n                                            className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"} }`}\n                                            onClick={() => handleTabChange(tab)}\n                                            marginBottom=\"none\"\n                                        >\n                                            {tab.label}\n                                        </Text>\n                                    </li>\n                                ))}\n                            </ul>\n                            {additionalNavContentWrapper && <>{additionalNavContentWrapper}</>}\n                        </nav>\n                        <HRule kind=\"secondary\" marginTop=\"none\" marginBottom=\"micro\" />\n                        <Element as=\"div\" className={`tabs-content ${isExiting ? \"exiting\" : \"\"}`}>\n                            {activeTab.content}\n                        </Element>\n                    </>\n                ) : (\n                    <></>\n                )}\n            </Element>\n        );\n    }\n);\n"],"names":["Tabs","React","forwardRef","_a","ref","tabs","additionalNavContentWrapper","props","activeTab","setActiveTab","useState","length","undefined","isExiting","setIsExiting","handleTabChange","tab","setTimeout","useEffect","matchingTab","find","key","Element","as","TabsStyled","className","map","Text","onClick","marginBottom","label","HRule","kind","marginTop","content"],"mappings":"gSA0BaA,eAAOC,EAAMC,YACtB,CAACC,EAA4DC,SAA5DC,KAAEA,EAAFC,4BAAQA,KAAgCC,MAAxC,8CACUC,EAAWC,GAAgBR,EAAMS,SAA8BL,EAAKM,OAAS,EAAIN,EAAK,QAAKO,IAC3FC,EAAWC,GAAgBb,EAAMS,UAAkB,GAEpDK,EAAmBC,IACrBF,GAAa,GACbG,YAAW,KACPH,GAAa,GACbL,EAAaO,KACd,aAGPE,GAAU,QACFb,EAAKM,OAAS,EAAG,OACXQ,EAAcd,EAAKe,MAAMJ,GAAQA,EAAIK,OAAQb,MAAAA,SAAAA,EAAWa,OAE1DN,EADAI,GAGgBd,EAAK,SAGzBI,OAAaG,KAElB,CAACP,iBAGAJ,gBAACqB,iBAAyBC,GAAIC,EAAYpB,IAAKA,GAASG,GACnDF,EAAKM,OAAS,GAAKH,eAChBP,6CACIA,wCACIA,sBAAIwB,UAAU,mBACTpB,EAAKqB,KAAKV,gBACPf,sBAAIoB,IAAKL,EAAIK,kBACTpB,gBAAC0B,GACGF,0BAA2BT,EAAIK,MAAQb,EAAUa,IAAM,YAAc,OACrEO,QAAS,IAAMb,EAAgBC,GAC/Ba,aAAa,QAEZb,EAAIc,WAKpBxB,gBAA+BL,gCAAGK,iBAEvCL,gBAAC8B,GAAMC,KAAK,YAAYC,UAAU,OAAOJ,aAAa,uBACtD5B,gBAACqB,GAAQC,GAAG,MAAME,2BAA2BZ,EAAY,UAAY,KAChEL,EAAU0B,uBAInBjC"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\n\nimport { Element } from \"../Element/Element\";\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { HRule } from \"../HRule/HRule\";\nimport { Text } from \"../Typography/Text\";\n\nimport { TabsStyled } from \"./Tabs.styled\";\n\n// prettier-ignore\ninterface TabType {\n    key     : string;\n    label   : string;\n    content : React.ReactNode;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n    tabs : TabType[];\n    /** wrapper to render additional content inside the nav along with tab labels */\n    additionalNavContentWrapper?: React.ReactNode; \n    defaultActiveTab?: string;\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    ({ tabs, additionalNavContentWrapper, defaultActiveTab, ...props }: TabsProps, ref: React.Ref<TabsElementType>) => {\n        const index = tabs.findIndex(tab => tab.key === defaultActiveTab);\n        const defaultTabIndex = index > -1 ? index : 0;\n        const [activeTab, setActiveTab] = React.useState<TabType | undefined>(tabs.length > 0 ? tabs[defaultTabIndex] : undefined);\n        const [isExiting, setIsExiting] = React.useState<boolean>(false);\n\n        const handleTabChange = (tab: TabType) => {\n            setIsExiting(true);\n            setTimeout(() => {\n                setIsExiting(false);\n                setActiveTab(tab);\n            }, 120);\n        };\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                const matchingTab = tabs.find((tab) => tab.key === activeTab?.key);\n                if (matchingTab) {\n                    handleTabChange(matchingTab);\n                } else {\n                    handleTabChange(tabs[0]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [tabs]);\n\n        return (\n            <Element<TabsElementType> as={TabsStyled} ref={ref} {...props}>\n                {tabs.length > 0 && activeTab ? (\n                    <>\n                        <nav>\n                            <ul className=\"tab-labels-list\">\n                                {tabs.map((tab) => (\n                                    <li key={tab.key}>\n                                        <Text\n                                            className={`is-clickable ${tab.key === activeTab.key ? \"is-active\" : \"\"} }`}\n                                            onClick={() => handleTabChange(tab)}\n                                            marginBottom=\"none\"\n                                        >\n                                            {tab.label}\n                                        </Text>\n                                    </li>\n                                ))}\n                            </ul>\n                            {additionalNavContentWrapper && <>{additionalNavContentWrapper}</>}\n                        </nav>\n                        <HRule kind=\"secondary\" marginTop=\"none\" marginBottom=\"micro\" />\n                        <Element as=\"div\" className={`tabs-content ${isExiting ? \"exiting\" : \"\"}`}>\n                            {activeTab.content}\n                        </Element>\n                    </>\n                ) : (\n                    <></>\n                )}\n            </Element>\n        );\n    }\n);\n"],"names":["Tabs","React","forwardRef","_a","ref","tabs","additionalNavContentWrapper","defaultActiveTab","props","index","findIndex","tab","key","defaultTabIndex","activeTab","setActiveTab","useState","length","undefined","isExiting","setIsExiting","handleTabChange","setTimeout","useEffect","matchingTab","find","Element","as","TabsStyled","className","map","Text","onClick","marginBottom","label","HRule","kind","marginTop","content"],"mappings":"gSA2BaA,eAAOC,EAAMC,YACtB,CAACC,EAA8EC,SAA9EC,KAAEA,EAAFC,4BAAQA,EAARC,iBAAqCA,KAAqBC,MAA1D,iEACSC,EAAQJ,EAAKK,WAAUC,GAAOA,EAAIC,MAAQL,IAC1CM,EAAkBJ,GAAS,EAAIA,EAAQ,GACtCK,EAAWC,GAAgBd,EAAMe,SAA8BX,EAAKY,OAAS,EAAIZ,EAAKQ,QAAmBK,IACzGC,EAAWC,GAAgBnB,EAAMe,UAAkB,GAEpDK,EAAmBV,IACrBS,GAAa,GACbE,YAAW,KACPF,GAAa,GACbL,EAAaJ,KACd,aAGPY,GAAU,QACFlB,EAAKY,OAAS,EAAG,OACXO,EAAcnB,EAAKoB,MAAMd,GAAQA,EAAIC,OAAQE,MAAAA,SAAAA,EAAWF,OAE1DS,EADAG,GAGgBnB,EAAK,SAGzBU,OAAaG,KAElB,CAACb,iBAGAJ,gBAACyB,iBAAyBC,GAAIC,EAAYxB,IAAKA,GAASI,GACnDH,EAAKY,OAAS,GAAKH,eAChBb,6CACIA,wCACIA,sBAAI4B,UAAU,mBACTxB,EAAKyB,KAAKnB,gBACPV,sBAAIW,IAAKD,EAAIC,kBACTX,gBAAC8B,GACGF,0BAA2BlB,EAAIC,MAAQE,EAAUF,IAAM,YAAc,OACrEoB,QAAS,IAAMX,EAAgBV,GAC/BsB,aAAa,QAEZtB,EAAIuB,WAKpB5B,gBAA+BL,gCAAGK,iBAEvCL,gBAACkC,GAAMC,KAAK,YAAYC,UAAU,OAAOJ,aAAa,uBACtDhC,gBAACyB,GAAQC,GAAG,MAAME,2BAA2BV,EAAY,UAAY,KAChEL,EAAUwB,uBAInBrC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "0.44.0",
+    "version": "0.45.0",
     "private": false,
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.js",