@workday/canvas-kit-docs 12.6.9 → 12.6.11

package/dist/es6/lib/docs.js

@@ -9772,6 +9772,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "componentType": "subcomponent",
       "elemPropsHook": "useMultiSelectedItem",
       "props": [
+        {
+          "kind": "property",
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "Disabled on the `Pill` component.",
+          "declarations": [
+            {
+              "name": "disabled",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectedItem.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "removeLabel",
@@ -9939,6 +9956,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "kind": "enhancedComponent",
       "componentType": "subcomponent",
       "props": [
+        {
+          "kind": "property",
+          "name": "disabled",
+          "required": false,
+          "type": {
+            "kind": "primitive",
+            "value": "boolean"
+          },
+          "description": "Disabled is forwarded to the MultiSelectedItem component to make sure each item is also\ndisabled.",
+          "declarations": [
+            {
+              "name": "disabled",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectedList.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "removeLabel",
@@ -10076,12 +10110,12 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "multiSelectStencil",
+    "name": "multiSelectInputStencil",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx",
     "description": "",
     "declarations": [
       {
-        "name": "multiSelectStencil",
+        "name": "multiSelectInputStencil",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
       }
     ],
@@ -10764,6 +10798,25 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "multiSelectStencil",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx",
+    "description": "",
+    "declarations": [
+      {
+        "name": "multiSelectStencil",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
+      }
+    ],
+    "tags": {
+      "deprecated": "use `multiSelectInputStencil` instead. This will be removed in a future version."
+    },
+    "type": {
+      "kind": "symbol",
+      "name": "multiSelectInputStencil",
+      "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
+    }
+  },
   {
     "name": "useMultiSelectInput",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx",
@@ -10917,6 +10970,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "componentType": "subcomponent",
       "elemPropsHook": "useMultiSelectInput",
       "props": [
+        {
+          "kind": "property",
+          "name": "error",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "ErrorType",
+            "value": "ErrorType"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "error",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",
@@ -11084,6 +11155,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       "componentType": "subcomponent",
       "elemPropsHook": "useMultiSelectInput",
       "props": [
+        {
+          "kind": "property",
+          "name": "error",
+          "required": false,
+          "type": {
+            "kind": "symbol",
+            "name": "ErrorType",
+            "value": "ErrorType"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "error",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/multi-select/lib/MultiSelectInput.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "12.6.9",
-    "@workday/canvas-kit-preview-react": "12.6.9",
-    "@workday/canvas-kit-react": "12.6.9",
-    "@workday/canvas-kit-react-fonts": "^12.6.9",
-    "@workday/canvas-kit-styling": "12.6.9",
+    "@workday/canvas-kit-labs-react": "12.6.11",
+    "@workday/canvas-kit-preview-react": "12.6.11",
+    "@workday/canvas-kit-react": "12.6.11",
+    "@workday/canvas-kit-react-fonts": "^12.6.11",
+    "@workday/canvas-kit-styling": "12.6.11",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "12.6.9",
-    "@workday/canvas-kit-preview-react": "12.6.9",
-    "@workday/canvas-kit-react": "12.6.9",
-    "@workday/canvas-kit-react-fonts": "^12.6.9",
-    "@workday/canvas-kit-styling": "12.6.9",
+    "@workday/canvas-kit-labs-react": "12.6.11",
+    "@workday/canvas-kit-preview-react": "12.6.11",
+    "@workday/canvas-kit-react": "12.6.11",
+    "@workday/canvas-kit-react-fonts": "^12.6.11",
+    "@workday/canvas-kit-styling": "12.6.11",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/mdx/preview-react/multi-select/MultiSelect.mdx

@@ -6,6 +6,8 @@ import {
 } from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
+import Disabled from './examples/Disabled';
+import Error from './examples/Error';
 import Complex from './examples/Complex';
 import Icons from './examples/Icons';
 import Controlled from './examples/Controlled';
@@ -53,7 +55,19 @@ attached to the `MultiSelect.Input` and read out as a group for voiceover.
 </MultiSelect>
 ```
 
-<ExampleCodeBlock code={Basic} />
+### Disabled Example
+
+Disabling `MultiSelect` involves passing the `disabled` prop to the `MultiSelect.Input` component.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Error States
+
+The `MultiSelect.Input` and `MultiSelect.SearchInput` support the `ErrorType` from the Common
+package. The error styling is identical to the `TextInput` error styling. The `error` prop is
+typically passed from the `FormField` component.
+
+<ExampleCodeBlock code={Error} />
 
 ### Complex
 

package/dist/mdx/preview-react/multi-select/examples/Disabled.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
+
+export default () => {
+  return (
+    <>
+      <MultiSelect items={items} initialSelectedIds={['Olives', 'Onions', 'Pepperoni']}>
+        <FormField orientation="horizontal">
+          <FormField.Label>Toppings</FormField.Label>
+          <FormField.Input
+            as={MultiSelect.Input}
+            placeholder="Select Multiple"
+            removeLabel="Remove"
+            disabled
+          />
+          <MultiSelect.Popper>
+            <MultiSelect.Card>
+              <MultiSelect.List>
+                {item => (
+                  <MultiSelect.Item data-id={item}>
+                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
+                  </MultiSelect.Item>
+                )}
+              </MultiSelect.List>
+            </MultiSelect.Card>
+          </MultiSelect.Popper>
+        </FormField>
+      </MultiSelect>
+    </>
+  );
+};

package/dist/mdx/preview-react/multi-select/examples/Error.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = ['Cheese', 'Olives', 'Onions', 'Pepperoni', 'Peppers'];
+
+export default () => {
+  const model = useMultiSelectModel({
+    items,
+    initialSelectedIds: [],
+  });
+  return (
+    <>
+      <MultiSelect model={model}>
+        <FormField
+          orientation="horizontal"
+          error={
+            model.state.selectedIds.length < 1
+              ? 'error'
+              : model.state.selectedIds.length > 3
+              ? 'alert'
+              : undefined
+          }
+        >
+          <FormField.Label>Toppings</FormField.Label>
+          <FormField.Input
+            as={MultiSelect.Input}
+            placeholder="Select Multiple"
+            removeLabel="Remove"
+          />
+          <MultiSelect.Popper>
+            <MultiSelect.Card>
+              <MultiSelect.List>
+                {item => (
+                  <MultiSelect.Item data-id={item}>
+                    <MultiSelect.Item.Text>{item}</MultiSelect.Item.Text>
+                  </MultiSelect.Item>
+                )}
+              </MultiSelect.List>
+            </MultiSelect.Card>
+          </MultiSelect.Popper>
+
+          <FormField.Hint>
+            {model.state.selectedIds.length < 1
+              ? 'Select at least one topping.'
+              : model.state.selectedIds.length > 3
+              ? 'More than 3 toppings cost extra.'
+              : undefined}
+          </FormField.Hint>
+        </FormField>
+      </MultiSelect>
+    </>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.6.9",
+  "version": "12.6.11",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.6.9",
-    "@workday/canvas-kit-preview-react": "^12.6.9",
-    "@workday/canvas-kit-react": "^12.6.9",
-    "@workday/canvas-kit-styling": "^12.6.9",
+    "@workday/canvas-kit-labs-react": "^12.6.11",
+    "@workday/canvas-kit-preview-react": "^12.6.11",
+    "@workday/canvas-kit-react": "^12.6.11",
+    "@workday/canvas-kit-styling": "^12.6.11",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "6439fb540cd5ae6d35fbbc1c4594f824eeb62b73"
+  "gitHead": "67c9a9e99936c8c7acf0e3a8e2679f5d0d6b0bac"
 }