npm - @neo4j-ndl/react - Versions diffs - 4.21.1 → 4.21.2-alpha.585cb7c.16.1 - Mend

@neo4j-ndl/react 4.21.1 → 4.21.2-alpha.585cb7c.16.1

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 (155) hide show

package/lib/cjs/side-navigation/stories/side-nav-secondary.story.js CHANGED Viewed

@@ -29,7 +29,7 @@ const Component = () => {
     const [active, setActive] = (0, react_2.useState)('nav-item-8');
     const [secondaryActive, setSecondaryActive] = (0, react_2.useState)('beginner');
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), ariaLabel: "Main side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsxs)(react_1.SideNavigation.CategoryItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active), children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), (0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: true, shouldOverlayOnInteraction: false, expandedWidth: 220, ariaLabel: "Secondary side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "Category Header" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-1', onClick: () => setSecondaryActive('secondary-nav-item-1') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-2', onClick: () => setSecondaryActive('secondary-nav-item-2') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-3', onClick: () => setSecondaryActive('secondary-nav-item-3') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-4', onClick: () => setSecondaryActive('secondary-nav-item-4') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-5', onClick: () => setSecondaryActive('secondary-nav-item-5') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "Category Header" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-6', onClick: () => setSecondaryActive('secondary-nav-item-6') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-7', onClick: () => setSecondaryActive('secondary-nav-item-7') }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-full n-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: "Secondary Side Nav" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "If a page requires its own navigation, you can use a secondary side nav. The secondary side nav is always expanded and does not have a pin button." })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: isExpanded, shouldOverlayOnInteraction: true, onPinButtonClick: () => setIsExpanded(!isExpanded), ariaLabel: "Main side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.HomeIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-1', onClick: () => setActive('nav-item-1') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.CodeBracketIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-2', onClick: () => setActive('nav-item-2') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ServerIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-3', onClick: () => setActive('nav-item-3') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsxs)(react_1.SideNavigation.CategoryItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.WrenchScrewdriverIconOutline, {}), label: "Category Item", isActive: ['nav-item-4', 'nav-item-5'].includes(active), children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-4', onClick: () => setActive('nav-item-4') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), label: "Nested Nav Item", isActive: active === 'nav-item-5', onClick: () => setActive('nav-item-5') }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.ChartBarIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-6', onClick: () => setActive('nav-item-6') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.Cog6ToothIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-7', onClick: () => setActive('nav-item-7') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.AcademicCapIconOutline, {}), label: "Nav Item", isActive: active === 'nav-item-8', onClick: () => setActive('nav-item-8') }) })] }), (0, jsx_runtime_1.jsxs)(react_1.SideNavigation, { isExpanded: true, shouldOverlayOnInteraction: false, expandedWidth: 220, ariaLabel: "Secondary side navigation", children: [(0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "Category Header" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-1', onClick: () => setSecondaryActive('secondary-nav-item-1') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-2', onClick: () => setSecondaryActive('secondary-nav-item-2') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-3', onClick: () => setSecondaryActive('secondary-nav-item-3') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-4', onClick: () => setSecondaryActive('secondary-nav-item-4') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", isActive: secondaryActive === 'secondary-nav-item-5', onClick: () => setSecondaryActive('secondary-nav-item-5') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.CategoryHeader, { children: "Category Header" }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-6', onClick: () => setSecondaryActive('secondary-nav-item-6') }) }), (0, jsx_runtime_1.jsx)(react_1.SideNavigation.ListItem, { children: (0, jsx_runtime_1.jsx)(react_1.SideNavigation.NavItem, { label: "Secondary Nav Item", icon: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isActive: secondaryActive === 'secondary-nav-item-7', onClick: () => setSecondaryActive('secondary-nav-item-7') }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-full n-w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Secondary Side Nav" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "If a page requires its own navigation, you can use a secondary side nav. The secondary side nav is always expanded and does not have a pin button." })] }) }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=side-nav-secondary.story.js.map

package/lib/cjs/side-navigation/stories/side-nav-secondary.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"side-nav-secondary.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-secondary.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string>('nav-item-8');\n const [secondaryActive, setSecondaryActive] = useState<string>('beginner');\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden\">\n <SideNavigation\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active)}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <SideNavigation\n isExpanded={true}\n shouldOverlayOnInteraction={false}\n expandedWidth={220}\n ariaLabel=\"Secondary side navigation\"\n >\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-1'}\n onClick={() => setSecondaryActive('secondary-nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-2'}\n onClick={() => setSecondaryActive('secondary-nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-3'}\n onClick={() => setSecondaryActive('secondary-nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-4'}\n onClick={() => setSecondaryActive('secondary-nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-5'}\n onClick={() => setSecondaryActive('secondary-nav-item-5')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-6'}\n onClick={() => setSecondaryActive('secondary-nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-7'}\n onClick={() => setSecondaryActive('secondary-nav-item-7')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"n-h-full n-w-full\">\n <div className=\"n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto\">\n <div className=\"n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center\">\n <Typography variant=\"title-4\">Secondary Side Nav</Typography>\n <Typography variant=\"body-medium\">\n If a page requires its own navigation, you can use a secondary\n side nav. The secondary side nav is always expanded and does not\n have a pin button.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"side-nav-secondary.story.js","sourceRoot":"","sources":["../../../../src/side-navigation/stories/side-nav-secondary.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { SideNavigation, Typography } from '@neo4j-ndl/react';\nimport {\n AcademicCapIconOutline,\n ChartBarIconOutline,\n CodeBracketIconOutline,\n Cog6ToothIconOutline,\n HomeIconOutline,\n MagnifyingGlassIconOutline,\n ServerIconOutline,\n WrenchScrewdriverIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [active, setActive] = useState<string>('nav-item-8');\n const [secondaryActive, setSecondaryActive] = useState<string>('beginner');\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-bg-neutral-bg-default n-overflow-hidden\">\n <SideNavigation\n isExpanded={isExpanded}\n shouldOverlayOnInteraction={true}\n onPinButtonClick={() => setIsExpanded(!isExpanded)}\n ariaLabel=\"Main side navigation\"\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<HomeIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-1'}\n onClick={() => setActive('nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<CodeBracketIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-2'}\n onClick={() => setActive('nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ServerIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-3'}\n onClick={() => setActive('nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.CategoryItem\n icon={<WrenchScrewdriverIconOutline />}\n label=\"Category Item\"\n isActive={['nav-item-4', 'nav-item-5'].includes(active)}\n >\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-4'}\n onClick={() => setActive('nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<MagnifyingGlassIconOutline />}\n label=\"Nested Nav Item\"\n isActive={active === 'nav-item-5'}\n onClick={() => setActive('nav-item-5')}\n />\n </SideNavigation.ListItem>\n </SideNavigation.CategoryItem>\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<ChartBarIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-6'}\n onClick={() => setActive('nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<Cog6ToothIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-7'}\n onClick={() => setActive('nav-item-7')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.Divider />\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n icon={<AcademicCapIconOutline />}\n label=\"Nav Item\"\n isActive={active === 'nav-item-8'}\n onClick={() => setActive('nav-item-8')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <SideNavigation\n isExpanded={true}\n shouldOverlayOnInteraction={false}\n expandedWidth={220}\n ariaLabel=\"Secondary side navigation\"\n >\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-1'}\n onClick={() => setSecondaryActive('secondary-nav-item-1')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-2'}\n onClick={() => setSecondaryActive('secondary-nav-item-2')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-3'}\n onClick={() => setSecondaryActive('secondary-nav-item-3')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-4'}\n onClick={() => setSecondaryActive('secondary-nav-item-4')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n isActive={secondaryActive === 'secondary-nav-item-5'}\n onClick={() => setSecondaryActive('secondary-nav-item-5')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.CategoryHeader>\n Category Header\n </SideNavigation.CategoryHeader>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-6'}\n onClick={() => setSecondaryActive('secondary-nav-item-6')}\n />\n </SideNavigation.ListItem>\n <SideNavigation.ListItem>\n <SideNavigation.NavItem\n label=\"Secondary Nav Item\"\n icon={<MagnifyingGlassIconOutline />}\n isActive={secondaryActive === 'secondary-nav-item-7'}\n onClick={() => setSecondaryActive('secondary-nav-item-7')}\n />\n </SideNavigation.ListItem>\n </SideNavigation>\n <div className=\"n-h-full n-w-full\">\n <div className=\"n-flex n-flex-col n-p-8 n-w-full n-max-w-[1024px] n-mx-auto\">\n <div className=\"n-flex n-flex-col n-gap-token-8 n-bg-neutral-bg-weak n-p-token-32 n-rounded-lg n-items-center n-justify-center\">\n <Typography variant=\"title-3\">Secondary Side Nav</Typography>\n <Typography variant=\"body-medium\">\n If a page requires its own navigation, you can use a secondary\n side nav. The secondary side nav is always expanded and does not\n have a pin button.\n </Typography>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/skeleton/stories/skeleton-full-example.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "n-bg-neutral-bg-default n-flex n-items-center n-justify-center n-h-36 n-rounded-2xl n-mb-4", children: (0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_5044_6981)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.5 33.75C1.5 35.1424 2.05312 36.4777 3.03769 37.4623C4.02226 38.4469 5.35761 39 6.75 39C8.14239 39 9.47774 38.4469 10.4623 37.4623C11.4469 36.4777 12 35.1424 12 33.75C12 32.3576 11.4469 31.0223 10.4623 30.0377C9.47774 29.0531 8.14239 28.5 6.75 28.5C5.35761 28.5 4.02226 29.0531 3.03769 30.0377C2.05312 31.0223 1.5 32.3576 1.5 33.75V33.75Z", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M36 33.75C36 34.4394 36.1358 35.1221 36.3996 35.7591C36.6635 36.396 37.0502 36.9748 37.5377 37.4623C38.0252 37.9498 38.604 38.3365 39.2409 38.6004C39.8779 38.8642 40.5606 39 41.25 39C41.9394 39 42.6221 38.8642 43.2591 38.6004C43.896 38.3365 44.4748 37.9498 44.9623 37.4623C45.4498 36.9748 45.8365 36.396 46.1004 35.7591C46.3642 35.1221 46.5 34.4394 46.5 33.75C46.5 33.0606 46.3642 32.3779 46.1004 31.7409C45.8365 31.104 45.4498 30.5252 44.9623 30.0377C44.4748 29.5502 43.896 29.1635 43.2591 28.8996C42.6221 28.6358 41.9394 28.5 41.25 28.5C40.5606 28.5 39.8779 28.6358 39.2409 28.8996C38.604 29.1635 38.0252 29.5502 37.5377 30.0377C37.0502 30.5252 36.6635 31.104 36.3996 31.7409C36.1358 32.3779 36 33.0606 36 33.75Z", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.75 33.75C18.75 35.1424 19.3031 36.4777 20.2877 37.4623C21.2723 38.4469 22.6076 39 24 39C25.3924 39 26.7277 38.4469 27.7123 37.4623C28.6969 36.4777 29.25 35.1424 29.25 33.75C29.25 32.3576 28.6969 31.0223 27.7123 30.0377C26.7277 29.0531 25.3924 28.5 24 28.5C22.6076 28.5 21.2723 29.0531 20.2877 30.0377C19.3031 31.0223 18.75 32.3576 18.75 33.75V33.75Z", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.376 46.5C14.8905 45.1818 14.1085 43.9928 13.0906 43.0247C12.0727 42.0566 10.846 41.3353 9.50508 40.9165C8.1642 40.4977 6.74503 40.3926 5.35707 40.6092C3.96911 40.8258 2.64948 41.3585 1.5 42.1659", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M32.626 46.5C33.1113 45.1818 33.893 43.9928 34.9107 43.0248C35.9284 42.0567 37.155 41.3354 38.4957 40.9165C39.8365 40.4977 41.2555 40.3926 42.6434 40.6092C44.0312 40.8258 45.3507 41.3585 46.5 42.166", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M32.626 46.5C31.9729 44.7387 30.7962 43.2195 29.2541 42.1467C27.7121 41.0738 25.8786 40.4988 24 40.4988C22.1215 40.4988 20.288 41.0738 18.7459 42.1467C17.2039 43.2195 16.0272 44.7387 15.374 46.5", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.5 22.5C28.5 22.5 30 15 36 13.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M40.5 12H46.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M43.5 9V15", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.5 22.5C19.5 22.5 18 15 12 13.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.5 12H1.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.5 9V15", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 4.5H27", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 1.5V7.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 22.5V13.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_5044_6981", children: (0, jsx_runtime_1.jsx)("rect", { width: "48", height: "48", fill: "white" }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Customer stories" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Customer success stories across industries" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { className: "n-w-fit", children: "Go to case studies" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", className: "n-w-full n-h-36 n-rounded-2xl n-mb-4", onBackground: "weak" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", className: "n-w-full", onBackground: "weak", width: "80%", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Customer stories" }) }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "n-w-full", onBackground: "weak", width: "60%", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Customer" }) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "n-bg-neutral-bg-default n-flex n-items-center n-justify-center n-h-36 n-rounded-2xl n-mb-4", children: (0, jsx_runtime_1.jsxs)("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("g", { clipPath: "url(#clip0_5044_6981)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.5 33.75C1.5 35.1424 2.05312 36.4777 3.03769 37.4623C4.02226 38.4469 5.35761 39 6.75 39C8.14239 39 9.47774 38.4469 10.4623 37.4623C11.4469 36.4777 12 35.1424 12 33.75C12 32.3576 11.4469 31.0223 10.4623 30.0377C9.47774 29.0531 8.14239 28.5 6.75 28.5C5.35761 28.5 4.02226 29.0531 3.03769 30.0377C2.05312 31.0223 1.5 32.3576 1.5 33.75V33.75Z", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M36 33.75C36 34.4394 36.1358 35.1221 36.3996 35.7591C36.6635 36.396 37.0502 36.9748 37.5377 37.4623C38.0252 37.9498 38.604 38.3365 39.2409 38.6004C39.8779 38.8642 40.5606 39 41.25 39C41.9394 39 42.6221 38.8642 43.2591 38.6004C43.896 38.3365 44.4748 37.9498 44.9623 37.4623C45.4498 36.9748 45.8365 36.396 46.1004 35.7591C46.3642 35.1221 46.5 34.4394 46.5 33.75C46.5 33.0606 46.3642 32.3779 46.1004 31.7409C45.8365 31.104 45.4498 30.5252 44.9623 30.0377C44.4748 29.5502 43.896 29.1635 43.2591 28.8996C42.6221 28.6358 41.9394 28.5 41.25 28.5C40.5606 28.5 39.8779 28.6358 39.2409 28.8996C38.604 29.1635 38.0252 29.5502 37.5377 30.0377C37.0502 30.5252 36.6635 31.104 36.3996 31.7409C36.1358 32.3779 36 33.0606 36 33.75Z", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.75 33.75C18.75 35.1424 19.3031 36.4777 20.2877 37.4623C21.2723 38.4469 22.6076 39 24 39C25.3924 39 26.7277 38.4469 27.7123 37.4623C28.6969 36.4777 29.25 35.1424 29.25 33.75C29.25 32.3576 28.6969 31.0223 27.7123 30.0377C26.7277 29.0531 25.3924 28.5 24 28.5C22.6076 28.5 21.2723 29.0531 20.2877 30.0377C19.3031 31.0223 18.75 32.3576 18.75 33.75V33.75Z", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.376 46.5C14.8905 45.1818 14.1085 43.9928 13.0906 43.0247C12.0727 42.0566 10.846 41.3353 9.50508 40.9165C8.1642 40.4977 6.74503 40.3926 5.35707 40.6092C3.96911 40.8258 2.64948 41.3585 1.5 42.1659", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M32.626 46.5C33.1113 45.1818 33.893 43.9928 34.9107 43.0248C35.9284 42.0567 37.155 41.3354 38.4957 40.9165C39.8365 40.4977 41.2555 40.3926 42.6434 40.6092C44.0312 40.8258 45.3507 41.3585 46.5 42.166", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M32.626 46.5C31.9729 44.7387 30.7962 43.2195 29.2541 42.1467C27.7121 41.0738 25.8786 40.4988 24 40.4988C22.1215 40.4988 20.288 41.0738 18.7459 42.1467C17.2039 43.2195 16.0272 44.7387 15.374 46.5", stroke: "#4C99A4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M28.5 22.5C28.5 22.5 30 15 36 13.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M40.5 12H46.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M43.5 9V15", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M19.5 22.5C19.5 22.5 18 15 12 13.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.5 12H1.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M4.5 9V15", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 4.5H27", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 1.5V7.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M24 22.5V13.5", stroke: "#5CC3C9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_5044_6981", children: (0, jsx_runtime_1.jsx)("rect", { width: "48", height: "48", fill: "white" }) }) })] }) }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Customer stories" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Customer success stories across industries" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { className: "n-w-fit", children: "Go to case studies" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", className: "n-w-full n-h-36 n-rounded-2xl n-mb-4", onBackground: "weak" }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", className: "n-w-full", onBackground: "weak", width: "80%", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Customer stories" }) }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "n-w-full", onBackground: "weak", width: "60%", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Customer" }) })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=skeleton-full-example.story.js.map

package/lib/cjs/skeleton/stories/skeleton-full-example.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-full-example.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-full-example.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoE;AAEpE,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,iCAAK,SAAS,EAAC,iGAAiG,aAC9G,gCAAK,SAAS,EAAC,4FAA4F,YACzG,iCACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,aAElC,+BAAG,QAAQ,EAAC,uBAAuB,aACjC,iCACE,CAAC,EAAC,sVAAsV,EACxV,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,4sBAA4sB,EAC9sB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,mWAAmW,EACrW,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,wMAAwM,EAC1M,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,wMAAwM,EAC1M,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,oMAAoM,EACtM,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,oCAAoC,EACtC,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,eAAe,EACjB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,YAAY,EACd,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,oCAAoC,EACtC,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,aAAa,EACf,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,WAAW,EACb,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,YAAY,EACd,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,aAAa,EACf,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,EACF,iCACE,CAAC,EAAC,eAAe,EACjB,MAAM,EAAC,SAAS,EAChB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,IACA,EACJ,2CACE,qCAAU,EAAE,EAAC,iBAAiB,YAC5B,iCAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,GAAG,GACnC,GACN,IACH,GACF,EACN,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,EAC3D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,2DAEpB,EACb,uBAAC,kBAAU,IAAC,SAAS,EAAC,SAAS,mCAAgC,IAC3D,EACN,iCAAK,SAAS,EAAC,iGAAiG,aAC9G,uBAAC,gBAAQ,IACP,KAAK,EAAC,aAAa,EACnB,SAAS,EAAC,sCAAsC,EAChD,YAAY,EAAC,MAAM,GACnB,EACF,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,gBAAQ,IACP,KAAK,EAAC,aAAa,EACnB,SAAS,EAAC,UAAU,EACpB,YAAY,EAAC,MAAM,EACnB,KAAK,EAAC,KAAK,YAEX,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,iCAA8B,GAClD,EACX,uBAAC,gBAAQ,IAAC,SAAS,EAAC,UAAU,EAAC,YAAY,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,YAC5D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,yBAAsB,GAC9C,IACP,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton, TextButton, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-row n-gap-2\">\n <div className=\"n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2\">\n <div className=\"n-bg-neutral-bg-default n-flex n-items-center n-justify-center n-h-36 n-rounded-2xl n-mb-4\">\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clipPath=\"url(#clip0_5044_6981)\">\n <path\n d=\"M1.5 33.75C1.5 35.1424 2.05312 36.4777 3.03769 37.4623C4.02226 38.4469 5.35761 39 6.75 39C8.14239 39 9.47774 38.4469 10.4623 37.4623C11.4469 36.4777 12 35.1424 12 33.75C12 32.3576 11.4469 31.0223 10.4623 30.0377C9.47774 29.0531 8.14239 28.5 6.75 28.5C5.35761 28.5 4.02226 29.0531 3.03769 30.0377C2.05312 31.0223 1.5 32.3576 1.5 33.75V33.75Z\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M36 33.75C36 34.4394 36.1358 35.1221 36.3996 35.7591C36.6635 36.396 37.0502 36.9748 37.5377 37.4623C38.0252 37.9498 38.604 38.3365 39.2409 38.6004C39.8779 38.8642 40.5606 39 41.25 39C41.9394 39 42.6221 38.8642 43.2591 38.6004C43.896 38.3365 44.4748 37.9498 44.9623 37.4623C45.4498 36.9748 45.8365 36.396 46.1004 35.7591C46.3642 35.1221 46.5 34.4394 46.5 33.75C46.5 33.0606 46.3642 32.3779 46.1004 31.7409C45.8365 31.104 45.4498 30.5252 44.9623 30.0377C44.4748 29.5502 43.896 29.1635 43.2591 28.8996C42.6221 28.6358 41.9394 28.5 41.25 28.5C40.5606 28.5 39.8779 28.6358 39.2409 28.8996C38.604 29.1635 38.0252 29.5502 37.5377 30.0377C37.0502 30.5252 36.6635 31.104 36.3996 31.7409C36.1358 32.3779 36 33.0606 36 33.75Z\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M18.75 33.75C18.75 35.1424 19.3031 36.4777 20.2877 37.4623C21.2723 38.4469 22.6076 39 24 39C25.3924 39 26.7277 38.4469 27.7123 37.4623C28.6969 36.4777 29.25 35.1424 29.25 33.75C29.25 32.3576 28.6969 31.0223 27.7123 30.0377C26.7277 29.0531 25.3924 28.5 24 28.5C22.6076 28.5 21.2723 29.0531 20.2877 30.0377C19.3031 31.0223 18.75 32.3576 18.75 33.75V33.75Z\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M15.376 46.5C14.8905 45.1818 14.1085 43.9928 13.0906 43.0247C12.0727 42.0566 10.846 41.3353 9.50508 40.9165C8.1642 40.4977 6.74503 40.3926 5.35707 40.6092C3.96911 40.8258 2.64948 41.3585 1.5 42.1659\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M32.626 46.5C33.1113 45.1818 33.893 43.9928 34.9107 43.0248C35.9284 42.0567 37.155 41.3354 38.4957 40.9165C39.8365 40.4977 41.2555 40.3926 42.6434 40.6092C44.0312 40.8258 45.3507 41.3585 46.5 42.166\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M32.626 46.5C31.9729 44.7387 30.7962 43.2195 29.2541 42.1467C27.7121 41.0738 25.8786 40.4988 24 40.4988C22.1215 40.4988 20.288 41.0738 18.7459 42.1467C17.2039 43.2195 16.0272 44.7387 15.374 46.5\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M28.5 22.5C28.5 22.5 30 15 36 13.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M40.5 12H46.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M43.5 9V15\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M19.5 22.5C19.5 22.5 18 15 12 13.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M7.5 12H1.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M4.5 9V15\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M21 4.5H27\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M24 1.5V7.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M24 22.5V13.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_5044_6981\">\n <rect width=\"48\" height=\"48\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n <Typography variant=\"title-3\">Customer stories</Typography>\n <Typography variant=\"body-medium\">\n Customer success stories across industries\n </Typography>\n <TextButton className=\"n-w-fit\">Go to case studies</TextButton>\n </div>\n <div className=\"n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2\">\n <Skeleton\n shape=\"rectangular\"\n className=\"n-w-full n-h-36 n-rounded-2xl n-mb-4\"\n onBackground=\"weak\"\n />\n <div className=\"n-flex n-flex-col n-gap-2\">\n <Skeleton\n shape=\"rectangular\"\n className=\"n-w-full\"\n onBackground=\"weak\"\n width=\"80%\"\n >\n <Typography variant=\"title-3\">Customer stories</Typography>\n </Skeleton>\n <Skeleton className=\"n-w-full\" onBackground=\"weak\" width=\"60%\">\n <Typography variant=\"body-medium\">Customer</Typography>\n </Skeleton>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"skeleton-full-example.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-full-example.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton, TextButton, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-row n-gap-2\">\n <div className=\"n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2\">\n <div className=\"n-bg-neutral-bg-default n-flex n-items-center n-justify-center n-h-36 n-rounded-2xl n-mb-4\">\n <svg\n width=\"48\"\n height=\"48\"\n viewBox=\"0 0 48 48\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g clipPath=\"url(#clip0_5044_6981)\">\n <path\n d=\"M1.5 33.75C1.5 35.1424 2.05312 36.4777 3.03769 37.4623C4.02226 38.4469 5.35761 39 6.75 39C8.14239 39 9.47774 38.4469 10.4623 37.4623C11.4469 36.4777 12 35.1424 12 33.75C12 32.3576 11.4469 31.0223 10.4623 30.0377C9.47774 29.0531 8.14239 28.5 6.75 28.5C5.35761 28.5 4.02226 29.0531 3.03769 30.0377C2.05312 31.0223 1.5 32.3576 1.5 33.75V33.75Z\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M36 33.75C36 34.4394 36.1358 35.1221 36.3996 35.7591C36.6635 36.396 37.0502 36.9748 37.5377 37.4623C38.0252 37.9498 38.604 38.3365 39.2409 38.6004C39.8779 38.8642 40.5606 39 41.25 39C41.9394 39 42.6221 38.8642 43.2591 38.6004C43.896 38.3365 44.4748 37.9498 44.9623 37.4623C45.4498 36.9748 45.8365 36.396 46.1004 35.7591C46.3642 35.1221 46.5 34.4394 46.5 33.75C46.5 33.0606 46.3642 32.3779 46.1004 31.7409C45.8365 31.104 45.4498 30.5252 44.9623 30.0377C44.4748 29.5502 43.896 29.1635 43.2591 28.8996C42.6221 28.6358 41.9394 28.5 41.25 28.5C40.5606 28.5 39.8779 28.6358 39.2409 28.8996C38.604 29.1635 38.0252 29.5502 37.5377 30.0377C37.0502 30.5252 36.6635 31.104 36.3996 31.7409C36.1358 32.3779 36 33.0606 36 33.75Z\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M18.75 33.75C18.75 35.1424 19.3031 36.4777 20.2877 37.4623C21.2723 38.4469 22.6076 39 24 39C25.3924 39 26.7277 38.4469 27.7123 37.4623C28.6969 36.4777 29.25 35.1424 29.25 33.75C29.25 32.3576 28.6969 31.0223 27.7123 30.0377C26.7277 29.0531 25.3924 28.5 24 28.5C22.6076 28.5 21.2723 29.0531 20.2877 30.0377C19.3031 31.0223 18.75 32.3576 18.75 33.75V33.75Z\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M15.376 46.5C14.8905 45.1818 14.1085 43.9928 13.0906 43.0247C12.0727 42.0566 10.846 41.3353 9.50508 40.9165C8.1642 40.4977 6.74503 40.3926 5.35707 40.6092C3.96911 40.8258 2.64948 41.3585 1.5 42.1659\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M32.626 46.5C33.1113 45.1818 33.893 43.9928 34.9107 43.0248C35.9284 42.0567 37.155 41.3354 38.4957 40.9165C39.8365 40.4977 41.2555 40.3926 42.6434 40.6092C44.0312 40.8258 45.3507 41.3585 46.5 42.166\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M32.626 46.5C31.9729 44.7387 30.7962 43.2195 29.2541 42.1467C27.7121 41.0738 25.8786 40.4988 24 40.4988C22.1215 40.4988 20.288 41.0738 18.7459 42.1467C17.2039 43.2195 16.0272 44.7387 15.374 46.5\"\n stroke=\"#4C99A4\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M28.5 22.5C28.5 22.5 30 15 36 13.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M40.5 12H46.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M43.5 9V15\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M19.5 22.5C19.5 22.5 18 15 12 13.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M7.5 12H1.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M4.5 9V15\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M21 4.5H27\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M24 1.5V7.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n <path\n d=\"M24 22.5V13.5\"\n stroke=\"#5CC3C9\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_5044_6981\">\n <rect width=\"48\" height=\"48\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </div>\n <Typography variant=\"title-2\">Customer stories</Typography>\n <Typography variant=\"body-medium\">\n Customer success stories across industries\n </Typography>\n <TextButton className=\"n-w-fit\">Go to case studies</TextButton>\n </div>\n <div className=\"n-flex n-flex-col n-gap-2 n-bg-neutral-bg-weak n-shadow-light-raised n-w-72 n-rounded-2xl n-p-2\">\n <Skeleton\n shape=\"rectangular\"\n className=\"n-w-full n-h-36 n-rounded-2xl n-mb-4\"\n onBackground=\"weak\"\n />\n <div className=\"n-flex n-flex-col n-gap-2\">\n <Skeleton\n shape=\"rectangular\"\n className=\"n-w-full\"\n onBackground=\"weak\"\n width=\"80%\"\n >\n <Typography variant=\"title-2\">Customer stories</Typography>\n </Skeleton>\n <Skeleton className=\"n-w-full\" onBackground=\"weak\" width=\"60%\">\n <Typography variant=\"body-medium\">Customer</Typography>\n </Skeleton>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/skeleton/stories/skeleton-inherit-width.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "This text determines the skeleton width" }) }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Shorter text" }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-4", children: [(0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "This text determines the skeleton width" }) }), (0, jsx_runtime_1.jsx)(react_1.Skeleton, { shape: "rectangular", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Shorter text" }) })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=skeleton-inherit-width.story.js.map

