@salt-ds/lab 1.0.0-alpha.0

package/dist-types/tabs/TabsTypes.d.ts

@@ -0,0 +1,94 @@
+import { AriaAttributes, HTMLAttributes, KeyboardEvent, MouseEvent, ReactElement } from "react";
+import { orientationType, OverflowSource } from "../responsive";
+import { EditableLabelProps } from "../editable-label";
+import { ExitEditModeHandler } from "./useEditableItem";
+export interface FocusAPI {
+    focus: () => void;
+}
+export interface TabDescriptor extends OverflowSource {
+    element?: JSX.Element;
+}
+export declare type TabsSource = string[] | TabDescriptor[];
+export declare type navigationProps = Pick<TabProps, "onFocus" | "onKeyDown">;
+export declare type composableTabProps = navigationProps & Pick<TabProps, "onClick" | "onEnterEditMode" | "onExitEditMode" | "onMouseDown">;
+export declare type TabstripVariant = "primary" | "tertiary";
+export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * when true Tabs may be re-arranged by dragging individual Tabs to new position within Tabstrip.
+     */
+    allowDragDrop?: boolean;
+    /**
+     * Boolean that indicates if tabs are centered on the container
+     */
+    centered?: boolean;
+    defaultSource?: TabsSource;
+    /**
+     *  index value of Selected Tab, used in uncontrolled mode
+     */
+    defaultActiveTabIndex?: number;
+    editing?: boolean;
+    /**
+     * Boolean that enables add new tab
+     */
+    enableAddTab?: boolean;
+    /**
+     * @deprecated
+     * Boolean that enables closing tabs
+     */
+    enableCloseTab?: boolean;
+    /**
+     * Boolean that enables renaming a tab
+     */
+    enableRenameTab?: boolean;
+    keyBoardActivation?: "manual" | "automatic";
+    onAddTab?: () => void;
+    onActiveChange?: (tabIndex: number) => void;
+    onCloseTab?: (tabIndex: number) => void;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    orientation?: orientationType;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: ExitEditModeHandler;
+    /**
+     * Boolean that indicates whether to enable overflow dropdown or not
+     */
+    overflowMenu?: boolean;
+    promptForNewTabName?: boolean;
+    showActivationIndicator?: boolean;
+    source?: TabsSource;
+    /**
+     *  index value of Active Tab, used in controlled mode
+     */
+    activeTabIndex?: number;
+    /**
+     * Set variant - defaults 'primary'
+     */
+    variant?: TabstripVariant;
+}
+export declare type exitEditHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface responsiveDataAttributes {
+    "data-index": number;
+    "data-overflowed"?: boolean;
+    "data-priority": number;
+}
+export declare type TabProps = Omit<HTMLAttributes<HTMLElement>, "onClick" | "onKeyUp"> & {
+    ariaControls?: AriaAttributes["aria-controls"];
+    closeable?: boolean;
+    draggable?: boolean;
+    dragging?: boolean;
+    editable?: boolean;
+    editing?: EditableLabelProps["editing"];
+    focused?: boolean;
+    focusVisible?: boolean;
+    focusedChildIndex?: number;
+    selected?: boolean;
+    index?: number;
+    label?: EditableLabelProps["defaultValue"];
+    onClick?: (e: MouseEvent, index: number) => void;
+    onClose?: (index: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: exitEditHandler;
+    onKeyUp?: (e: KeyboardEvent, index: number) => void;
+    orientation?: "horizontal" | "vertical";
+    tabChildIndex?: number;
+};
+export declare type TabElement = ReactElement<TabProps>;

package/dist-types/tabs/Tabstrip.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { FocusAPI, TabstripProps } from "./TabsTypes";
+import "./Tabstrip.css";
+import "./ThemeTabstrip.css";
+export declare const Tabstrip: React.ForwardRefExoticComponent<TabstripProps & React.RefAttributes<FocusAPI>>;

package/dist-types/tabs/drag-drop/Draggable.d.ts

@@ -0,0 +1,10 @@
+import { MutableRefObject } from "react";
+import { Rect } from "./dragDropTypes";
+import "./Draggable.css";
+export declare const Draggable: import("react").ForwardRefExoticComponent<{
+    wrapperClassName: string;
+    element: HTMLElement;
+    rect: Rect;
+    scale?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const createDragSpacer: (transitioning?: MutableRefObject<boolean> | undefined) => HTMLElement;

package/dist-types/tabs/drag-drop/DropIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Rect } from "./dragDropTypes";
+import "./DropIndicator.css";
+export declare const DropIndicator: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    rect: Rect;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/tabs/drag-drop/drag-utils.d.ts

@@ -0,0 +1,48 @@
+import { orientationType } from "../../responsive";
+import { Direction } from "./dragDropTypes";
+export declare type MeasuredDropTarget = {
+    currentIndex: number;
+    dataIndex?: number;
+    element: HTMLElement;
+    index: number;
+    isDraggedElement: boolean;
+    isOverflowIndicator?: boolean;
+    start: number;
+    end: number;
+    mid: number;
+    size: number;
+};
+export declare type targetType = {
+    element: HTMLElement | null;
+    index: number;
+    isLast?: boolean;
+};
+declare type Dimension = keyof Pick<DOMRect, "width" | "height">;
+export declare const measureElementSizeAndPosition: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => number[];
+export declare const dimensions: (orientation: orientationType) => {
+    CLIENT_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    CONTRA: "width" | "height" | "x" | "y" | "top" | "right" | "bottom" | "left";
+    CONTRA_POS: "clientX" | "clientY";
+    DIMENSION: "width" | "height";
+    END: "width" | "height" | "x" | "y" | "top" | "right" | "bottom" | "left";
+    POS: "clientX" | "clientY";
+    SCROLL_POS: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    START: "width" | "height" | "x" | "y" | "top" | "right" | "bottom" | "left";
+} | {
+    CLIENT_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    CONTRA: "width" | "height" | "x" | "y" | "top" | "right" | "bottom" | "left";
+    CONTRA_POS: "clientX" | "clientY";
+    DIMENSION: "width" | "height";
+    END: "width" | "height" | "x" | "y" | "top" | "right" | "bottom" | "left";
+    POS: "clientX" | "clientY";
+    SCROLL_POS: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    START: "width" | "height" | "x" | "y" | "top" | "right" | "bottom" | "left";
+};
+export declare const getDraggedItem: (measuredItems: MeasuredDropTarget[]) => MeasuredDropTarget;
+export declare const moveDragItem: (measuredItems: MeasuredDropTarget[], dropTarget: MeasuredDropTarget) => MeasuredDropTarget[];
+export declare const isDraggedElement: (item: MeasuredDropTarget) => boolean;
+export declare const measureDropTargets: (container: HTMLElement, orientation: orientationType, draggedItem: HTMLElement, itemQuery?: string | undefined) => MeasuredDropTarget[];
+export declare const getNextDropTarget: (dropTargets: MeasuredDropTarget[], pos: number, direction: Direction) => MeasuredDropTarget | null;
+export {};

package/dist-types/tabs/drag-drop/dragDropTypes.d.ts

@@ -0,0 +1,28 @@
+import { MouseEventHandler, RefObject } from "react";
+import { orientationType } from "../../responsive";
+export declare type dragStrategy = "drop-indicator" | "natural-movement";
+export declare type Direction = "fwd" | "bwd";
+export declare const FWD: Direction;
+export declare const BWD: Direction;
+export declare type Rect = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export declare type DragHookResult = {
+    draggable: JSX.Element | null;
+    dropIndicator: JSX.Element | null;
+    draggedItemIndex?: number;
+    isDragging: boolean;
+    onMouseDown?: MouseEventHandler;
+    revealOverflowedItems: boolean;
+};
+export declare type DragDropHook = (props: {
+    allowDragDrop?: boolean | dragStrategy;
+    extendedDropZone?: boolean;
+    onDrop: (fromIndex: number, toIndex: number) => void;
+    orientation: orientationType;
+    containerRef: RefObject<HTMLElement>;
+    itemQuery?: string;
+}) => DragHookResult;

package/dist-types/tabs/drag-drop/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./dragDropTypes";
+export * from "./useDragDrop";

package/dist-types/tabs/drag-drop/useDragDrop.d.ts

@@ -0,0 +1,2 @@
+import { DragDropHook } from "./dragDropTypes";
+export declare const useDragDrop: DragDropHook;

package/dist-types/tabs/drag-drop/useDragDropNaturalMovement.d.ts

@@ -0,0 +1,2 @@
+import { DragDropHook } from "./dragDropTypes";
+export declare const useDragDropNaturalMovement: DragDropHook;

package/dist-types/tabs/drag-drop/useDragSpacers.d.ts

@@ -0,0 +1,7 @@
+import { MeasuredDropTarget } from "./drag-utils";
+import { Direction } from "./dragDropTypes";
+export declare const useDragSpacers: () => {
+    displaceItem: (item: MeasuredDropTarget | null | undefined, size: number, useTransition?: boolean, direction?: Direction | undefined) => void;
+    displaceLastItem: (item: MeasuredDropTarget, size: number, useTransition?: boolean) => void;
+    clearSpacers: () => void;
+};

package/dist-types/tabs/drag-drop/useTransition.d.ts

@@ -0,0 +1,3 @@
+export declare const useTransition: () => {
+    applyTransition: (element: HTMLElement, property: string, value: string) => void;
+};

package/dist-types/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./TabActivationIndicator";
+export * from "./Tabstrip";
+export * from "./Tab";
+export * from "./TabPanel";
+export * from "./Tabs";
+export * from "./TabsTypes";

package/dist-types/tabs/useActivationIndicator.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from "react";
+import { orientationType } from "../responsive";
+declare type activationIndicatorStyles = {
+    height?: number;
+    left?: number;
+    top?: number;
+    width?: number;
+    hasChanged?: boolean;
+};
+export declare function useActivationIndicator({ rootRef, tabId, orientation, }: {
+    rootRef: RefObject<HTMLDivElement | null>;
+    tabId?: string;
+    orientation: orientationType;
+}): activationIndicatorStyles;
+export {};

package/dist-types/tabs/useEditableItem.d.ts

@@ -0,0 +1,17 @@
+import { KeyboardEvent } from "react";
+import { OverflowItem } from "../responsive";
+export declare type ExitEditModeHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface Editable {
+    editing: boolean;
+    onEnterEditMode: () => void;
+    onExitEditMode: ExitEditModeHandler;
+    setEditing: (value: boolean) => void;
+}
+export interface EditableItemHookProps extends Partial<Editable> {
+    highlightedIdx: number;
+    indexPositions: OverflowItem[];
+}
+export interface EditableItemHookResult extends Editable {
+    onKeyDown: (evt: KeyboardEvent) => void;
+}
+export declare const useEditableItem: ({ editing: editingProp, highlightedIdx, indexPositions, onEnterEditMode: onEnterEditModeProp, onExitEditMode: onExitEditModeProp, }: EditableItemHookProps) => EditableItemHookResult;

package/dist-types/tabs/useItemsWithIds.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+import { TabDescriptor } from "./TabsTypes";
+export declare const useItemsWithIds: (children: ReactNode, id?: string) => [TabDescriptor[], (id: string) => TabDescriptor];

package/dist-types/tabs/useKeyboardNavigation.d.ts

@@ -0,0 +1,29 @@
+import { FocusEvent, FocusEventHandler, KeyboardEvent, MouseEvent, MouseEventHandler } from "react";
+import { OverflowItem } from "../responsive";
+declare type orientationType = "horizontal" | "vertical";
+export interface ContainerNavigationProps {
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+interface TabstripNavigationHookProps {
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    indexPositions: OverflowItem[];
+    keyBoardActivation?: "manual" | "automatic";
+    orientation: orientationType;
+    selectedIndex: number;
+}
+interface TabstripNavigationHookResult {
+    containerProps: ContainerNavigationProps;
+    highlightedIdx: number;
+    focusTab: (tabIndex: number, immediateFocus?: boolean, withKeyboard?: boolean) => void;
+    focusVisible: number;
+    focusIsWithinComponent: boolean;
+    onClick: (evt: MouseEvent, tabIndex: number) => void;
+    onFocus: (evt: FocusEvent<HTMLElement>) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+}
+export declare const useKeyboardNavigation: ({ defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, indexPositions, keyBoardActivation, orientation, selectedIndex: selectedTabIndex, }: TabstripNavigationHookProps) => TabstripNavigationHookResult;
+export {};

package/dist-types/tabs/useSelection.d.ts

@@ -0,0 +1,14 @@
+import { KeyboardEvent, MouseEvent } from "react";
+export declare const isTabElement: (el: HTMLElement) => boolean;
+export declare const useSelection: ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp, }: {
+    defaultSelected?: number | undefined;
+    highlightedIdx: number;
+    onSelectionChange?: ((tabIndex: number) => void) | undefined;
+    selected?: number | undefined;
+}) => {
+    activateTab: (tabIndex: number) => void;
+    isControlled: boolean;
+    onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    selected: number;
+};

