@akinon/ui-collapse 0.4.0 → 0.5.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.
@@ -0,0 +1,168 @@
1
+ import { IconName } from '@akinon/icons';
2
+ import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
3
+ import type React from 'react';
4
+
5
+ export type ExpandIconPosition = 'start' | 'end';
6
+ export type CollapsibleType = 'header' | 'icon' | 'disabled';
7
+
8
+ export interface ItemType extends React.DOMAttributes<HTMLDivElement> {
9
+ /**
10
+ * The key of the panel.
11
+ */
12
+ key?: React.Key;
13
+ /**
14
+ * The label of the panel.
15
+ */
16
+ label?: React.ReactNode;
17
+ /**
18
+ * The React ref object of the panel.
19
+ */
20
+ ref?: React.RefObject<HTMLDivElement>;
21
+ /**
22
+ * The id of the panel.
23
+ */
24
+ id?: string;
25
+ /**
26
+ * The class name of the panel header.
27
+ */
28
+ headerClass?: string;
29
+ /**
30
+ * Whether to show the arrow.
31
+ */
32
+ showArrow?: boolean;
33
+ /**
34
+ * The class name of the panel.
35
+ */
36
+ className?: string;
37
+ /**
38
+ * Whether to destroy the inactive panel.
39
+ */
40
+ destroyInactivePanel?: boolean;
41
+ /**
42
+ * Forced render of content on panel, instead of lazy rendering after clicking on header.
43
+ */
44
+ forceRender?: boolean;
45
+ /**
46
+ * The extra element of the panel header.
47
+ */
48
+ extra?: React.ReactNode;
49
+ /**
50
+ * The callback function that is triggered when the panel is clicked.
51
+ */
52
+ onItemClick?: (panelKey: React.Key) => void;
53
+ /**
54
+ * Custom expand icon.
55
+ */
56
+ expandIcon?: (panelProps: PanelProps) => IconName;
57
+ /**
58
+ * The HTML WAI-ARIA role of the panel.
59
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
60
+ */
61
+ role?: string;
62
+ /**
63
+ * The children of the panel.
64
+ */
65
+ children?: React.ReactNode;
66
+ }
67
+
68
+ export type CollapseProps = {
69
+ /**
70
+ * The key of the active panel.
71
+ */
72
+ activeKey?: React.Key | React.Key[];
73
+ /**
74
+ * The default key of the active panel.
75
+ */
76
+ defaultActiveKey?: React.Key | React.Key[];
77
+ /**
78
+ * The callback function that is triggered when the active panel changes.
79
+ */
80
+ onChange?: (key: React.Key | React.Key[]) => void;
81
+ /**
82
+ * Whether to enable accordion mode.
83
+ */
84
+ accordion?: boolean;
85
+ /**
86
+ * The class name of the collapse.
87
+ */
88
+ className?: string;
89
+ /**
90
+ * The class name of the root element.
91
+ */
92
+ rootClassName?: string;
93
+ /**
94
+ * Whether to show border.
95
+ */
96
+ bordered?: boolean;
97
+ /**
98
+ * Whether to destroy the inactive panel.
99
+ */
100
+ destroyInactivePanel?: boolean;
101
+ /**
102
+ * The expand icon.
103
+ */
104
+ expandIcon?: (panelProps: PanelProps) => IconName;
105
+ /**
106
+ * The position of the expand icon.
107
+ */
108
+ expandIconPosition?: ExpandIconPosition;
109
+ /**
110
+ * Whether to hide the border and transparent background.
111
+ */
112
+ ghost?: boolean;
113
+ /**
114
+ * The size of the collapse.
115
+ */
116
+ size?: 'small' | 'middle' | 'large';
117
+ /**
118
+ * Collapse-wide collapsible part or disabled.
119
+ */
120
+ collapsible?: CollapsibleType;
121
+ /**
122
+ * The panels of the collapse.
123
+ */
124
+ items?: ItemType[];
125
+ /**
126
+ * The style of the expand icon.
127
+ */
128
+ iconStyle?: React.CSSProperties;
129
+ /**
130
+ * @ignore
131
+ */
132
+ style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
133
+ };
134
+
135
+ export type PanelProps = {
136
+ /**
137
+ * Whether the panel is active.
138
+ */
139
+ isActive?: boolean;
140
+ /**
141
+ * The header of the panel.
142
+ */
143
+ header?: React.ReactNode;
144
+ /**
145
+ * The class name of the panel.
146
+ */
147
+ className?: string;
148
+ /**
149
+ * Whether to show the arrow.
150
+ */
151
+ showArrow?: boolean;
152
+ /**
153
+ * Forced render of content on panel, instead of lazy rendering after clicking on header.
154
+ */
155
+ forceRender?: boolean;
156
+ /**
157
+ * The extra element of the panel header.
158
+ */
159
+ extra?: React.ReactNode;
160
+ /**
161
+ * The collapsible part of the panel or disabled.
162
+ */
163
+ collapsible?: CollapsibleType;
164
+ /**
165
+ * The style of the expand icon.
166
+ */
167
+ iconStyle?: React.CSSProperties;
168
+ };
@@ -0,0 +1,168 @@
1
+ import { IconName } from '@akinon/icons';
2
+ import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
3
+ import type React from 'react';
4
+
5
+ export type ExpandIconPosition = 'start' | 'end';
6
+ export type CollapsibleType = 'header' | 'icon' | 'disabled';
7
+
8
+ export interface ItemType extends React.DOMAttributes<HTMLDivElement> {
9
+ /**
10
+ * The key of the panel.
11
+ */
12
+ key?: React.Key;
13
+ /**
14
+ * The label of the panel.
15
+ */
16
+ label?: React.ReactNode;
17
+ /**
18
+ * The React ref object of the panel.
19
+ */
20
+ ref?: React.RefObject<HTMLDivElement>;
21
+ /**
22
+ * The id of the panel.
23
+ */
24
+ id?: string;
25
+ /**
26
+ * The class name of the panel header.
27
+ */
28
+ headerClass?: string;
29
+ /**
30
+ * Whether to show the arrow.
31
+ */
32
+ showArrow?: boolean;
33
+ /**
34
+ * The class name of the panel.
35
+ */
36
+ className?: string;
37
+ /**
38
+ * Whether to destroy the inactive panel.
39
+ */
40
+ destroyInactivePanel?: boolean;
41
+ /**
42
+ * Forced render of content on panel, instead of lazy rendering after clicking on header.
43
+ */
44
+ forceRender?: boolean;
45
+ /**
46
+ * The extra element of the panel header.
47
+ */
48
+ extra?: React.ReactNode;
49
+ /**
50
+ * The callback function that is triggered when the panel is clicked.
51
+ */
52
+ onItemClick?: (panelKey: React.Key) => void;
53
+ /**
54
+ * Custom expand icon.
55
+ */
56
+ expandIcon?: (panelProps: PanelProps) => IconName;
57
+ /**
58
+ * The HTML WAI-ARIA role of the panel.
59
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
60
+ */
61
+ role?: string;
62
+ /**
63
+ * The children of the panel.
64
+ */
65
+ children?: React.ReactNode;
66
+ }
67
+
68
+ export type CollapseProps = {
69
+ /**
70
+ * The key of the active panel.
71
+ */
72
+ activeKey?: React.Key | React.Key[];
73
+ /**
74
+ * The default key of the active panel.
75
+ */
76
+ defaultActiveKey?: React.Key | React.Key[];
77
+ /**
78
+ * The callback function that is triggered when the active panel changes.
79
+ */
80
+ onChange?: (key: React.Key | React.Key[]) => void;
81
+ /**
82
+ * Whether to enable accordion mode.
83
+ */
84
+ accordion?: boolean;
85
+ /**
86
+ * The class name of the collapse.
87
+ */
88
+ className?: string;
89
+ /**
90
+ * The class name of the root element.
91
+ */
92
+ rootClassName?: string;
93
+ /**
94
+ * Whether to show border.
95
+ */
96
+ bordered?: boolean;
97
+ /**
98
+ * Whether to destroy the inactive panel.
99
+ */
100
+ destroyInactivePanel?: boolean;
101
+ /**
102
+ * The expand icon.
103
+ */
104
+ expandIcon?: (panelProps: PanelProps) => IconName;
105
+ /**
106
+ * The position of the expand icon.
107
+ */
108
+ expandIconPosition?: ExpandIconPosition;
109
+ /**
110
+ * Whether to hide the border and transparent background.
111
+ */
112
+ ghost?: boolean;
113
+ /**
114
+ * The size of the collapse.
115
+ */
116
+ size?: 'small' | 'middle' | 'large';
117
+ /**
118
+ * Collapse-wide collapsible part or disabled.
119
+ */
120
+ collapsible?: CollapsibleType;
121
+ /**
122
+ * The panels of the collapse.
123
+ */
124
+ items?: ItemType[];
125
+ /**
126
+ * The style of the expand icon.
127
+ */
128
+ iconStyle?: React.CSSProperties;
129
+ /**
130
+ * @ignore
131
+ */
132
+ style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
133
+ };
134
+
135
+ export type PanelProps = {
136
+ /**
137
+ * Whether the panel is active.
138
+ */
139
+ isActive?: boolean;
140
+ /**
141
+ * The header of the panel.
142
+ */
143
+ header?: React.ReactNode;
144
+ /**
145
+ * The class name of the panel.
146
+ */
147
+ className?: string;
148
+ /**
149
+ * Whether to show the arrow.
150
+ */
151
+ showArrow?: boolean;
152
+ /**
153
+ * Forced render of content on panel, instead of lazy rendering after clicking on header.
154
+ */
155
+ forceRender?: boolean;
156
+ /**
157
+ * The extra element of the panel header.
158
+ */
159
+ extra?: React.ReactNode;
160
+ /**
161
+ * The collapsible part of the panel or disabled.
162
+ */
163
+ collapsible?: CollapsibleType;
164
+ /**
165
+ * The style of the expand icon.
166
+ */
167
+ iconStyle?: React.CSSProperties;
168
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-collapse",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -10,16 +10,16 @@
10
10
  ],
11
11
  "dependencies": {
12
12
  "antd": "5.17.0",
13
- "@akinon/icons": "^0.5.0"
13
+ "@akinon/icons": "^0.6.0"
14
14
  },
15
15
  "devDependencies": {
16
16
  "clean-package": "2.2.0",
17
17
  "copyfiles": "^2.4.1",
18
18
  "rimraf": "^5.0.5",
19
19
  "typescript": "^5.2.2",
20
- "@akinon/ui-theme": "0.6.0",
21
- "@akinon/icons": "0.5.0",
22
- "@akinon/typescript-config": "0.3.0"
20
+ "@akinon/icons": "0.6.0",
21
+ "@akinon/typescript-config": "0.4.0",
22
+ "@akinon/ui-theme": "0.7.0"
23
23
  },
24
24
  "peerDependencies": {
25
25
  "react": ">=18",
@@ -39,7 +39,7 @@
39
39
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
40
40
  "build:esm": "tsc --outDir dist/esm",
41
41
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
42
- "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
42
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
43
43
  "clean": "rimraf dist/",
44
44
  "typecheck": "tsc --noEmit"
45
45
  }