@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -26,21 +26,23 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={handleChange} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => {
-                  return <Select.Item>{item}</Select.Item>;
-                }}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <FormField.Input as={Select.Input} onChange={handleChange} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => {
+                    return <Select.Item>{item}</Select.Item>;
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -31,17 +31,19 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={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>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} getId={item => item.serverId} getTextValue={item => item.label}>
+            <FormField.Input as={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>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <p>Id: {id}</p>
       <p>Value: {value}</p>
     </Flex>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -18,7 +18,7 @@ const options = [
 ];
 
 export default () => {
-  const [value, setValue] = React.useState('');
+  const [_, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -26,23 +26,25 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
+            <FormField.Input as={Select.Input} disabled onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => (
+                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
+                      {item}
+                    </Select.Item>
+                  )}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
     </Flex>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -26,27 +26,29 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item
-                    aria-disabled={
-                      item === 'Mobile Phone' || item === 'Fax (disabled)' ? true : undefined
-                    }
-                  >
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} nonInteractiveIds={['Fax (disabled)', 'Mobile Phone']}>
+            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => (
+                    <Select.Item
+                      aria-disabled={
+                        item === 'Mobile Phone' || item === 'Fax (disabled)' ? true : undefined
+                      }
+                    >
+                      {item}
+                    </Select.Item>
+                  )}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -25,24 +25,26 @@ export default () => {
   };
   return (
     <Flex cs={parentContainerStyles}>
-      <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
-        <FormField error="error">
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => (
-                  <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
-                    {item}
-                  </Select.Item>
-                )}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-          <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>
-        </FormField>
-      </Select>
+      <FormField error="error">
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options} nonInteractiveIds={['Fax (disabled)']}>
+            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => (
+                    <Select.Item aria-disabled={item === 'Fax (disabled)' ? true : undefined}>
+                      {item}
+                    </Select.Item>
+                  )}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>Fax is disabled. Please choose a different option.</FormField.Hint>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

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

@@ -75,25 +75,29 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <Select model={model}>
-        <FormField label="Choose a Film">
-          <Select.Input
-            onChange={e => {
-              setId(e.target.value);
-            }}
-            placeholder={loadingStatus}
-          />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>
-                {item => {
-                  return <Select.Item>{item.label}</Select.Item>;
-                }}
-              </Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Choose a Film</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input
+              as={Select.Input}
+              onChange={e => {
+                setId(e.target.value);
+              }}
+              placeholder={loadingStatus}
+            />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  {item => {
+                    return <Select.Item>{item.label}</Select.Item>;
+                  }}
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <div data-testid="selected-id">Selected Id: {id}</div>
       <div data-testid="selected-value">Selected value: {stringValue}</div>
       <PrimaryButton

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 
@@ -19,17 +19,19 @@ export default () => {
 
   return (
     <Flex>
-      <Select model={model}>
-        <FormField grow>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input grow as={Select.Input} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField grow>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
     </Flex>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select, useSelectModel} from '@workday/canvas-kit-react/select';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
@@ -20,17 +20,19 @@ export default () => {
 
   return (
     <>
-      <Select model={model}>
-        <FormField>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item.text}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <BodyText size="small">Selected Value: {model.state.selectedIds[0]}</BodyText>
       <SecondaryButton
         onClick={() => {

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

@@ -43,21 +43,24 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <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>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select
+            items={options}
+            initialSelectedIds={['da594226446c11de98360015c5e6daf6']}
+            getId={item => item.id}
+            getTextValue={item => item.label}
+          >
+            <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>
+          </Select>
+        </FormField.Field>
+      </FormField>
       <p>Id: {id}</p>
       <p>Value: {value}</p>
     </Flex>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 
@@ -19,17 +19,20 @@ export default () => {
 
   return (
     <Flex>
-      <Select model={model}>
-        <FormField orientation="horizontal">
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </FormField>
-      </Select>
+      <FormField orientation="horizontalStart">
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select model={model}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+            <FormField.Hint>Choose a form of contact</FormField.Hint>
+          </Select>
+        </FormField.Field>
+      </FormField>
     </Flex>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
@@ -45,14 +45,16 @@ export default () => {
     <Box>
       <FormField>
         <FormField.Label>Choose a City</FormField.Label>
-        <Select items={cities}>
-          <FormField.Input as={Select.Input} />
-          <Select.Popper>
-            <Select.Card cs={selectCardStyles}>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </Select>
+        <FormField.Field>
+          <Select items={cities}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card cs={selectCardStyles}>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
       </FormField>
     </Box>
   );

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

@@ -26,20 +26,23 @@ export default () => {
 
   return (
     <Flex cs={parentContainerStyles}>
-      <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>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <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>
+          </Select>
+        </FormField.Field>
+      </FormField>
       Selected Value: {value}
     </Flex>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {Select} from '@workday/canvas-kit-react/select';
 
 const options = [
@@ -13,6 +13,7 @@ const options = [
 ];
 
 export default () => {
+  // @ts-ignore
   const [value, setValue] = React.useState('medium');
   const ref = React.useRef(null);
 
@@ -30,15 +31,17 @@ export default () => {
   return (
     <>
       <FormField>
-        <Select items={options}>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </Select>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <FormField.Input as={Select.Input} ref={ref} onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
       </FormField>
       <PrimaryButton onClick={handleClick}>Focus Select</PrimaryButton>
     </>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+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';
 import {createStyles} from '@workday/canvas-kit-styling';
@@ -27,15 +27,17 @@ export default () => {
   return (
     <Flex cs={parentContainerStyles}>
       <FormField isRequired>
-        <Select items={options}>
-          <FormField.Label>Contact</FormField.Label>
-          <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
-          <Select.Popper>
-            <Select.Card>
-              <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
-            </Select.Card>
-          </Select.Popper>
-        </Select>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={options}>
+            <FormField.Input as={Select.Input} onChange={e => handleChange(e)} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>{item => <Select.Item>{item}</Select.Item>}</Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
       </FormField>
       Selected Value: {value}
     </Flex>