@rtdui/shiki-highlight insteadThe main changes of Rtdui v5 are adapted to TailwindCSS v4 and daisyUI v5
Rtdui v5 works with Tailwind CSS 4 and daisyUI v5 takes advantage of all the new features.
If your project requires TailwindCSS v3 and daisyUI v4, please use Rtdui v4 version
Tailwind CSS 4 uses CSS color-mix() to control the opacity, so daisyUI v5 now put the whole color inside CSS variables and also updated the variable names to be more readable.
daisyUI v5 now supports all color formats, but recommend using OKLCH
Rtdui follow and adapt to this change
Currently, daisyUI v5 the following effects are available:
--depth: adds a clean, subtle depth effect to the components, making them look more visually appealing
--noise: adds a slight noise effect to the components, giving them a more textured look
Rtdui follow this feature
Components like Button, Badge, Alert now have soft and dash style variants.
daisyUI v5 includes 3 new themes:
Rtdui follow this feature
Popover fix the issue of backgroundDialogsProps add confirmLabel, cancelLabel, closeLabel prop for global default localized textDialogProps add defaultPrompt prop for default prompt text for prompt modenamed capturing group of RegexprowActive in initialState of RowActive featurestring with string | number to reduce confusion while keeping row.id value type and rowActive state type consistent with itRowActiveState type[@rtdui/datatable] DataTable add RowActive feature which is implemented using standard custom feature
RowActive feature add enableRowActive prop for DataTable with a default value of true, you can set false to disable this feature
RowActive feature you can use the state or initialState props to set the state of RowActive:
Uncontrolled:
<DataTable
// ...
initialState={{
rowActive: "1",
}}
></DataTable>Controlled:
const [activedRowId, setActivedRowId] = React.useState<string | null>(null);
<DataTable
// ...
state={{
rowActive: activedRowId,
}}
onRowActiveChange={setActivedRowId}
></DataTable>;[@rtdui/datatable] DataTable add borderWidth prop which allow custom border size of cells in the table when showBorder prop is true
[@rtdui/tailwind-plugin] data-table.css using a single pseudo element to implement borders
enableClickRowSelection behavior follows enableRowSelectiontablePropsid prop to dialogId to prevent conflicts with HTML element's id propdirtyWarningLabel prop for dirty checking prompt text, can be localizeddialogId prop is automatically assigned to the content element of the dialog. the dialog's can be updated via dialogIdfilterFromLeafRows propertyautoExpandAll propertyautoExpandAll prop. Use {expanded:true} state prop insteadvalidate prop provide validation rules when DataTable can be editedchangeRow(params) API remove the validate field from the params parameteronRowClick prop type:
onRowClick?: (
e: React.MouseEvent<HTMLTableRowElement>,
row: Row<any>
) => void;
prism.css adaptation of styles to light and dark modes@rtdio/editor and @rtdio/md-editor packages.tail-arrow component style@rtdui/md-editor package for Markdown writing and rendering@rtdui/md-editor package demo and doc[@rtdui/core] update ColorPicker and ColorInput components so that they support all color notations in the CSS Color Module Level 4 specification
supported color notation: hex, rgb, hsl ,hwb, lab, lch, oklab, oklch
No changes, just updating some packages's dependencies to pass the npm audit check.
@rtdui/signature-pad and @rtdui/dates packagesSignaturePad add slots prop for custom styleSignaturePad canvas high dpi support[@rtdui/signature-pad]
@rtdui/signature-pad package[docs-site] add SignaturePad component doc and demo
[@rtdui/dates]
@rtdui/core package new Modal and Overlay components, and new CloseButton component@rtdui/dates package new TimePicker and TimePickerInput components that in iOS-style[docs-site] add Modal component doc and demo, update dates doc and demo for new TimePicker and TimePickerInput component
[@rtdui/dates]
@rtdui/dates package includes DatesProvider, YearPicker, YearPickerInput, MonthPicker, MonthPickerInput, DatePicker, DatePickerInput, DateTimePickerInput, DateInput, TimeInput components[docs-site] add dates components doc and demo
[@rtdui/core]
NativeSelect componentCard component[docs-site] add NativeSelect, Card, Divider doc and demo
[@rtdui/core]
TagsInput componentChipsupport disabled propInput support disabled style[docs-site] add TagsInput doc and demo
[@rtdui/core]
Input and InputBase component, use to create custom inputsTextInput, TextArea, NumberInput, JsonInput base on new InputBase componentPopover component provide more powerful featureCombobox component base on Popover and InputBase, use to create custom input with dropdown listSelect base on new Combobox and InputBase componentChipsInput component base on Chip and InputBase componentMultiSelect component base on Combobox and ChipsInput componentNativeSelect component base on InputBase use native select componentTooltip component with Popover[docs-site] add Input,MultiSelect doc and demo
[@rtdui/core]
[@rtdui/hooks] update dependency[@rtdui/core]
ColorPicker componentColorInput componentColorSwatch componentTabs component which provides more control and more powerful features, this is Breaking Change[@rtdui/core]
error prop use string instead of boolean so that user can set error messages[@rtdui/datatable]
[@rtdui/core]
[@rtdui/datatable] DataTable expandColumn replace first id with first meta.expandable[@rtdui/datatable]
[@rtdui/core] Select ul remove w-fit class[@rtdui/datatable]
[@rtdui/spotlight]
[@rtdui/core] RadioGroup add flex gap[@rtdui/core] Swap checkbox add hidden className[@rtdui/spotlight] SpotlightRoot use same z-index as model class[@rtdui/core] Badge polymorphic support Typescript[@rtdui/spotlight] new spotlight package[@rtdui/*] Improve README and fixed official website URL[@rtdui/tailwind-plugin] add missing dependencies[@rtdui/code-highlight] prism supply all langs[@rtdui/editor] prism supply all langs[@rtdui/code-highlight] only import common languages from refractor reduce the size of the bundle[@rtdui/editor] only import common languages from refractor reduce the size of the bundle