package/dist-types/tabs/useTabs.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { TabDescriptor } from "./TabsTypes";
+export interface TabsHookProps {
+    activeTabIndex?: number;
+    children: ReactNode;
+    defaultActiveTabIndex?: number;
+    id?: string;
+    onActiveChange?: (tabIndex: number) => void;
+}
+export interface TabsHookResult {
+    activeTabIndex?: number;
+    id: string;
+    onActiveChange?: (tabIndex: number) => void;
+    tabPanel?: ReactNode;
+    tabs: TabDescriptor[];
+}
+export declare const useTabs: ({ activeTabIndex: activeTabIndexProp, children, defaultActiveTabIndex, id: idProp, onActiveChange, }: TabsHookProps) => TabsHookResult;

package/dist-types/tabs/useTabstrip.d.ts

@@ -0,0 +1,42 @@
+import { RefObject } from "react";
+import { ContainerNavigationProps } from "./useKeyboardNavigation";
+import { dragStrategy, DragHookResult } from "./drag-drop";
+import { ExitEditModeHandler, EditableItemHookResult } from "./useEditableItem";
+import { OverflowCollectionHookResult } from "../responsive";
+import { composableTabProps, navigationProps, TabDescriptor, TabElement } from "./TabsTypes";
+interface tabstripHookProps {
+    activeTabIndex?: number;
+    allowDragDrop?: boolean | dragStrategy;
+    collectionHook: OverflowCollectionHookResult;
+    defaultActiveTabIndex?: number;
+    defaultTabs?: TabDescriptor[];
+    editing?: boolean;
+    enableAddTab: boolean;
+    idRoot: string;
+    innerContainerRef: RefObject<HTMLDivElement>;
+    keyBoardActivation?: "manual" | "automatic";
+    onActiveChange?: (tabIndex: number) => void;
+    onCloseTab?: (indexPosition: number) => void;
+    onEnterEditMode?: () => void;
+    onExitEditMode?: ExitEditModeHandler;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    orientation: "horizontal" | "vertical";
+    promptForNewTabName?: boolean;
+    tabs?: TabDescriptor[] | TabElement[];
+}
+interface tabstripHookResult extends DragHookResult, Pick<EditableItemHookResult, "editing"> {
+    activateTab: (tabIndex: number) => void;
+    activeTabIndex: number;
+    addTab: (indexPosition?: number) => void;
+    closeTab: (indexPosition: number) => void;
+    containerProps: ContainerNavigationProps;
+    controlledSelection: boolean;
+    highlightedIdx: number;
+    focusVisible: number;
+    focusIsWithinComponent: boolean;
+    focusTab: (tabIndex: number, immediateFocus?: boolean) => void;
+    navigationProps: navigationProps;
+    tabProps: composableTabProps;
+}
+export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDragDrop, collectionHook, defaultActiveTabIndex, editing: editingProp, idRoot, innerContainerRef, keyBoardActivation, onActiveChange, onCloseTab, onEnterEditMode, onExitEditMode, onMoveTab, orientation, promptForNewTabName, }: tabstripHookProps) => tabstripHookResult & DragHookResult;
+export {};