package/lib/cjs/skeleton/stories/skeleton-inherit-width.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-inherit-width.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-inherit-width.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AAExD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,gBAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wDAEpB,GACJ,EACX,uBAAC,gBAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,GAC9C,IACP,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-col n-gap-4\">\n <Skeleton shape=\"rectangular\">\n <Typography variant=\"body-medium\">\n This text determines the skeleton width\n </Typography>\n </Skeleton>\n <Skeleton shape=\"rectangular\">\n <Typography variant=\"title-3\">Shorter text</Typography>\n </Skeleton>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"skeleton-inherit-width.story.js","sourceRoot":"","sources":["../../../../src/skeleton/stories/skeleton-inherit-width.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AAExD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,gBAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,wDAEpB,GACJ,EACX,uBAAC,gBAAQ,IAAC,KAAK,EAAC,aAAa,YAC3B,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,6BAA0B,GAC9C,IACP,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Skeleton, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-flex-col n-gap-4\">\n <Skeleton shape=\"rectangular\">\n <Typography variant=\"body-medium\">\n This text determines the skeleton width\n </Typography>\n </Skeleton>\n <Skeleton shape=\"rectangular\">\n <Typography variant=\"title-2\">Shorter text</Typography>\n </Skeleton>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/spotlight/Spotlight.js CHANGED Viewed

