@tidbcloud/uikit 2.0.0-beta.72 → 2.0.0-beta.74

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 (12) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/biz/CodeBlock/index.cjs +3 -0
  3. package/dist/biz/CodeBlock/index.js +3 -0
  4. package/dist/biz/Form/CopyText.cjs +1 -1
  5. package/dist/biz/Form/CopyText.js +1 -1
  6. package/dist/biz/PageShell/index.cjs +1 -0
  7. package/dist/biz/PageShell/index.js +1 -0
  8. package/dist/biz/Table/ProTable/helpers.cjs +53 -4
  9. package/dist/biz/Table/ProTable/helpers.js +53 -4
  10. package/dist/primitive/TextInput/TextInput.cjs +7 -2
  11. package/dist/primitive/TextInput/TextInput.js +7 -2
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.74
4
+
5
+ ### Patch Changes
6
+
7
+ - fix text input with left label padding
8
+
9
+ ## 2.0.0-beta.73
10
+
11
+ ### Patch Changes
12
+
13
+ - fix protable sticky & rowVirtualization style
14
+
3
15
  ## 2.0.0-beta.72
4
16
 
5
17
  ### Patch Changes
package/dist/biz/CodeBlock/index.cjs CHANGED
@@ -100,6 +100,7 @@ const CodeBlock = ({
100
100
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
101
101
  ActionIcon.ActionIcon,
102
102
  {
103
+ "aria-hidden": true,
103
104
  size: "sm",
104
105
  variant: "subtle",
105
106
  onClick: () => {
@@ -116,6 +117,7 @@ const CodeBlock = ({
116
117
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(HoverCard.HoverCard.Target, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
117
118
  ActionIcon.ActionIcon,
118
119
  {
120
+ "aria-label": "Copy",
119
121
  size: "sm",
120
122
  variant: "subtle",
121
123
  onClick: () => {
@@ -154,6 +156,7 @@ const CopyText = ({ children, value, ...rest }) => {
154
156
  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(CopyButton.CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
155
157
  ActionIcon.ActionIcon,
156
158
  {
159
+ "aria-label": "Copy",
157
160
  variant: "subtle",
158
161
  size: "sm",
159
162
  ml: 8,
package/dist/biz/CodeBlock/index.js CHANGED
@@ -98,6 +98,7 @@ const CodeBlock = ({
98
98
  /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
99
99
  ActionIcon,
100
100
  {
101
+ "aria-hidden": true,
101
102
  size: "sm",
102
103
  variant: "subtle",
103
104
  onClick: () => {
@@ -114,6 +115,7 @@ const CodeBlock = ({
114
115
  /* @__PURE__ */ jsxRuntimeExports.jsx(HoverCard.Target, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
115
116
  ActionIcon,
116
117
  {
118
+ "aria-label": "Copy",
117
119
  size: "sm",
118
120
  variant: "subtle",
119
121
  onClick: () => {
@@ -152,6 +154,7 @@ const CopyText = ({ children, value, ...rest }) => {
152
154
  /* @__PURE__ */ jsxRuntimeExports.jsx(CopyButton, { value, timeout: 2e3, children: ({ copied, copy }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, position: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
153
155
  ActionIcon,
154
156
  {
157
+ "aria-label": "Copy",
155
158
  variant: "subtle",
156
159
  size: "sm",
157
160
  ml: 8,
package/dist/biz/Form/CopyText.cjs CHANGED
@@ -60,7 +60,7 @@ const FormCopyText = ({
60
60
  children: value
61
61
  }
62
62
  ),
63
- /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
63
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Tooltip.Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ActionIcon.ActionIcon, { "aria-label": "Copy", color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
64
64
  index$1.IconCopy01,
65
65
  {
66
66
  size,
package/dist/biz/Form/CopyText.js CHANGED
@@ -58,7 +58,7 @@ const FormCopyText = ({
58
58
  children: value
59
59
  }
60
60
  ),
61
- /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
61
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { label: copied ? "Copied" : "Copy", withArrow: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ActionIcon, { "aria-label": "Copy", color: "carbon.8", variant: "transparent", onClick: copy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
62
62
  IconCopy01,
63
63
  {
64
64
  size,
package/dist/biz/PageShell/index.cjs CHANGED
@@ -63,6 +63,7 @@ const PageShell = ({
63
63
  const leftSection = (!!withBack || !!headerBack) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
64
64
  ActionIcon.ActionIcon,
65
65
  {
66
+ "aria-label": "Navigate Back",
66
67
  variant: "default",
67
68
  onClick: () => {
68
69
  if (onBackClick) {
package/dist/biz/PageShell/index.js CHANGED
@@ -61,6 +61,7 @@ const PageShell = ({
61
61
  const leftSection = (!!withBack || !!headerBack) && /* @__PURE__ */ jsxRuntimeExports.jsx(
62
62
  ActionIcon,
63
63
  {
64
+ "aria-label": "Navigate Back",
64
65
  variant: "default",
65
66
  onClick: () => {
66
67
  if (onBackClick) {
package/dist/biz/Table/ProTable/helpers.cjs CHANGED
@@ -32,14 +32,20 @@ function mergeProTableProps(props) {
32
32
  mantinePaperProps = {},
33
33
  mantineSkeletonProps = {},
34
34
  mantineTableBodyProps,
35
+ mantineTableHeadCellProps = {},
35
36
  mantineTableBodyCellProps = {},
37
+ mantineTableBodyRowProps = {},
36
38
  mantineBottomToolbarProps = {},
37
39
  mantineTableFooterCellProps = {},
38
40
  mantineTableFooterRowProps = {},
41
+ mantineTableFooterProps = {},
42
+ mantineLoadingOverlayProps = {},
39
43
  withBorder = true,
40
44
  loading = false,
41
45
  enableExpanding = false,
46
+ enableRowVirtualization = false,
42
47
  enableStickyHeader,
48
+ enableStickyFooter,
43
49
  emptyMessage,
44
50
  errorMessage,
45
51
  data,
@@ -119,11 +125,36 @@ function mergeProTableProps(props) {
119
125
  }
120
126
  return {};
121
127
  }, mantineTableBodyProps);
128
+ const mTableHeaderCellProps = mergeMProps(() => {
129
+ return {
130
+ sx: {
131
+ ".mrt-table-head-sort-button": {
132
+ height: "auto",
133
+ width: "auto",
134
+ backgroundColor: "transparent",
135
+ borderColor: "transparent",
136
+ minWidth: 20,
137
+ minHeight: 20
138
+ }
139
+ }
140
+ };
141
+ }, mantineTableHeadCellProps);
122
142
  const mTableBodyCellProps = mergeMProps(() => {
123
143
  return {
124
144
  h: 48
125
145
  };
126
146
  }, mantineTableBodyCellProps);
147
+ const mTableBodyRowProps = mergeMProps(() => {
148
+ return {
149
+ sx: {
150
+ "&:where([data-with-row-border]):not(:last-of-type)": {
151
+ td: {
152
+ borderBottom: enableRowVirtualization ? "none !important" : void 0
153
+ }
154
+ }
155
+ }
156
+ };
157
+ }, mantineTableBodyRowProps);
127
158
  const mBottomToolbarProps = mergeMProps(
128
159
  {
129
160
  sx: (theme2) => ({
@@ -135,6 +166,12 @@ function mergeProTableProps(props) {
135
166
  },
136
167
  mantineBottomToolbarProps
137
168
  );
169
+ const mLoadingOverlayProps = mergeMProps(
170
+ () => ({
171
+ visible: false
172
+ }),
173
+ mantineLoadingOverlayProps
174
+ );
138
175
  const mTabelSkeletonProps = mergeMProps(
139
176
  {
140
177
  sx: (theme2) => ({
@@ -153,10 +190,16 @@ function mergeProTableProps(props) {
153
190
  );
154
191
  const mTableFooterRowProps = mergeMProps(
155
192
  {
156
- sx: { borderBottom: "none" }
193
+ sx: { borderBottom: "none", outline: enableStickyFooter ? "none" : void 0 }
157
194
  },
158
195
  mantineTableFooterRowProps
159
196
  );
197
+ const mTableFooterProps = mergeMProps(
198
+ {
199
+ sx: { outline: enableStickyFooter ? "none" : void 0 }
200
+ },
201
+ mantineTableFooterProps
202
+ );
160
203
  return {
161
204
  enableColumnActions: false,
162
205
  enableColumnFilters: false,
@@ -166,19 +209,25 @@ function mergeProTableProps(props) {
166
209
  enableBottomToolbar: false,
167
210
  enableExpanding,
168
211
  enableStickyHeader,
212
+ enableStickyFooter,
213
+ enableRowVirtualization,
169
214
  mantinePaperProps: mPaperProps,
170
215
  mantineTableProps: mTableProps,
216
+ mantineTableHeadCellProps: mTableHeaderCellProps,
171
217
  mantineSkeletonProps: mTabelSkeletonProps,
218
+ mantineLoadingOverlayProps: mLoadingOverlayProps,
172
219
  mantineTableBodyProps: mTableBodyProps,
173
220
  mantineBottomToolbarProps: mBottomToolbarProps,
221
+ mantineTableBodyRowProps: mTableBodyRowProps,
174
222
  mantineTableBodyCellProps: mTableBodyCellProps,
175
223
  mantineTableFooterCellProps: mTableFooterCellProps,
176
224
  mantineTableFooterRowProps: mTableFooterRowProps,
225
+ mantineTableFooterProps: mTableFooterProps,
177
226
  data,
178
227
  icons: {
179
- IconArrowsSort: () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconSwitchVertical02, { size: 14 }),
180
- IconSortAscending: () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowUp, { size: 14 }),
181
- IconSortDescending: () => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowDown, { size: 14 })
228
+ IconArrowsSort: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconSwitchVertical02, { size: 14, ...props2 }),
229
+ IconSortAscending: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowUp, { size: 14, ...props2 }),
230
+ IconSortDescending: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconArrowDown, { size: 14, ...props2 })
182
231
  },
183
232
  localization: {
184
233
  noRecordsToDisplay: errorMessage ? errorMessage : emptyMessage ? emptyMessage : void 0,
package/dist/biz/Table/ProTable/helpers.js CHANGED
@@ -30,14 +30,20 @@ function mergeProTableProps(props) {
30
30
  mantinePaperProps = {},
31
31
  mantineSkeletonProps = {},
32
32
  mantineTableBodyProps,
33
+ mantineTableHeadCellProps = {},
33
34
  mantineTableBodyCellProps = {},
35
+ mantineTableBodyRowProps = {},
34
36
  mantineBottomToolbarProps = {},
35
37
  mantineTableFooterCellProps = {},
36
38
  mantineTableFooterRowProps = {},
39
+ mantineTableFooterProps = {},
40
+ mantineLoadingOverlayProps = {},
37
41
  withBorder = true,
38
42
  loading = false,
39
43
  enableExpanding = false,
44
+ enableRowVirtualization = false,
40
45
  enableStickyHeader,
46
+ enableStickyFooter,
41
47
  emptyMessage,
42
48
  errorMessage,
43
49
  data,
@@ -117,11 +123,36 @@ function mergeProTableProps(props) {
117
123
  }
118
124
  return {};
119
125
  }, mantineTableBodyProps);
126
+ const mTableHeaderCellProps = mergeMProps(() => {
127
+ return {
128
+ sx: {
129
+ ".mrt-table-head-sort-button": {
130
+ height: "auto",
131
+ width: "auto",
132
+ backgroundColor: "transparent",
133
+ borderColor: "transparent",
134
+ minWidth: 20,
135
+ minHeight: 20
136
+ }
137
+ }
138
+ };
139
+ }, mantineTableHeadCellProps);
120
140
  const mTableBodyCellProps = mergeMProps(() => {
121
141
  return {
122
142
  h: 48
123
143
  };
124
144
  }, mantineTableBodyCellProps);
145
+ const mTableBodyRowProps = mergeMProps(() => {
146
+ return {
147
+ sx: {
148
+ "&:where([data-with-row-border]):not(:last-of-type)": {
149
+ td: {
150
+ borderBottom: enableRowVirtualization ? "none !important" : void 0
151
+ }
152
+ }
153
+ }
154
+ };
155
+ }, mantineTableBodyRowProps);
125
156
  const mBottomToolbarProps = mergeMProps(
126
157
  {
127
158
  sx: (theme2) => ({
@@ -133,6 +164,12 @@ function mergeProTableProps(props) {
133
164
  },
134
165
  mantineBottomToolbarProps
135
166
  );
167
+ const mLoadingOverlayProps = mergeMProps(
168
+ () => ({
169
+ visible: false
170
+ }),
171
+ mantineLoadingOverlayProps
172
+ );
136
173
  const mTabelSkeletonProps = mergeMProps(
137
174
  {
138
175
  sx: (theme2) => ({
@@ -151,10 +188,16 @@ function mergeProTableProps(props) {
151
188
  );
152
189
  const mTableFooterRowProps = mergeMProps(
153
190
  {
154
- sx: { borderBottom: "none" }
191
+ sx: { borderBottom: "none", outline: enableStickyFooter ? "none" : void 0 }
155
192
  },
156
193
  mantineTableFooterRowProps
157
194
  );
195
+ const mTableFooterProps = mergeMProps(
196
+ {
197
+ sx: { outline: enableStickyFooter ? "none" : void 0 }
198
+ },
199
+ mantineTableFooterProps
200
+ );
158
201
  return {
159
202
  enableColumnActions: false,
160
203
  enableColumnFilters: false,
@@ -164,19 +207,25 @@ function mergeProTableProps(props) {
164
207
  enableBottomToolbar: false,
165
208
  enableExpanding,
166
209
  enableStickyHeader,
210
+ enableStickyFooter,
211
+ enableRowVirtualization,
167
212
  mantinePaperProps: mPaperProps,
168
213
  mantineTableProps: mTableProps,
214
+ mantineTableHeadCellProps: mTableHeaderCellProps,
169
215
  mantineSkeletonProps: mTabelSkeletonProps,
216
+ mantineLoadingOverlayProps: mLoadingOverlayProps,
170
217
  mantineTableBodyProps: mTableBodyProps,
171
218
  mantineBottomToolbarProps: mBottomToolbarProps,
219
+ mantineTableBodyRowProps: mTableBodyRowProps,
172
220
  mantineTableBodyCellProps: mTableBodyCellProps,
173
221
  mantineTableFooterCellProps: mTableFooterCellProps,
174
222
  mantineTableFooterRowProps: mTableFooterRowProps,
223
+ mantineTableFooterProps: mTableFooterProps,
175
224
  data,
176
225
  icons: {
177
- IconArrowsSort: () => /* @__PURE__ */ jsxRuntimeExports.jsx(IconSwitchVertical02, { size: 14 }),
178
- IconSortAscending: () => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { size: 14 }),
179
- IconSortDescending: () => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowDown, { size: 14 })
226
+ IconArrowsSort: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconSwitchVertical02, { size: 14, ...props2 }),
227
+ IconSortAscending: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { size: 14, ...props2 }),
228
+ IconSortDescending: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowDown, { size: 14, ...props2 })
180
229
  },
181
230
  localization: {
182
231
  noRecordsToDisplay: errorMessage ? errorMessage : emptyMessage ? emptyMessage : void 0,
package/dist/primitive/TextInput/TextInput.cjs CHANGED
@@ -20,11 +20,16 @@ const TextInput = React.forwardRef((props, ref) => {
20
20
  }
21
21
  return {
22
22
  wrapper: {
23
- display: "flex"
23
+ display: "flex",
24
+ // see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Input/Input.module.css#L70C4-L70C33I
25
+ // correct input left padding
26
+ "&[data-with-left-section]": {
27
+ "--input-padding-inline-start": "var(--input-padding)"
28
+ }
24
29
  },
25
30
  section: {
26
31
  '&[data-position="left"]': {
27
- position: "relative",
32
+ position: "initial",
28
33
  width: "fit-content",
29
34
  border: `1px solid ${theme.colors.carbon[4]}`,
30
35
  borderRightWidth: 0,
package/dist/primitive/TextInput/TextInput.js CHANGED
@@ -18,11 +18,16 @@ const TextInput = forwardRef((props, ref) => {
18
18
  }
19
19
  return {
20
20
  wrapper: {
21
- display: "flex"
21
+ display: "flex",
22
+ // see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Input/Input.module.css#L70C4-L70C33I
23
+ // correct input left padding
24
+ "&[data-with-left-section]": {
25
+ "--input-padding-inline-start": "var(--input-padding)"
26
+ }
22
27
  },
23
28
  section: {
24
29
  '&[data-position="left"]': {
25
- position: "relative",
30
+ position: "initial",
26
31
  width: "fit-content",
27
32
  border: `1px solid ${theme.colors.carbon[4]}`,
28
33
  borderRightWidth: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.72",
3
+ "version": "2.0.0-beta.74",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",