@tidbcloud/uikit 2.0.0-beta.92 → 2.0.0-beta.93

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/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.93
4
+
5
+ ### Patch Changes
6
+
7
+ - feat(theme): enhance disabled state handling for buttons ( ([#350](https://github.com/tidbcloud/tidbcloud-uikit/pull/350)))
8
+ - feat(changelog): enhance changelog generation with pull request links ( ([#349](https://github.com/tidbcloud/tidbcloud-uikit/pull/349)))
9
+ - chore: update package configuration and add custom changelog generation scripts ( ([#348](https://github.com/tidbcloud/tidbcloud-uikit/pull/348)))
10
+ - refactor(PageShell): enhance Box component usage with clsx and mergeS… ( ([#347](https://github.com/tidbcloud/tidbcloud-uikit/pull/347)))
11
+
3
12
  ## 2.0.0-beta.92
4
13
 
5
14
  ### Patch Changes
@@ -9,23 +9,27 @@ const index$1 = require("../../icons/index.cjs");
9
9
  ;/* empty css */
10
10
  ;/* empty css */
11
11
  const index = require("../../primitive/Typography/index.cjs");
12
- require("clsx");
12
+ const clsx = require("clsx");
13
13
  const styles = require("../../utils/styles.cjs");
14
- const Group = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.cjs");
15
14
  const Box = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.cjs");
15
+ const Group = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.cjs");
16
16
  const ActionIcon = require("../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.cjs");
17
17
  const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps }) => {
18
18
  const rightExisted = !!rightSection;
19
19
  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
20
20
  Group.Group,
21
21
  {
22
+ ...restProps,
23
+ className: clsx.clsx(restProps == null ? void 0 : restProps.className, "pageshell-header"),
22
24
  wrap: "nowrap",
23
25
  justify: "space-between",
24
26
  gap: "xl",
25
- h: 56,
26
- px: 24,
27
- ...restProps,
28
27
  sx: styles.mergeSxList([
28
+ {
29
+ paddingLeft: 24,
30
+ paddingRight: 24,
31
+ marginBottom: 12
32
+ },
29
33
  sticky ? (theme) => ({
30
34
  position: "sticky",
31
35
  zIndex: 1,
@@ -89,12 +93,27 @@ const PageShell = ({
89
93
  children: title
90
94
  }
91
95
  ),
92
- /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className: bodyClassName, px: 24, pb: 16, pt: headerVisible ? 0 : 16, ...bodyProps, children })
96
+ /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
97
+ Box.Box,
98
+ {
99
+ ...bodyProps,
100
+ className: clsx.clsx(bodyClassName, bodyProps == null ? void 0 : bodyProps.className, "pageshell-body"),
101
+ sx: styles.mergeSxList([
102
+ {
103
+ paddingLeft: 24,
104
+ paddingRight: 24,
105
+ paddingBottom: 16,
106
+ paddingTop: headerVisible ? 0 : 16
107
+ },
108
+ bodyProps == null ? void 0 : bodyProps.sx
109
+ ]),
110
+ children
111
+ }
112
+ )
93
113
  ] });
94
114
  if (wrapped) {
95
- return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { className, ...wrapperProps, children: page });
115
+ return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Box.Box, { ...wrapperProps, className: clsx.clsx(className, wrapperProps == null ? void 0 : wrapperProps.className, "pageshell-wrapper"), children: page });
96
116
  }
97
117
  return page;
98
118
  };
99
- exports.PageHeader = PageHeader;
100
119
  exports.PageShell = PageShell;
@@ -9,7 +9,6 @@ export interface PageHeaderProps extends GroupProps {
9
9
  leftSection?: React.ReactNode;
10
10
  rightSection?: React.ReactNode;
11
11
  }
12
- export declare const PageHeader: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
13
12
  /**
14
13
  * From https://github.com/tidbcloud/dbaas-ui/blob/427559c99458ccd2e8b0d6c77ed44baa603d5ef7/src/dbaas/layouts/v4/page/PageShell.tsx#L7
15
14
  */
@@ -9,7 +9,6 @@ export interface PageHeaderProps extends GroupProps {
9
9
  leftSection?: React.ReactNode;
10
10
  rightSection?: React.ReactNode;
11
11
  }
12
- export declare const PageHeader: ({ sticky, leftSection, rightSection, children, ...restProps }: PageHeaderProps) => import("react/jsx-runtime.js").JSX.Element;
13
12
  /**
14
13
  * From https://github.com/tidbcloud/dbaas-ui/blob/427559c99458ccd2e8b0d6c77ed44baa603d5ef7/src/dbaas/layouts/v4/page/PageShell.tsx#L7
15
14
  */
@@ -7,23 +7,27 @@ import { IconChevronLeft } from "../../icons/index.js";
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  import { Typography } from "../../primitive/Typography/index.js";
10
- import "clsx";
10
+ import { clsx } from "clsx";
11
11
  import { mergeSxList } from "../../utils/styles.js";
12
- import { Group } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.js";
13
12
  import { Box } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/core/Box/Box.js";
13
+ import { Group } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/Group/Group.js";
14
14
  import { ActionIcon } from "../../node_modules/.pnpm/@mantine_core@7.13.2_patch_hash_v5k5cxye7xaihpcgowhgciky7a_@mantine_hooks@7.13.2_react@18.3.1_hlfamvk7n3o6ychyvm5cyru4yu/node_modules/@mantine/core/esm/components/ActionIcon/ActionIcon.js";
15
15
  const PageHeader = ({ sticky, leftSection, rightSection, children, ...restProps }) => {
16
16
  const rightExisted = !!rightSection;
17
17
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
18
18
  Group,
19
19
  {
20
+ ...restProps,
21
+ className: clsx(restProps == null ? void 0 : restProps.className, "pageshell-header"),
20
22
  wrap: "nowrap",
21
23
  justify: "space-between",
22
24
  gap: "xl",
23
- h: 56,
24
- px: 24,
25
- ...restProps,
26
25
  sx: mergeSxList([
26
+ {
27
+ paddingLeft: 24,
28
+ paddingRight: 24,
29
+ marginBottom: 12
30
+ },
27
31
  sticky ? (theme) => ({
28
32
  position: "sticky",
29
33
  zIndex: 1,
@@ -87,14 +91,29 @@ const PageShell = ({
87
91
  children: title
88
92
  }
89
93
  ),
90
- /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className: bodyClassName, px: 24, pb: 16, pt: headerVisible ? 0 : 16, ...bodyProps, children })
94
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
95
+ Box,
96
+ {
97
+ ...bodyProps,
98
+ className: clsx(bodyClassName, bodyProps == null ? void 0 : bodyProps.className, "pageshell-body"),
99
+ sx: mergeSxList([
100
+ {
101
+ paddingLeft: 24,
102
+ paddingRight: 24,
103
+ paddingBottom: 16,
104
+ paddingTop: headerVisible ? 0 : 16
105
+ },
106
+ bodyProps == null ? void 0 : bodyProps.sx
107
+ ]),
108
+ children
109
+ }
110
+ )
91
111
  ] });
92
112
  if (wrapped) {
93
- return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { className, ...wrapperProps, children: page });
113
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { ...wrapperProps, className: clsx(className, wrapperProps == null ? void 0 : wrapperProps.className, "pageshell-wrapper"), children: page });
94
114
  }
95
115
  return page;
96
116
  };
97
117
  export {
98
- PageHeader,
99
118
  PageShell
100
119
  };
@@ -46,7 +46,6 @@ exports.LabelTooltip = index$5.LabelTooltip;
46
46
  exports.Tree = index$7.Tree;
47
47
  exports.TransferTree = index$8.TransferTree;
48
48
  exports.PropertyCard = index$9.PropertyCard;
49
- exports.PageHeader = index$a.PageHeader;
50
49
  exports.PageShell = index$a.PageShell;
51
50
  exports.TimeRangePicker = index$b.TimeRangePicker;
52
51
  exports.DateTimePicker = index$c.DateTimePicker;
package/dist/biz/index.js CHANGED
@@ -7,7 +7,7 @@ import { LabelTooltip } from "./LabelTooltip/index.js";
7
7
  import { Tree } from "./Tree/index.js";
8
8
  import { TransferTree } from "./TransferTree/index.js";
9
9
  import { PropertyCard } from "./PropertyCard/index.js";
10
- import { PageHeader, PageShell } from "./PageShell/index.js";
10
+ import { PageShell } from "./PageShell/index.js";
11
11
  import { TimeRangePicker } from "./TimeRangePicker/index.js";
12
12
  import { DateTimePicker } from "./DateTimePicker/index.js";
13
13
  import { validPhoneNumber } from "./PhoneInput/helper.js";
@@ -129,7 +129,6 @@ export {
129
129
  Memo_MRT_TableBody,
130
130
  Memo_MRT_TableBodyCell,
131
131
  Memo_MRT_TableBodyRow,
132
- PageHeader,
133
132
  PageShell,
134
133
  PhoneInput,
135
134
  ProTable,
@@ -200,7 +200,7 @@ const theme = createTheme.createTheme({
200
200
  "&:hover": {
201
201
  backgroundColor: bgHoverColor
202
202
  },
203
- "&:disabled": {
203
+ "&:disabled, &[data-disabled]": {
204
204
  color: theme2.white,
205
205
  backgroundColor: themeColor(theme2, color, 5)
206
206
  }
@@ -222,7 +222,7 @@ const theme = createTheme.createTheme({
222
222
  borderColor: themeColor(theme2, color, borderColorShade + 1),
223
223
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
224
224
  },
225
- "&:disabled": {
225
+ "&:disabled, &[data-disabled]": {
226
226
  color: themeColor(theme2, color, 6),
227
227
  borderColor: themeColor(theme2, color, borderColorShade + 1),
228
228
  backgroundColor: themeColor(theme2, color, 2)
@@ -242,7 +242,7 @@ const theme = createTheme.createTheme({
242
242
  borderColor: themeColor(theme2, color, borderColorShade + 1),
243
243
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
244
244
  },
245
- "&:disabled": {
245
+ "&:disabled, &[data-disabled]": {
246
246
  color: themeColor(theme2, color, 6),
247
247
  borderColor: themeColor(theme2, color, borderColorShade + 1),
248
248
  backgroundColor: themeColor(theme2, color, 2)
@@ -260,7 +260,7 @@ const theme = createTheme.createTheme({
260
260
  color: themeColor(theme2, color, fontColorShade + 1),
261
261
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
262
262
  },
263
- "&:disabled": {
263
+ "&:disabled, &[data-disabled]": {
264
264
  color: themeColor(theme2, color, 6)
265
265
  }
266
266
  };
@@ -198,7 +198,7 @@ const theme = createTheme({
198
198
  "&:hover": {
199
199
  backgroundColor: bgHoverColor
200
200
  },
201
- "&:disabled": {
201
+ "&:disabled, &[data-disabled]": {
202
202
  color: theme2.white,
203
203
  backgroundColor: themeColor(theme2, color, 5)
204
204
  }
@@ -220,7 +220,7 @@ const theme = createTheme({
220
220
  borderColor: themeColor(theme2, color, borderColorShade + 1),
221
221
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
222
222
  },
223
- "&:disabled": {
223
+ "&:disabled, &[data-disabled]": {
224
224
  color: themeColor(theme2, color, 6),
225
225
  borderColor: themeColor(theme2, color, borderColorShade + 1),
226
226
  backgroundColor: themeColor(theme2, color, 2)
@@ -240,7 +240,7 @@ const theme = createTheme({
240
240
  borderColor: themeColor(theme2, color, borderColorShade + 1),
241
241
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
242
242
  },
243
- "&:disabled": {
243
+ "&:disabled, &[data-disabled]": {
244
244
  color: themeColor(theme2, color, 6),
245
245
  borderColor: themeColor(theme2, color, borderColorShade + 1),
246
246
  backgroundColor: themeColor(theme2, color, 2)
@@ -258,7 +258,7 @@ const theme = createTheme({
258
258
  color: themeColor(theme2, color, fontColorShade + 1),
259
259
  backgroundColor: themeColor(theme2, color, bgColorShade + 1)
260
260
  },
261
- "&:disabled": {
261
+ "&:disabled, &[data-disabled]": {
262
262
  color: themeColor(theme2, color, 6)
263
263
  }
264
264
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.92",
3
+ "version": "2.0.0-beta.93",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",