@workday/canvas-kit-docs 9.0.0-alpha.413-next.15 → 9.0.0-alpha.415-next.17

package/dist/es6/lib/docs.js

@@ -74007,6 +74007,126 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ]
     }
   },
+  {
+    "name": "useListItemAllowChildStrings",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemAllowChildStrings.ts",
+    "description": "This elemProps hook allows for children values to be considered identifiers if the children\nare strings. This can be useful for autocomplete or select components that allow string values.\nThis hook must be defined _before_ {@link useListItemRegister} because it sets the `data-id`\nattribute if one hasn't been defined by the application.\n\nAn example might look like:\n```tsx\nconst useMyListItem = composeHooks(\n  // any other hooks here\n  useListItemSelect,\n  useListItemRegister,\n  useListItemAllowChildStrings\n)\n\n\n<MyList onSelect={({id}) => {\n  console.log(id) // will be \"First\" or \"Second\"\n}}>\n  <MyList.Item>First</MyList.Item>\n  <MyList.Item>Second</MyList.Item>\n</MyList>\n```",
+    "declarations": [
+      {
+        "name": "useListItemAllowChildStrings",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemAllowChildStrings.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "name": {
+        "kind": "symbol",
+        "name": "createElemPropsHook"
+      },
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "model",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "symbol",
+            "name": "ListModel"
+          },
+          "required": true
+        },
+        {
+          "kind": "parameter",
+          "name": "elemProps",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "object",
+            "properties": [
+              {
+                "kind": "property",
+                "name": "data-id",
+                "required": false,
+                "type": {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                "description": "",
+                "declarations": [
+                  {
+                    "name": "data-id",
+                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemAllowChildStrings.ts"
+                  }
+                ],
+                "tags": {}
+              },
+              {
+                "kind": "property",
+                "name": "children",
+                "required": false,
+                "type": {
+                  "kind": "external",
+                  "name": "ReactNode",
+                  "url": "https://reactjs.org/docs/rendering-elements.html"
+                },
+                "description": "",
+                "declarations": [
+                  {
+                    "name": "children",
+                    "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemAllowChildStrings.ts"
+                  }
+                ],
+                "tags": {}
+              }
+            ]
+          },
+          "required": false
+        },
+        {
+          "kind": "parameter",
+          "name": "ref",
+          "description": "",
+          "tags": {},
+          "declarations": [],
+          "type": {
+            "kind": "external",
+            "name": "React.Ref",
+            "url": "https://reactjs.org/docs/refs-and-the-dom.html"
+          },
+          "required": false
+        }
+      ],
+      "returnType": {
+        "kind": "object",
+        "properties": [
+          {
+            "kind": "property",
+            "name": "data-id",
+            "required": false,
+            "type": {
+              "kind": "union",
+              "value": [
+                {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                {
+                  "kind": "primitive",
+                  "value": "undefined"
+                }
+              ]
+            },
+            "description": "",
+            "tags": {},
+            "declarations": []
+          }
+        ]
+      }
+    }
+  },
   {
     "name": "useListItemRegister",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/collection/lib/useListItemRegister.tsx",
@@ -74335,6 +74455,18 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "description": "",
             "tags": {},
             "declarations": []
+          },
+          {
+            "kind": "property",
+            "name": "id",
+            "required": true,
+            "type": {
+              "kind": "primitive",
+              "value": "string"
+            },
+            "description": "",
+            "tags": {},
+            "declarations": []
           }
         ]
       }
