# @tidbcloud/uikit
## 2.7.7
### Patch Changes
- fix(uikit): simplify hover styles in theme ([#641](https://github.com/tidbcloud/tidbcloud-uikit/pull/641))
## 2.7.6
### Patch Changes
- refactor(uikit): simplify TablePagination styles and move them to theme ([#639](https://github.com/tidbcloud/tidbcloud-uikit/pull/639))
## 2.7.5
### Patch Changes
- Feat/dproject fill icon ([#637](https://github.com/tidbcloud/tidbcloud-uikit/pull/637))
## 2.7.4
### Patch Changes
- fix(uikit): update DProject icon ([#635](https://github.com/tidbcloud/tidbcloud-uikit/pull/635))
## 2.7.3
### Patch Changes
- feat(uikit): update DProject icon dimensions and SVG structure ([#633](https://github.com/tidbcloud/tidbcloud-uikit/pull/633))
## 2.7.2
### Patch Changes
- feat(uikit): add project icons ([#631](https://github.com/tidbcloud/tidbcloud-uikit/pull/631))
- ci: use single publish workflow for trusted publisher ([#630](https://github.com/tidbcloud/tidbcloud-uikit/pull/630))
- feat(uikit): add project icons ([#631](https://github.com/tidbcloud/tidbcloud-uikit/pull/631))
- ci: use single publish workflow for trusted publisher ([#630](https://github.com/tidbcloud/tidbcloud-uikit/pull/630))
## 2.7.1
### Patch Changes
- Feat/expand line icon ([#627](https://github.com/tidbcloud/tidbcloud-uikit/pull/627))
## 2.7.0
### Minor Changes
- feat(docs): migrate documentation from StoryBook to inline docs with llms.txt support ([#619](https://github.com/tidbcloud/tidbcloud-uikit/pull/619))
## 2.6.1
### Patch Changes
- refactor(uikit/biz): replace HoverCard with Tooltip in CodeBlock ([#615](https://github.com/tidbcloud/tidbcloud-uikit/pull/615))
- fix: update footer content and improve page titles in documentation ([#613](https://github.com/tidbcloud/tidbcloud-uikit/pull/613))
## 2.6.0
### Minor Changes
- feat: update mantine from 7.15.2 to 7.17.8 ([#609](https://github.com/tidbcloud/tidbcloud-uikit/pull/609))
- fix: enhance CI workflow to include PR branch and commit SHA outputs ([#611](https://github.com/tidbcloud/tidbcloud-uikit/pull/611))
## 2.5.8
### Patch Changes
- fix: refactor PropertyCard to use context for props management ([#606](https://github.com/tidbcloud/tidbcloud-uikit/pull/606))
## 2.5.7
### Patch Changes
- feat: enhance FormSegmentedControl to support external onChange handler ([#603](https://github.com/tidbcloud/tidbcloud-uikit/pull/603))
## 2.5.6
### Patch Changes
- fix: ensure correct handling of utcOffset in relative time ranges in … ([#601](https://github.com/tidbcloud/tidbcloud-uikit/pull/601))
## 2.5.5
### Patch Changes
- Tweak/timerange picker ([#598](https://github.com/tidbcloud/tidbcloud-uikit/pull/598))
- fix: correct organization time calculation in DateTimePicker demo ([#597](https://github.com/tidbcloud/tidbcloud-uikit/pull/597))
## 2.5.4
### Patch Changes
- feat: add transparent variant to Button component ([#595](https://github.com/tidbcloud/tidbcloud-uikit/pull/595))
## 2.5.3
### Patch Changes
- feat: add footer prop to TimeRangePicker for customizable content ([#592](https://github.com/tidbcloud/tidbcloud-uikit/pull/592))
## 2.5.2
### Patch Changes
- feat: update CollapsibleCard for improved state management ([#588](https://github.com/tidbcloud/tidbcloud-uikit/pull/588))
## 2.5.1
### Patch Changes
- fix: enhance CollapsibleCard with customizable header and content props ([#586](https://github.com/tidbcloud/tidbcloud-uikit/pull/586))
## 2.5.0
### Minor Changes
- feat: add CollapsibleCard component with stories ([#584](https://github.com/tidbcloud/tidbcloud-uikit/pull/584))
## 2.4.19
### Patch Changes
- fix(colors): correct mustard color value in theme colors ([#582](https://github.com/tidbcloud/tidbcloud-uikit/pull/582))
## 2.4.18
### Patch Changes
- Refine DateTimePicker input sizes and styles for better UX ([#580](https://github.com/tidbcloud/tidbcloud-uikit/pull/580))
## 2.4.17
### Patch Changes
- feat(uikit): add withCopyButton field for CodeBlock ([#578](https://github.com/tidbcloud/tidbcloud-uikit/pull/578))
## 2.4.16
### Patch Changes
- feat(DateTimePicker): implement useDateTimePicker ([#577](https://github.com/tidbcloud/tidbcloud-uikit/pull/577))
- refine(AppShell): add data attribute support to NavItemBase component ([#575](https://github.com/tidbcloud/tidbcloud-uikit/pull/575))
- feat(DateTimePicker): add footer prop for custom content in DateTimePicker component ([#574](https://github.com/tidbcloud/tidbcloud-uikit/pull/574))
- feat(DateTimePicker): implement useDateTimePicker ([#577](https://github.com/tidbcloud/tidbcloud-uikit/pull/577))
- refine(AppShell): add data attribute support to NavItemBase component ([#575](https://github.com/tidbcloud/tidbcloud-uikit/pull/575))
- feat(DateTimePicker): add footer prop for custom content in DateTimePicker component ([#574](https://github.com/tidbcloud/tidbcloud-uikit/pull/574))
## 2.4.15
### Patch Changes
- Fix/promultiselect UI issule ([#572](https://github.com/tidbcloud/tidbcloud-uikit/pull/572))
## 2.4.14
### Patch Changes
- feat(TagsInput): add size support and styles to theme configuration ([#570](https://github.com/tidbcloud/tidbcloud-uikit/pull/570))
## 2.4.13
### Patch Changes
- refactor(AppShell): enhance `NavItemBase` props and refine `SubNavItemBase` type ([#568](https://github.com/tidbcloud/tidbcloud-uikit/pull/568))
## 2.4.12
### Patch Changes
- fix(TimeRangePicker): adjust padding and width for input components in AbsoluteTimeRangePicker ([#565](https://github.com/tidbcloud/tidbcloud-uikit/pull/565))
## 2.4.11
### Patch Changes
- fix(theme): move Pill styles to separate section in theme configuration ([#563](https://github.com/tidbcloud/tidbcloud-uikit/pull/563))
## 2.4.10
### Patch Changes
- feat(ProMultiSelect): support `sx` and `size` props ([#561](https://github.com/tidbcloud/tidbcloud-uikit/pull/561))
## 2.4.9
### Patch Changes
- refactor(DateTimePicker): remove utcOffset prop and simplify timezone handling ([#559](https://github.com/tidbcloud/tidbcloud-uikit/pull/559))
## 2.4.8
### Patch Changes
- refactor(AppShell): simplify SubNavItemBase spacing with consistent top margin ([#557](https://github.com/tidbcloud/tidbcloud-uikit/pull/557))
## 2.4.7
### Patch Changes
- feat(AppShell): add headerLeftSection prop and make aboveMenu optional ([#555](https://github.com/tidbcloud/tidbcloud-uikit/pull/555))
## 2.4.6
### Patch Changes
- fix(uikit): add custom styles for Code component in theme ([#553](https://github.com/tidbcloud/tidbcloud-uikit/pull/553))
## 2.4.5
### Patch Changes
- fix(biz): enhance DateTimePicker with formatter prop and update storybook demo ([#551](https://github.com/tidbcloud/tidbcloud-uikit/pull/551))
## 2.4.4
### Patch Changes
- fix(uikit): enhance Tabs component with variant themes support and update storybook controls ([#549](https://github.com/tidbcloud/tidbcloud-uikit/pull/549))
## 2.4.3
### Patch Changes
- fix(biz): update onChange handler in FormSwitch to pass event instead of value ([#547](https://github.com/tidbcloud/tidbcloud-uikit/pull/547))
## 2.4.2
### Patch Changes
- fix(uikit): clean up icon usage and remove unnecessary strokeWidth in CodeBlock and ProMultiSelect ([#546](https://github.com/tidbcloud/tidbcloud-uikit/pull/546))
- fix(biz): add horizontal scroll support to AppPageShell ([#544](https://github.com/tidbcloud/tidbcloud-uikit/pull/544))
- fix(uikit): clean up icon usage and remove unnecessary strokeWidth in CodeBlock and ProMultiSelect ([#546](https://github.com/tidbcloud/tidbcloud-uikit/pull/546))
- fix(biz): add horizontal scroll support to AppPageShell ([#544](https://github.com/tidbcloud/tidbcloud-uikit/pull/544))
## 2.4.1
### Patch Changes
- refactor(biz/app-shell): extract back button props for cleaner prop handling ([#542](https://github.com/tidbcloud/tidbcloud-uikit/pull/542))
## 2.4.0
### Minor Changes
- feat(biz): add new AppShell and PageShell ([#540](https://github.com/tidbcloud/tidbcloud-uikit/pull/540))
## 2.3.3
### Patch Changes
- fix(theme): update Accordion styles in theme configuration ([#538](https://github.com/tidbcloud/tidbcloud-uikit/pull/538))
## 2.3.2
### Patch Changes
- feat(uikit/icon): full revamp with better visual effect and enhanced utility ([#500](https://github.com/tidbcloud/tidbcloud-uikit/pull/500))
- fix(ci): trim whitespace from PR comment before processing ([#536](https://github.com/tidbcloud/tidbcloud-uikit/pull/536))
## 2.3.1
### Patch Changes
- fix(TimePicker): change value types to string and update format handling ([#529](https://github.com/tidbcloud/tidbcloud-uikit/pull/529))
## 2.3.0
### Minor Changes
- feat(TimePicker): add TimePicker componnet ([#527](https://github.com/tidbcloud/tidbcloud-uikit/pull/527))
- feat(theme): add default props for HoverCard/Popover ([#526](https://github.com/tidbcloud/tidbcloud-uikit/pull/526))
- chore: update snapshot release workflow to push all tags ([#524](https://github.com/tidbcloud/tidbcloud-uikit/pull/524))
- docs: enhance snapshot release section with GitHub Actions workflow details ([#523](https://github.com/tidbcloud/tidbcloud-uikit/pull/523))
- chore: add npm setup step for publishing snapshots ([#522](https://github.com/tidbcloud/tidbcloud-uikit/pull/522))
## 2.2.11
### Patch Changes
- fix(theme): update Card and Paper components' shadow and border styles ([#520](https://github.com/tidbcloud/tidbcloud-uikit/pull/520))
## 2.2.10
### Patch Changes
- chore: trigger re-run ci
- fix(ProTable): update pagination icon ([#517](https://github.com/tidbcloud/tidbcloud-uikit/pull/517))
- feat: add manual snapshot release workflow ([#516](https://github.com/tidbcloud/tidbcloud-uikit/pull/516))
- docs: update README with Quick Start section and usage example ([#514](https://github.com/tidbcloud/tidbcloud-uikit/pull/514))
## 2.2.9
### Patch Changes
- tweak(TimeRangePicker): support custom time range & i18n ([#489](https://github.com/tidbcloud/tidbcloud-uikit/pull/489))
- fix(Prism): colorScheme ([#512](https://github.com/tidbcloud/tidbcloud-uikit/pull/512))
## 2.2.8
### Patch Changes
- fix(Radio): fix disabled color for label in theme ([#510](https://github.com/tidbcloud/tidbcloud-uikit/pull/510))
## 2.2.7
### Patch Changes
- feat(NumberInput): add leftAddon & rightAddon ([#508](https://github.com/tidbcloud/tidbcloud-uikit/pull/508))
- docs: add snapshot release instructions for testing ([#507](https://github.com/tidbcloud/tidbcloud-uikit/pull/507))
## 2.2.6
### Patch Changes
- fix(FormRadioGroup): set max width for tooltip dropdown ([#505](https://github.com/tidbcloud/tidbcloud-uikit/pull/505))
## 2.2.5
### Patch Changes
- fix(ProTable): wrapperProps missing ([#503](https://github.com/tidbcloud/tidbcloud-uikit/pull/503))
## 2.2.4
### Patch Changes
- fix(theme): Remove unnecessary borderColor from disabled state button styling ([#501](https://github.com/tidbcloud/tidbcloud-uikit/pull/501))
## 2.2.3
### Patch Changes
- fix(theme): Enhance Radio and Radio.Indicator styling ([#497](https://github.com/tidbcloud/tidbcloud-uikit/pull/497))
## 2.2.2
### Patch Changes
- feat: allow select all for ProMultiSelect component ([#495](https://github.com/tidbcloud/tidbcloud-uikit/pull/495))
## 2.2.1
### Patch Changes
- Feat/search area i18n support ([#493](https://github.com/tidbcloud/tidbcloud-uikit/pull/493))
## 2.2.0
### Minor Changes
- feat: add new multi select component ([#488](https://github.com/tidbcloud/tidbcloud-uikit/pull/488))
## 2.1.8
### Patch Changes
- fix(uikit/theme): Simplify Menu component styling ([#490](https://github.com/tidbcloud/tidbcloud-uikit/pull/490))
## 2.1.7
### Patch Changes
- fix(uikit): Improve `CopyButton` and `useClipboard` compatibility ([#485](https://github.com/tidbcloud/tidbcloud-uikit/pull/485))
## 2.1.6
### Patch Changes
- fix(uikit): update dayjs import and export strategy ([#482](https://github.com/tidbcloud/tidbcloud-uikit/pull/482))
- chore(deps): upgrade Storybook and Vite to latest versions ([#481](https://github.com/tidbcloud/tidbcloud-uikit/pull/481))
## 2.1.5
### Patch Changes
- fix(DateTimePicker): improve popover and input interaction ([#479](https://github.com/tidbcloud/tidbcloud-uikit/pull/479))
## 2.1.4
### Patch Changes
- fix(uikit/theme): adjust Menu component hover and active background colors ([#477](https://github.com/tidbcloud/tidbcloud-uikit/pull/477))
- chore(uikit): move react-hook-form to peer dependencies ([#476](https://github.com/tidbcloud/tidbcloud-uikit/pull/476))
## 2.1.3
### Patch Changes
- fix(Select): fix value prop handling ([#473](https://github.com/tidbcloud/tidbcloud-uikit/pull/473))
## 2.1.2
### Patch Changes
- fix(uikit/theme): fix separator styles with data attributes ([#471](https://github.com/tidbcloud/tidbcloud-uikit/pull/471))
## 2.1.1
### Patch Changes
- fix(ProTable): enable highlightOnHover ([#468](https://github.com/tidbcloud/tidbcloud-uikit/pull/468))
## 2.1.0
### Minor Changes
- feat: add AnimatedNumber component ([#465](https://github.com/tidbcloud/tidbcloud-uikit/pull/465))
## 2.0.11
### Patch Changes
- fix(FormTimeRangePickerProps): types ([#463](https://github.com/tidbcloud/tidbcloud-uikit/pull/463))
- tweak(TimeRangePicker): compatible types ([#462](https://github.com/tidbcloud/tidbcloud-uikit/pull/462))
## 2.0.10
### Patch Changes
- Feat/remove clear btn icon ([#460](https://github.com/tidbcloud/tidbcloud-uikit/pull/460))
## 2.0.9
### Patch Changes
- refine(time_range_picker): update default order of timerange ([#458](https://github.com/tidbcloud/tidbcloud-uikit/pull/458))
## 2.0.8
### Patch Changes
- fix(uikit): adjust Select component null value handling ([#456](https://github.com/tidbcloud/tidbcloud-uikit/pull/456))
## 2.0.7
### Patch Changes
- fix(uikit): pass null value for Select when value is empty string ([#454](https://github.com/tidbcloud/tidbcloud-uikit/pull/454))
## 2.0.6
### Patch Changes
- Fix/search area bug fix ([#452](https://github.com/tidbcloud/tidbcloud-uikit/pull/452))
## 2.0.5
### Patch Changes
- fix(uikit): enforce input placeholder color with !important ([#449](https://github.com/tidbcloud/tidbcloud-uikit/pull/449))
## 2.0.4
### Patch Changes
- feat(uikit): fix SearchArea components bugs
- Feat/search area fix ([#448](https://github.com/tidbcloud/tidbcloud-uikit/pull/448))
- chore: add type checking for UIKit in CI/CD pipeline ([#447](https://github.com/tidbcloud/tidbcloud-uikit/pull/447))
- feat(story): add RadioCard story demonstrating card-style radio selection ([#446](https://github.com/tidbcloud/tidbcloud-uikit/pull/446))
## 2.0.3
### Patch Changes
- fix(SearchArea): allow undefined values in search area type ([#444](https://github.com/tidbcloud/tidbcloud-uikit/pull/444))
## 2.0.2
### Patch Changes
- tweak(TimeRangePicker): support empty value & clearable ([#442](https://github.com/tidbcloud/tidbcloud-uikit/pull/442))
## 2.0.1
### Patch Changes
- feat(uikit): bug fix of SearchArea component
- feat: fix input reset bug ([#440](https://github.com/tidbcloud/tidbcloud-uikit/pull/440))
## 2.0.0
### Major Changes
#### Upgrade to Mantine v7
##### Theme Provider
Use `ThemeProvider` from `@tidbcloud/uikit/theme`, this provider includes both emotion provider, mantine provider, notification provider and modals provider. You should set the color scheme prop via `useColorScheme`
```tsx
import { ThemeProvider, useColorScheme } from '@tidbcloud/uikit'
function App({ children }) {
const { colorScheme } = useColorScheme('auto')
return {children}
}
```
##### Color Scheme
`theme.colorScheme` was removed.
Use `useColorScheme` from `@tidbcloud/uikit/hooks` to get your color scheme or set the color scheme. (this is for declaring what color scheme you want to use in the top level, it will read from local storage when initializing)
Use `useComputedColorScheme` if you just want to know that color scheme is using now inside component tree.
```tsx
import { Button } from '@tidbcloud/uikit'
import { useColorScheme, useComputedColorScheme } from '@tidbcloud/uikit'
function ComponentA() {
const { setColorScheme } = useColorScheme()
return (
<>
)
}
function ComponentB() {
const colorScheme = useComputedColorScheme()
return colorScheme === 'dark' ? :
}
```
##### createStyles/styles signature change
```tsx
// theme: MantineTheme
// _params: component props, this is void when using createStyles
// u: helper functions
const C = {}} />
const useStyles = createStyles((theme, _params, u) => {})
// the u arg internal is like below:
const u = {
light: '[data-mantine-color-scheme="light"] &',
dark: '[data-mantine-color-scheme="dark"] &',
rtl: '[dir="rtl"] &',
ltr: '[dir="ltr"] &',
notRtl: '[dir="ltr"] &',
notLtr: '[dir="rtl"] &',
ref: getStylesRef,
smallerThan: (breakpoint: MantineBreakpoint | number) =>
`@media (max-width: ${em(getBreakpointValue(theme, breakpoint) - 0.1)})`,
largerThan: (breakpoint: MantineBreakpoint | number) =>
`@media (min-width: ${em(getBreakpointValue(theme, breakpoint))})`
}
```
Since `theme.colorScheme` was removed, if you need to access colorScheme in createStyles, you can use the 3rd arg:
```tsx
import { createStyles } from '@tidbcloud/uikit/utils'
export const useStyles = createStyles((theme, _params, u) => {
return {
root: {
[u.dark]: {
backgroundColor: theme.colors.dark[6]
},
[u.light]: {
backgroundColor: theme.white
}
}
}
})
```
##### Access to Theme object
```tsx
import { useMantineTheme } from '@tidbcloud/uikit'
function Component() {
const theme = useMantineTheme()
theme.colors.carbon[5]
}
```
##### `theme.fn` is removed
Some utils can be imported from `@tidbcloud/uikit/utils`
```tsx
import { rgba, rem, getPrimaryShade } from '@tidbcloud/uikit/utils`
```
##### CodeBlock
`prismProps` to `codeHighlightProps`: https://mantine.dev/x/code-highlight/?t=prop
##### Common props renams
```
spacing -> gap
position -> justify
icon -> leftSection/rightSection
width -> w
overlayBlur -> overlayProps
```
##### Left/right section
`icon => leftSection`
`rightIcon => rightSection`
```tsx
```
##### Group/Stack
- `position` => `justify` – it now supports all justify-content values
- `noWrap` prop was replaced with `wrap="nowrap"`, wrap prop now supports all flex-wrap values
- `spacing` prop was replaced with `gap`
```
// Tabs
onTabChange -> onChange
TabProps -> TabsTabProps
tabsList -> list
// Button
leftIcon/rightIcon -> leftSection/rightSection
compact -> size="compact-XXX"
// Group
position -> justify
noWrap -> wrap="nowrap"
spacing -> gap
```
ProTable
- `Pagination` changed
- `initialPage` -> `defaultValue`
- `page` -> `value`
- `ProTableProps` -> `ProTableOptions`
- `enablePinning` -> `enableColumnPinning`
```tsx
// Recommended
// Method1
export const List = () => {
const data = [
{ position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
{ position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
{ position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
{ position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
{ position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }
]
const columns = [
{
header: 'Position',
accessorKey: 'position'
},
{
header: 'Name',
accessorKey: 'name'
},
{
header: 'Symbol',
accessorKey: 'symbol'
},
{
header: 'Mass',
accessorKey: 'mass'
}
]
const table = useProTable({ data, columns })
return
}
// Method2
export const List2 = () => {
const data = [
{ position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
{ position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
{ position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
{ position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
{ position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' }
]
const columns = [
{
header: 'Position',
accessorKey: 'position'
},
{
header: 'Name',
accessorKey: 'name'
},
{
header: 'Symbol',
accessorKey: 'symbol'
},
{
header: 'Mass',
accessorKey: 'mass'
}
]
// const table = useProTable({ data, columns})
return
}
```
##### Elements type
Since `PolymorphicComponentProps` was not exported from the uikit. Sometimes, you may need to extend component props such as ButtonProps, but there is no element interface, you can extends ElementProps and omit the color property.
```tsx
import { ButtonProps, ElementProps } from '@tidbcloud/uikit'
interface A extends ButtonProps {}
; {}} /> // ❌ Error, can't find onClick
interface B extends ButtonProps, ElementProps<'button', 'color'> {}
; {}} /> // ✅
```
##### Components
###### `Typography`
- component no longer supports `underline`, `color`, `strikethrough`, `italic`, `transform`, `align` and `weight` prop – use style props instead. Eg: `align` -> `ta`
- Legacy variants were removed.
- title -> headline-sm
- body2 -> body-lg
###### `Tooltip`
- `width` -> `w`, see https://mantine.dev/core/tooltip/#multiline
###### `Container`
- `Container` component no longer supports `sizes` prop, use CSS variables to customize sizes on theme instead
- If you want sizes, you can try
```tsx
```
###### `Button`
https://mantine.dev/changelog/7-0-0/#button-changes
- `compact` prop was removed, use `size="compact-XXX"` instead
- `leftIcon` and `rightIcon` props were renamed to `leftSection` and `rightSection`
- `uppercase` prop was removed, use `tt` style prop instead
- `loaderPosition` prop was removed, Loader is now always rendered in the center to prevent layout shifts
- Styles API selectors were changed. See Button Styles API documentation for more details
###### `Select`
- `nothingFound` was renamed to `nothingFoundMessage`.
- Options filtering props signature changed, filter function receives all options and search query and should return a new options array. It has 1 input argument with 3 fields:
- options – array of options or options groups, all options are in { value: string; label: string; disabled?: boolean } format
- search – current search query
- limit – value of limit prop passed to Select
- `itemComponent` renamed to `renderOption` for custom select option rendering. The signature is also changed to:
```
(item: { option: { label: string; value: string }; checked: boolean }) => ReactNode
```
Note that your option can have extra fields other than label and value, you can just annotate them like this for example:
```tsx
const options = [
{label: 'label', value: 'value', description: '...', avatar: '...', disabled: false, ...}
]
type SelectOption = typeof options[number]