@workday/canvas-kit-docs 15.0.0-alpha.1303-next.0 → 15.0.0

package/dist/mdx/labs-react/combobox/examples/DisabledItem.tsx

@@ -1,88 +0,0 @@
-import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
-import {ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  Combobox,
-  ComboboxProps,
-  ComboBoxMenuItemGroup,
-} from '@workday/canvas-kit-labs-react/combobox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-const autocompleteResult = (
-  textModifier: number,
-  disabled: boolean
-): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
-  <StyledMenuItem aria-disabled={disabled}>
-    Result
-    <span>
-      num<span>ber</span>
-    </span>
-    {textModifier}
-  </StyledMenuItem>
-);
-
-const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
-  Array.apply(null, Array(count))
-    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
-    .splice(0, total);
-
-const groupOfResults = (
-  count: number,
-  showDisabledItems: boolean,
-  groupHeading: ReactNode = 'Group'
-): ComboBoxMenuItemGroup => ({
-  header: (
-    <StyledMenuItem>
-      <strong>{groupHeading}</strong>
-    </StyledMenuItem>
-  ),
-  items: simpleAutoComplete(count, showDisabledItems, 10),
-});
-
-const Autocomplete: FC<
-  Omit<ComboboxProps, 'children'> & {
-    group?: boolean;
-    showDisabledItems?: boolean;
-  }
-> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
-  const [currentText, setCurrentText] = React.useState('');
-
-  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
-    setCurrentText(event.target.value);
-  };
-
-  const textLength = currentText.length;
-  const groupLength = Math.floor(textLength / 2);
-
-  return (
-    <Combobox
-      autocompleteItems={
-        group
-          ? [
-              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
-              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
-            ]
-          : simpleAutoComplete(textLength, showDisabledItems, 10)
-      }
-      onChange={autocompleteCallback}
-      showClearButton={showClearButton == null ? true : showClearButton}
-      labelId="autocomplete-123"
-      initialValue="Test"
-      {...props}
-    >
-      <TextInput placeholder="Autocomplete" />
-    </Combobox>
-  );
-};
-
-export default () => {
-  return (
-    <FormField id="autocomplete-123">
-      <FormField.Label>Group of results</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={Autocomplete} showDisabledItems={true} />
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/labs-react/combobox/examples/GroupOfResult.tsx

@@ -1,88 +0,0 @@
-import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
-import {ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  Combobox,
-  ComboboxProps,
-  ComboBoxMenuItemGroup,
-} from '@workday/canvas-kit-labs-react/combobox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-const autocompleteResult = (
-  textModifier: number,
-  disabled: boolean
-): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
-  <StyledMenuItem aria-disabled={disabled}>
-    Result{' '}
-    <span>
-      num<span>ber</span>
-    </span>{' '}
-    {textModifier}
-  </StyledMenuItem>
-);
-
-const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
-  Array.apply(null, Array(count))
-    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
-    .splice(0, total);
-
-const groupOfResults = (
-  count: number,
-  showDisabledItems: boolean,
-  groupHeading: ReactNode = 'Group'
-): ComboBoxMenuItemGroup => ({
-  header: (
-    <StyledMenuItem>
-      <strong>{groupHeading}</strong>
-    </StyledMenuItem>
-  ),
-  items: simpleAutoComplete(count, showDisabledItems, 10),
-});
-
-const Autocomplete: FC<
-  Omit<ComboboxProps, 'children'> & {
-    group?: boolean;
-    showDisabledItems?: boolean;
-  }
-> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
-  const [currentText, setCurrentText] = React.useState('');
-
-  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
-    setCurrentText(event.target.value);
-  };
-
-  const textLength = currentText.length;
-  const groupLength = Math.floor(textLength / 2);
-
-  return (
-    <Combobox
-      autocompleteItems={
-        group
-          ? [
-              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
-              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
-            ]
-          : simpleAutoComplete(textLength, showDisabledItems, 10)
-      }
-      onChange={autocompleteCallback}
-      showClearButton={showClearButton == null ? true : showClearButton}
-      labelId="autocomplete-123"
-      initialValue="Test"
-      {...props}
-    >
-      <TextInput placeholder="Autocomplete" />
-    </Combobox>
-  );
-};
-
-export default () => {
-  return (
-    <FormField id="autocomplete-123">
-      <FormField.Label>Group of results</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={Autocomplete} group={true} />
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/labs-react/combobox/examples/Grow.tsx

@@ -1,88 +0,0 @@
-import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
-import {ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  Combobox,
-  ComboboxProps,
-  ComboBoxMenuItemGroup,
-} from '@workday/canvas-kit-labs-react/combobox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-const autocompleteResult = (
-  textModifier: number,
-  disabled: boolean
-): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
-  <StyledMenuItem aria-disabled={disabled}>
-    Result
-    <span>
-      num<span>ber</span>
-    </span>
-    {textModifier}
-  </StyledMenuItem>
-);
-
-const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
-  Array.apply(null, Array(count))
-    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
-    .splice(0, total);
-
-const groupOfResults = (
-  count: number,
-  showDisabledItems: boolean,
-  groupHeading: ReactNode = 'Group'
-): ComboBoxMenuItemGroup => ({
-  header: (
-    <StyledMenuItem>
-      <strong>{groupHeading}</strong>
-    </StyledMenuItem>
-  ),
-  items: simpleAutoComplete(count, showDisabledItems, 10),
-});
-
-const Autocomplete: FC<
-  Omit<ComboboxProps, 'children'> & {
-    group?: boolean;
-    showDisabledItems?: boolean;
-  }
-> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
-  const [currentText, setCurrentText] = React.useState('');
-
-  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
-    setCurrentText(event.target.value);
-  };
-
-  const textLength = currentText.length;
-  const groupLength = Math.floor(textLength / 2);
-
-  return (
-    <Combobox
-      autocompleteItems={
-        group
-          ? [
-              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
-              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
-            ]
-          : simpleAutoComplete(textLength, showDisabledItems, 10)
-      }
-      onChange={autocompleteCallback}
-      showClearButton={showClearButton == null ? true : showClearButton}
-      labelId="autocomplete-123"
-      initialValue="Test"
-      {...props}
-    >
-      <TextInput data-width="ck-formfield-width" placeholder="Autocomplete" />
-    </Combobox>
-  );
-};
-
-export default () => {
-  return (
-    <FormField grow={true} id="autocomplete-123">
-      <FormField.Label>Grow example</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={Autocomplete} />
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/labs-react/combobox/examples/NoClearButton.tsx

@@ -1,88 +0,0 @@
-import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
-import {ExtractProps} from '@workday/canvas-kit-react/common';
-import {
-  Combobox,
-  ComboboxProps,
-  ComboBoxMenuItemGroup,
-} from '@workday/canvas-kit-labs-react/combobox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-
-const autocompleteResult = (
-  textModifier: number,
-  disabled: boolean
-): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
-  <StyledMenuItem aria-disabled={disabled}>
-    Result
-    <span>
-      num<span>ber</span>
-    </span>
-    {textModifier}
-  </StyledMenuItem>
-);
-
-const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
-  Array.apply(null, Array(count))
-    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
-    .splice(0, total);
-
-const groupOfResults = (
-  count: number,
-  showDisabledItems: boolean,
-  groupHeading: ReactNode = 'Group'
-): ComboBoxMenuItemGroup => ({
-  header: (
-    <StyledMenuItem>
-      <strong>{groupHeading}</strong>
-    </StyledMenuItem>
-  ),
-  items: simpleAutoComplete(count, showDisabledItems, 10),
-});
-
-const Autocomplete: FC<
-  Omit<ComboboxProps, 'children'> & {
-    group?: boolean;
-    showDisabledItems?: boolean;
-  }
-> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
-  const [currentText, setCurrentText] = React.useState('');
-
-  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
-    setCurrentText(event.target.value);
-  };
-
-  const textLength = currentText.length;
-  const groupLength = Math.floor(textLength / 2);
-
-  return (
-    <Combobox
-      autocompleteItems={
-        group
-          ? [
-              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
-              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
-            ]
-          : simpleAutoComplete(textLength, showDisabledItems, 10)
-      }
-      onChange={autocompleteCallback}
-      showClearButton={showClearButton == null ? true : showClearButton}
-      labelId="autocomplete-123"
-      initialValue="Test"
-      {...props}
-    >
-      <TextInput placeholder="Autocomplete" />
-    </Combobox>
-  );
-};
-
-export default () => {
-  return (
-    <FormField id="autocomplete-123">
-      <FormField.Label>No clear button</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={Autocomplete} showClearButton={false} />
-      </FormField.Field>
-    </FormField>
-  );
-};

