@cloudflare/kumo 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @cloudflare/kumo
 
+## 1.9.0
+
+### Minor Changes
+
+- 23865db: feat(dropdown): add LinkItem for navigation links and fix icon rendering
+
+  **New Features:**
+  - Add `DropdownMenu.LinkItem` for navigation links (semantic `<a>` element with proper menu item behavior)
+  - Upgrade `@base-ui/react` from 1.0.0 to 1.2.0
+  - Add new primitives: `csp-provider` and `drawer` from Base UI 1.2.0
+
+  **Bug Fixes:**
+  - Fix `icon` prop not rendering on `DropdownMenu.Item` when no `href` is provided
+
+  **Deprecations:**
+  - `href` prop on `DropdownMenu.Item` is deprecated. Use `DropdownMenu.LinkItem` instead.
+
+  **Migration:**
+
+  ```tsx
+  // Before (deprecated)
+  <DropdownMenu.Item href="https://example.com">Link</DropdownMenu.Item>
+
+  // After (recommended)
+  <DropdownMenu.LinkItem href="https://example.com" target="_blank">
+    Link
+  </DropdownMenu.LinkItem>
+  ```
+
+  `DropdownMenu.LinkItem` gives you full control over link attributes (`target`, `rel`, etc.) without the component making assumptions about your intent.
+
+- 68c2f0d: Add `positionMethod` prop to `Popover.Content` to control CSS positioning strategy. Use `"fixed"` when the popover needs to escape stacking contexts (e.g., inside sticky headers). Defaults to `"absolute"`.
+
+### Patch Changes
+
+- 89cb5ec: Improve Flow diagram components with disabled node support and better connector rendering:
+  - Add `disabled` prop to FlowNode for greying out connectors
+  - Add `align` prop to FlowParallelNode for start/end alignment
+  - Improve connector path rendering with smarter junction detection
+  - Fix panning behavior to not interfere with node interactions
+
 ## 1.8.0
 
 ### Minor Changes

package/ai/component-registry.json

