@tidbcloud/uikit 2.0.0-beta.115 → 2.0.0-beta.116

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/DateTimePicker/index.cjs +6 -31
  3. package/dist/biz/DateTimePicker/index.mjs +6 -31
  4. package/dist/theme/theme.cjs +6 -8
  5. package/dist/theme/theme.mjs +6 -8
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tidbcloud/uikit
2
2
 
3
+ ## 2.0.0-beta.116
4
+
5
+ ### Patch Changes
6
+
7
+ - feat(DateTimePicker): enhance user interaction and styling ([#413](https://github.com/tidbcloud/tidbcloud-uikit/pull/413))
8
+
3
9
  ## 2.0.0-beta.115
4
10
 
5
11
  ### Patch Changes
package/dist/biz/DateTimePicker/index.cjs CHANGED
@@ -92,7 +92,7 @@ const DateTimePicker = ({
92
92
  next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
93
93
  updateCurrentValue(next, "timeScroller");
94
94
  });
95
- return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
95
+ return /* @__PURE__ */ jsxRuntime.jsxs(Popover.Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", children: [
96
96
  /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
97
97
  TextInput.TextInput,
98
98
  {
@@ -101,9 +101,10 @@ const DateTimePicker = ({
101
101
  placeholder,
102
102
  value: inputStr,
103
103
  rightSection: loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader.Loader, { size: "xs" }) : /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { component: index.IconClock, size: 18, c: "carbon.6" }),
104
- onClick: open,
105
104
  sx,
106
- size
105
+ size,
106
+ onFocus: open,
107
+ onBlur: close
107
108
  }
108
109
  ) }),