package/dist/mdx/labs-react/combobox/examples/RTL.tsx

@@ -1,90 +0,0 @@
-import React, {ReactNode, ReactElement, FC, ChangeEvent} from 'react';
-import {
-  Combobox,
-  ComboboxProps,
-  ComboBoxMenuItemGroup,
-} from '@workday/canvas-kit-labs-react/combobox';
-import {FormField} from '@workday/canvas-kit-react/form-field';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {CanvasProvider, ContentDirection, ExtractProps} from '@workday/canvas-kit-react/common';
-
-const autocompleteResult = (
-  textModifier: number,
-  disabled: boolean
-): ReactElement<ExtractProps<typeof StyledMenuItem>> => (
-  <StyledMenuItem isDisabled={disabled}>
-    Result
-    <span>
-      num<span>ber</span>
-    </span>
-    {textModifier}
-  </StyledMenuItem>
-);
-
-const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
-  Array.apply(null, Array(count))
-    .map((_, i) => autocompleteResult(i, showDisabledItems && i === 0))
-    .splice(0, total);
-
-const groupOfResults = (
-  count: number,
-  showDisabledItems: boolean,
-  groupHeading: ReactNode = 'Group'
-): ComboBoxMenuItemGroup => ({
-  header: (
-    <StyledMenuItem>
-      <strong>{groupHeading}</strong>
-    </StyledMenuItem>
-  ),
-  items: simpleAutoComplete(count, showDisabledItems, 10),
-});
-
-const Autocomplete: FC<
-  Omit<ComboboxProps, 'children'> & {
-    group?: boolean;
-    showDisabledItems?: boolean;
-  }
-> = ({showClearButton, group, showDisabledItems = false, ...props}) => {
-  const [currentText, setCurrentText] = React.useState('');
-
-  const autocompleteCallback = (event: ChangeEvent<HTMLInputElement>): void => {
-    setCurrentText(event.target.value);
-  };
-
-  const textLength = currentText.length;
-  const groupLength = Math.floor(textLength / 2);
-
-  return (
-    <Combobox
-      autocompleteItems={
-        group
-          ? [
-              groupOfResults(groupLength, showDisabledItems, <em>Animals</em>),
-              groupOfResults(Math.min(1, groupLength), showDisabledItems, 'Cars'),
-            ]
-          : simpleAutoComplete(textLength, showDisabledItems, 10)
-      }
-      onChange={autocompleteCallback}
-      showClearButton={showClearButton == null ? true : showClearButton}
-      labelId="autocomplete-123"
-      initialValue="Test"
-      {...props}
-    >
-      <TextInput placeholder="Autocomplete" />
-    </Combobox>
-  );
-};
-
-export default () => {
-  return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <FormField id="rtl-autocomplete-123">
-        <FormField.Label>RTL Autocomplete example</FormField.Label>
-        <FormField.Field>
-          <FormField.Input as={Autocomplete} />
-        </FormField.Field>
-      </FormField>
-    </CanvasProvider>
-  );
-};