@@ -106164,6 +106296,46 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "slugify",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/slugify.ts",
+    "description": "Function that takes a string and returns a \"slug\" which can be used in HTML",
+    "declarations": [
+      {
+        "name": "slugify",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/slugify.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "input",
+          "type": {
+            "kind": "primitive",
+            "value": "string"
+          },
+          "required": true,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "input",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/slugify.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "members": [],
+      "returnType": {
+        "kind": "primitive",
+        "value": "string"
+      }
+    }
+  },
   {
     "name": "useConstant",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/useConstant.ts",

package/dist/mdx/react/collection/Collection.mdx

@@ -3,6 +3,7 @@ import {SymbolDoc} from '@workday/canvas-kit-docs';
 import {ListBox} from '@workday/canvas-kit-react/collection';
 
 import Basic from './examples/Basic';
+import StringChildren from './examples/StringChildren';
 import DynamicItems from './examples/DynamicItems';
 import BasicVirtual from './examples/BasicVirtual';
 import IdentifiedItems from './examples/IdentifiedItems';
@@ -33,7 +34,7 @@ yarn add @workday/canvas-kit-react
 The `ListBox` on its own isn't very useful. It registers each item with the model. The
 `ListBox.Item` only uses the `useListItemRegister` hook which handles registration of static items
 to the model. The `ListBox` uses `useListRenderItems` which handles rendering static items as well
-as [Dynamic List](#dynamic-list) example).
+as [Dynamic List](#dynamic-list) example.
 
 <ExampleCodeBlock code={Basic} />
 
@@ -87,6 +88,16 @@ uses `ListBox` and creates a custom `SelectableItem` elemProps hook and componen
 
 <ExampleCodeBlock code={Selection} />
 
+### String Children
+
+Sometimes it is desired to allow the string children to be the identifiers for each item. This could
+be useful for autocomplete components where the item's text is the desired identifier. Normally, if
+no `data-id` is provided to the item, the system will choose the registration index. This would be `'0'`, `'1'`, and so on.
+By passing `useListItemAllowChildStrings` to an item component, it will change this behavior to use the child text if no
+`data-id` is provided.
+
+<ExampleCodeBlock code={StringChildren} />
+
 #### Multiple Selection
 
 The `selection` manager can be passed directly to the model configuration to handle different
@@ -147,6 +158,10 @@ columns, but not rows. This is the default navigation manager for lists.
 
 <SymbolDoc name="useListItemRegister" fileName="/react/" />
 
+### `useListItemAllowChildStrings`
+
+<SymbolDoc name="useListItemAllowChildStrings" fileName="/react/" />
+
 ### `useListItemRovingFocus`
 
 <SymbolDoc name="useListItemRovingFocus" fileName="/react/" />

package/dist/mdx/react/collection/examples/StringChildren.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  ListBox,
+  useListItemRegister,
+  useListItemAllowChildStrings,
+  useListItemSelect,
+  useListModel,
+} from '@workday/canvas-kit-react/collection';
+import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
+
+const useItem = composeHooks(useListItemSelect, useListItemRegister, useListItemAllowChildStrings);
+
+const Item = createSubcomponent('button')({
+  modelHook: useListModel,
+  elemPropsHook: useItem,
+})((elemProps, Element) => {
+  return <Element {...elemProps} />;
+});
+
+export default () => {
+  const model = useListModel();
+
+  return (
+    <>
+      <ListBox model={model}>
+        <Item>First</Item>
+        <Item>Second</Item>
+      </ListBox>
+      <div>
+        Selected: <span id="selected">{model.state.selectedIds[0] || 'Nothing'}</span>
+      </div>
+    </>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.413-next.15+76b571ed",
+  "version": "9.0.0-alpha.415-next.17+5fd436a0",
   "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.0-alpha.413-next.15+76b571ed",
-    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.413-next.15+76b571ed",
-    "@workday/canvas-kit-react": "^9.0.0-alpha.413-next.15+76b571ed",
+    "@workday/canvas-kit-labs-react": "^9.0.0-alpha.415-next.17+5fd436a0",
+    "@workday/canvas-kit-preview-react": "^9.0.0-alpha.415-next.17+5fd436a0",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.415-next.17+5fd436a0",
     "@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": "76b571ed215127f6badf7a3834a761709aac303d"
+  "gitHead": "5fd436a0c644d68c8a97fd0f52f4b32c1d5b2bec"
 }