@@ -96,7 +96,7 @@ const SpotlightHeader = (_a) => {
             setHeaderId === null || setHeaderId === void 0 ? void 0 : setHeaderId(htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id);
         }
     }, [setHeaderId, htmlAttributes === null || htmlAttributes === void 0 ? void 0 : htmlAttributes.id]);
-    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "title-4" }, restProps, { htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { id: headerId }), children: children })));
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "title-3" }, restProps, { htmlAttributes: Object.assign(Object.assign({}, htmlAttributes), { id: headerId }), children: children })));
 };
 SpotlightHeader.displayName = 'Spotlight.Header';
 const SpotlightBody = (_a) => {

package/lib/cjs/spotlight/Spotlight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n createContext,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { placementTranslation, type Popover } from '../popover';\nimport { StatusLabel } from '../status-label';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { useSpotlightContext } from './SpotlightProvider';\n\n// Local instance context to pass stable ARIA ids to subcomponents\ntype SpotlightInstanceContextType = {\n headerId?: string;\n descriptionId?: string;\n setHeaderId?: (id: string \| undefined) => void;\n setDescriptionId?: (id: string \| undefined) => void;\n};\n\nconst SpotlightInstanceContext =\n createContext<SpotlightInstanceContextType \| null>(null);\n\nconst useSpotlightInstance = (): SpotlightInstanceContextType => {\n const ctx = useContext(SpotlightInstanceContext);\n if (ctx === null) {\n throw new Error(\n 'Spotlight subcomponents must be used within <Spotlight />',\n );\n }\n return ctx;\n};\nimport { useSpotlight } from './use-spotlight';\n\ntype SpotlightHeaderProps = {\n /* The spotlight header content /\n children?: React.ReactNode;\n};\n\nconst SpotlightHeader = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightHeaderProps>) => {\n const classes = classNames('ndl-spotlight-header', className);\n const { headerId, setHeaderId } = useSpotlightInstance();\n const Component: React.ElementType = as ?? 'div';\n\n useEffect(() => {\n if (Boolean(htmlAttributes?.id) === true) {\n setHeaderId?.(htmlAttributes?.id);\n }\n }, [setHeaderId, htmlAttributes?.id]);\n\n return (\n <Typography\n as={Component}\n className={classes}\n ref={ref}\n style={style}\n variant=\"title-4\"\n {...restProps}\n htmlAttributes={{ ...htmlAttributes, id: headerId }}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightHeader.displayName = 'Spotlight.Header';\n\ntype SpotlightBodyProps = {\n /* The spotlight body content /\n children?: React.ReactNode;\n};\n\nconst SpotlightBody = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightBodyProps>) => {\n const classes = classNames('ndl-spotlight-body', className);\n const { descriptionId, setDescriptionId } = useSpotlightInstance();\n const Component: React.ElementType = as ?? 'div';\n\n useEffect(() => {\n if (Boolean(htmlAttributes?.id) === true) {\n setDescriptionId?.(htmlAttributes?.id);\n }\n }, [setDescriptionId, htmlAttributes?.id]);\n\n return (\n <Typography\n as={Component}\n className={classes}\n ref={ref}\n style={style}\n variant=\"body-medium\"\n {...restProps}\n htmlAttributes={{ ...htmlAttributes, id: descriptionId }}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightBody.displayName = 'Spotlight.Body';\n\ntype SpotlightLabelProps = Omit<\n React.ComponentProps<typeof StatusLabel>,\n 'color' \| 'fill'\n>;\n\nconst SpotlightLabel = <T extends React.ElementType = 'div'>({\n className,\n children,\n hasIcon,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightLabelProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-label', className);\n\n return (\n <StatusLabel\n fill=\"semi-filled\"\n variant=\"discovery\"\n hasIcon={hasIcon}\n ref={ref}\n as={as}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </StatusLabel>\n );\n};\n\nSpotlightLabel.displayName = 'Spotlight.Label';\n\ntype SpotlightImageProps = {\n /* A string that represents the URL of the image /\n src: string;\n /* A string that represents the alt text of the image /\n alt: string;\n};\n\nconst SpotlightImage = ({\n src,\n alt,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'img', SpotlightImageProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-image n-body-medium', className);\n\n return (\n <img\n src={src}\n alt={alt}\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n />\n );\n};\n\nSpotlightImage.displayName = 'Spotlight.Image';\n\ntype SpotlightIconWrapperProps = {\n /* Content displayed in the icon wrapper /\n children?: React.ReactNode;\n};\n\nconst SpotlightIconWrapper = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightIconWrapperProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-icon-wrapper', className);\n const Component = as ?? 'div';\n\n return (\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n );\n};\n\nSpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';\n\nexport type SpotlightCloseAction = 'clickOutside' \| 'escapeKeyDown';\n\nexport type SpotlightProps = {\n /* The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to /\n target: string;\n /* The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. /\n actions?: React.ReactNode;\n /* A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour /\n beforeActions?: React.ReactNode;\n /* A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either \"clickOutside\" or \"escapeKeyDown\") /\n onClose?: (action: SpotlightCloseAction) => void;\n /* Callback function called when the spotlight is opened /\n onOpen?: () => void;\n /* Children should be Spotlight subcomponents */\n children?: React.ReactNode;\n} & Pick<\n React.ComponentProps<typeof Popover>,\n 'placement' \| 'initialFocus' \| 'closeOnClickOutside'\n>;\n\nconst SpotlightComponent = ({\n target,\n beforeActions,\n actions,\n initialFocus,\n onClose,\n placement,\n children,\n className,\n style,\n htmlAttributes,\n closeOnClickOutside = false,\n onOpen,\n ref,\n ...restProps\n}: CommonProps<'div', SpotlightProps>) => {\n const generatedHeaderId = useId();\n const generatedDescriptionId = useId();\n const [targetElement, setTargetElement] = useState<HTMLElement \| null>(null);\n const actionsRef = useRef<HTMLDivElement \| null>(null);\n\n const {\n hasOverlay,\n isActiveSpotlight,\n isOpen,\n registeredTargets,\n setActiveSpotlight,\n setIsOpen,\n } = useSpotlightContext();\n\n const [headerId, setHeaderId] = useState<string \| undefined>(\n generatedHeaderId,\n );\n const [descriptionId, setDescriptionId] = useState<string \| undefined>(\n generatedDescriptionId,\n );\n\n // Determine if a Header child exists\n const hasHeaderChild = React.useMemo(() => {\n const childrenArray = React.Children.toArray(children);\n return childrenArray.some(\n (child) => React.isValidElement(child) && child.type === SpotlightHeader,\n );\n }, [children]);\n\n // Source ARIA from htmlAttributes\n const ariaLabel = htmlAttributes?.['aria-label'];\n const ariaLabelledBy =\n htmlAttributes?.['aria-labelledby'] ??\n (hasHeaderChild ? headerId : undefined);\n const ariaDescribedBy = htmlAttributes?.['aria-describedby'] ?? descriptionId;\n\n if (ariaLabel === undefined && !ariaLabelledBy) {\n console.warn(\n 'The Spotlight is missing aria-label and Header. Please add one of them for accessibility.',\n );\n }\n\n const onOpenChange = (isOpen: boolean, event?: Event) => {\n if (!isOpen) {\n if (event instanceof PointerEvent) {\n onClose?.('clickOutside');\n } else if (event instanceof KeyboardEvent) {\n onClose?.('escapeKeyDown');\n }\n setActiveSpotlight(null);\n setIsOpen(false);\n }\n };\n\n const spotlight = useSpotlight({\n anchorElement: targetElement,\n closeOnClickOutside,\n initialFocus,\n isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n });\n\n const mergedRef = useMergeRefs([spotlight.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n const classes = classNames('ndl-spotlight', themeClassName, className);\n\n useEffect(() => {\n setTargetElement(registeredTargets[target]?.current);\n }, [target, registeredTargets]);\n\n useEffect(() => {\n if (isOpen && isActiveSpotlight(target)) {\n onOpen?.();\n }\n }, [isOpen, onOpen, isActiveSpotlight, target]);\n\n const findInitialFocus = () => {\n if (spotlight.initialFocus !== undefined) {\n return spotlight.initialFocus;\n }\n if (!actionsRef.current) {\n return undefined;\n }\n const focusableEls = actionsRef.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n return focusableEls.length - 1;\n };\n\n if (!spotlight.context.open) {\n return null;\n }\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n context={spotlight.context}\n modal={true}\n initialFocus={findInitialFocus()}\n >\n <SpotlightInstanceContext.Provider\n value={{\n descriptionId,\n headerId,\n setDescriptionId,\n setHeaderId,\n }}\n >\n {hasOverlay === true && (\n <FloatingOverlay\n className=\"ndl-spotlight-overlay ndl-spotlight-overlay-top\"\n onPointerDown={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onTouchStart={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n />\n )}\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...spotlight.floatingStyles,\n ...spotlight.transitionStyles,\n ...style,\n }}\n {...spotlight.getFloatingProps({\n ...htmlAttributes,\n 'aria-describedby': ariaDescribedBy,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-modal': 'true',\n })}\n {...restProps}\n >\n <div>{children}</div>\n {(Boolean(beforeActions) \|\| Boolean(actions)) && (\n <div className=\"ndl-spotlight-footer\">\n <Typography variant=\"body-medium\">{beforeActions}</Typography>\n {Boolean(actions) && (\n <div className=\"ndl-spotlight-actions\" ref={actionsRef}>\n {actions}\n </div>\n )}\n </div>\n )}\n </div>\n </SpotlightInstanceContext.Provider>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n};\n\nSpotlightComponent.displayName = 'Spotlight';\n\nconst Spotlight = Object.assign(SpotlightComponent, {\n Body: SpotlightBody,\n Header: SpotlightHeader,\n IconWrapper: SpotlightIconWrapper,\n Image: SpotlightImage,\n Label: SpotlightLabel,\n});\n\nexport { Spotlight };\n"]}
1	+ {"version":3,"file":"Spotlight.js","sourceRoot":"","sources":["../../../src/spotlight/Spotlight.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n createContext,\n useContext,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { placementTranslation, type Popover } from '../popover';\nimport { StatusLabel } from '../status-label';\nimport { useNeedleTheme } from '../theme';\nimport { Typography } from '../typography';\nimport { useSpotlightContext } from './SpotlightProvider';\n\n// Local instance context to pass stable ARIA ids to subcomponents\ntype SpotlightInstanceContextType = {\n headerId?: string;\n descriptionId?: string;\n setHeaderId?: (id: string \| undefined) => void;\n setDescriptionId?: (id: string \| undefined) => void;\n};\n\nconst SpotlightInstanceContext =\n createContext<SpotlightInstanceContextType \| null>(null);\n\nconst useSpotlightInstance = (): SpotlightInstanceContextType => {\n const ctx = useContext(SpotlightInstanceContext);\n if (ctx === null) {\n throw new Error(\n 'Spotlight subcomponents must be used within <Spotlight />',\n );\n }\n return ctx;\n};\nimport { useSpotlight } from './use-spotlight';\n\ntype SpotlightHeaderProps = {\n /* The spotlight header content /\n children?: React.ReactNode;\n};\n\nconst SpotlightHeader = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightHeaderProps>) => {\n const classes = classNames('ndl-spotlight-header', className);\n const { headerId, setHeaderId } = useSpotlightInstance();\n const Component: React.ElementType = as ?? 'div';\n\n useEffect(() => {\n if (Boolean(htmlAttributes?.id) === true) {\n setHeaderId?.(htmlAttributes?.id);\n }\n }, [setHeaderId, htmlAttributes?.id]);\n\n return (\n <Typography\n as={Component}\n className={classes}\n ref={ref}\n style={style}\n variant=\"title-3\"\n {...restProps}\n htmlAttributes={{ ...htmlAttributes, id: headerId }}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightHeader.displayName = 'Spotlight.Header';\n\ntype SpotlightBodyProps = {\n /* The spotlight body content /\n children?: React.ReactNode;\n};\n\nconst SpotlightBody = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightBodyProps>) => {\n const classes = classNames('ndl-spotlight-body', className);\n const { descriptionId, setDescriptionId } = useSpotlightInstance();\n const Component: React.ElementType = as ?? 'div';\n\n useEffect(() => {\n if (Boolean(htmlAttributes?.id) === true) {\n setDescriptionId?.(htmlAttributes?.id);\n }\n }, [setDescriptionId, htmlAttributes?.id]);\n\n return (\n <Typography\n as={Component}\n className={classes}\n ref={ref}\n style={style}\n variant=\"body-medium\"\n {...restProps}\n htmlAttributes={{ ...htmlAttributes, id: descriptionId }}\n >\n {children}\n </Typography>\n );\n};\n\nSpotlightBody.displayName = 'Spotlight.Body';\n\ntype SpotlightLabelProps = Omit<\n React.ComponentProps<typeof StatusLabel>,\n 'color' \| 'fill'\n>;\n\nconst SpotlightLabel = <T extends React.ElementType = 'div'>({\n className,\n children,\n hasIcon,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightLabelProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-label', className);\n\n return (\n <StatusLabel\n fill=\"semi-filled\"\n variant=\"discovery\"\n hasIcon={hasIcon}\n ref={ref}\n as={as}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </StatusLabel>\n );\n};\n\nSpotlightLabel.displayName = 'Spotlight.Label';\n\ntype SpotlightImageProps = {\n /* A string that represents the URL of the image /\n src: string;\n /* A string that represents the alt text of the image /\n alt: string;\n};\n\nconst SpotlightImage = ({\n src,\n alt,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'img', SpotlightImageProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-image n-body-medium', className);\n\n return (\n <img\n src={src}\n alt={alt}\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n />\n );\n};\n\nSpotlightImage.displayName = 'Spotlight.Image';\n\ntype SpotlightIconWrapperProps = {\n /* Content displayed in the icon wrapper /\n children?: React.ReactNode;\n};\n\nconst SpotlightIconWrapper = <T extends React.ElementType = 'div'>({\n children,\n className,\n as,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, SpotlightIconWrapperProps>) => {\n useSpotlightContext();\n const classes = classNames('ndl-spotlight-icon-wrapper', className);\n const Component = as ?? 'div';\n\n return (\n <Component\n ref={ref}\n className={classes}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n );\n};\n\nSpotlightIconWrapper.displayName = 'Spotlight.IconWrapper';\n\nexport type SpotlightCloseAction = 'clickOutside' \| 'escapeKeyDown';\n\nexport type SpotlightProps = {\n /* The id of the `SpotlightTarget` that this `Spotlight` should be rendered next to /\n target: string;\n /* The actions to be displayed in the Spotlight. Should only be TextButton or OutlinedButton components. /\n actions?: React.ReactNode;\n /* A ReactNode that can be put in the left corner of the Spotlight (left of action buttons). It should be used to display the current step if you have a multi-step tour /\n beforeActions?: React.ReactNode;\n /* A callback function that is called if the Spotlight is closed by either clicking outside the Spotlight, or by pressing the Escape key. The function has one argument: action (string that can be either \"clickOutside\" or \"escapeKeyDown\") /\n onClose?: (action: SpotlightCloseAction) => void;\n /* Callback function called when the spotlight is opened /\n onOpen?: () => void;\n /* Children should be Spotlight subcomponents */\n children?: React.ReactNode;\n} & Pick<\n React.ComponentProps<typeof Popover>,\n 'placement' \| 'initialFocus' \| 'closeOnClickOutside'\n>;\n\nconst SpotlightComponent = ({\n target,\n beforeActions,\n actions,\n initialFocus,\n onClose,\n placement,\n children,\n className,\n style,\n htmlAttributes,\n closeOnClickOutside = false,\n onOpen,\n ref,\n ...restProps\n}: CommonProps<'div', SpotlightProps>) => {\n const generatedHeaderId = useId();\n const generatedDescriptionId = useId();\n const [targetElement, setTargetElement] = useState<HTMLElement \| null>(null);\n const actionsRef = useRef<HTMLDivElement \| null>(null);\n\n const {\n hasOverlay,\n isActiveSpotlight,\n isOpen,\n registeredTargets,\n setActiveSpotlight,\n setIsOpen,\n } = useSpotlightContext();\n\n const [headerId, setHeaderId] = useState<string \| undefined>(\n generatedHeaderId,\n );\n const [descriptionId, setDescriptionId] = useState<string \| undefined>(\n generatedDescriptionId,\n );\n\n // Determine if a Header child exists\n const hasHeaderChild = React.useMemo(() => {\n const childrenArray = React.Children.toArray(children);\n return childrenArray.some(\n (child) => React.isValidElement(child) && child.type === SpotlightHeader,\n );\n }, [children]);\n\n // Source ARIA from htmlAttributes\n const ariaLabel = htmlAttributes?.['aria-label'];\n const ariaLabelledBy =\n htmlAttributes?.['aria-labelledby'] ??\n (hasHeaderChild ? headerId : undefined);\n const ariaDescribedBy = htmlAttributes?.['aria-describedby'] ?? descriptionId;\n\n if (ariaLabel === undefined && !ariaLabelledBy) {\n console.warn(\n 'The Spotlight is missing aria-label and Header. Please add one of them for accessibility.',\n );\n }\n\n const onOpenChange = (isOpen: boolean, event?: Event) => {\n if (!isOpen) {\n if (event instanceof PointerEvent) {\n onClose?.('clickOutside');\n } else if (event instanceof KeyboardEvent) {\n onClose?.('escapeKeyDown');\n }\n setActiveSpotlight(null);\n setIsOpen(false);\n }\n };\n\n const spotlight = useSpotlight({\n anchorElement: targetElement,\n closeOnClickOutside,\n initialFocus,\n isOpen: isActiveSpotlight(target) && isOpen && !!targetElement,\n onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n });\n\n const mergedRef = useMergeRefs([spotlight.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n const classes = classNames('ndl-spotlight', themeClassName, className);\n\n useEffect(() => {\n setTargetElement(registeredTargets[target]?.current);\n }, [target, registeredTargets]);\n\n useEffect(() => {\n if (isOpen && isActiveSpotlight(target)) {\n onOpen?.();\n }\n }, [isOpen, onOpen, isActiveSpotlight, target]);\n\n const findInitialFocus = () => {\n if (spotlight.initialFocus !== undefined) {\n return spotlight.initialFocus;\n }\n if (!actionsRef.current) {\n return undefined;\n }\n const focusableEls = actionsRef.current.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n return focusableEls.length - 1;\n };\n\n if (!spotlight.context.open) {\n return null;\n }\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n context={spotlight.context}\n modal={true}\n initialFocus={findInitialFocus()}\n >\n <SpotlightInstanceContext.Provider\n value={{\n descriptionId,\n headerId,\n setDescriptionId,\n setHeaderId,\n }}\n >\n {hasOverlay === true && (\n <FloatingOverlay\n className=\"ndl-spotlight-overlay ndl-spotlight-overlay-top\"\n onPointerDown={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onTouchStart={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n />\n )}\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...spotlight.floatingStyles,\n ...spotlight.transitionStyles,\n ...style,\n }}\n {...spotlight.getFloatingProps({\n ...htmlAttributes,\n 'aria-describedby': ariaDescribedBy,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-modal': 'true',\n })}\n {...restProps}\n >\n <div>{children}</div>\n {(Boolean(beforeActions) \|\| Boolean(actions)) && (\n <div className=\"ndl-spotlight-footer\">\n <Typography variant=\"body-medium\">{beforeActions}</Typography>\n {Boolean(actions) && (\n <div className=\"ndl-spotlight-actions\" ref={actionsRef}>\n {actions}\n </div>\n )}\n </div>\n )}\n </div>\n </SpotlightInstanceContext.Provider>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n};\n\nSpotlightComponent.displayName = 'Spotlight';\n\nconst Spotlight = Object.assign(SpotlightComponent, {\n Body: SpotlightBody,\n Header: SpotlightHeader,\n IconWrapper: SpotlightIconWrapper,\n Image: SpotlightImage,\n Label: SpotlightLabel,\n});\n\nexport { Spotlight };\n"]}

package/lib/cjs/status-indicator/stories/status-indicator-variants.story.js CHANGED Viewed

@@ -24,7 +24,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "unknown" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "success" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Success" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "info" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "warning" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "danger" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Danger" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "unknown" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Unknown" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "success" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Success" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "info" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "warning" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Warning" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-items-center n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.StatusIndicator, { variant: "danger" }), (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Danger" })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=status-indicator-variants.story.js.map

