@bonprix-ds/react-side-navigation 1.1.0 → 1.3.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.
package/dist/index.d.ts CHANGED
@@ -1,50 +1,2 @@
1
- import { ComponentProps } from 'react';
2
- import { default as default_2 } from 'react';
3
- import { ElementType } from 'react';
4
- import { IconOrElement } from '@bonprix-ds/react-icon';
5
- import { ReactNode } from 'react';
6
- import { TitleLevel } from '@bonprix-ds/utils';
7
-
8
- declare interface NavigationTitle {
9
- title: string;
10
- hideTitle?: boolean;
11
- titleLevel?: TitleLevel;
12
- }
13
-
14
- declare const SideNavigation: {
15
- (props: SideNavigationProps): default_2.JSX.Element;
16
- displayName: string;
17
- Section: {
18
- ({ children, title, hideTitle, titleLevel }: SideNavigationSectionProps): default_2.JSX.Element;
19
- displayName: string;
20
- };
21
- Item: {
22
- <C extends ElementType>({ children, icon, active, component, ...props }: SideNavigationItemProps<C>): default_2.JSX.Element;
23
- displayName: string;
24
- };
25
- };
26
- export default SideNavigation;
27
-
28
- declare interface SideNavigationItemBaseProps {
29
- /** The text content of the list item. */
30
- children: string;
31
- /** The icon to display in front of the list item. Either a name of one icon from our icon set or an inline `<svg>` element. */
32
- icon?: IconOrElement;
33
- /** Should be set to `true`, if the current page is equal to the link in this item. */
34
- active?: boolean;
35
- }
36
-
37
- declare type SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {
38
- /** The semantic component to render the Link. Preferrably `"a"`, `"button"` or something like `Link` from NextJS. Native props will be passed to this component. */
39
- component?: C;
40
- } & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | "component">;
41
-
42
- export declare interface SideNavigationProps extends NavigationTitle {
43
- children: ReactNode;
44
- }
45
-
46
- declare interface SideNavigationSectionProps extends NavigationTitle {
47
- children: ReactNode;
48
- }
49
-
50
- export { }
1
+ export { default } from "./src/SideNavigation";
2
+ export type { SideNavigationProps } from "./src/SideNavigation";
@@ -0,0 +1,37 @@
1
+ import React, { ComponentProps, ElementType, ReactNode } from "react";
2
+ import { type IconOrElement } from "@bonprix-ds/react-icon";
3
+ import { type NavigationTitle, type SideNavigationProps } from "./SideNavigationRoot";
4
+ export type { SideNavigationProps } from "./SideNavigationRoot";
5
+ interface SideNavigationSectionProps extends NavigationTitle {
6
+ children: ReactNode;
7
+ }
8
+ interface SideNavigationItemBaseProps {
9
+ /** The text content of the list item. */
10
+ children: string;
11
+ /** The icon to display in front of the list item. Either a name of one icon from our icon set or an inline `<svg>` element. */
12
+ icon?: IconOrElement;
13
+ /** Should be set to `true`, if the current page is equal to the link in this item. */
14
+ current?: boolean;
15
+ /**
16
+ * Should be set to `true`, if the current page is equal to the link in this item.
17
+ * @deprecated [side-navigation-item-active] Use `current` instead.
18
+ */
19
+ active?: boolean;
20
+ }
21
+ type SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {
22
+ /** The semantic component to render the Link. Preferrably `"a"`, `"button"` or something like `Link` from NextJS. Native props will be passed to this component. */
23
+ component?: C;
24
+ } & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | "component">;
25
+ declare const SideNavigation: {
26
+ (props: SideNavigationProps): React.JSX.Element;
27
+ displayName: string;
28
+ Section: {
29
+ ({ children, title, hideTitle, titleLevel: TitleLevel }: SideNavigationSectionProps): React.JSX.Element;
30
+ displayName: string;
31
+ };
32
+ Item: {
33
+ <C extends ElementType>({ children, icon, current: currentProp, active, component, ...props }: SideNavigationItemProps<C>): React.JSX.Element;
34
+ displayName: string;
35
+ };
36
+ };
37
+ export default SideNavigation;
@@ -1,16 +1,14 @@
1
1
  import e from "./SideNavigationRoot.js";
