@tidbcloud/uikit 2.5.7 → 2.5.8

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 (6) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/biz/PropertyCard/index.cjs +21 -22
  3. package/dist/biz/PropertyCard/index.d.cts +1 -1
  4. package/dist/biz/PropertyCard/index.d.mts +1 -1
  5. package/dist/biz/PropertyCard/index.mjs +22 -23
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.5.8
4
+
5
+ ### Patch Changes
6
+
7
+ - fix: refactor PropertyCard to use context for props management ([#606](https://github.com/tidbcloud/tidbcloud-uikit/pull/606))
8
+
3
9
  ## 2.5.7
4
10
 
5
11
  ### Patch Changes
package/dist/biz/PropertyCard/index.cjs CHANGED
@@ -12,34 +12,33 @@ const Card = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
12
12
  const Stack = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Stack/Stack.cjs");
13
13
  const Group = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.cjs");
14
14
  const Divider$1 = require("../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.cjs");
15
+ const PropertyCardContext = React.createContext(void 0);
15
16
  const PropertyCard = ({ title, children, labelProps, valueProps, ...rest }) => {
16
- const renderChildren = () => {
17
- return React.Children.map(children, (child) => {
18
- if (!child || typeof child !== "object" || !("props" in child)) {
19
- return child;
20
- }
21
- return React.cloneElement(child, {
22
- ...child.props,
23
- labelProps: {
24
- ...labelProps,
25
- ...child.props.labelProps
26
- },
27
- valueProps: {
28
- ...valueProps,
29
- ...child.props.valueProps
30
- }
31
- });
32
- });
33
- };
17
+ const contextValue = React.useMemo(
18
+ () => ({
19
+ labelProps,
20
+ valueProps
21
+ }),
22
+ [labelProps, valueProps]
23
+ );
34
24
  return /* @__PURE__ */ jsxRuntime.jsxs(Card.Card, { p: "xl", ...rest, children: [
35
- /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "headline-sm", mb: 16, children: title }),
36
- /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: 16, children: renderChildren() })
25
+ title && /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "headline-sm", mb: 16, children: title }),
26
+ /* @__PURE__ */ jsxRuntime.jsx(PropertyCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { gap: 16, children }) })
37
27
  ] });
38
28
  };
39
29
  const Item = ({ label, children, labelProps, valueProps, ...rest }) => {
30
+ const context = React.useContext(PropertyCardContext);
31
+ const mergedLabelProps = {
32
+ ...context == null ? void 0 : context.labelProps,
33
+ ...labelProps
34
+ };
35
+ const mergedValueProps = {
36
+ ...context == null ? void 0 : context.valueProps,
37
+ ...valueProps
38
+ };
40
39
  return /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { gap: "md", wrap: "nowrap", ...rest, children: [
41
- /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "label-lg", miw: 128, ...labelProps, children: label }),
42
- /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...valueProps, children })
40
+ /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "label-lg", miw: 128, ...mergedLabelProps, children: label }),
41
+ /* @__PURE__ */ jsxRuntime.jsx(index.Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...mergedValueProps, children })
43
42
  ] });
44
43
  };
45
44
  const Divider = (props) => {
package/dist/biz/PropertyCard/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { CardProps, DividerProps, GroupProps, TypographyProps } from '../../primitive/index.cjs';
2
2
  export interface PropertyCardProps extends CardProps {
3
- title: string;
3
+ title?: string;
4
4
  labelProps?: TypographyProps;
5
5
  valueProps?: TypographyProps;
6
6
  }
package/dist/biz/PropertyCard/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { CardProps, DividerProps, GroupProps, TypographyProps } from '../../primitive/index.mjs';
2
2
  export interface PropertyCardProps extends CardProps {
3
- title: string;
3
+ title?: string;
4
4
  labelProps?: TypographyProps;
5
5
  valueProps?: TypographyProps;
6
6
  }
package/dist/biz/PropertyCard/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
- import { Children, cloneElement } from "react";
2
+ import { createContext, useMemo, useContext } from "react";
3
3
  /* empty css */
4
4
  /* empty css */
5
5
  /* empty css */
@@ -10,34 +10,33 @@ import { Card } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_j
10
10
  import { Stack } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Stack/Stack.mjs";
11
11
  import { Group } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Group/Group.mjs";
12
12
  import { Divider as Divider$1 } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
13
+ const PropertyCardContext = createContext(void 0);
13
14
  const PropertyCard = ({ title, children, labelProps, valueProps, ...rest }) => {
14
- const renderChildren = () => {
15
- return Children.map(children, (child) => {
16
- if (!child || typeof child !== "object" || !("props" in child)) {
17
- return child;
18
- }
19
- return cloneElement(child, {
20
- ...child.props,
21
- labelProps: {
22
- ...labelProps,
23
- ...child.props.labelProps
24
- },
25
- valueProps: {
26
- ...valueProps,
27
- ...child.props.valueProps
28
- }
29
- });
30
- });
31
- };
15
+ const contextValue = useMemo(
16
+ () => ({
17
+ labelProps,
18
+ valueProps
19
+ }),
20
+ [labelProps, valueProps]
21
+ );
32
22
  return /* @__PURE__ */ jsxs(Card, { p: "xl", ...rest, children: [
33
- /* @__PURE__ */ jsx(Typography, { variant: "headline-sm", mb: 16, children: title }),
34
- /* @__PURE__ */ jsx(Stack, { gap: 16, children: renderChildren() })
23
+ title && /* @__PURE__ */ jsx(Typography, { variant: "headline-sm", mb: 16, children: title }),
24
+ /* @__PURE__ */ jsx(PropertyCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Stack, { gap: 16, children }) })
35
25
  ] });
36
26
  };
37
27
  const Item = ({ label, children, labelProps, valueProps, ...rest }) => {
28
+ const context = useContext(PropertyCardContext);
29
+ const mergedLabelProps = {
30
+ ...context == null ? void 0 : context.labelProps,
31
+ ...labelProps
32
+ };
33
+ const mergedValueProps = {
34
+ ...context == null ? void 0 : context.valueProps,
35
+ ...valueProps
36
+ };
38
37
  return /* @__PURE__ */ jsxs(Group, { gap: "md", wrap: "nowrap", ...rest, children: [
39
- /* @__PURE__ */ jsx(Typography, { variant: "label-lg", miw: 128, ...labelProps, children: label }),
40
- /* @__PURE__ */ jsx(Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...valueProps, children })
38
+ /* @__PURE__ */ jsx(Typography, { variant: "label-lg", miw: 128, ...mergedLabelProps, children: label }),
39
+ /* @__PURE__ */ jsx(Typography, { variant: "body-lg", sx: { wordBreak: "break-all" }, ...mergedValueProps, children })
41
40
  ] });
42
41
  };
43
42
  const Divider = (props) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.5.7",
3
+ "version": "2.5.8",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",