package/lib/cjs/status-indicator/stories/status-indicator-variants.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-indicator-variants.story.js","sourceRoot":"","sources":["../../../../src/status-indicator/stories/status-indicator-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,wBAAqB,~~IAC5C~~,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,wBAAqB,~~IAC5C~~,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,qBAAkB,~~IACzC~~,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,wBAAqB,~~IAC5C~~,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,QAAQ,GAAG,EACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,uBAAoB,~~IAC3C~~,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16\">\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"unknown\" />\n <Typography variant=\"~~label~~\">Unknown</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"success\" />\n <Typography variant=\"~~label~~\">Success</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"info\" />\n <Typography variant=\"~~label~~\">Info</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"warning\" />\n <Typography variant=\"~~label~~\">Warning</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"danger\" />\n <Typography variant=\"~~label~~\">Danger</Typography>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"status-indicator-variants.story.js","sourceRoot":"","sources":["../../../../src/status-indicator/stories/status-indicator-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+D;AAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,SAAS,EAAC,uBAAuB,aACpC,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,MAAM,GAAG,EAClC,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,qBAAkB,IAC3C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,SAAS,GAAG,EACrC,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,wBAAqB,IAC9C,EACN,iCAAK,SAAS,EAAC,gDAAgD,aAC7D,uBAAC,uBAAe,IAAC,OAAO,EAAC,QAAQ,GAAG,EACpC,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,IAC7C,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { StatusIndicator, Typography } from '@neo4j-ndl/react';\n\nconst Component = () => {\n return (\n <div className=\"n-flex n-gap-token-16\">\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"unknown\" />\n <Typography variant=\"title-3\">Unknown</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"success\" />\n <Typography variant=\"title-3\">Success</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"info\" />\n <Typography variant=\"title-3\">Info</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"warning\" />\n <Typography variant=\"title-3\">Warning</Typography>\n </div>\n <div className=\"n-flex n-flex-col n-items-center n-gap-token-8\">\n <StatusIndicator variant=\"danger\" />\n <Typography variant=\"title-3\">Danger</Typography>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/tabs/Tabs.js CHANGED Viewed

@@ -257,7 +257,7 @@ TabsTabPanel.displayName = 'Tabs.TabPanel';
 const TabBadge = (_a) => {
     var { children, ref, htmlAttributes, style, className } = _a, restProps = __rest(_a, ["children", "ref", "htmlAttributes", "style", "className"]);
     const classes = (0, classnames_1.default)('ndl-tab-badge', className);
-    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ ref: ref, variant: "subheading-small", className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ ref: ref, variant: "subheading-medium", className: classes, style: style, htmlAttributes: htmlAttributes }, restProps, { children: children })));
 };
 const Tabs = Object.assign(TabsComponent, {
     Badge: TabBadge,

package/lib/cjs/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { ArrowLeftCircleIconOutline } from '../icons/generated/heroIcons/ArrowLeftCircleIconOutline';\nimport { ArrowRightCircleIconOutline } from '../icons/generated/heroIcons/ArrowRightCircleIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n direction,\n isVisible,\n onClick,\n onBackground,\n}: {\n direction: 'left' \| 'right';\n isVisible: boolean;\n onClick: () => void;\n onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n const Icon =\n direction === 'left'\n ? ArrowLeftCircleIconOutline\n : ArrowRightCircleIconOutline;\n const positionClass =\n direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n return (\n <div\n className={classNames('ndl-scroll-item', positionClass, {\n 'ndl-scroll-item-hidden': !isVisible,\n 'ndl-scroll-item-on-background-default': onBackground === 'default',\n 'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n })}\n >\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"ndl-scroll-icon-wrapper\"\n onClick={onClick}\n aria-hidden=\"true\"\n >\n <Icon className=\"ndl-scroll-icon\" />\n </button>\n </div>\n );\n};\n\ntype TabId = string;\ntype Size = 'small' \| 'large';\ntype Fill = 'underline' \| 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n /* The currently active tabId /\n value: T;\n /* Callback function triggered when a new tab is selected /\n onChange: (event: T) => void;\n // TODO v5: add leadingVisual & trailingVisual props, to allow for children not to have flex (allowing text ellipsis). Also add a tooltip when ellipsing.\n /* The content dislayed in the tabs /\n children: React.ReactNode \| string;\n /* The fill type of the tabs /\n fill?: Fill;\n /* The size of the tabs /\n size?: Size;\n /* What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. /\n onBackground?: 'weak' \| 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n Pick<BaseTabsProps<T>, 'fill' \| 'size' \| 'onChange' \| 'value'>\n> & {\n registerTab: (tabId: T, ref: React.RefObject<HTMLElement \| null>) => void;\n unregisterTab: (tabId: T) => void;\n scrollTabIntoView: (tabId: T) => void;\n firstTabId: T \| null;\n isValuePresent: boolean;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> \| null>(null);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n\n if (context === null) {\n throw new Error('Tab used without context');\n }\n\n return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n return {\n 'ndl-filled-tab': fill === 'filled',\n 'ndl-large': size === 'large',\n 'ndl-small': size === 'small',\n 'ndl-underline-tab': fill === 'underline',\n };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n children,\n size = 'large',\n fill = 'underline',\n onChange,\n value,\n onBackground = 'weak',\n className,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n const tabRefs = useRef<Map<U, React.RefObject<HTMLElement \| null>>>(\n new Map(),\n );\n const containerRef = useRef<HTMLElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs([containerRef, ref]);\n const [firstTabId, setFirstTabId] = useState<U \| null>(null);\n const [isValuePresent, setIsValuePresent] = useState(false);\n const valueRef = useRef(value);\n\n // Use the custom hook for scroll overflow behavior\n const { scrollState, scrollToNextItem, checkOverflow } =\n useTabsScrollOverflow(scrollContainerRef);\n\n useEffect(() => {\n valueRef.current = value;\n setIsValuePresent(tabRefs.current.has(value));\n }, [value]);\n\n const registerTab = useCallback(\n (tabId: U, tabRef: React.RefObject<HTMLElement \| null>) => {\n tabRefs.current.set(tabId, tabRef);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(true);\n }\n },\n [],\n );\n\n const unregisterTab = useCallback((tabId: U) => {\n tabRefs.current.delete(tabId);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(false);\n }\n }, []);\n\n // Check overflow when children change\n useEffect(() => {\n checkOverflow();\n }, [checkOverflow, children]);\n\n const scrollTabIntoView = useCallback((tabId: U) => {\n const tabRef = tabRefs.current.get(tabId);\n const scrollContainer = scrollContainerRef.current;\n\n if (tabRef?.current && scrollContainer) {\n const tabRect = tabRef.current.getBoundingClientRect();\n const containerRect = scrollContainer.getBoundingClientRect();\n const containerCenter = containerRect.left + containerRect.width / 2;\n\n const targetScrollLeft =\n scrollContainer.scrollLeft +\n (tabRect.left - containerCenter + tabRect.width / 2);\n\n scrollContainer.scrollTo({\n behavior: 'smooth',\n left: targetScrollLeft,\n });\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n event.preventDefault();\n\n const tabIds = Array.from(tabRefs.current.keys());\n const focusedElement = document.activeElement;\n\n // Find the currently focused tab\n let currentIndex = -1;\n for (let index = 0; index < tabIds.length; index++) {\n const tabRef = tabRefs.current.get(tabIds[index]);\n if (tabRef?.current === focusedElement) {\n currentIndex = index;\n break;\n }\n }\n\n // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n if (currentIndex === -1) {\n const activeTabRef = tabRefs.current.get(value);\n if (activeTabRef?.current) {\n activeTabRef.current.focus();\n } else if (!isValuePresent && firstTabId !== null) {\n const firstTabRef = tabRefs.current.get(firstTabId);\n if (firstTabRef?.current) {\n firstTabRef.current.focus();\n }\n }\n return;\n }\n\n let nextIndex: number;\n\n if (event.key === 'ArrowRight') {\n nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n } else {\n nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n }\n\n const nextTabId = tabIds[nextIndex];\n const nextTabRef = tabRefs.current.get(nextTabId);\n\n if (nextTabRef?.current) {\n nextTabRef.current.focus();\n scrollTabIntoView(nextTabId);\n }\n },\n [value, scrollTabIntoView, firstTabId, isValuePresent],\n );\n\n const classes = classNames(\n 'ndl-tabs',\n getGeneralTabClasses(size, fill),\n className,\n );\n\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <Component\n className={classes}\n style={style}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n onKeyDown={handleKeyDown}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <ScrollButton\n direction=\"left\"\n isVisible={scrollState.isLeftVisible}\n onClick={() => scrollToNextItem('left')}\n onBackground={onBackground}\n />\n <ScrollButton\n direction=\"right\"\n isVisible={scrollState.isRightVisible}\n onClick={() => scrollToNextItem('right')}\n onBackground={onBackground}\n />\n <TabsContext.Provider\n value={{\n fill,\n firstTabId,\n isValuePresent,\n onChange,\n registerTab,\n scrollTabIntoView,\n size,\n unregisterTab,\n value,\n }}\n >\n <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n {children}\n </div>\n </TabsContext.Provider>\n </Component>\n );\n};\n\nTabsComponent.displayName = 'Tabs';\n\n/\n @remarks\n * When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n /\ntype TabProps<T extends TabId> = {\n /* The id of the tab /\n id: T;\n /* The content of the tab /\n children: React.ReactNode \| string;\n /* A string that will be shown as a tooltip when hovering over the button it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} /\n description?: string;\n /* Props for the tooltip component. /\n tooltipProps?: TooltipObjectProps;\n /* Additional class name /\n className?: string;\n /* Whether the tab is disabled /\n isDisabled?: boolean;\n};\n\nconst TabsTab = <\n U extends TabId = TabId,\n T extends React.ElementType = 'button',\n>({\n children,\n id: tabId,\n isDisabled = false,\n className,\n description,\n tooltipProps,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n const {\n size,\n fill,\n value,\n onChange,\n registerTab,\n unregisterTab,\n scrollTabIntoView,\n firstTabId,\n isValuePresent,\n } = useTabsContext();\n const internalRef = useRef<HTMLElement>(null);\n\n // Create a merged ref that handles both ref objects and ref functions\n const mergedRef = useMergeRefs([\n internalRef as React.RefObject<HTMLElement>,\n ref as React.RefObject<HTMLElement>,\n ]);\n\n // Register/unregister tab for keyboard navigation\n useEffect(() => {\n registerTab(tabId, internalRef);\n\n return () => {\n unregisterTab(tabId);\n };\n }, [tabId, registerTab, unregisterTab]);\n\n const baseClasses = classNames({\n ...getGeneralTabClasses(size, fill),\n 'ndl-disabled': isDisabled,\n 'ndl-selected': value === tabId,\n });\n\n const Component: React.ElementType = as ?? 'button';\n\n const classes = classNames('ndl-tab', baseClasses, className);\n\n // Only the active tab should be in the tab sequence initially\n // Other tabs can be focused via arrow keys but are not in tab sequence\n const tabIndex =\n value === tabId \|\| (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n return (\n <Tooltip\n type=\"simple\"\n {...tooltipProps?.root}\n isDisabled={description === undefined}\n >\n <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n <Component\n className={classes}\n style={style}\n onClick={() => {\n if (!isDisabled) {\n onChange(tabId);\n scrollTabIntoView(tabId);\n }\n }}\n role=\"tab\"\n id={tabId}\n aria-disabled={isDisabled}\n aria-label={description}\n aria-selected={value === tabId}\n aria-controls={getTabPanelId(tabId)}\n tabIndex={tabIndex}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <span className=\"ndl-tab-content\">{children}</span>\n {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n </Component>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {description}\n </Tooltip.Content>\n </Tooltip>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n /* The content displayed in the tab panel /\n children: React.ReactNode;\n /* The currently selected tabId. The tab is visible if the value is equal to the tabId /\n value: TabId;\n /* The id of the tab panel /\n tabId: TabId;\n /* Additional class name /\n className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n as,\n children,\n value,\n tabId,\n style,\n className,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <>\n {value === tabId ? (\n <Component\n role=\"tabpanel\"\n id={getTabPanelId(tabId)}\n aria-labelledby={tabId}\n style={style}\n className={classNames(className)}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n ) : null}\n </>\n );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n /* The content of the badge */\n children: React.ReactNode;\n};\n\nconst TabBadge = ({\n children,\n ref,\n htmlAttributes,\n style,\n className,\n ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n const classes = classNames('ndl-tab-badge', className);\n return (\n <Typography\n ref={ref}\n variant=\"subheading-small\"\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n Badge: TabBadge,\n Tab: TabsTab,\n TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}
1	+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { useMergeRefs } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { ArrowLeftCircleIconOutline } from '../icons/generated/heroIcons/ArrowLeftCircleIconOutline';\nimport { ArrowRightCircleIconOutline } from '../icons/generated/heroIcons/ArrowRightCircleIconOutline';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\nimport { useTabsScrollOverflow } from './use-tabs-scroll-overflow';\n\n// Reusable scroll button component\nconst ScrollButton = ({\n direction,\n isVisible,\n onClick,\n onBackground,\n}: {\n direction: 'left' \| 'right';\n isVisible: boolean;\n onClick: () => void;\n onBackground: React.ComponentProps<typeof TabsComponent>['onBackground'];\n}) => {\n const Icon =\n direction === 'left'\n ? ArrowLeftCircleIconOutline\n : ArrowRightCircleIconOutline;\n const positionClass =\n direction === 'left' ? 'ndl-scroll-left-item' : 'ndl-scroll-right-item';\n\n return (\n <div\n className={classNames('ndl-scroll-item', positionClass, {\n 'ndl-scroll-item-hidden': !isVisible,\n 'ndl-scroll-item-on-background-default': onBackground === 'default',\n 'ndl-scroll-item-on-background-weak': onBackground === 'weak',\n })}\n >\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"ndl-scroll-icon-wrapper\"\n onClick={onClick}\n aria-hidden=\"true\"\n >\n <Icon className=\"ndl-scroll-icon\" />\n </button>\n </div>\n );\n};\n\ntype TabId = string;\ntype Size = 'small' \| 'large';\ntype Fill = 'underline' \| 'filled';\n\ntype BaseTabsProps<T extends TabId> = {\n /* The currently active tabId /\n value: T;\n /* Callback function triggered when a new tab is selected /\n onChange: (event: T) => void;\n // TODO v5: add leadingVisual & trailingVisual props, to allow for children not to have flex (allowing text ellipsis). Also add a tooltip when ellipsing.\n /* The content dislayed in the tabs /\n children: React.ReactNode \| string;\n /* The fill type of the tabs /\n fill?: Fill;\n /* The size of the tabs /\n size?: Size;\n /* What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. /\n onBackground?: 'weak' \| 'default';\n};\n\ntype TabsContextType<T extends TabId> = Required<\n Pick<BaseTabsProps<T>, 'fill' \| 'size' \| 'onChange' \| 'value'>\n> & {\n registerTab: (tabId: T, ref: React.RefObject<HTMLElement \| null>) => void;\n unregisterTab: (tabId: T) => void;\n scrollTabIntoView: (tabId: T) => void;\n firstTabId: T \| null;\n isValuePresent: boolean;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any\nconst TabsContext = React.createContext<TabsContextType<any> \| null>(null);\n\nconst useTabsContext = () => {\n const context = useContext(TabsContext);\n\n if (context === null) {\n throw new Error('Tab used without context');\n }\n\n return context;\n};\n\nconst getTabPanelId = (tabId: TabId) => `tabpanel-${tabId}`;\n\nconst getGeneralTabClasses = (size: Size, fill: Fill) => {\n return {\n 'ndl-filled-tab': fill === 'filled',\n 'ndl-large': size === 'large',\n 'ndl-small': size === 'small',\n 'ndl-underline-tab': fill === 'underline',\n };\n};\n\nconst TabsComponent = <U extends TabId, T extends React.ElementType = 'div'>({\n children,\n size = 'large',\n fill = 'underline',\n onChange,\n value,\n onBackground = 'weak',\n className,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, BaseTabsProps<U>>) => {\n const tabRefs = useRef<Map<U, React.RefObject<HTMLElement \| null>>>(\n new Map(),\n );\n const containerRef = useRef<HTMLElement>(null);\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs([containerRef, ref]);\n const [firstTabId, setFirstTabId] = useState<U \| null>(null);\n const [isValuePresent, setIsValuePresent] = useState(false);\n const valueRef = useRef(value);\n\n // Use the custom hook for scroll overflow behavior\n const { scrollState, scrollToNextItem, checkOverflow } =\n useTabsScrollOverflow(scrollContainerRef);\n\n useEffect(() => {\n valueRef.current = value;\n setIsValuePresent(tabRefs.current.has(value));\n }, [value]);\n\n const registerTab = useCallback(\n (tabId: U, tabRef: React.RefObject<HTMLElement \| null>) => {\n tabRefs.current.set(tabId, tabRef);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(true);\n }\n },\n [],\n );\n\n const unregisterTab = useCallback((tabId: U) => {\n tabRefs.current.delete(tabId);\n const first = tabRefs.current.keys().next().value ?? null;\n setFirstTabId((prev) => (prev === first ? prev : first));\n\n if (tabId === valueRef.current) {\n setIsValuePresent(false);\n }\n }, []);\n\n // Check overflow when children change\n useEffect(() => {\n checkOverflow();\n }, [checkOverflow, children]);\n\n const scrollTabIntoView = useCallback((tabId: U) => {\n const tabRef = tabRefs.current.get(tabId);\n const scrollContainer = scrollContainerRef.current;\n\n if (tabRef?.current && scrollContainer) {\n const tabRect = tabRef.current.getBoundingClientRect();\n const containerRect = scrollContainer.getBoundingClientRect();\n const containerCenter = containerRect.left + containerRect.width / 2;\n\n const targetScrollLeft =\n scrollContainer.scrollLeft +\n (tabRect.left - containerCenter + tabRect.width / 2);\n\n scrollContainer.scrollTo({\n behavior: 'smooth',\n left: targetScrollLeft,\n });\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n return;\n }\n\n event.preventDefault();\n\n const tabIds = Array.from(tabRefs.current.keys());\n const focusedElement = document.activeElement;\n\n // Find the currently focused tab\n let currentIndex = -1;\n for (let index = 0; index < tabIds.length; index++) {\n const tabRef = tabRefs.current.get(tabIds[index]);\n if (tabRef?.current === focusedElement) {\n currentIndex = index;\n break;\n }\n }\n\n // If no tab is focused, focus the active tab. Or the first tab if the active tab is not present.\n if (currentIndex === -1) {\n const activeTabRef = tabRefs.current.get(value);\n if (activeTabRef?.current) {\n activeTabRef.current.focus();\n } else if (!isValuePresent && firstTabId !== null) {\n const firstTabRef = tabRefs.current.get(firstTabId);\n if (firstTabRef?.current) {\n firstTabRef.current.focus();\n }\n }\n return;\n }\n\n let nextIndex: number;\n\n if (event.key === 'ArrowRight') {\n nextIndex = currentIndex === tabIds.length - 1 ? 0 : currentIndex + 1;\n } else {\n nextIndex = currentIndex === 0 ? tabIds.length - 1 : currentIndex - 1;\n }\n\n const nextTabId = tabIds[nextIndex];\n const nextTabRef = tabRefs.current.get(nextTabId);\n\n if (nextTabRef?.current) {\n nextTabRef.current.focus();\n scrollTabIntoView(nextTabId);\n }\n },\n [value, scrollTabIntoView, firstTabId, isValuePresent],\n );\n\n const classes = classNames(\n 'ndl-tabs',\n getGeneralTabClasses(size, fill),\n className,\n );\n\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <Component\n className={classes}\n style={style}\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n onKeyDown={handleKeyDown}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <ScrollButton\n direction=\"left\"\n isVisible={scrollState.isLeftVisible}\n onClick={() => scrollToNextItem('left')}\n onBackground={onBackground}\n />\n <ScrollButton\n direction=\"right\"\n isVisible={scrollState.isRightVisible}\n onClick={() => scrollToNextItem('right')}\n onBackground={onBackground}\n />\n <TabsContext.Provider\n value={{\n fill,\n firstTabId,\n isValuePresent,\n onChange,\n registerTab,\n scrollTabIntoView,\n size,\n unregisterTab,\n value,\n }}\n >\n <div className=\"ndl-tabs-container\" ref={scrollContainerRef}>\n {children}\n </div>\n </TabsContext.Provider>\n </Component>\n );\n};\n\nTabsComponent.displayName = 'Tabs';\n\n/\n @remarks\n * When the `description` prop is set, hovering over the tab will show a tooltip with the text provided in the `description` prop. `tooltipProps` can be used to customize the tooltip appearance. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n /\ntype TabProps<T extends TabId> = {\n /* The id of the tab /\n id: T;\n /* The content of the tab /\n children: React.ReactNode \| string;\n /* A string that will be shown as a tooltip when hovering over the button it also acts as an aria-label- {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label} /\n description?: string;\n /* Props for the tooltip component. /\n tooltipProps?: TooltipObjectProps;\n /* Additional class name /\n className?: string;\n /* Whether the tab is disabled /\n isDisabled?: boolean;\n};\n\nconst TabsTab = <\n U extends TabId = TabId,\n T extends React.ElementType = 'button',\n>({\n children,\n id: tabId,\n isDisabled = false,\n className,\n description,\n tooltipProps,\n style,\n as,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabProps<U>>) => {\n const {\n size,\n fill,\n value,\n onChange,\n registerTab,\n unregisterTab,\n scrollTabIntoView,\n firstTabId,\n isValuePresent,\n } = useTabsContext();\n const internalRef = useRef<HTMLElement>(null);\n\n // Create a merged ref that handles both ref objects and ref functions\n const mergedRef = useMergeRefs([\n internalRef as React.RefObject<HTMLElement>,\n ref as React.RefObject<HTMLElement>,\n ]);\n\n // Register/unregister tab for keyboard navigation\n useEffect(() => {\n registerTab(tabId, internalRef);\n\n return () => {\n unregisterTab(tabId);\n };\n }, [tabId, registerTab, unregisterTab]);\n\n const baseClasses = classNames({\n ...getGeneralTabClasses(size, fill),\n 'ndl-disabled': isDisabled,\n 'ndl-selected': value === tabId,\n });\n\n const Component: React.ElementType = as ?? 'button';\n\n const classes = classNames('ndl-tab', baseClasses, className);\n\n // Only the active tab should be in the tab sequence initially\n // Other tabs can be focused via arrow keys but are not in tab sequence\n const tabIndex =\n value === tabId \|\| (!isValuePresent && tabId === firstTabId) ? 0 : -1;\n\n return (\n <Tooltip\n type=\"simple\"\n {...tooltipProps?.root}\n isDisabled={description === undefined}\n >\n <Tooltip.Trigger {...tooltipProps?.trigger} hasButtonWrapper>\n <Component\n className={classes}\n style={style}\n onClick={() => {\n if (!isDisabled) {\n onChange(tabId);\n scrollTabIntoView(tabId);\n }\n }}\n role=\"tab\"\n id={tabId}\n aria-disabled={isDisabled}\n aria-label={description}\n aria-selected={value === tabId}\n aria-controls={getTabPanelId(tabId)}\n tabIndex={tabIndex}\n ref={mergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <span className=\"ndl-tab-content\">{children}</span>\n {fill === 'underline' && <span className=\"ndl-tab-underline\" />}\n </Component>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {description}\n </Tooltip.Content>\n </Tooltip>\n );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabPanelProps = {\n /* The content displayed in the tab panel /\n children: React.ReactNode;\n /* The currently selected tabId. The tab is visible if the value is equal to the tabId /\n value: TabId;\n /* The id of the tab panel /\n tabId: TabId;\n /* Additional class name /\n className?: string;\n};\n\nconst TabsTabPanel = <T extends React.ElementType = 'div'>({\n as,\n children,\n value,\n tabId,\n style,\n className,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, TabPanelProps>) => {\n const Component: React.ElementType = as ?? 'div';\n\n return (\n <>\n {value === tabId ? (\n <Component\n role=\"tabpanel\"\n id={getTabPanelId(tabId)}\n aria-labelledby={tabId}\n style={style}\n className={classNames(className)}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Component>\n ) : null}\n </>\n );\n};\n\nTabsTabPanel.displayName = 'Tabs.TabPanel';\n\ntype TabBadgeProps = {\n /* The content of the badge */\n children: React.ReactNode;\n};\n\nconst TabBadge = ({\n children,\n ref,\n htmlAttributes,\n style,\n className,\n ...restProps\n}: CommonProps<'span', TabBadgeProps>) => {\n const classes = classNames('ndl-tab-badge', className);\n return (\n <Typography\n ref={ref}\n variant=\"subheading-medium\"\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\nconst Tabs = Object.assign(TabsComponent, {\n Badge: TabBadge,\n Tab: TabsTab,\n TabPanel: TabsTabPanel,\n});\n\nexport { Tabs };\n"]}

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js CHANGED Viewed

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [underlineValue, setUnderlineValue] = (0, react_2.useState)('0');
     const [filledValue, setFilledValue] = (0, react_2.useState)('0');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "label", children: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-32", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Underline (Default)" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: underlineValue, onChange: setUnderlineValue, className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: underlineValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-3", children: "Filled" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(react_1.Tabs, { value: filledValue, onChange: setFilledValue, fill: "filled", className: "n-mb-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "0", children: "Tab 1" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "1", children: "Tab 2" }), (0, jsx_runtime_1.jsx)(react_1.Tabs.Tab, { id: "2", children: "Tab 3" })] }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "0", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 1 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "1", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 2 content" }) }), (0, jsx_runtime_1.jsx)(react_1.Tabs.TabPanel, { value: filledValue, tabId: "2", children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Tab 3 content" }) })] })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=tabs-fill-variants.story.js.map

