@atom-learning/components 2.15.0 → 2.17.0

package/dist/docs/DataTable.mdx

@@ -11,7 +11,7 @@ category: Content
 
 ## Anatomy
 
-The root `DataTable` component manages the table's state and exposes it via the React Context API. This state can be accessed by any child components by calling `useDataTable`.
+The root `DataTable` component manages the table's state and exposes it via the React Context API. This state can be accessed by any child components by calling `useDataTable`. You can pass an `initialState` prop to `DataTable` as described in the [`@tanstack/react-table` docs](https://tanstack.com/table/v8/docs/api/core/table#initialstate).
 
 Other `DataTable` components call `useDataTable` and provide useful default implementations for common patterns. For example, `DataTable.Head` will render a header for every column defined in the parent `DataTable`. `DataTable.Body` will render a row for every data item. `DataTable.Table` combines both `DataTable.Head` and `DataTable.Body`.
 
@@ -153,4 +153,4 @@ If `DataTable`'s `isSortable` state is `true`, then `DataTable.Header` will be c
 
 ### Pagination
 
-`DataTable.Pagination` can be passed as a child to `DataTable` to render the pagination UI and configure the parent `DataTable` to paginate its data.
+`DataTable.Pagination` can be passed as a child to `DataTable` to render the pagination UI and configure the parent `DataTable` to paginate its data. Note: there is currently a bug where `DataTable` will render all rows on the initial render, even when paginated. There is no visible effect, but it can cause performance issues on large tables. The workaround for this is to pass an `initialState` prop to `DataTable`. E.g. `initialState={pagination: {pageSize: 5, pageIndex: 0}}`. This will force pagination to apply properly on the initial render. Make sure the `pagination` prop matches the config you use in `DataTable.Pagination`, as the latter will take precedence after the initial render.

package/dist/docs/NavigationMenu.mdx

@@ -12,7 +12,8 @@ category: Navigation
   <NavigationMenu.Link href="/overview/introduction">
     Introduction
   </NavigationMenu.Link>
-  <NavigationMenu.Dropdown title="Theme">
+  <NavigationMenu.Dropdown id="1">
+    <NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
     <NavigationMenu.DropdownContent>
       <NavigationMenu.DropdownItem href="/theme/colours">
         Colours
@@ -75,7 +76,8 @@ In the below example the styling of `NavigationMenu.DropdownContent` has been ch
   <NavigationMenu.Link href="/overview/introduction">
     Introduction
   </NavigationMenu.Link>
-  <NavigationMenu.Dropdown title="Theme">
+  <NavigationMenu.Dropdown id="1">
+    <NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
     <NavigationMenu.DropdownContent
       css={{
         display: 'grid',
@@ -102,7 +104,7 @@ In the below example the styling of `NavigationMenu.DropdownContent` has been ch
 
 DropdownItem gives a lot of flexibility. It's an easy to compose it for own purposes.
 
-```
+```tsx
 <NavigationMenu.DropdownItem href="/" active>
   <Grid
     css={{
@@ -119,3 +121,24 @@ DropdownItem gives a lot of flexibility. It's an easy to compose it for own purp
   </Grid>
 </NavigationMenu.DropdownItem>
 ```
+
+## Dropdown Trigger
+
+NavigationMenu.Dropdown gives you the way to pass your own trigger component inside the `NavigationMenu.DropdownTrigger`.
+The children of NavigationMenu.DropdownTrigger can be a plain text or more complex component.
+
+```tsx
+<NavigationMenu.Dropdown id="1">
+  <NavigationMenu.DropdownTrigger>
+    <Avatar />
+  </NavigationMenu.DropdownTrigger>
+  <NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
+</NavigationMenu.Dropdown>
+
+<NavigationMenu.Dropdown id="2">
+  <NavigationMenu.DropdownTrigger>
+    Plain text
+  </NavigationMenu.DropdownTrigger>
+  <NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
+</NavigationMenu.Dropdown>
+```