@procore/core-react/dist/SegmentedController/SegmentedController.d.ts

React library of Procore Design Guidelines

import React from 'react';
import type { SegmentedControllerProps, SegmentedControllerSegmentProps, SegmentedControllerTooltipProps } from './SegmentedController.types';
export declare function determineSelectedState({ active, selected, isSelected, }: {
    active?: boolean;
    isSelected: boolean;
    selected?: boolean;
}): boolean;
export declare const Segment: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & SegmentedControllerSegmentProps & React.RefAttributes<HTMLInputElement>>;
/**
 * @deprecated
 *
 * The `SegmentedController.Tooltip` component has been deprecated will be
 * removed in a future version.
 *
 * Tooltips are now built into `SegmentedController.Segment`s, and can be added
 * by configuring the `tooltip` prop.
 *
 * **Before**
 *
 * ```
 * <SegmentedController>
 *   <SegmentedController.Tooltip tooltip="Item 1 is the first item">
 *     <SegmentedController.Segment>
 *       Item 1
 *     </SegmentedController.Segment>
 *   </SegmentedController.Tooltip>
 * </SegmentedController>
 * ```
 *
 * **After**
 *
 * ```
 * <SegmentedController>
 *   <SegmentedController.Segment tooltip="Item 1 is the first item">
 *     Item 1
 *   </SegmentedController.Segment>
 * </SegmentedController>
 * ```
 *
 * @deprecatedSince 10.20.0
 */
export declare const Tooltip: React.ForwardRefExoticComponent<SegmentedControllerTooltipProps & React.RefAttributes<HTMLElement>>;
/**
 * @deprecated
 *
 * This `SegmentedController.State` utility has been deprecated. Please just
 * use a simple state management hook instead.
 *
 *
 * **Before**
 *
 * ```
 * <SegmentedController.State>
 *   {({ selectedIndex, setSelected }) => (
 *     <SegmentedController>
 *       <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>
 *         Item 1
 *       </SegmentedController.Segment>
 *     </SegmentedController>
 *   )}
 * </SegmentedController.State>
 * ```
 *
 * **After**
 *
 * ```
 * const [selected, setSelected] = React.useState(0)
 *
 * <SegmentedController onChange={setSelected}>
 *   <SegmentedController.Segment active={selectedIndex === 0}>
 *     Item 1
 *   </SegmentedController.Segment>
 * </SegmentedController>
 * ```
 *
 * @deprecatedSince 10.20.0
 */
export declare const State: (props: any) => React.JSX.Element;
/**

 Segmented controllers allow users to switch between related but mutually
 exclusive content or actions.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-segmentedcontroller--demo)

 @see [Design Guidelines](https://design.procore.com/segmented-controller)

 */
export declare const SegmentedController: React.ForwardRefExoticComponent<SegmentedControllerProps & React.RefAttributes<HTMLDivElement>> & {
    Segment: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & SegmentedControllerSegmentProps & React.RefAttributes<HTMLInputElement>>;
    State: (props: any) => React.JSX.Element;
    Tooltip: React.ForwardRefExoticComponent<SegmentedControllerTooltipProps & React.RefAttributes<HTMLElement>>;
};