package/lib/cjs/tabs/stories/tabs-fill-variants.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,oCAAiC,~~EAC5D~~,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,~~OAAO~~,uBAAoB,~~EAC/C~~,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n const [filledValue, setFilledValue] = useState<TabValues>('0');\n\n return (\n <div className=\"n-flex n-gap-token-8\">\n <div className=\"n-flex n-flex-col n-gap-token-32\">\n <Typography variant=\"~~label~~\">Underline (Default)</Typography>\n <div>\n <Tabs\n value={underlineValue}\n onChange={setUnderlineValue}\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={underlineValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n\n <div className=\"n-flex n-flex-col n-gap-token-8\">\n <Typography variant=\"~~label~~\">Filled</Typography>\n <div>\n <Tabs\n value={filledValue}\n onChange={setFilledValue}\n fill=\"filled\"\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={filledValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"tabs-fill-variants.story.js","sourceRoot":"","sources":["../../../../src/tabs/stories/tabs-fill-variants.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAoD;AACpD,iCAAiC;AAIjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IACrE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAY,GAAG,CAAC,CAAC;IAE/D,OAAO,CACL,iCAAK,SAAS,EAAC,sBAAsB,aACnC,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,oCAAiC,EAC9D,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,cAAc,EACrB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,YAC7C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,EAEN,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,kBAAU,IAAC,OAAO,EAAC,SAAS,uBAAoB,EACjD,4CACE,wBAAC,YAAI,IACH,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,cAAc,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,cAAc,aAExB,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,EACjC,uBAAC,YAAI,CAAC,GAAG,IAAC,EAAE,EAAC,GAAG,sBAAiB,IAC5B,EACP,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,EAChB,uBAAC,YAAI,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAC,GAAG,YAC1C,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,8BAA2B,GAC9C,IACZ,IACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tabs, Typography } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\ntype TabValues = '0' \| '1' \| '2';\n\nconst Component = () => {\n const [underlineValue, setUnderlineValue] = useState<TabValues>('0');\n const [filledValue, setFilledValue] = useState<TabValues>('0');\n\n return (\n <div className=\"n-flex n-gap-token-8\">\n <div className=\"n-flex n-flex-col n-gap-token-32\">\n <Typography variant=\"title-3\">Underline (Default)</Typography>\n <div>\n <Tabs\n value={underlineValue}\n onChange={setUnderlineValue}\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={underlineValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={underlineValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n\n <div className=\"n-flex n-flex-col n-gap-token-8\">\n <Typography variant=\"title-3\">Filled</Typography>\n <div>\n <Tabs\n value={filledValue}\n onChange={setFilledValue}\n fill=\"filled\"\n className=\"n-mb-token-8\"\n >\n <Tabs.Tab id=\"0\">Tab 1</Tabs.Tab>\n <Tabs.Tab id=\"1\">Tab 2</Tabs.Tab>\n <Tabs.Tab id=\"2\">Tab 3</Tabs.Tab>\n </Tabs>\n <Tabs.TabPanel value={filledValue} tabId=\"0\">\n <Typography variant=\"body-medium\">Tab 1 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"1\">\n <Typography variant=\"body-medium\">Tab 2 content</Typography>\n </Tabs.TabPanel>\n <Tabs.TabPanel value={filledValue} tabId=\"2\">\n <Typography variant=\"body-medium\">Tab 3 content</Typography>\n </Tabs.TabPanel>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}