package/dist-types/toggle-button/ToggleButton.d.ts

@@ -0,0 +1,13 @@
+import { ButtonProps } from "@salt-ds/core";
+import { SyntheticEvent } from "react";
+import "./ToggleButton.css";
+export declare type ToggleButtonToggleEventHandler = (event: SyntheticEvent<HTMLButtonElement>, toggled: boolean) => void;
+export interface ToggleButtonProps extends ButtonProps {
+    "aria-label"?: string;
+    "data-button-index"?: number;
+    toggled?: boolean;
+    tooltipText?: string;
+    disableTooltip?: boolean;
+    onToggle?: ToggleButtonToggleEventHandler;
+}
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/toggle-button/ToggleButtonGroup.d.ts

@@ -0,0 +1,19 @@
+import { ButtonVariant } from "@salt-ds/core";
+import { HTMLAttributes, ReactElement, SyntheticEvent } from "react";
+import { Orientation } from "./internal/ToggleButtonGroupContext";
+import "./ToggleButtonGroup.css";
+export declare type ToggleButtonGroupChangeEventHandler = (event: SyntheticEvent<HTMLButtonElement>, index: number, toggled: boolean) => void;
+export interface ToggleButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    "aria-label"?: string;
+    disabled?: boolean;
+    disableTooltip?: boolean;
+    defaultSelectedIndex?: number;
+    focusableWhenDisabled?: boolean;
+    selectedIndex?: number;
+    orientation?: Orientation;
+    variant?: ButtonVariant;
+    width?: number;
+    children: Array<ReactElement>;
+    onChange?: ToggleButtonGroupChangeEventHandler;
+}
+export declare const ToggleButtonGroup: import("react").ForwardRefExoticComponent<ToggleButtonGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ToggleButton";
+export * from "./ToggleButtonGroup";

