[toast] Add ability to anchor to an element

docs/reference/generated/toast-arrow.json

@@ -0,0 +1,37 @@
+{
+  "name": "ToastArrow",
+  "description": "Displays an element positioned against the toast anchor.\nRenders a `<div>` element.",
+  "props": {
+    "style": {
+      "type": "CSSProperties | ((state: Toast.Arrow.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((state: Toast.Arrow.State) => CSSProperties | undefined)\n| undefined"
+    },
+    "className": {
+      "type": "string | ((state: Toast.Arrow.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Toast.Arrow.State) => string | undefined)"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Toast.Arrow.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Toast.Arrow.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-uncentered": {
+      "description": "Present when the toast arrow is uncentered."
+    },
+    "data-anchor-hidden": {
+      "description": "Present when the anchor is hidden."
+    },
+    "data-align": {
+      "description": "Indicates how the toast is aligned relative to specified side.",
+      "type": "'start' | 'center' | 'end'"
+    },
+    "data-side": {
+      "description": "Indicates which side the toast is positioned relative to the anchor.",
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
+    }
+  },
+  "cssVariables": {}
+}

docs/reference/generated/toast-positioner.json

@@ -0,0 +1,134 @@
+{
+  "name": "ToastPositioner",
+  "description": "Positions the toast against the anchor.\nRenders a `<div>` element.",
+  "props": {
+    "collisionAvoidance": {
+      "type": "CollisionAvoidance",
+      "description": "Determines how to handle collisions when positioning the popup.",
+      "example": "```jsx\n<Positioner\n  collisionAvoidance={{\n    side: 'shift',\n    align: 'shift',\n    fallbackAxisSide: 'none',\n  }}\n/>\n```",
+      "detailedType": "| {\n    side?: 'none' | 'flip'\n    align?: 'none' | 'flip' | 'shift'\n    fallbackAxisSide?: 'none' | 'end' | 'start'\n  }\n| {\n    side?: 'none' | 'shift'\n    align?: 'none' | 'shift'\n    fallbackAxisSide?: 'none' | 'end' | 'start'\n  }\n| undefined"
+    },
+    "style": {
+      "type": "CSSProperties | ((state: Toast.Positioner.State) => CSSProperties | undefined)",
+      "detailedType": "| React.CSSProperties\n| ((\n    state: Toast.Positioner.State,\n  ) => CSSProperties | undefined)\n| undefined"
+    },
+    "toast": {
+      "type": "ToastObject<any>",
+      "required": true,
+      "description": "The toast object associated with the positioner.",
+      "detailedType": "id: string\n  ref?: RefObject<HTMLElement | null>\n  title?: ReactNode\n  type?: string\n  description?: ReactNode\n  timeout?: number\n  priority?: 'high' | 'low'\n  transitionStatus?: 'starting' | 'ending'\n  limited?: boolean\n  height?: number\n  onClose?: () => void\n  onRemove?: () => void\n  actionProps?: Omit<\n    DetailedHTMLProps<\n      ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >,\n    'ref'\n  >\n  positionerProps?: Toast.Positioner.Options\n  data?: any\n}"
+    },
+    "align": {
+      "type": "Align",
+      "default": "'center'",
+      "description": "How to align the popup relative to the specified side.",
+      "detailedType": "'center' | 'end' | 'start' | undefined"
+    },
+    "alignOffset": {
+      "type": "number | OffsetFunction",
+      "default": "0",
+      "description": "Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.",
+      "example": "```jsx\n<Positioner\n  alignOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.width\n      : anchor.height;\n  }}\n/>\n```",
+      "detailedType": "| number\n| ((data: {\n    side: Side\n    align: Align\n    anchor: { width: number; height: number }\n    positioner: { width: number; height: number }\n  }) => number)\n| undefined"
+    },
+    "side": {
+      "type": "Side",
+      "default": "'top'",
+      "description": "Which side of the anchor element to align the toast against.\nMay automatically change to avoid collisions.",
+      "detailedType": "| 'left'\n| 'right'\n| 'bottom'\n| 'top'\n| 'inline-end'\n| 'inline-start'\n| undefined"
+    },
+    "sideOffset": {
+      "type": "number | OffsetFunction",
+      "default": "0",
+      "description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.",
+      "example": "```jsx\n<Positioner\n  sideOffset={({ side, align, anchor, positioner }) => {\n    return side === 'top' || side === 'bottom'\n      ? anchor.height\n      : anchor.width;\n  }}\n/>\n```",
+      "detailedType": "| number\n| ((data: {\n    side: Side\n    align: Align\n    anchor: { width: number; height: number }\n    positioner: { width: number; height: number }\n  }) => number)\n| undefined"
+    },
+    "arrowPadding": {
+      "type": "number",
+      "default": "5",
+      "description": "Minimum distance to maintain between the arrow and the edges of the popup.\n\nUse it to prevent the arrow element from hanging out of the rounded corners of a popup.",
+      "detailedType": "number | undefined"
+    },
+    "anchor": {
+      "type": "Element | null",
+      "description": "An element to position the toast against.",
+      "detailedType": "Element | null | undefined"
+    },
+    "collisionBoundary": {
+      "type": "Boundary",
+      "default": "'clipping-ancestors'",
+      "description": "An element or a rectangle that delimits the area that the popup is confined to.",
+      "detailedType": "| Element\n| 'clipping-ancestors'\n| Element[]\n| Rect\n| undefined"
+    },
+    "collisionPadding": {
+      "type": "Padding",
+      "default": "5",
+      "description": "Additional space to maintain from the edge of the collision boundary.",
+      "detailedType": "| {\n    top?: number\n    right?: number\n    bottom?: number\n    left?: number\n  }\n| number\n| undefined"
+    },
+    "sticky": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view.",
+      "detailedType": "boolean | undefined"
+    },
+    "positionMethod": {
+      "type": "'fixed' | 'absolute'",
+      "default": "'absolute'",
+      "description": "Determines which CSS `position` property to use.",
+      "detailedType": "'fixed' | 'absolute' | undefined"
+    },
+    "trackAnchor": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the popup tracks any layout shift of its positioning anchor.",
+      "detailedType": "boolean | undefined"
+    },
+    "className": {
+      "type": "string | ((state: Toast.Positioner.State) => string | undefined)",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.",
+      "detailedType": "| string\n| ((state: Toast.Positioner.State) => string | undefined)"
+    },
+    "render": {
+      "type": "ReactElement | ((props: HTMLProps, state: Toast.Positioner.State) => ReactElement)",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render.",
+      "detailedType": "| ReactElement\n| ((\n    props: HTMLProps,\n    state: Toast.Positioner.State,\n  ) => ReactElement)"
+    }
+  },
+  "dataAttributes": {
+    "data-anchor-hidden": {
+      "description": "Present when the anchor is hidden."
+    },
+    "data-align": {
+      "description": "Indicates how the toast is aligned relative to specified side.",
+      "type": "'start' | 'center' | 'end'"
+    },
+    "data-side": {
+      "description": "Indicates which side the toast is positioned relative to the trigger.",
+      "type": "'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'"
+    }
+  },
+  "cssVariables": {
+    "--anchor-height": {
+      "description": "The anchor's height.",
+      "type": "number"
+    },
+    "--anchor-width": {
+      "description": "The anchor's width.",
+      "type": "number"
+    },
+    "--available-height": {
+      "description": "The available height between the anchor and the edge of the viewport.",
+      "type": "number"
+    },
+    "--available-width": {
+      "description": "The available width between the anchor and the edge of the viewport.",
+      "type": "number"
+    },
+    "--transform-origin": {
+      "description": "The coordinates that this element is anchored to. Used for animations and transitions.",
+      "type": "string"
+    }
+  }
+}

