How to use the @zendeskgarden/container-selection.useSelection function in @zendeskgarden/container-selection

To help you get started, we’ve selected a few @zendeskgarden/container-selection examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github zendeskgarden / react-containers / packages / buttongroup / src / useButtonGroup.ts View on Github external
export function useButtonGroup(
  options: IUseButtonGroupProps
): UseButtonGroupReturnValue {
  const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection(
    options
  );

  const getGroupProps = ({ role = 'group', ...other } = {}) => {
    return {
      role,
      'data-garden-container-id': 'containers.buttongroup',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };
  };

  const getButtonProps = ({ role = 'button', selectedAriaKey = 'aria-pressed', ...other } = {}) => {
    return {
      role,
      selectedAriaKey,
github zendeskgarden / react-containers / packages / tabs / src / useTabs.ts View on Github external
export function useTabs({
  vertical,
  idPrefix,
  ...options
}: IUseTabsProps = {}): IUseTabsReturnValue {
  const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection({
    direction: vertical ? 'vertical' : 'horizontal',
    defaultSelectedIndex: 0,
    ...options
  });
  const [_id] = useState(idPrefix || generateId('garden-tabs-container'));
  const PANEL_ID = `${_id}--panel`;
  const TAB_ID = `${_id}--tab`;

  const getTabListProps = ({ role = 'tablist', ...other }: React.HTMLProps = {}) => {
    return {
      role,
      'aria-orientation': vertical ? 'vertical' : 'horizontal',
      'data-garden-container-id': 'containers.tabs',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };
github zendeskgarden / react-containers / packages / pagination / src / usePagination.ts View on Github external
export function usePagination(
  options: IUsePaginationProps
): IUsePaginationReturnValue {
  const {
    selectedItem,
    focusedItem,
    getContainerProps: getControlledContainerProps,
    getItemProps
  } = useSelection(options);

  const getContainerProps = ({ ...props } = {} as any) => {
    return {
      'data-garden-container-id': 'containers.pagination',
      'data-garden-container-version': PACKAGE_VERSION,
      ...props
    };
  };

  const getPreviousPageProps = ({ ariaLabel, ...props } = {} as any) => {
    return {
      'aria-label': ariaLabel || 'Previous Page',
      ...props
    };
  };

@zendeskgarden/container-selection

Containers relating to selection in the Garden Design System

Apache-2.0
Latest version published 3 months ago

Package Health Score

83 / 100
Full package analysis