@sikt/sds-tabs 3.0.4 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +2 -2
  3. package/dist/index.css +10 -3
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
4
4
 
5
+ ## [3.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.0.4...@sikt/sds-tabs@3.1.0) (2025-05-20)
6
+
7
+ ### Features
8
+
9
+ - **tabs:** update with new typography ([045e3cb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/045e3cb05df71eb09b8cc67870de33bf77073745))
10
+
11
+ ### Bug Fixes
12
+
13
+ - **deps:** update @sikt/sds-core ([f1f7023](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/f1f7023a7e77980ef15993b0bdac76bff254b651))
14
+
5
15
  ## [3.0.4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.0.3...@sikt/sds-tabs@3.0.4) (2025-02-24)
6
16
 
7
17
  ### Bug Fixes
package/README.md CHANGED
@@ -13,7 +13,7 @@ import { Tabs, TabList, Tab, TabPanel } from "@sikt/sds-tabs";
13
13
  import "@sikt/sds-tabs/dist/index.css";
14
14
 
15
15
  <Tabs>
16
- <TabList>
16
+ <TabList aria-label="Tabs Label">
17
17
  <Tab>First Tab</Tab>
18
18
  <Tab>Second Tab</Tab>
19
19
  <Tab>Third Tab</Tab>
@@ -36,7 +36,7 @@ Create custom markup:
36
36
 
