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

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

@@ -1,68 +0,0 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
-import Basic from './examples/Basic';
-import DisabledItem from './examples/DisabledItem';
-import GroupOfResult from './examples/GroupOfResult';
-import Grow from './examples/Grow';
-import NoClearButton from './examples/NoClearButton';
-import RTL from './examples/RTL';
-
-
-# Combobox <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Combobox` 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">
-    Combobox Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-The term "Combobox" is based on the
-[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
-Authoring Practices Guide (APG):
-
-> A [combobox](https://w3c.github.io/aria/#combobox) is an input widget with an associated popup
-> that enables users to select a value for the combobox from a collection of possible values.
-
-Examples of a "combobox" would be date pickers, autocomplete, and select components.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-react
-```
-
-## Usage
-
-### Autocomplete
-
-<ExampleCodeBlock code={Basic} />
-
-### Grow
-
-<ExampleCodeBlock code={Grow} />
-
-### No Clear Button
-
-<ExampleCodeBlock code={NoClearButton} />
-
-### Group Of Result
-
-<ExampleCodeBlock code={GroupOfResult} />
-
-### Disabled Item
-
-<ExampleCodeBlock code={DisabledItem} />
-
-### RTL
-
-<ExampleCodeBlock code={RTL} />

package/dist/mdx/labs-react/combobox/examples/Basic.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>Autocomplete example</FormField.Label>
-      <FormField.Field>
-        <FormField.Input as={Autocomplete} />
-      </FormField.Field>
-    </FormField>
-  );
-};

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, 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 dir="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-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/" />