Learn about the datepicker component and its usage in Toolpad.
+
+## Demo
+
+DatePicker is an input component. It takes user input and provides the value for further usage on the page.
+
+{{"demo": "DatePicker.js", "hideToolbar": true}}
+
+## Usage
+
+Below props makes it usable:
+
+### format
+
+The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings will always be in the YYYY-MM-DD format. Leave empty to let the end-user locale define the format.
+
+{{"demo": "DatePickerFormat.js", "hideToolbar": true}}
+
+### value
+
+The current selected date. It shows the format in which it is being provided to the page: YYYY-MM-DD.
+
+### defaultValue
+
+Allows setting a default value. Example:
+
+
+
+### name
+
+A name is needed when a textfield is part of a form component. It is used to show validation errors.
+
+## Appearance
+
+The DatePicker component supports below mentioned appearance related props in Toolpad:
+
+### label
+
+A label that describes the content of the datepicker e.g. Enter date.
+
+### variant
+
+The variant property supports three different options: outlined (default), filled, and standard. Outlined is for low-emphasis while Filled is a high-emphasis input. Standard is used for less-pronounced actions that ensure user remains focused on the main content.
+
+{{"demo": "DatePickerVariant.js", "hideToolbar": true}}
+
+### size
+
+The size property supports two options: small (default) and medium.
+
+{{"demo": "DatePickerSize.js", "hideToolbar": true}}
+
+### fullWidth
+
+This boolean defines if the component should take the full width of the page.
+
+### disabled
+
+Disabled property shows the state of the component so that end user is aware that can't interact with the component.
+
+{{"demo": "DatePickerDisabled.js", "hideToolbar": true}}
+
+## Validation
+
+### isRequired
+
+isRequired is useful when the action can't be perfomed without a user provided date.
+
+
+
+## API
+
+See the documentation below for a complete reference to all props available to the datepicker component in Toolpad.
+
+- [``](/toolpad/reference/components/date-picker/#properties)
diff --git a/docs/data/toolpad/components/list/List.js b/docs/data/toolpad/components/list/List.js
new file mode 100644
index 00000000000..f62e82a87b4
--- /dev/null
+++ b/docs/data/toolpad/components/list/List.js
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { List } from '@mui/toolpad-components';
+
+export default function BasicList() {
+ return ;
+}
diff --git a/docs/data/toolpad/components/list/list.md b/docs/data/toolpad/components/list/list.md
new file mode 100644
index 00000000000..0dd68046579
--- /dev/null
+++ b/docs/data/toolpad/components/list/list.md
@@ -0,0 +1,30 @@
+# List
+
+
Learn about the list component and its usage in Toolpad.
+
+## Usage
+
+A List is an essential component in an application. It had one key property that makes it usable:
+
+### itemCount
+
+It is the number of occurences that the list is supposed to render.
+
+
+
+## Appearance
+
+The List component acts as a mini canvas for other components. Each component has its own styling. The first occurence decides the appearance for the entire list.
+
+### disablePadding
+
+There is a predefined padding that can be enabled or disabled. It is a boolean.
+
+## API
+
+See the documentation below for a complete reference to all props available to the list component in Toolpad.
+
+- [``](/toolpad/reference/components/list/#properties)
diff --git a/docs/data/toolpad/components/text-field/TextField.js b/docs/data/toolpad/components/text-field/TextField.js
new file mode 100644
index 00000000000..c277d13cceb
--- /dev/null
+++ b/docs/data/toolpad/components/text-field/TextField.js
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+
+export default function BasicDatepicker() {
+ return (
+
+ );
+}
diff --git a/docs/data/toolpad/components/text-field/TextFieldDisabled.js b/docs/data/toolpad/components/text-field/TextFieldDisabled.js
new file mode 100644
index 00000000000..6076bd5dbb5
--- /dev/null
+++ b/docs/data/toolpad/components/text-field/TextFieldDisabled.js
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+export default function BasicButton() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/components/text-field/TextFieldSize.js b/docs/data/toolpad/components/text-field/TextFieldSize.js
new file mode 100644
index 00000000000..51b47e81355
--- /dev/null
+++ b/docs/data/toolpad/components/text-field/TextFieldSize.js
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+export default function BasicButton() {
+ return (
+
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/components/text-field/TextFieldVariant.js b/docs/data/toolpad/components/text-field/TextFieldVariant.js
new file mode 100644
index 00000000000..b08a7a3aef2
--- /dev/null
+++ b/docs/data/toolpad/components/text-field/TextFieldVariant.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { TextField } from '@mui/toolpad-components';
+import { Stack } from '@mui/material';
+
+export default function BasicButton() {
+ return (
+
+
+
+
+
+ );
+}
diff --git a/docs/data/toolpad/components/text-field/text-field.md b/docs/data/toolpad/components/text-field/text-field.md
new file mode 100644
index 00000000000..2b562d47d68
--- /dev/null
+++ b/docs/data/toolpad/components/text-field/text-field.md
@@ -0,0 +1,88 @@
+# Textfield
+
+
Learn about the textfield component and its usage in Toolpad.
+
+## Demo
+
+TextField is a text input component. It takes user input and provides the value for further usage on the page.
+
+{{"demo": "TextField.js", "hideToolbar": true}}
+
+## Usage
+
+It is one of the most used input component. The video below uses some props to demonstrate its usage.
+
+
+
+### value
+
+The current value.
+
+### defaultValue
+
+Allows setting a default value. In case user enters nothing, default value is used.
+
+### password
+
+Password prop masks the user input. It is used to hide sensitive data.
+
+### name
+
+A name is needed when a textfield is part of a form component. It is used to show validation errors.
+
+## Appearance
+
+The TextField component supports below mentioned appearance related props in Toolpad:
+
+### label
+
+A label that describes the content of the textfield e.g. Enter name.
+
+### variant
+
+The variant property supports three different options: outlined (default), filled, and standard. Outlined is for low-emphasis while filled is a high-emphasis input. Standard is used for less-pronounced actions that ensure user remains focused on the main content.
+
+{{"demo": "TextFieldVariant.js", "hideToolbar": true}}
+
+### size
+
+The size property supports two options: small (default) and medium.
+
+{{"demo": "TextFieldSize.js", "hideToolbar": true}}
+
+### fullWidth
+
+This boolean defines if the component should take the full width of the page.
+
+### placeholder
+
+As shown in the first demo, in a blank text field, a placeholder shows up when the user starts typing.
+
+### disabled
+
+Disabled property shows the state of the component so that end user is aware that they can't interact with the component.
+
+{{"demo": "TextFieldDisabled.js", "hideToolbar": true}}
+
+## Validation
+
+### isRequired
+
+isRequired is useful when the action can't be perfomed without a user provided text value.
+
+### minLength
+
+A validation check on the minimum length of the input.
+
+### maxLength
+
+A validation check on the maximum length of the input.
+
+## API
+
+See the documentation below for a complete reference to all props available to the textfield component in Toolpad.
+
+- [``](/toolpad/reference/components/text-field/#properties)
diff --git a/docs/pages/toolpad/components/datagrid.js b/docs/pages/toolpad/components/data-grid.js
similarity index 88%
rename from docs/pages/toolpad/components/datagrid.js
rename to docs/pages/toolpad/components/data-grid.js
index 8c2cfe9813e..c2b49f41244 100644
--- a/docs/pages/toolpad/components/datagrid.js
+++ b/docs/pages/toolpad/components/data-grid.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../data/toolpad/components/datagrid/datagrid.md?muiMarkdown';
+import * as pageProps from '../../../data/toolpad/components/data-grid/data-grid.md?muiMarkdown';
export default function Page() {
return ;
diff --git a/docs/pages/toolpad/components/date-picker.js b/docs/pages/toolpad/components/date-picker.js
new file mode 100644
index 00000000000..bf1d3a98129
--- /dev/null
+++ b/docs/pages/toolpad/components/date-picker.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from '../../../data/toolpad/components/date-picker/date-picker.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/toolpad/components/list.js b/docs/pages/toolpad/components/list.js
new file mode 100644
index 00000000000..490c2a726c9
--- /dev/null
+++ b/docs/pages/toolpad/components/list.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from '../../../data/toolpad/components/list/list.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/pages/toolpad/components/text-field.js b/docs/pages/toolpad/components/text-field.js
new file mode 100644
index 00000000000..3e623aefebc
--- /dev/null
+++ b/docs/pages/toolpad/components/text-field.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from '../../../data/toolpad/components/text-field/text-field.md?muiMarkdown';
+
+export default function Page() {
+ return ;
+}
diff --git a/docs/public/static/toolpad/docs/components/datagrid/datagrid-column.mp4 b/docs/public/static/toolpad/docs/components/datagrid/datagrid-column.mp4
new file mode 100644
index 00000000000..251859e7780
Binary files /dev/null and b/docs/public/static/toolpad/docs/components/datagrid/datagrid-column.mp4 differ
diff --git a/docs/public/static/toolpad/docs/components/datepicker/datepicker-defaultValue.mp4 b/docs/public/static/toolpad/docs/components/datepicker/datepicker-defaultValue.mp4
new file mode 100644
index 00000000000..15d3cedf633
Binary files /dev/null and b/docs/public/static/toolpad/docs/components/datepicker/datepicker-defaultValue.mp4 differ
diff --git a/docs/public/static/toolpad/docs/components/datepicker/datepicker-validation.mp4 b/docs/public/static/toolpad/docs/components/datepicker/datepicker-validation.mp4
new file mode 100644
index 00000000000..86bbf00794b
Binary files /dev/null and b/docs/public/static/toolpad/docs/components/datepicker/datepicker-validation.mp4 differ
diff --git a/docs/public/static/toolpad/docs/components/list/list.mp4 b/docs/public/static/toolpad/docs/components/list/list.mp4
new file mode 100644
index 00000000000..bc875b1fd4e
Binary files /dev/null and b/docs/public/static/toolpad/docs/components/list/list.mp4 differ
diff --git a/docs/public/static/toolpad/docs/components/textfield/textfield.mp4 b/docs/public/static/toolpad/docs/components/textfield/textfield.mp4
new file mode 100644
index 00000000000..ee791d596b1
Binary files /dev/null and b/docs/public/static/toolpad/docs/components/textfield/textfield.mp4 differ
diff --git a/packages/toolpad-components/src/DatePicker.tsx b/packages/toolpad-components/src/DatePicker.tsx
index 06fdd9d6e68..d020a9070ec 100644
--- a/packages/toolpad-components/src/DatePicker.tsx
+++ b/packages/toolpad-components/src/DatePicker.tsx
@@ -71,7 +71,7 @@ export interface DatePickerProps
extends Omit, 'value' | 'onChange' | 'defaultValue' | 'name'>,
Pick {
value?: string;
- onChange: (newValue: string | null) => void;
+ onChange?: (newValue: string | null) => void;
label?: string;
format: string;
fullWidth: boolean;
@@ -112,7 +112,11 @@ function DatePicker({
[onFormInputChange],
);
- const adapterLocale = React.useSyncExternalStore(subscribeLocaleLoader, getSnapshot);
+ const adapterLocale = React.useSyncExternalStore(
+ subscribeLocaleLoader,
+ getSnapshot,
+ () => undefined,
+ );
const value = React.useMemo(
() => (typeof valueProp === 'string' ? dayjs(valueProp) : valueProp),
diff --git a/packages/toolpad-components/src/Form.tsx b/packages/toolpad-components/src/Form.tsx
index f5102952e92..04eb3338dce 100644
--- a/packages/toolpad-components/src/Form.tsx
+++ b/packages/toolpad-components/src/Form.tsx
@@ -184,7 +184,7 @@ interface UseFormInputInput {
name: string;
label?: string;
value?: V;
- onChange: (newValue: V) => void;
+ onChange?: (newValue: V) => void;
emptyValue?: V;
defaultValue?: V;
validationProps: Partial>;
@@ -224,7 +224,7 @@ export function useFormInput({
const previousDefaultValueRef = React.useRef(defaultValue);
React.useEffect(() => {
if (form && defaultValue !== previousDefaultValueRef.current) {
- onChange(defaultValue as V);
+ onChange?.(defaultValue as V);
form.setValue(formInputName, defaultValue);
previousDefaultValueRef.current = defaultValue;
}
@@ -235,10 +235,10 @@ export function useFormInput({
React.useEffect(() => {
if (form) {
if (!fieldValues[formInputName] && defaultValue && isInitialForm) {
- onChange((defaultValue || emptyValue) as V);
+ onChange?.((defaultValue || emptyValue) as V);
form.setValue(formInputName, defaultValue || emptyValue);
} else if (value !== fieldValues[formInputName]) {
- onChange(fieldValues[formInputName] || emptyValue);
+ onChange?.(fieldValues[formInputName] || emptyValue);
}
}
}, [defaultValue, emptyValue, fieldValues, form, isInitialForm, formInputName, onChange, value]);
@@ -274,7 +274,7 @@ export function useFormInput({
shouldTouch: true,
});
}
- onChange(newValue);
+ onChange?.(newValue);
},
[form, formInputName, onChange],
);
diff --git a/packages/toolpad-components/src/TextField.tsx b/packages/toolpad-components/src/TextField.tsx
index 532daccb3e9..e1b4ed261f7 100644
--- a/packages/toolpad-components/src/TextField.tsx
+++ b/packages/toolpad-components/src/TextField.tsx
@@ -16,7 +16,7 @@ import { SX_PROP_HELPER_TEXT } from './constants';
export type TextFieldProps = Omit & {
value: string;
- onChange: (newValue: string) => void;
+ onChange?: (newValue: string) => void;
label?: string;
defaultValue: string;
alignItems?: BoxProps['alignItems'];