jvetrau-ds 0.1.44 → 0.1.45
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.
|
@@ -12,36 +12,49 @@ var React__default = /*#__PURE__*/_interopDefault(React);
|
|
|
12
12
|
function hasContent(value) {
|
|
13
13
|
return value !== null && value !== void 0;
|
|
14
14
|
}
|
|
15
|
-
function
|
|
16
|
-
if (
|
|
15
|
+
function normalizeOpenItemId(items, openId) {
|
|
16
|
+
if (openId === null || openId === void 0) {
|
|
17
17
|
return null;
|
|
18
18
|
}
|
|
19
19
|
const hasMatchingItem = items.some(
|
|
20
|
-
(item) => item.id ===
|
|
20
|
+
(item) => item.id === openId
|
|
21
21
|
);
|
|
22
|
-
return hasMatchingItem ?
|
|
22
|
+
return hasMatchingItem ? openId : null;
|
|
23
23
|
}
|
|
24
24
|
const FlipList = ({
|
|
25
25
|
items,
|
|
26
|
+
openId,
|
|
26
27
|
defaultOpenId,
|
|
27
|
-
|
|
28
|
+
onOpenChange,
|
|
29
|
+
scrollToInitialOpen = false,
|
|
28
30
|
className = "",
|
|
29
31
|
...props
|
|
30
32
|
}) => {
|
|
31
33
|
const componentId = React__default.default.useId();
|
|
34
|
+
const isControlled = openId !== void 0;
|
|
32
35
|
const initialOpenItemIdRef = React__default.default.useRef(
|
|
33
|
-
|
|
36
|
+
normalizeOpenItemId(
|
|
34
37
|
items,
|
|
35
|
-
defaultOpenId
|
|
38
|
+
isControlled ? openId : defaultOpenId
|
|
36
39
|
)
|
|
37
40
|
);
|
|
38
|
-
const shouldScrollInitiallyRef = React__default.default.useRef(
|
|
41
|
+
const shouldScrollInitiallyRef = React__default.default.useRef(scrollToInitialOpen);
|
|
39
42
|
const initialOpenItemRef = React__default.default.useRef(
|
|
40
43
|
null
|
|
41
44
|
);
|
|
42
45
|
const hasScrolledInitiallyRef = React__default.default.useRef(false);
|
|
43
|
-
const [
|
|
44
|
-
|
|
46
|
+
const [
|
|
47
|
+
uncontrolledOpenItemId,
|
|
48
|
+
setUncontrolledOpenItemId
|
|
49
|
+
] = React__default.default.useState(
|
|
50
|
+
() => normalizeOpenItemId(
|
|
51
|
+
items,
|
|
52
|
+
defaultOpenId
|
|
53
|
+
)
|
|
54
|
+
);
|
|
55
|
+
const resolvedOpenItemId = normalizeOpenItemId(
|
|
56
|
+
items,
|
|
57
|
+
isControlled ? openId : uncontrolledOpenItemId
|
|
45
58
|
);
|
|
46
59
|
React__default.default.useEffect(() => {
|
|
47
60
|
if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
|
|
@@ -62,9 +75,13 @@ const FlipList = ({
|
|
|
62
75
|
{}
|
|
63
76
|
);
|
|
64
77
|
const toggleItem = (itemId) => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
78
|
+
const nextOpenItemId = resolvedOpenItemId === itemId ? null : itemId;
|
|
79
|
+
if (!isControlled) {
|
|
80
|
+
setUncontrolledOpenItemId(
|
|
81
|
+
nextOpenItemId
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
onOpenChange?.(nextOpenItemId);
|
|
68
85
|
};
|
|
69
86
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
87
|
"div",
|
|
@@ -72,7 +89,7 @@ const FlipList = ({
|
|
|
72
89
|
className: classes,
|
|
73
90
|
...props,
|
|
74
91
|
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
|
|
75
|
-
const isOpen =
|
|
92
|
+
const isOpen = resolvedOpenItemId === item.id;
|
|
76
93
|
const hasMeta = hasContent(
|
|
77
94
|
item.meta
|
|
78
95
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":["React","classnames","jsx","jsxs"],"mappings":"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","file":"flip-list.cjs","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n id: React.Key;\n title: React.ReactNode;\n meta?: React.ReactNode;\n content: React.ReactNode;\n}\n\nexport interface FlipListProps\n extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'children'\n > {\n items: FlipListItem[];\n\n /**\n * Currently opened item in controlled mode.\n *\n * `null` means that all items are closed.\n *\n * When this prop is provided, FlipList does not\n * own the opened-item state.\n */\n openId?: React.Key | null;\n\n /**\n * Item opened during the initial render\n * in uncontrolled mode.\n *\n * Later changes to this prop do not control\n * the component state.\n */\n defaultOpenId?: React.Key;\n\n /**\n * Called when the user requests a change\n * of the opened item.\n *\n * Receives the item id when an item is opened,\n * and `null` when the currently opened item\n * is closed.\n */\n onOpenChange?: (\n id: React.Key | null,\n ) => void;\n\n /**\n * Scrolls the item that is open during\n * the initial render into view once.\n *\n * In uncontrolled mode, the initial item comes\n * from `defaultOpenId`.\n *\n * In controlled mode, the initial item comes\n * from `openId`.\n *\n * Later state changes never trigger scrolling.\n */\n scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n value: React.ReactNode,\n): value is Exclude<\n React.ReactNode,\n null | undefined\n> {\n return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n items: FlipListItem[],\n openId: OpenItemId | undefined,\n): OpenItemId {\n if (\n openId === null ||\n openId === undefined\n ) {\n return null;\n }\n\n const hasMatchingItem = items.some(\n (item) => item.id === openId,\n );\n\n return hasMatchingItem\n ? openId\n : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n items,\n openId,\n defaultOpenId,\n onOpenChange,\n scrollToInitialOpen = false,\n className = '',\n ...props\n}) => {\n const componentId = React.useId();\n\n const isControlled =\n openId !== undefined;\n\n const initialOpenItemIdRef =\n React.useRef<OpenItemId>(\n normalizeOpenItemId(\n items,\n isControlled\n ? openId\n : defaultOpenId,\n ),\n );\n\n const shouldScrollInitiallyRef =\n React.useRef(scrollToInitialOpen);\n\n const initialOpenItemRef =\n React.useRef<HTMLDivElement | null>(\n null,\n );\n\n const hasScrolledInitiallyRef =\n React.useRef(false);\n\n const [\n uncontrolledOpenItemId,\n setUncontrolledOpenItemId,\n ] = React.useState<OpenItemId>(() =>\n normalizeOpenItemId(\n items,\n defaultOpenId,\n ),\n );\n\n const resolvedOpenItemId =\n normalizeOpenItemId(\n items,\n isControlled\n ? openId\n : uncontrolledOpenItemId,\n );\n\n React.useEffect(() => {\n if (\n hasScrolledInitiallyRef.current ||\n !shouldScrollInitiallyRef.current ||\n initialOpenItemIdRef.current === null ||\n !initialOpenItemRef.current\n ) {\n return;\n }\n\n hasScrolledInitiallyRef.current = true;\n\n initialOpenItemRef.current.scrollIntoView({\n behavior: 'auto',\n block: 'start',\n });\n }, []);\n\n if (items.length === 0) {\n return null;\n }\n\n const classes = classnames(\n 'flip-list',\n className,\n {},\n );\n\n const toggleItem = (\n itemId: React.Key,\n ) => {\n const nextOpenItemId =\n resolvedOpenItemId === itemId\n ? null\n : itemId;\n\n if (!isControlled) {\n setUncontrolledOpenItemId(\n nextOpenItemId,\n );\n }\n\n onOpenChange?.(nextOpenItemId);\n };\n\n return (\n <div\n className={classes}\n {...props}\n >\n <div className=\"flip-list__items\">\n {items.map((item, itemIndex) => {\n const isOpen =\n resolvedOpenItemId === item.id;\n\n const hasMeta = hasContent(\n item.meta,\n );\n\n const triggerId =\n `${componentId}-trigger-${itemIndex}`;\n\n const contentId =\n `${componentId}-content-${itemIndex}`;\n\n const itemClasses = classnames(\n 'flip-list__item',\n '',\n {\n 'flip-list__item--open':\n isOpen,\n },\n );\n\n return (\n <div\n key={item.id}\n ref={\n item.id ===\n initialOpenItemIdRef.current\n ? initialOpenItemRef\n : undefined\n }\n className={itemClasses}\n >\n <button\n className=\"flip-list__trigger\"\n id={triggerId}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={contentId}\n onClick={() =>\n toggleItem(item.id)\n }\n >\n <span className=\"flip-list__title\">\n {item.title}\n </span>\n\n {hasMeta && (\n <span className=\"flip-list__meta\">\n {item.meta}\n </span>\n )}\n </button>\n\n <div\n className=\"flip-list__content\"\n id={contentId}\n aria-labelledby={triggerId}\n hidden={!isOpen}\n >\n {item.content}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default FlipList;\n"]}
|
|
@@ -9,20 +9,44 @@ export interface FlipListItem {
|
|
|
9
9
|
export interface FlipListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
10
10
|
items: FlipListItem[];
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
12
|
+
* Currently opened item in controlled mode.
|
|
13
|
+
*
|
|
14
|
+
* `null` means that all items are closed.
|
|
15
|
+
*
|
|
16
|
+
* When this prop is provided, FlipList does not
|
|
17
|
+
* own the opened-item state.
|
|
18
|
+
*/
|
|
19
|
+
openId?: React.Key | null;
|
|
20
|
+
/**
|
|
21
|
+
* Item opened during the initial render
|
|
22
|
+
* in uncontrolled mode.
|
|
13
23
|
*
|
|
14
24
|
* Later changes to this prop do not control
|
|
15
25
|
* the component state.
|
|
16
26
|
*/
|
|
17
27
|
defaultOpenId?: React.Key;
|
|
18
28
|
/**
|
|
19
|
-
*
|
|
20
|
-
*
|
|
29
|
+
* Called when the user requests a change
|
|
30
|
+
* of the opened item.
|
|
31
|
+
*
|
|
32
|
+
* Receives the item id when an item is opened,
|
|
33
|
+
* and `null` when the currently opened item
|
|
34
|
+
* is closed.
|
|
35
|
+
*/
|
|
36
|
+
onOpenChange?: (id: React.Key | null) => void;
|
|
37
|
+
/**
|
|
38
|
+
* Scrolls the item that is open during
|
|
39
|
+
* the initial render into view once.
|
|
40
|
+
*
|
|
41
|
+
* In uncontrolled mode, the initial item comes
|
|
42
|
+
* from `defaultOpenId`.
|
|
43
|
+
*
|
|
44
|
+
* In controlled mode, the initial item comes
|
|
45
|
+
* from `openId`.
|
|
21
46
|
*
|
|
22
|
-
*
|
|
23
|
-
* Manual item opening never triggers scrolling.
|
|
47
|
+
* Later state changes never trigger scrolling.
|
|
24
48
|
*/
|
|
25
|
-
|
|
49
|
+
scrollToInitialOpen?: boolean;
|
|
26
50
|
}
|
|
27
51
|
declare const FlipList: React.FC<FlipListProps>;
|
|
28
52
|
export default FlipList;
|
|
@@ -6,36 +6,49 @@ import { classnames } from '../helpers/classnames';
|
|
|
6
6
|
function hasContent(value) {
|
|
7
7
|
return value !== null && value !== void 0;
|
|
8
8
|
}
|
|
9
|
-
function
|
|
10
|
-
if (
|
|
9
|
+
function normalizeOpenItemId(items, openId) {
|
|
10
|
+
if (openId === null || openId === void 0) {
|
|
11
11
|
return null;
|
|
12
12
|
}
|
|
13
13
|
const hasMatchingItem = items.some(
|
|
14
|
-
(item) => item.id ===
|
|
14
|
+
(item) => item.id === openId
|
|
15
15
|
);
|
|
16
|
-
return hasMatchingItem ?
|
|
16
|
+
return hasMatchingItem ? openId : null;
|
|
17
17
|
}
|
|
18
18
|
const FlipList = ({
|
|
19
19
|
items,
|
|
20
|
+
openId,
|
|
20
21
|
defaultOpenId,
|
|
21
|
-
|
|
22
|
+
onOpenChange,
|
|
23
|
+
scrollToInitialOpen = false,
|
|
22
24
|
className = "",
|
|
23
25
|
...props
|
|
24
26
|
}) => {
|
|
25
27
|
const componentId = React.useId();
|
|
28
|
+
const isControlled = openId !== void 0;
|
|
26
29
|
const initialOpenItemIdRef = React.useRef(
|
|
27
|
-
|
|
30
|
+
normalizeOpenItemId(
|
|
28
31
|
items,
|
|
29
|
-
defaultOpenId
|
|
32
|
+
isControlled ? openId : defaultOpenId
|
|
30
33
|
)
|
|
31
34
|
);
|
|
32
|
-
const shouldScrollInitiallyRef = React.useRef(
|
|
35
|
+
const shouldScrollInitiallyRef = React.useRef(scrollToInitialOpen);
|
|
33
36
|
const initialOpenItemRef = React.useRef(
|
|
34
37
|
null
|
|
35
38
|
);
|
|
36
39
|
const hasScrolledInitiallyRef = React.useRef(false);
|
|
37
|
-
const [
|
|
38
|
-
|
|
40
|
+
const [
|
|
41
|
+
uncontrolledOpenItemId,
|
|
42
|
+
setUncontrolledOpenItemId
|
|
43
|
+
] = React.useState(
|
|
44
|
+
() => normalizeOpenItemId(
|
|
45
|
+
items,
|
|
46
|
+
defaultOpenId
|
|
47
|
+
)
|
|
48
|
+
);
|
|
49
|
+
const resolvedOpenItemId = normalizeOpenItemId(
|
|
50
|
+
items,
|
|
51
|
+
isControlled ? openId : uncontrolledOpenItemId
|
|
39
52
|
);
|
|
40
53
|
React.useEffect(() => {
|
|
41
54
|
if (hasScrolledInitiallyRef.current || !shouldScrollInitiallyRef.current || initialOpenItemIdRef.current === null || !initialOpenItemRef.current) {
|
|
@@ -56,9 +69,13 @@ const FlipList = ({
|
|
|
56
69
|
{}
|
|
57
70
|
);
|
|
58
71
|
const toggleItem = (itemId) => {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
72
|
+
const nextOpenItemId = resolvedOpenItemId === itemId ? null : itemId;
|
|
73
|
+
if (!isControlled) {
|
|
74
|
+
setUncontrolledOpenItemId(
|
|
75
|
+
nextOpenItemId
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
onOpenChange?.(nextOpenItemId);
|
|
62
79
|
};
|
|
63
80
|
return /* @__PURE__ */ jsx(
|
|
64
81
|
"div",
|
|
@@ -66,7 +83,7 @@ const FlipList = ({
|
|
|
66
83
|
className: classes,
|
|
67
84
|
...props,
|
|
68
85
|
children: /* @__PURE__ */ jsx("div", { className: "flip-list__items", children: items.map((item, itemIndex) => {
|
|
69
|
-
const isOpen =
|
|
86
|
+
const isOpen = resolvedOpenItemId === item.id;
|
|
70
87
|
const hasMeta = hasContent(
|
|
71
88
|
item.meta
|
|
72
89
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"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","file":"flip-list.js","sourcesContent":["import React from 'react';\n\nimport './flip-list.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface FlipListItem {\n id: React.Key;\n title: React.ReactNode;\n meta?: React.ReactNode;\n content: React.ReactNode;\n}\n\nexport interface FlipListProps\n extends Omit<\n React.HTMLAttributes<HTMLDivElement>,\n 'children'\n > {\n items: FlipListItem[];\n\n /**\n * Currently opened item in controlled mode.\n *\n * `null` means that all items are closed.\n *\n * When this prop is provided, FlipList does not\n * own the opened-item state.\n */\n openId?: React.Key | null;\n\n /**\n * Item opened during the initial render\n * in uncontrolled mode.\n *\n * Later changes to this prop do not control\n * the component state.\n */\n defaultOpenId?: React.Key;\n\n /**\n * Called when the user requests a change\n * of the opened item.\n *\n * Receives the item id when an item is opened,\n * and `null` when the currently opened item\n * is closed.\n */\n onOpenChange?: (\n id: React.Key | null,\n ) => void;\n\n /**\n * Scrolls the item that is open during\n * the initial render into view once.\n *\n * In uncontrolled mode, the initial item comes\n * from `defaultOpenId`.\n *\n * In controlled mode, the initial item comes\n * from `openId`.\n *\n * Later state changes never trigger scrolling.\n */\n scrollToInitialOpen?: boolean;\n}\n\ntype OpenItemId = React.Key | null;\n\nfunction hasContent(\n value: React.ReactNode,\n): value is Exclude<\n React.ReactNode,\n null | undefined\n> {\n return value !== null && value !== undefined;\n}\n\nfunction normalizeOpenItemId(\n items: FlipListItem[],\n openId: OpenItemId | undefined,\n): OpenItemId {\n if (\n openId === null ||\n openId === undefined\n ) {\n return null;\n }\n\n const hasMatchingItem = items.some(\n (item) => item.id === openId,\n );\n\n return hasMatchingItem\n ? openId\n : null;\n}\n\nconst FlipList: React.FC<FlipListProps> = ({\n items,\n openId,\n defaultOpenId,\n onOpenChange,\n scrollToInitialOpen = false,\n className = '',\n ...props\n}) => {\n const componentId = React.useId();\n\n const isControlled =\n openId !== undefined;\n\n const initialOpenItemIdRef =\n React.useRef<OpenItemId>(\n normalizeOpenItemId(\n items,\n isControlled\n ? openId\n : defaultOpenId,\n ),\n );\n\n const shouldScrollInitiallyRef =\n React.useRef(scrollToInitialOpen);\n\n const initialOpenItemRef =\n React.useRef<HTMLDivElement | null>(\n null,\n );\n\n const hasScrolledInitiallyRef =\n React.useRef(false);\n\n const [\n uncontrolledOpenItemId,\n setUncontrolledOpenItemId,\n ] = React.useState<OpenItemId>(() =>\n normalizeOpenItemId(\n items,\n defaultOpenId,\n ),\n );\n\n const resolvedOpenItemId =\n normalizeOpenItemId(\n items,\n isControlled\n ? openId\n : uncontrolledOpenItemId,\n );\n\n React.useEffect(() => {\n if (\n hasScrolledInitiallyRef.current ||\n !shouldScrollInitiallyRef.current ||\n initialOpenItemIdRef.current === null ||\n !initialOpenItemRef.current\n ) {\n return;\n }\n\n hasScrolledInitiallyRef.current = true;\n\n initialOpenItemRef.current.scrollIntoView({\n behavior: 'auto',\n block: 'start',\n });\n }, []);\n\n if (items.length === 0) {\n return null;\n }\n\n const classes = classnames(\n 'flip-list',\n className,\n {},\n );\n\n const toggleItem = (\n itemId: React.Key,\n ) => {\n const nextOpenItemId =\n resolvedOpenItemId === itemId\n ? null\n : itemId;\n\n if (!isControlled) {\n setUncontrolledOpenItemId(\n nextOpenItemId,\n );\n }\n\n onOpenChange?.(nextOpenItemId);\n };\n\n return (\n <div\n className={classes}\n {...props}\n >\n <div className=\"flip-list__items\">\n {items.map((item, itemIndex) => {\n const isOpen =\n resolvedOpenItemId === item.id;\n\n const hasMeta = hasContent(\n item.meta,\n );\n\n const triggerId =\n `${componentId}-trigger-${itemIndex}`;\n\n const contentId =\n `${componentId}-content-${itemIndex}`;\n\n const itemClasses = classnames(\n 'flip-list__item',\n '',\n {\n 'flip-list__item--open':\n isOpen,\n },\n );\n\n return (\n <div\n key={item.id}\n ref={\n item.id ===\n initialOpenItemIdRef.current\n ? initialOpenItemRef\n : undefined\n }\n className={itemClasses}\n >\n <button\n className=\"flip-list__trigger\"\n id={triggerId}\n type=\"button\"\n aria-expanded={isOpen}\n aria-controls={contentId}\n onClick={() =>\n toggleItem(item.id)\n }\n >\n <span className=\"flip-list__title\">\n {item.title}\n </span>\n\n {hasMeta && (\n <span className=\"flip-list__meta\">\n {item.meta}\n </span>\n )}\n </button>\n\n <div\n className=\"flip-list__content\"\n id={contentId}\n aria-labelledby={triggerId}\n hidden={!isOpen}\n >\n {item.content}\n </div>\n </div>\n );\n })}\n </div>\n </div>\n );\n};\n\nexport default FlipList;\n"]}
|