@@ -2558,7 +2558,7 @@
     "DropdownMenu": {
       "name": "DropdownMenu",
       "type": "component",
-      "description": "DropdownMenu — accessible dropdown menu anchored to a trigger.  Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.  Built on `@base-ui/react/menu`.",
+      "description": "DropdownMenu — accessible dropdown menu anchored to a trigger.  Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.  Built on `@base-ui/react/menu`.",
       "importPath": "@cloudflare/kumo",
       "category": "Overlay",
       "props": {
@@ -2631,6 +2631,11 @@
           "description": "Item sub-component",
           "props": {}
         },
+        "LinkItem": {
+          "name": "LinkItem",
+          "description": "LinkItem sub-component",
+          "props": {}
+        },
         "CheckboxItem": {
           "name": "CheckboxItem",
           "description": "CheckboxItem sub-component",
@@ -3451,23 +3456,10 @@
     "Pagination": {
       "name": "Pagination",
       "type": "component",
-      "description": "Page navigation controls with page count display.",
+      "description": "Pagination component",
       "importPath": "@cloudflare/kumo",
       "category": "Navigation",
       "props": {
-        "controls": {
-          "type": "enum",
-          "optional": true,
-          "values": [
-            "full",
-            "simple"
-          ],
-          "descriptions": {
-            "full": "Full pagination controls with first, previous, page input, next, and last buttons",
-            "simple": "Simple pagination controls with only previous and next buttons"
-          },
-          "default": "full"
-        },
         "setPage": {
           "type": "(page: number) => void",
           "required": true,
@@ -3488,10 +3480,32 @@
           "optional": true,
           "description": "Total number of items across all pages."
         },
+        "className": {
+          "type": "string",
+          "optional": true,
+          "description": "Additional CSS classes for the container"
+        },
+        "children": {
+          "type": "ReactNode",
+          "optional": true,
+          "description": "Compound component children for custom layouts. Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator."
+        },
+        "controls": {
+          "type": "enum",
+          "optional": true,
+          "values": [
+            "full",
+            "simple"
+          ],
+          "descriptions": {
+            "full": "Full pagination controls with first, previous, page input, next, and last buttons",
+            "simple": "Simple pagination controls with only previous and next buttons"
+          },
+          "default": "full"
+        },
         "text": {
           "type": "object",
-          "optional": true,
-          "description": "Method to provide custom pagination text"
+          "optional": true
         }
       },
       "examples": [
@@ -3500,11 +3514,86 @@
         "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={10}\n      totalCount={100}\n      controls=\"full\"\n    />",
         "<Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />",
         "<Pagination page={page} setPage={setPage} perPage={25} totalCount={1250} />",
-        "<Pagination\n      text={({ perPage }) => `Page ${page} - showing ${perPage} per page`}\n      page={page}\n      setPage={setPage}\n      perPage={25}\n      totalCount={100}\n    />"
+        "<Pagination\n      text={({ perPage }: { perPage?: number }) =>\n        `Page ${page} - showing ${perPage} per page`\n      }\n      page={page}\n      setPage={setPage}\n      perPage={25}\n      totalCount={100}\n    />",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n      />\n      <Pagination.Controls />\n    </Pagination>",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={200}\n    >\n      <Pagination.Info />\n      <Pagination.Separator />\n      <Pagination.PageSize\n        value={perPage}\n        onChange={(size) => {\n          setPerPage(size);\n          setPage(1);\n        }}\n        options={[10, 20, 50]}\n      />\n      <Pagination.Controls />\n    </Pagination>",
+        "<Pagination page={page} setPage={setPage} perPage={25} totalCount={100}>\n      <Pagination.Info>\n        {({ page, totalCount }) =>\n          `Page ${page} of ${Math.ceil((totalCount ?? 1) / 25)}`\n        }\n      </Pagination.Info>\n      <Pagination.Controls />\n    </Pagination>",
+        "<Pagination\n      page={page}\n      setPage={setPage}\n      perPage={perPage}\n      totalCount={500}\n    >\n      <Pagination.Info />\n      <div className=\"flex items-center gap-2\">\n        <Pagination.Controls />\n        <Pagination.Separator />\n        <Pagination.PageSize\n          value={perPage}\n          onChange={(size) => {\n            setPerPage(size);\n            setPage(1);\n          }}\n        />\n      </div>\n    </Pagination>"
       ],
       "colors": [
+        "border-kumo-line",
         "text-kumo-strong"
       ],
+      "subComponents": {
+        "Info": {
+          "name": "Info",
+          "description": "Info sub-component",
+          "props": {
+            "children": {
+              "type": "(props: {",
+              "optional": true
+            },
+            "page": {
+              "type": "number",
+              "required": true
+            },
+            "perPage": {
+              "type": "number",
+              "optional": true
+            },
+            "totalCount": {
+              "type": "number",
+              "optional": true
+            },
+            "pageShowingRange": {
+              "type": "string",
+              "required": true
+            }
+          }
+        },
+        "PageSize": {
+          "name": "PageSize",
+          "description": "PageSize sub-component",
+          "props": {
+            "value": {
+              "type": "number",
+              "required": true
+            },
+            "options": {
+              "type": "number[]",
+              "optional": true
+            },
+            "label": {
+              "type": "ReactNode",
+              "optional": true
+            },
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Controls": {
+          "name": "Controls",
+          "description": "Controls sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        },
+        "Separator": {
+          "name": "Separator",
+          "description": "Separator sub-component",
+          "props": {
+            "className": {
+              "type": "string",
+              "optional": true
+            }
+          }
+        }
+      },
       "styling": {
         "layout": {
           "height": 36,
@@ -4565,43 +4654,29 @@
       "importPath": "@cloudflare/kumo",
       "category": "Overlay",
       "props": {
-        "align": {
-          "type": "enum",
-          "optional": true,
-          "description": "Alignment on the axis perpendicular to `side`.\n- `\"start\"` — Align to the start edge\n- `\"center\"` — Center-aligned\n- `\"end\"` — Align to the end edge",
-          "values": [
-            "start",
-            "center",
-            "end"
-          ]
-        },
-        "asChild": {
-          "type": "boolean",
-          "optional": true,
-          "description": "When `true`, the trigger wraps the child element instead of adding a wrapper."
-        },
-        "className": {
-          "type": "string",
-          "optional": true,
-          "description": "Additional CSS classes merged via `cn()`."
-        },
         "side": {
           "type": "enum",
-          "optional": true,
-          "description": "Preferred side of the trigger to render the tooltip.\n- `\"top\"` — Tooltip appears above the trigger\n- `\"bottom\"` — Tooltip appears below the trigger\n- `\"left\"` — Tooltip appears to the left of the trigger\n- `\"right\"` — Tooltip appears to the right of the trigger",
           "values": [
             "top",
             "bottom",
             "left",
             "right"
           ],
+          "default": "top",
           "descriptions": {
             "top": "Tooltip appears above the trigger",
             "bottom": "Tooltip appears below the trigger",
             "left": "Tooltip appears to the left of the trigger",
             "right": "Tooltip appears to the right of the trigger"
-          },
-          "default": "top"
+          }
+        },
+        "className": {
+          "type": "string",
+          "description": "Additional CSS classes"
+        },
+        "children": {
+          "type": "ReactNode",
+          "description": "Child elements"
         },
         "content": {
           "type": "ReactNode",

package/ai/component-registry.md

@@ -2201,7 +2201,7 @@ Close sub-component
 
 ### DropdownMenu
 
-DropdownMenu — accessible dropdown menu anchored to a trigger.  Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.  Built on `@base-ui/react/menu`.
+DropdownMenu — accessible dropdown menu anchored to a trigger.  Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`, `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`, `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.  Built on `@base-ui/react/menu`.
 
 **Type:** component
 
@@ -2251,6 +2251,10 @@ Content sub-component
 
 Item sub-component
 
+#### DropdownMenu.LinkItem
+
+LinkItem sub-component
+
 #### DropdownMenu.CheckboxItem
 
 CheckboxItem sub-component
@@ -3295,7 +3299,7 @@ Progress bar showing a measured value within a known range (e.g. quota usage).
 
 ### Pagination
 
-Page navigation controls with page count display.
+Pagination component
 
 **Type:** component
 
@@ -3305,9 +3309,6 @@ Page navigation controls with page count display.
 
 **Props:**
 
-- `controls`: enum [default: full]
-  - `"full"`: Full pagination controls with first, previous, page input, next, and last buttons
-  - `"simple"`: Simple pagination controls with only previous and next buttons
 - `setPage`: (page: number) => void (required)
   Callback when page changes
 - `page`: number
@@ -3316,16 +3317,62 @@ Page navigation controls with page count display.
   Number of items displayed per page.
 - `totalCount`: number
   Total number of items across all pages.
+- `className`: string
+  Additional CSS classes for the container
+- `children`: ReactNode
+  Compound component children for custom layouts. Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.
+- `controls`: enum [default: full]
+  - `"full"`: Full pagination controls with first, previous, page input, next, and last buttons
+  - `"simple"`: Simple pagination controls with only previous and next buttons
 - `text`: object
-  Method to provide custom pagination text
 
 **Colors (kumo tokens used):**
 
-`text-kumo-strong`
+`border-kumo-line`, `text-kumo-strong`
 
 **Styling:**
 
 
+**Sub-Components:**
+
+This is a compound component. Use these sub-components:
+
+#### Pagination.Info
+
+Info sub-component
+
+Props:
+- `children`: (props: {
+- `page`: number (required)
+- `perPage`: number
+- `totalCount`: number
+- `pageShowingRange`: string (required)
+
+#### Pagination.PageSize
+
+PageSize sub-component
+
+Props:
+- `value`: number (required)
+- `options`: number[]
+- `label`: ReactNode
+- `className`: string
+
+#### Pagination.Controls
+
+Controls sub-component
+
+Props:
+- `className`: string
+
+#### Pagination.Separator
+
+Separator sub-component
+
+Props:
+- `className`: string
+
+
 **Examples:**
 
 ```tsx
@@ -3344,7 +3391,9 @@ Page navigation controls with page count display.
 
 ```tsx
 <Pagination
-      text={({ perPage }) => `Page ${page} - showing ${perPage} per page`}
+      text={({ perPage }: { perPage?: number }) =>
+        `Page ${page} - showing ${perPage} per page`
+      }
       page={page}
       setPage={setPage}
       perPage={25}
@@ -3352,6 +3401,69 @@ Page navigation controls with page count display.
     />
 ```
 
+```tsx
+<Pagination
+      page={page}
+      setPage={setPage}
+      perPage={perPage}
+      totalCount={500}
+    >
+      <Pagination.Info />
+      <Pagination.Separator />
+      <Pagination.PageSize
+        value={perPage}
+        onChange={(size) => {
+          setPerPage(size);
+          setPage(1);
+        }}
+      />
+      <Pagination.Controls />
+    </Pagination>
+```
+
+```tsx
+<Pagination
+      page={page}
+      setPage={setPage}
+      perPage={perPage}
+      totalCount={200}
+    >
+      <Pagination.Info />
+      <Pagination.Separator />
+      <Pagination.PageSize
+        value={perPage}
+        onChange={(size) => {
+          setPerPage(size);
+          setPage(1);
+        }}
+        options={[10, 20, 50]}
+      />
+      <Pagination.Controls />
+    </Pagination>
+```
+
+```tsx
+<Pagination
+      page={page}
+      setPage={setPage}
+      perPage={perPage}
+      totalCount={500}
+    >
+      <Pagination.Info />
+      <div className="flex items-center gap-2">
+        <Pagination.Controls />
+        <Pagination.Separator />
+        <Pagination.PageSize
+          value={perPage}
+          onChange={(size) => {
+            setPerPage(size);
+            setPage(1);
+          }}
+        />
+      </div>
+    </Pagination>
+```
+
 
 ---
 
@@ -4681,20 +4793,15 @@ Accessible popup that shows additional information on hover/focus. Wrap your app
 
 **Props:**
 
-- `align`: enum
-  Alignment on the axis perpendicular to `side`.
-- `"start"` — Align to the start edge
-- `"center"` — Center-aligned
-- `"end"` — Align to the end edge
-- `asChild`: boolean
-  When `true`, the trigger wraps the child element instead of adding a wrapper.
-- `className`: string
-  Additional CSS classes merged via `cn()`.
 - `side`: enum [default: top]
   - `"top"`: Tooltip appears above the trigger
   - `"bottom"`: Tooltip appears below the trigger
   - `"left"`: Tooltip appears to the left of the trigger
   - `"right"`: Tooltip appears to the right of the trigger
+- `className`: string
+  Additional CSS classes
+- `children`: ReactNode
+  Child elements
 - `content`: ReactNode (required)
   Content to display in the tooltip
 

package/ai/schemas.ts

@@ -587,12 +587,14 @@ export const MeterPropsSchema = z.object({
 });
 
 export const PaginationPropsSchema = z.object({
-  controls: z.enum(["full", "simple"]).optional(),
   setPage: z.unknown(), // Callback when page changes
   page: z.number().optional(), // Current page number (1-indexed).
   perPage: z.number().optional(), // Number of items displayed per page.
   totalCount: z.number().optional(), // Total number of items across all pages.
-  text: z.unknown().optional(), // Method to provide custom pagination text
+  className: z.string().optional(), // Additional CSS classes for the container
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Compound component children for custom layouts. Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.
+  controls: z.enum(["full", "simple"]).optional(),
+  text: z.unknown().optional(),
 });
 
 export const PopoverPropsSchema = z.object({
@@ -715,10 +717,9 @@ export const ToastyPropsSchema = z.object({
 });
 
 export const TooltipPropsSchema = z.object({
-  align: z.enum(["start", "center", "end"]).optional(), // Alignment on the axis perpendicular to `side`. - `"start"` — Align to the start edge - `"center"` — Center-aligned - `"end"` — Align to the end edge
-  asChild: z.boolean().optional(), // When `true`, the trigger wraps the child element instead of adding a wrapper.
-  className: z.string().optional(), // Additional CSS classes merged via `cn()`.
-  side: z.enum(["top", "bottom", "left", "right"]).optional(), // Preferred side of the trigger to render the tooltip. - `"top"` — Tooltip appears above the trigger - `"bottom"` — Tooltip appears below the trigger - `"left"` — Tooltip appears to the left of the trigger - `"right"` — Tooltip appears to the right of the trigger
+  side: z.enum(["top", "bottom", "left", "right"]).optional(),
+  className: z.string().optional(), // Additional CSS classes
+  children: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]).optional(), // Child elements
   content: z.union([z.string(), z.number(), z.boolean(), z.null(), DynamicValueSchema]), // Content to display in the tooltip
 });
 

package/dist/.build-complete

@@ -1 +1 @@
-1771946430289
+1772046030470