package/dist/mdx/labs-react/search-form/SearchForm.mdx

@@ -1,92 +0,0 @@
-import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import Basic from './examples/Basic';
-import Collapsed from './examples/Collapsed';
-import CustomTheme from './examples/CustomTheme';
-import Grow from './examples/Grow';
-import RTL from './examples/RTL';
-import Theming from './examples/Theming';
-import CustomStyles from './examples/CustomStyles';
-
-
-# Canvas Kit Search Form <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `SearchForm` in Labs has been deprecated and will be removed in a future major version. Please
-    use `Combobox` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage">
-    View Autocomplete Example
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-`SearchForm` is a search form that contains a `Combobox` for rendering search results. It's
-primarily intended to be used within a `Header`.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-labs-react
-```
-
-## Usage
-
-### Basic Example
-
-You will most likely use `SearchForm` within the context of a `Header` component, but it's helpful
-to see its functionality as a standalone component. Below is a basic example that filters results
-based on search input.
-
-<ExampleCodeBlock code={Basic} />
-
-### Grow
-
-If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to `true`.
-
-<ExampleCodeBlock code={Grow} />
-
-### Theming
-
-`SearchForm` can be themed to use one of the preset `SearchThemes`: `Light`, `Dark`, or
-`Transparent`. Below is an example of `SearchForm` using the `Dark` theme.
-
-<ExampleCodeBlock code={Theming} />
-
-You can also provide more specific theming values by providing specific `SearchThemeAttributes`.
-
-<ExampleCodeBlock code={CustomTheme} />
-
-Below is a table of attributes that can be supplied to `SearchForm`:
-
-<SymbolDoc name="SearchThemeAttributes" fileName="/labs-react/" />
-
-### RTL (Right-To-Left)
-
-`SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any
-additional configuration.
-
-<ExampleCodeBlock code={RTL} />
-
-### Collapsed
-
-<ExampleCodeBlock code={Collapsed} />
-
-### Custom Styles
-
-You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables
-and
-[createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs#stencils)
-to create a custom style for the `SearchForm` component.
-
-<ExampleCodeBlock code={CustomStyles} />
-
-Learn more in our
-[Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
-docs.
-
-## Component API
-
-### SearchForm
-
-<SymbolDoc name="SearchForm" fileName="/labs-react/" />

package/dist/mdx/labs-react/search-form/examples/Basic.tsx

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        autocompleteItems={menuItems}
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-      />
-    </Flex>
-  );
-};