2
- import { IconSlot as t } from "@bonprix-ds/react-icon";
3
- import n from "@bonprix-ds/react-typography";
4
2
  import "react";
3
+ import { IconSlot as t } from "@bonprix-ds/react-icon";
4
+ import { warnDeprecated as n } from "@bonprix-ds/utils/deprecation";
5
5
  import { jsx as r, jsxs as i } from "react/jsx-runtime";
6
6
  //#region src/SideNavigation.tsx
7
- var a = ({ children: e, title: t, hideTitle: a = !1, titleLevel: o = "h4" }) => /* @__PURE__ */ i("li", {
8
- "aria-label": a ? t : void 0,
9
- className: "pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3",
10
- children: [!a && /* @__PURE__ */ r(n, {
11
- variant: "h6",
12
- component: o,
13
- color: "on-bg-mid",
7
+ var a = ({ children: e, title: t, hideTitle: n = !1, titleLevel: a = "h4" }) => /* @__PURE__ */ i("li", {
8
+ "aria-label": n ? t : void 0,
9
+ className: "mb-2 flex flex-col gap-3 border-b border-clr-bg-main-light pb-3 last:border-none",
10
+ children: [!n && /* @__PURE__ */ r(a, {
11
+ className: "typography-h6 my-0 text-start text-clr-on-bg-mid",
14
12
  children: t
15
13
  }), /* @__PURE__ */ r("ul", {
16
14
  className: "flex flex-col gap-3 ps-1",
@@ -18,19 +16,21 @@ var a = ({ children: e, title: t, hideTitle: a = !1, titleLevel: o = "h4" }) =>
18
16
  })]
19
17
  });
20
18
  a.displayName = "SideNavigation.Section";
21
- var o = ({ children: e, icon: n, active: a, component: o = "a", ...s }) => {
22
- let c = o, l = [
19
+ var o = ({ children: e, icon: a, current: o, active: s, component: c = "a", ...l }) => {
20
+ let u = c;
21
+ s !== void 0 && n("side-navigation-item-active");
22
+ let d = o ?? s, f = [
23
23
  "typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2",
24
24
  "no-underline hover:underline underline-offset-[30%]",
25
25
  "focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm",
26
26
  "aria-current-page:underline aria-current-page:decoration-[15%]"
27
27
  ].join(" ");
28
- return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i(c, {
29
- ...s,
30
- className: l,
31
- "aria-current": a ? "page" : void 0,
28
+ return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i(u, {
29
+ ...l,
30
+ className: f,
31
+ "aria-current": d ? "page" : void 0,
32
32
  children: [/* @__PURE__ */ r(t, {
33
- icon: n,
33
+ icon: a,
34
34
  className: "h-5 w-5 fill-clr-on-bg-high"
35
35
  }), /* @__PURE__ */ r("span", { children: e })]
36
36
  }) });
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavigation.js","names":[],"sources":["../../src/SideNavigation.tsx"],"sourcesContent":["import { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport React, { ComponentProps, ElementType, ReactNode } from \"react\";\n\nimport SideNavigationRoot, { type NavigationTitle, type SideNavigationProps } from \"./SideNavigationRoot\";\n\nexport type { SideNavigationProps } from \"./SideNavigationRoot\";\n\ninterface SideNavigationSectionProps extends NavigationTitle {\n children: ReactNode;\n}\n\nconst SideNavigationSection = ({ children, title, hideTitle = false, titleLevel = \"h4\" }: SideNavigationSectionProps) => {\n return (\n <li aria-label={hideTitle ? title : undefined} className=\"pb-3 border-b border-clr-bg-main-light last:border-none flex flex-col gap-3\">\n {!hideTitle && (\n <Typography variant=\"h6\" component={titleLevel} color=\"on-bg-mid\">\n {title}\n </Typography>\n )}\n <ul className=\"flex flex-col gap-3 ps-1\">{children}</ul>\n </li>\n );\n};\n\nSideNavigationSection.displayName = \"SideNavigation.Section\";\n\ninterface SideNavigationItemBaseProps {\n /** The text content of the list item. */\n children: string;\n /** The icon to display in front of the list item. Either a name of one icon from our icon set or an inline `<svg>` element. */\n icon?: IconOrElement;\n /** Should be set to `true`, if the current page is equal to the link in this item. */\n active?: boolean;\n}\n\ntype SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {\n /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | \"component\">;\n\nconst SideNavigationItem = <C extends ElementType>({\n children,\n icon,\n active,\n component = \"a\" as C,\n ...props\n}: SideNavigationItemProps<C>) => {\n const Component: ElementType = component;\n const classNames = [\n \"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2\",\n \"no-underline hover:underline underline-offset-[30%]\",\n \"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm\",\n \"aria-current-page:underline aria-current-page:decoration-[15%]\",\n ].join(\" \");\n return (\n <li>\n <Component {...props} className={classNames} aria-current={active ? \"page\" : undefined}>\n <IconSlot icon={icon} className=\"h-5 w-5 fill-clr-on-bg-high\" />\n <span>{children}</span>\n </Component>\n </li>\n );\n};\n\nSideNavigationItem.displayName = \"SideNavigation.Item\";\n\nconst SideNavigation = (props: SideNavigationProps) => <SideNavigationRoot {...props} />;\n\nSideNavigation.displayName = \"SideNavigation\";\n\nSideNavigation.Section = SideNavigationSection;\nSideNavigation.Item = SideNavigationItem;\n\nexport default SideNavigation;\n"],"mappings":";;;;;;AAYA,IAAM,KAAyB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WAE9E,kBAAC,MAAD;CAAI,cAAY,IAAY,IAAQ,KAAA;CAAW,WAAU;CAAzD,UAAA,CACG,CAAC,KACA,kBAAC,GAAD;EAAY,SAAQ;EAAK,WAAW;EAAY,OAAM;EACnD,UAAA;CACS,CAAA,GAEd,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;;AAIR,EAAsB,cAAc;AAgBpC,IAAM,KAA6C,EACjD,aACA,SACA,WACA,eAAY,KACZ,GAAG,QAC6B;CAChC,IAAM,IAAyB,GACzB,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;EAAW,GAAI;EAAO,WAAW;EAAY,gBAAc,IAAS,SAAS,KAAA;EAA7E,UAAA,CACE,kBAAC,GAAD;GAAgB;GAAM,WAAU;EAA+B,CAAA,GAC/D,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER;AAEA,EAAmB,cAAc;AAEjC,IAAM,KAAkB,MAA+B,kBAAC,GAAD,EAAoB,GAAI,EAAQ,CAAA;AAEvF,EAAe,cAAc,kBAE7B,EAAe,UAAU,GACzB,EAAe,OAAO"}
1
+ {"version":3,"file":"SideNavigation.js","names":["SideNavigationRoot","SideNavigationSection","TitleLevel","hideTitle","title","SideNavigationItem","currentProp","props","Component","component","active","warnDeprecated","current","classNames","IconSlot","SideNavigation"],"sources":["../../src/SideNavigation.tsx"],"sourcesContent":["import React, { ComponentProps, ElementType, ReactNode } from \"react\";\n\nimport { IconSlot, type IconOrElement } from \"@bonprix-ds/react-icon\";\nimport { warnDeprecated } from \"@bonprix-ds/utils/deprecation\";\n\nimport SideNavigationRoot, { type NavigationTitle, type SideNavigationProps } from \"./SideNavigationRoot\";\n\nexport type { SideNavigationProps } from \"./SideNavigationRoot\";\n\ninterface SideNavigationSectionProps extends NavigationTitle {\n children: ReactNode;\n}\n\nconst SideNavigationSection = ({ children, title, hideTitle = false, titleLevel: TitleLevel = \"h4\" }: SideNavigationSectionProps) => {\n return (\n <li\n aria-label={hideTitle ? title : undefined}\n className=\"mb-2 flex flex-col gap-3 border-b border-clr-bg-main-light pb-3 last:border-none\"\n >\n {!hideTitle && <TitleLevel className=\"typography-h6 my-0 text-start text-clr-on-bg-mid\">{title}</TitleLevel>}\n <ul className=\"flex flex-col gap-3 ps-1\">{children}</ul>\n </li>\n );\n};\n\nSideNavigationSection.displayName = \"SideNavigation.Section\";\n\ninterface SideNavigationItemBaseProps {\n /** The text content of the list item. */\n children: string;\n /** The icon to display in front of the list item. Either a name of one icon from our icon set or an inline `<svg>` element. */\n icon?: IconOrElement;\n /** Should be set to `true`, if the current page is equal to the link in this item. */\n current?: boolean;\n /**\n * Should be set to `true`, if the current page is equal to the link in this item.\n * @deprecated [side-navigation-item-active] Use `current` instead.\n */\n active?: boolean;\n}\n\ntype SideNavigationItemProps<C extends ElementType> = SideNavigationItemBaseProps & {\n /** The semantic component to render the Link. Preferrably `\"a\"`, `\"button\"` or something like `Link` from NextJS. Native props will be passed to this component. */\n component?: C;\n} & Omit<ComponentProps<C>, keyof SideNavigationItemBaseProps | \"component\">;\n\nconst SideNavigationItem = <C extends ElementType>({\n children,\n icon,\n current: currentProp,\n active,\n component = \"a\" as C,\n ...props\n}: SideNavigationItemProps<C>) => {\n const Component: ElementType = component;\n if (active !== undefined) warnDeprecated(\"side-navigation-item-active\");\n const current = currentProp ?? active;\n const classNames = [\n \"typography-input-text text-clr-on-bg-high flex items-center gap-3 px-1 py-2\",\n \"no-underline hover:underline underline-offset-[30%]\",\n \"focus-visible:outline outline-clr-on-bg-high outline-offset-2 outline-2 radius-2 rounded-sm\",\n \"aria-current-page:underline aria-current-page:decoration-[15%]\",\n ].join(\" \");\n return (\n <li>\n <Component {...props} className={classNames} aria-current={current ? \"page\" : undefined}>\n <IconSlot icon={icon} className=\"h-5 w-5 fill-clr-on-bg-high\" />\n <span>{children}</span>\n </Component>\n </li>\n );\n};\n\nSideNavigationItem.displayName = \"SideNavigation.Item\";\n\nconst SideNavigation = (props: SideNavigationProps) => <SideNavigationRoot {...props} />;\n\nSideNavigation.displayName = \"SideNavigation\";\n\nSideNavigation.Section = SideNavigationSection;\nSideNavigation.Item = SideNavigationItem;\n\nexport default SideNavigation;\n"],"mappings":";;;;;;AAaA,IAAMC,KAAyB,EAAE,aAAU,UAAO,eAAY,IAAO,YAAYC,IAAa,WAE1F,kBAAC,MAAD;CACE,cAAYC,IAAYC,IAAQ,KAAA;CAChC,WAAU;CAFZ,UAAA,CAIG,CAACD,KAAa,kBAACD,GAAD;EAAY,WAAU;EAAoD,UAAAE;CAAkB,CAAA,GAC3G,kBAAC,MAAD;EAAI,WAAU;EAA4B;CAAa,CAAA,CACrD;;AAIR,EAAsB,cAAc;AAqBpC,IAAMC,KAA6C,EACjD,aACA,SACA,SAASC,GACT,WACA,eAAY,KACZ,GAAGC,QAC6B;CAChC,IAAMC,IAAyBC;CAC/B,AAAIC,MAAW,KAAA,KAAWC,EAAe,6BAA6B;CACtE,IAAMC,IAAUN,KAAeI,GACzBG,IAAa;EACjB;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OACE,kBAAC,MAAD,EAAA,UACE,kBAACL,GAAD;EAAW,GAAID;EAAO,WAAWM;EAAY,gBAAcD,IAAU,SAAS,KAAA;EAA9E,UAAA,CACE,kBAACE,GAAD;GAAgB;GAAM,WAAU;EAA+B,CAAA,GAC/D,kBAAC,QAAD,EAAO,YAAe,CAAA,CACb;CACT,CAAA,EAAA,CAAA;AAER;AAEA,EAAmB,cAAc;AAEjC,IAAMC,KAAkB,MAA+B,kBAACf,GAAD,EAAoB,GAAIO,EAAQ,CAAA;AAEvF,EAAe,cAAc,kBAE7B,EAAe,UAAUN,GACzB,EAAe,OAAOI"}
@@ -0,0 +1,19 @@
1
+ import React, { ReactNode } from "react";
2
+ import type { TitleLevel } from "@bonprix-ds/utils";
3
+ export interface NavigationTitle {
4
+ title: string;
5
+ hideTitle?: boolean;
6
+ titleLevel?: TitleLevel;
7
+ }
8
+ export interface SideNavigationProps extends NavigationTitle {
9
+ children: ReactNode;
10
+ /** The label for the skip link. */
11
+ skipLinkLabel?: string;
12
+ /** The `id` of the element the skip link jumps to, e.g. `"main-content"`. If that element isn't focusable, it gets `tabindex="-1"` on activation, so the focus actually moves there. */
13
+ skipLinkTarget?: string;
14
+ }
15
+ declare const SideNavigationRoot: {
16
+ ({ children, title, hideTitle, titleLevel: TitleHeading, skipLinkLabel, skipLinkTarget, }: SideNavigationProps): React.JSX.Element | null;
17
+ displayName: string;
18
+ };
19
+ export default SideNavigationRoot;
@@ -1,28 +1,44 @@
1
1
  "use client";
2
- import e from "@bonprix-ds/react-typography";
3
2
  import "react";
3
+ import e from "@bonprix-ds/react-button";
4
4
  import { useBreakpointDown as t } from "@bonprix-ds/utils";
5
5
  import { jsx as n, jsxs as r } from "react/jsx-runtime";
6
6
  //#region src/SideNavigationRoot.tsx
7
- var i = ({ children: i, title: a, hideTitle: o = !1, titleLevel: s = "h3" }) => t("m") ? null : /* @__PURE__ */ r("nav", {
8
- ...o ? { "aria-label": a } : { "aria-labelledby": "side-navigation-header" },
9
- className: "preflight pt-6 ps-6 pe-2 bg-clr-bg-main h-screen overflow-auto min-w-[18.75rem] max-w-[31.25rem] w-fit",
7
+ var i = (e) => {
8
+ let t = document.getElementById(e);
9
+ t && (t.tabIndex < 0 && !t.hasAttribute("tabindex") && t.setAttribute("tabindex", "-1"), t.focus());
10
+ }, a = ({ children: a, title: o, hideTitle: s = !1, titleLevel: c = "h3", skipLinkLabel: l = "Navigation überspringen", skipLinkTarget: u }) => t("m") ? null : /* @__PURE__ */ r("nav", {
11
+ ...s ? { "aria-label": o } : { "aria-labelledby": "side-navigation-header" },
12
+ className: "preflight relative h-screen w-fit min-w-[18.75rem] max-w-[31.25rem] overflow-auto bg-clr-bg-main pe-2 ps-6 pt-6",
10
13
  "data-bpds": "side-navigation",
11
- children: [!o && /* @__PURE__ */ n("div", {
12
- className: "pt-3 pb-6",
13
- children: /* @__PURE__ */ n(e, {
14
- variant: "bonprix-h4",
15
- component: s,
16
- id: "side-navigation-header",
14
+ children: [
15
+ u && /* @__PURE__ */ n("div", {
16
+ className: "absolute end-2 start-8 top-1 bg-clr-bg-main [clip-path:inset(50%)] focus-within:[clip-path:none]",
17
+ children: /* @__PURE__ */ n(e, {
18
+ variant: "secondary",
19
+ component: "a",
20
+ href: `#${u}`,
21
+ onClick: () => i(u),
22
+ contentWidth: !0,
23
+ children: l
24
+ })
25
+ }),
26
+ !s && /* @__PURE__ */ n("div", {
27
+ className: "pb-6 pt-3",
28
+ children: /* @__PURE__ */ n(c, {
29
+ className: "typography-bonprix-h4 my-0 text-balance text-start text-clr-on-bg-high",
30
+ id: "side-navigation-header",
31
+ children: o
32
+ })
33
+ }),
34
+ /* @__PURE__ */ n("ul", {
35
+ className: "flex flex-col gap-3",
17
36
  children: a
18
37
  })
19
- }), /* @__PURE__ */ n("ul", {
20
- className: "flex flex-col gap-3",
21
- children: i
22
- })]
38
+ ]
23
39
  });
24
- i.displayName = "SideNavigation";
40
+ a.displayName = "SideNavigation";
25
41
  //#endregion
26
- export { i as default };
42
+ export { a as default };
27
43
 
28
44
  //# sourceMappingURL=SideNavigationRoot.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavigationRoot.js","names":[],"sources":["../../src/SideNavigationRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport Typography from \"@bonprix-ds/react-typography\";\nimport type { TitleLevel } from \"@bonprix-ds/utils\";\nimport { useBreakpointDown } from \"@bonprix-ds/utils\";\nimport React, { ReactNode } from \"react\";\n\nexport interface NavigationTitle {\n title: string;\n hideTitle?: boolean;\n titleLevel?: TitleLevel;\n}\n\nexport interface SideNavigationProps extends NavigationTitle {\n children: ReactNode;\n}\n\nconst SideNavigationRoot = ({ children, title, hideTitle = false, titleLevel = \"h3\" }: SideNavigationProps) => {\n if (useBreakpointDown(\"m\")) return null;\n const labelAttribute = hideTitle ? { \"aria-label\": title } : { \"aria-labelledby\": \"side-navigation-header\" };\n return (\n <nav\n {...labelAttribute}\n className=\"preflight pt-6 ps-6 pe-2 bg-clr-bg-main h-screen overflow-auto min-w-[18.75rem] max-w-[31.25rem] w-fit\"\n data-bpds=\"side-navigation\"\n >\n {!hideTitle && (\n <div className=\"pt-3 pb-6\">\n <Typography variant=\"bonprix-h4\" component={titleLevel} id=\"side-navigation-header\">\n {title}\n </Typography>\n </div>\n )}\n <ul className=\"flex flex-col gap-3\">{children}</ul>\n </nav>\n );\n};\n\nSideNavigationRoot.displayName = \"SideNavigation\";\n\nexport default SideNavigationRoot;\n"],"mappings":";;;;;;AAiBA,IAAM,KAAsB,EAAE,aAAU,UAAO,eAAY,IAAO,gBAAa,WACzE,EAAkB,GAAG,IAAU,OAGjC,kBAAC,OAAD;CACE,GAHmB,IAAY,EAAE,cAAc,EAAM,IAAI,EAAE,mBAAmB,yBAAyB;CAIvG,WAAU;CACV,aAAU;CAHZ,UAAA,CAKG,CAAC,KACA,kBAAC,OAAD;EAAK,WAAU;EACb,UAAA,kBAAC,GAAD;GAAY,SAAQ;GAAa,WAAW;GAAY,IAAG;GACxD,UAAA;EACS,CAAA;CACT,CAAA,GAEP,kBAAC,MAAD;EAAI,WAAU;EAAuB;CAAa,CAAA,CAC/C;;AAIT,EAAmB,cAAc"}
1
+ {"version":3,"file":"SideNavigationRoot.js","names":["Button","focusSkipLinkTarget","target","id","SideNavigationRoot","TitleHeading","useBreakpointDown","hideTitle","title","skipLinkTarget","skipLinkLabel"],"sources":["../../src/SideNavigationRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactNode } from \"react\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport type { TitleLevel } from \"@bonprix-ds/utils\";\nimport { useBreakpointDown } from \"@bonprix-ds/utils\";\n\nexport interface NavigationTitle {\n title: string;\n hideTitle?: boolean;\n titleLevel?: TitleLevel;\n}\n\nexport interface SideNavigationProps extends NavigationTitle {\n children: ReactNode;\n /** The label for the skip link. */\n skipLinkLabel?: string;\n /** The `id` of the element the skip link jumps to, e.g. `\"main-content\"`. If that element isn't focusable, it gets `tabindex=\"-1\"` on activation, so the focus actually moves there. */\n skipLinkTarget?: string;\n}\n\n// Following a fragment link only focuses the target if it is focusable, otherwise\n// just the scroll position and the sequential focus starting point move.\nconst focusSkipLinkTarget = (id: string) => {\n const target = document.getElementById(id);\n if (!target) return;\n // tabIndex is -1 for elements that aren't natively focusable; never touch an existing tabindex\n if (target.tabIndex < 0 && !target.hasAttribute(\"tabindex\")) target.setAttribute(\"tabindex\", \"-1\");\n target.focus();\n};\n\nconst SideNavigationRoot = ({\n children,\n title,\n hideTitle = false,\n titleLevel: TitleHeading = \"h3\",\n skipLinkLabel = \"Navigation überspringen\",\n skipLinkTarget,\n}: SideNavigationProps) => {\n if (useBreakpointDown(\"m\")) return null;\n const labelAttribute = hideTitle ? { \"aria-label\": title } : { \"aria-labelledby\": \"side-navigation-header\" };\n return (\n <nav\n {...labelAttribute}\n className=\"preflight relative h-screen w-fit min-w-[18.75rem] max-w-[31.25rem] overflow-auto bg-clr-bg-main pe-2 ps-6 pt-6\"\n data-bpds=\"side-navigation\"\n >\n {skipLinkTarget && (\n <div className=\"absolute end-2 start-8 top-1 bg-clr-bg-main [clip-path:inset(50%)] focus-within:[clip-path:none]\">\n <Button\n variant=\"secondary\"\n component=\"a\"\n href={`#${skipLinkTarget}`}\n onClick={() => focusSkipLinkTarget(skipLinkTarget)}\n contentWidth\n >\n {skipLinkLabel}\n </Button>\n </div>\n )}\n {!hideTitle && (\n <div className=\"pb-6 pt-3\">\n <TitleHeading className=\"typography-bonprix-h4 my-0 text-balance text-start text-clr-on-bg-high\" id=\"side-navigation-header\">\n {title}\n </TitleHeading>\n </div>\n )}\n <ul className=\"flex flex-col gap-3\">{children}</ul>\n </nav>\n );\n};\n\nSideNavigationRoot.displayName = \"SideNavigation\";\n\nexport default SideNavigationRoot;\n"],"mappings":";;;;;;AAwBA,IAAMC,KAAuB,MAAe;CAC1C,IAAMC,IAAS,SAAS,eAAeC,CAAE;CACzC,AAAKD,MAEDA,EAAO,WAAW,KAAK,CAACA,EAAO,aAAa,UAAU,KAAGA,EAAO,aAAa,YAAY,IAAI,GACjGA,EAAO,MAAM;AACf,GAEME,KAAsB,EAC1B,aACA,UACA,eAAY,IACZ,YAAYC,IAAe,MAC3B,mBAAgB,2BAChB,wBAEIC,EAAkB,GAAG,IAAU,OAGjC,kBAAC,OAAD;CACE,GAHmBC,IAAY,EAAE,cAAcC,EAAM,IAAI,EAAE,mBAAmB,yBAAyB;CAIvG,WAAU;CACV,aAAU;CAHZ,UAAA;EAKGC,KACC,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAACT,GAAD;IACE,SAAQ;IACR,WAAU;IACV,MAAM,IAAIS;IACV,eAAeR,EAAoBQ,CAAc;IACjD,cAAA;IAEC,UAAAC;GACK,CAAA;EACL,CAAA;EAEN,CAACH,KACA,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAACF,GAAD;IAAc,WAAU;IAAyE,IAAG;IACjG,UAAAG;GACW,CAAA;EACX,CAAA;EAEP,kBAAC,MAAD;GAAI,WAAU;GAAuB;EAAa,CAAA;CAC/C;;AAIT,EAAmB,cAAc"}
package/package.json CHANGED
@@ -1,14 +1,25 @@
1
1
  {
2
2
  "name": "@bonprix-ds/react-side-navigation",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "description": "SideNavigation component, implemented in React, for the Bonprix Design System.",
5
- "type": "module",
6
- "publishConfig": {
7
- "access": "public",
8
- "provenance": true
5
+ "keywords": [],
6
+ "license": "UNLICENSED",
7
+ "author": "",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/bonprix/design-system.git",
11
+ "directory": "packages/react/side-navigation"
9
12
  },
10
- "module": "./dist/index.js",
13
+ "files": [
14
+ "dist",
15
+ "!dist/tsconfig.tsbuildinfo",
16
+ "!dist/vite.config.d.ts",
17
+ "!dist/**/*.test.d.ts"
18
+ ],
19
+ "type": "module",
11
20
  "sideEffects": false,
21
+ "module": "./dist/index.js",
22
+ "types": "./dist/index.d.ts",
12
23
  "exports": {
13
24
  ".": {
14
25
  "import": "./dist/index.js",
@@ -16,36 +27,25 @@
16
27
  "default": "./dist/index.js"
17
28
  }
18
29
  },
19
- "types": "./dist/index.d.ts",
20
- "files": [
21
- "dist"
22
- ],
23
- "keywords": [],
24
- "author": "",
25
- "license": "UNLICENSED",
26
- "repository": {
27
- "type": "git",
28
- "url": "git+https://github.com/bonprix/design-system.git",
29
- "directory": "packages/react/side-navigation"
30
+ "publishConfig": {
31
+ "access": "public",
32
+ "provenance": true
30
33
  },
31
34
  "dependencies": {
32
- "@bonprix-ds/react-icon": "1.2.0",
33
- "@bonprix-ds/react-typography": "1.0.4",
34
- "@bonprix-ds/utils": "0.2.2"
35
+ "@bonprix-ds/react-button": "1.1.2",
36
+ "@bonprix-ds/react-icon": "1.2.2",
37
+ "@bonprix-ds/utils": "0.3.0"
38
+ },
39
+ "devDependencies": {
40
+ "@types/react": "19.3.0",
41
+ "vite": "8.3.2",
42
+ "@bonprix-ds/vite-config": "0.0.0"
35
43
  },
36
44
  "peerDependencies": {
37
- "react": "^19.0.0",
38
- "react-dom": "^19.0.0",
45
+ "react": "^19",
46
+ "react-dom": "^19",
39
47
  "tailwind-variants": "0.3.1"
40
48
  },
41
- "devDependencies": {
42
- "vite": "8.2.2",
43
- "@types/react": "19.2.18",
44
- "@vitejs/plugin-react": "6.1.1",
45
- "rollup-preserve-directives": "1.1.3",
46
- "unplugin-dts": "1.1.0",
47
- "@microsoft/api-extractor": "7.59.1"
48
- },
49
49
  "scripts": {
50
50
  "build": "vite build"
51
51
  }