@workday/canvas-kit-docs 9.0.8 → 9.0.10

package/dist/es6/lib/docs.js

@@ -117794,6 +117794,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "bottom"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/PopupPopper.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "popperOptions",
@@ -118054,7 +118075,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "typeParameters": [
               {
                 "kind": "symbol",
-                "name": "PopperJS.Instance",
+                "name": "Instance",
                 "value": "Instance"
               }
             ]
@@ -149275,6 +149296,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "bottom"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "onPlacementChange",
@@ -149376,7 +149418,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "typeParameters": [
               {
                 "kind": "symbol",
-                "name": "PopperJS.Instance",
+                "name": "Instance",
                 "value": "Instance"
               }
             ]
@@ -178327,6 +178369,81 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "Placement",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "Placement",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "type",
+      "typeParameters": [],
+      "value": {
+        "kind": "symbol",
+        "name": "PopperJSPlacement",
+        "value": "Placement"
+      }
+    }
+  },
+  {
+    "name": "Options",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "Options",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "object",
+      "properties": [
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": true,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ]
+    }
+  },
+  {
+    "name": "fallbackPlacementsModifier",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "fallbackPlacementsModifier",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/fallbackPlacements.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "symbol",
+      "name": "name"
+    }
+  },
   {
     "name": "getTransformFromPlacement",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/getTransformFromPlacement.ts",
@@ -181491,69 +181608,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "kind": "type",
       "typeParameters": [],
       "value": {
-        "kind": "union",
-        "value": [
-          {
-            "kind": "string",
-            "value": "auto"
-          },
-          {
-            "kind": "string",
-            "value": "left"
-          },
-          {
-            "kind": "string",
-            "value": "right"
-          },
-          {
-            "kind": "string",
-            "value": "top"
-          },
-          {
-            "kind": "string",
-            "value": "bottom"
-          },
-          {
-            "kind": "string",
-            "value": "auto-start"
-          },
-          {
-            "kind": "string",
-            "value": "auto-end"
-          },
-          {
-            "kind": "string",
-            "value": "top-start"
-          },
-          {
-            "kind": "string",
-            "value": "top-end"
-          },
-          {
-            "kind": "string",
-            "value": "bottom-start"
-          },
-          {
-            "kind": "string",
-            "value": "bottom-end"
-          },
-          {
-            "kind": "string",
-            "value": "right-start"
-          },
-          {
-            "kind": "string",
-            "value": "right-end"
-          },
-          {
-            "kind": "string",
-            "value": "left-start"
-          },
-          {
-            "kind": "string",
-            "value": "left-end"
-          }
-        ]
+        "kind": "symbol",
+        "name": "PopperJSPlacement",
+        "value": "Placement"
       }
     }
   },
@@ -181573,11 +181630,31 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "typeParameters": [],
       "value": {
         "kind": "symbol",
-        "name": "PopperJS.Options",
+        "name": "Options",
         "value": "Options"
       }
     }
   },
+  {
+    "name": "defaultFallbackPlacements",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "defaultFallbackPlacements",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "array",
+      "value": {
+        "kind": "symbol",
+        "name": "Placement",
+        "value": "Placement"
+      }
+    }
+  },
   {
     "name": "PopperProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx",
@@ -181792,6 +181869,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "bottom"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "onPlacementChange",
@@ -181893,7 +181991,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "typeParameters": [
               {
                 "kind": "symbol",
-                "name": "PopperJS.Instance",
+                "name": "Instance",
                 "value": "Instance"
               }
             ]
@@ -183366,6 +183464,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "bottom"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/PopupPopper.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "popperOptions",
@@ -183626,7 +183745,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "typeParameters": [
               {
                 "kind": "symbol",
-                "name": "PopperJS.Instance",
+                "name": "Instance",
                 "value": "Instance"
               }
             ]
@@ -193522,6 +193641,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "default": "bottom"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "onPlacementChange",
@@ -193619,7 +193759,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "typeParameters": [
               {
                 "kind": "symbol",
-                "name": "PopperJS.Instance",
+                "name": "Instance",
                 "value": "Instance"
               }
             ]
@@ -193853,6 +193993,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "bottom"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "onPlacementChange",
@@ -193954,7 +194115,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "typeParameters": [
               {
                 "kind": "symbol",
-                "name": "PopperJS.Instance",
+                "name": "Instance",
                 "value": "Instance"
               }
             ]
@@ -232057,6 +232218,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "string",
             "value": "top"
           }
+        },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/OverflowTooltip.tsx"
+            }
+          ],
+          "tags": {}
         }
       ]
     }