37
37
  ```html
38
38
  <div class="sds-tabs">
39
- <div class="sds-tabs__tab-list" role="tablist" aria-label="Sample Tabs">
39
+ <div class="sds-tabs__tab-list" role="tablist" aria-label="Tabs Label">
40
40
  <button
41
41
  class="sds-tabs__tab"
42
42
  role="tab"
package/dist/index.css CHANGED
@@ -14,13 +14,20 @@
14
14
  color: var(--sds-color-text-primary);
15
15
  display: flex;
16
16
  gap: var(--sds-space-gap-small);
17
- font-size: var(--sds-typography-body-fontsize-large);
18
- line-height: var(--sds-typography-body-lineheight-large);
17
+ font-size: var(--sds-typography-label-l-fontsize);
18
+ font-weight: var(--sds-typography-label-l-fontweight);
19
+ line-height: var(--sds-typography-label-l-lineheight);
19
20
  padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);
20
21
  margin-bottom: calc(var(--tab-list-border-bottom) * -1);
21
22
  }
22
23
  .sds-tabs__tab-icon {
23
- font-size: var(--sds-base-size-m);
24
+ align-items: center;
25
+ display: flex;
26
+ font-size: var(--sds-typography-fontsize-700);
27
+ justify-content: center;
28
+ }
29
+ .sds-tabs__tab-badge {
30
+ margin: -1px 0;
24
31
  }
25
32
  .sds-tabs__tab[aria-selected=true] {
26
33
  border-color: var(--sds-color-interaction-primary-strong-default);
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tabs.pcss","../src/tab-link.pcss"],"sourcesContent":[".sds-tabs {\n --tab-list-border-bottom: var(--sds-space-border-weight-regular);\n}\n\n .sds-tabs__tab-list {\n border-bottom: var(--tab-list-border-bottom) solid\n var(--sds-color-layout-divider-subtle);\n display: flex;\n margin-bottom: var(--sds-space-gap-small);\n }\n\n .sds-tabs__tab {\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-fontsize-large);\n line-height: var(--sds-typography-body-lineheight-large);\n padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n }\n\n .sds-tabs__tab-icon {\n font-size: var(--sds-base-size-m);\n }\n\n .sds-tabs__tab[aria-selected=\"true\"] {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-tabs__tab:hover,\n .sds-tabs__tab:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-tabs__tab:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-tabs__tab:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-tabs__tab-panel:focus-visible {\n outline: var(--sds-focus-outline);\n }\n",".sds-tab-link {\n display: inline-flex;\n text-decoration: none;\n}\n\n .sds-tab-link--selected {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-tab-link:focus-visible {\n outline-offset: 0;\n }\n"],"mappings":";AAAA,CAAC;AACC,4BAA0B,IAAI;AAChC;AAEE,CAAC;AACC,iBAAe,IAAI,0BAA0B,MAC3C,IAAI;AACN,WAAS;AACT,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,eAAa;AACb,UAAQ,EAAE;AACV,iBAAe,IAAI,gCAAgC,MAAM;AACzD,SAAO,IAAI;AACX,WAAS;AACT,OAAK,IAAI;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,WAAS,IAAI,4BAA4B,IAAI;AAC7C,iBAAe,KAAK,IAAI,0BAA0B,EAAE;AACtD;AAEA,CAAC;AACG,aAAW,IAAI;AACjB;AAEF,CAjBC,aAiBa,CAAC;AACX,gBAAc,IAAI;AACpB;AAEF,CArBC,aAqBa;AACZ,CAtBD,aAsBe;AACZ,oBAAkB,KAChB;AAEJ;AAEF,CA5BC,aA4Ba;AACV,oBAAkB,KAChB;AAEF,gBAAc,IAAI;AACpB;AAEF,CAnCC,aAmCa;AACV,WAAS,IAAI;AACf;AAEF,CAAC,mBAAmB;AAChB,WAAS,IAAI;AACf;;;ACpDJ,CAAC;AACC,WAAS;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CATD,YASc;AACX,kBAAgB;AAClB;","names":[]}
1
+ {"version":3,"sources":["../src/tabs.pcss","../src/tab-link.pcss"],"sourcesContent":[".sds-tabs {\n --tab-list-border-bottom: var(--sds-space-border-weight-regular);\n}\n\n .sds-tabs__tab-list {\n border-bottom: var(--tab-list-border-bottom) solid\n var(--sds-color-layout-divider-subtle);\n display: flex;\n margin-bottom: var(--sds-space-gap-small);\n }\n\n .sds-tabs__tab {\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-label-l-fontsize);\n font-weight: var(--sds-typography-label-l-fontweight);\n line-height: var(--sds-typography-label-l-lineheight);\n padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n }\n\n .sds-tabs__tab-icon {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n }\n\n .sds-tabs__tab-badge {\n margin: -1px 0;\n }\n\n .sds-tabs__tab[aria-selected=\"true\"] {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-tabs__tab:hover,\n .sds-tabs__tab:focus-visible {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n }\n\n .sds-tabs__tab:active {\n background-color: var(\n --sds-color-interaction-primary-transparent-pressed\n );\n border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-tabs__tab:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-tabs__tab-panel:focus-visible {\n outline: var(--sds-focus-outline);\n }\n",".sds-tab-link {\n display: inline-flex;\n text-decoration: none;\n}\n\n .sds-tab-link--selected {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-tab-link:focus-visible {\n outline-offset: 0;\n }\n"],"mappings":";AAAA,CAAC;AACC,4BAA0B,IAAI;AAChC;AAEE,CAAC;AACC,iBAAe,IAAI,0BAA0B,MAC3C,IAAI;AACN,WAAS;AACT,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,eAAa;AACb,UAAQ,EAAE;AACV,iBAAe,IAAI,gCAAgC,MAAM;AACzD,SAAO,IAAI;AACX,WAAS;AACT,OAAK,IAAI;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI,4BAA4B,IAAI;AAC7C,iBAAe,KAAK,IAAI,0BAA0B,EAAE;AACtD;AAEA,CAAC;AACG,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;AAEF,CAAC;AACG,UAAQ,KAAK;AACf;AAEF,CAzBC,aAyBa,CAAC;AACX,gBAAc,IAAI;AACpB;AAEF,CA7BC,aA6Ba;AACZ,CA9BD,aA8Be;AACZ,oBAAkB,KAChB;AAEJ;AAEF,CApCC,aAoCa;AACV,oBAAkB,KAChB;AAEF,gBAAc,IAAI;AACpB;AAEF,CA3CC,aA2Ca;AACV,WAAS,IAAI;AACf;AAEF,CAAC,mBAAmB;AAChB,WAAS,IAAI;AACf;;;AC5DJ,CAAC;AACC,WAAS;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CATD,YASc;AACX,kBAAgB;AAClB;","names":[]}
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["createContext","useState","useId","useEffect","Children","jsx","clsx","isValidElement","Fragment","cloneElement","useContext","index","_a","_b","jsxs","forwardRef"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\n isValidElement,\n useEffect,\n useId,\n useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n id: string;\n count: number;\n isSelectOnFocus: boolean;\n selectedIndex: number;\n setSelectedIndex: (index: number) => void;\n setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultIndex?: number;\n isSelectOnFocus?: boolean;\n onChange?: (index: number) => void;\n children: ReactNode;\n className?: string;\n}\n\nexport const Tabs = ({\n defaultIndex = 0,\n onChange,\n isSelectOnFocus = false,\n children,\n className,\n ...rest\n}: TabsProps) => {\n const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n const id = useId();\n\n useEffect(() => {\n if (onChange && previousIndex !== selectedIndex) {\n onChange(selectedIndex);\n }\n }, [onChange, previousIndex, selectedIndex]);\n\n const arrayChildren = Children.toArray(children);\n const count = arrayChildren.length - 1;\n\n return (\n <TabsContext.Provider\n value={{\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n }}\n >\n <div className={clsx(\"sds-tabs\", className)} {...rest}>\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child) && index > 0) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabPanelProps & { index: number }>,\n {\n index: index - 1,\n },\n )}\n </>\n );\n } else {\n return child;\n }\n })}\n </div>\n </TabsContext.Provider>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n \"aria-label\": NonNullable<string>;\n className?: string;\n}\n\nexport const TabList = ({\n children,\n \"aria-label\": ariaLabel,\n className,\n ...rest\n}: TabListProps) => {\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={clsx(\"sds-tabs__tab-list\", className)}\n role=\"tablist\"\n aria-label={ariaLabel}\n {...rest}\n >\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child)) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabProps & { index: number }>,\n {\n index,\n },\n )}\n </>\n );\n }\n })}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n}\n\nexport const Tab = ({\n children,\n className,\n icon,\n badge,\n ...rest\n}: TabProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const {\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n } = context;\n\n const isSelected = index === selectedIndex;\n const handleSelect = (index: number) => {\n if (isSelectOnFocus) {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }\n };\n const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n const firstIndex = 0;\n const lastIndex = count - 1;\n const currentTarget = event.currentTarget;\n const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n if (event.key === \"ArrowLeft\") {\n const previousSibling = currentTarget.previousSibling as HTMLElement;\n if (index > firstIndex) {\n previousSibling.focus();\n } else {\n lastChild.focus();\n }\n\n handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n } else if (event.key === \"ArrowRight\") {\n const nextSibling = currentTarget.nextSibling as HTMLElement;\n if (index < lastIndex) {\n nextSibling.focus();\n } else {\n firstChild.focus();\n }\n\n handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n } else if (event.key === \"Home\") {\n firstChild.focus();\n handleSelect(firstIndex);\n } else if (event.key === \"End\") {\n lastChild.focus();\n handleSelect(lastIndex);\n } else if (event.key === \"Enter\" || event.code === \"Space\") {\n setSelectedIndex(index);\n }\n };\n\n return (\n <button\n className={clsx(\"sds-tabs__tab\", className)}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={`panel-${id}-${index}`}\n id={`tab-${id}-${index}`}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }}\n onKeyDown={handleKeyPress}\n {...rest}\n >\n {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n {children}\n {badge && (\n <span className=\"sds-tabs__tab-badge\">\n {isValidElement(badge) &&\n cloneElement(badge as ReactElement<PropsWithChildren<BadgeProps>>, {\n visibility: \"strong\",\n })}\n </span>\n )}\n </button>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const { id, selectedIndex } = context;\n\n const isSelected = index === selectedIndex;\n return (\n <div\n className={clsx(\"sds-tabs__tab-panel\", className)}\n id={`panel-${id}-${index}`}\n role=\"tabpanel\"\n tabIndex={isSelected ? undefined : -1}\n aria-labelledby={`tab-${id}-${index}`}\n hidden={!isSelected}\n {...rest}\n >\n {children}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n AnchorHTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n forwardRef,\n isValidElement,\n PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n (\n {\n children,\n className,\n icon,\n badge,\n href,\n isSelected,\n ...rest\n }: TabLinkProps,\n ref,\n ) => {\n return (\n <a\n className={clsx(\n \"sds-tabs__tab\",\n \"sds-tab-link\",\n isSelected && \"sds-tab-link--selected\",\n className,\n )}\n href={href}\n ref={ref}\n {...rest}\n >\n {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n {children}\n {badge && (\n <div className=\"sds-tabs__tab-badge\">\n {isSelected\n ? isValidElement(badge) &&\n cloneElement(\n badge as ReactElement<PropsWithChildren<BadgeProps>>,\n { visibility: \"strong\" },\n )\n : badge}\n </div>\n )}\n </a>\n );\n },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}
1
+ {"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["createContext","useState","useId","useEffect","Children","jsx","clsx","isValidElement","Fragment","cloneElement","useContext","index","_a","_b","jsxs","forwardRef"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\n isValidElement,\n useEffect,\n useId,\n useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n id: string;\n count: number;\n isSelectOnFocus: boolean;\n selectedIndex: number;\n setSelectedIndex: (index: number) => void;\n setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultIndex?: number;\n isSelectOnFocus?: boolean;\n onChange?: (index: number) => void;\n children: ReactNode;\n className?: string;\n}\n\nexport const Tabs = ({\n defaultIndex = 0,\n onChange,\n isSelectOnFocus = false,\n children,\n className,\n ...rest\n}: TabsProps) => {\n const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n const id = useId();\n\n useEffect(() => {\n if (onChange && previousIndex !== selectedIndex) {\n onChange(selectedIndex);\n }\n }, [onChange, previousIndex, selectedIndex]);\n\n const arrayChildren = Children.toArray(children);\n const count = arrayChildren.length - 1;\n\n return (\n <TabsContext.Provider\n value={{\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n }}\n >\n <div className={clsx(\"sds-tabs\", className)} {...rest}>\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child) && index > 0) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabPanelProps & { index: number }>,\n {\n index: index - 1,\n },\n )}\n </>\n );\n } else {\n return child;\n }\n })}\n </div>\n </TabsContext.Provider>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n \"aria-label\": NonNullable<string>;\n className?: string;\n}\n\nexport const TabList = ({\n children,\n \"aria-label\": ariaLabel,\n className,\n ...rest\n}: TabListProps) => {\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={clsx(\"sds-tabs__tab-list\", className)}\n role=\"tablist\"\n aria-label={ariaLabel}\n {...rest}\n >\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child)) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabProps & { index: number }>,\n {\n index,\n },\n )}\n </>\n );\n }\n })}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n}\n\nexport const Tab = ({\n children,\n className,\n icon,\n badge,\n ...rest\n}: TabProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const {\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n } = context;\n\n const isSelected = index === selectedIndex;\n const handleSelect = (index: number) => {\n if (isSelectOnFocus) {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }\n };\n const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n const firstIndex = 0;\n const lastIndex = count - 1;\n const currentTarget = event.currentTarget;\n const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n if (event.key === \"ArrowLeft\") {\n const previousSibling = currentTarget.previousSibling as HTMLElement;\n if (index > firstIndex) {\n previousSibling.focus();\n } else {\n lastChild.focus();\n }\n\n handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n } else if (event.key === \"ArrowRight\") {\n const nextSibling = currentTarget.nextSibling as HTMLElement;\n if (index < lastIndex) {\n nextSibling.focus();\n } else {\n firstChild.focus();\n }\n\n handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n } else if (event.key === \"Home\") {\n firstChild.focus();\n handleSelect(firstIndex);\n } else if (event.key === \"End\") {\n lastChild.focus();\n handleSelect(lastIndex);\n } else if (event.key === \"Enter\" || event.code === \"Space\") {\n setSelectedIndex(index);\n }\n };\n\n return (\n <button\n className={clsx(\"sds-tabs__tab\", className)}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={`panel-${id}-${index}`}\n id={`tab-${id}-${index}`}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }}\n onKeyDown={handleKeyPress}\n {...rest}\n >\n {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n {children}\n {badge && (\n <span className=\"sds-tabs__tab-badge\">\n {isValidElement(badge) &&\n cloneElement(badge as ReactElement<PropsWithChildren<BadgeProps>>, {\n visibility: \"strong\",\n })}\n </span>\n )}\n </button>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const { id, selectedIndex } = context;\n\n const isSelected = index === selectedIndex;\n return (\n <div\n className={clsx(\"sds-tabs__tab-panel\", className)}\n id={`panel-${id}-${index}`}\n role=\"tabpanel\"\n tabIndex={isSelected ? undefined : -1}\n aria-labelledby={`tab-${id}-${index}`}\n hidden={!isSelected}\n {...rest}\n >\n {children}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n AnchorHTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n forwardRef,\n isValidElement,\n PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n (\n {\n children,\n className,\n icon,\n badge,\n href,\n isSelected,\n ...rest\n }: TabLinkProps,\n ref,\n ) => {\n return (\n <a\n className={clsx(\n \"sds-tabs__tab\",\n \"sds-tab-link\",\n isSelected && \"sds-tab-link--selected\",\n className,\n )}\n href={href}\n ref={ref}\n {...rest}\n >\n {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n {children}\n {badge && (\n <div className=\"sds-tabs__tab-badge\">\n {isSelected\n ? isValidElement(badge) &&\n cloneElement(\n badge as ReactElement<PropsWithChildren<BadgeProps>>,\n { visibility: \"strong\" },\n )\n : badge}\n </div>\n )}\n </a>\n );\n },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["Children","jsx","clsx","isValidElement","Fragment","cloneElement","index","_a","_b","useContext","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\n isValidElement,\n useEffect,\n useId,\n useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n id: string;\n count: number;\n isSelectOnFocus: boolean;\n selectedIndex: number;\n setSelectedIndex: (index: number) => void;\n setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultIndex?: number;\n isSelectOnFocus?: boolean;\n onChange?: (index: number) => void;\n children: ReactNode;\n className?: string;\n}\n\nexport const Tabs = ({\n defaultIndex = 0,\n onChange,\n isSelectOnFocus = false,\n children,\n className,\n ...rest\n}: TabsProps) => {\n const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n const id = useId();\n\n useEffect(() => {\n if (onChange && previousIndex !== selectedIndex) {\n onChange(selectedIndex);\n }\n }, [onChange, previousIndex, selectedIndex]);\n\n const arrayChildren = Children.toArray(children);\n const count = arrayChildren.length - 1;\n\n return (\n <TabsContext.Provider\n value={{\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n }}\n >\n <div className={clsx(\"sds-tabs\", className)} {...rest}>\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child) && index > 0) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabPanelProps & { index: number }>,\n {\n index: index - 1,\n },\n )}\n </>\n );\n } else {\n return child;\n }\n })}\n </div>\n </TabsContext.Provider>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n \"aria-label\": NonNullable<string>;\n className?: string;\n}\n\nexport const TabList = ({\n children,\n \"aria-label\": ariaLabel,\n className,\n ...rest\n}: TabListProps) => {\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={clsx(\"sds-tabs__tab-list\", className)}\n role=\"tablist\"\n aria-label={ariaLabel}\n {...rest}\n >\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child)) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabProps & { index: number }>,\n {\n index,\n },\n )}\n </>\n );\n }\n })}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n}\n\nexport const Tab = ({\n children,\n className,\n icon,\n badge,\n ...rest\n}: TabProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const {\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n } = context;\n\n const isSelected = index === selectedIndex;\n const handleSelect = (index: number) => {\n if (isSelectOnFocus) {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }\n };\n const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n const firstIndex = 0;\n const lastIndex = count - 1;\n const currentTarget = event.currentTarget;\n const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n if (event.key === \"ArrowLeft\") {\n const previousSibling = currentTarget.previousSibling as HTMLElement;\n if (index > firstIndex) {\n previousSibling.focus();\n } else {\n lastChild.focus();\n }\n\n handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n } else if (event.key === \"ArrowRight\") {\n const nextSibling = currentTarget.nextSibling as HTMLElement;\n if (index < lastIndex) {\n nextSibling.focus();\n } else {\n firstChild.focus();\n }\n\n handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n } else if (event.key === \"Home\") {\n firstChild.focus();\n handleSelect(firstIndex);\n } else if (event.key === \"End\") {\n lastChild.focus();\n handleSelect(lastIndex);\n } else if (event.key === \"Enter\" || event.code === \"Space\") {\n setSelectedIndex(index);\n }\n };\n\n return (\n <button\n className={clsx(\"sds-tabs__tab\", className)}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={`panel-${id}-${index}`}\n id={`tab-${id}-${index}`}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }}\n onKeyDown={handleKeyPress}\n {...rest}\n >\n {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n {children}\n {badge && (\n <span className=\"sds-tabs__tab-badge\">\n {isValidElement(badge) &&\n cloneElement(badge as ReactElement<PropsWithChildren<BadgeProps>>, {\n visibility: \"strong\",\n })}\n </span>\n )}\n </button>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const { id, selectedIndex } = context;\n\n const isSelected = index === selectedIndex;\n return (\n <div\n className={clsx(\"sds-tabs__tab-panel\", className)}\n id={`panel-${id}-${index}`}\n role=\"tabpanel\"\n tabIndex={isSelected ? undefined : -1}\n aria-labelledby={`tab-${id}-${index}`}\n hidden={!isSelected}\n {...rest}\n >\n {children}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n AnchorHTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n forwardRef,\n isValidElement,\n PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n (\n {\n children,\n className,\n icon,\n badge,\n href,\n isSelected,\n ...rest\n }: TabLinkProps,\n ref,\n ) => {\n return (\n <a\n className={clsx(\n \"sds-tabs__tab\",\n \"sds-tab-link\",\n isSelected && \"sds-tab-link--selected\",\n className,\n )}\n href={href}\n ref={ref}\n {...rest}\n >\n {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n {children}\n {badge && (\n <div className=\"sds-tabs__tab-badge\">\n {isSelected\n ? isValidElement(badge) &&\n cloneElement(\n badge as ReactElement<PropsWithChildren<BadgeProps>>,\n { visibility: \"strong\" },\n )\n : badge}\n </div>\n )}\n </a>\n );\n },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}
1
+ {"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["Children","jsx","clsx","isValidElement","Fragment","cloneElement","index","_a","_b","useContext","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n createContext,\n isValidElement,\n useEffect,\n useId,\n useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n id: string;\n count: number;\n isSelectOnFocus: boolean;\n selectedIndex: number;\n setSelectedIndex: (index: number) => void;\n setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n defaultIndex?: number;\n isSelectOnFocus?: boolean;\n onChange?: (index: number) => void;\n children: ReactNode;\n className?: string;\n}\n\nexport const Tabs = ({\n defaultIndex = 0,\n onChange,\n isSelectOnFocus = false,\n children,\n className,\n ...rest\n}: TabsProps) => {\n const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n const id = useId();\n\n useEffect(() => {\n if (onChange && previousIndex !== selectedIndex) {\n onChange(selectedIndex);\n }\n }, [onChange, previousIndex, selectedIndex]);\n\n const arrayChildren = Children.toArray(children);\n const count = arrayChildren.length - 1;\n\n return (\n <TabsContext.Provider\n value={{\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n }}\n >\n <div className={clsx(\"sds-tabs\", className)} {...rest}>\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child) && index > 0) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabPanelProps & { index: number }>,\n {\n index: index - 1,\n },\n )}\n </>\n );\n } else {\n return child;\n }\n })}\n </div>\n </TabsContext.Provider>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n Children,\n HTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactNode;\n \"aria-label\": NonNullable<string>;\n className?: string;\n}\n\nexport const TabList = ({\n children,\n \"aria-label\": ariaLabel,\n className,\n ...rest\n}: TabListProps) => {\n const arrayChildren = Children.toArray(children);\n\n return (\n <div\n className={clsx(\"sds-tabs__tab-list\", className)}\n role=\"tablist\"\n aria-label={ariaLabel}\n {...rest}\n >\n {Children.map(arrayChildren, (child, index) => {\n if (isValidElement(child)) {\n return (\n <>\n {cloneElement(\n child as ReactElement<TabProps & { index: number }>,\n {\n index,\n },\n )}\n </>\n );\n }\n })}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n HTMLAttributes,\n KeyboardEvent,\n ReactElement,\n ReactNode,\n cloneElement,\n isValidElement,\n useContext,\n PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n}\n\nexport const Tab = ({\n children,\n className,\n icon,\n badge,\n ...rest\n}: TabProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const {\n id,\n count,\n isSelectOnFocus,\n selectedIndex,\n setSelectedIndex,\n setPreviousIndex,\n } = context;\n\n const isSelected = index === selectedIndex;\n const handleSelect = (index: number) => {\n if (isSelectOnFocus) {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }\n };\n const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n const firstIndex = 0;\n const lastIndex = count - 1;\n const currentTarget = event.currentTarget;\n const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n if (event.key === \"ArrowLeft\") {\n const previousSibling = currentTarget.previousSibling as HTMLElement;\n if (index > firstIndex) {\n previousSibling.focus();\n } else {\n lastChild.focus();\n }\n\n handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n } else if (event.key === \"ArrowRight\") {\n const nextSibling = currentTarget.nextSibling as HTMLElement;\n if (index < lastIndex) {\n nextSibling.focus();\n } else {\n firstChild.focus();\n }\n\n handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n } else if (event.key === \"Home\") {\n firstChild.focus();\n handleSelect(firstIndex);\n } else if (event.key === \"End\") {\n lastChild.focus();\n handleSelect(lastIndex);\n } else if (event.key === \"Enter\" || event.code === \"Space\") {\n setSelectedIndex(index);\n }\n };\n\n return (\n <button\n className={clsx(\"sds-tabs__tab\", className)}\n role=\"tab\"\n aria-selected={isSelected}\n aria-controls={`panel-${id}-${index}`}\n id={`tab-${id}-${index}`}\n tabIndex={isSelected ? 0 : -1}\n onClick={() => {\n setPreviousIndex(selectedIndex);\n setSelectedIndex(index);\n }}\n onKeyDown={handleKeyPress}\n {...rest}\n >\n {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n {children}\n {badge && (\n <span className=\"sds-tabs__tab-badge\">\n {isValidElement(badge) &&\n cloneElement(badge as ReactElement<PropsWithChildren<BadgeProps>>, {\n visibility: \"strong\",\n })}\n </span>\n )}\n </button>\n );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n children: ReactNode;\n className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n const { index } = rest as { index: number };\n const context = useContext(TabsContext);\n\n if (!context) {\n console.warn(\n \"TabContext missing. Component needs to be used inside <Tabs>\",\n );\n return null;\n }\n\n const { id, selectedIndex } = context;\n\n const isSelected = index === selectedIndex;\n return (\n <div\n className={clsx(\"sds-tabs__tab-panel\", className)}\n id={`panel-${id}-${index}`}\n role=\"tabpanel\"\n tabIndex={isSelected ? undefined : -1}\n aria-labelledby={`tab-${id}-${index}`}\n hidden={!isSelected}\n {...rest}\n >\n {children}\n </div>\n );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n AnchorHTMLAttributes,\n ReactElement,\n ReactNode,\n cloneElement,\n forwardRef,\n isValidElement,\n PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n children: ReactNode;\n className?: string;\n icon?: ReactNode;\n badge?: ReactNode;\n isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n (\n {\n children,\n className,\n icon,\n badge,\n href,\n isSelected,\n ...rest\n }: TabLinkProps,\n ref,\n ) => {\n return (\n <a\n className={clsx(\n \"sds-tabs__tab\",\n \"sds-tab-link\",\n isSelected && \"sds-tab-link--selected\",\n className,\n )}\n href={href}\n ref={ref}\n {...rest}\n >\n {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n {children}\n {badge && (\n <div className=\"sds-tabs__tab-badge\">\n {isSelected\n ? isValidElement(badge) &&\n cloneElement(\n badge as ReactElement<PropsWithChildren<BadgeProps>>,\n { visibility: \"strong\" },\n )\n : badge}\n </div>\n )}\n </a>\n );\n },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikt/sds-tabs",
3
- "version": "3.0.4",
3
+ "version": "3.1.0",
4
4
  "license": "UNLICENSED",
5
5
  "homepage": "https://designsystem.sikt.no/",
6
6
  "repository": {
@@ -35,7 +35,7 @@
35
35
  "build": "tsup"
36
36
  },
37
37
  "dependencies": {
38
- "@sikt/sds-core": "^4.2.1"
38
+ "@sikt/sds-core": "^4.6.0"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "@types/react": "^18.0.0 || ^19.0.0",