@wix/design-system/dist/types/SegmentedToggle/index.d.ts

@wix/design-system

import * as React from 'react';
import { IconElement, TooltipCommonProps } from '../common';

export interface SegmentedToggleProps {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** Specifies the initially selected option */
  defaultSelected?: React.ReactNode;
  /** Specifies whether an option is selected */
  selected?: React.ReactNode;
  /** Controls the size of the segmented toggle
   * @default 'medium'
   */
  size?: 'tiny' | 'small' | 'medium';
  /** Defines a callback function which is called every time option is clicked. Returns a selected element and its value. */
  onClick?: (event: React.SyntheticEvent, value: string) => void;
  /** Specifies whether interactions are disabled. */
  disabled?: boolean;
  /** Accepts <SegmentedToggle.Icon/> or <SegmentedToggle.Button/> as child items to list down available options */
  children: any[];
  /** Accessible label for the segmented toggle group */
  ariaLabel?: string;
  /** ID of element that labels the segmented toggle group */
  ariaLabelledby?: string;
  /** Makes the container take up entire width*/
  fullWidth?: boolean;
}

export type SegmentedToggleButtonProps = Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'onFocus' | 'onBlur' | 'type'
> & {
  prefixIcon?: IconElement;
  value?: string;
  /** Specifies whether an option is selected */
  selected?: boolean;
  /** Specifies whether interactions are disabled. */
  disabled?: boolean;
  /** Controls the size of the segmented toggle
   * @default 'medium'
   */
  size?: 'small' | 'medium' | 'tiny';
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  focusableOnFocus?: React.FocusEventHandler<HTMLButtonElement>;
  focusableOnBlur?: React.FocusEventHandler<HTMLButtonElement>;
  'aria-checked'?: boolean;
};

export declare const SegmentedToggleButton: React.FC<SegmentedToggleButtonProps>;

export type SegmentedToggleIconProps = Omit<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  'onFocus' | 'onBlur' | 'type'
> & {
  /** Specifies whether an option is selected */
  selected?: boolean;
  value?: string;
  tooltipText?: string;
  tooltipProps?: TooltipCommonProps;
  /** Specifies whether interactions are disabled. */
  disabled?: boolean;
  /** Controls the size of the segmented toggle
   * @default 'medium'
   */
  size?: 'small' | 'medium' | 'tiny';
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  'data-click'?: string;
  focusableOnFocus?: React.FocusEventHandler<HTMLButtonElement>;
  focusableOnBlur?: React.FocusEventHandler<HTMLButtonElement>;
  'aria-checked'?: boolean;
};
export class SegmentedToggleIcon extends React.Component<SegmentedToggleIconProps> {}

export default class SegmentedToggle extends React.Component<SegmentedToggleProps> {
  static Button: typeof SegmentedToggleButton;
  static Icon: typeof SegmentedToggleIcon;
}