@workday/canvas-kit-docs 12.0.0-alpha.918-next.0 → 12.0.0-alpha.921-next.0

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

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = [
+  {id: '1', text: 'Cheese'},
+  {id: '2', text: 'Olives'},
+  {id: '3', text: 'Onions'},
+  {id: '4', text: 'Pepperoni'},
+  {id: '5', text: 'Peppers'},
+];
+
+export default () => {
+  const formRef = React.useRef<HTMLFormElement>(null);
+  const [value, setValue] = React.useState('1');
+  const [label, setLabel] = React.useState('Cheese');
+
+  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.currentTarget.value;
+    setValue(value);
+    setLabel(
+      value
+        .split(', ')
+        .map(item => items.find(i => i.id === item)?.text || 'Not Found')
+        .join(', ')
+    );
+  }
+
+  return (
+    <>
+      <form
+        onSubmit={e => {
+          console.log('form submitted');
+          e.preventDefault();
+        }}
+        ref={formRef}
+      >
+        <Flex gap="s" flexDirection="column">
+          <MultiSelect items={items}>
+            <FormField orientation="horizontal">
+              <FormField.Label>Toppings</FormField.Label>
+              <FormField.Input
+                as={MultiSelect.Input}
+                placeholder="Select Multiple"
+                name="toppings"
+                onChange={handleOnChange}
+                value={value}
+              />
+              <MultiSelect.Popper>
+                <MultiSelect.Card>
+                  <MultiSelect.List>
+                    {item => (
+                      <MultiSelect.Item data-id={item.id}>
+                        <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                      </MultiSelect.Item>
+                    )}
+                  </MultiSelect.List>
+                </MultiSelect.Card>
+              </MultiSelect.Popper>
+            </FormField>
+          </MultiSelect>
+          <Flex gap="s">
+            <SecondaryButton
+              onClick={e => {
+                setValue('1, 2, 3');
+              }}
+            >
+              Set to "Cheese, Olives, Onions" via React `value`
+            </SecondaryButton>
+            <SecondaryButton
+              onClick={e => {
+                const input = formRef.current.querySelector('[name=toppings]') as HTMLInputElement;
+                input.value = '1, 2';
+              }}
+            >
+              Set to "Cheese, Olives" via DOM `value`
+            </SecondaryButton>
+          </Flex>
+          <div>
+            <PrimaryButton type="submit">Submit</PrimaryButton>
+          </div>
+          <div>Selected ID: {value}</div>
+          <div>Selected Label: {label}</div>
+        </Flex>
+      </form>
+    </>
+  );
+};

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

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {
+  mediaPauseIcon,
+  mediaPlayIcon,
+  mediaTopicsIcon,
+  skipIcon,
+  previousIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {MultiSelect} from '@workday/canvas-kit-preview-react/multi-select';
+
+const items = [
+  {id: '1', text: 'Pause', icon: mediaPauseIcon},
+  {id: '2', text: 'Play', icon: mediaPlayIcon},
+  {id: '3', text: 'Skip', icon: skipIcon},
+  {id: '4', text: 'Previous', icon: previousIcon},
+];
+
+export default () => {
+  return (
+    <MultiSelect items={items}>
+      <FormField orientation="horizontal">
+        <FormField.Label>Controls</FormField.Label>
+        <FormField.Input as={MultiSelect.Input} placeholder="Select Multiple" />
+        <MultiSelect.Popper>
+          <MultiSelect.Card>
+            <MultiSelect.List>
+              {item => (
+                <MultiSelect.Item data-id={item.id}>
+                  <MultiSelect.Item.Icon icon={item.icon} />
+                  <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                  <MultiSelect.Item.Icon icon={mediaTopicsIcon} />
+                </MultiSelect.Item>
+              )}
+            </MultiSelect.List>
+          </MultiSelect.Card>
+        </MultiSelect.Popper>
+      </FormField>
+    </MultiSelect>
+  );
+};

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

@@ -0,0 +1,123 @@
+import React from 'react';
+
+import {system} from '@workday/canvas-tokens-web';
+
+import {createStyles} from '@workday/canvas-kit-styling';
+import {LoadReturn} from '@workday/canvas-kit-react/collection';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
+const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
+const options = Array(1000)
+  .fill('')
+  .map((_, index) => {
+    return {
+      id: `${index + 1}`,
+      text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,
+    };
+  });
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const {model, loader} = useComboboxLoader(
+    {
+      // You can start with any number that makes sense.
+      total: 0,
+
+      // Pick whatever number makes sense for your API
+      pageSize: 20,
+
+      // A load function that will be called by the loader. You must return a promise that returns
+      // an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
+      async load({pageNumber, pageSize, filter}) {
+        return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {
+          // simulate a server response by resolving after a period of time
+          setTimeout(() => {
+            // simulate paging and filtering based on pre-computed items
+            const start = (pageNumber - 1) * pageSize;
+            const end = start + pageSize;
+            const filteredItems = options.filter(item => {
+              if (filter === '' || typeof filter !== 'string') {
+                return true;
+              }
+              return item.text.toLowerCase().includes(filter.toLowerCase());
+            });
+
+            const total = filteredItems.length;
+            const items = filteredItems.slice(start, end);
+
+            resolve({
+              items,
+              total,
+            });
+          }, 300);
+        });
+      },
+      onShow() {
+        // The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
+        // visible
+        loader.load();
+      },
+    },
+    useMultiSelectModel
+  );
+
+  return (
+    <CanvasProvider>
+      <>
+        <form
+          onSubmit={e => {
+            console.log('form submitted');
+            e.preventDefault();
+          }}
+        >
+          <main className={mainContentStyles}>
+            <MultiSelect model={model}>
+              <FormField orientation="horizontal">
+                <FormField.Label>Fruits</FormField.Label>
+                <FormField.Input
+                  as={MultiSelect.SearchInput}
+                  placeholder="Search"
+                  name="toppings"
+                  onChange={e => {
+                    setValue(e.currentTarget.value);
+                  }}
+                  value={value}
+                />
+                <MultiSelect.Popper>
+                  <MultiSelect.Card>
+                    {model.state.items.length === 0 && (
+                      <StyledMenuItem as="span">No Results Found</StyledMenuItem>
+                    )}
+                    {model.state.items.length > 0 && (
+                      <MultiSelect.List maxHeight={200}>
+                        {item =>
+                          item ? (
+                            <MultiSelect.Item data-id={item.id}>
+                              <MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
+                            </MultiSelect.Item>
+                          ) : undefined
+                        }
+                      </MultiSelect.List>
+                    )}
+                  </MultiSelect.Card>
+                </MultiSelect.Popper>
+              </FormField>
+            </MultiSelect>
+          </main>
+        </form>
+        <div>Selected: {value}</div>
+      </>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/action-bar/examples/OverflowActionBar.tsx

@@ -66,6 +66,7 @@ export default () => {
             </SegmentedControl.Item>
           </SegmentedControl.List>
         </SegmentedControl>
+        <p>Selected: {containerWidth}</p>
       </footer>
     </div>
   );

package/dist/mdx/react/button/button/Button.mdx

@@ -78,7 +78,8 @@ on a dark or colorful background such as `blueberry400`.
 
 ### Grow Prop
 
-The example below shows the use of the `grow` prop on different variants of buttons. This will set the width of the button to the width of its container.
+The example below shows the use of the `grow` prop on different variants of buttons. This will set
+the width of the button to the width of its container.
 
 <ExampleCodeBlock code={Grow} />
 
@@ -106,4 +107,4 @@ should be used for navigation.
 
 ## Specifications
 
-<Specifications file="Button.spec.ts" name="Button" />
+<Specifications file="Button.spec.tsx" name="Button" />

package/dist/mdx/react/combobox/Combobox.mdx

@@ -36,13 +36,16 @@ two separate `input` elements.
   the same as the user input. Any prop related to the function of forms will be passed here. For
   example, the `name` attribute will be passed here. The `ref` will be pointed to this element.
 
+`Select` and `MultiSelect` are examples of constrained comboboxes.
+
 ### Arbitrary
 
 An arbitrary combobox allows the user to enter any value. The list of options are presented as
 suggestions and selecting an option will prefill the combobox with the value of the option. The user
 is still allowed to modify the combobox even after an option is entered. With arbitrary comboboxes,
 there is only one `input` element. Arbitrary combobox inputs should use the
-[useComboboxInputArbitrary](#usecomboboxinputarbirary) hook.
+[useComboboxInputArbitrary](#usecomboboxinputarbirary) hook. Typeahead or `Autocomplete` are
+examples are arbitrary value comboboxes.
 
 ## Installation
 

package/dist/mdx/react/menu/Menu.mdx

@@ -1,5 +1,3 @@
-import {Markdown} from '@storybook/blocks';
-
 import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
@@ -34,18 +32,14 @@ model which composes a list model and a popup model and sets up accessibility fe
 [Actions Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)
 using roving tabindex. Below is table of supported keyboard shortcuts and associated actions.
 
-<Markdown>
-  {`
 | Key                | Action                                                                                                       |
 | ------------------ | ------------------------------------------------------------------------------------------------------------ |
-| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu                                                             |
-| \`Escape\`           | Closes the menu                                                                                              |
-| \`Up Arrow\`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
-| \`Down Arrow\`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item     |
-| \`Home\`             | Moves focus to the first menu item                                                                           |
-| \`End\`              | Moves focus to the last menu item                                                                            |
-`}
-</Markdown>
+| `Enter` or `Space` | Activates the menu item and then closes the menu                                                             |
+| `Escape`           | Closes the menu                                                                                              |
+| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
+| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item     |
+| `Home`             | Moves focus to the first menu item                                                                           |
+| `End`              | Moves focus to the last menu item                                                                            |
 
 ### Context Menu
 

package/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -1,5 +1,3 @@
-import {Markdown} from '@storybook/blocks';
-
 import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
@@ -38,18 +36,14 @@ yarn add @workday/canvas-kit-react
 Note that the `type` prop is required (there is no default value). `type` accepts the following
 values:
 
-<Markdown>
-  {`
 | Type                               | Suggested Purpose                                                                              |
 | ---------------------------------- | ---------------------------------------------------------------------------------------------- |
-| \`StatusIndicator.Type.Gray\`        | Basic, general status. No action required.                                                     |
-| \`StatusIndicator.Type.Orange\`      | Signifies alerts, that a user must take action, or that something requires attention.          |
-| \`StatusIndicator.Type.Blue\`        | Signifies an item in progress, an update, or a current status.                                 |
-| \`StatusIndicator.Type.Green\`       | Signifies success, completion, or celebration.                                                 |
-| \`StatusIndicator.Type.Red\`         | Signifies an error or issue, or removal or destruction.                                        |
-| \`StatusIndicator.Type.Transparent\` | General status and related information intended for use on top of imagery, video, or graphics. |
-`}
-</Markdown>
+| `StatusIndicator.Type.Gray`        | Basic, general status. No action required.                                                     |
+| `StatusIndicator.Type.Orange`      | Signifies alerts, that a user must take action, or that something requires attention.          |
+| `StatusIndicator.Type.Blue`        | Signifies an item in progress, an update, or a current status.                                 |
+| `StatusIndicator.Type.Green`       | Signifies success, completion, or celebration.                                                 |
+| `StatusIndicator.Type.Red`         | Signifies an error or issue, or removal or destruction.                                        |
+| `StatusIndicator.Type.Transparent` | General status and related information intended for use on top of imagery, video, or graphics. |
 
 ### Emphasis
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.918-next.0",
+  "version": "12.0.0-alpha.921-next.0",
   "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-alpha.918-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.918-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.918-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.918-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.921-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.921-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.921-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.921-next.0",
     "@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": "3f21a8c474728598369595c8978854dab2355235"
+  "gitHead": "55250dda338c8adc6587b7254c8a38201830f27c"
 }