docs/reference/generated/toast-provider.json

@@ -9,9 +9,9 @@
       "detailedType": "number | undefined"
     },
     "toastManager": {
-      "type": "createToastManager.ToastManager",
+      "type": "ToastManager",
       "description": "A global manager for toasts to use outside of a React component.",
-      "detailedType": "| {\n    subscribe: (\n      listener: (data: ToastManagerEvent) => void,\n    ) => () => void\n    add: (\n      options: useToastManager.AddOptions<{}>,\n    ) => string\n    close: (id: string) => void\n    update: (\n      id: string,\n      updates: useToastManager.UpdateOptions<{}>,\n    ) => void\n    promise: (\n      promiseValue: Promise<Value>,\n      options: useToastManager.PromiseOptions<Value, {}>,\n    ) => Promise<Value>\n  }\n| undefined"
+      "detailedType": "| {\n    subscribe: (\n      listener: (data: ToastManagerEvent) => void,\n    ) => () => void\n    add: (\n      options: UseToastManagerAddOptions<{}>,\n    ) => string\n    close: (id: string) => void\n    update: (\n      id: string,\n      updates: UseToastManagerUpdateOptions<{}>,\n    ) => void\n    promise: (\n      promiseValue: Promise<Value>,\n      options: UseToastManagerPromiseOptions<Value, {}>,\n    ) => Promise<Value>\n  }\n| undefined"
     },
     "timeout": {
       "type": "number",

docs/reference/generated/toast-root.json

@@ -16,7 +16,7 @@
       "type": "Toast.Root.ToastObject<any>",
       "required": true,
       "description": "The toast to render.",
-      "detailedType": "id: string\n  ref?: RefObject<HTMLElement | null>\n  title?: ReactNode\n  type?: string\n  description?: ReactNode\n  timeout?: number\n  priority?: 'high' | 'low'\n  transitionStatus?: 'starting' | 'ending'\n  limited?: boolean\n  height?: number\n  onClose?: () => void\n  onRemove?: () => void\n  actionProps?: Omit<\n    DetailedHTMLProps<\n      ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >,\n    'ref'\n  >\n  data?: any\n}"
+      "detailedType": "id: string\n  ref?: RefObject<HTMLElement | null>\n  title?: ReactNode\n  type?: string\n  description?: ReactNode\n  timeout?: number\n  priority?: 'high' | 'low'\n  transitionStatus?: 'starting' | 'ending'\n  limited?: boolean\n  height?: number\n  onClose?: () => void\n  onRemove?: () => void\n  actionProps?: Omit<\n    DetailedHTMLProps<\n      ButtonHTMLAttributes<HTMLButtonElement>,\n      HTMLButtonElement\n    >,\n    'ref'\n  >\n  positionerProps?: Toast.Positioner.Options\n  data?: any\n}"
     },
     "className": {
       "type": "string | ((state: Toast.Root.State) => string | undefined)",