@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
60 lines (59 loc) • 2.99 kB
TypeScript
/**
* Web StepIndicator Component
*
*/
import React from 'react';
import { AnchorAllProps } from '../anchor/Anchor';
import { StepIndicatorMouseEvent, StepIndicatorRenderCallback } from './StepIndicator';
export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
export type StepIndicatorItemProps = Omit<React.HTMLProps<HTMLElement>, 'title' | 'data'> & {
title: string | React.ReactNode;
/**
* If set to true, this item step will be set as the current current selected step. This can be used instead of `current_step` on the component itself.
*/
is_current?: boolean;
/**
* If set to true, this item step will be handled as an inactive step and will not be clickable.
* Defaults to `false`
*/
inactive?: boolean;
/**
* If set to true, this item step will not be clickable. Same as `inactive`, but will also add the `aria-disabled="true"` .
* Defaults to false.
*/
disabled?: boolean;
/**
* Is used to set the status text.
*/
status?: string | React.ReactNode;
/**
* Used to set the status state to be either `info`, `error` or `warn`.
* Defaults to `warn`.
*/
status_state?: StepIndicatorStatusState;
/**
* Callback function to manipulate or wrap the step item. Has to return a React Node. You receive an object `{ StepItem, element, attributes, props, context }`.
* @deprecated no longer does anything other than the `title` prop
*/
on_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
/**
* Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
*/
on_click?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
currentItemNum: number;
};
declare function StepIndicatorItem({ status_state: status_state_default, inactive: inactive_default, disabled: disabled_default, ...restOfProps }: StepIndicatorItemProps): import("react/jsx-runtime").JSX.Element;
export type StepItemButtonProps = AnchorAllProps & Pick<StepIndicatorItemProps, 'status' | 'status_state'>;
export declare function StepItemButton({ children, className, status, status_state, innerRef, ...props }: StepItemButtonProps): import("react/jsx-runtime").JSX.Element;
export type StepItemWrapperProps = React.HTMLProps<HTMLElement> & {
/** Content inside the step button */
children?: React.ReactNode;
/** @deprecated can only change the render of content inside the button */
number?: number;
/** @deprecated can only hide numbers in main component */
hide_numbers?: boolean;
/** @deprecated can only change the render of content inside the button */
status?: string | React.ReactNode;
};
export declare function StepItemWrapper({ children }: StepItemWrapperProps): import("react/jsx-runtime").JSX.Element;
export default StepIndicatorItem;