npm - @workday/canvas-kit-docs - Versions diffs - 12.0.0 → 12.0.1 - Mend

@workday/canvas-kit-docs 12.0.0 → 12.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/es6/lib/docs.js +281 -269
package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +1 -1
package/dist/mdx/9.0-UPGRADE-GUIDE.mdx +1 -1
package/dist/mdx/react/_examples/mdx/FormsWithFormik.mdx +9 -0
package/dist/mdx/react/_examples/mdx/examples/Density.tsx +111 -39
package/package.json +6 -6
package/dist/mdx/preview-react/_examples/mdx/FormsWithFormik.mdx +0 -14
/package/dist/mdx/{preview-react → react}/_examples/mdx/examples/SelectWithFormik.tsx +0 -0

package/dist/es6/lib/docs.js CHANGED Viewed

@@ -226058,116 +226058,176 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "SelectInputProps",
+    "name": "SelectProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "SelectInputProps",
+        "name": "SelectProps",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
       }
     ],
     "tags": {},
     "type": {
       "kind": "alias",
-      "name": "SelectInput"
+      "name": "Select"
     }
   },
   {
-    "name": "SelectInput",
+    "name": "Select",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx",
-    "description": "",
+    "description": "Use `Select` to allow users to choose an option from a list or type characters to select a matching option.\n\n**Note: `Select` must wrap `FormField` and `FormField` must wrap all `Select` children to ensure proper accessibility. **\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n   <Select.Input onChange={e => handleChange(e)} id=\"contact-select\" />\n   <Select.Popper>\n     <Select.Card>\n       <Select.List>\n         {item => <Select.Item>{item.id}</Select.Item>}\n       </Select.List>\n     </Select.Card>\n     </Select.Popper>\n   </FormField>\n</Select>\n```",
     "declarations": [
       {
-        "name": "SelectInput",
+        "name": "Select",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
       }
     ],
     "tags": {},
     "type": {
       "kind": "enhancedComponent",
-      "componentType": "subcomponent",
-      "elemPropsHook": "useSelectInput",
+      "componentType": "container",
+      "displayName": "Select",
       "props": [
         {
           "kind": "property",
-          "name": "inputStartIcon",
-          "required": false,
+          "name": "children",
+          "required": true,
           "type": {
-            "kind": "symbol",
-            "name": "CanvasSystemIcon",
-            "value": "CanvasSystemIcon"
+            "kind": "external",
+            "name": "ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
           },
-          "description": "The Icon to render at the start of the `input`. Use this prop if your options\ninclude icons that you would like to render in the `input` when selected.\n** Note:An option must be selected in order to render and icon.**",
+          "description": "Children of the `Combobox`. Should contain a `Combobox.Input` and a `Combobox.Menu`",
           "declarations": [
             {
-              "name": "inputStartIcon",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
+              "name": "children",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/combobox/lib/Combobox.tsx"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "error",
-          "required": false,
+          "name": "model",
+          "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
+          "tags": {},
+          "declarations": [],
           "type": {
             "kind": "symbol",
-            "name": "ErrorType",
-            "value": "ErrorType"
-          },
-          "description": "The type of error associated with the TextInput (if applicable).",
-          "declarations": [
-            {
-              "name": "error",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.tsx"
-            }
-          ],
-          "tags": {}
+            "name": "SelectModel"
+          }
         },
         {
           "kind": "property",
-          "name": "width",
-          "required": false,
+          "name": "elemPropsHook",
+          "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
+          "tags": {},
+          "declarations": [],
           "type": {
-            "kind": "union",
-            "value": [
+            "kind": "function",
+            "parameters": [
               {
-                "kind": "primitive",
-                "value": "number"
+                "kind": "parameter",
+                "description": "",
+                "tags": {},
+                "declarations": [],
+                "name": "model",
+                "type": {
+                  "kind": "symbol",
+                  "name": "SelectModel"
+                },
+                "required": true
               },
               {
-                "kind": "primitive",
-                "value": "string"
+                "kind": "parameter",
+                "description": "",
+                "tags": {},
+                "declarations": [],
+                "name": "elemProps",
+                "type": {
+                  "kind": "generic",
+                  "name": "TProps"
+                }
               }
-            ]
-          },
-          "description": "The width of the TextInput.",
+            ],
+            "returnType": {
+              "kind": "external",
+              "name": "HTML Attributes",
+              "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
+            }
+          }
+        }
+      ],
+      "model": "SelectModel",
+      "subComponents": [
+        {
+          "name": "Input",
+          "symbol": "SelectInput",
+          "description": "`Select.Input` renders a {@link ComboboxMenu Combobox.Input} that handles keyboard navigation and interaction defined by [WAI](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).\nThis component can either be [controlled or uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).\n\n```tsx\n<Select items={options}>\n  <FormField label=\"Contact\">\n    <Select.Input onChange={(event) => handleChange(event)}>\n    ...\n  </FormField>\n</Select>\n```",
           "declarations": [
             {
-              "name": "width",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.tsx"
+              "name": "Input",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
+            },
+            {
+              "name": "SelectInput",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectInput.tsx"
             }
           ],
           "tags": {}
         },
         {
-          "kind": "property",
-          "name": "grow",
-          "required": false,
-          "type": {
-            "kind": "primitive",
-            "value": "boolean"
-          },
-          "description": "True if the component should grow to its container's width. False otherwise.",
+          "name": "Card",
+          "symbol": "SelectCard",
+          "description": "`Select.Card` renders a {@link ComboboxCard Combobox.Card}. You have access to all `Card` props.\n\n**Note: The card will be the width of its corresponding `Select.Input`**.\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n   <Select.Input onChange={(event) => handleChange(event)}>\n   <Select.Popper>\n     <Select.Card>\n       ...\n     </Select.Card>\n   </Select.Popper>\n </FormField>\n</Select>\n```",
           "declarations": [
             {
-              "name": "grow",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
+              "name": "Card",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
+            },
+            {
+              "name": "SelectCard",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectCard.tsx"
             }
           ],
           "tags": {}
         },
+        {
+          "name": "Item",
+          "symbol": "SelectItem",
+          "description": "`Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n   <Select.Input onChange={(event) => handleChange(event)}>\n     <Select.Popper>\n       <Select.Card>\n         <Select.List>\n           {(item) => <Select.Item><Select.Item.Icon icon={icon} />{item}</Select.Item>}\n         </Select.List\n       </Select.Card>\n     </Select.Popper>\n </FormField>\n</Select>\n```",
+          "declarations": [
+            {
+              "name": "Item",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
+            },
+            {
+              "name": "SelectItem",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectItem.tsx"
+            }
+          ],
+          "tags": {}
+        }
+      ]
+    }
+  },
+  {
+    "name": "SelectCard",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectCard.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "SelectCard",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectCard.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "enhancedComponent",
+      "componentType": "subcomponent",
+      "elemPropsHook": "useSelectCard",
+      "props": [
         {
           "kind": "property",
           "name": "cs",
@@ -226210,8 +226270,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
           },
           "defaultValue": {
-            "kind": "symbol",
-            "name": "TextInput"
+            "kind": "external",
+            "name": "div",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
           }
         },
         {
@@ -226230,8 +226291,9 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "name": "R",
                 "required": true,
                 "defaultValue": {
-                  "kind": "symbol",
-                  "name": "TextInput"
+                  "kind": "external",
+                  "name": "div",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
                 }
               }
             ]