@@ -232159,6 +232341,27 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "top"
           }
         },
+        {
+          "kind": "property",
+          "name": "fallbackPlacements",
+          "required": false,
+          "type": {
+            "kind": "array",
+            "value": {
+              "kind": "symbol",
+              "name": "Placement",
+              "value": "Placement"
+            }
+          },
+          "description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
+          "declarations": [
+            {
+              "name": "fallbackPlacements",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tooltip/lib/Tooltip.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "type",

package/dist/es6/lib/specs.js

@@ -1801,6 +1801,70 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Dialog.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Popup",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Testing/Popups/Dialog, DialogWithFallbackPlacements] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "check the fallback placements",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to bottom",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: top"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to top",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to right",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: left"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to right",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "ExpandableContainer.spec.ts",
@@ -2157,6 +2221,48 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Testing/Popups/Menu, MenuWithFallbackPlacements] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "check the fallback placements",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to top",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to right",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: left"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to right",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
       }
@@ -3455,6 +3561,48 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Testing/Popups/Popup, PopupWithFallbackPlacements] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "check the fallback placements",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to top",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to right",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: left"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to right",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
       }
@@ -7625,6 +7773,48 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Testing/Popups/Tooltip, TooltipWithFallbackPlacements] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "check the fallback placements",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to top",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to left",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: right"
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the preferred placement is set to left",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should show the fallback placement: bottom"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
       }

package/dist/mdx/react/_examples/MediaModal.mdx

@@ -0,0 +1,9 @@
+import Basic from './examples/MediaModal';
+
+
+## Media Modal example
+
+These are modals that have an image or video as the primary content. The example can use a special
+`MediaContainer` component that allows for media to take up more space in the Modal.
+
+<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/examples/MediaModal.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import {Modal} from '@workday/canvas-kit-react/modal';
+import {Box, BoxProps, Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+const MediaImage = createComponent('img')({
+  displayName: 'Media.Image',
+  Component: (elemProps: React.ImgHTMLAttributes<HTMLImageElement>, ref, Element) => {
+    const [loaded, setLoaded] = React.useState(false);
+
+    return (
+      <Box
+        as={Element}
+        ref={ref}
+        display="block"
+        backgroundColor="frenchVanilla200"
+        transition="opacity ease 200ms"
+        width="100%"
+        height={293}
+        style={{opacity: loaded ? 1 : 0}}
+        onLoad={() => setLoaded(true)}
+        {...elemProps}
+      />
+    );
+  },
+});
+
+const Media = createComponent('div')({
+  displayName: 'Media',
+  subComponents: {Image: MediaImage},
+  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
+    return (
+      <Box
+        as={Element}
+        ref={ref}
+        width={`calc(100% + ${spaceNumbers.l * 2}px)`}
+        marginLeft={`-${spaceNumbers.l}px`}
+        marginTop="m"
+        marginBottom="s"
+        {...elemProps}
+      >
+        {children}
+      </Box>
+    );
+  },
+});
+
+export default () => {
+  return (
+    <Modal>
+      <Modal.Target>Open Media Modal</Modal.Target>
+      <Modal.Overlay>
+        <Modal.Card>
+          <Modal.CloseIcon aria-label="Close" size="small" />
+          <Media>
+            <Media.Image
+              src="https://www.theuiaa.org/wp-content/uploads/2017/11/RTM19-banner-web.jpg"
+              alt="Sunrise in the mountains"
+            />
+          </Media>
+          <Modal.Heading>TED's Secret to Public Speaking</Modal.Heading>
+          <Modal.Body>
+            <Text as="p" marginTop={0} marginBottom="m">
+              The secret to great public speaking, according to former actor Martin Danielson, is as
+              simple as one, two, three.
+            </Text>
+            <Flex gap="s">
+              <Modal.CloseButton as={PrimaryButton}>Learn More</Modal.CloseButton>
+            </Flex>
+          </Modal.Body>
+        </Modal.Card>
+      </Modal.Overlay>
+    </Modal>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.8",
+  "version": "9.0.10",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^9.0.8",
-    "@workday/canvas-kit-preview-react": "^9.0.8",
-    "@workday/canvas-kit-react": "^9.0.8",
+    "@workday/canvas-kit-labs-react": "^9.0.10",
+    "@workday/canvas-kit-preview-react": "^9.0.10",
+    "@workday/canvas-kit-react": "^9.0.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
@@ -57,5 +57,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "e0f80f6255d61eceeb79932d6a1bae3d9adeffdc"
+  "gitHead": "8fa72860c376f39967e95014afe43664f55d1683"
 }