package/dist/mdx/labs-react/search-form/examples/Collapsed.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
-import {Flex} from '@workday/canvas-kit-react/layout';
-
-const initialWineList = [
-  'Beaujolais',
-  'Bordeaux',
-  'Cabernet Sauvignon',
-  'Champagne',
-  'Chardonnay',
-  'Chianti',
-  'Malbec',
-  'Merlot',
-  'Pinot Grigio',
-  'Pinot Gris',
-  'Pinot Noir',
-  'Primitivo',
-  'Prosecco',
-  'Riesling',
-  'Rioja',
-  'Rosé',
-  'Sauvignon Blanc',
-  'Syrah',
-  'Zinfandel',
-];
-
-export default () => {
-  const [wineList, setWineList] = React.useState(initialWineList);
-  // Tracking the input value for onSubmit
-  const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
-
-  const filterMenuItems = e => {
-    setSearchInput(e.target.value);
-    const formattedValue = e.target.value.toLowerCase();
-
-    // Reset the list if the input is cleared
-    if (!formattedValue.length) {
-      setWineList(initialWineList);
-    } else {
-      const filteredItems = initialWineList.filter(wine =>
-        wine.toLowerCase().includes(formattedValue)
-      );
-      setWineList(filteredItems);
-    }
-  };
-
-  const handleSubmit = () => {
-    // We don't need to prevent the default event because SearchForm handles that internally
-    console.log(`Searching for: ${searchInput}`);
-  };
-
-  return (
-    <Flex minHeight={200} alignItems="flex-start" padding="xs">
-      <SearchForm
-        autocompleteItems={menuItems}
-        onInputChange={filterMenuItems}
-        onSubmit={handleSubmit}
-        isCollapsed
-      />
-    </Flex>
-  );
-};