@@ -226290,111 +226352,172 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         }
       ],
       "baseElement": {
+        "kind": "external",
+        "name": "div",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+      },
+      "styleComponent": {
         "kind": "symbol",
-        "name": "TextInput"
+        "name": "Box"
       },
       "model": "SelectModel"
     }
   },
   {
-    "name": "SelectItem",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx",
+    "name": "SelectInputProps",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectInput.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "SelectItem",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
+        "name": "SelectInputProps",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectInput.tsx"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "alias",
+      "name": "SelectInput"
+    }
+  },
+  {
+    "name": "SelectInput",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectInput.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "SelectInput",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectInput.tsx"
       }
     ],
     "tags": {},
     "type": {
       "kind": "enhancedComponent",
       "componentType": "subcomponent",
+      "elemPropsHook": "useSelectInput",
       "props": [
         {
           "kind": "property",
-          "name": "index",
+          "name": "inputStartIcon",
           "required": false,
           "type": {
-            "kind": "primitive",
-            "value": "number"
+            "kind": "symbol",
+            "name": "CanvasSystemIcon",
+            "value": "CanvasSystemIcon"
           },
-          "description": "Optionally pass index to menu item. This should be done if `Menu.Item` components were created\nvia a `Array::map` function. This index will ensure keyboard navigation works even if items are\ninserted out of order.",
+          "description": "The Icon to render at the start of the `input`. Use this prop if your options\ninclude icons that you would like to render in the `input` when selected.\n** Note:An option must be selected in order to render and icon.**",
           "declarations": [
             {
-              "name": "index",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+              "name": "inputStartIcon",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectInput.tsx"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "children",
+          "name": "error",
           "required": false,
           "type": {
-            "kind": "external",
-            "name": "ReactNode",
-            "url": "https://reactjs.org/docs/rendering-elements.html"
+            "kind": "symbol",
+            "name": "ErrorType",
+            "value": "ErrorType"
           },
-          "description": "The label text of the MenuOption.",
+          "description": "The type of error associated with the TextInput (if applicable).",
           "declarations": [
             {
-              "name": "children",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+              "name": "error",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.tsx"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "data-id",
+          "name": "width",
           "required": false,
           "type": {
-            "kind": "primitive",
-            "value": "string"
+            "kind": "union",
+            "value": [
+              {
+                "kind": "primitive",
+                "value": "number"
+              },
+              {
+                "kind": "primitive",
+                "value": "string"
+              }
+            ]
           },
-          "description": "The name of the menu item. This name will be used in the `onSelect` callback in the model. If\nthis property is not provided, it will default to a string representation of the the zero-based\nindex of the Tab when it was initialized.",
+          "description": "The width of the TextInput.",
           "declarations": [
             {
-              "name": "data-id",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+              "name": "width",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/text-input/lib/TextInput.tsx"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "aria-disabled",
+          "name": "grow",
           "required": false,
           "type": {
             "kind": "primitive",
             "value": "boolean"
           },
-          "description": "`aria-disabled` is used for keyboard and screen reader users to discover disabled content with\nthe keyboard or screen reader caret tool. For more information, see\nhttps://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls",
+          "description": "True if the component should grow to its container's width. False otherwise.",
           "declarations": [
             {
-              "name": "aria-disabled",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+              "name": "grow",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/types.ts"
             }
           ],
           "tags": {}
         },
         {
           "kind": "property",
-          "name": "as",
-          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
-          "tags": {},
-          "declarations": [],
+          "name": "cs",
+          "required": false,
           "type": {
-            "kind": "external",
+            "kind": "symbol",
+            "name": "CSToPropsInput",
+            "value": "CSToPropsInput"
+          },
+          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "declarations": [
+            {
+              "name": "cs",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "children",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.ReactNode",
+            "url": "https://reactjs.org/docs/rendering-elements.html"
+          }
+        },
+        {
+          "kind": "property",
+          "name": "as",
+          "description": "Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element.\n\n**Note:** Not all elements make sense and some elements may cause accessibility issues. Change this value with care.",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
             "name": "React.ElementType",
             "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
           },
           "defaultValue": {
-            "kind": "external",
-            "name": "li",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"
+            "kind": "symbol",
+            "name": "TextInput"
           }
         },
         {
@@ -226413,9 +226536,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "name": "R",
                 "required": true,
                 "defaultValue": {
-                  "kind": "external",
-                  "name": "li",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"
+                  "kind": "symbol",
+                  "name": "TextInput"
                 }
               }
             ]
@@ -226474,44 +226596,40 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         }
       ],
       "baseElement": {
-        "kind": "external",
-        "name": "li",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"
+        "kind": "symbol",
+        "name": "TextInput"
       },
-      "subComponents": [],
       "model": "SelectModel"
     }
   },
   {
-    "name": "SelectCard",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx",
+    "name": "SelectItem",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectItem.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "SelectCard",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
+        "name": "SelectItem",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/SelectItem.tsx"
       }
     ],
     "tags": {},
     "type": {
       "kind": "enhancedComponent",
       "componentType": "subcomponent",
-      "elemPropsHook": "useSelectCard",
       "props": [
         {
           "kind": "property",
-          "name": "cs",
+          "name": "index",
           "required": false,
           "type": {
-            "kind": "symbol",
-            "name": "CSToPropsInput",
-            "value": "CSToPropsInput"
+            "kind": "primitive",
+            "value": "number"
           },
-          "description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles}, or the result of {@link createVars} and\n{@link createModifiers}. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp} wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles } instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n   {...handleCsProp(elemProps, [\n     myStyles,\n     myModifiers({ size: 'medium' }),\n     myVars({ backgroundColor: 'red' })\n   ])}\n >\n   {children}\n </Element>\n)\n```",
+          "description": "Optionally pass index to menu item. This should be done if `Menu.Item` components were created\nvia a `Array::map` function. This index will ensure keyboard navigation works even if items are\ninserted out of order.",
           "declarations": [
             {
-              "name": "cs",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
+              "name": "index",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
             }
           ],
           "tags": {}
@@ -226519,14 +226637,54 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         {
           "kind": "property",
           "name": "children",
-          "description": "",
-          "tags": {},
-          "declarations": [],
+          "required": false,
           "type": {
             "kind": "external",
-            "name": "React.ReactNode",
+            "name": "ReactNode",
             "url": "https://reactjs.org/docs/rendering-elements.html"
-          }
+          },
+          "description": "The label text of the MenuOption.",
+          "declarations": [
+            {
+              "name": "children",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "data-id",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "description": "The name of the menu item. This name will be used in the `onSelect` callback in the model. If\nthis property is not provided, it will default to a string representation of the the zero-based\nindex of the Tab when it was initialized.",
+          "declarations": [
+            {
+              "name": "data-id",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+            }
+          ],
+          "tags": {}
+        },
+        {
+          "kind": "property",
+          "name": "aria-disabled",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "`aria-disabled` is used for keyboard and screen reader users to discover disabled content with\nthe keyboard or screen reader caret tool. For more information, see\nhttps://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_disabled_controls",
+          "declarations": [
+            {
+              "name": "aria-disabled",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/menu/lib/MenuOption.tsx"
+            }
+          ],
+          "tags": {}
         },
         {
           "kind": "property",
@@ -226541,8 +226699,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           "defaultValue": {
             "kind": "external",
-            "name": "div",
-            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+            "name": "li",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"
           }
         },
         {
@@ -226562,8 +226720,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
                 "required": true,
                 "defaultValue": {
                   "kind": "external",
-                  "name": "div",
-                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
+                  "name": "li",
+                  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"
                 }
               }
             ]
@@ -226623,159 +226781,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ],
       "baseElement": {
         "kind": "external",
-        "name": "div",
-        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div"
-      },
-      "styleComponent": {
-        "kind": "symbol",
-        "name": "Box"
+        "name": "li",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li"
       },
+      "subComponents": [],
       "model": "SelectModel"
     }
   },
-  {
-    "name": "SelectProps",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx",
-    "description": "",
-    "declarations": [
-      {
-        "name": "SelectProps",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "alias",
-      "name": "Select"
-    }
-  },
-  {
-    "name": "Select",
-    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx",
-    "description": "Use `Select` to allow users to choose an option from a list or type characters to select a matching option.\n\n**Note: `Select` must wrap `FormField` and `FormField` must wrap all `Select` children to ensure proper accessibility. **\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n   <Select.Input onChange={e => handleChange(e)} id=\"contact-select\" />\n   <Select.Popper>\n     <Select.Card>\n       <Select.List>\n         {item => <Select.Item>{item.id}</Select.Item>}\n       </Select.List>\n     </Select.Card>\n     </Select.Popper>\n   </FormField>\n</Select>\n```",
-    "declarations": [
-      {
-        "name": "Select",
-        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
-      }
-    ],
-    "tags": {},
-    "type": {
-      "kind": "enhancedComponent",
-      "componentType": "container",
-      "displayName": "Select",
-      "props": [
-        {
-          "kind": "property",
-          "name": "children",
-          "required": true,
-          "type": {
-            "kind": "external",
-            "name": "ReactNode",
-            "url": "https://reactjs.org/docs/rendering-elements.html"
-          },
-          "description": "Children of the `Combobox`. Should contain a `Combobox.Input` and a `Combobox.Menu`",
-          "declarations": [
-            {
-              "name": "children",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/combobox/lib/Combobox.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "kind": "property",
-          "name": "model",
-          "description": "Optional model to pass to the component. This will override the default model created for the component. This can be useful if you want to access to the state and events of the model, or if you have nested components of the same type and you need to override the model provided by React Context.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "symbol",
-            "name": "SelectModel"
-          }
-        },
-        {
-          "kind": "property",
-          "name": "elemPropsHook",
-          "description": "Optional hook that receives the model and all props to be applied to the element. If you use this, it is your responsibility to return props, merging as appropriate. For example, returning an empty object will disable all elemProps hooks associated with this component. This allows finer control over a component without creating a new one.",
-          "tags": {},
-          "declarations": [],
-          "type": {
-            "kind": "function",
-            "parameters": [
-              {
-                "kind": "parameter",
-                "description": "",
-                "tags": {},
-                "declarations": [],
-                "name": "model",
-                "type": {
-                  "kind": "symbol",
-                  "name": "SelectModel"
-                },
-                "required": true
-              },
-              {
-                "kind": "parameter",
-                "description": "",
-                "tags": {},
-                "declarations": [],
-                "name": "elemProps",
-                "type": {
-                  "kind": "generic",
-                  "name": "TProps"
-                }
-              }
-            ],
-            "returnType": {
-              "kind": "external",
-              "name": "HTML Attributes",
-              "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes"
-            }
-          }
-        }
-      ],
-      "model": "SelectModel",
-      "subComponents": [
-        {
-          "name": "Input",
-          "symbol": "SelectInput",
-          "description": "`Select.Input` renders a {@link ComboboxMenu Combobox.Input} that handles keyboard navigation and interaction defined by [WAI](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).\nThis component can either be [controlled or uncontrolled](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).\n\n```tsx\n<Select items={options}>\n  <FormField label=\"Contact\">\n    <Select.Input onChange={(event) => handleChange(event)}>\n    ...\n  </FormField>\n</Select>\n```",
-          "declarations": [
-            {
-              "name": "Input",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "name": "Card",
-          "symbol": "SelectCard",
-          "description": "`Select.Card` renders a {@link ComboboxCard Combobox.Card}. You have access to all `Card` props.\n\n**Note: The card will be the width of its corresponding `Select.Input`**.\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n   <Select.Input onChange={(event) => handleChange(event)}>\n   <Select.Popper>\n     <Select.Card>\n       ...\n     </Select.Card>\n   </Select.Popper>\n </FormField>\n</Select>\n```",
-          "declarations": [
-            {
-              "name": "Card",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
-            }
-          ],
-          "tags": {}
-        },
-        {
-          "name": "Item",
-          "symbol": "SelectItem",
-          "description": "`Select.Item` renders a {@link ComboboxMenuItem Combobox.Menu.Item} with aria role of `option`. You can optionally render a `Icon`.\n\n```tsx\n<Select items={options}>\n <FormField label=\"Your Label\">\n   <Select.Input onChange={(event) => handleChange(event)}>\n     <Select.Popper>\n       <Select.Card>\n         <Select.List>\n           {(item) => <Select.Item><Select.Item.Icon icon={icon} />{item}</Select.Item>}\n         </Select.List\n       </Select.Card>\n     </Select.Popper>\n </FormField>\n</Select>\n```",
-          "declarations": [
-            {
-              "name": "Item",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/select/lib/Select.tsx"
-            }
-          ],
-          "tags": {}
-        }
-      ]
-    }
-  },
   {
     "name": "SidePanelProps",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/side-panel/lib/SidePanel.tsx",

package/dist/mdx/11.0-UPGRADE-GUIDE.mdx CHANGED Viewed

@@ -78,7 +78,7 @@ automatically update your code to work with most of the breaking changes in v11.
 handled by the codemod are marked with 🤖 in the Upgrade Guide.**
 A codemod is a script that makes programmatic transformations on your codebase by traversing the
-[AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
+[AST](https://www.hypermod.io/docs/guides/understanding-asts), identifying patterns, and making
 prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
 updates, which allows you to focus on changes that need your attention. **We highly recommend you
 use the codemod for these reasons.**

package/dist/mdx/9.0-UPGRADE-GUIDE.mdx CHANGED Viewed

@@ -39,7 +39,7 @@ automatically update your code to work with most of the breaking changes in v9.
 handled by the codemod are marked with 🤖 in the Upgrade Guide.**
 A codemod is a script that makes programmatic transformations on your codebase by traversing the
-[AST](https://www.codeshiftcommunity.com/docs/understanding-asts), identifying patterns, and making
+[AST](https://www.hypermod.io/docs/guides/understanding-asts), identifying patterns, and making
 prescribed changes. This greatly decreases opportunities for error and reduces the number of manual
 updates, which allows you to focus on changes that need your attention. **We highly recommend you
 use the codemod for these reasons.**

package/dist/mdx/react/_examples/mdx/FormsWithFormik.mdx ADDED Viewed

@@ -0,0 +1,9 @@
+import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import SelectWithFormik from './examples/SelectWithFormik';
+# Canvas Kit Examples
+## Select Using Formik
+<ExampleCodeBlock code={SelectWithFormik} />

package/dist/mdx/react/_examples/mdx/examples/Density.tsx CHANGED Viewed

@@ -17,7 +17,6 @@ const formStyles = createStyles({
 const formFieldGroupListStyles = createStyles({
   display: 'inline-flex',
   flexDirection: 'row',
-  padding: system.space.zero,
   flexWrap: 'wrap',
 });
@@ -109,13 +108,50 @@ const formFieldStencil = createStencil({
         gap: system.space.x2,
       },
     },
+    labelOrientation: {
+      horizontalStart: {},
+      horizontalEnd: {},
+      vertical: {},
+    },
   },
-});
-const creditCardInputStyles = createStyles({
-  width: calc.add(system.space.x10, system.space.x10),
-  minWidth: calc.add(system.space.x10, system.space.x10),
-  textAlign: 'center',
+  compound: [
+    {
+      modifiers: {labelOrientation: 'horizontalStart', density: 'high'},
+      styles: {
+        gap: system.space.x4,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalStart', density: 'medium'},
+      styles: {
+        gap: system.space.x6,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalStart', density: 'low'},
+      styles: {
+        gap: system.space.x8,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalEnd', density: 'high'},
+      styles: {
+        gap: system.space.x4,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalEnd', density: 'medium'},
+      styles: {
+        gap: system.space.x6,
+      },
+    },
+    {
+      modifiers: {labelOrientation: 'horizontalEnd', density: 'low'},
+      styles: {
+        gap: system.space.x8,
+      },
+    },
+  ],
 });
 const selectStencil = createStencil({
@@ -167,6 +203,15 @@ const inputStencil = createStencil({
   },
 });
+const creditCardInputStencil = createStencil({
+  extends: inputStencil,
+  base: {
+    width: calc.add(system.space.x10, system.space.x10),
+    minWidth: calc.add(system.space.x10, system.space.x10),
+    textAlign: 'center',
+  },
+});
 const flexContainerStencil = createStencil({
   base: {
     display: 'flex',
@@ -283,7 +328,7 @@ export default () => {
             <FormField
               orientation={labelOrientation}
               grow
-              cs={formFieldStencil({density})}
+              cs={formFieldStencil({density, labelOrientation})}
               id="foo"
             >
               <FormField.Label>Choose Country</FormField.Label>
@@ -300,67 +345,94 @@ export default () => {
                 </Select.Popper>
               </Select>
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Full Name</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Phone Number</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Street Address</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
-            <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              grow
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>City</FormField.Label>
               <FormField.Input as={TextInput} cs={inputStencil({density})} />
             </FormField>
             <div {...sideBySideInputs({labelOrientation: labelOrientation, density})}>
-              <FormField grow orientation={labelOrientation} cs={formFieldStencil({density})}>
+              <FormField
+                grow
+                orientation={labelOrientation}
+                cs={formFieldStencil({density, labelOrientation})}
+              >
                 <FormField.Label>State</FormField.Label>
                 <FormField.Input as={TextInput} cs={inputStencil({density})} />
               </FormField>
               <FormField
                 grow
                 orientation={labelOrientation}
-                cs={[formFieldStencil({density}), zipCodeContainerStyles]}
+                cs={[formFieldStencil({density, labelOrientation}), zipCodeContainerStyles]}
               >
                 <FormField.Label>Zip Code</FormField.Label>
                 <FormField.Input cs={[inputStencil({density}), zipCodeInput]} as={TextInput} />
               </FormField>
             </div>
-            <FormField orientation={labelOrientation} cs={formFieldStencil({density})}>
+            <FormField
+              orientation={labelOrientation}
+              cs={formFieldStencil({density, labelOrientation})}
+            >
               <FormField.Label>Enable Fast Shipping</FormField.Label>
               <FormField.Field>
                 <FormField.Input as={Switch} />
               </FormField.Field>
             </FormField>
-            <FormFieldGroup cs={formFieldStencil({density})} orientation={labelOrientation}>
+            <FormFieldGroup
+              cs={formFieldStencil({density, labelOrientation})}
+              orientation={labelOrientation}
+            >
               <FormFieldGroup.Label>Credit Card</FormFieldGroup.Label>
-              <FormFieldGroup.List cs={formFieldGroupListStyles}>
-                <FormFieldGroup.Input
-                  as={TextInput}
-                  placeholder="XXXX"
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                />
-                <FormFieldGroup.Input
-                  as={TextInput}
-                  placeholder="XXXX"
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                />
-                <FormFieldGroup.Input
-                  as={TextInput}
-                  placeholder="XXXX"
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                />
-                <FormFieldGroup.Input
-                  cs={[inputStencil({density}), creditCardInputStyles]}
-                  placeholder="XXXX"
-                  as={TextInput}
-                />
-              </FormFieldGroup.List>
+              <FormFieldGroup.Field>
+                <FormFieldGroup.List cs={formFieldGroupListStyles}>
+                  <FormFieldGroup.Input
+                    as={TextInput}
+                    placeholder="XXXX"
+                    cs={creditCardInputStencil({density})}
+                  />
+                  <FormFieldGroup.Input
+                    as={TextInput}
+                    placeholder="XXXX"
+                    cs={creditCardInputStencil({density})}
+                  />
+                  <FormFieldGroup.Input
+                    as={TextInput}
+                    placeholder="XXXX"
+                    cs={creditCardInputStencil({density})}
+                  />
+                  <FormFieldGroup.Input
+                    cs={creditCardInputStencil({density})}
+                    placeholder="XXXX"
+                    as={TextInput}
+                  />
+                </FormFieldGroup.List>
+              </FormFieldGroup.Field>
             </FormFieldGroup>
           </div>
         </form>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0",
+  "version": "12.0.1",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0",
-    "@workday/canvas-kit-react": "^12.0.0",
-    "@workday/canvas-kit-styling": "^12.0.0",
+    "@workday/canvas-kit-labs-react": "^12.0.1",
+    "@workday/canvas-kit-preview-react": "^12.0.1",
+    "@workday/canvas-kit-react": "^12.0.1",
+    "@workday/canvas-kit-styling": "^12.0.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "b7605cd0991ae1f46da537001ae6a26a811bcdb0"
+  "gitHead": "6350b962eb767056c20a7ea0a8a74a8a924b6e73"
 }

package/dist/mdx/preview-react/_examples/mdx/FormsWithFormik.mdx DELETED Viewed

@@ -1,14 +0,0 @@
-import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
-import SelectWithFormik from './examples/SelectWithFormik';
-import TextInputWithFormik from './examples/TextInputWithFormik';
-# Canvas Kit Examples
-## Select Using Formik
-<ExampleCodeBlock code={SelectWithFormik} />
-## Controlled Text Inputs Using Formik
-<ExampleCodeBlock code={TextInputWithFormik} />

/package/dist/mdx/{preview-react → react}/_examples/mdx/examples/SelectWithFormik.tsx RENAMED Viewed

File without changes