109
110
  /* @__PURE__ */ jsxRuntime.jsx(Popover.Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { children: [
@@ -115,34 +116,8 @@ const DateTimePicker = ({
115
116
  maxDate: endDate,
116
117
  value: currentValue.toDate(),
117
118
  onChange: calendarChange,
118
- size: "sm",
119
- styles: () => ({
120
- calendarHeaderLevel: {
121
- height: 32
122
- },
123
- calendarHeaderControl: {
124
- height: 32,
125
- width: 32
126
- },
127
- weekdaysRow: {
128
- display: "flex",
129
- gap: 8
130
- },
131
- weekday: {
132
- height: 32,
133
- width: 32,
134
- lineHeight: "32px"
135
- },
136
- monthRow: {
137
- display: "flex",
138
- gap: 8
139
- },
140
- day: {
141
- height: 32,
142
- width: 32,
143
- lineHeight: "32px"
144
- }
145
- })
119
+ withCellSpacing: false,
120
+ size: "md"
146
121
  }
147
122
  ),
148
123
  /* @__PURE__ */ jsxRuntime.jsx(Divider.Divider, { orientation: "vertical", mt: -12, mb: -16 }),
package/dist/biz/DateTimePicker/index.mjs CHANGED
@@ -90,7 +90,7 @@ const DateTimePicker = ({
90
90
  next = next.utcOffset(utcOffset).hour(h).minute(m).second(s);
91
91
  updateCurrentValue(next, "timeScroller");
92
92
  });
93
- return /* @__PURE__ */ jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", onClose: close, children: [
93
+ return /* @__PURE__ */ jsxs(Popover, { position: "bottom-end", opened, withinPortal, shadow: "md", children: [
94
94
  /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
95
95
  TextInput,
96
96
  {
@@ -99,9 +99,10 @@ const DateTimePicker = ({
99
99
  placeholder,
100
100
  value: inputStr,
101
101
  rightSection: loading ? /* @__PURE__ */ jsx(Loader, { size: "xs" }) : /* @__PURE__ */ jsx(Box, { component: IconClock, size: 18, c: "carbon.6" }),
102
- onClick: open,
103
102
  sx,
104
- size
103
+ size,
104
+ onFocus: open,
105
+ onBlur: close
105
106
  }
106
107
  ) }),
107
108
  /* @__PURE__ */ jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxs(Stack, { children: [
@@ -113,34 +114,8 @@ const DateTimePicker = ({
113
114
  maxDate: endDate,
114
115
  value: currentValue.toDate(),
115
116
  onChange: calendarChange,
116
- size: "sm",
117
- styles: () => ({
118
- calendarHeaderLevel: {
119
- height: 32
120
- },
121
- calendarHeaderControl: {
122
- height: 32,
123
- width: 32
124
- },
125
- weekdaysRow: {
126
- display: "flex",
127
- gap: 8
128
- },
129
- weekday: {
130
- height: 32,
131
- width: 32,
132
- lineHeight: "32px"
133
- },
134
- monthRow: {
135
- display: "flex",
136
- gap: 8
137
- },
138
- day: {
139
- height: 32,
140
- width: 32,
141
- lineHeight: "32px"
142
- }
143
- })
117
+ withCellSpacing: false,
118
+ size: "md"
144
119
  }
145
120
  ),
146
121
  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", mt: -12, mb: -16 }),
package/dist/theme/theme.cjs CHANGED
@@ -1090,22 +1090,20 @@ const theme = createTheme.createTheme({
1090
1090
  const color = theme2.primaryColor;
1091
1091
  return {
1092
1092
  calendarHeaderLevel: {
1093
- color: themeColor(theme2, color, 7)
1093
+ color: themeColor(theme2, color, 8)
1094
1094
  },
1095
1095
  calendarHeaderControl: {
1096
- color: `${themeColor(theme2, color, 7)} !important`
1096
+ color: themeColor(theme2, color, 8)
1097
1097
  },
1098
1098
  weekday: {
1099
- color: themeColor(theme2, color, 7)
1099
+ color: themeColor(theme2, color, 8)
1100
1100
  },
1101
1101
  calendarHeader: {
1102
1102
  maxWidth: "100%"
1103
1103
  },
1104
- monthCell: {
1105
- "--mantine-scale": 8
1106
- },
1107
1104
  day: {
1108
1105
  "--day-size-sm": "32px",
1106
+ "--day-size-md": "40px",
1109
1107
  color: themeColor(theme2, color, 8),
1110
1108
  "&[data-in-range]": {
1111
1109
  backgroundColor: themeColor(theme2, color, 3),
@@ -1127,11 +1125,11 @@ const theme = createTheme.createTheme({
1127
1125
  color: theme2.white
1128
1126
  },
1129
1127
  "&[data-disabled], &:disabled": {
1130
- color: `${themeColor(theme2, color, 5)} !important`
1128
+ color: themeColor(theme2, color, 6)
1131
1129
  }
1132
1130
  },
1133
1131
  "&[data-disabled], &:disabled": {
1134
- color: `${themeColor(theme2, color, 5)} !important`
1132
+ color: themeColor(theme2, color, 6)
1135
1133
  },
1136
1134
  "&[data-outside]": {
1137
1135
  color: themeColor(theme2, color, 6)
package/dist/theme/theme.mjs CHANGED
@@ -1088,22 +1088,20 @@ const theme = createTheme({
1088
1088
  const color = theme2.primaryColor;
1089
1089
  return {
1090
1090
  calendarHeaderLevel: {
1091
- color: themeColor(theme2, color, 7)
1091
+ color: themeColor(theme2, color, 8)
1092
1092
  },
1093
1093
  calendarHeaderControl: {
1094
- color: `${themeColor(theme2, color, 7)} !important`
1094
+ color: themeColor(theme2, color, 8)
1095
1095
  },
1096
1096
  weekday: {
1097
- color: themeColor(theme2, color, 7)
1097
+ color: themeColor(theme2, color, 8)
1098
1098
  },
1099
1099
  calendarHeader: {
1100
1100
  maxWidth: "100%"
1101
1101
  },
1102
- monthCell: {
1103
- "--mantine-scale": 8
1104
- },
1105
1102
  day: {
1106
1103
  "--day-size-sm": "32px",
1104
+ "--day-size-md": "40px",
1107
1105
  color: themeColor(theme2, color, 8),
1108
1106
  "&[data-in-range]": {
1109
1107
  backgroundColor: themeColor(theme2, color, 3),
@@ -1125,11 +1123,11 @@ const theme = createTheme({
1125
1123
  color: theme2.white
1126
1124
  },
1127
1125
  "&[data-disabled], &:disabled": {
1128
- color: `${themeColor(theme2, color, 5)} !important`
1126
+ color: themeColor(theme2, color, 6)
1129
1127
  }
1130
1128
  },
1131
1129
  "&[data-disabled], &:disabled": {
1132
- color: `${themeColor(theme2, color, 5)} !important`
1130
+ color: themeColor(theme2, color, 6)
1133
1131
  },
1134
1132
  "&[data-outside]": {
1135
1133
  color: themeColor(theme2, color, 6)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tidbcloud/uikit",
3
- "version": "2.0.0-beta.115",
3
+ "version": "2.0.0-beta.116",
4
4
  "description": "tidbcloud uikit",
5
5
  "type": "module",
6
6
  "main": "dist/primitive/index.cjs",