package/dist-types/toggle-button/internal/ToggleButtonGroupContext.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ButtonVariant } from "@salt-ds/core";
+export declare type Orientation = "horizontal" | "vertical";
+export interface ToggleButtonGroupContextProps {
+    disabled?: boolean;
+    disableFocus?: boolean;
+    disableTooltip?: boolean;
+    focusableWhenDisabled?: boolean;
+    register: (node: HTMLButtonElement | null, index: number) => void;
+    unregister: (index: number) => void;
+    orientation?: Orientation;
+    variant?: ButtonVariant;
+}
+export declare const ToggleButtonGroupContext: import("react").Context<ToggleButtonGroupContextProps | undefined>;

package/dist-types/tokenized-input/TokenizedInput.d.ts

@@ -0,0 +1,20 @@
+import { ComponentType } from "react";
+import { TokenizedInputBaseProps } from "./TokenizedInputBase";
+import { UseTooltipProps } from "../tooltip";
+import "./TokenizedInput.css";
+export declare type StringToItem<Item> = (selectedItems: Array<Item>, value: string) => Item | null | undefined;
+export declare type ChangeHandler<Item> = (selectedItems: Item[] | undefined) => void;
+export interface TokenizedInputProps<Item> extends Omit<TokenizedInputBaseProps<Item>, "activeIndices" | "focused" | "highlightedIndex" | "helpers" | "onRemoveItem"> {
+    Tooltip?: ComponentType;
+    delimiter?: string | Array<string>;
+    disableAddOnBlur?: boolean;
+    initialSelectedItems?: Array<Item>;
+    onChange?: ChangeHandler<Item>;
+    onCollapse?: () => void;
+    onExpand?: () => void;
+    stringToItem?: StringToItem<Item>;
+    tooltipEnterDelay?: UseTooltipProps["enterDelay"];
+    tooltipLeaveDelay?: UseTooltipProps["leaveDelay"];
+    tooltipPlacement?: UseTooltipProps["placement"];
+}
+export declare const TokenizedInput: import("react").ForwardRefExoticComponent<TokenizedInputProps<unknown> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/tokenized-input/TokenizedInputBase.d.ts

