@tidbcloud/uikit 2.0.0-beta.85 → 2.0.0-beta.87

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tidbcloud/uikit
 
+## 2.0.0-beta.87
+
+### Patch Changes
+
+- add right label to textinput
+
+## 2.0.0-beta.86
+
+### Patch Changes
+
+- fix protable layout mode style
+
 ## 2.0.0-beta.85
 
 ### Patch Changes

package/dist/biz/Form/SegmentControl.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.cjs");
+const reactHookForm = require("react-hook-form");
+;/* empty css                                                                                                                                                                                        */
+;/* empty css                                                                                                                                                                                         */
+;/* empty css                                                                                                                                                                                                  */
+;/* empty css                                                                                                                                                                                                 */
+;/* empty css                                                                                                                                                                                            */
+;/* empty css                                                                                                                                                                                            */
+const SegmentedControl = 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/SegmentedControl/SegmentedControl.cjs");
+const FormSegmentedControl = ({ name, rules, ...restProps }) => {
+  const { control } = reactHookForm.useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    reactHookForm.Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field: { onChange, value } }) => {
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(SegmentedControl.SegmentedControl, { value, onChange, ...restProps });
+      }
+    }
+  );
+};
+exports.FormSegmentedControl = FormSegmentedControl;

package/dist/biz/Form/SegmentControl.d.cts

