@bonprix-ds/react-show-more-list 1.0.0 → 1.0.2
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 +3 -58
- package/dist/src/ShowMoreList.d.ts +13 -0
- package/dist/src/ShowMoreListItem/ShowMoreListItem.d.ts +11 -0
- package/dist/src/ShowMoreListItem/index.d.ts +2 -0
- package/dist/src/ShowMoreListRoot.d.ts +44 -0
- package/dist/src/ShowMoreListRoot.js +16 -16
- package/dist/src/ShowMoreListRoot.js.map +1 -1
- package/dist/src/useShowMoreListHeight.d.ts +11 -0
- package/dist/src/useShowMoreListHeight.js.map +1 -1
- package/dist/src/useShowMoreListItems.d.ts +9 -0
- package/dist/src/useShowMoreListStates.d.ts +19 -0
- package/package.json +32 -31
package/dist/index.d.ts
CHANGED
|
@@ -1,58 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
declare const ShowMoreList: {
|
|
5
|
-
(props: ShowMoreListProps): default_2.JSX.Element;
|
|
6
|
-
displayName: string;
|
|
7
|
-
Item: {
|
|
8
|
-
({ children }: ShowMoreListItemProps): default_2.JSX.Element;
|
|
9
|
-
displayName: string;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
export default ShowMoreList;
|
|
13
|
-
|
|
14
|
-
declare interface ShowMoreListItemProps {
|
|
15
|
-
/** The content to display in the list item */
|
|
16
|
-
children: ReactNode;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export declare interface ShowMoreListProps {
|
|
20
|
-
/** Brief summary or label for the content within the component. */
|
|
21
|
-
title: string;
|
|
22
|
-
/** Whether the title is hidden visually. */
|
|
23
|
-
hideTitle?: boolean;
|
|
24
|
-
/** Whether the counter is hidden visually. */
|
|
25
|
-
hideCounter?: boolean;
|
|
26
|
-
/** Whether the interaction box is hidden in fully expanded state. */
|
|
27
|
-
hideInteractionBoxWhenOpen?: boolean;
|
|
28
|
-
/** Whether the corners of inner containers (header, interaction box) are rounded. */
|
|
29
|
-
roundedCorners?: "none" | "outside" | "all";
|
|
30
|
-
/** Slot to contain the component's children. `ShowMoreList.Item`s must be used for all countable children. Combine with your own `<li>` elements for customization (e.g. categories). */
|
|
31
|
-
children: ReactNode;
|
|
32
|
-
/** How many items should be shown initially. */
|
|
33
|
-
initiallyShownItems?: number;
|
|
34
|
-
/** The button text when more items are available to expand. */
|
|
35
|
-
buttonShowMoreLabel?: string;
|
|
36
|
-
/** The button text when all items are visible. */
|
|
37
|
-
buttonShowLessLabel?: string;
|
|
38
|
-
/** Gap between items. */
|
|
39
|
-
gap?: string | number;
|
|
40
|
-
/** Whether spacing on top and bottom of the list is shown. */
|
|
41
|
-
showVerticalListPadding?: boolean;
|
|
42
|
-
/** The padding at the top of the list. Requires `showVerticalListPadding` to be `true`. */
|
|
43
|
-
listPaddingTop?: string | number;
|
|
44
|
-
/** The padding at the bottom of the list. Requires `showVerticalListPadding` to be `true`. */
|
|
45
|
-
listPaddingBottom?: string | number;
|
|
46
|
-
/** The preview height of the first hidden item. Supported values: number (px), string (px), string (percentage). Examples: 16, "1rem", "20%" */
|
|
47
|
-
previewHeight?: string | number;
|
|
48
|
-
/** The HTML tag used to render the title. */
|
|
49
|
-
titleComponent?: "h3" | "h4";
|
|
50
|
-
/**
|
|
51
|
-
* Callback function that gets triggered whenever the count of shown items changes via button click.
|
|
52
|
-
* @param shownItems The current number of items being displayed before the change.
|
|
53
|
-
* @param nextShownItems The new number of items that will be displayed after the change.
|
|
54
|
-
*/
|
|
55
|
-
onChange?: (shownItems: number, nextShownItems: number) => void;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export { }
|
|
1
|
+
export { default } from "./src/ShowMoreList";
|
|
2
|
+
export type { ShowMoreListProps } from "./src/ShowMoreList";
|
|
3
|
+
export type { ShowMoreListItemProps } from "./src/ShowMoreListItem/ShowMoreListItem";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type ShowMoreListProps } from "./ShowMoreListRoot";
|
|
3
|
+
export type { ShowMoreListProps } from "./ShowMoreListRoot";
|
|
4
|
+
export type { ShowMoreListItemProps } from "./ShowMoreListItem/ShowMoreListItem";
|
|
5
|
+
declare const ShowMoreList: {
|
|
6
|
+
(props: ShowMoreListProps): React.JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
Item: {
|
|
9
|
+
({ children }: import("./ShowMoreList").ShowMoreListItemProps): React.JSX.Element;
|
|
10
|
+
displayName: string;
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default ShowMoreList;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface ShowMoreListItemProps {
|
|
3
|
+
/** The content to display in the list item */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
export declare const ITEM_DATA_ID = "bpds-show-more-list-item";
|
|
7
|
+
declare const ShowMoreListItem: {
|
|
8
|
+
({ children }: ShowMoreListItemProps): React.JSX.Element;
|
|
9
|
+
displayName: string;
|
|
10
|
+
};
|
|
11
|
+
export default ShowMoreListItem;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
export interface ShowMoreListProps {
|
|
3
|
+
/** Brief summary or label for the content within the component. */
|
|
4
|
+
title: string;
|
|
5
|
+
/** Whether the title is hidden visually. */
|
|
6
|
+
hideTitle?: boolean;
|
|
7
|
+
/** Whether the counter is hidden visually. */
|
|
8
|
+
hideCounter?: boolean;
|
|
9
|
+
/** Whether the interaction box is hidden in fully expanded state. */
|
|
10
|
+
hideInteractionBoxWhenOpen?: boolean;
|
|
11
|
+
/** Whether the corners of inner containers (header, interaction box) are rounded. */
|
|
12
|
+
roundedCorners?: "none" | "outside" | "all";
|
|
13
|
+
/** Slot to contain the component's children. `ShowMoreList.Item`s must be used for all countable children. Combine with your own `<li>` elements for customization (e.g. categories). */
|
|
14
|
+
children: ReactNode;
|
|
15
|
+
/** How many items should be shown initially. */
|
|
16
|
+
initiallyShownItems?: number;
|
|
17
|
+
/** The button text when more items are available to expand. */
|
|
18
|
+
buttonShowMoreLabel?: string;
|
|
19
|
+
/** The button text when all items are visible. */
|
|
20
|
+
buttonShowLessLabel?: string;
|
|
21
|
+
/** Gap between items. */
|
|
22
|
+
gap?: string | number;
|
|
23
|
+
/** Whether spacing on top and bottom of the list is shown. */
|
|
24
|
+
showVerticalListPadding?: boolean;
|
|
25
|
+
/** The padding at the top of the list. Requires `showVerticalListPadding` to be `true`. */
|
|
26
|
+
listPaddingTop?: string | number;
|
|
27
|
+
/** The padding at the bottom of the list. Requires `showVerticalListPadding` to be `true`. */
|
|
28
|
+
listPaddingBottom?: string | number;
|
|
29
|
+
/** The preview height of the first hidden item. Supported values: number (px), string (px), string (percentage). Examples: 16, "1rem", "20%" */
|
|
30
|
+
previewHeight?: string | number;
|
|
31
|
+
/** The HTML tag used to render the title. */
|
|
32
|
+
titleComponent?: "h3" | "h4";
|
|
33
|
+
/**
|
|
34
|
+
* Callback function that gets triggered whenever the count of shown items changes via button click.
|
|
35
|
+
* @param shownItems The current number of items being displayed before the change.
|
|
36
|
+
* @param nextShownItems The new number of items that will be displayed after the change.
|
|
37
|
+
*/
|
|
38
|
+
onChange?: (shownItems: number, nextShownItems: number) => void;
|
|
39
|
+
}
|
|
40
|
+
declare const ShowMoreListRoot: {
|
|
41
|
+
({ title, children, initiallyShownItems, hideTitle, hideCounter, hideInteractionBoxWhenOpen, roundedCorners, buttonShowLessLabel, buttonShowMoreLabel, previewHeight, titleComponent, gap, showVerticalListPadding, listPaddingTop, listPaddingBottom, onChange, }: ShowMoreListProps): React.JSX.Element;
|
|
42
|
+
displayName: string;
|
|
43
|
+
};
|
|
44
|
+
export default ShowMoreListRoot;
|
|
@@ -4,18 +4,18 @@ import t from "./useShowMoreListItems.js";
|
|
|
4
4
|
import n from "./useShowMoreListStates.js";
|
|
5
5
|
import { useRef as r } from "react";
|
|
6
6
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
|
-
import o from "
|
|
8
|
-
import s from "
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
7
|
+
import { motion as o } from "motion/react";
|
|
8
|
+
import { tv as s } from "tailwind-variants";
|
|
9
|
+
import c from "@bonprix-ds/react-button";
|
|
10
|
+
import l from "@bonprix-ds/react-typography";
|
|
11
|
+
import { usePrefersReducedMotion as u, useTransitionAfterInitialRender as d } from "@bonprix-ds/utils";
|
|
12
12
|
//#region src/ShowMoreListRoot.tsx
|
|
13
|
-
var f =
|
|
13
|
+
var f = s({
|
|
14
14
|
slots: {
|
|
15
15
|
root: "preflight overflow-hidden",
|
|
16
|
-
header: "py-3 px-[var(--size-container-horizontal-padding)] bg-clr-bg-main",
|
|
16
|
+
header: "py-3 px-[var(--bpds-size-container-horizontal-padding)] bg-clr-bg-main",
|
|
17
17
|
list: "overflow-hidden flex flex-col",
|
|
18
|
-
interactionBox: "py-3 px-[var(--size-container-horizontal-padding)] bg-clr-bg-main flex flex-col gap-2",
|
|
18
|
+
interactionBox: "py-3 px-[var(--bpds-size-container-horizontal-padding)] bg-clr-bg-main flex flex-col gap-2",
|
|
19
19
|
counter: ""
|
|
20
20
|
},
|
|
21
21
|
variants: {
|
|
@@ -32,8 +32,8 @@ var f = d({
|
|
|
32
32
|
},
|
|
33
33
|
hideCounter: { true: { counter: "sr-only" } }
|
|
34
34
|
}
|
|
35
|
-
}), p = ({ title:
|
|
36
|
-
let O = r(null), k = r(null), A =
|
|
35
|
+
}), p = ({ title: s, children: p, initiallyShownItems: m = 1, hideTitle: h = !1, hideCounter: g = !1, hideInteractionBoxWhenOpen: _ = !1, roundedCorners: v = "none", buttonShowLessLabel: y = "Weniger anzeigen", buttonShowMoreLabel: b = "Mehr anzeigen", previewHeight: x = 32, titleComponent: S = "h3", gap: C = 8, showVerticalListPadding: w = !1, listPaddingTop: T, listPaddingBottom: E, onChange: D }) => {
|
|
36
|
+
let O = r(null), k = r(null), A = u(), { transitionAfterInitialRender: j } = d(), M = A ? { duration: 0 } : j, { items: N, totalItems: P } = t({
|
|
37
37
|
listRef: k,
|
|
38
38
|
children: p
|
|
39
39
|
}), { shownItems: F, showInteractionBox: I, triggerNextState: L } = n({
|
|
@@ -56,7 +56,7 @@ var f = d({
|
|
|
56
56
|
return /* @__PURE__ */ a("section", {
|
|
57
57
|
ref: O,
|
|
58
58
|
className: z(),
|
|
59
|
-
"aria-label":
|
|
59
|
+
"aria-label": s,
|
|
60
60
|
"data-bpds": "show-more-list",
|
|
61
61
|
"data-bpds-hide-title": h,
|
|
62
62
|
"data-bpds-hide-counter": g,
|
|
@@ -66,13 +66,13 @@ var f = d({
|
|
|
66
66
|
children: [
|
|
67
67
|
!h && /* @__PURE__ */ i("div", {
|
|
68
68
|
className: B(),
|
|
69
|
-
children: /* @__PURE__ */ i(
|
|
69
|
+
children: /* @__PURE__ */ i(l, {
|
|
70
70
|
variant: "bonprix-h6",
|
|
71
71
|
component: S,
|
|
72
|
-
children:
|
|
72
|
+
children: s
|
|
73
73
|
})
|
|
74
74
|
}),
|
|
75
|
-
/* @__PURE__ */ i(
|
|
75
|
+
/* @__PURE__ */ i(o.ul, {
|
|
76
76
|
ref: k,
|
|
77
77
|
animate: { height: R },
|
|
78
78
|
transition: M,
|
|
@@ -86,13 +86,13 @@ var f = d({
|
|
|
86
86
|
}),
|
|
87
87
|
I && /* @__PURE__ */ a("div", {
|
|
88
88
|
className: H(),
|
|
89
|
-
children: [/* @__PURE__ */ i(
|
|
89
|
+
children: [/* @__PURE__ */ i(l, {
|
|
90
90
|
variant: "body2",
|
|
91
91
|
color: "on-bg-low",
|
|
92
92
|
"aria-live": "polite",
|
|
93
93
|
className: U(),
|
|
94
94
|
children: `${F} von ${P} angezeigt`
|
|
95
|
-
}), /* @__PURE__ */ i(
|
|
95
|
+
}), /* @__PURE__ */ i(c, {
|
|
96
96
|
variant: "secondary",
|
|
97
97
|
onClick: L,
|
|
98
98
|
children: F === P ? y : b
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShowMoreListRoot.js","names":[],"sources":["../../src/ShowMoreListRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"ShowMoreListRoot.js","names":[],"sources":["../../src/ShowMoreListRoot.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"motion/react\";\nimport React, { ReactNode, useRef } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport Button from \"@bonprix-ds/react-button\";\nimport Typography from \"@bonprix-ds/react-typography\";\nimport { usePrefersReducedMotion, useTransitionAfterInitialRender } from \"@bonprix-ds/utils\";\n\nimport useShowMoreListHeight from \"./useShowMoreListHeight\";\nimport useShowMoreListItems from \"./useShowMoreListItems\";\nimport useShowMoreListStates from \"./useShowMoreListStates\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight overflow-hidden\",\n header: \"py-3 px-[var(--bpds-size-container-horizontal-padding)] bg-clr-bg-main\",\n list: \"overflow-hidden flex flex-col\",\n interactionBox: \"py-3 px-[var(--bpds-size-container-horizontal-padding)] bg-clr-bg-main flex flex-col gap-2\",\n counter: \"\",\n },\n variants: {\n roundedCorners: {\n none: {},\n outside: { header: \"rounded-t\", interactionBox: \"rounded-b\" },\n all: { header: \"rounded\", interactionBox: \"rounded\" },\n },\n hideCounter: {\n true: { counter: \"sr-only\" },\n },\n },\n});\n\nexport interface ShowMoreListProps {\n /** Brief summary or label for the content within the component. */\n title: string;\n /** Whether the title is hidden visually. */\n hideTitle?: boolean;\n /** Whether the counter is hidden visually. */\n hideCounter?: boolean;\n /** Whether the interaction box is hidden in fully expanded state. */\n hideInteractionBoxWhenOpen?: boolean;\n /** Whether the corners of inner containers (header, interaction box) are rounded. */\n roundedCorners?: \"none\" | \"outside\" | \"all\";\n /** Slot to contain the component's children. `ShowMoreList.Item`s must be used for all countable children. Combine with your own `<li>` elements for customization (e.g. categories). */\n children: ReactNode;\n /** How many items should be shown initially. */\n initiallyShownItems?: number;\n /** The button text when more items are available to expand. */\n buttonShowMoreLabel?: string;\n /** The button text when all items are visible. */\n buttonShowLessLabel?: string;\n /** Gap between items. */\n gap?: string | number;\n /** Whether spacing on top and bottom of the list is shown. */\n showVerticalListPadding?: boolean;\n /** The padding at the top of the list. Requires `showVerticalListPadding` to be `true`. */\n listPaddingTop?: string | number;\n /** The padding at the bottom of the list. Requires `showVerticalListPadding` to be `true`. */\n listPaddingBottom?: string | number;\n /** The preview height of the first hidden item. Supported values: number (px), string (px), string (percentage). Examples: 16, \"1rem\", \"20%\" */\n previewHeight?: string | number;\n /** The HTML tag used to render the title. */\n titleComponent?: \"h3\" | \"h4\";\n /**\n * Callback function that gets triggered whenever the count of shown items changes via button click.\n * @param shownItems The current number of items being displayed before the change.\n * @param nextShownItems The new number of items that will be displayed after the change.\n */\n onChange?: (shownItems: number, nextShownItems: number) => void;\n}\n\nconst ShowMoreListRoot = ({\n title,\n children,\n initiallyShownItems = 1,\n hideTitle = false,\n hideCounter = false,\n hideInteractionBoxWhenOpen = false,\n roundedCorners = \"none\",\n buttonShowLessLabel = \"Weniger anzeigen\",\n buttonShowMoreLabel = \"Mehr anzeigen\",\n previewHeight = 32,\n titleComponent = \"h3\",\n gap = 8,\n showVerticalListPadding = false,\n listPaddingTop,\n listPaddingBottom,\n onChange,\n}: ShowMoreListProps) => {\n const sectionRef = useRef<HTMLElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n\n const prefersReducedMotion = usePrefersReducedMotion();\n const { transitionAfterInitialRender } = useTransitionAfterInitialRender();\n const transition = prefersReducedMotion ? { duration: 0 } : transitionAfterInitialRender;\n\n const { items, totalItems } = useShowMoreListItems({\n listRef,\n children,\n });\n\n const { shownItems, showInteractionBox, triggerNextState } = useShowMoreListStates({\n items,\n initiallyShownItems,\n totalItems,\n onChange,\n sectionRef,\n prefersReducedMotion,\n hideInteractionBoxWhenOpen,\n });\n\n const { height } = useShowMoreListHeight({\n listRef,\n items,\n shownItems,\n previewHeight,\n });\n\n const { root, header, list, interactionBox, counter } = generateClasses({ roundedCorners, hideCounter });\n\n const paddingBlockStart = showVerticalListPadding ? (listPaddingTop ?? gap) : undefined;\n const paddingBlockEnd = showVerticalListPadding ? (listPaddingBottom ?? gap) : undefined;\n\n return (\n <section\n ref={sectionRef}\n className={root()}\n aria-label={title}\n data-bpds=\"show-more-list\"\n data-bpds-hide-title={hideTitle}\n data-bpds-hide-counter={hideCounter}\n data-bpds-hide-interaction-box-when-open={hideInteractionBoxWhenOpen}\n data-bpds-rounded-corners={roundedCorners}\n data-bpds-has-preview={!!previewHeight}\n >\n {!hideTitle && (\n <div className={header()}>\n <Typography variant=\"bonprix-h6\" component={titleComponent}>\n {title}\n </Typography>\n </div>\n )}\n <motion.ul\n ref={listRef}\n animate={{ height }}\n transition={transition}\n className={list()}\n style={{ gap, paddingBlockStart, paddingBlockEnd }}\n >\n {children}\n </motion.ul>\n {showInteractionBox && (\n <div className={interactionBox()}>\n <Typography variant=\"body2\" color=\"on-bg-low\" aria-live=\"polite\" className={counter()}>\n {`${shownItems} von ${totalItems} angezeigt`}\n </Typography>\n\n <Button variant=\"secondary\" onClick={triggerNextState}>\n {shownItems === totalItems ? buttonShowLessLabel : buttonShowMoreLabel}\n </Button>\n </div>\n )}\n </section>\n );\n};\n\nShowMoreListRoot.displayName = \"ShowMoreList\";\n\nexport default ShowMoreListRoot;\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,QAAQ;EACR,MAAM;EACN,gBAAgB;EAChB,SAAS;CACX;CACA,UAAU;EACR,gBAAgB;GACd,MAAM,CAAC;GACP,SAAS;IAAE,QAAQ;IAAa,gBAAgB;GAAY;GAC5D,KAAK;IAAE,QAAQ;IAAW,gBAAgB;GAAU;EACtD;EACA,aAAa,EACX,MAAM,EAAE,SAAS,UAAU,EAC7B;CACF;AACF,CAAC,GAyCK,KAAoB,EACxB,UACA,aACA,yBAAsB,GACtB,eAAY,IACZ,iBAAc,IACd,gCAA6B,IAC7B,oBAAiB,QACjB,yBAAsB,oBACtB,yBAAsB,iBACtB,mBAAgB,IAChB,oBAAiB,MACjB,SAAM,GACN,6BAA0B,IAC1B,mBACA,sBACA,kBACuB;CACvB,IAAM,IAAa,EAAoB,IAAI,GACrC,IAAU,EAAyB,IAAI,GAEvC,IAAuB,EAAwB,GAC/C,EAAE,oCAAiC,EAAgC,GACnE,IAAa,IAAuB,EAAE,UAAU,EAAE,IAAI,GAEtD,EAAE,UAAO,kBAAe,EAAqB;EACjD;EACA;CACF,CAAC,GAEK,EAAE,eAAY,uBAAoB,wBAAqB,EAAsB;EACjF;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAEK,EAAE,cAAW,EAAsB;EACvC;EACA;EACA;EACA;CACF,CAAC,GAEK,EAAE,SAAM,WAAQ,SAAM,mBAAgB,eAAY,EAAgB;EAAE;EAAgB;CAAY,CAAC,GAEjG,IAAoB,IAA2B,KAAkB,IAAO,KAAA,GACxE,IAAkB,IAA2B,KAAqB,IAAO,KAAA;CAE/E,OACE,kBAAC,WAAD;EACE,KAAK;EACL,WAAW,EAAK;EAChB,cAAY;EACZ,aAAU;EACV,wBAAsB;EACtB,0BAAwB;EACxB,4CAA0C;EAC1C,6BAA2B;EAC3B,yBAAuB,CAAC,CAAC;EAT3B,UAAA;GAWG,CAAC,KACA,kBAAC,OAAD;IAAK,WAAW,EAAO;IACrB,UAAA,kBAAC,GAAD;KAAY,SAAQ;KAAa,WAAW;KACzC,UAAA;IACS,CAAA;GACT,CAAA;GAEP,kBAAC,EAAO,IAAR;IACE,KAAK;IACL,SAAS,EAAE,UAAO;IACN;IACZ,WAAW,EAAK;IAChB,OAAO;KAAE;KAAK;KAAmB;IAAgB;IAEhD;GACQ,CAAA;GACV,KACC,kBAAC,OAAD;IAAK,WAAW,EAAe;IAA/B,UAAA,CACE,kBAAC,GAAD;KAAY,SAAQ;KAAQ,OAAM;KAAY,aAAU;KAAS,WAAW,EAAQ;KACjF,UAAA,GAAG,EAAW,OAAO,EAAW;IACvB,CAAA,GAEZ,kBAAC,GAAD;KAAQ,SAAQ;KAAY,SAAS;KAClC,UAAA,MAAe,IAAa,IAAsB;IAC7C,CAAA,CACL;;EAEA;;AAEb;AAEA,EAAiB,cAAc"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
export declare const calculatePreviewHeightInPx: (previewHeight: string | number | undefined, previewItemHeight?: number) => number;
|
|
3
|
+
declare const useShowMoreListHeight: ({ listRef, items, shownItems, previewHeight, }: {
|
|
4
|
+
listRef: RefObject<HTMLUListElement | null>;
|
|
5
|
+
items: NodeListOf<Element> | undefined;
|
|
6
|
+
shownItems: number;
|
|
7
|
+
previewHeight?: string | number;
|
|
8
|
+
}) => {
|
|
9
|
+
height: number | "auto";
|
|
10
|
+
};
|
|
11
|
+
export default useShowMoreListHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShowMoreListHeight.js","names":[],"sources":["../../src/useShowMoreListHeight.ts"],"sourcesContent":["import { RefObject, useCallback, useLayoutEffect, useRef, useState } from \"react\";\n\nexport const calculatePreviewHeightInPx = (previewHeight: string | number | undefined, previewItemHeight?: number) => {\n if (typeof previewHeight === \"number\") return previewHeight;\n if (previewHeight?.includes(\"px\")) return parseInt(previewHeight);\n\n if (previewHeight?.includes(\"%\") && previewItemHeight) {\n const percentage = parseInt(previewHeight) / 100;\n return percentage * previewItemHeight;\n }\n\n return 0;\n};\n\nconst useShowMoreListHeight = ({\n listRef,\n items,\n shownItems,\n previewHeight,\n}: {\n listRef: RefObject<HTMLUListElement | null>;\n items: NodeListOf<Element> | undefined;\n shownItems: number;\n previewHeight?: string | number;\n}) => {\n const width = useRef<number>(0);\n const [height, setHeight] = useState<number | \"auto\">(\"auto\");\n\n const calculateHeight = useCallback(() => {\n if (!listRef.current) return setHeight(\"auto\");\n\n // When there's no preview item, we've reached the end and can render full height with \"auto\" value.\n const previewItem = items?.[shownItems];\n if (!previewItem) return setHeight(\"auto\");\n\n const { top: listRefTop } = listRef.current.getBoundingClientRect();\n const { top: previewItemTop, height: previewItemHeight } = previewItem.getBoundingClientRect();\n const previewHeightInPx = calculatePreviewHeightInPx(previewHeight, previewItemHeight);\n\n const newHeight = previewItemTop - listRefTop + previewHeightInPx;\n setHeight(newHeight);\n }, [listRef, items, shownItems, previewHeight]);\n\n useLayoutEffect(() => {\n //
|
|
1
|
+
{"version":3,"file":"useShowMoreListHeight.js","names":[],"sources":["../../src/useShowMoreListHeight.ts"],"sourcesContent":["import { RefObject, useCallback, useLayoutEffect, useRef, useState } from \"react\";\n\nexport const calculatePreviewHeightInPx = (previewHeight: string | number | undefined, previewItemHeight?: number) => {\n if (typeof previewHeight === \"number\") return previewHeight;\n if (previewHeight?.includes(\"px\")) return parseInt(previewHeight);\n\n if (previewHeight?.includes(\"%\") && previewItemHeight) {\n const percentage = parseInt(previewHeight) / 100;\n return percentage * previewItemHeight;\n }\n\n return 0;\n};\n\nconst useShowMoreListHeight = ({\n listRef,\n items,\n shownItems,\n previewHeight,\n}: {\n listRef: RefObject<HTMLUListElement | null>;\n items: NodeListOf<Element> | undefined;\n shownItems: number;\n previewHeight?: string | number;\n}) => {\n const width = useRef<number>(0);\n const [height, setHeight] = useState<number | \"auto\">(\"auto\");\n\n const calculateHeight = useCallback(() => {\n if (!listRef.current) return setHeight(\"auto\");\n\n // When there's no preview item, we've reached the end and can render full height with \"auto\" value.\n const previewItem = items?.[shownItems];\n if (!previewItem) return setHeight(\"auto\");\n\n const { top: listRefTop } = listRef.current.getBoundingClientRect();\n const { top: previewItemTop, height: previewItemHeight } = previewItem.getBoundingClientRect();\n const previewHeightInPx = calculatePreviewHeightInPx(previewHeight, previewItemHeight);\n\n const newHeight = previewItemTop - listRefTop + previewHeightInPx;\n setHeight(newHeight);\n }, [listRef, items, shownItems, previewHeight]);\n\n useLayoutEffect(() => {\n // oxlint-disable-next-line react-hooks/set-state-in-effect\n calculateHeight();\n\n const list = listRef.current;\n if (!list) return;\n\n const observer = new ResizeObserver(([list]) => {\n const { inlineSize: newWidth } = list.borderBoxSize[0];\n\n const widthChanged = Math.abs(width.current - newWidth) >= 1;\n if (!widthChanged) return;\n\n width.current = newWidth;\n calculateHeight();\n });\n\n observer.observe(list);\n\n return () => observer.disconnect();\n }, [calculateHeight, listRef]);\n\n return {\n height,\n };\n};\n\nexport default useShowMoreListHeight;\n"],"mappings":";;AAEA,IAAa,KAA8B,GAA4C,MACjF,OAAO,KAAkB,WAAiB,IAC1C,GAAe,SAAS,IAAI,IAAU,SAAS,CAAa,IAE5D,GAAe,SAAS,GAAG,KAAK,IACf,SAAS,CAAa,IAAI,MACzB,IAGf,GAGH,KAAyB,EAC7B,YACA,UACA,eACA,uBAMI;CACJ,IAAM,IAAQ,EAAe,CAAC,GACxB,CAAC,GAAQ,KAAa,EAA0B,MAAM,GAEtD,IAAkB,QAAkB;EACxC,IAAI,CAAC,EAAQ,SAAS,OAAO,EAAU,MAAM;EAG7C,IAAM,IAAc,IAAQ;EAC5B,IAAI,CAAC,GAAa,OAAO,EAAU,MAAM;EAEzC,IAAM,EAAE,KAAK,MAAe,EAAQ,QAAQ,sBAAsB,GAC5D,EAAE,KAAK,GAAgB,QAAQ,MAAsB,EAAY,sBAAsB,GACvF,IAAoB,EAA2B,GAAe,CAAiB,GAE/E,IAAY,IAAiB,IAAa;EAChD,EAAU,CAAS;CACrB,GAAG;EAAC;EAAS;EAAO;EAAY;CAAa,CAAC;CAwB9C,OAtBA,QAAsB;EAEpB,EAAgB;EAEhB,IAAM,IAAO,EAAQ;EACrB,IAAI,CAAC,GAAM;EAEX,IAAM,IAAW,IAAI,gBAAgB,CAAC,OAAU;GAC9C,IAAM,EAAE,YAAY,MAAa,EAAK,cAAc;GAE/B,KAAK,IAAI,EAAM,UAAU,CAAQ,KAAK,MAG3D,EAAM,UAAU,GAChB,EAAgB;EAClB,CAAC;EAID,OAFA,EAAS,QAAQ,CAAI,SAER,EAAS,WAAW;CACnC,GAAG,CAAC,GAAiB,CAAO,CAAC,GAEtB,EACL,UACF;AACF"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from "react";
|
|
2
|
+
declare const useShowMoreListItems: ({ listRef, children }: {
|
|
3
|
+
listRef: RefObject<HTMLUListElement | null>;
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}) => {
|
|
6
|
+
items: NodeListOf<Element> | undefined;
|
|
7
|
+
totalItems: number;
|
|
8
|
+
};
|
|
9
|
+
export default useShowMoreListItems;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
export declare const calculateStates: ({ initiallyShownItems, totalItems }: {
|
|
3
|
+
initiallyShownItems: number;
|
|
4
|
+
totalItems: number;
|
|
5
|
+
}) => number[];
|
|
6
|
+
declare const useShowMoreListStates: ({ items, initiallyShownItems, totalItems, sectionRef, prefersReducedMotion, hideInteractionBoxWhenOpen, onChange, }: {
|
|
7
|
+
items: NodeListOf<Element> | undefined;
|
|
8
|
+
initiallyShownItems: number;
|
|
9
|
+
totalItems: number;
|
|
10
|
+
sectionRef: RefObject<HTMLElement | null>;
|
|
11
|
+
prefersReducedMotion: boolean;
|
|
12
|
+
hideInteractionBoxWhenOpen: boolean;
|
|
13
|
+
onChange?: (shownItems: number, nextShownItems: number) => void;
|
|
14
|
+
}) => {
|
|
15
|
+
shownItems: number;
|
|
16
|
+
showInteractionBox: boolean;
|
|
17
|
+
triggerNextState: () => void;
|
|
18
|
+
};
|
|
19
|
+
export default useShowMoreListStates;
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-show-more-list",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "ShowMoreList component, implemented in React, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
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/show-more-list"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
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,39 +27,29 @@
|
|
|
16
27
|
"default": "./dist/index.js"
|
|
17
28
|
}
|
|
18
29
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
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/show-more-list"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
|
-
"motion": "13.
|
|
33
|
-
"@bonprix-ds/react-button": "1.
|
|
35
|
+
"motion": "13.4.0",
|
|
36
|
+
"@bonprix-ds/react-button": "1.1.1",
|
|
34
37
|
"@bonprix-ds/react-typography": "1.0.4",
|
|
35
|
-
"@bonprix-ds/utils": "0.2.
|
|
36
|
-
},
|
|
37
|
-
"peerDependencies": {
|
|
38
|
-
"react": "^19.0.0",
|
|
39
|
-
"react-dom": "^19.0.0",
|
|
40
|
-
"tailwind-variants": "0.3.1"
|
|
38
|
+
"@bonprix-ds/utils": "0.2.2"
|
|
41
39
|
},
|
|
42
40
|
"devDependencies": {
|
|
43
|
-
"
|
|
44
|
-
"vitest": "4.1.11",
|
|
45
|
-
"@testing-library/dom": "10.4.1",
|
|
41
|
+
"@testing-library/dom": "10.4.2",
|
|
46
42
|
"@testing-library/react": "16.3.3",
|
|
47
|
-
"@types/react": "19.
|
|
43
|
+
"@types/react": "19.3.0",
|
|
48
44
|
"@vitejs/plugin-react": "6.1.1",
|
|
49
45
|
"rollup-preserve-directives": "1.1.3",
|
|
50
|
-
"
|
|
51
|
-
"
|
|
46
|
+
"vite": "8.3.0",
|
|
47
|
+
"vitest": "4.1.11"
|
|
48
|
+
},
|
|
49
|
+
"peerDependencies": {
|
|
50
|
+
"react": "^19.3.0",
|
|
51
|
+
"react-dom": "^19.3.0",
|
|
52
|
+
"tailwind-variants": "0.3.1"
|
|
52
53
|
},
|
|
53
54
|
"scripts": {
|
|
54
55
|
"build": "vite build"
|