|
| 1 | +{ |
| 2 | + "name": "ToastPositioner", |
| 3 | + "description": "Positions the toast against the anchor.\nRenders a `<div>` element.", |
| 4 | + "props": { |
| 5 | + "collisionAvoidance": { |
| 6 | + "type": "CollisionAvoidance", |
| 7 | + "description": "Determines how to handle collisions when positioning the popup.", |
| 8 | + "example": "```jsx\n<Positioner\n collisionAvoidance={{\n side: 'shift',\n align: 'shift',\n fallbackAxisSide: 'none',\n }}\n/>\n```", |
| 9 | + "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" |
| 10 | + }, |
| 11 | + "style": { |
| 12 | + "type": "CSSProperties | ((state: Toast.Positioner.State) => CSSProperties | undefined)", |
| 13 | + "detailedType": "| React.CSSProperties\n| ((\n state: Toast.Positioner.State,\n ) => CSSProperties | undefined)\n| undefined" |
| 14 | + }, |
| 15 | + "toast": { |
| 16 | + "type": "ToastObject<any>", |
| 17 | + "required": true, |
| 18 | + "description": "The toast object associated with the positioner.", |
| 19 | + "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}" |
| 20 | + }, |
| 21 | + "trigger": { |
| 22 | + "type": "Element | null", |
| 23 | + "description": "The trigger element for the toast. Falls back to the anchor element when not provided.", |
| 24 | + "detailedType": "Element | null | undefined" |
| 25 | + }, |
| 26 | + "align": { |
| 27 | + "type": "Align", |
| 28 | + "default": "'center'", |
| 29 | + "description": "How to align the popup relative to the specified side.", |
| 30 | + "detailedType": "'center' | 'end' | 'start' | undefined" |
| 31 | + }, |
| 32 | + "alignOffset": { |
| 33 | + "type": "number | OffsetFunction", |
| 34 | + "default": "0", |
| 35 | + "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.", |
| 36 | + "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```", |
| 37 | + "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" |
| 38 | + }, |
| 39 | + "side": { |
| 40 | + "type": "Side", |
| 41 | + "default": "'top'", |
| 42 | + "description": "Which side of the anchor element to align the toast against.\nMay automatically change to avoid collisions.", |
| 43 | + "detailedType": "| 'left'\n| 'right'\n| 'bottom'\n| 'top'\n| 'inline-end'\n| 'inline-start'\n| undefined" |
| 44 | + }, |
| 45 | + "sideOffset": { |
| 46 | + "type": "number | OffsetFunction", |
| 47 | + "default": "0", |
| 48 | + "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.", |
| 49 | + "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```", |
| 50 | + "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" |
| 51 | + }, |
| 52 | + "arrowPadding": { |
| 53 | + "type": "number", |
| 54 | + "default": "5", |
| 55 | + "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.", |
| 56 | + "detailedType": "number | undefined" |
| 57 | + }, |
| 58 | + "anchor": { |
| 59 | + "type": "Element | null", |
| 60 | + "description": "An element to position the toast against.", |
| 61 | + "detailedType": "Element | null | undefined" |
| 62 | + }, |
| 63 | + "collisionBoundary": { |
| 64 | + "type": "Boundary", |
| 65 | + "default": "'clipping-ancestors'", |
| 66 | + "description": "An element or a rectangle that delimits the area that the popup is confined to.", |
| 67 | + "detailedType": "| Element\n| 'clipping-ancestors'\n| Element[]\n| Rect\n| undefined" |
| 68 | + }, |
| 69 | + "collisionPadding": { |
| 70 | + "type": "Padding", |
| 71 | + "default": "5", |
| 72 | + "description": "Additional space to maintain from the edge of the collision boundary.", |
| 73 | + "detailedType": "| {\n top?: number\n right?: number\n bottom?: number\n left?: number\n }\n| number\n| undefined" |
| 74 | + }, |
| 75 | + "sticky": { |
| 76 | + "type": "boolean", |
| 77 | + "default": "false", |
| 78 | + "description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view.", |
| 79 | + "detailedType": "boolean | undefined" |
| 80 | + }, |
| 81 | + "positionMethod": { |
| 82 | + "type": "'fixed' | 'absolute'", |
| 83 | + "default": "'absolute'", |
| 84 | + "description": "Determines which CSS `position` property to use.", |
| 85 | + "detailedType": "'fixed' | 'absolute' | undefined" |
| 86 | + }, |
| 87 | + "trackAnchor": { |
| 88 | + "type": "boolean", |
| 89 | + "default": "true", |
| 90 | + "description": "Whether the popup tracks any layout shift of its positioning anchor.", |
| 91 | + "detailedType": "boolean | undefined" |
| 92 | + }, |
| 93 | + "className": { |
| 94 | + "type": "string | ((state: Toast.Positioner.State) => string | undefined)", |
| 95 | + "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state.", |
| 96 | + "detailedType": "| string\n| ((state: Toast.Positioner.State) => string | undefined)" |
| 97 | + }, |
| 98 | + "render": { |
| 99 | + "type": "ReactElement | ((props: HTMLProps, state: Toast.Positioner.State) => ReactElement)", |
| 100 | + "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.", |
| 101 | + "detailedType": "| ReactElement\n| ((\n props: HTMLProps,\n state: Toast.Positioner.State,\n ) => ReactElement)" |
| 102 | + } |
| 103 | + }, |
| 104 | + "dataAttributes": {}, |
| 105 | + "cssVariables": {} |
| 106 | +} |
0 commit comments