@@ -0,0 +1,7 @@
+import { RegisterOptions } from 'react-hook-form';
+import { SegmentedControlProps } from '../../primitive/index.js';
+export interface FormSegmentedControlProps extends SegmentedControlProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+export declare const FormSegmentedControl: ({ name, rules, ...restProps }: FormSegmentedControlProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/Form/SegmentControl.d.ts

@@ -0,0 +1,7 @@
+import { RegisterOptions } from 'react-hook-form';
+import { SegmentedControlProps } from '../../primitive/index.js';
+export interface FormSegmentedControlProps extends SegmentedControlProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+export declare const FormSegmentedControl: ({ name, rules, ...restProps }: FormSegmentedControlProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/biz/Form/SegmentControl.js

@@ -0,0 +1,26 @@
+import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { useFormContext, Controller } from "react-hook-form";
+/* empty css                                                                                                                                                                                      */
+/* empty css                                                                                                                                                                                       */
+/* empty css                                                                                                                                                                                                */
+/* empty css                                                                                                                                                                                               */
+/* empty css                                                                                                                                                                                          */
+/* empty css                                                                                                                                                                                          */
+import { SegmentedControl } 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/SegmentedControl/SegmentedControl.js";
+const FormSegmentedControl = ({ name, rules, ...restProps }) => {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Controller,
+    {
+      name,
+      control,
+      rules,
+      render: ({ field: { onChange, value } }) => {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(SegmentedControl, { value, onChange, ...restProps });
+      }
+    }
+  );
+};
+export {
+  FormSegmentedControl
+};

package/dist/biz/Form/index.d.cts

@@ -15,3 +15,4 @@ export * from './TextArea.js';
 export * from './Rating.js';
 export * from './context.js';
 export * from './CopyText.js';
+export * from './SegmentControl.js';

package/dist/biz/Form/index.d.ts

@@ -15,3 +15,4 @@ export * from './TextArea.js';
 export * from './Rating.js';
 export * from './context.js';
 export * from './CopyText.js';
+export * from './SegmentControl.js';

package/dist/biz/Table/ProTable/helpers.cjs

@@ -30,6 +30,7 @@ function mergeProTableProps(props) {
   const {
     mantineTableProps = {},
     mantinePaperProps = {},
+    mantineTableContainerProps = {},
     mantineSkeletonProps = {},
     mantineTableBodyProps,
     mantineTableHeadCellProps = {},
@@ -40,6 +41,7 @@ function mergeProTableProps(props) {
     mantineTableFooterRowProps = {},
     mantineTableFooterProps = {},
     mantineLoadingOverlayProps = {},
+    layoutMode,
     withBorder = true,
     loading = false,
     enableExpanding = false,
@@ -115,6 +117,14 @@ function mergeProTableProps(props) {
     },
     mantineTableProps
   );
+  const mTableContainerProps = mergeMProps(
+    {
+      sx: {
+        backgroundColor: "transparent"
+      }
+    },
+    mantineTableContainerProps
+  );
   const mTableBodyProps = mergeMProps((args) => {
     var _a, _b, _c;
     if (!(data == null ? void 0 : data.length)) {
@@ -152,11 +162,19 @@ function mergeProTableProps(props) {
       sx: {
         "&:where([data-with-row-border]):not(:last-of-type)": {
           td: {
-            borderBottom: enableRowVirtualization ? "none !important" : void 0
+            borderBottom: enableRowVirtualization || layoutMode && layoutMode !== "semantic" ? "none !important" : void 0
+          }
+        },
+        "&[data-hover]": {
+          "&:hover": {
+            "--mrt-row-hover-background-color": theme.colors.carbon[3]
           }
         },
         "&:not([data-striped], [data-striped='false'])": {
           backgroundColor: theme.colors.carbon[0]
+        },
+        "&:not([data-selected], [data-row-pinned]) td[data-column-pinned]::before": {
+          backgroundColor: "transparent"
         }
       }
     };
@@ -202,7 +220,7 @@ function mergeProTableProps(props) {
   );
   const mTableFooterProps = mergeMProps(
     {
-      sx: { outline: enableStickyFooter ? "none" : void 0 }
+      sx: { outline: enableStickyFooter ? "none !important" : void 0 }
     },
     mantineTableFooterProps
   );
@@ -223,12 +241,14 @@ function mergeProTableProps(props) {
     mantineSkeletonProps: mTabelSkeletonProps,
     mantineLoadingOverlayProps: mLoadingOverlayProps,
     mantineTableBodyProps: mTableBodyProps,
+    mantineTableContainerProps: mTableContainerProps,
     mantineBottomToolbarProps: mBottomToolbarProps,
     mantineTableBodyRowProps: mTableBodyRowProps,
     mantineTableBodyCellProps: mTableBodyCellProps,
     mantineTableFooterCellProps: mTableFooterCellProps,
     mantineTableFooterRowProps: mTableFooterRowProps,
     mantineTableFooterProps: mTableFooterProps,
+    layoutMode,
     data,
     icons: {
       IconArrowsSort: (props2) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.IconSwitchVertical02, { size: 14, ...props2 }),

package/dist/biz/Table/ProTable/helpers.js

@@ -28,6 +28,7 @@ function mergeProTableProps(props) {
   const {
     mantineTableProps = {},
     mantinePaperProps = {},
+    mantineTableContainerProps = {},
     mantineSkeletonProps = {},
     mantineTableBodyProps,
     mantineTableHeadCellProps = {},
@@ -38,6 +39,7 @@ function mergeProTableProps(props) {
     mantineTableFooterRowProps = {},
     mantineTableFooterProps = {},
     mantineLoadingOverlayProps = {},
+    layoutMode,
     withBorder = true,
     loading = false,
     enableExpanding = false,
@@ -113,6 +115,14 @@ function mergeProTableProps(props) {
     },
     mantineTableProps
   );
+  const mTableContainerProps = mergeMProps(
+    {
+      sx: {
+        backgroundColor: "transparent"
+      }
+    },
+    mantineTableContainerProps
+  );
   const mTableBodyProps = mergeMProps((args) => {
     var _a, _b, _c;
     if (!(data == null ? void 0 : data.length)) {
@@ -150,11 +160,19 @@ function mergeProTableProps(props) {
       sx: {
         "&:where([data-with-row-border]):not(:last-of-type)": {
           td: {
-            borderBottom: enableRowVirtualization ? "none !important" : void 0
+            borderBottom: enableRowVirtualization || layoutMode && layoutMode !== "semantic" ? "none !important" : void 0
+          }
+        },
+        "&[data-hover]": {
+          "&:hover": {
+            "--mrt-row-hover-background-color": theme.colors.carbon[3]
           }
         },
         "&:not([data-striped], [data-striped='false'])": {
           backgroundColor: theme.colors.carbon[0]
+        },
+        "&:not([data-selected], [data-row-pinned]) td[data-column-pinned]::before": {
+          backgroundColor: "transparent"
         }
       }
     };
@@ -200,7 +218,7 @@ function mergeProTableProps(props) {
   );
   const mTableFooterProps = mergeMProps(
     {
-      sx: { outline: enableStickyFooter ? "none" : void 0 }
+      sx: { outline: enableStickyFooter ? "none !important" : void 0 }
     },
     mantineTableFooterProps
   );
@@ -221,12 +239,14 @@ function mergeProTableProps(props) {
     mantineSkeletonProps: mTabelSkeletonProps,
     mantineLoadingOverlayProps: mLoadingOverlayProps,
     mantineTableBodyProps: mTableBodyProps,
+    mantineTableContainerProps: mTableContainerProps,
     mantineBottomToolbarProps: mBottomToolbarProps,
     mantineTableBodyRowProps: mTableBodyRowProps,
     mantineTableBodyCellProps: mTableBodyCellProps,
     mantineTableFooterCellProps: mTableFooterCellProps,
     mantineTableFooterRowProps: mTableFooterRowProps,
     mantineTableFooterProps: mTableFooterProps,
+    layoutMode,
     data,
     icons: {
       IconArrowsSort: (props2) => /* @__PURE__ */ jsxRuntimeExports.jsx(IconSwitchVertical02, { size: 14, ...props2 }),

package/dist/biz/index.cjs

@@ -34,6 +34,7 @@ const TextArea = require("./Form/TextArea.cjs");
 const Rating = require("./Form/Rating.cjs");
 const context = require("./Form/context.cjs");
 const CopyText = require("./Form/CopyText.cjs");
+const SegmentControl = require("./Form/SegmentControl.cjs");
 const helpers$1 = require("./TimeRangePicker/helpers.cjs");
 exports.Dot = index.Dot;
 exports.CodeBlock = index$1.CodeBlock;
@@ -178,6 +179,7 @@ exports.HookFormContext = context.HookFormContext;
 exports.HookFormProvider = context.HookFormProvider;
 exports.useHookFormContext = context.useHookFormContext;
 exports.FormCopyText = CopyText.FormCopyText;
+exports.FormSegmentedControl = SegmentControl.FormSegmentedControl;
 exports.DEFAULT_QUICK_RANGES = helpers$1.DEFAULT_QUICK_RANGES;
 exports.DEFAULT_TIME_FORMAT = helpers$1.DEFAULT_TIME_FORMAT;
 exports.DEFAULT_TIME_FORMAT_WITH_TIMEZONE = helpers$1.DEFAULT_TIME_FORMAT_WITH_TIMEZONE;

package/dist/biz/index.js

@@ -32,6 +32,7 @@ import { FormTextareaInput } from "./Form/TextArea.js";
 import { FormRatingInput } from "./Form/Rating.js";
 import { HookFormContext, HookFormProvider, useHookFormContext } from "./Form/context.js";
 import { FormCopyText } from "./Form/CopyText.js";
+import { FormSegmentedControl } from "./Form/SegmentControl.js";
 import { DEFAULT_QUICK_RANGES, DEFAULT_TIME_FORMAT, DEFAULT_TIME_FORMAT_WITH_TIMEZONE, DEFAULT_TIME_RANGE, addOffsetUTC, formatDuration, fromTimeRangeValue, getUTCString, timeFormatter, toTimeRangeValue, toURLTimeRange, urlToTimeRange, urlToTimeRangeValue } from "./TimeRangePicker/helpers.js";
 export {
   CodeBlock,
@@ -57,6 +58,7 @@ export {
   FormPhoneInputV2,
   FormRadioGroup,
   FormRatingInput,
+  FormSegmentedControl,
   FormSelect,
   FormSwitch,
   FormTextInput,

package/dist/primitive/TextInput/TextInput.cjs

@@ -8,51 +8,71 @@ const index = require("../Typography/index.cjs");
 const TextInput$1 = 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/TextInput/TextInput.cjs");
 const getSize = 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/utils/get-size/get-size.cjs");
 const TextInput = React.forwardRef((props, ref) => {
-  const { leftLabel, leftSection, ...rest } = props;
+  const { leftLabel, leftLabelProps, leftSection, rightLabel, rightLabelProps, rightSection, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
     TextInput$1.TextInput,
     {
       ...rest,
       styles: styles.mergeStylesList([
         (theme) => {
-          if (!props.leftLabel) {
+          const withLeftLabel = !!props.leftLabel;
+          const withRightLabel = !!props.rightLabel;
+          if (!withLeftLabel && !withRightLabel) {
             return {};
           }
+          const sectionBaseStyles = {
+            position: "initial",
+            width: "fit-content",
+            border: `1px solid ${theme.colors.carbon[4]}`,
+            backgroundColor: theme.colors.carbon[2],
+            paddingLeft: 12,
+            paddingRight: 12,
+            "& > .mantine-Text-root": {
+              fontSize: getSize.getFontSize(props.size ?? "md")
+            }
+          };
+          const wrapperBaseStyles = {
+            "--input-padding-inline-start": "var(--input-padding)"
+          };
           return {
             wrapper: {
               display: "flex",
               // see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Input/Input.module.css#L70C4-L70C33I
               // correct input left padding
-              "&[data-with-left-section]": {
-                "--input-padding-inline-start": "var(--input-padding)"
-              }
+              "&[data-with-left-section]": withLeftLabel ? wrapperBaseStyles : void 0,
+              "&[data-with-right-section]": withRightLabel ? wrapperBaseStyles : void 0
             },
             section: {
-              '&[data-position="left"]': {
-                position: "initial",
-                width: "fit-content",
-                border: `1px solid ${theme.colors.carbon[4]}`,
+              '&[data-position="left"]': withLeftLabel ? {
+                ...sectionBaseStyles,
                 borderRightWidth: 0,
-                paddingLeft: 12,
-                paddingRight: 12,
                 borderTopLeftRadius: theme.defaultRadius,
-                borderBottomLeftRadius: theme.defaultRadius,
-                backgroundColor: theme.colors.carbon[2],
-                "& > .mantine-Text-root": {
-                  fontSize: getSize.getFontSize(props.size ?? "md")
-                }
-              }
+                borderBottomLeftRadius: theme.defaultRadius
+              } : void 0,
+              '&[data-position="right"]': withRightLabel ? {
+                ...sectionBaseStyles,
+                borderLeftWidth: 0,
+                borderTopRightRadius: theme.defaultRadius,
+                borderBottomRightRadius: theme.defaultRadius
+              } : void 0
             },
             input: {
               flex: 1,
-              borderTopLeftRadius: 0,
-              borderBottomLeftRadius: 0
+              ...withLeftLabel ? {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0
+              } : void 0,
+              ...withRightLabel ? {
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0
+              } : void 0
             }
           };
         },
         props.styles
       ]),
-      leftSection: !!leftLabel ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-lg", children: leftLabel }) : leftSection,
+      leftSection: !!leftLabel ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-lg", ...leftLabelProps, children: leftLabel }) : leftSection,
+      rightSection: !!rightLabel ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(index.Typography, { variant: "label-lg", ...rightLabelProps, children: rightLabel }) : rightLabel,
       ref
     }
   );

package/dist/primitive/TextInput/TextInput.d.cts

@@ -1,5 +1,9 @@
 import { TextInputProps as MantineTextInputProps } from '@mantine/core';
+import { TypographyProps } from '../Typography/index.js';
 export interface TextInputProps extends MantineTextInputProps {
-    leftLabel?: string;
+    leftLabel?: React.ReactNode;
+    leftLabelProps?: TypographyProps;
+    rightLabel?: React.ReactNode;
+    rightLabelProps?: TypographyProps;
 }
 export declare const TextInput: import('react').ForwardRefExoticComponent<TextInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/primitive/TextInput/TextInput.d.ts

@@ -1,5 +1,9 @@
 import { TextInputProps as MantineTextInputProps } from '@mantine/core';
+import { TypographyProps } from '../Typography/index.js';
 export interface TextInputProps extends MantineTextInputProps {
-    leftLabel?: string;
+    leftLabel?: React.ReactNode;
+    leftLabelProps?: TypographyProps;
+    rightLabel?: React.ReactNode;
+    rightLabelProps?: TypographyProps;
 }
 export declare const TextInput: import('react').ForwardRefExoticComponent<TextInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/primitive/TextInput/TextInput.js

@@ -6,51 +6,71 @@ import { Typography } from "../Typography/index.js";
 import { TextInput as TextInput$1 } 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/TextInput/TextInput.js";
 import { getFontSize } 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/utils/get-size/get-size.js";
 const TextInput = forwardRef((props, ref) => {
-  const { leftLabel, leftSection, ...rest } = props;
+  const { leftLabel, leftLabelProps, leftSection, rightLabel, rightLabelProps, rightSection, ...rest } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TextInput$1,
     {
       ...rest,
       styles: mergeStylesList([
         (theme) => {
-          if (!props.leftLabel) {
+          const withLeftLabel = !!props.leftLabel;
+          const withRightLabel = !!props.rightLabel;
+          if (!withLeftLabel && !withRightLabel) {
             return {};
           }
+          const sectionBaseStyles = {
+            position: "initial",
+            width: "fit-content",
+            border: `1px solid ${theme.colors.carbon[4]}`,
+            backgroundColor: theme.colors.carbon[2],
+            paddingLeft: 12,
+            paddingRight: 12,
+            "& > .mantine-Text-root": {
+              fontSize: getFontSize(props.size ?? "md")
+            }
+          };
+          const wrapperBaseStyles = {
+            "--input-padding-inline-start": "var(--input-padding)"
+          };
           return {
             wrapper: {
               display: "flex",
               // see https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Input/Input.module.css#L70C4-L70C33I
               // correct input left padding
-              "&[data-with-left-section]": {
-                "--input-padding-inline-start": "var(--input-padding)"
-              }
+              "&[data-with-left-section]": withLeftLabel ? wrapperBaseStyles : void 0,
+              "&[data-with-right-section]": withRightLabel ? wrapperBaseStyles : void 0
             },
             section: {
-              '&[data-position="left"]': {
-                position: "initial",
-                width: "fit-content",
-                border: `1px solid ${theme.colors.carbon[4]}`,
+              '&[data-position="left"]': withLeftLabel ? {
+                ...sectionBaseStyles,
                 borderRightWidth: 0,
-                paddingLeft: 12,
-                paddingRight: 12,
                 borderTopLeftRadius: theme.defaultRadius,
-                borderBottomLeftRadius: theme.defaultRadius,
-                backgroundColor: theme.colors.carbon[2],
-                "& > .mantine-Text-root": {
-                  fontSize: getFontSize(props.size ?? "md")
-                }
-              }
+                borderBottomLeftRadius: theme.defaultRadius
+              } : void 0,
+              '&[data-position="right"]': withRightLabel ? {
+                ...sectionBaseStyles,
+                borderLeftWidth: 0,
+                borderTopRightRadius: theme.defaultRadius,
+                borderBottomRightRadius: theme.defaultRadius
+              } : void 0
             },
             input: {
               flex: 1,
-              borderTopLeftRadius: 0,
-              borderBottomLeftRadius: 0
+              ...withLeftLabel ? {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0
+              } : void 0,
+              ...withRightLabel ? {
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0
+              } : void 0
             }
           };
         },
         props.styles
       ]),
-      leftSection: !!leftLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-lg", children: leftLabel }) : leftSection,
+      leftSection: !!leftLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-lg", ...leftLabelProps, children: leftLabel }) : leftSection,
+      rightSection: !!rightLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "label-lg", ...rightLabelProps, children: rightLabel }) : rightLabel,
       ref
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tidbcloud/uikit",
-  "version": "2.0.0-beta.85",
+  "version": "2.0.0-beta.87",
   "description": "tidbcloud uikit",
   "type": "module",
   "main": "dist/primitive/index.cjs",