@@ -0,0 +1,32 @@
+import { ChangeEventHandler, FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEventHandler, ReactElement, ReactEventHandler, Ref, SyntheticEvent } from "react";
+import { ButtonProps } from "@salt-ds/core";
+import { TokenizedInputHelpers, TokenizedInputState } from "./useTokenizedInput";
+import { InputProps } from "../input";
+export declare type RemoveItemHandler = (itemIndex: number) => void;
+export declare type ItemToString<Item> = (item: Item) => string;
+export declare type ExpandButtonProps = Pick<ButtonProps, "role" | "aria-roledescription" | "aria-describedby"> & {
+    accessibleText?: string;
+};
+export interface TokenizedInputBaseProps<Item> extends Partial<TokenizedInputState<Item>>, Omit<HTMLAttributes<HTMLDivElement>, "onFocus" | "onBlur" | "onChange" | "onKeyUp" | "onKeyDown"> {
+    ExpandButtonProps?: ExpandButtonProps;
+    InputProps?: Pick<InputProps, "aria-describedby" | "inputProps">;
+    disabled?: boolean;
+    expandButtonRef?: Ref<HTMLButtonElement>;
+    helpers: TokenizedInputHelpers<Item>;
+    inputRef?: Ref<HTMLInputElement>;
+    itemToString?: ItemToString<Item>;
+    onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;
+    onKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;
+    onRemoveItem?: RemoveItemHandler;
+    onInputBlur?: FocusEventHandler<HTMLInputElement>;
+    onInputFocus?: FocusEventHandler<HTMLInputElement>;
+    onInputChange?: ChangeEventHandler<HTMLInputElement>;
+    onInputSelect?: ReactEventHandler<HTMLInputElement>;
+    onClick?: (event: SyntheticEvent<HTMLElement>) => void;
+    onClear?: ReactEventHandler;
+}
+export declare const TokenizedInputBase: <Item>(p: TokenizedInputBaseProps<Item> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReactElement<TokenizedInputBaseProps<Item>, string | import("react").JSXElementConstructor<any>>;

package/dist-types/tokenized-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./TokenizedInput";
+export * from "./TokenizedInputBase";
+export * from "./useTokenizedInput";

package/dist-types/tokenized-input/internal/InputPill.d.ts

@@ -0,0 +1,31 @@
+import { MutableRefObject } from "react";
+import { PillProps } from "../../pill";
+export declare type InputPillProps = Omit<PillProps<"basic" | "closable">, "variant" | "onDelete" | "clickable"> & {
+    /**
+     * An ref object holds pills index map to width.
+     */
+    pillsRef: MutableRefObject<{
+        [index: number]: number | undefined;
+    }>;
+    /**
+     * Index of the pill within Input.
+     */
+    index: number;
+    /**
+     * Whether the pill is the last visible one within Input.
+     */
+    lastVisible?: boolean;
+    /**
+     * Whether the pill is highlighted.
+     */
+    highlighted?: boolean;
+    /**
+     * Whether the pill is active.
+     */
+    active?: boolean;
+    /**
+     * Callback when pill is deleted.
+     */
+    onDelete?: (index: number) => void;
+};
+export declare const InputPill: import("react").NamedExoticComponent<InputPillProps>;

package/dist-types/tokenized-input/internal/InputRuler.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from "react";
+import "./InputRuler.css";
+/**
+ * This hidden component is used to wrap a copy of an input value
+ * so that we can use it to determine the input width dynamically
+ */
+export declare const InputRuler: import("react").ForwardRefExoticComponent<{
+    value: InputHTMLAttributes<HTMLInputElement>["value"];
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/tokenized-input/internal/calcFirstHiddenIndex.d.ts

@@ -0,0 +1,4 @@
+export declare function calcFirstHiddenIndex({ containerWidth, pillWidths, }?: {
+    containerWidth?: number;
+    pillWidths?: number[];
+}): number | null;

package/dist-types/tokenized-input/internal/defaultItemToString.d.ts

@@ -0,0 +1 @@
+export declare const defaultItemToString: (item: any) => string;

package/dist-types/tokenized-input/internal/getCursorPosition.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from "react";
+export declare const getCursorPosition: (inputRef: MutableRefObject<HTMLInputElement | null>) => number;

package/dist-types/tokenized-input/internal/isPlainObject.d.ts

@@ -0,0 +1,4 @@
+export declare type PlainObject = {
+    [name: string]: any;
+};
+export declare const isPlainObject: (obj: any) => obj is PlainObject;

package/dist-types/tokenized-input/internal/useResizeObserver.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from "react";
+/**
+ * This monitors the size of a component and calls `onSizeChange` callback
+ * every time when size changes.
+ */
+export declare function useResizeObserver<Element extends HTMLElement>(onSizeChange: (entries: ResizeObserverEntry[], observer?: ResizeObserver) => void): Ref<Element>;

package/dist-types/tokenized-input/internal/useWidth.d.ts

@@ -0,0 +1,6 @@
+import { Density } from "@salt-ds/core";
+export declare const getWidth: (node: HTMLElement | null) => number;
+/**
+ * This records the width of a component when it's rendered
+ */
+export declare const useWidth: (density: Density) => [(newNode: any) => void, number];

package/dist-types/tokenized-input/useTokenizedInput.d.ts

@@ -0,0 +1,39 @@
+import { Ref } from "react";
+import { TokenizedInputProps } from "./TokenizedInput";
+import { TokenizedInputBaseProps } from "./TokenizedInputBase";
+export interface TokenizedInputState<Item> {
+    activeIndices: Array<number>;
+    expanded: boolean | undefined;
+    focused: boolean;
+    highlightedIndex: number | undefined;
+    selectedItems: Array<Item>;
+    value: string | undefined;
+}
+export interface TokenizedInputHelpers<Item> {
+    cancelBlur: () => void;
+    setFocused: (expanded: boolean) => void;
+    setHighlightedIndex: (value?: number) => void;
+    setValue: (value: string) => void;
+    setSelectedItems: (selectedItems: Array<Item>) => void;
+    updateExpanded: (expanded: boolean) => void;
+}
+declare type useTokenizedInputResult<Item> = {
+    /**
+     * Used to do auto focus. It should be set to the actual input node.
+     */
+    inputRef: Ref<HTMLInputElement>;
+    /**
+     * The tokenized input state
+     */
+    state: TokenizedInputState<Item>;
+    /**
+     * Utility functions for modifying tokenized input state
+     */
+    helpers: TokenizedInputHelpers<Item>;
+    /**
+     * Properties applied to a basic tokenized input component
+     */
+    inputProps: Omit<TokenizedInputBaseProps<Item>, "helpers">;
+};
+export declare function useTokenizedInput<Item>(props: TokenizedInputProps<Item>): useTokenizedInputResult<Item>;
+export {};

package/dist-types/toolbar/Toolbar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ToolbarProps } from "./ToolbarProps";
+import "./Toolbar.css";
+/**
+ * The core Toolbar implementation, without the external wrapper provided by Toolbar.js
+ */
+export declare const Toolbar: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ButtonProps } from "@salt-ds/core";
+import "./ToolbarButton.css";
+export declare type ToolbarButtonProps = ButtonProps & {
+    overflowLabel?: string;
+    label?: string;
+};
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ButtonProps & {
+    overflowLabel?: string | undefined;
+    label?: string | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;