@workday/canvas-kit-docs 11.0.0-alpha.671-next.0 → 11.0.0-alpha.693-next.0

package/dist/mdx/react/select/examples/FetchingDynamicItems.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {useMount} from '@workday/canvas-kit-react/common';
+
+const movieListItems = [
+  {
+    label: 'The Lion King',
+    serverId: '123',
+    Year: '2019',
+    Runtime: '118 min',
+  },
+  {
+    label: 'Mowgli: Legend of the Jungle',
+    serverId: '234',
+    Year: '2018',
+    Runtime: '104 min',
+  },
+  {
+    label: 'Doctor Strange',
+    serverId: '345',
+    Year: '2016',
+    Runtime: '115 min',
+  },
+  {
+    label: 'John Wick',
+    Year: '2014',
+    serverId: '456',
+    Runtime: '101 min',
+  },
+  {
+    label: 'The Notebook',
+    serverId: '567',
+    Year: '2004',
+    Runtime: '123 min',
+  },
+];
+
+export default () => {
+  const [id, setId] = React.useState('456');
+  const [value, setValue] = React.useState('');
+  const [moviesLists, setMoviesList] = React.useState([]);
+  const [loadingStatus, setLoadingStatus] = React.useState<'idle' | 'loading' | 'success'>('idle');
+  const loadingRef = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const model = useSelectModel({
+    items: moviesLists,
+    getTextValue: item => item.label,
+    getId: item => item.serverId,
+    initialSelectedIds: [id],
+  });
+
+  function loadItems() {
+    setLoadingStatus('loading');
+    loadingRef.current = setTimeout(() => {
+      setLoadingStatus('success');
+      setMoviesList(movieListItems);
+    }, 1500);
+  }
+
+  useMount(() => {
+    return () => {
+      clearTimeout(loadingRef.current);
+    };
+  });
+
+  return (
+    <Flex flexDirection="column" maxWidth={300}>
+      <div id="foo">Foo Bar</div>
+      <Select model={model}>
+        <FormField label="Choose a Film">
+          <Select.Input
+            onChange={e => {
+              setId(e.target.value);
+              setValue(model.navigation.getItem(e.target.value, model).textValue);
+            }}
+            placeholder={loadingStatus}
+          />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>
+                {item => {
+                  return <Select.Item>{item.label}</Select.Item>;
+                }}
+              </Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
+      <div data-testid="selected-id">Selected Id: {id}</div>
+      <div data-testid="selected-value">Selected value: {value}</div>
+      <PrimaryButton
+        onClick={() => {
+          loadItems();
+        }}
+      >
+        Get Items
+      </PrimaryButton>
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/Grow.tsx

@@ -25,11 +25,7 @@ export default () => {
           <FormField.Input grow as={Select.Input} />
           <Select.Popper>
             <Select.Card>
-              {model.state.items.length > 0 && (
-                <Select.List scrollMargin="10px">
-                  {item => <Select.Item>{item}</Select.Item>}
-                </Select.List>
-              )}
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>

package/dist/mdx/react/select/examples/HoistedModel.tsx

@@ -5,18 +5,17 @@ import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
 const options = [
-  'E-mail',
-  'Phone',
-  'Fax (disabled)',
-  'Mail',
-  'Mobile Phone',
-  'The Ontologically Anthropocentric Sensory Immersive Simulation',
+  {text: 'E-mail', id: 'email-1'},
+  {text: 'Phone', id: 'phone-2'},
+  {text: 'Fax', id: 'fax-3'},
+  {text: 'Mail', id: 'mail-4'},
+  {text: 'Mobile Phone', id: 'mobile-phone-5'},
 ];
 
 export default () => {
   const model = useSelectModel({
     items: options,
-    nonInteractiveIds: ['Fax (disabled)'],
+    initialSelectedIds: ['fax-3'],
   });
 
   return (
@@ -27,13 +26,7 @@ export default () => {
           <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
+              <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>
@@ -41,7 +34,7 @@ export default () => {
       <BodyText size="small">Selected Value: {model.state.selectedIds[0]}</BodyText>
       <SecondaryButton
         onClick={() => {
-          model.events.select({id: 'Phone'});
+          model.events.select({id: 'phone-2'});
         }}
       >
         Select Phone Item

package/dist/mdx/react/select/examples/InitialSelectedItem.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+const options = [
+  {
+    id: 'b310c757b2d341f99d40d76f4d563c5b',
+    descriptor: 'Arabic',
+    languageCode: 'ar',
+    label: 'Arabic',
+    nativeLanguageName: 'العربية',
+  },
+  {
+    id: 'a675a6b6e22d100017d7fe2a784d1255',
+    descriptor: 'Bulgarian (Bulgaria)',
+    languageCode: 'bg_BG',
+    label: 'Bulgarian (Bulgaria)',
+    nativeLanguageName: 'български (Република България)',
+  },
+  {
+    id: 'da594226446c11de98360015c5e6daf6',
+    descriptor: 'English (United States)',
+    languageCode: 'en_US',
+    label: 'English (United States)',
+    nativeLanguageName: 'English',
+  },
+];
+
+export default () => {
+  const [value, setValue] = React.useState('English (United States)');
+  const [id, setId] = React.useState('da594226446c11de98360015c5e6daf6');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setId(event.target.value);
+    setValue(options.find(item => item.id === event.target.value).label);
+  };
+
+  return (
+    <Flex flexDirection="column">
+      <Select
+        items={options}
+        initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
+        getId={item => item.id}
+        getTextValue={item => item.label}
+      >
+        <FormField label="Contact">
+          <Select.Input onChange={e => handleChange(e)} />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>{item => <Select.Item>{item.label}</Select.Item>}</Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
+      <p>Id: {id}</p>
+      <p>Value: {value}</p>
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/LabelPosition.tsx

@@ -25,9 +25,7 @@ export default () => {
           <FormField.Input as={Select.Input} />
           <Select.Popper>
             <Select.Card>
-              {model.state.items.length > 0 && (
-                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-              )}
+              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
             </Select.Card>
           </Select.Popper>
         </FormField>

package/dist/mdx/react/select/examples/Placeholder.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-react/select';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+const options = [
+  'E-mail',
+  'Phone',
+  'Fax',
+  'Mail',
+  'Mobile Phone',
+  'The Ontologically Anthropocentric Sensory Immersive Simulation',
+];
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <Flex flexDirection="column">
+      <Select items={options}>
+        <FormField label="Contact">
+          <Select.Input placeholder="Make a Selection" onChange={e => handleChange(e)} />
+          <Select.Popper>
+            <Select.Card>
+              <Select.List>
+                {item => {
+                  return <Select.Item>{item}</Select.Item>;
+                }}
+              </Select.List>
+            </Select.Card>
+          </Select.Popper>
+        </FormField>
+      </Select>
+      Selected Value: {value}
+    </Flex>
+  );
+};

package/dist/mdx/react/select/examples/RefForwarding.tsx

@@ -22,6 +22,7 @@ export default () => {
 
   const handleClick = () => {
     if (ref && ref.current) {
+      console.log(ref);
       ref.current.focus();
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.671-next.0",
+  "version": "11.0.0-alpha.693-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": "^11.0.0-alpha.671-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.671-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.671-next.0",
-    "@workday/canvas-kit-styling": "^10.3.1",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.693-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.693-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.693-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.693-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "a38c87c96e3c54cb7eb20ea92d615d297c861112"
+  "gitHead": "2ba2e730d7a13e5067afa7f482887539011d742f"
 }